dave/calorie-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Fractal-Tess
2022-08-24 09:57:23 +03:00
parent 40bde372e2
commit 5847abebfb
14 changed files with 1281 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierignore Normal file
View File

@@ -0,0 +1,5 @@
target
dist
*.min.js
*.min.css

3
package.json
View File

@@ -7,6 +7,7 @@
"start": "tauri dev", "start": "tauri dev",
"dev": "tauri dev", "dev": "tauri dev",
"build": "tauri build", "build": "tauri build",
"format": "prettier --write --plugin-search-dir=. .",
"svelte:dev": "vite dev", "svelte:dev": "vite dev",
"svelte:build": "vite build", "svelte:build": "vite build",
"svelte:preview": "vite preview", "svelte:preview": "vite preview",
@@ -26,6 +27,8 @@
"daisyui": "^2.20.0", "daisyui": "^2.20.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.53.0", "sass": "^1.53.0",
"svelte": "^3.49.0", "svelte": "^3.49.0",
"svelte-add": "^2022.7.2-2.0", "svelte-add": "^2022.7.2-2.0",

1472
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
postcss.config.cjs
View File

@@ -6,8 +6,8 @@ const config = {
//Some plugins, like tailwindcss/nesting, need to run before Tailwind, //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
tailwindcss(), tailwindcss(),
//But others, like autoprefixer, need to run after, //But others, like autoprefixer, need to run after,
autoprefixer, autoprefixer
], ]
}; };
module.exports = config; module.exports = config;

8
prettier.config.cjs Normal file
View File

@@ -0,0 +1,8 @@
module.exports = {
singleQuote: true,
trailingComma: 'none',
tabWidth: 2,
printWidth: 80,
arrowParens: 'avoid',
plugins: [require('prettier-plugin-svelte')]
};

34
src/lib/example/call-tauri/CallTauri.svelte
View File

