Move to Server Side Render with expressjs

Backend Rewritten in typescript

Signed-off-by: Marc Pervaz Boocha <mboocha@sudomsg.xyz>

 On branch main
 Your branch is up to date with 'origin/main'.

 Changes to be committed:
	new file:   .editorconfig
	modified:   .gitignore
	new file:   Containerfile
	renamed:    favicon/icon.svg -> assets/favicon.svg
	modified:   assets/index.css
	deleted:    assets/index.js
	deleted:    assets/mandle.png
	deleted:    assets/sw.js
	new file:   assets/syntax.css
	modified:   deploy
	deleted:    eleventy.config.js
	deleted:    favicon/192.png
	deleted:    favicon/512.png
	deleted:    favicon/icon.ico
	deleted:    license
	modified:   package-lock.json
	modified:   package.json
	deleted:    src/_data/env.js
	deleted:    src/_data/metadata.js
	deleted:    src/_includes/base.njk
	deleted:    src/_includes/page.njk
	deleted:    src/_includes/post.njk
	deleted:    src/about.njk
	deleted:    src/blog.njk
	new file:   src/client/index.ts
	deleted:    src/gen/atom.njk
	deleted:    src/gen/error.njk
	deleted:    src/gen/feedjson.11ty.js
	deleted:    src/gen/gen.11tydata.js
	deleted:    src/gen/manifest.11ty.js
	deleted:    src/gen/metadata.11ty.js
	deleted:    src/gen/robot.njk
	deleted:    src/gen/sitemap.njk
	deleted:    src/index.njk
	deleted:    src/post/post.11tydata.js
	new file:   src/server/app.ts
	new file:   src/server/build.ts
	new file:   src/server/content/about.ts
	new file:   src/server/content/blog.ts
	new file:   src/server/content/feed.ts
	new file:   src/server/content/index.ts
	new file:   src/server/content/robots.ts
	new file:   src/server/content/sitemap.ts
	new file:   src/server/content/webmanifest.ts
	new file:   src/server/errHanadler.ts
	new file:   src/server/img.ts
	new file:   src/server/metadata.ts
	new file:   src/server/router.ts
	new file:   src/server/server.ts
	new file:   src/server/template/Base.ts
	new file:   src/server/template/Page.ts
	new file:   src/server/template/Post.ts
	new file:   src/server/template/atom.ts
	new file:   src/server/template/header.ts
	new file:   src/server/template/html.ts
	new file:   src/server/template/sitemap.ts
	new file:   src/server/template/syntax.ts
	new file:   src/server/template/table.ts
	new file:   src/server/template/vdom.ts
	new file:   src/server/template/xml.ts
	new file:   src/server/utils/createUrl.ts
	new file:   src/server/utils/curl.ts
	new file:   src/server/utils/isDefined.ts
	new file:   src/server/utils/isDevel.ts
	new file:   src/server/utils/relDir.ts
	new file:   src/server/utils/relUrl.ts
	new file:   src/server/utils/schema.ts
	new file:   src/server/utils/setStingRoute.ts
	new file:   src/server/utils/strHandler.ts
	new file:   src/worker/sw.ts
	new file:   src/worker/tsconfig.json
	new file:   tsconfig.json

6 files changed, 286 insertions, 149 deletions

diff --git a/assets/favicon.svg b/assets/favicon.svg
new file mode 100644
index 0000000..c10bfd4
--- /dev/null
+++ b/assets/favicon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024" height="1024" version="2.0" xmlns="http://www.w3.org/2000/svg">
+ <path d="m537.73 236-39.053 155.84h92.002l39.43-155.84h60.082l-39.43 155.84h91.625v57.83h-105.52l-31.543 125.42h93.878v57.454h-108.52l-39.053 155.46h-60.082l39.43-155.46h-92.376l-39.43 155.46h-59.707l39.053-155.46h-96.883v-57.454h111.53l31.543-125.42h-99.888v-57.83h113.78l39.053-155.84zm39.053 213.67h-92.002l-31.543 125.42h92.376z" dominant-baseline="central" fill="#8b0000" stroke-width=".7512" style="fill:#501616" aria-label="#"/>
+</svg>
+
diff --git a/assets/index.css b/assets/index.css
index 96e775c..1cfcc15 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -1,37 +1,15 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
 :root {
     color-scheme: dark light;
 }
 
