xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/textme.
textme.cc
shadcn + bun update
author
Morgan
date
(Sep 18, 2024, 7:07 PM +0200)
commit
c9d2c137
c9d2c13792fd4275c448f332d328c73094362539
parent
2528f0b1
2528f0b1d9db8bacb7600d6fea81f1440f8ef7a8
+366
-58
+22
-3
.prettierrc
+22
-3
.prettierrc
···
3
3
"singleQuote": true,
4
4
"trailingComma": "none",
5
5
"printWidth": 100,
6
-
"plugins": ["prettier-plugin-svelte"],
7
-
"pluginSearchDirs": ["."],
8
-
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
6
+
"plugins": [
7
+
8
+
"prettier-plugin-svelte",
9
+
10
+
"prettier-plugin-tailwindcss"
11
+
12
+
],
13
+
"pluginSearchDirs": [
14
+
15
+
"."
16
+
17
+
],
18
+
"overrides": [
19
+
20
+
{
21
+
"files": "*.svelte",
22
+
"options": {
23
+
"parser": "svelte"
24
+
}
25
+
}
26
+
27
+
]
9
28
}
bun.lockb
bun.lockb
This is a binary file and will not be displayed.
+14
components.json
+14
components.json
···
1
+
{
2
+
"$schema": "https://shadcn-svelte.com/schema.json",
3
+
"style": "default",
4
+
"tailwind": {
5
+
"config": "tailwind.config.js",
6
+
"css": "src/app.css",
7
+
"baseColor": "neutral"
8
+
},
9
+
"aliases": {
10
+
"components": "$lib/components",
11
+
"utils": "$lib/utils"
12
+
},
13
+
"typescript": false
14
+
}
+22
-14
package.json
+22
-14
package.json
···
12
12
"format": "prettier --plugin-search-dir . --write ."
13
13
},
14
14
"devDependencies": {
15
-
"@sveltejs/adapter-auto": "^2.0.0",
16
-
"@sveltejs/kit": "^1.5.0",
17
-
"eslint": "^8.28.0",
18
-
"eslint-config-prettier": "^8.5.0",
15
+
"@sveltejs/adapter-auto": "^2.1.1",
16
+
"@sveltejs/kit": "^1.30.4",
17
+
"autoprefixer": "^10.4.20",
18
+
"eslint": "^8.57.1",
19
+
"eslint-config-prettier": "^8.10.0",
19
20
"eslint-plugin-svelte3": "^4.0.0",
20
-
"prettier": "^2.8.0",
21
-
"prettier-plugin-svelte": "^2.8.1",
22
-
"svelte": "^3.54.0",
23
-
"svelte-check": "^3.0.1",
24
-
"typescript": "^4.9.3",
25
-
"vite": "^4.0.0",
26
21
"mdsvex": "^0.10.6",
27
-
"postcss": "^8.4.14",
28
-
"postcss-load-config": "^4.0.1",
22
+
"postcss": "^8.4.47",
23
+
"postcss-load-config": "^4.0.2",
24
+
"prettier": "^2.8.8",
25
+
"prettier-plugin-svelte": "^2.10.1",
26
+
"prettier-plugin-tailwindcss": "^0.6.6",
27
+
"svelte": "^3.59.2",
28
+
"svelte-check": "^3.8.6",
29
29
"svelte-preprocess": "^4.10.7",
30
-
"autoprefixer": "^10.4.7"
30
+
"tailwindcss": "^3.4.12",
31
+
"typescript": "^4.9.5",
32
+
"vite": "^4.5.5"
31
33
},
32
-
"type": "module"
34
+
"type": "module",
35
+
"dependencies": {
36
+
"clsx": "^2.1.1",
37
+
"lucide-svelte": "^0.441.0",
38
+
"tailwind-merge": "^2.5.2",
39
+
"tailwind-variants": "^0.2.1"
40
+
}
33
41
}
+6
postcss.config.js
+6
postcss.config.js
+78
src/app.css
+78
src/app.css
···
1
+
@tailwind base;
2
+
@tailwind components;
3
+
@tailwind utilities;
4
+
5
+
@layer base {
6
+
:root {
7
+
--background: 0 0% 100%;
8
+
--foreground: 0 0% 3.9%;
9
+
10
+
--muted: 0 0% 96.1%;
11
+
--muted-foreground: 0 0% 45.1%;
12
+
13
+
--popover: 0 0% 100%;
14
+
--popover-foreground: 0 0% 3.9%;
15
+
16
+
--card: 0 0% 100%;
17
+
--card-foreground: 0 0% 3.9%;
18
+
19
+
--border: 0 0% 89.8%;
20
+
--input: 0 0% 89.8%;
21
+
22
+
--primary: 0 0% 9%;
23
+
--primary-foreground: 0 0% 98%;
24
+
25
+
--secondary: 0 0% 96.1%;
26
+
--secondary-foreground: 0 0% 9%;
27
+
28
+
--accent: 0 0% 96.1%;
29
+
--accent-foreground: 0 0% 9%;
30
+
31
+
--destructive: 0 72.2% 50.6%;
32
+
--destructive-foreground: 0 0% 98%;
33
+
34
+
--ring: 0 0% 3.9%;
35
+
36
+
--radius: 0.5rem;
37
+
}
38
+
39
+
.dark {
40
+
--background: 0 0% 3.9%;
41
+
--foreground: 0 0% 98%;
42
+
43
+
--muted: 0 0% 14.9%;
44
+
--muted-foreground: 0 0% 63.9%;
45
+
46
+
--popover: 0 0% 3.9%;
47
+
--popover-foreground: 0 0% 98%;
48
+
49
+
--card: 0 0% 3.9%;
50
+
--card-foreground: 0 0% 98%;
51
+
52
+
--border: 0 0% 14.9%;
53
+
--input: 0 0% 14.9%;
54
+
55
+
--primary: 0 0% 98%;
56
+
--primary-foreground: 0 0% 9%;
57
+
58
+
--secondary: 0 0% 14.9%;
59
+
--secondary-foreground: 0 0% 98%;
60
+
61
+
--accent: 0 0% 14.9%;
62
+
--accent-foreground: 0 0% 98%;
63
+
64
+
--destructive: 0 62.8% 30.6%;
65
+
--destructive-foreground: 0 0% 98%;
66
+
67
+
--ring: 0 0% 83.1%;
68
+
}
69
+
}
70
+
71
+
@layer base {
72
+
* {
73
+
@apply border-border;
74
+
}
75
+
body {
76
+
@apply bg-background text-foreground;
77
+
}
78
+
}
+9
src/lib/components/ui/card/card-content.svelte
+9
src/lib/components/ui/card/card-content.svelte
+9
src/lib/components/ui/card/card-description.svelte
+9
src/lib/components/ui/card/card-description.svelte
+9
src/lib/components/ui/card/card-header.svelte
+9
src/lib/components/ui/card/card-header.svelte
+14
src/lib/components/ui/card/card-title.svelte
+14
src/lib/components/ui/card/card-title.svelte
···
1
+
<script>
2
+
import { cn } from "$lib/utils.js";
3
+
let className = undefined;
4
+
export let tag = "h3";
5
+
export { className as class };
6
+
</script>
7
+
8
+
<svelte:element
9
+
this={tag}
10
+
class={cn("text-lg font-semibold leading-none tracking-tight", className)}
11
+
{...$$restProps}
12
+
>
13
+
<slot />
14
+
</svelte:element>
+12
src/lib/components/ui/card/card.svelte
+12
src/lib/components/ui/card/card.svelte
+21
src/lib/components/ui/card/index.js
+21
src/lib/components/ui/card/index.js
···
1
+
import Root from "./card.svelte";
2
+
import Content from "./card-content.svelte";
3
+
import Description from "./card-description.svelte";
4
+
import Footer from "./card-footer.svelte";
5
+
import Header from "./card-header.svelte";
6
+
import Title from "./card-title.svelte";
7
+
export {
8
+
Root,
9
+
Content,
10
+
Description,
11
+
Footer,
12
+
Header,
13
+
Title,
14
+
//
15
+
Root as Card,
16
+
Content as CardContent,
17
+
Description as CardDescription,
18
+
Footer as CardFooter,
19
+
Header as CardHeader,
20
+
Title as CardTitle,
21
+
};
+48
src/lib/utils.js
+48
src/lib/utils.js
···
1
+
import { clsx } from "clsx";
2
+
import { twMerge } from "tailwind-merge";
3
+
import { cubicOut } from "svelte/easing";
4
+
5
+
export function cn(...inputs) {
6
+
return twMerge(clsx(inputs));
7
+
}
8
+
9
+
export const flyAndScale = (
10
+
node,
11
+
params = { y: -8, x: 0, start: 0.95, duration: 150 }
12
+
) => {
13
+
const style = getComputedStyle(node);
14
+
const transform = style.transform === "none" ? "" : style.transform;
15
+
16
+
const scaleConversion = (valueA, scaleA, scaleB) => {
17
+
const [minA, maxA] = scaleA;
18
+
const [minB, maxB] = scaleB;
19
+
20
+
const percentage = (valueA - minA) / (maxA - minA);
21
+
const valueB = percentage * (maxB - minB) + minB;
22
+
23
+
return valueB;
24
+
};
25
+
26
+
const styleToString = (style) => {
27
+
return Object.keys(style).reduce((str, key) => {
28
+
if (style[key] === undefined) return str;
29
+
return str + `${key}:${style[key]};`;
30
+
}, "");
31
+
};
32
+
33
+
return {
34
+
duration: params.duration ?? 200,
35
+
delay: 0,
36
+
css: (t) => {
37
+
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
38
+
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
39
+
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
40
+
41
+
return styleToString({
42
+
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
43
+
opacity: t
44
+
});
45
+
},
46
+
easing: cubicOut
47
+
};
48
+
};
+2
src/routes/+layout.server.js
+2
src/routes/+layout.server.js
+4
-5
src/routes/+layout.svelte
+4
-5
src/routes/+layout.svelte
+15
-31
src/routes/Normalizer.svelte
+15
-31
src/routes/Normalizer.svelte
···
1
1
<script>
2
2
import { onMount } from 'svelte';
3
3
import { page } from '$app/stores';
4
-
import { scale } from 'svelte/transition';
5
4
import { tweened } from 'svelte/motion';
6
5
import { cubicOut } from 'svelte/easing';
7
6
import { normalize } from '$lib/normalize';
7
+
import * as Card from "$lib/components/ui/card";
8
+
import { MessageCircle, Send, Phone } from 'lucide-svelte';
8
9
9
10
export let data;
10
11
export let value = '';
···
19
20
easing: cubicOut
20
21
});
21
22
22
-
const updateScale = () => {
23
-
const viewportWidth = window.innerWidth;
24
-
const viewportHeight = window.innerHeight;
25
-
const widthScale = viewportWidth / contentWidth;
26
-
const heightScale = viewportHeight / contentHeight;
27
-
const newScale = Math.min(widthScale, heightScale);
28
-
contentScale.set(newScale);
29
-
};
30
-
31
-
// Update the scale whenever the window is resized
32
-
onMount(() => {
33
-
updateScale();
34
-
window.addEventListener('resize', updateScale);
35
-
});
36
-
37
23
$: normed = normalize(value, country_code);
38
24
$: ready = normed.length > 0;
39
25
40
-
// function copy_number(){
41
-
// navigator.clipboard.writeText(normed);
42
-
// }
43
-
function focusInputField(){
26
+
function focusInputField() {
44
27
document.querySelector('input[type="tel"]').focus();
45
28
}
46
29
</script>
47
30
48
-
<div class="base">
49
-
<div class="container">
50
-
<div
51
-
class="content"
52
-
>
31
+
<Card.Root>
32
+
<Card.Header>
33
+
<Card.Title>Normalizer</Card.Title>
34
+
<Card.Description>Enter your phone number to normalize it</Card.Description>
35
+
</Card.Header>
36
+
<Card.Content>
53
37
<div class="inputs-container" style="text-align: center;">
54
38
<input bind:value={country_code} placeholder="country code" size="3" />
55
39
<input bind:value autofocus type="tel" placeholder="11 2222 3333" size="12" />
···
60
44
<ul style="display: flex; justify-content: center;">
61
45
<li style="margin-right: 16px;">
62
46
<a href="sms:+{normed}" style={ready ? '' : 'color: grey; pointer-events: none'}>
63
-
<img src="/sms.svg" height="24px" alt="Telegram" />
47
+
<MessageCircle size="24" />
64
48
</a>
65
49
</li>
66
50
<li style="margin-right: 16px;">
67
51
<a href="https://t.me/{normed}" target="_blank" rel="noreferrer" style={ready ? '' : 'color: grey; pointer-events: none'}>
68
-
<img src="/telegram.svg" height="24px" alt="Telegram" />
52
+
<Send size="24" />
69
53
</a>
70
54
</li>
71
55
<li>
72
56
<a href="https://wa.me/{normed}" target="_blank" rel="noreferrer" style={ready ? '' : 'color: grey; pointer-events: none'}>
73
-
<img src="/WhatsApp.svg" height="24px" alt="Fucking WhatsApp, god help us all" />
57
+
<Phone size="24" />
74
58
</a>
75
59
</li>
76
60
</ul>
77
61
</div>
78
62
</div>
79
-
</div>
80
-
</div>
81
-
</div>
63
+
</Card.Content>
64
+
</Card.Root>
65
+
82
66
<style>
83
67
:root {
84
68
overflow: hidden;
+64
tailwind.config.js
+64
tailwind.config.js
···
1
+
import { fontFamily } from "tailwindcss/defaultTheme";
2
+
3
+
/** @type {import('tailwindcss').Config} */
4
+
const config = {
5
+
darkMode: ["class"],
6
+
content: ["./src/**/*.{html,js,svelte,ts}"],
7
+
safelist: ["dark"],
8
+
theme: {
9
+
container: {
10
+
center: true,
11
+
padding: "2rem",
12
+
screens: {
13
+
"2xl": "1400px"
14
+
}
15
+
},
16
+
extend: {
17
+
colors: {
18
+
border: "hsl(var(--border) / <alpha-value>)",
19
+
input: "hsl(var(--input) / <alpha-value>)",
20
+
ring: "hsl(var(--ring) / <alpha-value>)",
21
+
background: "hsl(var(--background) / <alpha-value>)",
22
+
foreground: "hsl(var(--foreground) / <alpha-value>)",
23
+
primary: {
24
+
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
25
+
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
26
+
},
27
+
secondary: {
28
+
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
29
+
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
30
+
},
31
+
destructive: {
32
+
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
33
+
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
34
+
},
35
+
muted: {
36
+
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
37
+
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
38
+
},
39
+
accent: {
40
+
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
41
+
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
42
+
},
43
+
popover: {
44
+
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
45
+
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
46
+
},
47
+
card: {
48
+
DEFAULT: "hsl(var(--card) / <alpha-value>)",
49
+
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
50
+
}
51
+
},
52
+
borderRadius: {
53
+
lg: "var(--radius)",
54
+
md: "calc(var(--radius) - 2px)",
55
+
sm: "calc(var(--radius) - 4px)"
56
+
},
57
+
fontFamily: {
58
+
sans: [...fontFamily.sans]
59
+
}
60
+
}
61
+
},
62
+
};
63
+
64
+
export default config;
+8
-5
vite.config.js
+8
-5
vite.config.js
···
1
1
import { sveltekit } from '@sveltejs/kit/vite';
2
2
import { defineConfig } from 'vite';
3
+
import path from 'path';
3
4
4
5
export default defineConfig({
5
6
plugins: [sveltekit()],
6
-
server: {
7
-
serveStatic: {
8
-
directory: 'static'
9
-
}
10
-
}
7
+
server: {
8
+
resolve: {
9
+
alias: {
10
+
$lib: path.resolve("./src/lib"),
11
+
},
12
+
},
13
+
}
11
14
});