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",
"dev": "tauri dev",
"build": "tauri build",
"format": "prettier --write --plugin-search-dir=. .",
"svelte:dev": "vite dev",
"svelte:build": "vite build",
"svelte:preview": "vite preview",
@@ -26,6 +27,8 @@
"daisyui": "^2.20.0",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.53.0",
"svelte": "^3.49.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,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer,
],
autoprefixer
]
};
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">
import { fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api';
import { fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api';
let message = '';
let message = '';
async function callTauri() {
message = await invoke('called_from_js');
}
async function callTauri() {
message = await invoke('called_from_js');
}
</script>
<button on:click={callTauri} class=" font-extrabold btn btn-outline btn-secondary btn-md"
>Call Tauri</button
<button
on:click={callTauri}
class=" font-extrabold btn btn-outline btn-secondary btn-md"
>Call Tauri</button
>
<div class="relative">
{#key message}
<p
class="absolute outline-secondary border-b-2 border-secondary text-2xl
{#key message}
<p
class="absolute outline-secondary border-b-2 border-secondary text-2xl
whitespace-nowrap
-translate-x-1/2 -translate-y-1/2"
in:fade={{ duration: 300 }}
>
{message}
</p>
{/key}
in:fade={{ duration: 300 }}
>
{message}
</p>
{/key}
</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 -->
<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">
Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md">Fractal-Tess</span>
</a>
<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
>
</a>
<a
href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
class="border-b-2 border-secondary">GitHub</a
>
<a
href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
class="border-b-2 border-secondary">GitHub</a
>
</div>

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

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

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

@@ -1,96 +1,96 @@
<script lang="ts">
export let cssClass = 'w-8';
export let cssClass = 'w-8';
</script>
<svg class={cssClass} aria-hidden="true" viewBox="0 0 24 24">
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="24" cy="10" r="6" fill="black" />
</mask>
<circle
class="sun"
cx="12"
cy="12"
r="6"
mask="url(#moon-mask)"
fill="currentColor"
/>
<g class="sun-beams" stroke="currentColor" stroke-width="2px">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<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="1" y1="12" x2="3" 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="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<circle cx="24" cy="10" r="6" fill="black" />
</mask>
<circle
class="sun"
cx="12"
cy="12"
r="6"
mask="url(#moon-mask)"
fill="currentColor"
/>
<g class="sun-beams" stroke="currentColor" stroke-width="2px">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<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="1" y1="12" x2="3" 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="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
</svg>
<style>
svg .moon,
svg .sun,
svg .sun-beams {
transform-origin: center center;
}
svg .moon,
svg .sun,
svg .sun-beams {
transform-origin: center center;
}
:global(.light) svg .sun {
transform: scale(1.75);
}
:global(.light) svg .sun {
transform: scale(1.75);
}
:global(.light) svg .sun-beams {
opacity: 0;
}
:global(.light) svg .sun-beams {
opacity: 0;
}
:global(.light) svg .moon > circle {
transform: translateX(-7px);
}
:global(.light) svg .moon > circle {
transform: translateX(-7px);
}
@supports (cx: 1) {
:global(.light) svg .moon > circle {
transform: translateX(0);
cx: 17;
}
}
@supports (cx: 1) {
:global(.light) svg .moon > circle {
transform: translateX(0);
cx: 17;
}
}
@media (prefers-reduced-motion: no-preference) {
svg .sun {
transition: transform var(--transition-duration-long)
var(--ease-elastic-3);
}
@media (prefers-reduced-motion: no-preference) {
svg .sun {
transition: transform var(--transition-duration-long)
var(--ease-elastic-3);
}
svg .sun-beams {
transition: transform var(--transition-duration-long)
var(--ease-elastic-4),
opacity var(--transition-duration-long) var(--ease-3);
}
svg .sun-beams {
transition: transform var(--transition-duration-long)
var(--ease-elastic-4),
opacity var(--transition-duration-long) var(--ease-3);
}
svg .moon > circle {
transition: transform calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
}
svg .moon > circle {
transition: transform calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
}
@supports (cx: 1) {
svg .moon > circle {
transition: cx calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
}
}
@supports (cx: 1) {
svg .moon > circle {
transition: cx calc(var(--transition-duration-long) / 2)
var(--ease-out-5);
}
}
:global(.light) svg .sun {
transform: scale(1.75);
transition-timing-function: var(--ease-3);
transition-duration: calc(var(--transition-duration-long) / 2);
}
:global(.light) svg .sun {
transform: scale(1.75);
transition-timing-function: var(--ease-3);
transition-duration: calc(var(--transition-duration-long) / 2);
}
:global(.light) svg .sun-beams {
transform: rotateZ(-25deg);
transition-duration: calc(var(--transition-duration-long) / 3);
}
:global(.light) svg .sun-beams {
transform: rotateZ(-25deg);
transition-duration: calc(var(--transition-duration-long) / 3);
}
:global(.light) svg .moon > circle {
transition-delay: calc(var(--transition-duration-long) / 2);
transition-duration: var(--transition-duration-long);
}
}
:global(.light) svg .moon > circle {
transition-delay: calc(var(--transition-duration-long) / 2);
transition-duration: var(--transition-duration-long);
}
}
</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 createThemeStore = () => {
const { subscribe, update, set } = writable('');
const { subscribe, update, set } = writable('');
return {
subscribe,
toggleTheme: () => {
update(currentTheme => {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
store.set('theme', newTheme);
return newTheme;
});
},
load: async () => {
let storedTheme = (await store.get('theme')) as Theme | null;
if (!storedTheme) {
storedTheme = 'dark';
store.set('theme', storedTheme);
}
set(storedTheme);
}
};
return {
subscribe,
toggleTheme: () => {
update(currentTheme => {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
store.set('theme', newTheme);
return newTheme;
});
},
load: async () => {
let storedTheme = (await store.get('theme')) as Theme | null;
if (!storedTheme) {
storedTheme = 'dark';
store.set('theme', storedTheme);
}
set(storedTheme);
}
};
};
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';
const app = new App({
target: document.getElementById('app'),
target: document.getElementById('app')
});
export default app;

8
svelte.config.js
View File

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

16
vite.config.ts
View File

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