make my blog public, finally

2024-07-20 15:28:02 +03:00 · 2024-07-20 15:28:02 +03:00 · 7846a9b24f
commit 7846a9b24f
parent d67aeebd85
7 changed files with 254 additions and 67 deletions
--- a/src/web/blog.html
+++ b/src/web/blog.html
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"
+        integrity="sha512-eu9vkh+EbAsW3fMmPTj/DP5W3UegIdu0Z/OABMocvoofx43MYBkcQ9hRIVxZndV1vcCYQwBg+U1PkWl04TD0Jg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <link rel="preconnect" href="https://rsms.me/">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
+    <!-- Primary Meta Tags -->
+    <title>soph's blog and information</title>
+    <meta name="title" content="soph's blog and information" />
+    <meta name="description" content="yourfriend.lol v2, soph's blog and information"" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property=" og:type" content="website" />
+    <meta property="og:url" content="https://sad.ovh" />
+    <meta property="og:title" content="soph's blog and information" />
+    <meta property="og:description" content="yourfriend.lol v2, soph's blog and information" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://sad.ovh" />
+    <meta property="twitter:title" content="soph's blog and information" />
+    <meta property="twitter:description" content="yourfriend.lol v2, soph's blog and information"" />
+
+    <meta name=" viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css">
+
+    <style>
+
+    </style>
+</head>
+
+<body>
+    <h1> sophie's blog </h1>
+    <a id="return_back" href="/blog" style="display:none;font-size:xx-large;">return back?</a>
+
+    <ul id="html_list" style="display: none">
+    </ul>
+    <div id="renderer"></div>
+    <div style="color:red;font-size:larger;font-weight:bolder;display:none;" id="error">
+        Blog post <span></span> does not exist.
+    </div>
+    <script type="module">
+        function parseMetadata(file) {
+            const splitfile = file.split("\n");
+            const properties = {};
+            for (let i = 0; i < splitfile.length; i++) {
+                const line = splitfile[i];
+                if(/^=+$/gm.test(line)) break;
+                const parts = line.split("=");
+                if(parts.length !== 2) break;
+                properties[parts[0].trim()] = parts[1].trim();
+            }
+            return properties;
+        }
+
+        const uriParams = new URLSearchParams(location.search);
+        if (uriParams.has("md")) {
+            const error = document.getElementById("error");
+            const renderer = document.getElementById('renderer');
+            const return_back = document.getElementById("return_back");
+            const req = await fetch("/blogs/" + uriParams.get("md"));
+            if (req.status != 200) {
+                error.style.display = "block";
+            } else {
+                let text = await req.text();
+                const metadata = parseMetadata(text);
+                text = text.split('\n');
+                text.splice(0, Object.keys(metadata).length);
+                text.unshift(metadata.title)
+                text = text.join("\n");
+                renderer.innerHTML = marked.parse(text)
+            }
+            return_back.style.display = "block";
+        } else {
+            const blog_posts = ["opensource-watch-comparison.md", "raspberry-pi-struggles.md", "why-i-syncthing.md"];
+            const html_list = document.getElementById("html_list");
+            html_list.style.display = "block";
+            for (const blog_post of blog_posts) {
+                const req = await fetch("/blogs/" + blog_post);
+                const blog_post_contents = await req.text();
+                let metadata;
+                try {
+                    metadata = parseMetadata(blog_post_contents);
+                } catch {
+                    console.error("ran into issue loading metadata for blog post " + blog_post)
+                    continue;
+                }
+                const li = document.createElement("li");
+                const a = document.createElement("a");
+                a.href = "/blog?md=" + encodeURIComponent(blog_post);
+                a.innerText = `${metadata.title} (created ${new Date(metadata.time * 1000).toGMTString()})`;
+                li.appendChild(a);
+                html_list.appendChild(li);
+
+            }
+        }
+    </script>
+</body>
+
+</html>