Setup flowbite
This commit is contained in:
ZXY101
1321
package-lock.json
generated
1321
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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
13
postcss.config.cjs
Normal 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;
|
||||
@@ -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
4
src/app.postcss
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Write your global styles here, in PostCSS syntax */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -4,6 +4,7 @@
|
||||
</script>
|
||||
|
||||
{#if $catalog && $catalog.length > 0}
|
||||
{#if $catalog.length > 0}
|
||||
<div class="container">
|
||||
{#each $catalog as { manga }}
|
||||
<CatalogItem {manga} />
|
||||
@@ -15,6 +16,9 @@
|
||||
<a href="upload">Add manga</a>
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
width: 500px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
border: 2px dashed $secondary-color;
|
||||
|
||||
@@ -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 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>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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,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';
|
||||
|
||||
@@ -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({
|
||||
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
30
tailwind.config.cjs
Normal 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;
|
||||
Reference in New Issue
Block a user