Update layout to be a svelte monorepo with shadcn-svelte
Also: add the start of a.starrysky.fyi
diff --git a/packages/components/src/app.d.ts b/packages/components/src/app.d.ts
new file mode 100644
index 0000000..f59b884
--- /dev/null
+++ b/packages/components/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Platform {}
+ }
+}
+
+export {};
diff --git a/packages/components/src/app.html b/packages/components/src/app.html
new file mode 100644
index 0000000..d2fc6b0
--- /dev/null
+++ b/packages/components/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ %sveltekit.head%
+ </head>
+ <body data-sveltekit-preload-data="hover">
+ <div>%sveltekit.body%</div>
+ </body>
+</html>
diff --git a/packages/components/src/app.postcss b/packages/components/src/app.postcss
new file mode 100644
index 0000000..1a7b7cf
--- /dev/null
+++ b/packages/components/src/app.postcss
@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/components/src/index.test.ts b/packages/components/src/index.test.ts
new file mode 100644
index 0000000..e07cbbd
--- /dev/null
+++ b/packages/components/src/index.test.ts
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+ it('adds 1 + 2 to equal 3', () => {
+ expect(1 + 2).toBe(3);
+ });
+});
diff --git a/packages/components/src/lib/decoration/BackgroundStars/BackgroundStars.svelte b/packages/components/src/lib/decoration/BackgroundStars/BackgroundStars.svelte
new file mode 100644
index 0000000..7d69c57
--- /dev/null
+++ b/packages/components/src/lib/decoration/BackgroundStars/BackgroundStars.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+ import seedrandom from 'seedrandom';
+
+ let random = seedrandom('backgroundstars');
+
+ let parts: [number, number][] = Array(50)
+ .fill(0)
+ .map(() => {
+ return [random(), random()];
+ });
+</script>
+
+<div class="star-container">
+ {#each parts as part}
+ <div
+ class="bg-amber-400 star"
+ style="top: {part[0] * 100}vh; left: {part[1] * 100}vw; animation-delay: {(part[0] +
+ part[1]) *
+ 2500}ms;"
+ />
+ {/each}
+</div>
+
+<style>
+ @keyframes twinkle {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+
+ @keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ div.star {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
+ animation: twinkle 10s infinite;
+ opacity: 0;
+ }
+
+ div.star-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ animation: rotate 240s infinite linear;
+ z-index: -1;
+ }
+</style>
diff --git a/packages/components/src/lib/decoration/BackgroundStars/index.ts b/packages/components/src/lib/decoration/BackgroundStars/index.ts
new file mode 100644
index 0000000..81fab75
--- /dev/null
+++ b/packages/components/src/lib/decoration/BackgroundStars/index.ts
@@ -0,0 +1 @@
+export { default as BackgroundStars } from './BackgroundStars.svelte';
diff --git a/packages/components/src/lib/index.js b/packages/components/src/lib/index.js
new file mode 100644
index 0000000..47d3c46
--- /dev/null
+++ b/packages/components/src/lib/index.js
@@ -0,0 +1 @@
+// Reexport your entry components here
diff --git a/packages/components/src/lib/ui/button/Button.svelte b/packages/components/src/lib/ui/button/Button.svelte
new file mode 100644
index 0000000..c65bd1d
--- /dev/null
+++ b/packages/components/src/lib/ui/button/Button.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+ import type { VariantProps } from "class-variance-authority";
+ import type {
+ HTMLAnchorAttributes,
+ HTMLButtonAttributes
+ } from "svelte/elements";
+ import { cn } from "$lib/utils";
+ import { buttonVariants } from ".";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+ export let href: HTMLAnchorAttributes["href"] = undefined;
+ export let type: HTMLButtonAttributes["type"] = undefined;
+ export let variant: VariantProps<typeof buttonVariants>["variant"] =
+ "default";
+ export let size: VariantProps<typeof buttonVariants>["size"] = "default";
+</script>
+
+<svelte:element
+ this={href ? "a" : "button"}
+ type={href ? undefined : type}
+ {href}
+ class={cn(buttonVariants({ variant, size, className }))}
+ {...$$restProps}
+ on:click
+ on:change
+ on:keydown
+ on:keyup
+ on:mouseenter
+ on:mouseleave
+>
+ <slot />
+</svelte:element>
diff --git a/packages/components/src/lib/ui/button/index.ts b/packages/components/src/lib/ui/button/index.ts
new file mode 100644
index 0000000..32393a4
--- /dev/null
+++ b/packages/components/src/lib/ui/button/index.ts
@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.svelte";
+
+export const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border border-input hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "underline-offset-4 hover:underline text-primary"
+ },
+ size: {
+ default: "h-10 py-2 px-4",
+ sm: "h-9 px-3 rounded-md",
+ lg: "h-11 px-8 rounded-md"
+ }
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default"
+ }
+ }
+);
diff --git a/packages/components/src/lib/ui/input/Input.svelte b/packages/components/src/lib/ui/input/Input.svelte
new file mode 100644
index 0000000..40b1ac9
--- /dev/null
+++ b/packages/components/src/lib/ui/input/Input.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+ import type { HTMLInputAttributes } from "svelte/elements";
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+
+ export let value: HTMLInputAttributes["value"] = undefined;
+ export { className as class };
+</script>
+
+<input
+ class={cn(
+ "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ className
+ )}
+ bind:value
+ on:blur
+ on:change
+ on:click
+ on:focus
+ on:keydown
+ on:keypress
+ on:keyup
+ on:mouseover
+ on:mouseenter
+ on:mouseleave
+ on:paste
+ on:input
+ {...$$restProps}
+/>
diff --git a/packages/components/src/lib/ui/input/index.ts b/packages/components/src/lib/ui/input/index.ts
new file mode 100644
index 0000000..06f880b
--- /dev/null
+++ b/packages/components/src/lib/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.svelte";
diff --git a/packages/components/src/lib/utils.ts b/packages/components/src/lib/utils.ts
new file mode 100644
index 0000000..256f86f
--- /dev/null
+++ b/packages/components/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/packages/components/src/routes/+layout.svelte b/packages/components/src/routes/+layout.svelte
new file mode 100644
index 0000000..d93b258
--- /dev/null
+++ b/packages/components/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+ import '../app.postcss';
+ import '../app.postcss';
+</script>
+
+<slot />
diff --git a/packages/components/src/routes/+page.svelte b/packages/components/src/routes/+page.svelte
new file mode 100644
index 0000000..0a45b69
--- /dev/null
+++ b/packages/components/src/routes/+page.svelte
@@ -0,0 +1,3 @@
+<h1>Welcome to your library project</h1>
+<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>