From b17be5bf4dd25870f2a7b8f946b950fa5c2a39bc Mon Sep 17 00:00:00 2001 From: Thilo Maier Date: Mon, 15 Jun 2026 22:34:44 +0200 Subject: [PATCH 1/4] Migrate to Skeleton Fixes #1252 --- package.json | 2 +- pnpm-lock.yaml | 12 +- src/app.css | 269 ++---------------- src/app.html | 2 +- src/collections/authors/thilo.json | 1 + src/lib/mdsvex/layouts/default.svelte | 39 ++- .../+page.md | 2 +- .../+page.md | 10 +- svelte.config.js | 35 +-- 9 files changed, 93 insertions(+), 279 deletions(-) diff --git a/package.json b/package.json index 42861d5e..c0824486 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@fontsource/roboto": "^5.2.10", "@fontsource/spectral": "^5.2.8", "@lucide/svelte": "^1.20.0", - "@maiertech/sveltekit-helpers": "^0.52.0", + "@maiertech/sveltekit-helpers": "^0.53.0", "@playwright/test": "^1.61.0", "@skeletonlabs/skeleton": "^4.15.2", "@skeletonlabs/skeleton-svelte": "^4.15.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15103f5b..3e5a77df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,8 +30,8 @@ importers: specifier: ^1.20.0 version: 1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) '@maiertech/sveltekit-helpers': - specifier: ^0.52.0 - version: 0.52.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3) + specifier: ^0.53.0 + version: 0.53.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3) '@playwright/test': specifier: ^1.61.0 version: 1.61.0 @@ -572,8 +572,8 @@ packages: peerDependencies: svelte: ^5 - '@maiertech/sveltekit-helpers@0.52.0': - resolution: {integrity: sha512-UI1c0SoawVqwIhkO3MmflldgFPcPzeucmRl5kssBnIBGEgRxajM/imTdL73m3R9CSBSALEa1cO2glxaOaLfBew==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.52.0/cdcf08ca056960ec0ea911b726861328862cd8b1} + '@maiertech/sveltekit-helpers@0.53.0': + resolution: {integrity: sha512-vfLEZO/8EST0CpeL/+CJzWUNfHiUTl1ia9/iClG7sX0bhstYflRd+TJc6FvWW4Qcxivl2XIDXa4RHkZzewtDJQ==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.53.0/56a298712d71fa48c3fad8b387b04e5b352a189b} peerDependencies: '@lucide/svelte': ^1.7.0 '@skeletonlabs/skeleton': ^4.15.0 @@ -2638,9 +2638,11 @@ snapshots: dependencies: svelte: 5.56.3(@typescript-eslint/types@8.61.1) - '@maiertech/sveltekit-helpers@0.52.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3)': + '@maiertech/sveltekit-helpers@0.53.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3)': dependencies: '@lucide/svelte': 1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) + '@shikijs/langs': 4.2.0 + '@shikijs/themes': 4.2.0 '@skeletonlabs/skeleton': 4.15.2(tailwindcss@4.3.1) '@skeletonlabs/skeleton-svelte': 4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)) '@sveltejs/kit': 2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)) diff --git a/src/app.css b/src/app.css index 036badc9..14ae947a 100644 --- a/src/app.css +++ b/src/app.css @@ -2,252 +2,43 @@ @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton-svelte'; +@import '@skeletonlabs/skeleton/themes/cerberus'; -/* Roboto: normal, medium, semibold, bold. */ -@import '@fontsource/roboto/latin-400-italic.css' layer(utilities); -@import '@fontsource/roboto/latin-400.css' layer(utilities); -@import '@fontsource/roboto/latin-500-italic.css' layer(utilities); -@import '@fontsource/roboto/latin-500.css' layer(utilities); -@import '@fontsource/roboto/latin-600-italic.css' layer(utilities); -@import '@fontsource/roboto/latin-600.css' layer(utilities); -@import '@fontsource/roboto/latin-700-italic.css' layer(utilities); -@import '@fontsource/roboto/latin-700.css' layer(utilities); - -/* Spectral: normal, medium, semibold, bold. */ -@import '@fontsource/spectral/latin-400-italic.css' layer(utilities); -@import '@fontsource/spectral/latin-400.css' layer(utilities); -@import '@fontsource/spectral/latin-500-italic.css' layer(utilities); -@import '@fontsource/spectral/latin-500.css' layer(utilities); -@import '@fontsource/spectral/latin-600-italic.css' layer(utilities); -@import '@fontsource/spectral/latin-600.css' layer(utilities); -@import '@fontsource/spectral/latin-700-italic.css' layer(utilities); -@import '@fontsource/spectral/latin-700.css' layer(utilities); +@import '@fontsource/roboto'; +@import '@fontsource/spectral'; @source '../node_modules/@maiertech/sveltekit-helpers/**/*.{js,svelte}'; -[data-theme='maiertech'] { - --spacing: 0.25rem; - --text-scaling: 1.067; - --base-font-color: var(--color-surface-950); - --base-font-color-dark: var(--color-surface-50); - --base-font-family: inherit; - --base-font-size: inherit; - --base-line-height: inherit; - --base-font-weight: normal; - --base-font-style: normal; - --base-letter-spacing: 0em; - --heading-font-color: inherit; - --heading-font-color-dark: inherit; - --heading-font-family: inherit; - --heading-font-weight: bold; - --heading-font-style: normal; - --heading-letter-spacing: inherit; - --anchor-font-color: var(--color-primary-500); - --anchor-font-color-dark: var(--color-primary-400); - --anchor-font-family: inherit; - --anchor-font-size: inherit; - --anchor-line-height: inherit; - --anchor-font-weight: inherit; - --anchor-font-style: inherit; - --anchor-letter-spacing: inherit; - --anchor-text-decoration: none; - --anchor-text-decoration-hover: underline; - --anchor-text-decoration-active: none; - --anchor-text-decoration-focus: none; - --body-background-color: var(--color-surface-50); - --body-background-color-dark: var(--color-surface-950); - --radius-base: 9999rem; - --radius-container: 0.25rem; - --default-border-width: 1px; - --default-divide-width: 1px; - --default-ring-width: 1px; - - /* Primary color. */ - - --color-primary-50: oklch(97% 0.014 254.604); - --color-primary-100: oklch(93.2% 0.032 255.585); - --color-primary-200: oklch(88.2% 0.059 254.128); - --color-primary-300: oklch(80.9% 0.105 251.813); - --color-primary-400: oklch(70.7% 0.165 254.624); - --color-primary-500: oklch(62.3% 0.214 259.815); - --color-primary-600: oklch(54.6% 0.245 262.881); - --color-primary-700: oklch(48.8% 0.243 264.376); - --color-primary-800: oklch(42.4% 0.199 265.638); - --color-primary-900: oklch(37.9% 0.146 265.522); - --color-primary-950: oklch(28.2% 0.091 267.935); - - --color-primary-contrast-dark: var(--color-primary-950); - --color-primary-contrast-light: var(--color-primary-50); - - --color-primary-contrast-50: var(--color-primary-contrast-dark); - --color-primary-contrast-100: var(--color-primary-contrast-dark); - --color-primary-contrast-200: var(--color-primary-contrast-dark); - --color-primary-contrast-300: var(--color-primary-contrast-dark); - --color-primary-contrast-400: var(--color-primary-contrast-dark); - --color-primary-contrast-500: var(--color-primary-contrast-light); - --color-primary-contrast-600: var(--color-primary-contrast-light); - --color-primary-contrast-700: var(--color-primary-contrast-light); - --color-primary-contrast-800: var(--color-primary-contrast-light); - --color-primary-contrast-900: var(--color-primary-contrast-light); - --color-primary-contrast-950: var(--color-primary-contrast-light); - - --color-secondary-50: oklch(98.5% 0.002 247.839); - --color-secondary-100: oklch(96.7% 0.003 264.542); - --color-secondary-200: oklch(92.8% 0.006 264.531); - --color-secondary-300: oklch(87.2% 0.01 258.338); - --color-secondary-400: oklch(70.7% 0.022 261.325); - --color-secondary-500: oklch(55.1% 0.027 264.364); - --color-secondary-600: oklch(44.6% 0.03 256.802); - --color-secondary-700: oklch(37.3% 0.034 259.733); - --color-secondary-800: oklch(27.8% 0.033 256.848); - --color-secondary-900: oklch(21% 0.034 264.665); - --color-secondary-950: oklch(13% 0.028 261.692); - --color-secondary-contrast-dark: var(--color-secondary-950); - --color-secondary-contrast-light: var(--color-secondary-50); - --color-secondary-contrast-50: var(--color-secondary-contrast-dark); - --color-secondary-contrast-100: var(--color-secondary-contrast-dark); - --color-secondary-contrast-200: var(--color-secondary-contrast-dark); - --color-secondary-contrast-300: var(--color-secondary-contrast-dark); - --color-secondary-contrast-400: var(--color-secondary-contrast-dark); - --color-secondary-contrast-500: var(--color-secondary-contrast-light); - --color-secondary-contrast-600: var(--color-secondary-contrast-light); - --color-secondary-contrast-700: var(--color-secondary-contrast-light); - --color-secondary-contrast-800: var(--color-secondary-contrast-light); - --color-secondary-contrast-900: var(--color-secondary-contrast-light); - --color-secondary-contrast-950: var(--color-secondary-contrast-light); - - --color-tertiary-50: oklch(96.9% 0.016 293.756); - --color-tertiary-100: oklch(94.3% 0.029 294.588); - --color-tertiary-200: oklch(89.4% 0.057 293.283); - --color-tertiary-300: oklch(81.1% 0.111 293.571); - --color-tertiary-400: oklch(70.2% 0.183 293.541); - --color-tertiary-500: oklch(60.6% 0.25 292.717); - --color-tertiary-600: oklch(54.1% 0.281 293.009); - --color-tertiary-700: oklch(49.1% 0.27 292.581); - --color-tertiary-800: oklch(43.2% 0.232 292.759); - --color-tertiary-900: oklch(38% 0.189 293.745); - --color-tertiary-950: oklch(28.3% 0.141 291.089); - --color-tertiary-contrast-dark: var(--color-tertiary-950); - --color-tertiary-contrast-light: var(--color-tertiary-50); - --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark); - --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark); - --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark); - --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark); - --color-tertiary-contrast-400: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-500: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-600: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-700: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-800: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-900: var(--color-tertiary-contrast-light); - --color-tertiary-contrast-950: var(--color-tertiary-contrast-light); - - --color-success-50: oklch(98.2% 0.018 155.826); - --color-success-100: oklch(96.2% 0.044 156.743); - --color-success-200: oklch(92.5% 0.084 155.995); - --color-success-300: oklch(87.1% 0.15 154.449); - --color-success-400: oklch(79.2% 0.209 151.711); - --color-success-500: oklch(72.3% 0.219 149.579); - --color-success-600: oklch(62.7% 0.194 149.214); - --color-success-700: oklch(52.7% 0.154 150.069); - --color-success-800: oklch(44.8% 0.119 151.328); - --color-success-900: oklch(39.3% 0.095 152.535); - --color-success-950: oklch(26.6% 0.065 152.934); - --color-success-contrast-dark: var(--color-success-950); - --color-success-contrast-light: var(--color-success-50); - --color-success-contrast-50: var(--color-success-contrast-dark); - --color-success-contrast-100: var(--color-success-contrast-dark); - --color-success-contrast-200: var(--color-success-contrast-dark); - --color-success-contrast-300: var(--color-success-contrast-dark); - --color-success-contrast-400: var(--color-success-contrast-dark); - --color-success-contrast-500: var(--color-success-contrast-dark); - --color-success-contrast-600: var(--color-success-contrast-dark); - --color-success-contrast-700: var(--color-success-contrast-light); - --color-success-contrast-800: var(--color-success-contrast-light); - --color-success-contrast-900: var(--color-success-contrast-light); - --color-success-contrast-950: var(--color-success-contrast-light); - - --color-warning-50: oklch(98.7% 0.022 95.277); - --color-warning-100: oklch(96.2% 0.059 95.617); - --color-warning-200: oklch(92.4% 0.12 95.746); - --color-warning-300: oklch(87.9% 0.169 91.605); - --color-warning-400: oklch(82.8% 0.189 84.429); - --color-warning-500: oklch(76.9% 0.188 70.08); - --color-warning-600: oklch(66.6% 0.179 58.318); - --color-warning-700: oklch(55.5% 0.163 48.998); - --color-warning-800: oklch(47.3% 0.137 46.201); - --color-warning-900: oklch(41.4% 0.112 45.904); - --color-warning-950: oklch(27.9% 0.077 45.635); - --color-warning-contrast-dark: var(--color-warning-950); - --color-warning-contrast-light: var(--color-warning-50); - --color-warning-contrast-50: var(--color-warning-contrast-dark); - --color-warning-contrast-100: var(--color-warning-contrast-dark); - --color-warning-contrast-200: var(--color-warning-contrast-dark); - --color-warning-contrast-300: var(--color-warning-contrast-dark); - --color-warning-contrast-400: var(--color-warning-contrast-dark); - --color-warning-contrast-500: var(--color-warning-contrast-dark); - --color-warning-contrast-600: var(--color-warning-contrast-light); - --color-warning-contrast-700: var(--color-warning-contrast-light); - --color-warning-contrast-800: var(--color-warning-contrast-light); - --color-warning-contrast-900: var(--color-warning-contrast-light); - --color-warning-contrast-950: var(--color-warning-contrast-light); +[data-theme='cerberus'] { + --heading-font-family: 'Roboto', sans-serif; + --base-font-family: 'Spectral', serif; + --base-font-size: 1.25rem; + --anchor-text-decoration: underline; +} - --color-error-50: oklch(96.9% 0.015 12.422); - --color-error-100: oklch(94.1% 0.03 12.58); - --color-error-200: oklch(89.2% 0.058 10.001); - --color-error-300: oklch(81% 0.117 11.638); - --color-error-400: oklch(71.2% 0.194 13.428); - --color-error-500: oklch(64.5% 0.246 16.439); - --color-error-600: oklch(58.6% 0.253 17.585); - --color-error-700: oklch(51.4% 0.222 16.935); - --color-error-800: oklch(45.5% 0.188 13.697); - --color-error-900: oklch(41% 0.159 10.272); - --color-error-950: oklch(27.1% 0.105 12.094); - --color-error-contrast-dark: var(--color-error-950); - --color-error-contrast-light: var(--color-error-50); - --color-error-contrast-50: var(--color-error-contrast-dark); - --color-error-contrast-100: var(--color-error-contrast-dark); - --color-error-contrast-200: var(--color-error-contrast-dark); - --color-error-contrast-300: var(--color-error-contrast-dark); - --color-error-contrast-400: var(--color-error-contrast-light); - --color-error-contrast-500: var(--color-error-contrast-light); - --color-error-contrast-600: var(--color-error-contrast-light); - --color-error-contrast-700: var(--color-error-contrast-light); - --color-error-contrast-800: var(--color-error-contrast-light); - --color-error-contrast-900: var(--color-error-contrast-light); - --color-error-contrast-950: var(--color-error-contrast-light); +@theme { + --font-sans: var(--heading-font-family); + --font-serif: var(--base-font-family); +} - --color-surface-50: oklch(98.4% 0.003 247.858); - --color-surface-100: oklch(96.8% 0.007 247.896); - --color-surface-200: oklch(92.9% 0.013 255.508); - --color-surface-300: oklch(86.9% 0.022 252.894); - --color-surface-400: oklch(70.4% 0.04 256.788); - --color-surface-500: oklch(55.4% 0.046 257.417); - --color-surface-600: oklch(44.6% 0.043 257.281); - --color-surface-700: oklch(37.2% 0.044 257.287); - --color-surface-800: oklch(27.9% 0.041 260.031); - --color-surface-900: oklch(20.8% 0.042 265.755); - --color-surface-950: oklch(12.9% 0.042 264.695); - --color-surface-contrast-dark: var(--color-surface-950); - --color-surface-contrast-light: var(--color-surface-50); - --color-surface-contrast-50: var(--color-surface-contrast-dark); - --color-surface-contrast-100: var(--color-surface-contrast-dark); - --color-surface-contrast-200: var(--color-surface-contrast-dark); - --color-surface-contrast-300: var(--color-surface-contrast-dark); - --color-surface-contrast-400: var(--color-surface-contrast-light); - --color-surface-contrast-500: var(--color-surface-contrast-light); - --color-surface-contrast-600: var(--color-surface-contrast-light); - --color-surface-contrast-700: var(--color-surface-contrast-light); - --color-surface-contrast-800: var(--color-surface-contrast-light); - --color-surface-contrast-900: var(--color-surface-contrast-light); - --color-surface-contrast-950: var(--color-surface-contrast-light); +@media (prefers-color-scheme: dark) { + .shiki, + .shiki span { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + /* Some themes also switch font styles. */ + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; + } } -@import '@maiertech/sveltekit-helpers/theme-maiertech.css'; -@import '@maiertech/sveltekit-helpers/global.css'; +.shiki { + tab-size: 2; +} -@theme { - --font-sans: - Roboto, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-serif: Spectral, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; +@layer base { + a { + text-decoration: var(--anchor-text-decoration); + } } diff --git a/src/app.html b/src/app.html index b6dfde6d..07fbae50 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/collections/authors/thilo.json b/src/collections/authors/thilo.json index e59e06ce..0be7a371 100644 --- a/src/collections/authors/thilo.json +++ b/src/collections/authors/thilo.json @@ -1,6 +1,7 @@ { "id": "thilo", "name": "Thilo Maier", + "initials": "TM", "url": "https://bsky.app/profile/maier.tech", "imageUrl": "https://maier.tech/assets/portrait-thilo-maier.jpg" } diff --git a/src/lib/mdsvex/layouts/default.svelte b/src/lib/mdsvex/layouts/default.svelte index 7182f1f4..ffea30bf 100644 --- a/src/lib/mdsvex/layouts/default.svelte +++ b/src/lib/mdsvex/layouts/default.svelte @@ -1,6 +1,7 @@ -{@render children()} +
+ {@render children()} +
+ + diff --git a/src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.md b/src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.md index df11f26f..db7c1382 100644 --- a/src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.md +++ b/src/routes/posts/(2022)/three-ways-to-bootstrap-a-svelte-project/+page.md @@ -11,7 +11,7 @@ tags: -

