Minor optimization

.gitignore

@@ -105,6 +105,7 @@ dist
 
 # Production Files
 /Production
+/build
 
 # We do love MacOS
 .DS_Store

App.js

@@ -48,13 +48,13 @@ App.get(
     '/favicon.ico',
     WrapAsync(async (req, res) => {
         res.sendFile(path.resolve(__dirname, 'assets/Icon.ico'))
-    }),
+    })
 )
 App.get(
     '/robots.txt',
     WrapAsync(async (req, res) => {
         res.sendFile(path.resolve(__dirname, 'assets/robots.txt'))
-    }),
+    })
 )
 
 // Default Routing
@@ -65,13 +65,13 @@ App.get(
         let Lang = require(GetLanguagePath(req))
         let Page = await GeneratePageCached(req, Article, Lang, AvailablePages, AvailablePages.Home, '')
         res.send(Page)
-    }),
+    })
 )
 App.get(
     '/:path',
     WrapAsync(async (req, res) => {
         res.redirect('/' + GetLanaguageShort(req) + '/' + req.params.path)
-    }),
+    })
 )
 App.get(
     '/:localization/:path',
@@ -101,15 +101,15 @@ App.get(
                     AvailablePages,
                     AvailablePages.Dynamic,
                     '',
-                    req.params.path + '.md',
+                    req.params.path + '.md'
                 )
                 res.send(Page)
             } else {
                 Log('Requested page not found (404): ' + req.path)
                 await SendError(404, req, res, AvailablePages, AvailablePages.Dynamic, '', Languages)
             }
         }
-    }),
+    })
 )
 
 // Error Handling Middleware
@@ -126,6 +126,7 @@ App.use(ErrorHandler)
 // Start Server
 let Port = process.env.PORT || parseInt(process.argv[2])
 App.listen(Port, () => {
+    console.clear()
     Log('Listening on port ' + Port)
     Log('Link: http://localhost:' + Port)
 })

css/All.css

@@ -0,0 +1,6 @@
+body {
+    caret-color: var(--accent-color);
+    text-rendering: optimizeLegibility;
+    image-rendering: optimizeQuality;
+    overscroll-behavior: contain;
+}

css/CoverBox.css

@@ -4,4 +4,5 @@
     z-index: 2;
     transition: calc(var(--transition-length) / 3);
     pointer-events: none;
+    will-change: transform;
 }

css/Fonts.css

@@ -1,7 +1,6 @@
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-BoldItalic.woff2') format('woff2'),
+    src: url('/fonts/Metropolis-BoldItalic.woff2') format('woff2'),
         url('/fonts/Metropolis-BoldItalic.woff') format('woff');
     font-weight: bold;
     font-style: italic;
@@ -10,8 +9,7 @@
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-MediumItalic.woff2') format('woff2'),
+    src: url('/fonts/Metropolis-MediumItalic.woff2') format('woff2'),
         url('/fonts/Metropolis-MediumItalic.woff') format('woff');
     font-weight: 500;
     font-style: italic;
@@ -20,28 +18,23 @@
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-Light.woff2') format('woff2'),
-        url('/fonts/Metropolis-Light.woff') format('woff');
+    src: url('/fonts/Metropolis-Light.woff2') format('woff2'), url('/fonts/Metropolis-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-Medium.woff2') format('woff2'),
-        url('/fonts/Metropolis-Medium.woff') format('woff');
+    src: url('/fonts/Metropolis-Medium.woff2') format('woff2'), url('/fonts/Metropolis-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-ThinItalic.woff2') format('woff2'),
+    src: url('/fonts/Metropolis-ThinItalic.woff2') format('woff2'),
         url('/fonts/Metropolis-ThinItalic.woff') format('woff');
     font-weight: 100;
     font-style: italic;
