init

.dockerignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,12 @@
+FROM oven/bun:latest AS build
+
+WORKDIR /app
+
+COPY . .
+
+RUN bun install
+RUN bun run build
+
+FROM httpd:2.4 AS runtime
+COPY --from=build /app/dist /usr/local/apache2/htdocs/
+EXPOSE 80

README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   └── content.config.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,23 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+
+import react from "@astrojs/react";
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    starlight({
+      title: "My Docs",
+      social: {
+        github: "https://github.com/withastro/starlight",
+      },
+    }),
+    react(),
+    tailwind({
+      applyBaseStyles: false,
+    }),
+  ],
+});

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.mjs",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "wyvern-docs",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.1.2",
+    "@astrojs/starlight": "^0.30.3",
+    "@astrojs/tailwind": "^5.1.4",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
+    "astro": "^5.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sharp": "^0.32.5",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7"
+  }
+}

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>

src/components/Parameter.tsx

@@ -0,0 +1,42 @@
+import { TableCell, TableRow } from "./ui/table";
+import { Check, X } from "lucide-react";
+
+interface ParameterProps {
+  name: string;
+  description: string;
+  type: string;
+  typeLink?: string;
+  required: boolean;
+}
+
+function Parameter({
+  description,
+  name,
+  required,
+  type,
+  typeLink,
+}: ParameterProps) {
+  return (
+    <TableRow>
+      <TableCell className="font-medium">{name}</TableCell>
+      <TableCell>{description}</TableCell>
+      <TableCell>
+        {typeLink ? (
+          <LinkedParameter path={typeLink} name={type}></LinkedParameter>
+        ) : (
+          type
+        )}
+      </TableCell>
+      <TableCell className="text-right">
+        {required ? <Check color="green" /> : <X color="red" />}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function LinkedParameter({ name, path }: { path: string; name: string }) {
+  const url = path.startsWith("http") ? path : `/${path}`;
+  return <a href={`${url}`}>{name}</a>;
+}
+
+export { Parameter };

src/components/ParameterList.tsx

@@ -0,0 +1,19 @@
+import { Table, TableHeader, TableRow, TableHead } from "./ui/table";
+
+function ParameterList(props: any) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Name</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead>Type</TableHead>
+          <TableHead className="text-right">Required</TableHead>
+        </TableRow>
+      </TableHeader>
+      {props.children}
+    </Table>
+  );
+}
+
+export { ParameterList };

src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./ui";
+
+export * from "./Parameter";
+export * from "./ParameterList";

src/components/ui/index.ts

@@ -0,0 +1 @@
+export * from "./table";

src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/content.config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};

src/content/docs/commands/Fun/math.mdx

@@ -0,0 +1,55 @@
+---
+title: math
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: math
+---
+
+import { Icon } from "@astrojs/starlight/components";
+import {
+  Table,
+  TableCaption,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableBody,
+  TableFooter,
+  TableHeader,
+} from "@/components/ui/table";
+
+import { Parameter } from "@/components/Parameter";
+import { ParameterList } from "@/components/ParameterList";
+
+# Math
+
+<br />
+
+### Description
+
+Evaluate a math formula
+
+### User Permissions
+
+- None
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="formula"
+    description="The formula to evaluate"
+    type="MathFormula"
+    typeLink="reference/MathFormula"
+    required
+  ></Parameter>
+  <Parameter
+    name="variables"
+    description="Any variables to use in the formula"
+    type="MathVariables"
+    typeLink="reference/MathVariables"
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Info/ping.mdx

@@ -0,0 +1,24 @@
+---
+title: ping
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: ping
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# ping
+
+<br />
+
+### Description
+
+Test the ping to Discord
+
+### User Permissions
+
+- None
+
+### Bot Permissions
+
+- Embed Links

src/content/docs/commands/Info/snowflake.mdx

