Update layout to be a svelte monorepo with shadcn-svelte
Also: add the start of a.starrysky.fyi
diff --git a/apps/a/src/app.d.ts b/apps/a/src/app.d.ts
new file mode 100644
index 0000000..f59b884
--- /dev/null
+++ b/apps/a/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/apps/a/src/app.html b/apps/a/src/app.html
new file mode 100644
index 0000000..effe0d0
--- /dev/null
+++ b/apps/a/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" />
+ %sveltekit.head%
+ </head>
+ <body data-sveltekit-preload-data="hover">
+ <div style="display: contents">%sveltekit.body%</div>
+ </body>
+</html>
diff --git a/apps/a/src/app.postcss b/apps/a/src/app.postcss
new file mode 100644
index 0000000..76589de
--- /dev/null
+++ b/apps/a/src/app.postcss
@@ -0,0 +1,49 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 224 71% 4%;
+ --foreground: 213 31% 91%;
+
+ --muted: 223 47% 11%;
+ --muted-foreground: 215.4 16.3% 56.9%;
+
+ --popover: 224 71% 4%;
+ --popover-foreground: 215 20.2% 65.1%;
+
+ --card: 224 71% 4%;
+ --card-foreground: 213 31% 91%;
+
+ --border: 216 34% 17%;
+ --input: 216 34% 17%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 1.2%;
+
+ --secondary: 222.2 47.4% 11.2%;
+ --secondary-foreground: 210 40% 98%;
+
+ --accent: 216 34% 17%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 359 51% 48%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 216 34% 17%;
+
+ --radius: 0.5rem;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ font-feature-settings: 'rlig' 1, 'calt' 1;
+ }
+}
diff --git a/apps/a/src/index.test.ts b/apps/a/src/index.test.ts
new file mode 100644
index 0000000..e07cbbd
--- /dev/null
+++ b/apps/a/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/apps/a/src/lib/utils.ts b/apps/a/src/lib/utils.ts
new file mode 100644
index 0000000..256f86f
--- /dev/null
+++ b/apps/a/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/apps/a/src/routes/+layout.svelte b/apps/a/src/routes/+layout.svelte
new file mode 100644
index 0000000..488efad
--- /dev/null
+++ b/apps/a/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script>
+ import { BackgroundStars } from '$components/decoration/BackgroundStars';
+ import '../app.postcss';
+ import '../app.postcss';
+</script>
+
+<slot />
+
+<BackgroundStars />
diff --git a/apps/a/src/routes/+page.svelte b/apps/a/src/routes/+page.svelte
new file mode 100644
index 0000000..ab59723
--- /dev/null
+++ b/apps/a/src/routes/+page.svelte
@@ -0,0 +1,45 @@
+<script>
+ import Button from '$components/ui/button/Button.svelte';
+ import { BackgroundStars } from '$components/decoration/BackgroundStars';
+</script>
+
+<p class="pt-[40vh] p-10">
+ We hope that our services help you to make something as
+ <span class="gradient-text from-indigo-500 to-violet-400">beautiful</span> as the
+ <span class="gradient-text from-amber-400 to-amber-300">stars</span>
+ in the
+ <span class="gradient-text from-cyan-400 to-cyan-500">sky</span>
+</p>
+
+<p class="m-10 mt-0">
+ Because I, at least, <span class="gradient-text from-red-500 to-red-600">love</span> that which is <span
+ class="gradient-text from-green-500 to-green-400">beautiful</span
+ >
+</p>
+
+<p class="m-10 pl-10">
+ - <span class="gradient-text from-pink-400 to-pink-300">A Starry Sky</span>
+</p>
+
+<div class="flex flex-col items-center justify-center gap-2 m-10">
+ <Button href="/who" variant="outline">Who are you?</Button>
+ <Button href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">What do you make?</Button>
+</div>
+
+<style lang="postcss">
+ h1 {
+ font-size: 3rem;
+ font-family: Roboto;
+ font-weight: bold;
+ }
+
+ span.gradient-text {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ @apply bg-gradient-to-r font-bold;
+ }
+
+ .title {
+ text-align: center;
+ }
+</style>
diff --git a/apps/a/src/routes/who/+page.svelte b/apps/a/src/routes/who/+page.svelte
new file mode 100644
index 0000000..857c986
--- /dev/null
+++ b/apps/a/src/routes/who/+page.svelte
@@ -0,0 +1 @@
+I'm Skyler,