@@ -50,28 +43,23 @@
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-Bold.woff2') format('woff2'),
-        url('/fonts/Metropolis-Bold.woff') format('woff');
+    src: url('/fonts/Metropolis-Bold.woff2') format('woff2'), url('/fonts/Metropolis-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-Thin.woff2') format('woff2'),
-        url('/fonts/Metropolis-Thin.woff') format('woff');
+    src: url('/fonts/Metropolis-Thin.woff2') format('woff2'), url('/fonts/Metropolis-Thin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Metropolis';
-    src:
-        url('/fonts/Metropolis-LightItalic.woff2') format('woff2'),
+    src: url('/fonts/Metropolis-LightItalic.woff2') format('woff2'),
         url('/fonts/Metropolis-LightItalic.woff') format('woff');
     font-weight: 300;
     font-style: italic;
@@ -89,7 +77,7 @@ h1 {
     font-size: 60px;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     h1 {
         font-size: 30px;
     }

css/MobileButtons.css

@@ -9,6 +9,7 @@
 .MobileButton p {
     text-align: right;
 }
+
 .MobileButton svg {
     position: absolute;
     right: 0px;
@@ -18,17 +19,20 @@
 .MobileButtonPrev {
     top: 50px;
 }
+
 .MobileButtonNext {
     bottom: 110px;
 }
 
 .Footer2 {
     display: block;
 }
+
 .MobileButton {
     display: none;
 }
-@media screen and (max-width: 960px) {
+
+@media screen and (max-aspect-ratio: 1/1) {
     .Footer2 {
         display: none;
     }

css/Presentation.css

@@ -56,7 +56,7 @@
     display: block;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .MobileHidden {
         display: none;
     }
@@ -111,12 +111,12 @@
     margin-top: 15vh;
     margin-left: auto;
     margin-right: auto;
-    width: 50vw;
+    width: min(50vw, calc(100vw - 140px));
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .Slide .SlideInner {
-        width: 70vw;
+        width: min(70vw, calc(100vw - 140px));
         margin-top: 7.5vh;
     }
 }
@@ -135,7 +135,7 @@ a {
     margin-bottom: 20px;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .Author {
         padding-top: 30px;
     }
@@ -223,13 +223,10 @@ a {
     border-radius: 6px;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .SidebarScrollPercentage {
         display: none;
     }
-    .Sidebar {
-        display: none;
-    }
 }
 
 .Icon {
@@ -302,7 +299,7 @@ a {
     margin-bottom: 5px;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .Flexbox {
         display: block;
     }
@@ -347,7 +344,7 @@ a {
     margin-top: 10px;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .SlideInner p {
         font-size: 14px;
         margin-top: 10px;
@@ -359,9 +356,8 @@ a {
     height: 100vh;
     margin-left: auto;
     margin-right: auto;
-    padding-left: 20vw;
-    padding-right: 20vw;
-    z-index: 3;
+    padding-left: max(20vw, 70px);
+    padding-right: max(20vw, 70px);
 }
 
 .Scrollable h3 {
@@ -396,7 +392,7 @@ strong {
     font-weight: lighter;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-aspect-ratio: 1/1) {
     .ArticleTitle {
         font-size: 30px;
     }
@@ -405,8 +401,8 @@ strong {
         height: 100vh;
         margin-left: auto;
         margin-right: auto;
-        padding-left: 10vw;
-        padding-right: 10vw;
+        padding-left: max(10vw, 70px);
+        padding-right: max(10vw, 70px);
     }
     .GridItem {
         margin-bottom: 30px;

css/ScrollOpacity.css

@@ -1,6 +1,11 @@
 .ScrollLowOpacity {
     opacity: 0.5;
 }
+
+.ScrollLowOpacity:hover {
+    opacity: 1;
+}
+
 .ScrollAffectable {
     transition: var(--transition-length);
 }

css/Sharing.css

@@ -8,7 +8,7 @@
     position: relative;
 }
 
-@media only screen and (max-width: 960px) {
+@media only screen and (max-aspect-ratio: 1/1) {
     .ShareSection {
         width: 85%;
     }
@@ -91,6 +91,7 @@
 .ShareMaxWidth .Spaced {
     margin-left: 18px;
 }
+
 .ShareMaxWidth .SpacedMobile {
     margin-right: auto;
 }
@@ -108,6 +109,7 @@
     text-decoration: none;
     transition: var(--transition-length);
 }
+
 .ShareMaxWidth a:hover {
     background-color: var(--accent-color);
 }

generators/Head.js

@@ -1,10 +1,36 @@
 const { Localize } = require('./tools/LocaleTools')
+const fs = require('fs/promises')
+const fsdir = require('fs')
+
+let PostsList = (async () => {
+    let Posts = []
+    let AllPosts = fsdir.readdirSync(__dirname.replace('generators', 'posts/'))
+    for (let x = 0; x < AllPosts.length; x++) {
+        if (AllPosts[x].endsWith('.md')) {
+            let JSONstr = await fs.readFile(__dirname.replace('generators', 'posts/') + AllPosts[x], {
+                encoding: 'utf-8',
+            })
+            let Current = JSON.parse(JSONstr.split('}')[0] + '}')
+            if (Current.indexed) {
+                Posts.push({ data: Current, file: AllPosts[x] })
+            }
+        }
+    }
+    Posts.sort((a, b) => {
+        const FirstDate = new Date(a.data.date)
+        const SecondDate = new Date(b.data.date)
+
+        return SecondDate - FirstDate
+    })
+    return Posts
+})()
 
 const GenerateHead = async (Article, Locale) => {
     Article = JSON.parse(Article.split('}')[0] + '}')
     Output = `
         <link rel="manifest" href="/assets/manifest.json">
         <meta charset="utf-8">
+        <meta name="referrer" content="no-referrer">
     `
 
     let SiteTitle = Article.title + Localize(Locale, 'site_title_extension')
@@ -53,10 +79,18 @@ const GenerateHead = async (Article, Locale) => {
         <meta name="theme-color" content="#f0f0f0">
         <link rel="icon" href="/assets/Icon.svg" color="#ffffff">
         <link rel="mask-icon" href="/assets/Icon.svg" color="#ffffff">
+        <link rel="dns-prefetch" href="https://strayfade.com">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';"">
 
         <link rel="stylesheet" href="/build/production.css" type="text/css">
         <link rel="preload" href="/build/production.js" as="script">
     `
+    ;(await PostsList).forEach((Post) => {
+        Output += `
+        <link rel="prefetch" href="/${Locale.locale_title}/${Post.file.replace('.md', '')}">
+        <link rel="prerender" href="/${Locale.locale_title}/${Post.file.replace('.md', '')}">
+        `
+    })
     return Output
 }