60e980e | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

60e980e — pyrossh 2026-08-05T17:52:57+05:30

improvements

Files changed (15) hide show

src/components/theme-switcher.js → assets/client.js +18 -0
assets/css/shared.css +7 -3
assets/css/workers/home.css +3 -16
assets/css/workers/issues-detail.css +1 -5
assets/css/workers/issues-index.css +1 -5
assets/css/workers/posts-index.css +2 -10
eleventy.config.js +0 -7
infra/main.tf +1 -1
infra/terraform.tfstate +42 -8
infra/terraform.tfstate.backup +36 -5
package.json +1 -1
src/_helpers/fileIcons.js +43 -1
src/_includes/layout.njk +1 -1
src/_includes/repo-layout.njk +2 -2
src/repos/files-index.njk +1 -1

src/components/theme-switcher.js → assets/client.js RENAMED Viewed

@@ -1,3 +1,6 @@
+// All client-side JS the site ships, in one plain vanilla file — no
+// bundler needed for two small, independent event listeners.
 // Wires up the theme button rendered as static markup in site-header.njk
 // (no web component, no framework — a stateless click-to-toggle button
 // doesn't need one). Loaded with `defer` so this runs after the DOM is
@@ -15,3 +18,18 @@ document.getElementById("theme-change").addEventListener("click", () => {
   root.setAttribute("data-theme", next);
   localStorage.setItem("theme", next);
 });
+// .file-explorer-tree lives outside #file-pane (see the comment on
+// .file-explorer in repos.css) so htmx swaps of #file-pane never re-render
+// it — clicking a file never rebuilds the tree. That's good for keeping
+// scroll position/expanded folders, but it also means the .active-file
+// class painted at page-load time never moves on its own. Move it here,
+// synchronously on click, instead of waiting on htmx's response.
+document.addEventListener("click", (e) => {
+  const link = e.target.closest(".file-explorer-tree a");
+  if (!link) return;
+  const tree = link.closest(".file-explorer-tree");
+  const current = tree.querySelector("a.active-file");
+  if (current) current.classList.remove("active-file");
+  link.classList.add("active-file");
+});

assets/css/shared.css CHANGED Viewed

@@ -72,7 +72,7 @@ table { border-collapse: collapse; }
   --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
   --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
   --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
-  --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
+  --color-highlight-bg: light-dark(hsl(210, 10%, 88%), hsl(210, 10%, 24%));
   --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
   --color-code-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));
   --color-pre-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));
@@ -331,10 +331,14 @@ footer {
    Prism-highlighted blog-post code and plain markdown-it README code
    fences). It's genuinely cross-cutting rather than owned by one
    component — scoping it to either would mean duplicating the whole token
