feat: add apps page

src/routes/main.js

@@ -51,6 +51,10 @@ router.get('/', (req, res) => {
   res.render('index', { highlights, meta: getMetaFromReq(req) })
 })
 
+router.get('/apps', (req, res) => {
+  res.render('apps', { title: 'Apps', meta: getMetaFromReq(req) })
+})
+
 router.get('/privacy', (req, res) => {
   const rawContent = readFileSync('./content/privacy-policy.md', 'utf8')
   const content = md.render(rawContent)

static-src/styles/layout.scss

@@ -56,7 +56,6 @@ header {
         }
         
         a.logo {
-            flex: 1;
             display: flex;
             align-items: center;
             gap: 16px;
@@ -189,4 +188,29 @@ section {
             vertical-align: sub;
         }
     }
+}
+
+.screenshots {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    padding: 8px;
+    background-color: #fafafa;
+    overflow-y: scroll;
+
+    img {
+        height: 400px;
+    }
+}
+
+.banners {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    a {
+        img {
+            height: 32px;
+        }
+    }
 }

views/apps.pug

@@ -0,0 +1,46 @@
+extends templates/base.pug
+
+block content
+  section
+    h1 Apps
+    h2 Keyoxide mobile
+    .screenshots
+      img(src="/static/img/keyoxide_mobile_dark_home.jpg"
+        alt="Screenshot of Keyoxide mobile app")
+      img(src="/static/img/keyoxide_mobile_dark_profile.jpg"
+        alt="Screenshot of Keyoxide mobile app")
+      img(src="/static/img/keyoxide_mobile_light_home.jpg"
+        alt="Screenshot of Keyoxide mobile app")
+    h3 Download
+    .banners
+      a(href="https://f-droid.org/packages/org.keyoxide.keyoxide/")
+        img(src="https://img.shields.io/badge/F--Droid-1976D2?style=for-the-badge&logo=f-droid&logoColor=white",
+          alt="Get it on F-Droid") 
+      a(href="https://play.google.com/store/apps/details?id=org.keyoxide.keyoxide&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1")
+        img(src="https://img.shields.io/badge/Google_Play-414141?style=for-the-badge&logo=google-play&logoColor=white",
+          alt="Get it on Google Play") 
+      a(href="https://apps.apple.com/us/app/keyoxide/id1670664318")
+        img(src="https://img.shields.io/badge/App_Store-0D96F6?style=for-the-badge&logo=app-store&logoColor=white",
+          alt="Get it on App Store") 
+      a(href="https://codeberg.org/Berker/keyoxide-flutter/releases")
+        img(src="https://img.shields.io/badge/Codeberg.org-2185d0?style=for-the-badge&logo=codeberg&logoColor=white",
+          alt="Get it on Codeberg.org")
+    p
+      | Developer: 
+      a(href="https://keyoxide.org/aspe:keyoxide.org:WHM3OC7UFRARIVEXDXUV4GVXNQ") Berker Sen
+      br
+      | Source code: 
+      a(href="https://codeberg.org/Berker/keyoxide-flutter") Codeberg.org
+    
+    hr
+    
+    h2 Keyoxide ASP web tool
+    .screenshots 
+      img(src="/static/img/keyoxide_asp_web_home.jpg"
+        alt="Screenshot of Keyoxide ASP web tool")
+    p
+      | Homepage: 
+      a(href="https://asp.keyoxide.org") asp.keyoxide.org
+      br
+      | Source code: 
+      a(href="https://codeberg.org/keyoxide/kx-aspe-web") Codeberg.org

views/article.pug

@@ -3,4 +3,4 @@ extends templates/base.pug
 block content
   section
     h1= title
-    !{ content }
+    | !{ content }

views/partials/header.pug

@@ -2,7 +2,9 @@ header
   .container
     nav
       a.logo(href='/' aria-label='Home') Keyoxide
+      .spacer
       .links
         a.text(href='https://docs.keyoxide.org/getting-started') Getting started
+        a.text(href='/apps') Apps
         a.text(href='https://docs.keyoxide.org') Docs
         a.text(href='https://blog.keyoxide.org') Blog