Add 404.html router page

diff --git a/404.html b/404.html
new file mode 100644 (file)
index 0000000..fd61d8f
--- /dev/null
+++ b/404.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <html lang="en">
+    <head>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="description" content="Ardis Lu's personal blog." />
+      <link rel="icon" href="/favicon.ico" />
+      <link rel="stylesheet" href="/style.css" />
+      <title>ardislu.dev</title>
+    </head>
+    <body>
+      <header>
+        <a href="/">
+          <img src="/home.svg" width="24" height="24" alt="Home" />
+        </a>
+      </header>
+      <main>
+        <article></article>
+      </main>
+      <script>
+        const article = document.getElementsByTagName("article")[0];
+        article.innerHTML = '<div class="skeleton-line"></div>'.repeat(20);
+
+        const mapping = {
+          TITLE: "h1",
+          SUBTITLE: "p",
+          HEADING_1: "h1",
+          HEADING_2: "h2",
+          HEADING_3: "h3",
+          NORMAL_TEXT: "p",
+        };
+
+        const inject = (googleDoc) => {
+          document.title = googleDoc.title;
+          article.innerHTML = "";
+          for (let content of googleDoc.body.content) {
+            const tag =
+              mapping[content?.paragraph?.paragraphStyle?.namedStyleType];
+            if (tag) {
+              const el = document.createElement(tag);
+              el.innerHTML = content.paragraph.elements[0].textRun.content;
+              article.insertAdjacentElement("beforeend", el);
+            }
+          }
+        };
+
+        (async () => {
+          const proxyUrl =
+            "https://script.google.com/macros/s/AKfycbzMHxwypbwsccBq6RH8LDCAOpM02C4gbkljbcKHKFsoQTRE-f4XTIyswiaO0vshs-Kr/exec";
+          const documentId = window.location.pathname.split("/").pop();
+          const url = `${proxyUrl}?https://docs.googleapis.com/v1/documents/${documentId}`;
+
+          await fetch(url)
+            .then((httpResponse) => httpResponse.json())
+            .then((googleDoc) => inject(googleDoc));
+        })();
+      </script>
+    </body>
+  </html>
+</html>

diff --git a/home.svg b/home.svg
new file mode 100644 (file)
index 0000000..19f6372
--- /dev/null
+++ b/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
\ No newline at end of file