← Back to Home

How this site was built

An AI-human collaboration journey

This GitHub Pages site was created in multiple intensive sessions on December 2-3, 2025, through collaboration between a human curator at the KB (National Library of the Netherlands) and Claude Opus 4.5, an AI assistant by Anthropic.

Table of contents

• Timeline overview
• Development phases
• April 2026: mmdc.nl catalog pages submitted to WBM
• Major achievement: AI vision recognition
• KB huisstijl implementation
• Accessibility, privacy & licensing
• Why frequent commits matter
• Full session log

Timeline overview

Development phases

Phase 1: Repository reorganization (Dec 2, session 1)

Goal: Transform a flat, disorganized folder structure into a clean, navigable repository.

Actions:

• Created hierarchical folder structure (archived-sites/, scripts/)
• Added .gitignore for IDE and system files
• Added CC0 1.0 LICENSE for public domain dedication
• Updated README.md with comprehensive documentation
• Added internal links and accurate URL counts to all site READMEs

Commits:

1. 70d72a3 - Reorganize repository structure
2. a0c030f - Update READMEs with internal links, image galleries, and accurate URL counts
3. 1cf205e - Remove .claude and .prompt-page from gitignore and update session log

Phase 2: Screenshot galleries (Dec 2, session 1)

Goal: Add visual screenshots from the Wayback Machine to showcase each archived site.

Actions:

• Created Python scripts using Selenium to capture Wayback Machine pages
• Captured 36 screenshots (6 per site) at deep-level URLs
• Trimmed donation banners (210px from top) for cleaner presentation
• Added responsive image galleries to all README files
• Iterated through multiple screenshot captures to fix errors

Commits:

1. acbaea3 - Add Wayback Machine screenshot galleries to all archived site READMEs
2. 4537732 - Fix Wayback Machine screenshots - remove erroneous captures
3. 533e61b - Add Wayback Machine screenshots with trimmed donation banners
4. d77396a - Replace screenshots with comprehensive deep-level captures
5. 7aebfca - Update session log with final screenshot improvements

Phase 3: GitHub Pages setup (Dec 2, session 1)

Goal: Create a browsable website from the repository documentation.

Actions:

• Created _config.yml with Jekyll configuration
• Built custom _layouts/default.html with:
  • Responsive CSS styling
  • Navigation breadcrumbs
  • Card-based navigation
  • Lightbox for image galleries
• Created landing pages for all sections
• Enabled GitHub Pages via API
• Added repository topics for discoverability

Commits:

1. 4e39f33 - Add GitHub Pages site with navigation and breadcrumbs
2. 80ff275 - Add screenshot gallery to kb.nl overview page
3. 1f5ffec - Fix GitHub Pages layout and add index.md files
4. 55e3bfe - Fix homepage text and sort table by date descending

Phase 4: UI refinements (Dec 2, session 1)

Goal: Polish the user interface and fix visual issues.

Actions:

• Added screenshot thumbnails to homepage navigation cards
• Implemented lightbox with keyboard navigation (← → Esc)
• Fixed table formatting issues
• Extended lightbox to work on all content images
• Reordered tiles by date (descending)

Commits:

1. 6e20fbc - Add screenshots to archived site cards on homepage
2. ced0b2b - Fix table formatting, add lightbox for gallery images
3. 1c7cc4e - Reorder Browse Archived Sites tiles by date (descending)
4. 47f2d4e - Fix dead links: remove images/ directory links
5. 94eddc9 - Fix pipe character causing table rendering issue
6. 5856154 - Add missing Literatuurplein screenshots

Phase 5: Bug fixes & polish (Dec 2, session 1)

Goal: Fix remaining issues and improve content quality.

Actions:

• Fixed GidsVoorNederland error screenshots
• Added lightbox navigation arrows
• Fixed LezenVoorDeLijst error screenshot
• Used AI vision to extract meaningful captions from screenshots
• Changed “Dutch website” to “former Dutch website”
• Added subfolder links
• Reorganized kb.nl galleries by site version

Commits:

1. 8f3256a - Fix GidsVoorNederland screenshots and add lightbox navigation
2. a599157 - Extend lightbox to all content images
3. 8c4ce2b - Fix LezenVoorDeLijst error screenshot
4. 7294044 - Fix LezenVoorDeLijst screenshot with blog post page
5. 6f14a67 - Update gallery captions and improve documentation

Phase 6: KB huisstijl & compliance (Dec 3, session 2)

Goal: Apply official KB brand colors and add comprehensive compliance documentation.

Actions:

• Implemented KB huisstijl color palette as CSS variables
• Updated all design elements (header, links, footer, cards)
• Created full WCAG 2.1 AA accessibility compliance
• Added GDPR/AVG compliance documentation
• Implemented dark mode with KB colors
• Added comprehensive compliance.md page

Commits: 24-29. Various commits for KB huisstijl colors, compliance page, accessibility features

Phase 7: Code organization & footer redesign (Dec 3, session 2)

Goal: Improve code maintainability and refine footer design.

Actions:

• Split inline CSS (~760 lines) into assets/css/main.css
• Split inline JavaScript (~200 lines) into assets/js/lightbox.js
• Redesigned footer: black background, white text, white KB logo
• Removed gold circles from social media icons

Commits:

1. e49f31f - Split CSS and JS into separate files
2. 7536c28 - Fix footer styling: all white text, no gold circles, white logo 32-33. Documentation updates

April 2026: mmdc.nl catalog pages submitted to WBM

