Add build script

.forgejo/workflows/build.yaml

@@ -0,0 +1,41 @@
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build application
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Get NPM cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+      - uses: actions/cache@v4
+        name: Cache NPM
+        id: npm-cache
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - run: npm ci
+        name: Install dependencies
+      - run: npm lint
+        name: Lint code
+      - run: npm build
+        name: Build project
+      - run: npm test
+        name: Test project
+      - run: npm build-storybook
+        name: Build storybook
+      - uses: actions/upload-artifact@v4
+        name: Upload build directories
+        with:
+          name: build-artifacts
+          path: |
+            dist/
+            build/
+            .svelte-kit/
+            storybook-static/

.gitignore

@@ -21,3 +21,5 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+/storybook-static

.storybook/main.js

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

.storybook/preview.js

@@ -4,10 +4,10 @@ const preview = {
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
-       date: /Date$/i,
+				date: /Date$/i
-      },
+			}
-    },
+		}
-  },
+	}
 };
 
 export default preview;

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-    "recommendations": [
+	"recommendations": ["inlang.vs-code-extension"]
-        "inlang.vs-code-extension"
-    ]
 }

src/app.css

@@ -18,28 +18,33 @@
 	--color-secondary-900: #a8a4ea;
 	--color-accent: var(--color-primary-500);
 	--color-accent-contrast: #fff;
-    --color-border: rgba(0, 0, 0, .1);
+	--color-border: rgba(0, 0, 0, 0.1);
 	--color-surface: #ececec;
-    --color-dark-surface: rgba(26, 37, 22, .9);
+	--color-dark-surface: rgba(26, 37, 22, 0.9);
 	--color-dark-surface-text: white;
 	--color-dark-surface-text-dim: #808080;
-    --color-light-surface: rgba(255, 255, 255, .9);
+	--color-light-surface: rgba(255, 255, 255, 0.9);
 	--color-light-surface-text: var(--color-text);
 	--color-accent-surface: var(--color-accent);
 	--color-accent-surface-text: var(--color-accent-contrast);
-    --color-highlight-accent: rgba(255, 145, 49, .2);
+	--color-highlight-accent: rgba(255, 145, 49, 0.2);
-    --color-highlight-blue: rgba(10, 10, 255, .2);
+	--color-highlight-blue: rgba(10, 10, 255, 0.2);
-    --color-highlight-white: rgba(200, 200, 200, .2);
+	--color-highlight-white: rgba(200, 200, 200, 0.2);
-    --color-highlight-grey: rgba(100, 100, 100, .2);
+	--color-highlight-grey: rgba(100, 100, 100, 0.2);
-    --color-highlight-yellow: rgba(255, 230, 10, .2);
+	--color-highlight-yellow: rgba(255, 230, 10, 0.2);
-    --color-highlight-green: rgba(10, 255, 10, .2);
+	--color-highlight-green: rgba(10, 255, 10, 0.2);
-    --color-highlight-red: rgba(255, 10, 10, .2);
+	--color-highlight-red: rgba(255, 10, 10, 0.2);
-    --color-highlight-pink: rgba(255, 128, 255, .2);
+	--color-highlight-pink: rgba(255, 128, 255, 0.2);
-    --color-highlight-purple: rgba(204, 30, 152, .2);
+	--color-highlight-purple: rgba(204, 30, 152, 0.2);
 	--color-text: black;
 	--color-background: var(--color-base);
 	--nav-space: 95px;
-    --fill-pattern: repeating-linear-gradient( var(--layout-slant), var(--color-base) 0, var(--color-primary-500) .5px 3px, var(--color-base) 3.5px 12px );
+	--fill-pattern: repeating-linear-gradient(
+		var(--layout-slant),
+		var(--color-base) 0,
+		var(--color-primary-500) 0.5px 3px,
+		var(--color-base) 3.5px 12px
+	);
 	--filter-gray: grayscale(1);
 }
 

src/lib/components/ActionCard.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import type { Action } from "$lib/types";
+	import type { Action } from '$lib/types';
-    import { Coins } from "lucide-svelte";
+	import { Coins } from 'lucide-svelte';
 	import * as m from '$lib/paraglide/messages.js';
 
 	export let action: Action;
 
 	const onclick = (ev: MouseEvent) => {
 		ev.preventDefault();
-    }
+	};
 </script>
 
 <button class="action-card" {onclick}>
