From eee7ce68798b9345cb969942cd279c3acc054ad6 Mon Sep 17 00:00:00 2001 From: Christoffer Hallas Date: Thu, 29 Jun 2023 09:27:03 -0400 Subject: [PATCH] docs(www): add remix and tabbed installation docs (#753) * docs: add react with vite installation guide * refactor(docs): move Ract with vite page into installation.mdx as tab * fix(docs): remove classnames and wrapper divs * fix(docs): update tsconfig file path to default @ * feat: added remix installation docs * feat: added tabbed installation docs * fix: remove log statement * fix: cleaned up, restored usage notice, removed vite for now * fix: moved installation.mdx into folder --------- Co-authored-by: Samuel Adebayo Co-authored-by: shadcn --- apps/www/components/framework-docs.tsx | 22 +++++ apps/www/components/mdx-components.tsx | 7 ++ apps/www/content/docs/installation/index.mdx | 27 ++++++ .../nextjs.mdx} | 16 +--- apps/www/content/docs/installation/remix.mdx | 90 +++++++++++++++++++ 5 files changed, 148 insertions(+), 14 deletions(-) create mode 100644 apps/www/components/framework-docs.tsx create mode 100644 apps/www/content/docs/installation/index.mdx rename apps/www/content/docs/{installation.mdx => installation/nextjs.mdx} (83%) create mode 100644 apps/www/content/docs/installation/remix.mdx diff --git a/apps/www/components/framework-docs.tsx b/apps/www/components/framework-docs.tsx new file mode 100644 index 0000000000..2bebd69616 --- /dev/null +++ b/apps/www/components/framework-docs.tsx @@ -0,0 +1,22 @@ +"use client" + +import * as React from "react" +import { allDocs } from "contentlayer/generated" + +import { Mdx } from "./mdx-components" + +interface FrameworkDocsProps extends React.HTMLAttributes { + data: string +} + +export function FrameworkDocs({ ...props }: FrameworkDocsProps) { + const frameworkDoc = allDocs.find( + (doc) => doc.slug === `/docs/installation/${props.data}` + ) + + if (!frameworkDoc) { + return null + } + + return +} diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx index 3cbae0a1e2..6e0a6a65a3 100644 --- a/apps/www/components/mdx-components.tsx +++ b/apps/www/components/mdx-components.tsx @@ -14,6 +14,7 @@ import { ComponentExample } from "@/components/component-example" import { ComponentPreview } from "@/components/component-preview" import { ComponentSource } from "@/components/component-source" import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button" +import { FrameworkDocs } from "@/components/framework-docs" import { StyleWrapper } from "@/components/style-wrapper" import { Accordion, @@ -284,6 +285,12 @@ const components = { {...props} /> ), + FrameworkDocs: ({ + className, + ...props + }: React.ComponentProps) => ( + + ), } interface MdxProps { diff --git a/apps/www/content/docs/installation/index.mdx b/apps/www/content/docs/installation/index.mdx new file mode 100644 index 0000000000..3c7fe0e783 --- /dev/null +++ b/apps/www/content/docs/installation/index.mdx @@ -0,0 +1,27 @@ +--- +title: Installation +description: How to install dependencies and structure your app. +--- + + + + Next.js + Remix + + + + + + + + + +That's it. You can now start adding components to your project. + +```bash +npx shadcn-ui@latest add +``` + +## Other frameworks + +I'm looking for help writing guides for other frameworks. Help me write those guides by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation/nextjs.mdx similarity index 83% rename from apps/www/content/docs/installation.mdx rename to apps/www/content/docs/installation/nextjs.mdx index 190b16acc4..68045bedd4 100644 --- a/apps/www/content/docs/installation.mdx +++ b/apps/www/content/docs/installation/nextjs.mdx @@ -1,10 +1,8 @@ --- -title: Installation -description: How to install dependencies and structure your app. +title: Next.js +description: Learn how to install and use with Next.js. --- -## Next.js - ### Create project @@ -73,13 +71,3 @@ Here's how I structure my app. I use Next.js, but this is not required. - The `styles` folder contains the global CSS. - -That's it. You can now start adding components to your project. - -```bash -npx shadcn-ui@latest add -``` - -## Other frameworks - -I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui). diff --git a/apps/www/content/docs/installation/remix.mdx b/apps/www/content/docs/installation/remix.mdx new file mode 100644 index 0000000000..9754111dca --- /dev/null +++ b/apps/www/content/docs/installation/remix.mdx @@ -0,0 +1,90 @@ +--- +title: Remix +description: Learn how to install and use with Remix. +--- + + + +### Create project + +Start by creating a new Remix project using `create-remix`: + +```bash +npx create-remix@latest my-app +``` + +### 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? › › app/tailwind.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 +``` + +### App structure + +- Place the UI components in the `app/components/ui` folder. +- Your own components can be placed in the `app/components` folder. +- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where I define the `cn` helper. +- The `app/tailwind.css` file contains the global CSS. + +### Enable Tailwind and PostCSS + +We have to install tailwindcss and autoprefixer. + +```bash +pnpm add -D tailwindcss@latest autoprefixer@latest +``` + +Then we create a `postcss.config.js` file: + +```js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + +And finally we add the following to our `remix.config.js` file: + +```js {4-5} +/** @type {import('@remix-run/dev').AppConfig} */ +module.exports = { + ... + tailwind: true, + postcss: true, + ... +}; +``` + +### Include tailwind.css in your Remix app + +In your `app/root.tsx` file, import the `tailwind.css` file: + +```js {1, 4} +import styles from "./tailwind.css" + +export const links: LinksFunction = () => [ + { rel: "stylesheet", href: styles }, + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +] +``` + +