sudacode/mokuro-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Setup flowbite

Browse Source
This commit is contained in:
ZXY101
2023-09-04 15:34:35 +02:00
parent 695c63c06b
commit 3f17b601e5
12 changed files with 1418 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1321
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -16,14 +16,20 @@
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.20.4",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0", "@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0", "eslint-plugin-svelte": "^2.30.0",
"flowbite-svelte": "^0.44.5",
"flowbite-svelte-icons": "^0.4.2",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0", "prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1", "prettier-plugin-svelte": "^2.10.1",
"sass": "^1.64.2", "sass": "^1.64.2",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"svelte-check": "^3.4.3", "svelte-check": "^3.4.3",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^4.4.2" "vite": "^4.4.2"

13
postcss.config.cjs Normal file
View File

@@ -0,0 +1,13 @@
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const config = {
plugins: [
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer
]
};
module.exports = config;

2
src/app.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />

4
src/app.postcss Normal file
View File

@@ -0,0 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

22
src/lib/components/Catalog.svelte
View File

@@ -4,16 +4,20 @@
</script> </script>
{#if $catalog && $catalog.length > 0} {#if $catalog && $catalog.length > 0}
<div class="container"> {#if $catalog.length > 0}
{#each $catalog as { manga }} <div class="container">
<CatalogItem {manga} /> {#each $catalog as { manga }}
{/each} <CatalogItem {manga} />
</div> {/each}
</div>
{:else}
<div class="empty-state">
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
{/if}
{:else} {:else}
<div class="empty-state"> <p>Loading...</p>
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
{/if} {/if}
<style lang="scss"> <style lang="scss">

2
src/lib/components/FileUpload.svelte
View File

@@ -36,7 +36,7 @@
} }
button { button {
width: 500px; width: 100%;
height: 100px; height: 100px;
border-radius: 12px; border-radius: 12px;
border: 2px dashed $secondary-color; border: 2px dashed $secondary-color;

93
src/lib/components/NavBar.svelte
View File

@@ -1,72 +1,43 @@
<script lang="ts" context="module">
export let navbarTitle = writable<string | undefined>(undefined);
</script>
<script lang="ts"> <script lang="ts">
import { Navbar, NavBrand, Modal, Button } from 'flowbite-svelte';
import { UserSettingsSolid, UploadSolid } from 'flowbite-svelte-icons';
import FileUpload from './FileUpload.svelte';
import { processFiles } from '$lib/upload';
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { currentManga, currentVolume } from '$lib/catalog'; let promise: Promise<void>;
import SettingsIcon from '$lib/assets/svgs/settings-svgrepo-com.svg'; let modal = false;
let isReader = false;
import { writable } from 'svelte/store'; async function onUpload(files: FileList) {
let title: string | undefined = 'Mokuro'; promise = processFiles(files).then(() => {
let back: string | undefined = undefined; modal = false;
});
}
afterNavigate(() => { afterNavigate(() => {
window.document.body.classList.remove('reader'); isReader = $page.route.id === '/[manga]/[volume]';
switch ($page?.route.id) {
case '/[manga]':
title = $currentManga?.[0].mokuroData.title;
back = '/';
break;
case '/[manga]/[volume]':
window.document.body.classList.add('reader');
title = $currentVolume?.volumeName;
back = '/manga';
break;
case '/upload':
title = 'Upload';
back = '/';
break;
default:
title = 'Mokuro';
back = undefined;
break;
}
}); });
</script> </script>
<nav> <div class="relative z-10">
<div> <Navbar hidden={isReader}>
{#if back} <NavBrand href="/">
<a href={back}><h2>Back</h2></a> <span class="text-xl font-semibold dark:text-white">Mokuro</span>
<h2>{title}</h2> </NavBrand>
{:else} <div class="flex md:order-2 gap-5">
<a href="/"><h2>{title}</h2></a> <UserSettingsSolid class="hover:text-cyan-300" />
{/if} <UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} />
<img src={SettingsIcon} alt="settings" /> </div>
</div> </Navbar>
</nav> </div>
<style lang="scss"> <Modal title="Upload" bind:open={modal} outsideclose>
img { {#await promise}
width: 32px; <h2 class="justify-center flex">Loading...</h2>
fill: #000; {:then}
} <FileUpload {onUpload} webkitdirectory>Upload directory</FileUpload>
nav { <FileUpload {onUpload} accept=".mokuro,.zip,.cbz" multiple>Upload files</FileUpload>
position: relative; {/await}
width: 100%; </Modal>
z-index: 1;
}
div {
background-color: $primary-color;
display: flex;
flex: 1;
justify-content: space-between;
padding: 0 10px 0 10px;
align-items: center;
z-index: 1;
}
</style>

7
src/lib/components/Snackbar.svelte
View File

@@ -1,17 +1,16 @@
<script lang="ts"> <script lang="ts">
import { snackbarStore } from '$lib/util/snackbar'; import { snackbarStore } from '$lib/util/snackbar';
import { Toast } from 'flowbite-svelte';
import { CheckCircleSolid, FireOutline } from 'flowbite-svelte-icons';
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
</script> </script>
{#if $snackbarStore?.message && $snackbarStore?.visible} {#if $snackbarStore?.message && $snackbarStore?.visible}
<div in:fly={{ y: 200, duration: 500 }} out:fade={{ duration: 500 }}> <Toast position="bottom-right">{$snackbarStore?.message}</Toast>
{$snackbarStore?.message}
</div>
{/if} {/if}
<style lang="scss"> <style lang="scss">
div { div {
background-color: rgba($primary-accent-color, 0.9);
position: fixed; position: fixed;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;

1
src/routes/+layout.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import '../app.postcss';
import NavBar from '$lib/components/NavBar.svelte'; import NavBar from '$lib/components/NavBar.svelte';
import Snackbar from '$lib/components/Snackbar.svelte'; import Snackbar from '$lib/components/Snackbar.svelte';
import '../app.scss'; import '../app.scss';

14
svelte.config.js
View File

@@ -1,13 +1,17 @@
import { vitePreprocess } from '@sveltejs/kit/vite';
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess'; import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
preprocess: preprocess({ preprocess: [
scss: { preprocess({
prependData: `@use './src/variables' as *;` scss: {
} prependData: `@use './src/variables' as *;`
}), }
}),
vitePreprocess({})
],
kit: { kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

30
tailwind.config.cjs Normal file
View File

@@ -0,0 +1,30 @@
/** @type {import('tailwindcss').Config}*/
const config = {
content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: {
primary: {
50: '#FFF5F2',
100: '#FFF1EE',
200: '#FFE4DE',
300: '#FFD5CC',
400: '#FFBCAD',
500: '#FE795D',
600: '#EF562F',
700: '#EB4F27',
800: '#CC4522',
900: '#A5371B'
}
}
}
},
plugins: [require('flowbite/plugin')],
darkMode: 'class',
};
module.exports = config;