Development

.github/workflows/svelte_check.yml

@@ -2,6 +2,10 @@ name: Run_Svelte_Check_on_PRs
 
 on:
   pull_request:
+    branches:
+      - master
+      - main
+      - development
 
   workflow_dispatch:
 

.github/workflows/svelte_integration.yml

@@ -0,0 +1,57 @@
+name: Run_Svelte_Integration_on_PRs
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+
+  workflow_dispatch:
+
+jobs:
+  e2e-tests:
+    name: Run end-to-end tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: pnpm-setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install playwright browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run tests
+        env:
+          WALLABAG_MAX_ARTICLES: ${{ secrets.WALLABAG_MAX_ARTICLES }}
+          WALLABAG_MAX_PAGES: ${{ secrets.WALLABAG_MAX_PAGES }}
+          WALLABAG_CLIENT_ID: ${{ secrets.WALLABAG_CLIENT_ID }}
+          WALLABAG_CLIENT_SECRET: ${{ secrets.WALLABAG_CLIENT_SECRET }}
+          WALLABAG_USERNAME: ${{ secrets.WALLABAG_USERNAME }}
+          WALLABAG_PASSWORD: ${{ secrets.WALLABAG_PASSWORD }}
+          WALLABAG_URL: ${{ secrets.WALLABAG_URL }}
+          BANDCAMP_USERNAME: ${{ secrets.BANDCAMP_USERNAME }}
+          PUBLIC_SITE_URL: ${{ secrets.PUBLIC_SITE_URL }}
+          PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
+          PUBLIC_UMAMI_DO_NOT_TRACK: ${{ secrets.PUBLIC_UMAMI_DO_NOT_TRACK }}
+          PUBLIC_UMAMI_URL: ${{ secrets.PUBLIC_UMAMI_URL }}
+          PUBLIC_UMAMI_ID: ${{ secrets.PUBLIC_UMAMI_ID }}
+          PAGE_SIZE: ${{ secrets.PAGE_SIZE }}
+          USE_REDIS_CACHE: 'false'
+          REDIS_URI: ${{ secrets.REDIS_URI }}
+        run: pnpm test:integration
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/svelte_unit.yml

@@ -0,0 +1,58 @@
+name: Run_Svelte_Unit_on_PRs
+
+on:
+  push:
+    branches:
+      - master
+      - main
+      - development
+  pull_request:
+    branches:
+      - master
+      - main
+      - development
+
+  workflow_dispatch:
+
+env:
+  WALLABAG_MAX_ARTICLES: ${{ secrets.WALLABAG_MAX_ARTICLES }}
+  WALLABAG_MAX_PAGES: ${{ secrets.WALLABAG_MAX_PAGES }}
+  WALLABAG_CLIENT_ID: ${{ secrets.WALLABAG_CLIENT_ID }}
+  WALLABAG_CLIENT_SECRET: ${{ secrets.WALLABAG_CLIENT_SECRET }}
+  WALLABAG_USERNAME: ${{ secrets.WALLABAG_USERNAME }}
+  WALLABAG_PASSWORD: ${{ secrets.WALLABAG_PASSWORD }}
+  WALLABAG_URL: ${{ secrets.WALLABAG_URL }}
+  BANDCAMP_USERNAME: ${{ secrets.BANDCAMP_USERNAME }}
+  PUBLIC_SITE_URL: ${{ secrets.PUBLIC_SITE_URL }}
+  PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
+  PUBLIC_UMAMI_DO_NOT_TRACK: ${{ secrets.PUBLIC_UMAMI_DO_NOT_TRACK }}
+  PUBLIC_UMAMI_URL: ${{ secrets.PUBLIC_UMAMI_URL }}
+  PUBLIC_UMAMI_ID: ${{ secrets.PUBLIC_UMAMI_ID }}
+  PAGE_SIZE: ${{ secrets.PAGE_SIZE }}
+  USE_REDIS_CACHE: ${{ secrets.USE_REDIS_CACHE }}
+  REDIS_URI: ${{ secrets.REDIS_URI }}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: pnpm-setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Execute unit tests
+        run: pnpm test:unit

.gitignore

@@ -16,3 +16,7 @@ vite.config.ts.timestamp-*
 
 # Sentry Config File
 .sentryclirc
