docs(www): add astro installation guide (shadcn-ui#824)

suleymanbariseser · Jul 25, 2023 · b20d9bb · b20d9bb
1 parent b03c6d2
commit b20d9bb
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 0 deletions.
diff --git a/apps/www/config/docs.ts b/apps/www/config/docs.ts
@@ -103,6 +103,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/installation/gatsby",
           items: [],
         },
+        {
+          title: "Astro",
+          href: "/docs/installation/astro",
+          items: [],
+        },
         {
           title: "Manual",
           href: "/docs/installation/manual",

diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx
@@ -0,0 +1,136 @@
+---
+title: Astro
+description: Install and configure Astro.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new Astro project:
+
+```bash
+npm create astro@latest
+```
+
+### Configure your Astro project
+
+You will be asked a few questions to configure your project:
+
+```txt showLineNumbers
+- Where should we create your new project?
+./your-app-name
+- How would you like to start your new project?
+Choose a starter template (or Empty)
+- Install dependencies?
+Yes
+- Do you plan to write TypeScript?
+Yes
+- How strict should TypeScript be?
+Strict
+- Initialize a new git repository? (optional)
+Yes/No
+```
+
+### Add React to your project
+
+Install React using the Astro CLI:
+
+```bash
+npx astro add react
+```
+
+<Callout className="mt-4">
+
+Answer `Yes` to all the question prompted by the CLI when installing React.
+
+</Callout>
+
+### Add Tailwind CSS to your project
+
+Install Tailwind CSS using the Astro CLI:
+
+```bash
+npx astro add tailwind
+```
+
+<Callout className="mt-4">
+
+Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS.
+
+</Callout>
+
+### Edit tsconfig.json file
+
+Add the code below to the tsconfig.json file to resolve paths:
+
+```json {2-7} showLineNumbers
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
+```
+
+### Run the CLI
+
+Run the `shadcn-ui` init command to setup your project:
+
+```bash
+npx shadcn-ui@latest init
+```
+
+### Configure components.json
+
+You will be asked a few questions to configure `components.json`:
+
+```txt showLineNumbers
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › › ./src/styles/globals.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.cjs
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no
+```
+
+### Import the globals.css file
+
+Import the `globals.css` file in the `src/index.astro` file:
+
+```ts {2} showLineNumbers
+---
+import '@/styles/globals.css'
+---
+```
+
+### That's it
+
+You can now start adding components to your project.
+
+```bash
+npx shadcn-ui@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```astro {2,10} showLineNumbers
+---
+import { Button } from "@/components/ui/button"
+---
+
+<html lang="en">
+	<head>
+		<title>Astro</title>
+	</head>
+	<body>
+		<Button>Hello World</Button>
+	</body>
+</html>
+```
+
+</Steps>
diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx
@@ -56,6 +56,22 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Gatsby</p>
   </LinkedCard>
+  <LinkedCard href="/docs/installation/astro">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Astro</title>
+      <path
+        d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
+        fill="currentColor"
+      />
+    </svg>
+    <p className="font-medium mt-2">Astro</p>
+  </LinkedCard>
   <LinkedCard href="/docs/installation/manual">
     <svg
       role="img"