feat: prepare static files

JonDotsoy · Aug 8, 2024 · 42e3369 · 42e3369
1 parent 545bb9b
commit 42e3369
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 2 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -31,6 +31,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact

diff --git a/make-your-life-in-weeks-md.ts b/make-your-life-in-weeks-md.ts
@@ -1,7 +1,6 @@
 // make-your-life-in-weeks-md.ts
 interface Writer {
     write(chunk: string): void
-    end(): Promise<any> | any
 }
 
 export const DAY_MS = 24 * 60 * 60 * 1000;
@@ -42,7 +41,7 @@ export class TitleElement {
     }
 }
 
-export async function makeYourLifeInWeeks(birth: Date, writer: Writer) {
+export function makeYourLifeInWeeks(birth: Date, writer: Writer) {
     const currentTime = { current: new Date(birth) };
 
     const weeksIndexState = { current: 0 };

diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/base-min.css">
+    <title>Document</title>
+    <style>
+        :root {
+            --color-1: #00a6fb;
+            --color-2: #0582ca;
+            --color-3: #006494;
+            --color-4: #003554;
+            --color-5: #051923;
+            --color-text-1: #d1dfe7;
+            --color-text-2: #0582ca;
+            --color-text-3: #006494;
+            --color-text-4: #003554;
+            --color-text-5: #051923;
+        }
+
+        .form-birth-date {
+            display: grid;
+            justify-content: center;
+            justify-items: center;
+            align-items: center;
+        }
+
+        .form-birth-date p {
+            font-weight: bold;
+            font-size: 1.5em;
+        }
+
+        .form-birth-date input {
+            padding: 10px;
+            width: 20em;
+            border-radius: 0.5em;
+            border: solid 0.05em;
+        }
+
+        .render-container {
+            max-width: 600px;
+            margin: auto;
+            padding: 1em;
+        }
+
+        .render-container pre {
+            overflow: auto;
+            border-radius: 0.5em;
+            padding: 2em;
+            background: var(--color-4);
+            color: var(--color-text-1);
+        }
+
+        .render-container .btn-copy {
+            display: grid;
+            grid-template-columns: auto auto;
+            border-radius: 0.5em;
+        }
+
+        .solar--copy-bold {
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.24 2h-3.894c-1.764 0-3.162 0-4.255.148c-1.126.152-2.037.472-2.755 1.193c-.719.721-1.038 1.636-1.189 2.766C3 7.205 3 8.608 3 10.379v5.838c0 1.508.92 2.8 2.227 3.342c-.067-.91-.067-2.185-.067-3.247v-5.01c0-1.281 0-2.386.118-3.27c.127-.948.413-1.856 1.147-2.593s1.639-1.024 2.583-1.152c.88-.118 1.98-.118 3.257-.118h3.07c1.276 0 2.374 0 3.255.118A3.6 3.6 0 0 0 15.24 2'/%3E%3Cpath fill='%23000' d='M6.6 11.397c0-2.726 0-4.089.844-4.936c.843-.847 2.2-.847 4.916-.847h2.88c2.715 0 4.073 0 4.917.847S21 8.671 21 11.397v4.82c0 2.726 0 4.089-.843 4.936c-.844.847-2.202.847-4.917.847h-2.88c-2.715 0-4.073 0-4.916-.847c-.844-.847-.844-2.21-.844-4.936z'/%3E%3C/svg%3E");
+            background-color: currentColor;
+            -webkit-mask-image: var(--svg);
+            mask-image: var(--svg);
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-size: 100% 100%;
+            mask-size: 100% 100%;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="form-birth-date">
+        <p>When you were born?</p>
+        <input id="birthSelect" type="date" value="1991-07-18">
+    </div>
+
+    <main class="render-container">
+        <button id="btn-copy" class="btn-copy">
+            <span class="solar--copy-bold"></span>
+            Copy
+        </button>
+        <pre><code id="render"></code></pre>
+    </main>
+
+    <script type="module">
+        import { makeYourLifeInWeeks } from "./make-your-life-in-weeks-md.js"
+
+        const atom = (init) => {
+            const state = { current: init };
+            const subs = new Set();
+            return {
+                value: () => state.current,
+                set: (value) => {
+                    state.current = value
+                    subs.forEach(sub => sub(state.current))
+                },
+                listen: (cb) => {
+                    subs.add(cb)
+                    return () => subs.delete(cb)
+                },
+                subscribe: (cb) => {
+                    subs.add(cb)
+                    cb(state.current)
+                    return () => subs.delete(cb)
+                }
+            }
+        }
+
+        /** @type {HTMLInputElement} */
+        const btnCopy = document.getElementById('btn-copy');
+        const birthSelect = document.getElementById('birthSelect');
+        const render = document.getElementById('render');
+        const initialValue = atom(new Date(birthSelect.valueAsDate));
+        const outState = atom('')
+
+        birthSelect.addEventListener('change', (event) => {
+            initialValue.set(event.target.valueAsDate);
+        });
+
+        initialValue.subscribe(val => {
+            let out = ''
+            const w = { write: txt => { out += txt } }
+            makeYourLifeInWeeks(val, w);
+            render.innerText = out;
+            outState.set(out);
+        })
+
+        btnCopy.addEventListener("click", event => {
+            const val = outState.value()
+            if (navigator.clipboard) {
+                const obj = {};
+                if (ClipboardItem.supports('text/markdown')) {
+                    obj['text/markdown'] = new Blob([val], { type: 'text/markdown' });
+                }
+                if (ClipboardItem.supports('text/x-markdown')) {
+                    obj['text/x-markdown'] = new Blob([val], { type: 'text/x-markdown' });
+                }
+                // if (ClipboardItem.supports('text/html')) {
+                //     obj['text/html'] = new Blob([val], { type: 'text/html' });
+                // }
+                if (ClipboardItem.supports('text/plain')) {
+                    obj['text/plain'] = new Blob([val], { type: 'text/plain' });
+                }
+                navigator.clipboard.write([
+                    new ClipboardItem(obj),
+                ]);
+            }
+        })
+    </script>
+
+</body>
+
+</html>
diff --git a/static/make-your-life-in-weeks-md.js b/static/make-your-life-in-weeks-md.js
@@ -0,0 +1,71 @@
+// make-your-life-in-weeks-md.ts
+async function makeYourLifeInWeeks(birth, writer) {
+  const currentTime = { current: new Date(birth) };
+  const weeksIndexState = { current: 0 };
+  const yearState = { current: 0 };
+  while (yearState.current < MAX_YEARS) {
+    const eventsText = [];
+    const birthPeriod = new Date(currentTime.current.getFullYear(), birth.getUTCMonth(), birth.getUTCDate());
+    const startWeek = new Date(currentTime.current);
+    const endWeek = new Date(currentTime.current.getTime() + WEEK_MS);
+    const isWeekOfBirthday = birthPeriod >= startWeek && birthPeriod < endWeek;
+    const line = new TitleElement(`Week ${weeksIndexState.current} - ${currentTime.current.toDateString()}`);
+    if (isWeekOfBirthday) {
+      line.withBirthIcon = true;
+      line.active = true;
+      const age = endWeek.getUTCFullYear() - birth.getUTCFullYear();
+      if (age) {
+        eventsText.push(`This week you turn ${age} years old.`);
+      }
+      if (age === 0) {
+        eventsText.push(`This week you were born.`);
+      }
+    }
+    currentTime.current = endWeek;
+    weeksIndexState.current += 1;
+    writer.write(line.toString());
+    eventsText.forEach((t) => writer.write(`${t}\n\n`));
+    yearState.current = currentTime.current.getUTCFullYear() - birth.getUTCFullYear();
+  }
+}
+var DAY_MS = 86400000;
+var WEEK_MS = 7 * DAY_MS;
+var MAX_YEARS = 90;
+var birthIcons = [
+  "\uD83E\uDD73",
+  "\uD83C\uDF82",
+  "\uD83C\uDF89",
+  "\uD83C\uDF81",
+  "\uD83C\uDF8A"
+];
+var birthIconsCursorState = { current: 0 };
+var nextBirthIcon = () => {
+  birthIconsCursorState.current += 1;
+  return birthIcons[birthIconsCursorState.current % birthIcons.length];
+};
+
+class TitleElement {
+  text;
+  level = 2;
+  active = false;
+  withBirthIcon = false;
+  constructor(text) {
+    this.text = text;
+  }
+  toString() {
+    const pipeline = [
+      (t) => this.withBirthIcon ? `${t} ${nextBirthIcon()}` : t,
+      (t) => "#".repeat(this.level) + " " + t,
+      (t) => this.active ? t : `<!-- ${t} -->`,
+      (t) => `${t}\n\n`
+    ];
+    return pipeline.reduce((acc, cur) => cur(acc), this.text);
+  }
+}
+export {
+  makeYourLifeInWeeks,
+  WEEK_MS,
+  TitleElement,
+  MAX_YEARS,
+  DAY_MS
+};