-@media screen {
-    body {
-        max-width: min(calc(100vw - 1rem), 58rem);
-        min-height: calc(100vh - 1rem);
-        box-sizing: border-box;
-        margin: 0.5rem auto;
-        display: grid;
-        grid: "head" auto "main" auto "footer" 1fr / auto;
-    }
-    body>header {
-        grid-area: head;
-    }
-     :is(header, footer) {
-        background-color: rgb(139 0 0);
-        font-weight: bold;
-        color: rgb(255 255 255);
-        padding: 1rem;
-    }
-     :is(header, footer) *:any-link {
-        text-decoration: none;
-    }
-    body>footer {
-        align-self: end;
-        grid-area: footer;
-    }
-    body>main {
-        margin: 0.5rem 0;
-        grid-area: main;
-        hyphens: auto;
-    }
+body {
+    text-align: justify;
 }
 
 * :any-link {
@@ -39,87 +17,211 @@
     text-decoration: underline;
 }
 
-* .header-anchor:any-link{
-	text-decoration: inherit;
+* .header-anchor:any-link {
+    text-decoration: inherit;
 }
 
 * .header-anchor:any-link:hover,
 * .header-anchor:any-link:active {
-        font-style: inherit;
+    font-style: inherit;
 }
 
-@media screen {
-    * :any-link:hover,
-    * :any-link:active {
-        font-style: italic;
-    }
+figcaption,
+caption {
+    text-align: center;
+    font-size: 80%;
+    caption-side: bottom
 }
 
-a[href^="mailto:"]::after {
-    content: "📧";
+figure,
+aside,
+table,
+iframe,
+img,
+picture,
+input,
+select,
+textarea {
+    max-width: 90%;
+    width: fit-content;
+    padding: 1rem;
+    margin: auto;
+    text-align: center;
 }
 
-.err {
-    color: rgb(139 0 0);
+figure,
+aside,
+table {
+    border: solid medium;
+    border-collapse: collapse;
+    break-inside: avoid;
 }
 
-aside {
-    width: 40%;
-    padding: 0.5rem;
-    margin-left: 0.5rem;
-    float: right;
-    background-color: rgb(139 0 0);
-    color: rgb(255 255 255);
+picture>img {
+    width: fit-content;
+    padding: 0;
+    margin: 0;
 }
 
-iframe,
-img,
-input,
-select,
-textarea {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
+tr,
+td,
+th {
+    margin: 1rem;
+    padding: 1rem;
+    border-collapse: collapse;
+}
+
+tr,
+td,
+th,
+thead {
+    border: solid;
+}
+
+
+code,
+pre {
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    hyphens: none;
+    white-space: pre-wrap;
+}
+
+code,
+pre.pad {
+    line-height: 1.5;
+}
+
+pre {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+
+:not(pre)>code {
+    padding: .1em;
+}
+
+a[href^="mailto:"]::after {
+    content: "📧";
 }
 
-:is(iframe, img, input, select, textarea).side {
+.side ,aside {
     max-width: 40%;
-    padding: 0.5rem;
+    margin: 1rem;
     float: right;
 }
 
-@media screen and (max-width: 30rem) {
-     :is(iframe, img, input, select, textarea).side {
-        width: 100%;
+aside {
+    border: solid medium;
+}
+
+@media (max-width: 40rem) {
+    .side, aside {
+        margin: inherit;
+        max-width: 100%;
         float: none;
     }
+
+    nav>a {
+        display: block;
+        margin: auto;
+        text-align: center;
+        padding: 16px;
+    }
+
+    nav>a.navlinks {
+        display: none;
+    }
+
+    nav>a.navlinks.navopen {
+        display: block;
+    }
 }
 
 @media screen {
+
+    * :any-link:hover,
+    * :any-link:active {
+        font-style: italic;
+    }
+
+    body {
+        max-width: min(calc(100dvw - 1rem), 58rem);
+        min-height: calc(100dvh - 1rem);
+        padding: 0.5rem;
+        margin: 0.5rem auto;
+        display: grid;
+        grid: "head" auto "main" auto "footer" 1fr / auto;
+    }
+
+    body>header {
+        grid-area: head;
+    }
+
+    :is(header, footer) {
+        background-color: rgb(139 0 0);
+        font-weight: bold;
+        color: white;
+        padding: 1rem;
+        max-width: inherit;
+    }
+
+    :is(header, footer) *:any-link {
+        text-decoration: none;
+    }
+
+    body>footer {
+        align-self: end;
+        grid-area: footer;
+    }
+
+    body>main {
+        margin: 0.5rem 0;
+        grid-area: main;
+        hyphens: auto;
+        max-width: inherit;
+    }
+
+    thead,
+    th {
+        background: rgb(139 0 0);
+        color: white;
+        border: rgb(139 0 0) solid;
+    }
+
+    aside {
+        background-color: rgb(139 0 0);
+        color: white;
+        border: rgb(229 0 0) solid medium;
+    }
+
     nav>a {
         margin-right: 1rem;
         padding-left: 0;
         padding-right: 0;
     }
-    @media (max-width: 30rem) {
-        nav>a {
-            display: block;
-            margin: auto;
-            text-align: center;
-            padding: 16px;
-        }
-        nav>a.navlinks {
-            display: none;
-        }
-        nav>a.navlinks.navopen {
-            display: block;
-        }
-    }
+
 }
 
+
 @media print {
+
     header,
     footer {
         display: none;
     }
-}
+
+    section,
+    table {
+        orphans: 4;
+        break-inside: auto;
+    }
+
+    tr {
+        break-inside: avoid;
+        break-before: auto;
+    }
+}
\ No newline at end of file
diff --git a/assets/index.js b/assets/index.js
deleted file mode 100644
index 8ee4964..0000000
--- a/assets/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-document.getElementById("nav-toogle").addEventListener("click", async() => {
-    const navlinks = Array.from(document.getElementsByClassName("navlinks"));
-    for (const navlink of navlinks) {
-        navlink.classList.toggle("navopen");
-    }
-    return false;
-});
-
-//window.addEventListener("load", async() => {
-//    if ("serviceWorker" in navigator) {
-//        navigator.serviceWorker.register("/sw.js", { type: "module" });
-//    }
-//});
diff --git a/assets/mandle.png b/assets/mandle.png
deleted file mode 100644
index c1195fd..0000000
--- a/assets/mandle.png
+++ /dev/null
diff --git a/assets/sw.js b/assets/sw.js
deleted file mode 100644
index 0f2a4de..0000000
--- a/assets/sw.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import timestamp from "/assets/metadata.js"
-
-const sw_cache = {
-    offline: "/offline.html",
-    default: [
-        "/assets/index.css",
-        "/vendor/prism.css",
-        "/assets/index.js",
-        "/favicon/icon.svg",
-        "/offline.html",
-    ],
-    store:      timestamp,
-};
-
-(function() {
-    self.addEventListener("install", event => {
-        self.skipWaiting();
-        event.waitUntil((async() => {
-            const cache = await self.caches.open(sw_cache.store);
-            return cache.addAll(sw_cache.default);
-        })());
-    });
-
-    self.addEventListener("activate", event => {
-        event.waitUntil((async() => {
-            const keys = await self.caches.keys();
-            return Promise.all(keys.map(key => {
-                if (key !== sw_cache.store) {
-                    return self.caches.delete(key);
-                }
-            }));
-        })());
-    });
-
-    self.addEventListener("fetch", event => {
-        event.respondWith((async() => {
-            if (event.request.method != "GET") {
-                return fetch(event.request);
-            }
-
-            const req_url = new URL(event.request.url);
-            if (req_url.origin != self.location.origin) {
-                return fetch(event.request);
-            }
-
-            const cacheres = await self.caches.match(event.request);
-            return cacheres || (async() => {
-                try {
-                    const response = await self.fetch(event.request);
-                    const cache = await self.caches.open(sw_cache.store);
-                    cache.put(event.request, response.clone());
-                    return response;
-                } catch {
-                    return self.caches.match(sw_cache.offline);
-                }
-            })();
-        })());
-    });
-})();
diff --git a/assets/syntax.css b/assets/syntax.css
new file mode 100644
index 0000000..ceee943
--- /dev/null
+++ b/assets/syntax.css
@@ -0,0 +1,102 @@
+/**modified from the default highlight theme**/
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-section,
+.hljs-link {
+	color: rgb(83, 83, 0);
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.hljs-keyword,
+	.hljs-selector-tag,
+	.hljs-literal,
+	.hljs-section,
+	.hljs-link {
+		color: yellow;
+	}
+}
+
+
+.hljs-string {
+	color: darkviolet;
+}
+
+@media (prefers-color-scheme: dark) {
+	.hljs-string {
+		color: violet;
+	}
+}
+
+.hljs-type,
+.hljs-template-tag {
+	color: darkblue;
+}
+
+@media (prefers-color-scheme: dark) {
+	.hljs-type,
+	.hljs-template-tag  {
+		color: lightblue;
+	}
+}
+
+.hljs-title,
+.hljs-name,
+.hljs-attribute,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+	color: darkred;
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.hljs-title,
+	.hljs-name,
+	.hljs-attribute,
+	.hljs-symbol,
+	.hljs-bullet,
+	.hljs-built_in,
+	.hljs-addition,
+	.hljs-variable,
+	.hljs-template-variable {
+		color: lightcoral;
+	}
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+	color: darkgreen;
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.hljs-comment,
+	.hljs-quote,
+	.hljs-deletion,
+	.hljs-meta {
+		color: lightgreen;
+	}
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-title,
+.hljs-section,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-strong {
+	font-weight: bold;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
\ No newline at end of file