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",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.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-plugin-svelte": "^2.10.1",
"sass": "^1.64.2",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"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>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<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>
{#if $catalog && $catalog.length > 0}
<div class="container">
{#each $catalog as { manga }}
<CatalogItem {manga} />
{/each}
</div>
{#if $catalog.length > 0}
<div class="container">
{#each $catalog as { manga }}
<CatalogItem {manga} />
{/each}
</div>
{:else}
<div class="empty-state">
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
{/if}
{:else}
<div class="empty-state">
<p>Your catalog is currently empty.</p>
<a href="upload">Add manga</a>
</div>
<p>Loading...</p>
{/if}
<style lang="scss">

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

@@ -36,7 +36,7 @@
}
button {
width: 500px;
width: 100%;
height: 100px;
border-radius: 12px;
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">
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 { page } from '$app/stores';
import { currentManga, currentVolume } from '$lib/catalog';
import SettingsIcon from '$lib/assets/svgs/settings-svgrepo-com.svg';
let promise: Promise<void>;
let modal = false;
let isReader = false;
import { writable } from 'svelte/store';
let title: string | undefined = 'Mokuro';
let back: string | undefined = undefined;
async function onUpload(files: FileList) {
promise = processFiles(files).then(() => {
modal = false;
});
}
afterNavigate(() => {
window.document.body.classList.remove('reader');
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;
}
isReader = $page.route.id === '/[manga]/[volume]';
});
</script>
<nav>
<div>
{#if back}
<a href={back}><h2>Back</h2></a>
<h2>{title}</h2>
{:else}
<a href="/"><h2>{title}</h2></a>
{/if}
<img src={SettingsIcon} alt="settings" />
</div>
</nav>
<div class="relative z-10">
<Navbar hidden={isReader}>
<NavBrand href="/">
<span class="text-xl font-semibold dark:text-white">Mokuro</span>
</NavBrand>
<div class="flex md:order-2 gap-5">
<UserSettingsSolid class="hover:text-cyan-300" />
<UploadSolid class="hover:text-cyan-300" on:click={() => (modal = true)} />
</div>
</Navbar>
</div>
<style lang="scss">
img {
width: 32px;
fill: #000;
}
nav {
position: relative;
width: 100%;
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>
<Modal title="Upload" bind:open={modal} outsideclose>
{#await promise}
<h2 class="justify-center flex">Loading...</h2>
{:then}
<FileUpload {onUpload} webkitdirectory>Upload directory</FileUpload>
<FileUpload {onUpload} accept=".mokuro,.zip,.cbz" multiple>Upload files</FileUpload>
{/await}
</Modal>

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

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

1
src/routes/+layout.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import '../app.postcss';
import NavBar from '$lib/components/NavBar.svelte';
import Snackbar from '$lib/components/Snackbar.svelte';
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 preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess({
scss: {
prependData: `@use './src/variables' as *;`
}
}),
preprocess: [
preprocess({
scss: {
prependData: `@use './src/variables' as *;`
}
}),
vitePreprocess({})
],
kit: {
// 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;