"Updated GitHub workflow, package dependencies, and code files for Svelte app" (#2)

* "Updated GitHub workflow, package dependencies, and code files for Svelte app"

* fix lockfile

* fix typesafe

Author: L4Ph

.github/release.yml

@@ -0,0 +1,13 @@
+# .github/release.yml
+
+changelog:
+  categories:
+    - title: 🏕 Features
+      labels:
+        - '*'
+      exclude:
+        labels:
+          - dependencies
+    - title: 👒 Dependencies
+      labels:
+        - dependencies

.github/workflows/deploy.yml

@@ -9,6 +9,8 @@ on:
   push:
     branches:
       - main
+    paths:
+      - src/**
   workflow_dispatch:
 
 jobs:

bun.lockb

@@ -41,16 +41,17 @@
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
 		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0-alpha.24",
 		"@types/bun": "latest",
 		"@types/node": "^22.5.5",
 		"autoprefixer": "^10.4.20",
 		"eslint-plugin-svelte": "^2.44.0",
 		"svelte": "^5.0.0-next.257",
 		"svelte-check": "^4.0.2",
-		"tailwindcss": "^3.4.11",
+		"tailwindcss": "^4.0.0-alpha.24",
 		"tslib": "^2.4.1",
 		"typescript": "^5.6.2",
-		"vite": "^5.4.5"
+		"vite": "^5.4.7"
 	},
 	"module": "index.ts"
 }

package.json

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @layer base {
 	:root {
@@ -25,30 +23,74 @@
 		--ring: 194 54.5% 61.2%;
 		--radius: 0.75rem;
 	}
-	.dark {
-		--background: 194 10% 5%;
-		--foreground: 194 0% 90%;
-		--card: 194 0% 0%;
-		--card-foreground: 194 0% 90%;
-		--popover: 194 10% 5%;
-		--popover-foreground: 194 0% 90%;
-		--primary: 194 54.5% 61.2%;
-		--primary-foreground: 0 0% 0%;
-		--secondary: 194 10% 10%;
-		--secondary-foreground: 0 0% 100%;
-		--muted: 156 10% 15%;
-		--muted-foreground: 194 0% 60%;
-		--accent: 156 10% 15%;
-		--accent-foreground: 194 0% 90%;
-		--destructive: 0 50% 30%;
-		--destructive-foreground: 194 0% 90%;
-		--border: 194 20% 18%;
-		--input: 194 20% 18%;
-		--ring: 194 54.5% 61.2%;
-		--radius: 0.75rem;
+}
+
+@theme {
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+  
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+  
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+  
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+  
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+  
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+  
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+  
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+  
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+
+	--font-family: "M PLUS 2 Variable", var(--font-sans);
+  
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+  
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+  
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+  
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+  
+		to {
+			height: "0";
+		}
 	}
 }
 
+.border {
+	border-color: #e4e5e9;
+}
+  
+button {
+	cursor: pointer;
+}
+
 @layer base {
 	* {
 		@apply border-border;

postcss.config.cjs

@@ -10,4 +10,10 @@ import { page } from "$app/stores";
 </svelte:head>
 
 <Toaster />
-<slot />
+<slot />
+
+<style>
+  :global(body) {
+    font-family: "M PLUS 2 Variable", var(--font-sans);
+  }
+</style>

src/app.css

@@ -33,9 +33,9 @@ let inputText: PersistentStore<string> = persist(
 	createLocalStorage(),
 	"inputText",
 );
-let preview: string = "";
+let preview = "";
 let textarea: Textarea;
-let open: boolean = true;
+let open = true;
 let fileInput: HTMLInputElement;
 
 let urlSearchParams = $page.url.searchParams;
@@ -104,7 +104,7 @@ if (isTauriApp()) {
 />
 
 <main class="h-screen">
-  {#if $inputText === "" || !inputText}
+  {#if ($inputText === "" || !inputText) && !isTauriApp() }
     <Dialog.Root bind:open>
       <Dialog.Content>
         <Dialog.Header>
@@ -115,13 +115,11 @@ if (isTauriApp()) {
           </Dialog.Description>
         </Dialog.Header>
         <Button on:click={() => open = false}><FilePlus2 class="mr-2" />新しく書く</Button>
-        {#if !isTauriApp()}
-          <Button on:click={() => fileInput.click()}>
-            <FilePen class="mr-2" />
-            ファイルを開く
-            <input type="file" accept=".txt" class="hidden" bind:this={fileInput} on:change={handleFileChange} />
-          </Button>
-        {/if}
+        <Button on:click={() => fileInput.click()}>
+          <FilePen class="mr-2" />
+          ファイルを開く
+          <input type="file" accept=".txt" class="hidden" bind:this={fileInput} on:change={handleFileChange} />
+        </Button>
       </Dialog.Content>
     </Dialog.Root>
   {/if}

src/routes/+layout.svelte

@@ -9,15 +9,13 @@ export function insertRubyToTextarea(
 		return null;
 	}
 	const selectionStart: number =
-		(textarea as HTMLTextAreaElement).selectionStart ?? undefined;
+		(textarea as unknown as HTMLTextAreaElement).selectionStart ?? undefined;
 	const selectionEnd: number =
-		(textarea as HTMLTextAreaElement).selectionEnd ?? undefined;
+		(textarea as unknown as HTMLTextAreaElement).selectionEnd ?? undefined;
 
 	if (selectionStart === undefined || selectionEnd === undefined) {
-		return null; // 何かしらの対応をここで追加
+		return null;
 	}
 
-	return (
-		inputText.slice(0, selectionStart) + "|《》" + inputText.slice(selectionEnd)
-	);
+	return `${inputText.slice(0, selectionStart)}|《》${inputText.slice(selectionEnd)}`;
 }

src/routes/+page.svelte

@@ -1,14 +1,15 @@
 import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 // @ts-ignore
-import { fileURLToPath } from "url";
+import { fileURLToPath } from "node:url";
+import tailwindcss from "@tailwindcss/vite";
 
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
 	exclude: ["svelte-codemirror-editor", "codemirror"],
-	plugins: [sveltekit()],
+	plugins: [tailwindcss(), sveltekit()],
 
 	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
 	//