obscurecomputer · gibbiemonster · Feb 26, 2026 · Feb 26, 2026 · Feb 26, 2026 · Feb 27, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/index.html b/index.html
@@ -49,9 +49,9 @@
 
         <link rel="stylesheet" href="./src/index.css" />
         <link rel="icon" href="./favicon.ico" type="image/png" />
-        <script type="module" src="/src/components/obscure-app.ts"></script>
+        <script type="module" src="/src/components/obscure-index.ts"></script>
     </head>
     <body>
-        <obscure-app></obscure-app>
+        <obscure-index></obscure-index>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,12 +10,16 @@
   },
   "dependencies": {
     "@types/three": "^0.182.0",
+    "gray-matter": "^4.0.3",
     "gsap": "^3.14.2",
     "lenis": "^1.3.17",
     "lit": "^3.3.1",
+    "marked": "^17.0.3",
+    "shiki": "^3.23.0",
     "three": "^0.182.0"
   },
   "devDependencies": {
+    "@types/node": "^25.3.1",
     "typescript": "~5.9.3",
     "vite": "^7.2.4"
   }

diff --git a/src/components/blog/obscure-blog-app.ts b/src/components/blog/obscure-blog-app.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) Obscure Computer 2026. Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { initParticles, initCursor } from "../../scripts/effects";
+
+import "./obscure-blog-list";
+import "./obscure-blog-post";
+
+@customElement("obscure-blog-app")
+export class ObscureBlogApp extends LitElement {
+    @property()
+    slug = "";
+
+    render() {
+        return html`
+            <div class="noise"></div>
+            <div class="scanlines"></div>
+            <div class="pixels" id="particles"></div>
+            <div class="cursor-dot"></div>
+            <div class="cursor-outline"></div>
+
+            <main class="blog-main">
+                ${this.slug
+                    ? html`<obscure-blog-post
+                          .slug=${this.slug}
+                      ></obscure-blog-post>`
+                    : html`<obscure-blog-list></obscure-blog-list>`}
+            </main>
+        `;
+    }
+
+    firstUpdated() {
+        initParticles(this.renderRoot);
+        initCursor(this.renderRoot, "a, button, .blog-post-card");
+        this._initCopyButtons();
+    }
+
+    updated() {
+        this._initCopyButtons();
+    }
+
+    private _initCopyButtons() {
+        this.renderRoot.querySelectorAll<HTMLButtonElement>(".code-copy").forEach((btn) => {
+            if (btn.dataset.bound) return;
+            btn.dataset.bound = "1";
+            btn.addEventListener("click", () => {
+                const code = btn.closest(".code-block")?.querySelector("code");
+                if (!code) return;
+                const original = btn.innerHTML;
+                navigator.clipboard.writeText(code.textContent ?? "").then(() => {
+                    btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>';
+                    btn.style.color = "var(--c-cyan)";
+                    setTimeout(() => { btn.innerHTML = original; btn.style.color = ""; }, 1500);
+                });
+            });
+        });
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
diff --git a/src/components/blog/obscure-blog-list.ts b/src/components/blog/obscure-blog-list.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) Obscure Computer 2026. Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import posts from "virtual:blog-posts";
+
+@customElement("obscure-blog-list")
+export class ObscureBlogList extends LitElement {
+    render() {
+        return html`
+            <div class="blog-container">
+                <nav class="blog-nav">
+                    <a href="/" class="blog-back-link interactable">
+                        <span class="bracket">[</span> BACK
+                        <span class="bracket">]</span>
+                    </a>
+                </nav>
+
+                <header class="blog-header">
+                    <h1 class="blog-title">BLOG</h1>
+                    <div class="blog-header-meta">
+                        <span class="blog-header-dot"></span>
+                        <span>ENTRIES: ${posts.length}</span>
+                    </div>
+                </header>
+
+                <div class="blog-list">
+                    ${posts.map(
+                        (post) => html`
+                            <a
+                                href="/blog/${post.slug}"
+                                class="blog-post-card interactable"
+                            >
+                                <div class="blog-post-card-content">
+                                    <h2 class="blog-post-card-title">
+                                        ${post.title}
+                                    </h2>
+                                    <p class="blog-post-card-desc">
+                                        ${post.description}
+                                    </p>
+                                    <div class="blog-post-card-meta">
+                                        <span class="blog-post-card-date"
+                                            >${post.date}</span
+                                        >
+                                        <span class="blog-post-card-author"
+                                            >by ${post.author}</span
+                                        >
+                                    </div>
+                                    <div class="blog-post-card-tags">
+                                        ${post.tags.map(
+                                            (tag) =>
+                                                html`<span class="blog-tag"
+                                                    >${tag}</span
+                                                >`
+                                        )}
+                                    </div>
+                                </div>
+                                <div class="blog-post-card-arrow">
+                                    <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                    >
+                                        <path d="M5 12h14M12 5l7 7-7 7" />
+                                    </svg>
+                                </div>
+                            </a>
+                        `
+                    )}
+                </div>
+            </div>
+        `;
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
diff --git a/src/components/blog/obscure-blog-post.ts b/src/components/blog/obscure-blog-post.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) Obscure Computer 2026. Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import posts from "virtual:blog-posts";
+import "./obscure-code-copy";
+
+@customElement("obscure-blog-post")
+export class ObscureBlogPost extends LitElement {
+    @property()
+    slug = "";
+
+    private get _post(): BlogPostFull | undefined {
+        return posts.find((p) => p.slug === this.slug);
+    }
+
+    private get _readTime(): number {
+        if (!this._post) return 0;
+        const text = this._post.html.replace(/<[^>]*>/g, "");
+        const words = text.trim().split(/\s+/).length;
+        return Math.max(1, Math.round(words / 200));
+    }
+
+    render() {
+        if (!this._post) {
+            return html`
+                <div class="blog-container">
+                    <nav class="blog-nav">
+                        <a href="/blog" class="blog-back-link interactable">
+                            <span class="bracket">[</span> BACK
+                            <span class="bracket">]</span>
+                        </a>
+                    </nav>
+                    <div class="blog-error">
+                        <h1>POST_NOT_FOUND</h1>
+                        <p>No post matching slug "${this.slug}"</p>
+                    </div>
+                </div>
+            `;
+        }
+
+        return html`
+            <div class="blog-container">
+                <nav class="blog-nav">
+                    <a href="/blog" class="blog-back-link interactable">
+                        <span class="bracket">[</span> BACK
+                        <span class="bracket">]</span>
+                    </a>
+                </nav>
+
+                <article class="blog-article">
+                    <header class="blog-article-header">
+                        <h1 class="blog-article-title">${this._post.title}</h1>
+                        <div class="blog-article-meta">
+                            <span class="blog-article-date"
+                                >${this._post.date}</span
+                            >
+                            <span class="blog-article-author"
+                                >by ${this._post.author}</span
+                            >
+                            <span class="blog-article-readtime"
+                                >${this._readTime} min read</span
+                            >
+                        </div>
+                        <div class="blog-post-card-tags">
+                            ${this._post.tags.map(
+                                (tag) =>
+                                    html`<span class="blog-tag">${tag}</span>`
+                            )}
+                        </div>
+                    </header>
+
+                    <div class="blog-article-body">
+                        ${unsafeHTML(this._post.html)}
+                    </div>
+                </article>
+            </div>
+        `;
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
diff --git a/src/components/blog/obscure-code-copy.ts b/src/components/blog/obscure-code-copy.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) Obscure Computer 2026. Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+const copyIcon = html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+const checkIcon = html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>`;
+
+@customElement("obscure-code-copy")
+export class ObscureCodeCopy extends LitElement {
+    @state() private _copied = false;
+
+    private _onClick() {
+        const block = this.closest(".code-block");
+        const code = block?.querySelector("code");
+        if (!code) return;
+
+        navigator.clipboard.writeText(code.textContent ?? "").then(() => {
+            this._copied = true;
+            setTimeout(() => { this._copied = false; }, 1500);
+        });
+    }
+
+    render() {
+        return html`
+            <button
+                class="code-copy ${this._copied ? "code-copy-ok" : ""}"
+                type="button"
+                @click=${this._onClick}
+            >
+                ${this._copied ? checkIcon : copyIcon}
+            </button>
+        `;
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}