-Last week I refactored parts of this website and accidentally broke the endpoint that creates this sitemap. I decided to read up on doing sitemaps the right way. Here is what I learned. -

+

+Last week I refactored parts of this website and accidentally broke the endpoint that creates +this sitemap. I decided to read up on doing +sitemaps the right way. Here is what I learned. +

## Google's take on sitemaps diff --git a/svelte.config.js b/svelte.config.js index 30210410..93f9d62b 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -2,42 +2,35 @@ import adapter from '@sveltejs/adapter-node'; import { escapeSvelte, mdsvex } from 'mdsvex'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; -import { createHighlighter } from 'shiki'; +import { codeToHtml } from 'shiki'; // Get the directory name of the current file. const dirname = path.dirname(fileURLToPath(import.meta.url)); -const highlighter = await createHighlighter({ - themes: ['min-light', 'min-dark'], - langs: [ - 'bash', - 'html', - 'javascript', - 'json', - 'markdown', - 'svelte', - 'text', - 'toml', - 'typescript', - 'yaml', - 'xml' - ] -}); - /** @type {import('mdsvex').MdsvexOptions} */ const mdsvexOptions = { extensions: ['.md'], layout: { // Default layout with custom components used when rendering Markdown. - // As of mdsvex v0.12.6, the layout paths must be absolute + // As of Mdsvex v0.12.6, the layout paths must be absolute. _: path.resolve(dirname, 'src/lib/mdsvex/layouts/default.svelte') }, highlight: { highlighter: async (code, lang = 'text') => { const html = escapeSvelte( - highlighter.codeToHtml(code, { + await codeToHtml(code, { lang, - themes: { light: 'min-light', dark: 'min-dark' } + themes: { + light: 'github-light', + dark: 'github-dark' + }, + transformers: [ + { + pre(node) { + this.addClassToHast(node, 'pre'); + } + } + ] }) ); return `{@html \`${html}\` }`; From 4a20071dbb6b04016e00403c53fadb22808e7d7d Mon Sep 17 00:00:00 2001 From: Thilo Maier Date: Fri, 19 Jun 2026 17:03:26 +0200 Subject: [PATCH 2/4] Fine-tune theme --- package.json | 8 ++--- pnpm-lock.yaml | 52 +++++++++++++-------------- src/app.css | 18 ++++------ src/app.html | 2 +- src/lib/mdsvex/layouts/default.svelte | 4 ++- 5 files changed, 41 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index c0824486..cc021b59 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,10 @@ "@content-collections/vite": "^0.3.0", "@eslint/compat": "^2.1.0", "@eslint/js": "^10.0.1", - "@fontsource/roboto": "^5.2.10", + "@fontsource/kanit": "^5.2.8", "@fontsource/spectral": "^5.2.8", - "@lucide/svelte": "^1.20.0", - "@maiertech/sveltekit-helpers": "^0.53.0", + "@lucide/svelte": "^1.21.0", + "@maiertech/sveltekit-helpers": "^0.53.1", "@playwright/test": "^1.61.0", "@skeletonlabs/skeleton": "^4.15.2", "@skeletonlabs/skeleton-svelte": "^4.15.2", @@ -42,7 +42,7 @@ "mdsvex": "^0.12.7", "prettier": "^3.8.4", "prettier-plugin-svelte": "^4.1.1", - "prettier-plugin-tailwindcss": "^0.8.0", + "prettier-plugin-tailwindcss": "0.0.0-insiders.fc3a063", "shiki": "^4.2.0", "simple-icons": "^16.23.0", "svelte": "^5.56.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e5a77df..1669de8e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,18 +20,18 @@ importers: '@eslint/js': specifier: ^10.0.1 version: 10.0.1(eslint@10.5.0(jiti@2.7.0)) - '@fontsource/roboto': - specifier: ^5.2.10 - version: 5.2.10 + '@fontsource/kanit': + specifier: ^5.2.8 + version: 5.2.8 '@fontsource/spectral': specifier: ^5.2.8 version: 5.2.8 '@lucide/svelte': - specifier: ^1.20.0 - version: 1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) + specifier: ^1.21.0 + version: 1.21.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) '@maiertech/sveltekit-helpers': - specifier: ^0.53.0 - version: 0.53.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3) + specifier: ^0.53.1 + version: 0.53.1(@lucide/svelte@1.21.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3) '@playwright/test': specifier: ^1.61.0 version: 1.61.0 @@ -90,8 +90,8 @@ importers: specifier: ^4.1.1 version: 4.1.1(prettier@3.8.4)(svelte@5.56.3(@typescript-eslint/types@8.61.1)) prettier-plugin-tailwindcss: - specifier: ^0.8.0 - version: 0.8.0(prettier-plugin-svelte@4.1.1(prettier@3.8.4)(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(prettier@3.8.4) + specifier: 0.0.0-insiders.fc3a063 + version: 0.0.0-insiders.fc3a063(prettier-plugin-svelte@4.1.1(prettier@3.8.4)(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(prettier@3.8.4) shiki: specifier: ^4.2.0 version: 4.2.0 @@ -369,8 +369,8 @@ packages: '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} - '@fontsource/roboto@5.2.10': - resolution: {integrity: sha512-8HlA5FtSfz//oFSr2eL7GFXAiE7eIkcGOtx7tjsLKq+as702x9+GU7K95iDeWFapHC4M2hv9RrpXKRTGGBI8Zg==} + '@fontsource/kanit@5.2.8': + resolution: {integrity: sha512-vISPW1kRoy+BTqplYCymdYRJcNFGmlPxWXqo178eGPe7P+lMX24JiQOxWdI4HLWR+0ROUzaFneXy/v1I9u99yg==} '@fontsource/spectral@5.2.8': resolution: {integrity: sha512-0CqZ8/z8A38BdeSz5t2NSd5tCO1R9P1k7SF2VpRLMbZTMSSR6+2Dk0ZBMfEQK/IrBLQS1HgHLMqpdTwRpnKpGQ==} @@ -567,13 +567,13 @@ packages: '@jridgewell/trace-mapping@0.3.31': resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} - '@lucide/svelte@1.20.0': - resolution: {integrity: sha512-s7TKCHEtFEfflOUDPRC0WBZEjoNJHtj/aUmuWxopFe3AKecEoKvMmCaO0sBDkflok8nR0BCFsm44QF+S6/gc+w==} + '@lucide/svelte@1.21.0': + resolution: {integrity: sha512-MEv//A7Jv3kHukZowv/DWp1MAtUzJKYwtJsmnQ7X98lCgtac3z3NbaToDl3Q6jO3gS9sougFpcD+t+YuxOkRMw==} peerDependencies: svelte: ^5 - '@maiertech/sveltekit-helpers@0.53.0': - resolution: {integrity: sha512-vfLEZO/8EST0CpeL/+CJzWUNfHiUTl1ia9/iClG7sX0bhstYflRd+TJc6FvWW4Qcxivl2XIDXa4RHkZzewtDJQ==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.53.0/56a298712d71fa48c3fad8b387b04e5b352a189b} + '@maiertech/sveltekit-helpers@0.53.1': + resolution: {integrity: sha512-HUMfFZ1hPKnatnQnmDM2jUjyt5SMhKNsJsFUMjP8uwVQuZiDiCrjrxYuI6cAlhuwMdqkB7CZLAfWT0Vf0SoLyQ==, tarball: https://npm.pkg.github.com/download/@maiertech/sveltekit-helpers/0.53.1/8ba4e016352750cdf9c45264ad48dfe39f0052cc} peerDependencies: '@lucide/svelte': ^1.7.0 '@skeletonlabs/skeleton': ^4.15.0 @@ -1931,8 +1931,8 @@ packages: prettier: ^3.0.0 svelte: ^5.0.0 - prettier-plugin-tailwindcss@0.8.0: - resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==} + prettier-plugin-tailwindcss@0.0.0-insiders.fc3a063: + resolution: {integrity: sha512-IZPw2G2Jaf6S3DFNUUbXgXsbVn8sRFPtqHyKF8+eip71DHFxqERVF1bcocO2XhJQNJyRBzm1/CSEF3XW4XyTdw==} engines: {node: '>=20.19'} peerDependencies: '@ianvs/prettier-plugin-sort-imports': '*' @@ -2053,8 +2053,8 @@ packages: engines: {node: '>=10'} hasBin: true - serialize-javascript@7.0.5: - resolution: {integrity: sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==} + serialize-javascript@7.0.6: + resolution: {integrity: sha512-ATTK5Q4gFVg0YDp1my2vqygyvhcklD/UV5GIlYHooGTn/NogJqIzpetkD6E5kmuVULqz/S9inUL25XcAgDRJQg==} engines: {node: '>=20.0.0'} set-cookie-parser@3.1.0: @@ -2330,7 +2330,7 @@ snapshots: p-limit: 6.2.0 picomatch: 4.0.4 pluralize: 8.0.0 - serialize-javascript: 7.0.5 + serialize-javascript: 7.0.6 tinyglobby: 0.2.17 typescript: 6.0.3 yaml: 2.9.0 @@ -2495,7 +2495,7 @@ snapshots: '@floating-ui/utils@0.2.11': {} - '@fontsource/roboto@5.2.10': {} + '@fontsource/kanit@5.2.8': {} '@fontsource/spectral@5.2.8': {} @@ -2634,13 +2634,13 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 - '@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1))': + '@lucide/svelte@1.21.0(svelte@5.56.3(@typescript-eslint/types@8.61.1))': dependencies: svelte: 5.56.3(@typescript-eslint/types@8.61.1) - '@maiertech/sveltekit-helpers@0.53.0(@lucide/svelte@1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3)': + '@maiertech/sveltekit-helpers@0.53.1(@lucide/svelte@1.21.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton-svelte@4.15.2(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(@skeletonlabs/skeleton@4.15.2(tailwindcss@4.3.1))(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(jiti@2.7.0)(yaml@2.9.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(tailwindcss@4.3.1)(zod@4.4.3)': dependencies: - '@lucide/svelte': 1.20.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) + '@lucide/svelte': 1.21.0(svelte@5.56.3(@typescript-eslint/types@8.61.1)) '@shikijs/langs': 4.2.0 '@shikijs/themes': 4.2.0 '@skeletonlabs/skeleton': 4.15.2(tailwindcss@4.3.1) @@ -4070,7 +4070,7 @@ snapshots: prettier: 3.8.4 svelte: 5.56.3(@typescript-eslint/types@8.61.1) - prettier-plugin-tailwindcss@0.8.0(prettier-plugin-svelte@4.1.1(prettier@3.8.4)(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(prettier@3.8.4): + prettier-plugin-tailwindcss@0.0.0-insiders.fc3a063(prettier-plugin-svelte@4.1.1(prettier@3.8.4)(svelte@5.56.3(@typescript-eslint/types@8.61.1)))(prettier@3.8.4): dependencies: prettier: 3.8.4 optionalDependencies: @@ -4172,7 +4172,7 @@ snapshots: semver@7.8.4: {} - serialize-javascript@7.0.5: {} + serialize-javascript@7.0.6: {} set-cookie-parser@3.1.0: {} diff --git a/src/app.css b/src/app.css index 14ae947a..282dd29a 100644 --- a/src/app.css +++ b/src/app.css @@ -2,18 +2,20 @@ @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton-svelte'; -@import '@skeletonlabs/skeleton/themes/cerberus'; +@import '@skeletonlabs/skeleton/themes/wintry'; -@import '@fontsource/roboto'; +@import '@fontsource/kanit'; @import '@fontsource/spectral'; @source '../node_modules/@maiertech/sveltekit-helpers/**/*.{js,svelte}'; -[data-theme='cerberus'] { - --heading-font-family: 'Roboto', sans-serif; +[data-theme='wintry'] { + --text-scaling: 1.2; + --heading-font-family: 'Kanit', sans-serif; --base-font-family: 'Spectral', serif; - --base-font-size: 1.25rem; --anchor-text-decoration: underline; + /*--body-background-color: var(--color-surface-50); + --body-background-color-dark: var(--color-surface-950);*/ } @theme { @@ -36,9 +38,3 @@ .shiki { tab-size: 2; } - -@layer base { - a { - text-decoration: var(--anchor-text-decoration); - } -} diff --git a/src/app.html b/src/app.html index 07fbae50..db4e894a 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/lib/mdsvex/layouts/default.svelte b/src/lib/mdsvex/layouts/default.svelte index ffea30bf..2686cfc3 100644 --- a/src/lib/mdsvex/layouts/default.svelte +++ b/src/lib/mdsvex/layouts/default.svelte @@ -1,6 +1,7 @@ -
+