Adding darkmode and prerender

ylfyt · Mar 2, 2024 · b7f1502 · b7f1502
1 parent 3691b83
commit b7f1502
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+dist
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
         "format": "prettier --write ."
     },
     "devDependencies": {
-        "@sveltejs/adapter-auto": "^3.0.0",
+        "@iconify/svelte": "^3.1.6",
+        "@sveltejs/adapter-static": "^3.0.1",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "@types/node": "^20.11.16",

diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
     <meta charset="utf-8" />

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+input[type='file']::file-selector-button {
+    margin-right: 20px;
+    border: none;
+    padding: 5px 10px;
+    color: black;
+    cursor: pointer;
+    border-radius: 10px;
+}
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
@@ -12,8 +12,13 @@
     }
 </script>
 
+<svelte:head>
+    <title>PDF Splitter</title>
+    <meta name="description" content="PDF Splitter" />
+</svelte:head>
+
 <div class="flex min-h-dvh flex-col items-center">
-    <div class="w-full px-4 md:w-[1024px]">
+    <div class="w-full px-4 lg:w-1/2">
         <slot />
     </div>
 </div>
diff --git a/src/routes/(main)/+layout.ts b/src/routes/(main)/+layout.ts
@@ -0,0 +1,2 @@
+export const prerender = true;
+export const trailingSlash = 'always';
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
     import { PDFDocument } from 'pdf-lib';
     import { saveFile } from '@/utils/save-file.js';
+    import { isDarkStore } from '@/stores/theme';
+    import Icon from '@iconify/svelte';
+    import { fly } from 'svelte/transition';
 
     let splits: string[] = [''];
     let files: FileList | undefined;
@@ -88,75 +91,100 @@
     }
 </script>
 
-<div class="flex flex-col gap-8 rounded-lg border-gray-900 px-4 pb-8 pt-4 md:mt-10 md:gap-10 md:border md:px-6">
-    <h1 class="text-center text-3xl font-medium">PDF Splitter</h1>
-    <div class="">
-        <div class="mb-2 text-sm font-bold text-gray-900 md:text-lg md:font-medium">Upload PDF File</div>
+<div class="mt-4 flex flex-col gap-8">
+    <div class="flex items-end justify-between">
         <div>