@@ -0,0 +1,36 @@
+---
+title: snowflake
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: snowflake
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# snowflake
+
+<br />
+
+### Description
+
+decode a discord snowflake
+
+### User Permissions
+
+- None
+
+### Bot Permissions
+
+- Embed Links
+
+# Parameters
+
+<ParameterList>
+  <Parameter
+    name="snowflake"
+    description="The snowflake"
+    type="Snowflake"
+    typeLink="https://discord.com/developers/docs/reference#snowflakes"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Settings/auto_role/create.mdx

@@ -0,0 +1,35 @@
+---
+title: settings auto_role create
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings auto_role create
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings auto_role create
+
+<br />
+
+### Description
+
+Give a role to new members
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="role"
+    description="The role to give"
+    type="role"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Settings/auto_role/remove.mdx

@@ -0,0 +1,35 @@
+---
+title: settings auto_role create
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings auto_role create
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings auto_role create
+
+<br />
+
+### Description
+
+Stop giving a role to new members
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="role"
+    description="The role to stop giving"
+    type="role"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Settings/report_channel/set.mdx

@@ -0,0 +1,35 @@
+---
+title: settings report_channel set
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings report_channel set
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings report_channel set
+
+<br />
+
+### Description
+
+Set the channel user reports are sent to
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="channel"
+    description="The channel"
+    type="TextChannel"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Settings/welcome_message/disable.mdx

@@ -0,0 +1,24 @@
+---
+title: settings welcome_message disable
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings welcome_message disable
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings welcome_message disable
+
+<br />
+
+### Description
+
+Disable the welcome message
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links

src/content/docs/commands/Settings/welcome_message/enable.mdx

@@ -0,0 +1,24 @@
+---
+title: settings welcome_message enable
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings welcome_message enable
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings welcome_message enable
+
+<br />
+
+### Description
+
+Enable the welcome message
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links

src/content/docs/commands/Settings/welcome_message/set_color.mdx

@@ -0,0 +1,37 @@
+---
+title: settings welcome_message set_message
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings welcome_message set_message
+---
+
+import { Aside } from "@astrojs/starlight/components";
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings welcome_message set_message
+
+<br />
+
+### Description
+
+Set the color of the welcome message
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="color"
+    description="The color"
+    type="Color"
+    typeLink="reference/color"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Settings/welcome_message/set_message.mdx

@@ -0,0 +1,44 @@
+---
+title: settings welcome_message set_message
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: settings welcome_message set_message
+---
+
+import { Aside } from "@astrojs/starlight/components";
+import { ParameterList, Parameter, Table } from "@/components";
+
+# settings welcome_message set_message
+
+<br />
+
+### Description
+
+Set the message of the welcome message
+
+### User Permissions
+
+- Manage Server
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<Aside type="tip" title="Formatting Options">
+  `{user.username}` -> User's Username <br />
+  `{user.mention}` -> User's Username <br />
+  `{user.id}` -> User's ID <br />
+  `{guild.name}` -> Guild's ID <br />
+  `{guild.id}` -> Guild's ID <br />
+</Aside>
+
+<ParameterList>
+  <Parameter
+    name="message"
+    description="The message"
+    type="string"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Urban/urban_define.mdx

@@ -0,0 +1,38 @@
+---
+title: urban define
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: urban define
+  badge:
+    text: NSFW
+    variant: danger
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# urban define
+
+<br />
+
+### Description
+
+Define a term on Urban Dictionary
+
+### User Permissions
+
+- None
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="term"
+    description="The term to evaluate"
+    type="string"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/commands/Urban/urban_random.mdx

@@ -0,0 +1,38 @@
+---
+title: urban define
+description: A guide in my new Starlight docs site.
+sidebar:
+  label: urban random
+  badge:
+    text: NSFW
+    variant: danger
+---
+
+import { ParameterList, Parameter, Table } from "@/components";
+
+# urban define
+
+<br />
+
+### Description
+
+Define a random term on Urban Dictionary
+
+### User Permissions
+
+- None
+
+### Bot Permissions
+
+- Embed Links
+
+### Parameters
+
+<ParameterList>
+  <Parameter
+    name="term"
+    description="The term to evaluate"
+    type="string"
+    required
+  ></Parameter>
+</ParameterList>