+
+# Test Results
+test-results
+test-results/*

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
+  addons: [
+    "@storybook/addon-svelte-csf",
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y"
+  ],
+  framework: {
+    name: "@storybook/sveltekit",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '../src/styles/styles.pcss';
+
+import type { Preview } from '@storybook/sveltekit';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"workbench.colorTheme": "Dark+ (default dark)",
+}

package.json

@@ -1,61 +1,68 @@
 {
-	"name": "personal-website-sveltekit",
-	"version": "1.0.0",
-	"private": true,
-	"type": "module",
-	"scripts": {
-		"dev": "NODE_OPTIONS=\"--inspect\" vite dev --host",
-		"build": "vite build",
-		"preview": "vite preview",
-		"test": "npm run test:integration && npm run test:unit",
-		"test:ui": "svelte-kit sync && playwright test --ui",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "biome lint --error-on-warnings .",
-		"format": "biome format --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"devDependencies": {
-		"@biomejs/biome": "^2.1.4",
-		"@internationalized/date": "^3.8.2",
-		"@playwright/test": "^1.54.2",
-		"@sveltejs/enhanced-img": "^0.5.1",
-		"@sveltejs/kit": "^2.29.0",
-		"@sveltejs/vite-plugin-svelte": "^5.1.1",
-		"@unpic/svelte": "^1.0.0",
-		"@zerodevx/svelte-img": "^2.1.2",
-		"autoprefixer": "^10.4.21",
-		"just-intersect": "^4.3.0",
-		"postcss": "^8.5.6",
-		"postcss-custom-media": "^11.0.6",
-		"postcss-import": "^16.1.1",
-		"postcss-load-config": "^6.0.1",
-		"postcss-preset-env": "^10.2.4",
-		"satori": "^0.12.2",
-		"satori-html": "^0.3.2",
-		"svelte": "^5.38.1",
-		"svelte-check": "^4.3.1",
-		"svelte-meta-tags": "^4.4.0",
-		"svelte-preprocess": "^6.0.3",
-		"svelte-sequential-preprocessor": "^2.0.2",
-		"tslib": "^2.8.1",
-		"typescript": "^5.9.2",
-		"vanilla-lazyload": "^19.1.3",
-		"vite": "^6.3.5",
-		"vite-imagetools": "^7.1.1",
-		"vitest": "^3.2.4"
-	},
-	"dependencies": {
-		"@resvg/resvg-js": "^2.6.2",
-		"@sveltejs/adapter-node": "^5.2.14",
-		"@vercel/og": "^0.6.8",
-		"bits-ui": "2.9.2",
-		"flexsearch": "^0.8.205",
-		"ioredis": "^5.7.0",
-		"lucide-svelte": "^0.539.0",
-		"scrape-it": "^6.1.11",
-		"sharp": "^0.34.3",
-		"svelte-local-storage-store": "^0.6.4"
-	}
+  "name": "personal-website-sveltekit",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "NODE_OPTIONS=\"--inspect\" vite dev --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "npm run test:integration && npm run test:unit",
+    "test:ui": "svelte-kit sync && playwright test --ui",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "biome lint --error-on-warnings .",
+    "format": "biome format --write .",
+    "storybook": "storybook dev -p 6006",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.2",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@internationalized/date": "^3.9.0",
+    "@playwright/test": "^1.55.0",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-svelte-csf": "^5.0.8",
+    "@storybook/sveltekit": "^9.1.3",
+    "@sveltejs/enhanced-img": "^0.5.1",
+    "@sveltejs/kit": "^2.36.3",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@unpic/svelte": "^1.0.0",
+    "@zerodevx/svelte-img": "^2.1.2",
+    "autoprefixer": "^10.4.21",
+    "just-intersect": "^4.3.0",
+    "postcss": "^8.5.6",
+    "postcss-custom-media": "^11.0.6",
+    "postcss-import": "^16.1.1",
+    "postcss-load-config": "^6.0.1",
+    "postcss-preset-env": "^10.3.0",
+    "satori": "^0.16.2",
+    "satori-html": "^0.3.2",
+    "storybook": "^9.1.3",
+    "svelte": "^5.38.5",
+    "svelte-check": "^4.3.1",
+    "svelte-meta-tags": "^4.4.0",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-sequential-preprocessor": "^2.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vanilla-lazyload": "^19.1.3",
+    "vite": "^6.3.5",
+    "vite-imagetools": "^7.1.1",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "@sveltejs/adapter-node": "^5.3.1",
+    "@vercel/og": "^0.8.5",
+    "bits-ui": "2.9.4",
+    "flexsearch": "^0.8.205",
+    "ioredis": "^5.7.0",
+    "lucide-svelte": "^0.542.0",
+    "scrape-it": "^6.1.11",
+    "sharp": "^0.34.3",
+    "svelte-local-storage-store": "^0.6.4"
+  }
 }

playwright.config.ts

@@ -1,12 +1,32 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-	webServer: {
-		command: 'pnpm run build && pnpm run preview',
-		port: 4173
-	},
-	testDir: 'tests',
-	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+  webServer: {
+    command: 'pnpm -s exec svelte-kit sync && pnpm run build && pnpm run preview',
+    port: 4173,
+    timeout: 180_000,
+    reuseExistingServer: true
+  },
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  use: {
+    baseURL: 'http://localhost:4173'
+  },
+  // Run on main browsers: Chromium (Chrome), Firefox, WebKit (Safari)
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' }
+    },
+    {
+      name: 'firefox',
+      use: { browserName: 'firefox' }
+    },
+    {
+      name: 'webkit',
+      use: { browserName: 'webkit' }
+    }
+  ]
 };
 
 export default config;