+            <h1 class="text-center text-2xl font-medium text-color0">PDF Splitter</h1>
+            <p>By <a href="https://ylfyt.github.io" target="_blank" class="text-color0 underline">ylfyt</a></p>
+        </div>
+        <div>
+            {#if $isDarkStore}
+                <button
+                    aria-label="dark-mode-toggle"
+                    in:fly={{ y: -25 }}
+                    on:click={() => isDarkStore.update((prev) => !prev)}
+                    class="text-color0"><Icon icon="fa:moon-o" /></button
+                >
+            {:else}
+                <button
+                    aria-label="dark-mode-toggle"
+                    in:fly={{ y: 25 }}
+                    on:click={() => isDarkStore.update((prev) => !prev)}
+                    class="text-color0"><Icon icon="fa:sun-o" /></button
+                >
+            {/if}
+        </div>
+    </div>
+    <form on:submit|preventDefault={splitPdf} class="flex flex-col gap-8">
+        <div>
+            <label for="pdf" class="text-sm font-bold text-dark dark:text-light md:text-lg md:font-medium"
+                >PDF File</label
+            >
             <input
+                id="pdf"
                 accept=".pdf"
-                class="w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400"
+                class="mt-2 w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400"
                 type="file"
+                required
                 bind:files
             />
             {#if doc}
-                <div class="mt-1 text-xs font-medium text-gray-900 md:text-sm">
-                    Pages Count: <span class="text-red-600">{doc?.getPageCount()}</span>
+                <div class="mt-1 text-xs font-medium md:text-sm">
+                    Pages Count: <span class="text-color0">{doc?.getPageCount()}</span>
                 </div>
             {/if}
         </div>
-    </div>
-    <div>
-        <div class="mb-2 flex items-center gap-2">
-            <span class="text-sm font-bold text-gray-900 md:text-lg md:font-medium">Split Pages</span>
-            <span class="text-xs md:text-base">(Separated by comma, ex: 1, 2, 5-10, 14)</span>
+        <div>
+            <div class="mb-2 flex items-center gap-2">
+                <span class="text-sm font-bold md:text-lg md:font-medium">Split Pages</span>
+                <span class="text-xs md:text-base">(Separated by comma, ex: 1, 2, 5-10, 14)</span>
+            </div>
+            <div class="flex flex-col gap-3">
+                {#each splits as _, idx (idx)}
+                    <div class="flex items-center justify-center gap-2 md:gap-4">
+                        <label for={`split-${idx}`} class="w-[70px] text-sm md:text-base">{`Split #${idx + 1}`}</label>
+                        <input
+                            id={`split-${idx}`}
+                            class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                            type="text"
+                            required
+                            placeholder="Pages number"
+                            bind:value={splits[idx]}
+                            use:init
+                        />
+                        <button
+                            on:click={() => {
+                                splits = splits.filter((_, i) => idx != i);
+                            }}
+                            class={`size-4 items-center justify-center rounded-full text-xl font-bold ${splits.length < 2 ? 'hidden' : 'flex'}`}
+                        >
+                            &#10005;
+                        </button>
+                    </div>
+                {/each}
+            </div>
+            <button
+                type="button"
+                class="mt-2 rounded-lg bg-color0 px-3 py-1 text-center text-sm shadow-sm focus:outline-none focus:ring-4 focus:ring-blue-300"
+                on:click={() => {
+                    splits.push('');
+                    splits = [...splits];
+                }}
+            >
+                Add Split
+            </button>
         </div>
-        <div class="flex flex-col gap-3">
-            {#each splits as _, idx}
-                <div class="flex items-center justify-center md:gap-4">
-                    <div class="w-[70px] text-sm md:text-base">{`Split #${idx + 1}`}</div>
-                    <input
-                        class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-                        type="text"
-                        placeholder="Pages number"
-                        bind:value={splits[idx]}
-                        use:init
-                    />
-                    <button
-                        on:click={() => {
-                            splits = splits.filter((_, i) => idx != i);
-                        }}
-                        class={`flex h-[35px] w-[35px] items-center justify-center rounded-full text-2xl font-bold ${idx === 0 ? 'invisible' : 'visible'}`}
-                    >
-                        &#10005;
-                    </button>
-                </div>
-            {/each}
+        <div class="mt-4 flex items-center justify-end gap-4">
+            {#if message.length != 0}
+                <span class="text-center text-red-600">{message}</span>
+            {/if}
+            <button
+                disabled={!doc || !splits.find((val) => val !== '')}
+                type="submit"
+                class="rounded-lg bg-color0 px-4 py-2 shadow-md disabled:opacity-70"
+            >
+                Split
+            </button>
         </div>
-        <button
-            type="button"
-            class="mt-2 rounded-lg bg-green-400 px-3 py-1 text-center text-sm shadow-sm focus:outline-none focus:ring-4 focus:ring-blue-300"
-            on:click={() => {
-                splits.push('');
-                splits = [...splits];
-            }}
-        >
-            Add Split
-        </button>
-    </div>
-    <div class="mt-4 flex flex-row-reverse items-center gap-4 md:flex-row">
-        <button
-            type="button"
-            disabled={!doc || !splits.find((val) => val !== '')}
-            class="rounded-lg bg-orange-400 px-4 py-2 shadow-md disabled:opacity-70"
-            on:click={() => {
-                splitPdf();
-            }}
-        >
-            Split
-        </button>
-        {#if message.length != 0}
-            <span class="text-center text-red-600">{message}</span>
-        {/if}
-    </div>
+    </form>
 </div>
diff --git a/src/stores/theme.ts b/src/stores/theme.ts
@@ -1,3 +1,3 @@
 import { useLocalStorage } from '@/lib/hooks/use-local-storage';
 
-export const isDarkStore = useLocalStorage('dark', false);
+export const isDarkStore = useLocalStorage('dark', true);
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,17 +1,26 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     preprocess: vitePreprocess(),
 
     kit: {
-        adapter: adapter(),
+        adapter: adapter({
+            pages: 'dist',
+            assets: 'dist',
+            fallback: '404.html',
+            precompress: false,
+            strict: true
+        }),
         alias: {
             '@': './src'
         },
         files: {
             assets: 'public'
+        },
+        paths: {
+            base: '/pdf-splitter'
         }
     }
 };

diff --git a/yarn.lock b/yarn.lock
@@ -130,6 +130,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
   integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
 
+"@iconify/svelte@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@iconify/svelte/-/svelte-3.1.6.tgz#060821ecae5dd92e9c1f0420a674eda5bc060086"
+  integrity sha512-yLSrlkOx5J6xXU5GDLPBV/MdVBVEZhd36onfqSbxQobp1XBoWQbMPLNZyCAmTKCPnmzXSowGy79agl8FQ3kj6A==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -284,12 +296,10 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz#9ffdf9ed133a7464f4ae187eb9e1294413fab235"
   integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==
 
-"@sveltejs/adapter-auto@^3.0.0":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz#7857575ddccc6f0dbd6b44190da0db6631bbfcc9"
-  integrity sha512-6LeZft2Fo/4HfmLBi5CucMYmgRxgcETweQl/yQoZo/895K3S9YWYN4Sfm/IhwlIpbJp3QNvhKmwCHbsqQNYQpw==
-  dependencies:
-    import-meta-resolve "^4.0.0"
+"@sveltejs/adapter-static@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-3.0.1.tgz#64c36020435d7b1eacd362b2d027fefda5ec2e44"
+  integrity sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==
 
 "@sveltejs/kit@^2.0.0":
   version "2.5.2"
@@ -1299,6 +1309,7 @@ source-map-js@^1.0.1, source-map-js@^1.0.2:
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1317,6 +1328,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     strip-ansi "^7.0.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==