After the initial December 2025 WBM submissions covered the 317 static HTML pages, 112 PDFs and 38 static-asset images of mmdc.nl, the remaining 11,738 JavaScript-rendered catalog pages still could not be captured by the Wayback Machine directly — the live URLs returned an empty <div id="recordDetail"> shell. Once each record had been rendered into a self-contained static HTML file (see the catalog rendering write-up), the pre-rendered files were uploaded to a temporary public path https://mmdc.nl/wbm/site/search/catalog-page-{N}.html and submitted to the WBM’s Save Page Now API in a sequential run.

Submission timeline (from WBM_Timestamp_submission in the Excel)

All 11,738 catalog-pages rows in mmdc-urls-unified_15042026.xlsx carry a WBM submission timestamp. Aggregated by day:

What the timestamps tell us

• Overall window: submissions ran almost non-stop from the afternoon of April 2 until midday April 7, with the retry pass on April 11 picking up the 80 records that had failed on the first pass.
• Steady throughput: on the four full days (Apr 3–6) the pipeline averaged roughly 2,000–3,000 submissions/day, or one submission every ~30–40 seconds — the pacing imposed by Save Page Now to avoid being rate-limited. The shorter ramps on April 2 (started 14:36) and April 7 (stopped 13:50) are consistent with a multi-session manual-kickoff operation rather than a single cron run.
• April 8–10 gap: no catalog submissions happened on April 8, 9, or 10. These days were used to run WBM CDX queries to verify that the first 11,658 submissions had been indexed, and to identify the 80 URLs that needed a retry.
• April 11 cleanup pass: a tight 34-minute run (17:10 → 17:44, 80 submissions) finished the last batch — exactly the pattern expected when a small list of failures is re-submitted one-by-one with no pacing issues.

The matching WBM_Timestamp_capture column in the same sheet (which holds the latest snapshot the CDX API reports for each URL) shows that in every case the Wayback Machine subsequently indexed the submission successfully — see the catalog-page-2 / 500 / 5000 examples on the mmdc.nl page.

Scripts that drove the run: archived-sites/mmdc.nl/_archiving-artifacts/scripts/SaveToWBM_mmdc_catalog.py (initial submission), fetch_actual_wbm_timestamps.py (CDX verification), and scripts/wbm-archiver/SaveToWBM_mmdc_rerun.py (April 11 retry).

Major achievement: AI vision recognition

The breakthrough

One of the most significant achievements of this project was using AI multimodal vision to automatically extract meaningful captions from screenshot images.

The problem

Gallery captions were generic and meaningless:

• “Pagina 104937”
• “Boek 277”
• “Boek 287”

The solution

Claude Opus 4.5 used its native vision capabilities to:

1. Read each PNG screenshot directly (not just filenames)
2. Extract page titles from Wayback Machine banners
3. Identify content - author names, article titles, section headers
4. Generate meaningful captions in Dutch and Frisian

Results

Example: the AI read the page title “Training verplaatst” directly from the screenshot to replace the generic “Pagina 104937” caption — the first row in the table below.

Why this matters

This demonstrates AI can:

• Replace manual data entry for image cataloging
• Extract structured metadata from screenshot archives
• Improve accessibility through automatic alt-text generation
• Scale to large archives without human review of each image

KB huisstijl implementation

On December 3, 2025, the site design was updated to align with the official KB (Koninklijke Bibliotheek) house style guidelines. This ensures visual consistency with other KB digital properties.

Key changes

• Implemented official KB color palette (gold, blue, beige, pink, teal)
• Updated header, footer, links, and navigation with brand colors
• Redesigned footer: black background, white text, white logo
• Added CSS custom properties for easy maintenance
• Ensured WCAG 2.1 AA compliance for all color combinations

📄 Full KB huisstijl documentation →

Compliance & accessibility

As a final phase, comprehensive compliance testing and improvements were implemented to ensure the site meets European standards.

GDPR/AVG compliance

WCAG 2.1 Level AA

Responsive design

Additional features:

• Landscape orientation optimization for lightbox
• Touch swipe navigation in image galleries
• Dark mode support via prefers-color-scheme
• High contrast mode support via prefers-contrast
• Print styles for clean printed output

SEO optimization

Security

• HTTPS enforced via GitHub Pages
• rel="noopener" on all external links
• No external scripts - all JavaScript inline
• Static content only - no server-side processing

📄 Full Accessibility, Privacy & Licensing Documentation →

Why frequent commits matter

One unexpected benefit of working with Claude Code is how it transforms version control from a chore into a natural part of the workflow.

Before AI assistance

• Writing commit messages was manual and time-consuming
• Developers often batched many changes into single commits
• Git commands required memorization or documentation lookup
• Version control felt like overhead rather than a tool

With AI assistance

• Commits happen in natural language: “commit and push”
• Each small change gets its own descriptive commit
• Complex Git operations become accessible to all skill levels
• Version control becomes an integral part of the conversation

Benefits of frequent commits

This project as example

This project has 40+ commits over two sessions. Each commit represents a logical unit of work:

• Bug fixes get their own commits
• Style changes are separate from structural changes
• Documentation updates are tracked independently

The result is a complete, searchable history that serves as both documentation and a learning resource.

Full session log

The complete session logs with all prompts, actions, and technical details are available at:

📄 Session 1 (Dec 2, 2025) - Repository reorganization, screenshots, GitHub Pages setup

📄 Session 2 (Dec 3, 2025) - KB huisstijl, compliance, code organization, documentation refinements

Tools used

• AI assistant: Claude Opus 4.5 (claude-opus-4-5-20251101) via Claude Code CLI
• Screenshot capture: Python + Playwright + Pillow
• Static site generator: Jekyll (GitHub Pages)
• Version control: Git + GitHub
• Browser automation: Playwright (Chromium)

License

The source code and text content of this project are dedicated to the public domain under CC0 1.0. For image credits and copyright information, see compliance.