Frontend things

.vscode/settings.json

@@ -12,4 +12,5 @@
     // Ensure VSCode uses pnpm instead of npm
     "eslint.packageManager": "pnpm",
     "npm.packageManager": "pnpm",
+    "css.lint.unknownAtRules": "ignore",
 }

kitsune-fe/.gitignore

@@ -11,3 +11,8 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 $houdini
+
+# Paraglide
+src/lib/paraglide
+
+*storybook.log

kitsune-fe/.storybook/main.ts

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

kitsune-fe/.storybook/preview.ts

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

kitsune-fe/eslint.config.js

@@ -29,6 +29,6 @@ export default ts.config(
 		}
 	},
 	{
-		ignores: ['build/', '.svelte-kit/', 'dist/', '$houdini/']
+		ignores: ['build/', '.svelte-kit/', 'dist/', '$houdini/', 'src/lib/paraglide']
 	}
 );

kitsune-fe/messages/en.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}

kitsune-fe/package.json

@@ -13,37 +13,51 @@
 		"test": "pnpm run test:unit -- --run",
 		"lint": "prettier --check . && eslint .",
 		"fmt": "prettier --write .",
-		"test:unit": "vitest"
+		"test:unit": "vitest",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
-		"@iconify-json/eos-icons": "^1.2.2",
+		"@chromatic-com/storybook": "^3.2.3",
+		"@iconify/svelte": "^4.2.0",
+		"@storybook/addon-essentials": "^8.5.0",
+		"@storybook/addon-interactions": "^8.5.0",
+		"@storybook/addon-svelte-csf": "5.0.0-next.23",
+		"@storybook/blocks": "^8.5.0",
+		"@storybook/svelte": "^8.5.0",
+		"@storybook/sveltekit": "^8.5.0",
+		"@storybook/test": "^8.5.0",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/kit": "^2.15.3",
 		"@sveltejs/vite-plugin-svelte": "5.0.3",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/typography": "^0.5.16",
 		"@trivago/prettier-plugin-sort-imports": "^5.2.1",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^9.1.0",
+		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
-		"graphql-ws": "^5.16.2",
+		"graphql-ws": "^6.0.1",
 		"houdini": "1.4.0",
 		"houdini-svelte": "2.1.0",
+		"powerglitch": "^2.4.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-css-order": "^2.1.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"prettier-plugin-tailwindcss": "^0.6.9",
-		"svelte": "^5.17.3",
-		"svelte-check": "^4.1.3",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.10",
+		"storybook": "^8.5.0",
+		"svelte": "^5.18.0",
+		"svelte-check": "^4.1.4",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.19.1",
-		"unplugin-icons": "^22.0.0",
+		"typescript-eslint": "^8.20.0",
 		"vite": "^6.0.7",
-		"vitest": "^2.1.8",
+		"vitest": "^3.0.1",
 		"zod": "^3.24.1"
+	},
+	"dependencies": {
+		"@inlang/paraglide-sveltekit": "^0.15.5"
 	}
 }

kitsune-fe/project.inlang/.gitignore

@@ -0,0 +1 @@
+cache

kitsune-fe/project.inlang/project_id

@@ -0,0 +1 @@
+6f9f64b72ff4fdf2638086d1a8e0562fce1876cf41c1a0599dbd8306fe1a32dc

kitsune-fe/project.inlang/settings.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@2/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@0/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{languageTag}.json"
+	},
+	"sourceLanguageTag": "en",
+	"languageTags": ["en"]
+}

kitsune-fe/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />

kitsune-fe/src/assets/Hangaku.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { PowerGlitch } from 'powerglitch';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import hangakuRaw from './hangaku.svg';
+
+	let props: HTMLAttributes<HTMLDivElement> = $props();
+	let hangakuElement: HTMLImageElement | undefined = $state();
+
+	$effect(() => {
+		PowerGlitch.glitch(hangakuElement, {
+			playMode: 'hover'
+		});
+	});
+</script>
+
+<div {...props}>
+	<img
+		class="m-0 h-auto w-full"
+		bind:this={hangakuElement}
+		src={hangakuRaw}
+		alt="Hangaku (Kitsune mascot)"
+	/>
+</div>

kitsune-fe/src/assets/Logo.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	import logoRaw from './kitsune_full.svg';
+
+	let props: Omit<HTMLImgAttributes, 'src' | 'srcset'> = $props();
+</script>
+
+<img {...props} src={logoRaw} />