Upgrade to Svelte 5, Vite 7, and Paraglide JS 2.0 #472
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit completes a major migration to update all dependencies to latest supported versions and removes Pug.js completely from the project. Pug.js Removal: Converted all 11 Svelte files from Pug templates to standard HTML: - Components: Header.svelte, Footer.svelte - Layouts: +layout.svelte - Pages: +page.svelte (home), blog pages, coaching pages, team page, trainingen pages Configuration Changes: - Removed 'pug' package from dependencies - Removed 'svelte-preprocess' package from dependencies - Updated svelte.config.js to remove sveltePreprocess and Pug support Bug Fixes: - Fixed TypeScript error in Header.svelte (added type annotation) - Fixed incorrect property reference in +page.svelte (blog.alt → blog.meta.alt) All builds passing successfully with 1004+ optimized modules generated. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…n classes, and adjust SCSS imports for Bootstrap migration # Conflicts: # .gitignore # src/lib/components/Header.svelte # src/routes/onze-aanpak/+page.svelte
…ges and enable crawling for prerendering
- Delete Bootstrap 4.6.2 and Sass 1.78.0 from package.json (13 packages removed) - Compile Bootstrap SCSS to vendored-bootstrap.css (154KB) at src/lib/styles/ - Remove all SCSS files from src/lib/scss/ directory - Update all components to use vendored CSS instead of SCSS imports - Remove SCSS preprocessor configuration from vite.config.ts - Add tmp directory to .gitignore for development logs - Add Claude Code local settings for permitted commands The site now runs entirely on plain CSS with no external CSS framework dependencies. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Major Version Updates: - Svelte: 4.2.19 → 5.43.6 - Vite: 5.4.19 → 7.2.2 - SvelteKit: 2.5.26 → 2.48.5 - @sveltejs/vite-plugin-svelte: 3.1.2 → 6.2.1 - @sveltejs/adapter-auto: 3.2.4 → 7.0.0 - @sveltejs/enhanced-img: 0.3.10 → 0.8.5 - ESLint: 8.57.0 → 9.39.1 - @inlang/paraglide-js: 1.11.2 → 1.11.8 - @inlang/paraglide-sveltekit: 0.11.0 → 0.16.1 - eslint-plugin-svelte: 2.43.0 → 3.13.0 Minor/Patch Updates: - prettier: 3.3.3 → 3.6.2 - prettier-plugin-svelte: 3.2.6 → 3.4.0 - typescript: 5.5.4 → 5.9.3 - @typescript-eslint/eslint-plugin: 8.4.0 → 8.46.4 - @typescript-eslint/parser: 8.4.0 → 8.46.4 - sharp: 0.34.1 → 0.34.5 - svelte-check: 4.0.1 → 4.3.4 - svelte-sitemap: 2.6.0 → 2.7.1 - mdsvex: 0.12.3 → 0.12.6 - rehype-rewrite: 4.0.2 → 4.0.3 - tslib: 2.7.0 → 2.8.1 - eslint-config-prettier: 9.1.0 → 10.1.8 - eslint-plugin-jsx-a11y: 6.10.0 → 6.10.2 - svelte-preprocess: 6.0.2 → 6.0.3 - @sveltejs/adapter-static: 3.0.4 → 3.0.10 Svelte 5 Compatibility Fixes: - Fix onclick handlers in trainingen page to use arrow functions instead of strings - Svelte 5 requires event handlers to be JavaScript expressions, not string attributes Environment: - Node: 24.11.1 LTS (npm 11.6.2) - Used --legacy-peer-deps for installation due to peer dependency conflicts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Documentation: - Add CLAUDE.md with project architecture and development commands - Document content management system and i18n setup - Include key implementation patterns for future development Content Restoration: - Restore 3 blog posts from commit 909734a: - hoe-coachend-leiderschap (NL + EN) with 3 images - over-grenzen (NL + EN) with 2 images - activerende-online-teamspellen (NL) with 1 image - Restore talent development program (NL + EN) with 7 images - Restore fallback 404 files for blog, coaching, and trainingen sections Bug Fixes: - Fix blog listing to filter out fallback 404 files (_._) - Add defensive filtering for posts without date metadata - Prevent "Cannot read properties of undefined" errors in blog/homepage This commit completes the Svelte 5 + Vite 7 upgrade with working content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add comprehensive documentation of: - Svelte 5 + Vite 7 upgrade status and changes - Critical bugs fixed (blog listing errors, image loading issues) - Content restoration procedures from git history - Known issues and warnings with impact assessment - Development workflow notes and debugging procedures - Image optimization guidelines - Production build checklist This documentation will help recover context if the session crashes or when picking up development work in the future. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Complete migration from Paraglide SvelteKit 1.x to framework-agnostic Paraglide JS 2.0. Breaking Changes: - Remove @inlang/paraglide-sveltekit (139 packages removed) - Add @inlang/paraglide-js 2.5.0 - Delete src/lib/i18n.ts (no longer needed) - Remove <ParaglideJS> wrapper component from layout Configuration: - Update vite.config.ts with paraglideVitePlugin and urlPatterns - Add src/hooks.server.ts with paraglideMiddleware for SSR - Add src/hooks.ts with reroute() for URL delocalization - Update project.inlang/settings.json (languageTags → locales) - Simplify app.html lang attribute (%paraglide.lang% → %lang%) API Migration: - Replace languageTag() with getLocale() across all files - Replace availableLanguageTags with locales - Update LanguageSwitcher to use localizeHref() with data-sveltekit-reload URL Patterns: - Configure /onze-aanpak → /en/our-approach translation - Base locale (nl) at root, English at /en/* prefix - Strategy: ['url', 'cookie', 'baseLocale'] Verified Working: - Dutch and English homepages load correctly - Blog pages work in both languages - Translated routes function properly - Language switching works with page reload - No runtime errors Documentation: - Update CLAUDE.md with comprehensive migration guide - Add urlPatterns configuration examples - Document new hooks architecture - Include troubleshooting steps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Enable stricter ESLint accessibility rules and fix TypeScript errors from Paraglide 2.0 migration. ESLint Configuration (.eslintrc.cjs): - Remove disabled accessibility rules (alt-text, anchor-has-content, etc.) - Change jsx-a11y rules from 'off' to 'warn' for better code quality - Keep only necessary rule overrides TypeScript Fixes: - Update utils/index.ts to use Paraglide 2.0 types (locales instead of Av availableLanguageTag) - Add type assertion for import.meta.glob() resolver - Export BlogPost type in types.ts for compatibility Code Formatting: - Run Prettier to format all files consistently - Format 19 files including components, routes, and generated Paraglide code Verified: - Homepage loads correctly (Dutch) - English blog page loads correctly - No runtime errors - All pages functional Note: Some TypeScript warnings remain in generated Paraglide files and will be addressed when Paraglide baseLocale configuration is fixed in a future update. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Removed unused Bootstrap classes from vendored-bootstrap.css using PurgeCSS. Results: - Size: 149 KB → 21 KB (86% reduction, 128 KB saved) - Lines: 8,576 → 1,389 Changes: - Extracted all 160 unique CSS classes used across Svelte components - Removed unused Bootstrap components (forms, alerts, modals, carousels, etc.) - Preserved all custom YEP brand classes (yep-geel, square-img-container, etc.) - Kept all Bootstrap utilities and grid system actively used in the site Verification: - Tested all pages (home, blog, trainingen, coaching, team, onze-aanpak) - No styling regressions - All functionality preserved 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixed "Invalid locale: undefined" error during static site generation. Changes: - Updated coaching/[coaching_title]/+page.ts entries() to iterate all locales - Added blog/[blog_title]/+page.ts entries() for SSG support - Added trainingen/[training_title]/+page.ts entries() for SSG support Issue: During SSG, getLocale() returns undefined because there's no request context. The entries() function needs to generate routes for all locales. Solution: Import locales array and iterate through each locale to generate all necessary routes for static prerendering. Build now completes successfully and generates all pages for both nl and en. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixed formatting warnings in 2 files: - .claude/settings.local.json - normalized indentation - src/lib/styles/vendored-bootstrap.css - removed extra blank lines All changes are whitespace-only with no functional impact. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improved accessibility for screen readers and keyboard navigation. Changes: - Added aria-label attributes to all empty stretched-link elements - Fixed form label associations with for/id attributes in contact form - Improved image alt text to remove redundant "Image" and "Photo" words - Replaced deprecated <svelte:component> with Svelte 5 syntax in team page - Hidden decorative overlay link from assistive technology Files modified: - src/routes/blog/+page.svelte - Added aria-label to blog card links - src/routes/blog/[blog_title]/+page.svelte - Added aria-label to related posts - src/routes/coaching/[coaching_title]/+page.svelte - Added aria-label to related coaching - src/routes/trainingen/+page.svelte - Added aria-label and aria-hidden - src/routes/contact/+page.svelte - Associated labels with inputs using for/id - src/routes/+page.svelte - Improved alt text for images - src/routes/team/+page.svelte - Updated to Svelte 5 component syntax Impact: - Better screen reader experience with descriptive link labels - Proper form label associations for better usability - More meaningful image descriptions - Compliance with Svelte 5 best practices 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Cleaned up component styles by removing unused selectors and fixing prerendering issues with invalid hash links. CSS Changes: - Moved navbar-brand img styles from +layout.svelte to Header.svelte - Used :global(img) selector to properly target enhanced:img elements - Removed unused .nuxt-content selectors from blog and coaching detail pages - Removed 189 lines of unused card styles from trainingen page (kept only .card-cascade, .narrower, and .rect-img-container styles) Bug Fixes: - Removed href="#!" links that caused prerendering errors - These decorative overlay links are now plain divs - The stretched-link still provides click functionality Additional Accessibility: - Added aria-label to coaching page card links Impact: - Eliminated all "unused CSS selector" build warnings - Fixed prerendering error blocking static site generation - Reduced trainingen page styles from 227 to 38 lines (83% reduction) - Build now completes successfully with sitemap generation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add localizeHref() to all internal links to preserve locale when navigating - Configure baseLocale in project.inlang/settings.json and vite.config.ts - Fix blog page regex to handle both .nl.md and .en.md files - Add defensive null checks for missing English translations - Remove invalid <template> syntax from klachten, tarieven, and contact pages - Recompile Paraglide runtime with correct baseLocale configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Deploying yeptrainingen with
|
| Latest commit: |
3469df0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e24cf421.yeptrainingen.pages.dev |
| Branch Preview URL: | https://upgrade-svelte5-vite7.yeptrainingen.pages.dev |
Cloudflare Pages was detecting bun.lockb and trying to use bun for dependency installation, but the lockfile was out of sync. Since npm is being used locally (package-lock.json is present and up-to-date), removing bun.lockb will make Cloudflare Pages use npm instead. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit resolves 14 TypeScript/Svelte compilation errors by updating
code to be compatible with Svelte 5 and fixing type annotations.
Paraglide Configuration:
- Remove invalid baseLocale property from paraglideVitePlugin config
The baseLocale should only be in the strategy array, not as a separate property
TypeScript Type Fixes:
- Add type annotation to formatDate(date: string) function
- Add proper Intl.DateTimeFormatOptions type for date formatting options
- Update all component types to use Svelte 5 Component type instead of render/$$render objects
- Add Component import from 'svelte' to types.ts
Svelte 5 Syntax Updates:
- Replace innerHTML={} with {@html } directive (4 instances in contact page)
- Replace <svelte:component this={component} /> with <component /> (3 instances)
* blog/[blog_title]/+page.svelte
* coaching/[coaching_title]/+page.svelte
* trainingen/[training_title]/+page.svelte
HTML Attribute Fixes:
- Change required="" to required (boolean attribute)
- Remove invalid fluid="fluid" attribute from enhanced:img
- Remove invalid blank-color="#777" attribute from enhanced:img
Data Loading Improvements:
- Add alt property destructuring in all content page loaders:
* blog/[blog_title]/+page.ts
* coaching/[coaching_title]/+page.ts
* trainingen/[training_title]/+page.ts
Build Status:
- TypeScript errors reduced from 14 to 4 (all in generated Paraglide code)
- Production build succeeds with no errors
- Ready for Cloudflare Pages deployment
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit addresses accessibility warnings and removes unused CSS
selectors, improving the site's compliance with a11y standards.
Accessibility Improvements:
1. Add aria-label to sidebar card overlay links:
- trainingen/[training_title]/+page.svelte: Added descriptive aria-label
to stretched-link elements for screen readers
2. Add missing alt attributes to enhanced:img elements (5 images):
- onze-aanpak/+page.svelte:
* onze-aanpak-1.jpg: "Training session in progress"
* onze-aanpak.jpg: "Our approach illustration"
* IMG_2597.jpg: "Team collaboration"
- coaching/+page.svelte:
* anna-stutje.jpg: "Anna Stutje, coach"
* site-foto-1-of-1-3.jpg: "Coaching services"
3. Remove unused CSS selectors:
- Opdrachtgevers.svelte: Removed unused "img" selector
- onze-aanpak/+page.svelte: Removed unused ".bg-onze-aanpak.jumbotron img" selector
Build Impact:
- Reduced accessibility warnings from 52 to 42
- Eliminated all missing alt attribute warnings (10 fixed)
- Eliminated all unused CSS selector warnings (2 fixed)
- Remaining 42 warnings are in markdown content files (brochure download links)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit eliminates all remaining accessibility warnings (42 → 0) by
automatically adding aria-label attributes to links containing only images.
Implementation:
1. Extended rehype-rewrite plugin in svelte.config.js:
- Detects <a> tags containing only <img> or <enhanced:img> elements
- Automatically adds aria-label using pattern: "Download: {image alt text}"
- Works for all markdown content without requiring manual edits
2. Fixed missing alt attribute:
- src/routes/coaching/+page.svelte: Added alt="Coaching services" to
site-foto-1-of-1-3.jpg banner image
Impact:
- Build warnings reduced from 42 to 0 (100% elimination)
- All markdown brochure download links now accessible to screen readers
- Solution is automatic and future-proof for new markdown content
- No markdown files needed to be edited manually
Accessibility Compliance:
✅ All images have alt attributes
✅ All image-only links have aria-label attributes
✅ Zero accessibility warnings in build output
✅ Screen reader users can now understand download link purposes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit removes all references to Bun and standardizes on npm
for package management, CI/CD, and development workflow.
Changes:
1. GitHub Actions Workflow:
- Renamed .github/workflows/bun.yml → npm.yml
- Changed workflow name from "bun" to "npm"
- Replaced oven-sh/setup-bun@v2 with actions/setup-node@v4
- Added npm caching for faster CI builds
- Changed bun install --check-files → npm ci
- Changed all bun run commands → npm run commands
2. Documentation Updates:
- README.md: Removed "the repo is built with bun, but on windows
you can use npm" - now shows only npm commands
- CLAUDE.md: Removed "(can also use bun run dev)" parenthetical
from development commands
Rationale:
- npm is more widely used and better supported
- Simpler toolchain (one less tool to install/maintain)
- Better compatibility across platforms
- Consistent with package-lock.json already in use
All functionality remains the same - only the package manager changed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Resized 7 images wider than 1600px using sips: - content/blog/betekenisvol-werk-3.jpg (5472px → 1600px) - content/blog/grenzen-effectief-uiten-1.jpg (4875px → 1600px) - content/blog/hoe-coachend-leiderschap-1.jpg (1731px → 1600px) - content/blog/hoe-coachend-leiderschap-3.jpg (4724px → 1600px, 6.6MB → 204KB) - content/blog/over-grenzen-2.jpg (3969px → 1600px) - content/trainingen/coachend-leiderschap-1.jpg (1731px → 1600px) - static/images/handtekening-top.png (2078px → 1600px) Significant space savings, especially on hoe-coachend-leiderschap-3.jpg which was reduced from 6.6MB to 204KB. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR completes a major infrastructure upgrade, migrating the YEP Trainingen website to modern dependencies and improving internationalization support. The upgrade includes Svelte 5 with runes, Vite 7, and Paraglide JS 2.0, along with significant CSS optimization and code quality improvements.
Key Changes:
- Migrated to Svelte 5 (runes mode), Vite 7, and Paraglide JS 2.0 for internationalization
- Removed Bootstrap and Sass dependencies, vendoring optimized CSS (86% size reduction via PurgeCSS)
- Fixed SSG build failures and improved locale-aware routing with defensive null checks
- Enhanced accessibility and code quality across the application
Reviewed Changes
Copilot reviewed 41 out of 49 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Migrated to Paraglide JS 2.0 plugin with URL pattern configuration for locale routing |
| svelte.config.js | Removed Sass preprocessor, added accessibility improvements for image-only links |
| src/routes/*/+page.ts | Updated to use getLocale() API and added locale-aware entries() functions for SSG |
| src/routes/*/+page.svelte | Converted from Pug templates to standard HTML, added localizeHref() to all links, implemented Svelte 5 runes |
| src/lib/styles/vendored-bootstrap.css | Added PurgeCSS-optimized Bootstrap 4.6.2 CSS (86% reduction from original) |
| src/lib/components/*.svelte | Updated to Svelte 5 syntax with runes and proper locale-aware navigation |
| src/hooks*.ts | Implemented new Paraglide 2.0 middleware and routing hooks |
| package.json | Updated all dependencies to latest versions including Svelte 5.43.6 and Vite 7.2.2 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/routes/contact/+page.svelte
Outdated
| </div> | ||
| <div class="container p-4 text-center"> | ||
| <h2>{m.contact_company_name()}</h2> | ||
| <p>{@html m.contact_address()}</p> |
There was a problem hiding this comment.
Using {@html} with user-controlled or message content can introduce XSS vulnerabilities. While this appears to be controlled content from translation files, consider whether the <br /> tags could be replaced with structured markup instead of HTML in the translation strings.
Owner
Author
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: tdamsma <7870803+tdamsma@users.noreply.github.com>
- Header: Use max-height instead of fixed height to maintain aspect ratio - Header: Add max-width: 100% to prevent overflow on narrow screens - Header: Update mobile menu toggle to use Svelte 5 $state runes - Opdrachtgevers: Restore img CSS rules lost during migration - Opdrachtgevers: Use max-width and object-fit: contain to prevent stretching - Opdrachtgevers: Add responsive breakpoints for tablet (120px) and mobile (80px) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove XSS risk from contact page by eliminating {@html} directive
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Major dependency upgrades and i18n improvements:
Dependency Upgrades
CSS & Performance Optimizations
i18n Fixes (Paraglide JS 2.0)
Code Quality Improvements
Documentation
🤖 Generated with https://claude.com/claude-code