xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
Revert "wip svelte managed theme, qr dark still bad"
This reverts commit 8fe0d7f19090a6d01780e04cd1cb8c7536f0ea69.
author
Morgan
date
(Nov 10, 2024, 1:54 AM +0100)
commit
233d166e
233d166e0a0ece485ab9e4fa7474784199338690
parent
8fe0d7f1
8fe0d7f19090a6d01780e04cd1cb8c7536f0ea69
+18
-163
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
-1
package.json
-1
package.json
+12
-45
src/components/Qr.svelte
+12
-45
src/components/Qr.svelte
···
1
1
<script>
2
2
import { onMount } from 'svelte';
3
3
import QRCode from 'qrcode';
4
-
import * as Tooltip from '$lib/components/ui/tooltip';
5
4
6
5
/** @type {string} */
7
6
export let url;
8
7
/** @type {number} */
9
8
export let size = 128;
10
-
/** @type {string} */
11
-
export let color = '#ff0000'; // Bright red
12
9
13
-
let qrSvg = '';
14
-
let debugInfo = '';
10
+
let canvas;
15
11
16
12
async function generateQR() {
17
-
debugInfo = `URL: ${url}\nColor: ${color}`;
13
+
if (!canvas) return;
14
+
18
15
try {
19
16
const fullUrl = url.startsWith('http') ? url : `https://${url}`;
20
-
21
-
qrSvg = await QRCode.toString(fullUrl, {
22
-
type: 'svg',
17
+
await QRCode.toCanvas(canvas, fullUrl, {
23
18
width: size,
24
19
margin: 1,
25
20
color: {
26
-
dark: color,
27
-
light: '#ffffff00'
28
-
},
29
-
rendererOpts: {
30
-
pathFillType: 'fill'
21
+
dark: getComputedStyle(document.documentElement)
22
+
.getPropertyValue('--primary')
23
+
.trim() || '#000000',
24
+
light: '#ffffff00' // transparent background
31
25
}
32
26
});
33
-
console.debug('Generated QR SVG:', qrSvg);
34
-
debugInfo += '\nSVG Generated: Yes';
35
27
} catch (err) {
36
-
debugInfo += '\nError: ' + err.message;
28
+
console.error('Error generating QR code:', err);
37
29
}
38
30
}
39
31
40
-
$: if (url && color) {
32
+
$: if (url && canvas) {
41
33
generateQR();
42
34
}
43
35
···
48
40
});
49
41
</script>
50
42
51
-
<Tooltip.Root>
52
-
<Tooltip.Trigger>
53
-
<div class="qr-container">
54
-
{#if qrSvg}
55
-
{@html qrSvg}
56
-
{:else}
57
-
<p>No QR code generated yet</p>
58
-
{/if}
59
-
</div>
60
-
</Tooltip.Trigger>
61
-
<Tooltip.Content>
62
-
<pre class="debug-info">{debugInfo}</pre>
63
-
</Tooltip.Content>
64
-
</Tooltip.Root>
43
+
<canvas bind:this={canvas} width={size} height={size} />
65
44
66
45
<style>
67
-
.qr-container {
68
-
position: relative;
46
+
canvas {
69
47
max-width: 100%;
70
48
height: auto;
71
-
min-height: 128px;
72
-
}
73
-
.qr-container :global(svg) {
74
-
width: 100%;
75
-
height: auto;
76
-
}
77
-
.debug-info {
78
-
font-family: monospace;
79
-
font-size: 12px;
80
-
white-space: pre;
81
-
margin: 0;
82
49
}
83
50
</style>
-13
src/lib/components/ui/tooltip/index.js
-13
src/lib/components/ui/tooltip/index.js
···
1
-
import { Tooltip as TooltipPrimitive } from "bits-ui";
2
-
import Content from "./tooltip-content.svelte";
3
-
const Root = TooltipPrimitive.Root;
4
-
const Trigger = TooltipPrimitive.Trigger;
5
-
export {
6
-
Root,
7
-
Trigger,
8
-
Content,
9
-
//
10
-
Root as Tooltip,
11
-
Content as TooltipContent,
12
-
Trigger as TooltipTrigger,
13
-
};
-25
src/lib/components/ui/tooltip/tooltip-content.svelte
-25
src/lib/components/ui/tooltip/tooltip-content.svelte
···
1
-
<script>
2
-
import { Tooltip as TooltipPrimitive } from "bits-ui";
3
-
import { cn, flyAndScale } from "$lib/utils.js.js";
4
-
let className = undefined;
5
-
export let sideOffset = 4;
6
-
export let transition = flyAndScale;
7
-
export let transitionConfig = {
8
-
y: 8,
9
-
duration: 150,
10
-
};
11
-
export { className as class };
12
-
</script>
13
-
14
-
<TooltipPrimitive.Content
15
-
{transition}
16
-
{transitionConfig}
17
-
{sideOffset}
18
-
class={cn(
19
-
"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
20
-
className
21
-
)}
22
-
{...$$restProps}
23
-
>
24
-
<slot />
25
-
</TooltipPrimitive.Content>
-45
src/lib/stores/theme.js
-45
src/lib/stores/theme.js
···
1
-
import { writable } from 'svelte/store';
2
-
3
-
const defaultColors = {
4
-
primary: '#000000',
5
-
default: 'rgba(0, 0, 0, 0.8)',
6
-
highlight: 'rgb(30, 131, 255)',
7
-
bg: '#ffffff'
8
-
};
9
-
10
-
const darkColors = {
11
-
primary: 'white',
12
-
default: 'rgb(30, 255, 139)',
13
-
highlight: 'white',
14
-
bg: '#000000'
15
-
};
16
-
17
-
const createThemeStore = () => {
18
-
const { subscribe, set, update } = writable({
19
-
isDark: false, // Default to light theme for SSR
20
-
colors: defaultColors
21
-
});
22
-
23
-
if (typeof window !== 'undefined') {
24
-
// Only run this client-side
25
-
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
26
-
set({ isDark, colors: isDark ? darkColors : defaultColors });
27
-
}
28
-
29
-
return {
30
-
subscribe,
31
-
toggleTheme: () => update(theme => {
32
-
const isDark = !theme.isDark;
33
-
return {
34
-
isDark,
35
-
colors: isDark ? darkColors : defaultColors
36
-
};
37
-
}),
38
-
setDarkMode: (isDark) => update(theme => ({
39
-
isDark,
40
-
colors: isDark ? darkColors : defaultColors
41
-
}))
42
-
};
43
-
};
44
-
45
-
export const theme = createThemeStore();
+1
-25
src/routes/+layout.svelte
+1
-25
src/routes/+layout.svelte
···
2
2
import "../app.pcss";
3
3
import "../app.postcss";
4
4
import 'iconify-icon';
5
-
import { theme } from '$lib/stores/theme';
6
-
import { onMount } from 'svelte';
7
5
8
-
onMount(() => {
9
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
10
-
const handleChange = (e) => theme.setDarkMode(e.matches);
11
-
mediaQuery.addEventListener('change', handleChange);
12
-
13
-
return () => mediaQuery.removeEventListener('change', handleChange);
14
-
});
15
6
</script>
16
-
17
-
{#if $theme}
18
-
<div style:--primary={$theme.colors.primary}
19
-
style:--default={$theme.colors.default}
20
-
style:--highlight={$theme.colors.highlight}
21
-
style:--bg={$theme.colors.bg}>
22
-
<slot />
23
-
</div>
24
-
{/if}
25
-
26
-
<style>
27
-
div {
28
-
min-height: 100vh;
29
-
background-color: var(--bg);
30
-
}
31
-
</style>
7
+
<slot></slot>
+5
-3
src/routes/+page.svelte
+5
-3
src/routes/+page.svelte
···
1
1
<script>
2
2
import { onMount } from 'svelte';
3
3
import { fade } from 'svelte/transition';
4
-
import { theme } from '$lib/stores/theme';
5
4
6
5
import Projects from '$components/Projects.svelte';
7
6
···
135
134
</div>
136
135
{/if}
137
136
138
-
139
-
140
137
<style>
141
138
:root {
139
+
--primary: #000000;
140
+
--default: rgba(0, 0, 0, 0.8);
141
+
--highlight: rgb(30, 131, 255);
142
+
--bg: #ffffff;
143
+
background-color: var(--bg);
142
144
overflow: hidden;
143
145
}
144
146
-6
src/routes/ahoy/+page.svelte
-6
src/routes/ahoy/+page.svelte
···
1
-
<script>
2
-
/** @type {import('./$types').PageData} */
3
-
let { data } = $props();
4
-
</script>
5
-
6
-
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 31 31" shape-rendering="crispEdges"><path stroke="#F00" stroke-opacity="1.00" d="M1 1.5h7m3 0h1m4 0h6m1 0h7M1 2.5h1m5 0h1m3 0h1m1 0h1m4 0h1m2 0h1m1 0h1m5 0h1M1 3.5h1m1 0h3m1 0h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h1M1 4.5h1m1 0h3m1 0h1m1 0h1m1 0h3m3 0h4m2 0h1m1 0h3m1 0h1M1 5.5h1m1 0h3m1 0h1m1 0h4m1 0h3m1 0h4m1 0h1m1 0h3m1 0h1M1 6.5h1m5 0h1m1 0h1m1 0h1m2 0h5m2 0h1m1 0h1m5 0h1M1 7.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M9 8.5h6m1 0h1m3 0h2M1 9.5h1m1 0h5m4 0h2m1 0h2m1 0h1m1 0h1m2 0h5M1 10.5h3m5 0h1m1 0h1m1 0h1m2 0h5m1 0h4m3 0h1M6 11.5h2m4 0h1m8 0h1m2 0h1M1 12.5h1m2 0h1m1 0h1m2 0h5m1 0h1m1 0h1m3 0h1m4 0h1m1 0h1M1 13.5h2m2 0h1m1 0h5m5 0h2m1 0h1m5 0h2M1 14.5h3m1 0h1m2 0h2m2 0h5m3 0h6m3 0h1M2 15.5h1m1 0h1m2 0h2m3 0h1m1 0h6m1 0h1m4 0h2M2 16.5h1m2 0h1m4 0h1m3 0h1m1 0h1m2 0h4m1 0h1m3 0h1M2 17.5h1m1 0h1m2 0h1m1 0h5m1 0h2m1 0h1m1 0h1m5 0h2M1 18.5h1m3 0h1m2 0h4m4 0h2m1 0h7m1 0h1m1 0h1M1 19.5h1m2 0h1m1 0h3m3 0h2m4 0h1m2 0h5m1 0h1M1 20.5h1m2 0h1m3 0h2m1 0h1m1 0h1m1 0h1m1 0h1m2 0h1m7 0h1M1 21.5h1m1 0h2m1 0h7m4 0h2m2 0h5m1 0h3M9 22.5h1m1 0h1m1 0h4m1 0h2m1 0h1m3 0h5M1 23.5h7m6 0h5m1 0h2m1 0h1m1 0h3M1 24.5h1m5 0h1m1 0h2m2 0h2m1 0h1m2 0h3m3 0h1M1 25.5h1m1 0h3m1 0h1m1 0h1m1 0h2m2 0h2m1 0h1m2 0h5m1 0h1m1 0h1M1 26.5h1m1 0h3m1 0h1m1 0h4m3 0h2m3 0h1m4 0h2M1 27.5h1m1 0h3m1 0h1m1 0h5m4 0h1m1 0h9M1 28.5h1m5 0h1m4 0h1m4 0h1m3 0h1m1 0h1m1 0h2m1 0h1M1 29.5h7m1 0h1m1 0h2m2 0h1m3 0h1m2 0h3m2 0h1"/></svg>