Merge branch 'beta' into 'master'

client/public/assets/styling/general.css

@@ -1,15 +1,36 @@
+:root {
+  --primary-color: #272736;
+  --text-color: #ffffeb;
+
+  /*  Overriding DP DS */
+  --body-background: var(--primary-color);
+  --body-color: var(--text-color);
+
+  --nav-color: var(--primary-color);
+  --nav-background: var(--text-color);
+
+  --a-color: var(--text-color);
+}
+
 nav {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
+.question {
+  font-style: italic;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --primary-color: #ffffeb;
+    --text-color: #272736;
+  }
+}
+
 @media (max-width: 420px) {
   #app {
     margin-left: 0vw;
     margin-right: 0vw;
   }
 }
-
-.question {
-  font-style: italic;
-}

client/public/assets/styling/themes.css

@@ -1,18 +0,0 @@
-:root {
-  --primary-color: #272736;
-  --text-color: #ffffeb;
-
-  /*  Overriding DP DS */
-  --body-background: var(--primary-color);
-  --body-color: var(--text-color);
-
-  --nav-color: var(--primary-color);
-  --nav-background: var(--text-color);
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --primary-color: #ffffeb;
-    --text-color: #272736;
-  }
-}

client/public/index.html

@@ -2,19 +2,23 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta
+  name="description"
+  content="Raymon's personal website about his life and projects with a blog.">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Raymon Zutekouw</title>
 
+  <link rel="preload" href="./lib/me.mjs" as="script" crossorigin="anonymous" type="application/javascript">
+  <link rel="preload" href="index.mjs" as="script" crossorigin="anonymous" type="application/javascript">
+  <link rel="dns-prefetch" href="https://cdn.statically.io">
+
   <link defer
     rel="stylesheet"
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
   <link defer rel="stylesheet" href="css/general.css" media="all">
 
-  <script defer type="module" src="index.mjs"></script>
-
 </head>
 <body>
   <div id="app">
@@ -45,5 +49,6 @@
       </p>
     </div>
   </div>
+  <script async type="module" src="index.mjs"></script>
 </body>
 </html>

client/public/posts.html

@@ -2,19 +2,22 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta
+  name="description"
+  content="Raymon typing nonsense on his blog">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Raymon Zutekouw</title>
 
+  <link rel="preload" href="./lib/remote.mjs" as="script" crossorigin="anonymous" type="application/javascript">
+  <link rel="preload" href="posts.mjs" as="script" crossorigin="anonymous" type="application/javascript">
+
   <link defer
     rel="stylesheet"
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
   <link defer rel="stylesheet" href="css/general.css" media="all">
 
-  <script defer type="module" src="posts.mjs"></script>
-
 </head>
 <body>
   <noscript>
@@ -32,6 +35,7 @@
 
     <!-- Placeholder for posts -->
     <div id="posts"></div>
+    <script async type="module" src="posts.mjs"></script>
   </div>
 </body>
 </html>

client/public/posts.mjs

@@ -15,7 +15,7 @@ async function showPost(id) {
 
   post.content.split('\n').forEach(paragraph => {
     const p = document.createElement("p")
-    p.textContent = paragraph
+    p.innerHTML = paragraph
     postsDOM.appendChild(p)
   });
 }

client/public/qa.html

@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta
+  name="description"
+  content="Raymon answering common questions">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Raymon Zutekouw</title>
 
@@ -10,7 +13,6 @@
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
   <link defer rel="stylesheet" href="css/general.css" media="all">
 
 </head>

client/public/robots.txt

@@ -0,0 +1 @@
+User-agent: *

server/routes/api/posts.js

@@ -56,9 +56,9 @@ routes.set('/:id', async (req, res) => {
   else res.send(results[0])
 })
 
-// For the sitemap.xml, will be listed in the XML Sitemap Index
+// Dynamic RSS feed
-routes.set('/urls', async (req, res) => {
+routes.set('/rss.xml', async (req, res) => {
-  const re = /(\/api\/)?(.*)\/urls/g
+  const re = /(\/api\/)?(.*)\/rss/g
   const result = [...req.raw.originalUrl.matchAll(re)]
   if (!result) {
     notFoundResponse(res)
@@ -68,16 +68,23 @@ routes.set('/urls', async (req, res) => {
   const endpoint = result [1] ? result[1][2] : result[0][2]
   // Assumes https
   const BASE_URL = 'https://' + req.raw.hostname + endpoint
-  const urls = posts.map(post => 
+  const ITEMS = posts.map(post =>
-    `\n   <url>
+    `\r\n    <item>
-      <loc>${BASE_URL}/${post._id}</loc>
+      <title>${post.title}</title>
-      <lastmod>${post.date}</lastmod>
+      <link>https://${req.raw.hostname}/posts?post=${post._id}</link>
-      <changefreq>never</changefreq>
+      <guid>https://${req.raw.hostname}/posts?post=${post._id}</guid>
-      <priority>0.9</priority>
+      <description>${post.content}</description>
-   </url>`
+    </item>`
   ).join("\n")
-  const xml = `<?xml version="1.0" encoding="UTF-8"?>\r<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  const xml = `<?xml version="1.0" encoding="UTF-8" ?>\n<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
-               ${urls}\n\r</urlset>`
+  <channel>
+    <atom:link href="https://${req.raw.hostname}/api/posts/rss.xml" rel="self" type="application/rss+xml" />
+    <title>Posts</title>
+    <link>https://${req.raw.hostname}</link>
+    <description>Personal blog</description>
+    <language>en-us</language>
+    ${ITEMS}
+  </channel>\n</rss>`
 
   res.header('Content-Type', 'application/xml')
   res.status(200).send(xml)