@@ -1,26 +1,28 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api'; import { invoke } from '@tauri-apps/api';
let message = ''; let message = '';
async function callTauri() { async function callTauri() {
message = await invoke('called_from_js'); message = await invoke('called_from_js');
} }
</script> </script>
<button on:click={callTauri} class=" font-extrabold btn btn-outline btn-secondary btn-md" <button
>Call Tauri</button on:click={callTauri}
class=" font-extrabold btn btn-outline btn-secondary btn-md"
>Call Tauri</button
> >
<div class="relative"> <div class="relative">
{#key message} {#key message}
<p <p
class="absolute outline-secondary border-b-2 border-secondary text-2xl class="absolute outline-secondary border-b-2 border-secondary text-2xl
whitespace-nowrap whitespace-nowrap
-translate-x-1/2 -translate-y-1/2" -translate-x-1/2 -translate-y-1/2"
in:fade={{ duration: 300 }} in:fade={{ duration: 300 }}
> >
{message} {message}
</p> </p>
{/key} {/key}
</div> </div>

18
src/lib/example/footer/Footer.svelte
View File

@@ -1,13 +1,15 @@
<!-- Make she the bottom rounded value of fixed elements is the same as html/body in the app.scss file --> <!-- Make she the bottom rounded value of fixed elements is the same as html/body in the app.scss file -->
<div <div
class="fixed bottom-0 w-full rounded-b-3xl h-12 items-center flex justify-around bg-base-100 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]" class="fixed bottom-0 w-full rounded-b-3xl h-12 items-center flex justify-around bg-base-100 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]"
> >
<a target="_blank" href="https://github.com/Fractal-Tess"> <a target="_blank" href="https://github.com/Fractal-Tess">
Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md">Fractal-Tess</span> Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md"
</a> >Fractal-Tess</span
>
</a>
<a <a
href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template" href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
class="border-b-2 border-secondary">GitHub</a class="border-b-2 border-secondary">GitHub</a
> >
</div> </div>

53
src/lib/example/header/Header.svelte
View File

@@ -1,28 +1,35 @@
<script lang="ts"> <script lang="ts">
import ThemeToggleIcon from '$lib/example/header/ThemeToggleIcon.svelte'; import ThemeToggleIcon from '$lib/example/header/ThemeToggleIcon.svelte';
import { theme } from '$lib/stores/theme'; import { theme } from '$lib/stores/theme';
import { appWindow } from '@tauri-apps/api/window'; import { appWindow } from '@tauri-apps/api/window';
</script> </script>
<div data-tauri-drag-region class="h-12 bg-base-100 shadow-lg items-center justify-between flex"> <div
<button on:click={theme.toggleTheme} class="hover:text-secondary ml-2" aria-live="polite"> data-tauri-drag-region
<ThemeToggleIcon cssClass={'w-8'} /> class="h-12 bg-base-100 shadow-lg items-center justify-between flex"
</button> >
<button
on:click={theme.toggleTheme}
class="hover:text-secondary ml-2"
aria-live="polite"
>
<ThemeToggleIcon cssClass={'w-8'} />
</button>
<div> <div>
<button <button
on:click={appWindow.minimize} on:click={appWindow.minimize}
aria-live="polite" aria-live="polite"
class="p-2 text-xl hover:text-secondary h-full" class="p-2 text-xl hover:text-secondary h-full"
> >
<i class="fa-solid fa-window-minimize w-6" /> <i class="fa-solid fa-window-minimize w-6" />
</button> </button>
<button <button
on:click={appWindow.close} on:click={appWindow.close}
aria-live="polite" aria-live="polite"
class="p-2 text-2xl hover:text-secondary h-full" class="p-2 text-2xl hover:text-secondary h-full"
> >
<i class="fa-solid fa-xmark w-6" /> <i class="fa-solid fa-xmark w-6" />
</button> </button>
</div> </div>
</div> </div>

154
src/lib/example/header/ThemeToggleIcon.svelte
View File

@@ -1,96 +1,96 @@
<script lang="ts"> <script lang="ts">
export let cssClass = 'w-8'; export let cssClass = 'w-8';
</script> </script>
<svg class={cssClass} aria-hidden="true" viewBox="0 0 24 24"> <svg class={cssClass} aria-hidden="true" viewBox="0 0 24 24">
<mask class="moon" id="moon-mask"> <mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" /> <rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="24" cy="10" r="6" fill="black" /> <circle cx="24" cy="10" r="6" fill="black" />
</mask> </mask>
<circle <circle
class="sun" class="sun"
cx="12" cx="12"
cy="12" cy="12"
r="6" r="6"
mask="url(#moon-mask)" mask="url(#moon-mask)"
fill="currentColor" fill="currentColor"
/> />
<g class="sun-beams" stroke="currentColor" stroke-width="2px"> <g class="sun-beams" stroke="currentColor" stroke-width="2px">
<line x1="12" y1="1" x2="12" y2="3" /> <line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" /> <line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" /> <line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" /> <line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g> </g>
</svg> </svg>
<style> <style>
svg .moon, svg .moon,
svg .sun, svg .sun,
svg .sun-beams { svg .sun-beams {
transform-origin: center center; transform-origin: center center;
} }
:global(.light) svg .sun { :global(.light) svg .sun {
transform: scale(1.75); transform: scale(1.75);
} }
:global(.light) svg .sun-beams { :global(.light) svg .sun-beams {
opacity: 0; opacity: 0;
} }
:global(.light) svg .moon > circle { :global(.light) svg .moon > circle {
transform: translateX(-7px); transform: translateX(-7px);
} }
@supports (cx: 1) { @supports (cx: 1) {
:global(.light) svg .moon > circle { :global(.light) svg .moon > circle {
transform: translateX(0); transform: translateX(0);
cx: 17; cx: 17;
} }
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
svg .sun { svg .sun {
transition: transform var(--transition-duration-long) transition: transform var(--transition-duration-long)
var(--ease-elastic-3); var(--ease-elastic-3);
} }
svg .sun-beams { svg .sun-beams {
transition: transform var(--transition-duration-long) transition: transform var(--transition-duration-long)
var(--ease-elastic-4), var(--ease-elastic-4),
opacity var(--transition-duration-long) var(--ease-3); opacity var(--transition-duration-long) var(--ease-3);
} }
svg .moon > circle { svg .moon > circle {
transition: transform calc(var(--transition-duration-long) / 2) transition: transform calc(var(--transition-duration-long) / 2)
var(--ease-out-5); var(--ease-out-5);
} }
@supports (cx: 1) { @supports (cx: 1) {
svg .moon > circle { svg .moon > circle {
transition: cx calc(var(--transition-duration-long) / 2) transition: cx calc(var(--transition-duration-long) / 2)
var(--ease-out-5); var(--ease-out-5);
} }
} }
:global(.light) svg .sun { :global(.light) svg .sun {
transform: scale(1.75); transform: scale(1.75);
transition-timing-function: var(--ease-3); transition-timing-function: var(--ease-3);
transition-duration: calc(var(--transition-duration-long) / 2); transition-duration: calc(var(--transition-duration-long) / 2);
} }
:global(.light) svg .sun-beams { :global(.light) svg .sun-beams {
transform: rotateZ(-25deg); transform: rotateZ(-25deg);
transition-duration: calc(var(--transition-duration-long) / 3); transition-duration: calc(var(--transition-duration-long) / 3);
} }
:global(.light) svg .moon > circle { :global(.light) svg .moon > circle {
transition-delay: calc(var(--transition-duration-long) / 2); transition-delay: calc(var(--transition-duration-long) / 2);
transition-duration: var(--transition-duration-long); transition-duration: var(--transition-duration-long);
} }
} }
</style> </style>

38
src/lib/stores/theme.ts
View File

@@ -5,25 +5,25 @@ import { writable } from 'svelte/store';
const store = new Store('.settings.dat'); const store = new Store('.settings.dat');
const createThemeStore = () => { const createThemeStore = () => {
const { subscribe, update, set } = writable(''); const { subscribe, update, set } = writable('');
return { return {
subscribe, subscribe,
toggleTheme: () => { toggleTheme: () => {
update(currentTheme => { update(currentTheme => {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
store.set('theme', newTheme); store.set('theme', newTheme);
return newTheme; return newTheme;
}); });
}, },
load: async () => { load: async () => {
let storedTheme = (await store.get('theme')) as Theme | null; let storedTheme = (await store.get('theme')) as Theme | null;
if (!storedTheme) { if (!storedTheme) {
storedTheme = 'dark'; storedTheme = 'dark';
store.set('theme', storedTheme); store.set('theme', storedTheme);
} }
set(storedTheme); set(storedTheme);
} }
}; };
}; };
export const theme = createThemeStore(); export const theme = createThemeStore();

2
src/main.ts
View File

@@ -3,7 +3,7 @@ import '@fortawesome/fontawesome-free/js/all.js';
import App from './App.svelte'; import App from './App.svelte';
const app = new App({ const app = new App({
target: document.getElementById('app'), target: document.getElementById('app')
}); });
export default app; export default app;

8
svelte.config.js
View File

@@ -7,9 +7,9 @@ export default {
sveltePreprocess({ sveltePreprocess({
postcss: true, postcss: true,
scss: { scss: {
prependData: '@use "src/variables.scss" as *;', prependData: '@use "src/variables.scss" as *;'
}, },
sourceMap: !!process.env.TAURI_DEBUG, sourceMap: !!process.env.TAURI_DEBUG
}), })
], ]
}; };

