SPA & Text Inputs

package.json

@@ -14,14 +14,15 @@
     "@tauri-apps/api": "^1.4.0"
   },
   "devDependencies": {
+    "@sveltejs/adapter-static": "^2.0.3",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tauri-apps/cli": "^1.4.0",
     "@tsconfig/svelte": "^5.0.0",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.0",
     "tslib": "^2.6.0",
     "typescript": "^5.0.2",
-    "vite": "^4.4.4",
+    "vite": "^4.4.4"
-    "@tauri-apps/cli": "^1.4.0"
   }
 }

src-tauri/tauri.conf.json

@@ -3,7 +3,7 @@
     "beforeDevCommand": "yarn dev",
     "beforeBuildCommand": "yarn build",
     "devPath": "http://localhost:1420",
-    "distDir": "../dist",
+    "distDir": "../build",
     "withGlobalTauri": false
   },
   "package": {
@@ -21,7 +21,7 @@
     "bundle": {
       "active": true,
       "targets": "all",
-      "identifier": "com.tauri.dev",
+      "identifier": "com.comicinfo.editor",
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",

src/+layout.ts

@@ -0,0 +1,2 @@
+export const prerender = true
+export const ssr = false

src/lib/IntegerInput.svelte

@@ -4,6 +4,12 @@
 
     export let negative = false;
 
+    export let defaultValue = 0;
+
+    if (typeof value === "undefined") {
+        value = defaultValue;
+    }
+
     function inputInteger(event: Event & {currentTarget: (EventTarget & HTMLInputElement)}) {
         let newValue = event.currentTarget.value;
 
@@ -11,7 +17,7 @@
             newValue = newValue.slice(1, newValue.length)
         }
 
-        if (!isNaN(Number(newValue))) {
+        if (newValue != "" && !isNaN(Number(newValue))) {
             value = Number(newValue);
         }
         else if (negative && newValue.startsWith("-")) {
@@ -20,8 +26,8 @@
             }
         }
         else if (newValue === "") {
-            event.currentTarget.value = "0";
+            event.currentTarget.value = defaultValue.toString();
-            value = 0;
+            value = defaultValue;
         }
         else {
             event.currentTarget.value = value.toString();

src/lib/MetadataInput.svelte

@@ -2,21 +2,37 @@
   import {writable} from "svelte/store";
   import type {Writable} from "svelte/store";
   import IntegerInput from "./IntegerInput.svelte";
+  import TextInput from "./TextInput.svelte";
 
+  let seriesTitle = "";
+  let volumeTitle = "";
   let volumeNumber = 0;
   let chapterNumber = 0;
-  let pageCount = 0;
+  let pageCount = 1;
   let chapterCount = 0;
+  let summary = "";
+  let releaseYear: number;
+  let releaseMonth: number;
+  let releaseDay: number;
+  let author: string;
+  let typesetter: string;
+  let editor: string;
+  let translator: string;
+  let publisher: string;
+  let tags: Vec<string>;
+  let genre = "Hentai";
+  let lang = "en";
+  let ageRating = "18+";
 </script>
 
 <div class="metadataInput">
   <h1>Metadata</h1>
 
   <label for="series">Series:</label>
-  <input id="series" type="text"><br>
+  <TextInput id="series" bind:value={seriesTitle} placeholder="Series Title" /><br>
 
   <label for="title">Title:</label>
-  <input id="title" type="text"><br>
+  <TextInput id="title" bind:value={volumeTitle} placeholder="Volume Title" /><br>
 
   <label for="volume">Volume:</label>
   <IntegerInput id="volume" bind:value={volumeNumber} />
@@ -26,34 +42,36 @@
   <IntegerInput id="chapter_count" bind:value={chapterCount} negative={true}/><br>
 
   <label for="page_count">Page Count</label>
-  <IntegerInput id="page_count" bind:value={pageCount} /><br>
+  <IntegerInput id="page_count" bind:value={pageCount} defaultValue={1} /><br>
 
   <label for="summary">Summary:</label><br>
   <label for="summary"></label><input id="series" type="text"><br>
 
   <label for="release_date">Release Date:</label>
-  <input id="release_date" type="text"><br>
+  <IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
+  <IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
+  <IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} /><br>
 
   <label for="author">Author:</label>
-  <input id="author" type="text">
+  <TextInput id="author" bind:value={author} placeholder="Author" />
 
   <label for="typesetter">Typesetter:</label>
-  <input id="typesetter" type="text">
+  <TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
 
   <label for="editor">Editor:</label>
-  <input id="editor" type="text"><br>
+  <TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
 
   <label for="translator">Translator</label>
-  <input id="translator" type="text">
+  <TextInput id="translator" bind:value={translator} placeholder="Translator" />
 
   <label for="publisher">Publisher</label>
-  <input id="publisher" type="text"><br>
+  <TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
 
   <label for="tags">Tags</label>
   <input id="tags" type="text"><br>
 
   <label for="genre">Genre</label>
-  <input id="genre" type="text">
+  <TextInput id="genre" bind:value={genre} placeholder="Genre" />
 
   <label for="lang">Language</label>
   <input id="lang" type="text"><br>

src/lib/Sidebar.svelte

@@ -36,8 +36,8 @@
     }
 
     .sidebar-button img {
-        width: 100%;
+        width: 70%;
-        height: 100%;
+        height: 70%;
         object-fit: contain;
     }
 

src/lib/TextInput.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    export let id: string;
+    export let value: string = "";
+    export let placeholder: string = "";
+
+    let width: number;
+
+    $: width = Math.max(value.length + 3, placeholder.length + 3);
+</script>
+
+<input {id} type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value} {placeholder}>
+
+<style>
+    .letterInput {
+        width: var(--valuelen);
+        padding-left: 1ch;
+    }
+</style>

src/styles.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Courier New;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -23,6 +23,7 @@ body, html {
 
 * {
   box-sizing: border-box;
+  font-family: inherit;
 }
 
 .app {

svelte.config.js

@@ -1,7 +1,15 @@
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import adapter from '@sveltejs/adapter-static';
 
 export default {
   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
   // for more information about preprocessors
   preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      pages: 'build',
+      assets: 'build',
+      fallback: 'index.html'
+    })
+  },
 };

yarn.lock

@@ -173,6 +173,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@sveltejs/adapter-static@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-2.0.3.tgz#616836c30bdce4d673a2e26c0f5ffbd5c1bc7c67"
+  integrity sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==
+
 "@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz#c99fcb73aaa845a3e2c0563409aeb3ee0b863add"