docs(www): add installation guide for Gatsby (#822)

* docs: add installation guide for Gatsby

* docs: add  PR review changes

apps/www/config/docs.ts

@@ -98,6 +98,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/installation/remix",
           items: [],
         },
+        {
+          title: "Gatsby",
+          href: "/docs/installation/gatsby",
+          items: [],
+        },
         {
           title: "Manual",
           href: "/docs/installation/manual",

apps/www/content/docs/installation/gatsby.mdx

@@ -0,0 +1,118 @@
+---
+title: Gatsby
+description: Install and configure Gatsby.
+---
+
+<Steps>
+
+### Create project
+
+Start by creating a new Gatsby project using `Gatsby CLI`:
+
+```bash
+npx gatsby new
+```
+
+### Configure your Gatsby project to use TypeScript and Tailwind CSS
+
+You will be asked a few questions to configure your project:
+
+```txt showLineNumbers
+✔ What would you like to call your site?
+· your-app-name
+✔ What would you like to name the folder where your site will be created?
+· your-app-name
+✔ Will you be using JavaScript or TypeScript?
+· TypeScript
+✔ Will you be using a CMS?
+· Choose whatever you want
+✔ Would you like to install a styling system?
+· Tailwind CSS
+✔ Would you like to install additional features with other plugins?
+· Choose whatever you want
+✔ Shall we do this? (Y/n) · Yes
+```
+
+### Edit tsconfig.json file
+
+Add the code below to the tsconfig.json file to resolve paths:
+
+```ts {4-9} showLineNumbers
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+    // ...
+  }
+}
+```
+
+### Create gatsby-node.js file
+
+Create a `gatsby-node.js` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node.js` file so your app can resolve paths:
+
+```js
+const path = require("path")
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        "@/components": path.resolve(__dirname, "src/components"),
+        "@/lib/utils": path.resolve(__dirname, "src/lib/utils"),
+      },
+    },
+  })
+}
+```
+
+### 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.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no
+```
+
+### 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:
+
+```tsx {1,6} showLineNumbers
+import { Button } from "@/components/ui"
+
+export default function Home() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+```
+
+</Steps>

apps/www/content/docs/installation/index.mdx

@@ -43,6 +43,19 @@ description: How to install dependencies and structure your app.
     </svg>
     <p className="font-medium mt-2">Remix</p>
   </LinkedCard>
+  <LinkedCard href="/docs/installation/gatsby">
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="w-10 h-10"
+      fill="currentColor"
+    >
+      <title>Gatsby</title>
+      <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 2.571c3.171 0 5.915 1.543 7.629 3.858l-1.286 1.115C16.886 5.572 14.571 4.286 12 4.286c-3.343 0-6.171 2.143-7.286 5.143l9.857 9.857c2.486-.857 4.373-3 4.973-5.572h-4.115V12h6c0 4.457-3.172 8.228-7.372 9.17L2.83 9.944C3.772 5.743 7.543 2.57 12 2.57zm-9.429 9.6l9.344 9.258c-2.4-.086-4.801-.943-6.601-2.743-1.8-1.8-2.743-4.201-2.743-6.515z" />
+    </svg>
+    <p className="font-medium mt-2">Gatsby</p>
+  </LinkedCard>
   <LinkedCard href="/docs/installation/manual">
     <svg
       role="img"