initial design work

matthewp · Nov 14, 2024 · 0135563 · 0135563
1 parent c5c2ebe
commit 0135563
Show file tree

Hide file tree

Showing 22 changed files with 9,074 additions and 828 deletions.
diff --git a/docs2/.gitignore b/docs2/.gitignore
@@ -0,0 +1,24 @@
+# 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
+
+# jetbrains setting folder
+.idea/
diff --git a/docs2/README.md b/docs2/README.md
@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, 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?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
diff --git a/docs2/astro.config.mjs b/docs2/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});
diff --git a/docs2/package.json b/docs2/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/tailwind": "^5.1.2",
+    "astro": "^4.16.12",
+    "tailwindcss": "^3.4.14"
+  }
+}
diff --git a/docs2/src/components/CodeBlock.astro b/docs2/src/components/CodeBlock.astro
@@ -0,0 +1,17 @@
+---
+import Code from '../icons/Code.astro';
+---
+<div class="bg-gray-900 rounded-lg p-6 my-6">
+  {Astro.props.title && (
+    <div class
+  ="flex items-center gap-2 mb-4 font-mono text-cyan-400">
+      <Code size={16} />
+      <span>{Astro.props.title}</span>
+    </div>
+  )}
+  <pre class
+="overflow-x-auto p-4 bg-black/50 rounded-lg text-gray-300 font-mono text-sm">
+    {Astro.props.code}
+  </pre>
+</div>
+
diff --git a/docs2/src/components/ContentSection.astro b/docs2/src/components/ContentSection.astro
@@ -0,0 +1,5 @@
+<div class="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 border-2 border-cyan-500">
+  <h2 class="text-3xl font-bold font-mono text-cyan-400 mb-2">{Astro.props.title}</h2>
+  {Astro.props.subtitle && <p class="text-xl text-gray-300 mb-6">{Astro.props.subtitle}</p>}
+  <slot />
+</div>
diff --git a/docs2/src/components/FeatureCard.astro b/docs2/src/components/FeatureCard.astro
@@ -0,0 +1,8 @@
+<div class="group bg-gray-900 p-8 rounded-xl border-2 border-cyan-500 hover:border-pink-500 transition-colors relative overflow-hidden">
+  <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-cyan-400 to-pink-500 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
+  <div class="w-12 h-12 bg-cyan-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+    {Astro.props.icon}
+  </div>
+  <h3 class="text-xl font-bold mb-2 font-mono text-cyan-400">{Astro.props.title}</h3>
+  <p class="text-gray-400">{Astro.props.description}</p>
+</div>
diff --git a/docs2/src/components/InfoBox.astro b/docs2/src/components/InfoBox.astro
@@ -0,0 +1,9 @@
+---
+import Info from '../icons/Info.astro';
+---
+<div class="bg-cyan-500/10 border-l-4 border-cyan-500 p-4 my-6 rounded-r-lg">
+  <div class="flex gap-3">
+    <Info size={20} class="text-cyan-400 flex-shrink-0 mt-1" />
+    <div class="text-gray-300"><slot /></div>
+  </div>
+</div>
diff --git a/docs2/src/components/RobotLogo.astro b/docs2/src/components/RobotLogo.astro
@@ -0,0 +1,57 @@
+<!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="w-full h-full">
+    <defs>
+      <clipPath id="circleClip">
+        <circle cx="50" cy="50" r="48"/>
+      </clipPath>
+    </defs>
+    <circle cx="50" cy="50" r="48" class="fill-gray-900 stroke-cyan-400" stroke-width="2"/>
+    <g clip-path="url(#circleClip)">
+      <path d="M22 81 L17 100 L83 100 L78 81" class="fill-cyan-400"/>
+    </g>
+    <rect x="25" y="30" width="50" height="35" rx="4" class="fill-cyan-400"/>
+    <rect x="16" y="40" width="2" height="15" class="fill-cyan-400"/>
+    <rect x="20" y="44" width="2" height="7" class="fill-cyan-400"/>
+    <rect x="82" y="40" width="2" height="15" class="fill-cyan-400"/>
+    <rect x="78" y="44" width="2" height="7" class="fill-cyan-400"/>
+    <rect x="35" y="20" width="4" height="12" class="fill-cyan-400" transform="rotate(-15, 35, 32)"/>
+    <rect x="61" y="20" width="4" height="12" class="fill-cyan-400" transform="rotate(15, 65, 32)"/>
+    <circle cx="32" cy="18" r="3" class="fill-cyan-400"/>
+    <circle cx="68" cy="18" r="3" class="fill-cyan-400"/>
+    <path d="M32 18 L 40 18 L 45 22 L 50 18 L 55 22 L 60 18 L 68 18" 
+          class="fill-none stroke-cyan-400"
+          stroke-width="2.5"
+          stroke-inecap="round"
+          stroke-linejoin="round"/>
+    <rect x="33" y="38" width="12" height="6" class="fill-gray-900"/>
+    <circle cx="41" cy="42" r="1.25" class="fill-cyan-400"/>
+    <rect x="55" y="38" width="12" height="6" class="fill-gray-900"/>
+    <circle cx="59" cy="42" r="1.25" class="fill-cyan-400"/>
+    <rect x="35" y="50" width="30" height="3" class="fill-gray-900"/>
+    <rect x="35" y="67" width="30" height="2" class="fill-cyan-400"/>
+    <rect x="35" y="71" width="30" height="2" class="fill-cyan-400"/>
+    <rect x="35" y="75" width="30" height="2" class="fill-cyan-400"/>
+  </svg>
+-->
+
+
+<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="500" cy="500" r="500" class="fill-gray-900 stroke-cyan-400"/>
+    <g class="fill-cyan-400">
+        <path d="m500 1000a498.16 498.16 0 0 0 331.85-126c-16.4-54.39-39.5-87.12-64.43-87.12h-534.84c-24.93 0-48 32.73-64.43 87.12a498.16 498.16 0 0 0 331.85 126z" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(-1 0 0 -1 1000 1523.47)" width="213.81" x="393.09" y="751.3" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(-1 0 0 -1 1000 1457.1)" width="213.81" x="393.09" y="718.11" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(-1 0 0 -1 1000 1392.33)" width="213.81" x="393.09" y="685.73" class="fill-cyan-400"/>
+        <path d="m778.46 309.25h-74.05l26.19-84a45.12 45.12 0 1 0 -49.26-13.25l-30.34 97.25h-301.24l-31.1-99.75a45.11 45.11 0 1 0 -49.26 13.2l27 86.55h-74.86a41.27 41.27 0 0 0 -41.27 41.27v278.37a41.28 41.28 0 0 0 41.27 41.28h556.92a41.28 41.28 0 0 0 41.27-41.28v-278.37a41.27 41.27 0 0 0 -41.27-41.27z" class="fill-cyan-400 stroke-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(0 -1 1 0 355.18 1335.29)" width="78.46" x="806" y="479.62" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(0 -1 1 0 389.5 1369.62)" width="156.92" x="801.1" y="479.62" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(0 -1 1 0 -335.29 644.82)" width="78.46" x="115.53" y="479.62" class="fill-cyan-400"/>
+        <rect height="20.88" rx="10.44" transform="matrix(0 -1 1 0 -369.62 610.5)" width="156.92" x="41.98" y="479.62" class="fill-cyan-400"/>
+    </g>
+    <rect class="fill-gray-900" height="17.65" rx="8.83" width="245.2" x="377.4" y="560.33"/>
+    <path d="m675.92 485.3h-119.92a17.75 17.75 0 0 1 -17.75-17.75v-63.66h168.69v50.38a31 31 0 0 1 -31.02 31.03z" class="fill-gray-900"/>
+    <path d="m597.61 434.79a19.52 19.52 0 0 0 -10.32 2.95l4.9 11.76-11.69-4.68a19.61 19.61 0 1 0 17.11-10z" class="fill-cyan-400"/>
+    <path d="m324.08 485.3h119.92a17.75 17.75 0 0 0 17.75-17.75v-63.66h-168.69v50.38a31 31 0 0 0 31.02 31.03z" class="fill-gray-900" />
+    <path d="m402.39 434.79a19.48 19.48 0 0 0 -10.28 2.93l4.89 11.78-11.73-4.69a19.61 19.61 0 1 0 17.1-10z" class="fill-cyan-400" />
+    <path d="m466.65 208.49a4.89 4.89 0 0 1 -3.59-1.56l-24.06-25.93h-78.27a4.91 4.91 0 0 1 0-9.81h80.42a4.91 4.91 0 0 1 3.6 1.57l20.06 21.61 24.7-67a4.9 4.9 0 0 1 9.24.1l17.83 51.87 15.34-30a4.92 4.92 0 0 1 7.91-1.16l22.09 23h77.35a4.91 4.91 0 0 1 0 9.81h-79.44a4.87 4.87 0 0 1 -3.54-1.51l-18.77-19.48-17.46 34.09a4.91 4.91 0 0 1 -9-.64l-17.06-49.78-22.71 61.62a4.9 4.9 0 0 1 -3.63 3.11 5.31 5.31 0 0 1 -1.01.09z" class="fill-cyan-400"/>
+</svg>
+
diff --git a/docs2/src/env.d.ts b/docs2/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
diff --git a/docs2/src/icons/ArrowRight.astro b/docs2/src/icons/ArrowRight.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
diff --git a/docs2/src/icons/BookOpen.astro b/docs2/src/icons/BookOpen.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
diff --git a/docs2/src/icons/Code.astro b/docs2/src/icons/Code.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
diff --git a/docs2/src/icons/GitHub.astro b/docs2/src/icons/GitHub.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
diff --git a/docs2/src/icons/Info.astro b/docs2/src/icons/Info.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
diff --git a/docs2/src/icons/Terminal.astro b/docs2/src/icons/Terminal.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
diff --git a/docs2/src/icons/Zap.astro b/docs2/src/icons/Zap.astro
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.size ?? 24} height={Astro.props.size ?? 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>