diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md deleted file mode 100644 index a3793e1f..00000000 --- a/docs/content/1.getting-started/1.index.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Introduction -description: 'Fully styled and customizable components for Nuxt.' ---- - -Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces. - -Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts. - -## Features - -- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/) -- HMR support through Nuxt App Config -- Dark mode support -- Support for LTR and RTL languages -- Keyboard shortcuts -- Bundled icons -- Fully typed -- [Figma Kit](https://www.figma.com/community/file/1288455405058138934) - -## Credits - -- [nuxt/nuxt](https://github.com/nuxt/nuxt) -- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode) -- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss) -- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) -- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) -- [vueuse/vueuse](https://github.com/vueuse/vueuse) -- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) diff --git a/docs/content/1.getting-started/contributing.md b/docs/content/1.getting-started/contributing.md deleted file mode 100644 index 052d3e91..00000000 --- a/docs/content/1.getting-started/contributing.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Contributing -description: Learn how to contribute to Nuxt UI. -navigation: false ---- - -Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback. - -Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues). - -## Submitting a Pull Request (PR) - -### 1. Before You Start - -Check if there's an existing issue describing the problem or feature request you're working on. If there is, please leave a comment on the issue to let us know you're working on it. - -If there isn't, open a new issue to discuss the problem or feature. - -### 2. Local Development Setup - -To begin local development, follow these steps: - -1. Clone the `nuxt/ui` repository to your local machine: - -```bash -git clone https://github.com/nuxt/ui.git -``` - -2. Enable [Corepack](https://github.com/nodejs/corepack): - -```bash -corepack enable -``` - -3. Install dependencies: - -```bash -pnpm install -``` - -4. Generate type stubs: - -```bash -pnpm run dev:prepare -``` - -5. Configure your local development environment: - -- To work on the **documentation** located in the `docs` folder, run: - -```bash -pnpm run dev -``` - -- To test the components using **playground**, run: - -```bash -pnpm run play -``` - -#### IDE Setup - -We recommend using VS Code along with the ESLint extension. You can enable auto-fix and formatting when saving your code. Here's how: - -```json -{ - "editor.codeActionsOnSave": { - "source.fixAll": false, - "source.fixAll.eslint": true - } -} -``` - -You can also use the `lint` command: - -```bash -pnpm run lint # check for linting errors -pnpm run lint:fix # fix linting errors -``` - -#### No Prettier - -Since ESLint is already configured to format the code, there's no need for duplicating functionality with Prettier. - -If you have Prettier installed in your editor, we recommend disabling it to avoid conflicts. - -#### Type Checking - -We use TypeScript for type checking. You can use the `typecheck` command to check for type errors: - -```bash -pnpm run typecheck -``` - -### 3. Commit Conventions - -We use [Conventional Commits](https://www.conventionalcommits.org/) for commit messages, which allows a changelog to be auto-generated based on the commits. Please read the [guide](https://www.conventionalcommits.org/en/v1.0.0/#summary) through if you aren't familiar with it already. - -#### Note - -- `fix` and `feat` are for actual code changes (that might affect logic). For typo or document changes, use `docs` or `chore` instead: - -~~`fix: typo`~~ -> `docs: fix typo` - -- If you are working on a specific component, ensure that you specify the main scope of your commit in brackets. e.g. - -``` -feat(Alert): new component -chore(Table): improve accessibility -``` - -### 4. Making a Pull Request - -- Follow along the [instructions](https://github.com/nuxt/ui/blob/main/.github/PULL_REQUEST_TEMPLATE.md?plain=1) provided when creating a PR - -- Ensure your PR's title adheres to the [Conventional Commits](https://www.conventionalcommits.org/) since it will be used once the code is merged. - -- Multiple commits are fine; no need to rebase or force push. We'll use `Squash and Merge` when merging. - -- Ensure linting and make tests manually before submitting the PR. Avoid making unrelated changes. - -### 5. After You've Made a Pull Request - -We'll review it promptly. If assigned to a maintainer, they'll review it carefully. Ignore the red text; it's for tracking purposes. - -## Project Structure - -In this project, you'll find a variety of folders and files that serve different purposes. Here's an overview of the main ones: - -- **Documentation - `docs`** : - -The documentation is located in the `docs` folder. It's a Nuxt app that uses the `@nuxt/content` module to generate the documentation pages from Markdown files. Here's a breakdown of its structure: - -``` -docs/ -├── components/ -│ ├── examples/ # Components used in documentation as examples -│ └── themes/ # Components used in the examples page in the theming section -├── content/ # Documentation, separated into categories according to component types -│ ├── 1.getting-started/ -│ │ ├── 1.index.md -│ │ ├── 2.installation.md -│ │ ├── ... etc -│ ├── 2.elements/ # The category of components, which are elements -│ │ ├── 1.accordion.md # Docs for a single component (i.e., accordion) -│ │ ├── 2.alert.md -│ │ ├── ... etc -└── ... etc -``` - -- **Components - `src`** : - -The components are located in the `src` folder. It's separated into categories according to component types. Here's a breakdown of its structure: - -``` -src/ -├── runtime/ -│ ├── composables/ # Composable functions used in components -│ ├── components/ # Components folder, separated into categories according to component types -│ │ ├── data/ # The category of components, which are data related -│ │ │ ├── table.vue/ # Table component -│ │ │ ├── elements/ # Elements category -│ │ │ │ ├── ...etc/ -│ │ │ └── ... etc/ -│ │ ├── plugins/ # Plugins used in components -│ │ ├── utils/ # Utility functions used on the components page (e.g., lodash) -│ │ ├── types/ # Types used in components -│ │ │ ├── accordion.d.ts/ # [componentName].d.ts type used for single component -│ │ │ ├── avatar.d.ts/ -│ │ │ └── ... etc/ -│ │ ├── ui.config.ts/ # Configuration file used to apply styles to every component -├── colors.ts/ # Everything related to color functions (e.g., safelistByComponent, generateSafelist) -└── ... etc/ # Other files and folders -``` - -## Thanks - -Thank you again for being interested in this project! You are awesome! ❤️