src/content/docs/index.mdx

@@ -0,0 +1,37 @@
+---
+title: Welcome to Starlight
+description: Get started building your docs site with Starlight.
+template: splash
+hero:
+  tagline: Congrats on setting up a new Starlight project!
+  image:
+    file: ../../assets/houston.webp
+  actions:
+    - text: Docs
+      link: /commands/example/
+      icon: right-arrow
+    - text: Invite
+      link: https://starlight.astro.build
+      icon: external
+      variant: minimal
+---
+
+import { Card, CardGrid } from "@astrojs/starlight/components";
+import "@/styles/globals.css";
+
+## Next steps
+
+<CardGrid stagger>
+  <Card title="Update content" icon="pencil">
+    Edit `src/content/docs/index.mdx` to see this page change.
+  </Card>
+  <Card title="Add new content" icon="add-document">
+    Add Markdown or MDX files to `src/content/docs` to create new pages.
+  </Card>
+  <Card title="Configure your site" icon="setting">
+    Edit your `sidebar` and other config in `astro.config.mjs`.
+  </Card>
+  <Card title="Read the docs" icon="open-book">
+    Learn more in [the Starlight Docs](https://starlight.astro.build/).
+  </Card>
+</CardGrid>

src/content/docs/reference/example.md

@@ -0,0 +1,11 @@
+---
+title: Example Reference
+description: A reference page in my new Starlight docs site.
+---
+
+Reference pages are ideal for outlining how things work in terse and clear terms.
+Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you're documenting.
+
+## Further reading
+
+- Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/styles/globals.css

@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

tailwind.config.mjs

@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ['class'],
+    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	theme: {
+    	extend: {
+    		borderRadius: {
+    			lg: 'var(--radius)',
+    			md: 'calc(var(--radius) - 2px)',
+    			sm: 'calc(var(--radius) - 4px)'
+    		},
+    		colors: {
+    			background: 'hsl(var(--background))',
+    			foreground: 'hsl(var(--foreground))',
+    			card: {
+    				DEFAULT: 'hsl(var(--card))',
+    				foreground: 'hsl(var(--card-foreground))'
+    			},
+    			popover: {
+    				DEFAULT: 'hsl(var(--popover))',
+    				foreground: 'hsl(var(--popover-foreground))'
+    			},
+    			primary: {
+    				DEFAULT: 'hsl(var(--primary))',
+    				foreground: 'hsl(var(--primary-foreground))'
+    			},
+    			secondary: {
+    				DEFAULT: 'hsl(var(--secondary))',
+    				foreground: 'hsl(var(--secondary-foreground))'
+    			},
+    			muted: {
+    				DEFAULT: 'hsl(var(--muted))',
+    				foreground: 'hsl(var(--muted-foreground))'
+    			},
+    			accent: {
+    				DEFAULT: 'hsl(var(--accent))',
+    				foreground: 'hsl(var(--accent-foreground))'
+    			},
+    			destructive: {
+    				DEFAULT: 'hsl(var(--destructive))',
+    				foreground: 'hsl(var(--destructive-foreground))'
+    			},
+    			border: 'hsl(var(--border))',
+    			input: 'hsl(var(--input))',
+    			ring: 'hsl(var(--ring))',
+    			chart: {
+    				'1': 'hsl(var(--chart-1))',
+    				'2': 'hsl(var(--chart-2))',
+    				'3': 'hsl(var(--chart-3))',
+    				'4': 'hsl(var(--chart-4))',
+    				'5': 'hsl(var(--chart-5))'
+    			}
+    		}
+    	}
+    },
+	plugins: [require("tailwindcss-animate")],
+}

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}