Initial blog setup

Author: visj

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy Minimal Blog
+
+on:
+  push:
+    branches: ["master", "main"] 
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+          
+      - name: Install dependencies
+        run: bun install
+        
+      - name: Build site
+        run: bun run build
+        
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+bun.lockb
+bun.lock
+.DS_Store

content/index.md

@@ -0,0 +1,4 @@
+---
+title: My First Post
+---
+# Hello World

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vilhelm",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsx src/build.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/visj/visj.github.io.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/visj/visj.github.io/issues"
+  },
+  "homepage": "https://github.com/visj/visj.github.io#readme",
+  "dependencies": {
+    "@shikijs/markdown-exit": "^4.0.2",
+    "gray-matter": "^4.0.3",
+    "markdown-exit": "^1.0.0-beta.9",
+    "shiki": "^4.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

src/build.ts

@@ -0,0 +1,80 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { createMarkdownExit } from 'markdown-exit';
+import Shiki from '@shikijs/markdown-exit';
+import matter from 'gray-matter';
+
+const CONTENT_DIR = './content';
+const DIST_DIR = './dist';
+const TEMPLATE_PATH = './src/template.html';
+
+async function build() {
+  // 1. Initialize markdown-exit using the factory helper
+  const md = createMarkdownExit();
+
+  // 2. Add Shiki plugin for syntax highlighting
+  // This will automatically handle tokenizing code blocks asynchronously
+  md.use(Shiki({
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    }
+  }));
+
+  // 3. Prepare directories and load the HTML template
+  await fs.mkdir(DIST_DIR, { recursive: true });
+  const template = await fs.readFile(TEMPLATE_PATH, 'utf-8');
+  
+  // Copy over the global CSS file
+  await fs.copyFile('./src/style.css', path.join(DIST_DIR, 'style.css'));
+
+  // 4. Recursive function to read all markdown files and mirror the folder structure
+  async function processDirectory(dir: string) {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      
+      // Get the path relative to the content folder (e.g., "dev/my-post.md")
+      const relativePath = path.relative(CONTENT_DIR, fullPath);
+
+      if (entry.isDirectory()) {
+        // If it's a folder, create the equivalent folder in /dist
+        const destDir = path.join(DIST_DIR, relativePath);
+        await fs.mkdir(destDir, { recursive: true });
+        await processDirectory(fullPath);
+      } else if (entry.name.endsWith('.md')) {
+        // If it's a markdown file, figure out the destination HTML path
+        const destPath = path.join(DIST_DIR, relativePath).replace(/\.md$/, '.html');
+        const fileContent = await fs.readFile(fullPath, 'utf-8');
+        
+        // Parse YAML frontmatter (like title) and the raw markdown body
+        const { data, content } = matter(fileContent);
+        const title = data.title || 'My Blog';
+
+        // Render markdown asynchronously (required for the Shiki plugin to work)
+        const htmlContent = await md.renderAsync(content);
+
+        // Calculate correct relative path for the CSS file based on folder depth
+        const depth = relativePath.split(path.sep).length - 1;
+        const cssPath = depth === 0 ? './style.css' : '../'.repeat(depth) + 'style.css';
+
+        // Inject everything into the template shell
+        const finalHtml = template
+          .replace('{{TITLE}}', title)
+          .replace('{{CSS_PATH}}', cssPath)
+          .replace('{{CONTENT}}', htmlContent);
+
+        // Write the compiled HTML file
+        await fs.writeFile(destPath, finalHtml);
+        console.log(`Built: ${destPath}`);
+      }
+    }
+  }
+
+  // Kick off the build process
+  await processDirectory(CONTENT_DIR);
+  console.log('✅ Build complete!');
+}
+
+build().catch(console.error);

src/style.css

@@ -0,0 +1,16 @@
+body {
+    font-family: system-ui, -apple-system, sans-serif;
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+    color: #333;
+    background: #fafafa;
+}
+
+/* Ensure code blocks have padding and scroll horizontally */
+pre.shiki {
+    padding: 1rem;
+    border-radius: 6px;
+    overflow-x: auto;
+}

src/template.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{TITLE}}</title>
+    <link rel="stylesheet" href="{{CSS_PATH}}">
+</head>
+<body>
+    <nav>
+        <a href="/">Home</a>
+    </nav>
+    <main>
+        {{CONTENT}}
+    </main>
+</body>
+</html>

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "strict": true
+  }
+}