refactor: Migrate from Jekyll to Eleventy 3.0 (#52)

* Migrate from Jekyll to Eleventy 3.0

This commit migrates the entire website from Jekyll (Ruby) to Eleventy (Node.js).
Eleventy was chosen because it has native support for Liquid templates, which
minimizes changes to existing templates.

## New files

### Configuration
- eleventy.config.js: Main configuration in ESM format with collections,
  filters, and passthrough copy rules
- package.json: Node.js dependencies (Eleventy, syntax highlighting, Sass)
- .nvmrc: Node.js version 24 (current LTS)
- .nojekyll: Prevents GitHub Pages from running Jekyll

### Data
- _data/site.json: Site variables (url)
- _data/home/roles.yml: Moved from _includes/

### Layouts and templates
- _layouts/employee.html: New layout for employee pages with content wrapper
- _includes/lib/prism.scss: Syntax highlighting theme (replaces Rouge)
- assets/site.js.liquid: JavaScript concatenation via Liquid template

### Directory data (for layout inheritance)
- jobba/jobba.json
- om-oss/om-oss.json
- konsultnatverk/konsultnatverk.json
- ai-labbet/ai-labbet.json
- roller/roller.json
- _posts/_posts.json

### CI/CD
- .github/workflows/deploy.yml: GitHub Actions for automatic deployment

### Documentation
- CLAUDE.md: Instructions for AI assistants and lessons learned from migration
- AGENTS.md: Symbolic link to CLAUDE.md
- README.md: Updated with new instructions for nvm and npm

## Deleted files

- Gemfile, Gemfile.lock: Ruby dependencies
- _config.yml: Jekyll configuration
- .ruby-version: Ruby version
- _includes/lib/rouge-github.scss: Rouge syntax highlighting (replaced by Prism)
- assets/site.js: Replaced by site.js.liquid

## Template changes

### Variable access
Jekyll: {{ page.title }}, {{ site.posts }}
Eleventy: {{ title }}, {{ collections.posts }}

### Collection loops
Jekyll: {% for post in site.posts %}{{ post.title }}
Eleventy: {% for post in collections.posts %}{{ post.data.title }}

### Updated includes
- _includes/home/blog.html: collections.posts, post.data.*
- _includes/home/roles.html: home.roles instead of site.data.home.roles
- _includes/blog/*.html: collections.posts, post.data.*, swedishDate filter
- _includes/employees/index.html: collections.employees, employee.data.*

## Content changes

### Employee pages (_employees/*.md)
- Added layout: employee for correct content wrapper

### Blog posts
- Fixed {{page.image_url}} to {{image_url}} in 7 posts
- Fixed markdown rendering after HTML blocks in acb2013.md
  (added blank lines after <h3> and <img> tags)
- Updated old /images/employees/ paths to /assets/img/employees/

### Other pages
- Fixed {{page.*}} to {{*}} in ai-labbet, jobba, konsultnatverk, om-oss, roller

## SCSS changes

- assets/site.scss: Changed from @import to @use (modern Sass syntax)
- Sass is now compiled separately via npm script, not by Eleventy

## Configuration details

### Collections
- posts: Sorted by date (newest first) with next/previous links
- employees: Sorted alphabetically by filename

### Filters
- swedishDate: Formats dates in Swedish (e.g., "24 januari 2025")
- removeHtmlExtension: Removes .html from URLs

### Passthrough copy
- assets/
- All image formats (jpg, png, gif, svg, webp) in all directories
- favicon.ico

### Ignores
- README.md, CLAUDE.md, AGENTS.md (documentation)
- assets/blog/**/*.html and .md (demo files with Mustache syntax)
- **/*.scss (compiled separately)

* Update to Node.js 24 and add SCSS watch for development

- Bump Node.js version to 24 in workflow, package.json and .nvmrc
- Add sass:watch script for live SCSS recompilation
- Run Eleventy and Sass watch in parallel during development

* Update to Node.js 24 and add SCSS watch for development

Changes:
- Update Node.js requirement to version 24 (current LTS)
- Add scripts/dev.mjs for parallel Eleventy and SCSS watch in development
- Add sass:watch npm script for SCSS file watching
- Fix intro_image variable name (was intro-image, now uses underscore)
- Add pagination support to blog archive and index templates
- Update deploy workflow to use Node.js 24

* Chore: add package-lock and use npm ci

---------

Co-authored-by: Christian Lizell <christian.lizell@svt.se>

Author: lizell

.github/workflows/deploy.yml

@@ -0,0 +1,50 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  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
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: _site
+
+  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

@@ -1,4 +1,12 @@
-.idea
-.DS_Store
+# Build output
 _site/
-.jekyll-metadata
+
+# Node.js
+node_modules/
+
+# Eleventy cache
+.cache/
+
+# OS/IDE
+.DS_Store
+.idea/

.nojekyll

@@ -0,0 +1 @@
+24

.nvmrc

@@ -0,0 +1 @@
+CLAUDE.md

.ruby-version

@@ -0,0 +1,183 @@
+# CLAUDE.md
+
+Instruktioner och lärdomar för AI-assistenter som arbetar med detta projekt.
+
+## Viktigt: Verifiera alltid aktuell information
+
+**Lita INTE på egen kunskap om versioner, API:er eller aktuell syntax.**
+
+Använd alltid:
+- **WebSearch** för att verifiera aktuella versioner (Node.js, npm-paket, etc.)
+- **Context7** (`mcp__context7__resolve-library-id` + `mcp__context7__query-docs`) för biblioteksdokumentation
+
+Exempel på saker som ändras snabbt:
+- Node.js LTS-versioner
+- Framework-versioner och syntax
+- API-ändringar i bibliotek
+- Best practices
+
+## Projektöversikt
+
+Detta är Athegas webbplats, byggd med **Eleventy 3.0** (migrerad från Jekyll i januari 2025).
+
+### Viktiga kommandon
+
+```bash
+npm install    # Installera beroenden
+npm start      # Starta dev-server på localhost:8080
+npm run build  # Bygg sajten till _site/
+```
+
+### Nyckelkonfiguration
+
+- **eleventy.config.js** - Huvudkonfiguration (ESM-format)
+- **package.json** - Beroenden och npm-scripts
+- **_data/site.json** - Site-variabler (url, etc.)
+
+## Lärdomar från Jekyll → Eleventy-migrering
+
+### 1. Variabelåtkomst i templates
+
+**Jekyll:**
+```liquid
+{{ page.title }}
+{{ page.image_url }}
+{{ site.posts }}
+```
+
+**Eleventy:**
+```liquid
+{{ title }}
+{{ image_url }}
+{{ collections.posts }}
+```
+
+Front matter-variabler nås direkt utan `page.`-prefix i Eleventy.
+
+### 2. Collection-data i loopar
+
+I Eleventy nås front matter via `.data` när man itererar över collections:
+
+```liquid
+{% for post in collections.posts %}
+  {{ post.data.title }}    <!-- OBS: .data. prefix -->
+  {{ post.url }}           <!-- url är direkt på objektet -->
+{% endfor %}
+```
+
+### 3. Markdown efter HTML-block
+
+Markdown-processorn (i både Jekyll och Eleventy) kräver en tom rad efter HTML-element för att fortsätta tolka Markdown:
+
+**Fungerar inte:**
+```markdown
+<h3 id="rubrik">Min rubrik</h3>
+Text med [länk](http://example.com) fungerar inte.
+```
+
+**Fungerar:**
+```markdown
+<h3 id="rubrik">Min rubrik</h3>
+
+Text med [länk](http://example.com) fungerar nu.
+```
+
+### 4. SCSS-hantering
+
+Eleventy processar inte SCSS automatiskt. Vi kör Sass separat via npm:
+
+```json
+"scripts": {
+  "sass": "sass assets/site.scss:_site/assets/site.css --style=compressed",
+  "build": "npm run sass && npx @11ty/eleventy"
+}
+```
+
+**Modern Sass-syntax:** Använd `@use` istället för `@import`:
+```scss
+@use "lib/prism" as *;
+@use "layout" as *;
+```
+
+`@use`-statements måste komma först i filen, före all annan kod.
+
+### 5. JavaScript-konkatenering
+
+`assets/site.js.liquid` är en Liquid-template som konkatenerar JS-filer:
+
+```liquid
+---
+permalink: /assets/site.js
+layout: false
+---
+{% include "lib/jquery.min.js" %}
+{% include "header.js" %}
+```
+
+Filen måste ha `.liquid`-extension för att processas som template.
+
+### 6. Passthrough copy för bilder
+
+Bilder i innehållsmappar (inte bara `assets/`) måste explicit kopieras:
+
+```javascript
+eleventyConfig.addPassthroughCopy("**/*.jpg");
+eleventyConfig.addPassthroughCopy("**/*.png");
+// etc.
+```
+
+### 7. Collection-sortering
+
+Collections sorteras inte automatiskt som i Jekyll. Explicit sortering krävs:
+
+```javascript
+// Alfabetisk sortering efter filnamn
+eleventyConfig.addCollection("employees", function(collection) {
+  return collection.getFilteredByGlob("_employees/*.md")
+    .sort((a, b) => a.inputPath.localeCompare(b.inputPath));
+});
+```
+
+### 8. Layout-arv och wrappers
+
+Sidor som behöver `<section class="content">` wrapper måste använda rätt layout:
+
+- **page** - För vanliga innehållssidor
+- **post** - För blogginlägg
+- **employee** - För medarbetarsidor (ny layout skapad vid migrering)
+- **default** - Bas-layout utan content wrapper
+
+### 9. Directory data files
+
+För att sätta layout på alla filer i en mapp, skapa en JSON-fil med mappens namn:
+
+```
+jobba/
+  jobba.json      # {"layout": "page"}
+  index.md
+```
+
+### 10. Syntax highlighting
+
+Använder `@11ty/eleventy-plugin-syntaxhighlight` med Prism. CSS-tema finns i `_includes/lib/prism.scss`.
+
+## Vanliga fallgropar
+
+1. **Glöm inte `.data.`** när du läser front matter i collection-loopar
+2. **Tom rad efter HTML** krävs för att Markdown ska processas
+3. **Sortering av collections** måste göras explicit
+4. **Bilder utanför assets/** kopieras inte automatiskt
+5. **SCSS** kompileras separat, inte av Eleventy
+6. **`@use` före allt annat** i SCSS-filer
+7. **Dokumentationsfiler med Liquid-exempel** (som denna fil) måste läggas till i `eleventyConfig.ignores`, annars försöker Eleventy köra kodexemplen
+
+## Testning vid ändringar
+
+Efter ändringar, verifiera:
+
+1. `npm run build` går igenom utan fel
+2. Startsidan renderar korrekt
+3. Blogginlägg visar rätt datum och innehåll
+4. Medarbetarsidor har rätt struktur
+5. Bilder laddas
+6. Interna länkar fungerar