To transition to the Starlight documentation framework, we need to update the configuration, documentation, and dependencies of the project. This involves modifying the next.config.mjs, README.md, and package.json files to integrate Starlight seamlessly.
How to implement
1. Update next.config.mjs
We need to configure the Next.js project to work with the Starlight documentation framework. This involves adding custom settings specific to Starlight.
We need to update the README.md to include information about the new documentation framework, how to install it, and how to use it.
Updated README.md
# UI Buatan
[shadcn-ui v2.0](https://ui.shadcn.com/docs/changelog) introduced the possibility of fetching components from custom
registries, that's why this components book was born.
## New Documentation Framework: Starlight
We have transitioned to using the Starlight documentation framework to improve the documentation experience. Starlight offers better performance, enhanced features, and a more user-friendly interface.
### Installation Instructions
To set up the new documentation framework, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-repo/ui-buatan.git
cd ui-buatan
Install the dependencies:
pnpm install
Build the documentation:
pnpm build:docs
Run the documentation locally:
pnpm dev:docs
Usage Instructions
To add new documentation or update existing ones, follow these steps:
Navigate to the docs folder:
cd docs
Add or update markdown files as needed. For example, to add a new component documentation:
# New Component
## Overview
Description of the new component.
## Usage
```jsx
import { NewComponent } from 'ui-buatan';
<NewComponent />
After making changes, rebuild the documentation:
pnpm build:docs
Changes from Previous Framework
Structure: The documentation files are now located in the docs folder.
Commands: New commands have been introduced for building and running the documentation (pnpm build:docs and pnpm dev:docs).
Features: Starlight offers enhanced features such as better search functionality, improved navigation, and more customization options.
Components
As did by shadcn-ui, components are organized by styles under the registry folder.
But I modify the structure, files are structured as follows:
As did for the button, add your component under the components
folder (lib for lib and hooks for hook).
Write a story on registry/<type>/<scope>/<name>.stories.tsx for components and registry/<type>/<name>.stories.tsx
for hook and lib (e.g. button.stories.tsx)
Run pnpm build:registry to generate the registry file.
New Dependency: Added "starlight": "^1.0.0" to the dependencies section.
Updated Scripts: Modified the dev:docs and build:docs scripts to use Starlight commands.
By following these steps, you will successfully transition to the Starlight documentation framework, ensuring that your project is up-to-date with the latest documentation tools and practices.
Changes on next.config.mjs
To address the task of updating the `next.config.mjs` file for the new documentation framework, follow these steps:
1. **Identify Required Configuration Settings**: Determine the specific settings and configurations required by the new documentation framework (Starlight in this case). This might include custom paths, plugins, or other framework-specific settings.
2. **Update the Configuration File**: Modify the `next.config.mjs` file to include these settings. This might involve adding new properties to the `nextConfig` object or importing and using plugins.
Here is an example of how you might update the `next.config.mjs` file for a hypothetical Starlight documentation framework:
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
// Enable React Strict Mode
reactStrictMode: true,
// Custom settings for Starlight documentation framework
starlight: {
// Example setting: base path for documentation
basePath: '/docs',
// Example setting: enable syntax highlighting
syntaxHighlighting: true,
// Example setting: custom theme configuration
theme: {
primaryColor: '#0070f3',
secondaryColor: '#1a1a1a',
},
},
// Additional Next.js settings if required
webpack: (config, { isServer }) => {
// Example: custom webpack configuration
if (!isServer) {
config.resolve.fallback.fs = false;
}
return config;
},
};
export default nextConfig;
```
### Steps to Implement the Changes:
1. **Research Starlight Documentation**: Look up the official documentation for the Starlight framework to understand the required configuration settings.
2. **Modify `next.config.mjs`**: Add the necessary settings to the `nextConfig` object as shown in the example above.
3. **Test the Configuration**: After updating the configuration file, run your application to ensure that the new settings are correctly applied and that the documentation framework works as expected.
If the Starlight framework has specific plugins or additional configuration steps, make sure to include those as well.
### Conclusion
By updating the `next.config.mjs` file with the necessary settings for the Starlight documentation framework, you ensure that the new framework is properly integrated into your project. This will enable you to leverage the features and benefits of Starlight for your documentation needs.
Changes on README.md
To update the `README.md` file to include information about the new documentation framework, follow these steps:
1. **Introduction to the New Framework**: Add a section that introduces the new documentation framework, Starlight, and briefly explain why the change was made.
2. **Installation Instructions**: Provide detailed steps on how to install and set up the new documentation framework.
3. **Usage Instructions**: Explain how to use the new framework, including how to add new documentation, how to navigate the documentation, and any specific commands or scripts that need to be run.
4. **Changes from Previous Framework**: Highlight any significant changes from the previous documentation framework to the new one, so users are aware of what has changed.
Here is a proposed update to the `README.md` file:
```markdown
# UI Buatan
[shadcn-ui v2.0](https://ui.shadcn.com/docs/changelog) introduced the possibility of fetching components from custom
registries, that's why this components book was born.
## New Documentation Framework: Starlight
We have transitioned to using the Starlight documentation framework to improve the documentation experience. Starlight offers better performance, enhanced features, and a more user-friendly interface.
### Installation Instructions
To set up the new documentation framework, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/your-repo/ui-buatan.git
cd ui-buatan
```
2. Install the dependencies:
```bash
pnpm install
```
3. Build the documentation:
```bash
pnpm build:docs
```
4. Run the documentation locally:
```bash
pnpm dev:docs
```
### Usage Instructions
To add new documentation or update existing ones, follow these steps:
1. Navigate to the `docs` folder:
```bash
cd docs
```
2. Add or update markdown files as needed. For example, to add a new component documentation:
```markdown
# New Component
## Overview
Description of the new component.
## Usage
```jsx
import { NewComponent } from 'ui-buatan';
```
```
3. After making changes, rebuild the documentation:
```bash
pnpm build:docs
```
### Changes from Previous Framework
- **Structure**: The documentation files are now located in the `docs` folder.
- **Commands**: New commands have been introduced for building and running the documentation (`pnpm build:docs` and `pnpm dev:docs`).
- **Features**: Starlight offers enhanced features such as better search functionality, improved navigation, and more customization options.
## Components
As did by [shadcn-ui](https://github.com/shadcn-ui/ui), components are organized by styles under the `registry` folder.
But I modify the structure, files are structured as follows:
```bash
registry
├── components
├──── atoms
├──── molecules
├──── organisms
├──── templates
├──── pages
├── hooks
└── lib
```
## Adding new components.
1. As did for the [button](components/atoms/button.tsx), add your component under the [components](components)
folder ([lib](lib) for lib and [hooks](hooks) for hook).
2. Write a story on `registry///.stories.tsx` for components and `registry//.stories.tsx`
for hook and lib (e.g. [button.stories.tsx](registry/components/atoms/button.stories.tsx))
3. Run `pnpm build:registry` to generate the registry file.
## Installing custom components
You can install your custom components by running
```bash
npx shadcn-ui@latest add {.storybook-url}/r/{component-id}.json
```
## Running the app locally
This app simple homepage was thought for simplify the process of building the registry url.
In order to see it in action locally, run `pnpm dev` and navigate to `http://localhost:6006`.
## Deploy it on Vercel
[](https://vercel.com/new/clone?repository-url=https://github.com/ilyichv/shadcn-registry-template)
```
This update ensures that users are informed about the new documentation framework, how to set it up, and how to use it effectively.
Changes on package.json
To update the `package.json` file for the new documentation framework, follow these steps:
1. **Identify New Dependencies**: Determine which new dependencies are required for the Starlight documentation framework. This information can typically be found in the Starlight documentation or setup guide.
2. **Add New Dependencies**: Add these new dependencies to the `dependencies` or `devDependencies` section of the `package.json` file.
3. **Update Scripts**: Modify the existing scripts or add new scripts to handle the build and development processes for the new documentation framework.
Here is a concrete example of how you might update the `package.json` file:
### Updated `package.json`
```json
{
"name": "shadcn-registry-starter",
"version": "0.1.0",
"license": "MIT",
"type": "module",
"author": {
"name": "gemboran",
"url": "https://ui.buatan.id"
},
"scripts": {
"dev": "pnpm build:registry && pnpm dev:docs",
"dev:docs": "starlight dev", // Updated script for Starlight
"build": "pnpm build:registry && pnpm build:docs",
"build:registry": "tsx --tsconfig ./tsconfig.scripts.json registry/build.mts",
"build:docs": "starlight build -o dist", // Updated script for Starlight
"lint": "pnpm biome check .",
"ui": "pnpm dlx shadcn"
},
"packageManager": "pnpm@9.5.0",
"dependencies": {
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"fast-glob": "^3.3.2",
"fs-extra": "^11.2.0",
"lodash.template": "^4.5.0",
"lucide-react": "^0.438.0",
"next": "14.2.7",
"next-themes": "^0.3.0",
"prism-react-renderer": "^2.4.0",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
"ts-morph": "^23.0.0",
"zod": "^3.23.8",
"starlight": "^1.0.0" // New dependency for Starlight
},
"devDependencies": {
"@biomejs/biome": "1.8.3",
"@chromatic-com/storybook": "^1.9.0",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-onboarding": "^8.2.9",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/addon-themes": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/manager-api": "^8.2.9",
"@storybook/nextjs": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/theming": "^8.2.9",
"@types/fs-extra": "^11.0.4",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.7",
"eslint-plugin-storybook": "^0.8.0",
"postcss": "^8",
"rimraf": "^6.0.1",
"storybook": "^8.2.9",
"tailwindcss": "^3.4.1",
"tsx": "^4.19.0",
"typescript": "^5"
}
}
```
### Explanation:
1. **New Dependency**: Added `"starlight": "^1.0.0"` to the `dependencies` section.
2. **Updated Scripts**: Modified the `dev:docs` and `build:docs` scripts to use Starlight commands.
Make sure to replace the version numbers and commands with the actual ones required by the Starlight documentation framework. This example assumes hypothetical commands and version numbers.
Potential solution
To transition to the Starlight documentation framework, we need to update the configuration, documentation, and dependencies of the project. This involves modifying the
next.config.mjs,README.md, andpackage.jsonfiles to integrate Starlight seamlessly.How to implement
1. Update
next.config.mjsWe need to configure the Next.js project to work with the Starlight documentation framework. This involves adding custom settings specific to Starlight.
Updated
next.config.mjs2. Update
README.mdWe need to update the
README.mdto include information about the new documentation framework, how to install it, and how to use it.Updated
README.mdInstall the dependencies:
Build the documentation:
Run the documentation locally:
Usage Instructions
To add new documentation or update existing ones, follow these steps:
Navigate to the
docsfolder:Add or update markdown files as needed. For example, to add a new component documentation:
After making changes, rebuild the documentation:
Changes from Previous Framework
docsfolder.pnpm build:docsandpnpm dev:docs).Components
As did by shadcn-ui, components are organized by styles under the
registryfolder. But I modify the structure, files are structured as follows:Adding new components.
registry/<type>/<scope>/<name>.stories.tsxfor components andregistry/<type>/<name>.stories.tsxfor hook and lib (e.g. button.stories.tsx)pnpm build:registryto generate the registry file.Installing custom components
You can install your custom components by running
Running the app locally
This app simple homepage was thought for simplify the process of building the registry url.
In order to see it in action locally, run
pnpm devand navigate tohttp://localhost:6006.Deploy it on Vercel
Explanation:
"starlight": "^1.0.0"to thedependenciessection.dev:docsandbuild:docsscripts to use Starlight commands.By following these steps, you will successfully transition to the Starlight documentation framework, ensuring that your project is up-to-date with the latest documentation tools and practices.
Click here to create a Pull Request with the proposed solution
Files used for this task:
Changes on next.config.mjs
To address the task of updating the `next.config.mjs` file for the new documentation framework, follow these steps: 1. **Identify Required Configuration Settings**: Determine the specific settings and configurations required by the new documentation framework (Starlight in this case). This might include custom paths, plugins, or other framework-specific settings. 2. **Update the Configuration File**: Modify the `next.config.mjs` file to include these settings. This might involve adding new properties to the `nextConfig` object or importing and using plugins. Here is an example of how you might update the `next.config.mjs` file for a hypothetical Starlight documentation framework: ```javascript /** @type {import('next').NextConfig} */ const nextConfig = { // Enable React Strict Mode reactStrictMode: true, // Custom settings for Starlight documentation framework starlight: { // Example setting: base path for documentation basePath: '/docs', // Example setting: enable syntax highlighting syntaxHighlighting: true, // Example setting: custom theme configuration theme: { primaryColor: '#0070f3', secondaryColor: '#1a1a1a', }, }, // Additional Next.js settings if required webpack: (config, { isServer }) => { // Example: custom webpack configuration if (!isServer) { config.resolve.fallback.fs = false; } return config; }, }; export default nextConfig; ``` ### Steps to Implement the Changes: 1. **Research Starlight Documentation**: Look up the official documentation for the Starlight framework to understand the required configuration settings. 2. **Modify `next.config.mjs`**: Add the necessary settings to the `nextConfig` object as shown in the example above. 3. **Test the Configuration**: After updating the configuration file, run your application to ensure that the new settings are correctly applied and that the documentation framework works as expected. If the Starlight framework has specific plugins or additional configuration steps, make sure to include those as well. ### Conclusion By updating the `next.config.mjs` file with the necessary settings for the Starlight documentation framework, you ensure that the new framework is properly integrated into your project. This will enable you to leverage the features and benefits of Starlight for your documentation needs.Changes on README.md
To update the `README.md` file to include information about the new documentation framework, follow these steps: 1. **Introduction to the New Framework**: Add a section that introduces the new documentation framework, Starlight, and briefly explain why the change was made. 2. **Installation Instructions**: Provide detailed steps on how to install and set up the new documentation framework. 3. **Usage Instructions**: Explain how to use the new framework, including how to add new documentation, how to navigate the documentation, and any specific commands or scripts that need to be run. 4. **Changes from Previous Framework**: Highlight any significant changes from the previous documentation framework to the new one, so users are aware of what has changed. Here is a proposed update to the `README.md` file: ```markdown # UI Buatan [shadcn-ui v2.0](https://ui.shadcn.com/docs/changelog) introduced the possibility of fetching components from custom registries, that's why this components book was born. ## New Documentation Framework: Starlight We have transitioned to using the Starlight documentation framework to improve the documentation experience. Starlight offers better performance, enhanced features, and a more user-friendly interface. ### Installation Instructions To set up the new documentation framework, follow these steps: 1. Clone the repository: ```bash git clone https://github.com/your-repo/ui-buatan.git cd ui-buatan ``` 2. Install the dependencies: ```bash pnpm install ``` 3. Build the documentation: ```bash pnpm build:docs ``` 4. Run the documentation locally: ```bash pnpm dev:docs ``` ### Usage Instructions To add new documentation or update existing ones, follow these steps: 1. Navigate to the `docs` folder: ```bash cd docs ``` 2. Add or update markdown files as needed. For example, to add a new component documentation: ```markdown # New Component ## Overview Description of the new component. ## Usage ```jsx import { NewComponent } from 'ui-buatan';Changes on package.json
To update the `package.json` file for the new documentation framework, follow these steps: 1. **Identify New Dependencies**: Determine which new dependencies are required for the Starlight documentation framework. This information can typically be found in the Starlight documentation or setup guide. 2. **Add New Dependencies**: Add these new dependencies to the `dependencies` or `devDependencies` section of the `package.json` file. 3. **Update Scripts**: Modify the existing scripts or add new scripts to handle the build and development processes for the new documentation framework. Here is a concrete example of how you might update the `package.json` file: ### Updated `package.json` ```json { "name": "shadcn-registry-starter", "version": "0.1.0", "license": "MIT", "type": "module", "author": { "name": "gemboran", "url": "https://ui.buatan.id" }, "scripts": { "dev": "pnpm build:registry && pnpm dev:docs", "dev:docs": "starlight dev", // Updated script for Starlight "build": "pnpm build:registry && pnpm build:docs", "build:registry": "tsx --tsconfig ./tsconfig.scripts.json registry/build.mts", "build:docs": "starlight build -o dist", // Updated script for Starlight "lint": "pnpm biome check .", "ui": "pnpm dlx shadcn" }, "packageManager": "pnpm@9.5.0", "dependencies": { "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "fast-glob": "^3.3.2", "fs-extra": "^11.2.0", "lodash.template": "^4.5.0", "lucide-react": "^0.438.0", "next": "14.2.7", "next-themes": "^0.3.0", "prism-react-renderer": "^2.4.0", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7", "ts-morph": "^23.0.0", "zod": "^3.23.8", "starlight": "^1.0.0" // New dependency for Starlight }, "devDependencies": { "@biomejs/biome": "1.8.3", "@chromatic-com/storybook": "^1.9.0", "@storybook/addon-essentials": "^8.2.9", "@storybook/addon-interactions": "^8.2.9", "@storybook/addon-links": "^8.2.9", "@storybook/addon-onboarding": "^8.2.9", "@storybook/addon-styling-webpack": "^1.0.0", "@storybook/addon-themes": "^8.2.9", "@storybook/blocks": "^8.2.9", "@storybook/manager-api": "^8.2.9", "@storybook/nextjs": "^8.2.9", "@storybook/react": "^8.2.9", "@storybook/test": "^8.2.9", "@storybook/theming": "^8.2.9", "@types/fs-extra": "^11.0.4", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.7", "eslint-plugin-storybook": "^0.8.0", "postcss": "^8", "rimraf": "^6.0.1", "storybook": "^8.2.9", "tailwindcss": "^3.4.1", "tsx": "^4.19.0", "typescript": "^5" } } ``` ### Explanation: 1. **New Dependency**: Added `"starlight": "^1.0.0"` to the `dependencies` section. 2. **Updated Scripts**: Modified the `dev:docs` and `build:docs` scripts to use Starlight commands. Make sure to replace the version numbers and commands with the actual ones required by the Starlight documentation framework. This example assumes hypothetical commands and version numbers.