@@ -29,7 +29,7 @@
 		align-items: flex-start;
 
 		.body-part {
-            opacity: .75;
+			opacity: 0.75;
 		}
 
 		.type {
@@ -43,7 +43,7 @@
 			display: flex;
 			justify-content: center;
 			gap: 5px;
-            opacity: .75;
+			opacity: 0.75;
 
 			> :global(svg) {
 				color: var(--color-accent);

src/lib/components/StoreGrid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Action } from "$lib/types";
+	import type { Action } from '$lib/types';
 	import ActionCard from './ActionCard.svelte';
 	export let actions: Action[];
 </script>

src/lib/types.ts

@@ -1,17 +1,17 @@
 /**
  * An action to execute.
  */
-export type ActionType = "shock"|"vibrate";
+export type ActionType = 'shock' | 'vibrate';
 
 /**
  * A body part an action can affect.
  */
-export type BodyPartKey = "throat"|"thigh"|"ankle"|"upper_arm";
+export type BodyPartKey = 'throat' | 'thigh' | 'ankle' | 'upper_arm';
 
 /**
  * Time in seconds or burst.
  */
-export type Time = number|"burst";
+export type Time = number | 'burst';
 
 /**
  * Entry in the coinshop.

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
-	import "../app.css";
+	import '../app.css';
 
 	import '@fontsource-variable/roboto-flex/full.css';
 

src/routes/+page.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-	import StoreGrid from "$lib/components/StoreGrid.svelte";
+	import StoreGrid from '$lib/components/StoreGrid.svelte';
-	import type { Action } from "$lib/types.js";
+	import type { Action } from '$lib/types.js';
 
 	const exampleEntries: Action[] = [
 		{
-            id: "abcd",
+			id: 'abcd',
-            type: "shock",
+			type: 'shock',
-            bodyPart: "thigh",
+			bodyPart: 'thigh',
 			cost: 12,
-            subject: "raider",
+			subject: 'raider',
-            time: "burst"
+			time: 'burst'
 		},
 		{
-            id: "efgh",
+			id: 'efgh',
-            type: "shock",
+			type: 'shock',
-            bodyPart: "ankle",
+			bodyPart: 'ankle',
 			cost: 8,
-            subject: "raider",
+			subject: 'raider',
-            time: "burst"
+			time: 'burst'
 		}
-    ]
+	];
 </script>
 
 <h1>Punish Raider</h1>

src/stories/Button.stories.svelte

@@ -12,11 +12,11 @@
 			backgroundColor: { control: 'color' },
 			size: {
 				control: { type: 'select' },
-        options: ['small', 'medium', 'large'],
+				options: ['small', 'medium', 'large']
-      },
+			}
 		},
 		args: {
-      onClick: fn(),
+			onClick: fn()
 		}
 	});
 </script>

src/stories/Configure.mdx

@@ -1,21 +1,22 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from '@storybook/blocks';
 
-import Github from "./assets/github.svg";
+import Github from './assets/github.svg';
-import Discord from "./assets/discord.svg";
+import Discord from './assets/discord.svg';
-import Youtube from "./assets/youtube.svg";
+import Youtube from './assets/youtube.svg';
-import Tutorials from "./assets/tutorials.svg";
+import Tutorials from './assets/tutorials.svg';
-import Styling from "./assets/styling.png";
+import Styling from './assets/styling.png';
-import Context from "./assets/context.png";
+import Context from './assets/context.png';
-import Assets from "./assets/assets.png";
+import Assets from './assets/assets.png';
-import Docs from "./assets/docs.png";
+import Docs from './assets/docs.png';
-import Share from "./assets/share.png";
+import Share from './assets/share.png';
-import FigmaPlugin from "./assets/figma-plugin.png";
+import FigmaPlugin from './assets/figma-plugin.png';
-import Testing from "./assets/testing.png";
+import Testing from './assets/testing.png';
-import Accessibility from "./assets/accessibility.png";
+import Accessibility from './assets/accessibility.png';
-import Theming from "./assets/theming.png";
+import Theming from './assets/theming.png';
-import AddonLibrary from "./assets/addon-library.png";
+import AddonLibrary from './assets/addon-library.png';
 
-export const RightArrow = () => <svg 
+export const RightArrow = () => (
+	<svg
 		viewBox="0 0 14 14"
 		width="8px"
 		height="14px"
@@ -27,9 +28,10 @@ export const RightArrow = () => <svg
 			fill: 'currentColor',
 			'path fill': 'currentColor'
 		}}
->
+	>
 		<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+	</svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>

src/stories/Header.stories.svelte

@@ -11,12 +11,12 @@
 		tags: ['autodocs'],
 		parameters: {
 			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-      layout: 'fullscreen',
+			layout: 'fullscreen'
 		},
 		args: {
 			onLogin: fn(),
 			onLogout: fn(),
-      onCreateAccount: fn(),
+			onCreateAccount: fn()
 		}
 	});
 </script>

src/stories/Page.stories.svelte

@@ -10,12 +10,14 @@
 		component: Page,
 		parameters: {
 			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-      layout: 'fullscreen',
+			layout: 'fullscreen'
-    },
+		}
 	});
 </script>
 
-<Story name="Logged In" play={async ({ canvasElement }) => {
+<Story
+	name="Logged In"
+	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const loginButton = canvas.getByRole('button', { name: /Log in/i });
 		await expect(loginButton).toBeInTheDocument();
@@ -25,6 +27,6 @@
 		const logoutButton = canvas.getByRole('button', { name: /Log out/i });
 		await expect(logoutButton).toBeInTheDocument();
 	}}
-  />
+/>
 
 <Story name="Logged Out" />