Add about section

package.json

@@ -1,6 +1,6 @@
 {
   "name": "z-reader",
-  "version": "0.0.1",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/components/Settings/About.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { READER_VERSION } from '$lib/consts';
+  import { showSnackbar } from '$lib/util';
+  import { A, AccordionItem, Badge, Helper, Span } from 'flowbite-svelte';
+  import { GithubSolid } from 'flowbite-svelte-icons';
+
+  function toClipboard() {
+    navigator.clipboard.writeText(
+      'pip install git+https://github.com/kha-white/mokuro.git@web-reader'
+    );
+    showSnackbar('Copied to clipboard');
+  }
+</script>
+
+<AccordionItem>
+  <span slot="header">About</span>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-row justify-between">
+      <p class="font-semibold">Mokuro reader {READER_VERSION} <Badge>BETA</Badge></p>
+      <a
+        class="hover:text-primary-600"
+        href="https://github.com/ZXY101/mokuro-reader"
+        target="_blank"
+      >
+        <GithubSolid />
+      </a>
+    </div>
+    <p>
+      An online reader, gallery and stat tracker for <A href="https://github.com/kha-white/mokuro"
+        >mokuro</A
+      > processed manga.
+    </p>
+    <div>
+      <p>
+        To use the reader, manga must be processed with mokuro <A
+          href="https://github.com/kha-white/mokuro/tree/web-reader">0.2.0-beta.6</A
+        > which can be installed via:
+      </p>
+      <div role="none" on:click={toClipboard}>
+        <code class="text-primary-600 bg-slate-900"
+          >pip install git+https://github.com/kha-white/mokuro.git@web-reader</code
+        >
+      </div>
+    </div>
+    <p>
+      Once processed, upload your manga along with the <span class="text-primary-500">.mokuro</span>
+      file.
+    </p>
+    <Helper
+      >Created by <A href="https://github.com/ZXY101">ZXY101</A> & <A
+        class="https://github.com/kha-white/mokuro">kha-white</A
+      ></Helper
+    >
+  </div>
+</AccordionItem>

src/lib/components/Settings/AnkiConnectSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { settings, updateAnkiSetting } from '$lib/settings';
-  import { AccordionItem, Label, Toggle, Input } from 'flowbite-svelte';
+  import { AccordionItem, Label, Toggle, Input, Helper } from 'flowbite-svelte';
 
   $: disabled = !$settings.ankiConnectSettings.enabled;
 
@@ -16,6 +16,11 @@
 <AccordionItem>
   <span slot="header">Anki Connect</span>
   <div class="flex flex-col gap-5">
+    <Helper
+      >For anki connect integration to work, you must add the reader to your anki connect <code
+        class="text-primary-500">webCorsOriginList</code
+      > list</Helper
+    >
     <div>
       <Toggle bind:checked={enabled} on:change={() => updateAnkiSetting('enabled', enabled)}
         >AnkiConnect Integration Enabled</Toggle

src/lib/components/Settings/Settings.svelte

@@ -11,6 +11,7 @@
   import Stats from './Stats.svelte';
   import VolumeDefaults from './Volume/VolumeDefaults.svelte';
   import VolumeSettings from './Volume/VolumeSettings.svelte';
+  import About from './About.svelte';
 
   let transitionParams = {
     x: 320,
@@ -56,6 +57,7 @@
       <AnkiConnectSettings />
       <CatalogSettings />
       <Stats />
+      <About />
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>

src/lib/consts/index.ts

@@ -0,0 +1 @@
+export const READER_VERSION = '0.9.0'