Better styling for the aside

downloadImages.js

@@ -0,0 +1,34 @@
+const { glob } = require('glob');
+const fs = require('fs');
+const path = require('path');
+
+(async () => {
+    const imagesDirectory = path.join(__dirname, 'src', 'images');
+
+    if (!fs.existsSync(imagesDirectory)) {
+        fs.mkdirSync(imagesDirectory, { recursive: true });
+    }
+
+    const markdownFiles = await glob('src/blog/posts/**/*.md');
+    const imageRegex = /!\[(.*?)\]\((.*?)\)/g;
+    const imageRegex2 = /<img.*?src="(.*?)".*?>/g;
+
+    for (const markdownFile of markdownFiles) {
+        const markdown = fs.readFileSync(markdownFile, 'utf-8');
+        const images = [...markdown.matchAll(imageRegex), ...markdown.matchAll(imageRegex2)];
+        for (const image of images) {
+            const imageUrl = image[2] || image[1];
+            const imageFile = imageUrl.split('/').pop();
+            const imagePath = path.join(imagesDirectory, imageFile);
+            if (!fs.existsSync(imagePath)) {
+                console.log(`Downloading ${imageUrl} to ${imagePath}`);
+                const imageResponse = await fetch(imageUrl);
+                const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());
+                fs.writeFileSync(imagePath, imageBuffer);
+            }
+
+            const newMarkdown = markdown.replace(imageUrl, `./src/images/${imageFile}`);
+            fs.writeFileSync(markdownFile, newMarkdown);
+        }
+    }
+})();

downloadPosts.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+const posts = require('./src/_data/old_posts');
+
+const htmlDecode = (input) => {
+    const doc = new DOMParser().parseFromString(input, "text/html");
+    return doc.documentElement.textContent;
+  }
+
+  
+(async () => {
+    const postList = await posts();
+
+    const postsDirectory = path.join(__dirname, 'src', 'blog', 'posts');
+    if (!fs.existsSync(postsDirectory)) {
+        fs.mkdirSync(postsDirectory, { recursive: true });
+    }
+
+    for (const post of postList) {
+        const date = new Date(post.date);
+        const dir = path.join(__dirname, 'src', 'blog', 'posts', date.getFullYear().toString(), (date.getMonth() + 1).toString());
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+        const postPath = path.join(dir, `${post.slug}.md`);
+        const postContent = `---
+title: "${post.title.rendered}"
+date: ${post.date}
+slug: ${post.slug}
+${post.tags.length ? `tags: [${post.tags.map(tag => tag.slug).join(', ')}]` : ''}
+---
+${post.markdown.replaceAll('\\\'','\'')}
+`;
+        fs.writeFileSync(postPath, postContent);
+    }
+})();

src/blog/index.html

@@ -9,7 +9,7 @@ pagination:
 <main class="wrapper-md stack-lg">
     <h1>Blog posts</h1>
 
-    <aside class="text-center">
+    <aside class="inverse text-center">
         <p>
             Subscribe via <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a>, or <a href="/feed.json">JSON</a>.
         </p>

src/css/globals.css

@@ -6,6 +6,14 @@
     --color-disabled: var(--color-neutral-400);
 }
 
+.inverse {
+    --color-secondary: var(--color-neutral-100);
+    --color-primary: var(--color-neutral-800);
+    --color-decoration: var(--color-yellow-400);
+    --color-subtle: var(--color-zinc-600);
+    --color-disabled: var(--color-neutral-600);
+}
+
 @media (prefers-color-scheme: light) {
     :root {
         --color-secondary: var(--color-neutral-100);
@@ -14,9 +22,17 @@
         --color-subtle: var(--color-zinc-600);
         --color-disabled: var(--color-neutral-600);
     }
+
+    .inverse {
+        --color-primary: var(--color-neutral-200);
+        --color-secondary: var(--color-neutral-800);
+        --color-decoration: var(--color-amber-200);
+        --color-subtle: var(--color-zinc-400);
+        --color-disabled: var(--color-neutral-400);
+    }
 }
 
-body[data-color-scheme="light"] {
+[data-color-scheme="light"] {
     --color-secondary: var(--color-neutral-100);
     --color-primary: var(--color-neutral-800);
     --color-decoration: var(--color-yellow-400);
@@ -24,7 +40,15 @@ body[data-color-scheme="light"] {
     --color-disabled: var(--color-neutral-600);
 }
 
-body[data-color-scheme="dark"] {
+[data-color-scheme="light"] .inverse {
+    --color-primary: var(--color-neutral-200);
+    --color-secondary: var(--color-neutral-800);
+    --color-decoration: var(--color-amber-200);
+    --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-neutral-400);
+}
+
+[data-color-scheme="dark"] {
     --color-primary: var(--color-neutral-200);
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
@@ -137,7 +161,7 @@ footer {
 
 aside {
     width: 100%;
-    background-color: var(--color-primary);
-    color: var(--color-secondary);
     padding: var(--space-size-s);
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
 }