18
tailwind.config.cjs
View File

@@ -10,9 +10,9 @@ const config = {
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['roboto', ...defaultTheme.fontFamily.sans], sans: ['roboto', ...defaultTheme.fontFamily.sans]
}, }
}, }
}, },
daisyui: { daisyui: {
@@ -28,7 +28,7 @@ const config = {
info: '#93BADC', info: '#93BADC',
success: '#12A168', success: '#12A168',
warning: '#F4C857', warning: '#F4C857',
error: '#DE3B4E', error: '#DE3B4E'
}, },
dark: { dark: {
...require('daisyui/src/colors/themes')['[data-theme=dark]'], ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
@@ -40,12 +40,12 @@ const config = {
info: '#35B0F3', info: '#35B0F3',
success: '#1B743C', success: '#1B743C',
warning: '#F38A12', warning: '#F38A12',
error: '#F2215C', error: '#F2215C'
}, }
}, }
], ]
}, },
plugins: [forms, typography, daisyui], plugins: [forms, typography, daisyui]
}; };
module.exports = config; module.exports = config;

16
vite.config.ts
View File

@@ -8,17 +8,17 @@ export default defineConfig({
css: { css: {
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
additionalData: '@use "src/styles/variables.scss" as *;', additionalData: '@use "src/styles/variables.scss" as *;'
}, }
}, }
}, },
resolve: { resolve: {
alias: { alias: {
$styles: resolve('src/styles/app.scss'), $styles: resolve('src/styles/app.scss'),
$lib: resolve('src/lib'), $lib: resolve('src/lib'),
$src: resolve('src/'), $src: resolve('src/')
}, }
}, },
publicDir: false, publicDir: false,
@@ -27,7 +27,7 @@ export default defineConfig({
server: { server: {
strictPort: true, strictPort: true,
port: 3000, port: 3000
}, },
envPrefix: ['VITE_', 'TAURI_'], envPrefix: ['VITE_', 'TAURI_'],
@@ -35,6 +35,6 @@ export default defineConfig({
build: { build: {
target: ['es2021', 'chrome100', 'safari13'], target: ['es2021', 'chrome100', 'safari13'],
minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
sourcemap: !!process.env.TAURI_DEBUG, sourcemap: !!process.env.TAURI_DEBUG
}, }
}); });