-   palette in the other — so it stays global. */
+   palette in the other — so it stays global.
+   Background lives on pre.code-view/.markdown-body pre below, not here:
+   code[class*="language-"] is inline and wraps a whole multi-line file, so
+   giving IT a background paints one box per line box (only as wide as that
+   line's text) instead of one clean rectangle behind the block. */
 pre[class*="language-"],
 code[class*="language-"] {
-  background: var(--color-pre-bg);
   color: var(--color-text);
 }

assets/css/workers/home.css CHANGED Viewed

@@ -30,14 +30,9 @@
   .repos {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
     gap: 1rem;
     margin-top: 0.5rem;
-    @media (max-width: 720px) {
-      gap: 1rem;
-      grid-template-columns: auto;
-    }
   }
   .title {
@@ -63,12 +58,8 @@
   .gridContainer {
     display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
     gap: var(--space-gap-fluid);
-    @media (min-width: 640px) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
   }
   .repo {
@@ -168,14 +159,10 @@
     ul {
       display: grid;
       gap: 0.5rem;
-      grid-template-columns: auto auto auto auto;
+      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
       text-align: center;
       margin-top: 0.5rem;
-      @media (max-width: 720px) {
-        grid-template-columns: auto auto auto;
-      }
       li {
         display: flex;
         align-items: center;

assets/css/workers/issues-detail.css CHANGED Viewed

@@ -73,10 +73,6 @@ textarea {
   .comment-actions {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
     gap: 0.5rem;
-    @media (max-width: 720px) {
-      grid-template-columns: 1fr;
-    }
   }

assets/css/workers/issues-index.css CHANGED Viewed

@@ -54,10 +54,6 @@ button {
   .form-row {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
     gap: 0.5rem;
-    @media (max-width: 720px) {
-      grid-template-columns: 1fr;
-    }
   }

assets/css/workers/posts-index.css CHANGED Viewed

@@ -16,18 +16,13 @@
 li {
       display: grid;
-      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-      gap: 0.4rem;
+      gap: 0.6rem;
       justify-items: start;
       align-items: end;
       margin-top: 1.25rem;
       line-height: 1.5rem;
-      @media (min-width: 640px) {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 0.75rem;
-      }
 a {
         font-size: 1.1rem;
         color: var(--color-post-link);
@@ -58,9 +53,6 @@ time {
         justify-content: flex-end;
         font-size: 1rem;
         line-height: 1.5rem;
-        @media (min-width: 640px) {
-          margin-left: 1rem;
-        }
       }
     }
   }

eleventy.config.js CHANGED Viewed

@@ -47,13 +47,6 @@ export default function (eleventyConfig) {
     "node_modules/diff2html/bundles/css/diff2html.min.css": "assets/css/diff2html.min.css",
   });
-  // theme-switcher is the one bit of client-side JS the site ships (real
-  // click + localStorage behavior) — plain vanilla script, no bundler
-  // needed.
-  eleventyConfig.addPassthroughCopy({
-    "src/components/theme-switcher.js": "assets/components/theme-switcher.js",
-  });
   // htmx powers no-full-page-reload tab switching on repo pages (Readme/
   // Commits/Files, Contents/History/Blame) — hx-select pulls #repo-content
   // or #file-content out of the fetched static page and swaps it in place.

infra/main.tf CHANGED Viewed

@@ -66,7 +66,7 @@ resource "terraform_data" "sync_website" {
   depends_on = [cloudflare_r2_bucket.website, terraform_data.build_website]
   provisioner "local-exec" {
-    command = "rclone sync ${path.module}/../dist website:${cloudflare_r2_bucket.website.name} --checksum --fast-list -P"
+    command = "rclone sync ${path.module}/../dist website:${cloudflare_r2_bucket.website.name} --checksum --fast-list --multi-thread-streams=32 -P "
   }
 }

infra/terraform.tfstate CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 4,
   "terraform_version": "1.13.3",
-  "serial": 23,
+  "serial": 29,
   "lineage": "6cb48eaa-b069-089b-fce3-e277626defab",
   "outputs": {
     "bucket_name": {
@@ -79,8 +79,8 @@
             "jurisdiction": "default",
             "min_tls": null,
             "status": {
-              "ownership": "pending",
+              "ownership": "active",
-              "ssl": "initializing"
+              "ssl": "active"
             },
             "zone_id": "e95a5d8957b75859c814579deebfce33",
             "zone_name": "pyrossh.dev"
@@ -133,12 +133,12 @@
         {
           "schema_version": 0,
           "attributes": {
-            "id": "06e5fdf0-4974-c673-b975-2f3fa99846fc",
+            "id": "f64c9052-0f71-5705-a183-e85f891292b2",
             "input": null,
             "output": null,
             "triggers_replace": {
               "value": [
-                "2026-08-05T05:36:25Z"
+                "2026-08-05T06:08:43Z"
               ],
               "type": [
                 "tuple",
@@ -156,19 +156,53 @@
     {
       "mode": "managed",
       "type": "terraform_data",
-      "name": "sync_website",
+      "name": "purge_cache",
       "provider": "provider[\"terraform.io/builtin/terraform\"]",
       "instances": [
         {
           "status": "tainted",
           "schema_version": 0,
           "attributes": {
-            "id": "2036dc20-874b-06df-a0e0-481ee25c8d06",
+            "id": "7173b400-cbc8-069b-7c74-6fa0bae8b3e2",
+            "input": null,
+            "output": null,
+            "triggers_replace": {
+              "value": [
+                "2026-08-05T06:27:38Z"
+              ],
+              "type": [
+                "tuple",
+                [
+                  "string"
+                ]
+              ]
+            }
+          },
+          "sensitive_attributes": [],
+          "identity_schema_version": 0,
+          "dependencies": [
+            "cloudflare_r2_bucket.website",
+            "terraform_data.build_website",
+            "terraform_data.sync_website"
+          ]
+        }
+      ]
+    },
+    {
+      "mode": "managed",
+      "type": "terraform_data",
+      "name": "sync_website",
+      "provider": "provider[\"terraform.io/builtin/terraform\"]",
+      "instances": [
+        {
+          "schema_version": 0,
+          "attributes": {
+            "id": "1fe8b333-1b40-c0c6-b113-1e7ce0519af8",
             "input": null,
             "output": null,
             "triggers_replace": {
               "value": [
-                "2026-08-05T05:36:38Z"
+                "2026-08-05T06:09:03Z"
               ],
               "type": [
                 "tuple",

infra/terraform.tfstate.backup CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 4,
   "terraform_version": "1.13.3",
-  "serial": 17,
+  "serial": 23,
   "lineage": "6cb48eaa-b069-089b-fce3-e277626defab",
   "outputs": {
     "bucket_name": {
@@ -62,6 +62,37 @@
         }
       ]
     },
+    {
+      "mode": "managed",
+      "type": "cloudflare_r2_custom_domain",
+      "name": "git",
+      "provider": "provider[\"registry.terraform.io/cloudflare/cloudflare\"]",
+      "instances": [
+        {
+          "schema_version": 500,
+          "attributes": {
+            "account_id": "dfdb8ca4e419990852eb214c5b50bd5e",
+            "bucket_name": "git",
+            "ciphers": null,
+            "domain": "git.pyrossh.dev",
+            "enabled": true,
+            "jurisdiction": "default",
+            "min_tls": null,
+            "status": {
+              "ownership": "pending",
+              "ssl": "initializing"
+            },
+            "zone_id": "e95a5d8957b75859c814579deebfce33",
+            "zone_name": "pyrossh.dev"
+          },
+          "sensitive_attributes": [],
+          "identity_schema_version": 0,
+          "dependencies": [
+            "cloudflare_r2_bucket.git"
+          ]
+        }
+      ]
+    },
     {
       "mode": "managed",
       "type": "cloudflare_r2_custom_domain",
@@ -102,12 +133,12 @@
         {
           "schema_version": 0,
           "attributes": {
-            "id": "82dcd6f4-f2c5-a69f-b707-8db44fc9f2e8",
+            "id": "06e5fdf0-4974-c673-b975-2f3fa99846fc",
             "input": null,
             "output": null,
             "triggers_replace": {
               "value": [
-                "2026-08-05T05:24:58Z"
+                "2026-08-05T05:36:25Z"
               ],
               "type": [
                 "tuple",
@@ -132,12 +163,12 @@
           "status": "tainted",
           "schema_version": 0,
           "attributes": {
-            "id": "a7aaeeec-5a16-6c2e-17e4-133b6d69deef",
+            "id": "2036dc20-874b-06df-a0e0-481ee25c8d06",
             "input": null,
             "output": null,
             "triggers_replace": {
               "value": [
-                "2026-08-05T05:25:10Z"
+                "2026-08-05T05:36:38Z"
               ],
               "type": [
                 "tuple",

package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "pyrossh-dev",
   "type": "module",
   "scripts": {
-    "dev": "eleventy --serve",
+    "dev": "node --max-old-space-size=8192 ./node_modules/.bin/eleventy --serve",
     "build": "node --max-old-space-size=8192 ./node_modules/.bin/eleventy",
     "tf:plan": "terraform -chdir=infra plan",
     "tf:apply": "terraform -chdir=infra apply"

src/_helpers/fileIcons.js CHANGED Viewed

@@ -1,5 +1,47 @@
 import iconSet from "@iconify-json/vscode-icons/icons.json" with { type: "json" };
+// Chrome (confirmed in headless and in production) never paints a
+// gradient-filled path that lives inside a <symbol> instantiated through
+// <use> — the same markup renders fine as a standalone inline <svg>, so
+// this is specific to the symbol/use indirection the sprite relies on.
+// vscode-icons ships several file-type icons (rust, license, webp, python,
+// kotlin, the "dist" folder) as gradients, so rather than special-case
+// each one, every icon's gradients are resolved to one flat representative
+// color at build time before being embedded in the sprite. Barely
+// noticeable at the 16px size these render at, and keeps the one-symbol-
+// shared-by-every-row sprite this module is built around (see
+// iconSpriteDefs below) instead of duplicating full icon bodies per file.
+const GRADIENT_TAG_RE = /<(linearGradient|radialGradient)\b([^>]*?)(?:\/>|>([\s\S]*?)<\/\1>)/g;
+const STOP_COLOR_RE = /<stop\b[^>]*\bstop-color="([^"]+)"[^>]*\/?>/g;
+const ATTR_RE = (attr) => new RegExp(`\\b${attr}="([^"]+)"`);
+const flattenGradients = (body) => {
+  if (!body.includes("Gradient")) return body;
+  const gradients = new Map();
+  for (const match of body.matchAll(GRADIENT_TAG_RE)) {
+    const [, , attrs, inner] = match;
+    const id = attrs.match(ATTR_RE("id"))?.[1];
+    if (!id) continue;
+    const href = attrs.match(ATTR_RE("href"))?.[1]?.replace(/^#/, "");
+    const stops = inner ? [...inner.matchAll(STOP_COLOR_RE)].map((m) => m[1]) : [];
+    gradients.set(id, { href, stops });
+  }
+  const resolveColor = (id, seen = new Set()) => {
+    if (seen.has(id)) return null;
+    seen.add(id);
+    const g = gradients.get(id);
+    if (!g) return null;
+    if (g.stops.length) return g.stops[Math.floor(g.stops.length / 2)];
+    return g.href ? resolveColor(g.href, seen) : null;
+  };
+  return body
+    .replace(GRADIENT_TAG_RE, "")
+    .replace(/(fill|stroke)="url\(#([^)]+)\)"/g, (whole, prop, id) => `${prop}="${resolveColor(id) ?? "#888"}"`);
+};
 // The old Astro version resolved per-extension file/folder icons from the
 // full vscode-icons manifest (see git history at 7325531^:src/utils/files.ts).
 // That manifest is itself a large VS Code extension repo installed as a git
@@ -89,7 +131,7 @@ export const iconSpriteDefs = () => {
   const symbols = [...ICON_NAMES]
     .map((name) => {
       const icon = iconSet.icons[name];
-      return `<symbol id="icon-${name}" viewBox="0 0 ${iconSet.width} ${iconSet.height}">${icon.body}</symbol>`;
+      return `<symbol id="icon-${name}" viewBox="0 0 ${iconSet.width} ${iconSet.height}">${flattenGradients(icon.body)}</symbol>`;
     })
     .join("");
   return `<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">${symbols}</svg>`;

src/_includes/layout.njk CHANGED Viewed

@@ -21,7 +21,7 @@
     <meta property="og:description" content="{{ description or site.description }}" />
     <meta property="og:image" content="/assets/icons/icon.svg" />
     <meta name="twitter:card" content="summary_large_image" />
-    <script defer src="/assets/components/theme-switcher.js"></script>
+    <script defer src="/assets/client.js"></script>
     <script src="/assets/vendor/htmx.min.js"></script>
   </head>
   <body>

src/_includes/repo-layout.njk CHANGED Viewed

@@ -10,8 +10,8 @@
   <hr />
   <div class="nav">
     <div><a href="/repos/{{ repo }}/" hx-get="/repos/{{ repo }}/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Readme' %}active-tab{% endif %}">Readme</a><span>|</span></div>
-    <div><a href="/repos/{{ repo }}/commits/" hx-get="/repos/{{ repo }}/commits/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Commits' %}active-tab{% endif %}">Commits</a><span>|</span></div>
-    <div><a href="/repos/{{ repo }}/files/" hx-get="/repos/{{ repo }}/files/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Files' %}active-tab{% endif %}">Files</a></div>
+    <div><a href="/repos/{{ repo }}/files/" hx-get="/repos/{{ repo }}/files/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Files' %}active-tab{% endif %}">Code</a><span>|</span></div>
+    <div><a href="/repos/{{ repo }}/commits/" hx-get="/repos/{{ repo }}/commits/" hx-select="#repo-page" hx-target="#repo-page" hx-swap="outerHTML" hx-push-url="true" class="{% if tab == 'Commits' %}active-tab{% endif %}">Commits</a></div>
   </div>
 </div>
 {% endmacro %}

src/repos/files-index.njk CHANGED Viewed

@@ -6,7 +6,7 @@ pagination:
 permalink: "/repos/{{ repo.id }}/files/"
 layout: layout.njk
 eleventyComputed:
-  title: "Files | {{ repo.data.title }}"
+  title: "Code | {{ repo.data.title }}"
 ---
 {% from "repo-layout.njk" import repoLayout %}
 {% from "file-layout.njk" import fileLayout, fileContent %}