= (e) => e.preventDefault()
7 |
--------------------------------------------------------------------------------
/src/component.tsx:
--------------------------------------------------------------------------------
1 | import type { PropsWithChildren } from 'react'
2 |
3 | export const Button = ({ children }: PropsWithChildren) => (
4 |
5 | {children}
6 |
7 | )
8 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | import type { FC, PropsWithChildren } from 'react'
2 |
3 | declare global {
4 | export type Component = FC
5 | export type ComponentType = {
6 | className?: string
7 | } & PropsWithChildren &
8 | P
9 | }
10 | export {}
11 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 |
3 | const twConfig: Config = {
4 | content: ['./src/**/*.{js,jsx,ts,tsx}'],
5 | darkMode: ['class', '[data-theme="dark"]'],
6 | corePlugins: {
7 | preflight: false,
8 | },
9 | }
10 | export default twConfig
11 |
--------------------------------------------------------------------------------
/demo/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google"
2 |
3 | export const fontSans = FontSans({
4 | subsets: ["latin"],
5 | variable: "--font-sans",
6 | })
7 |
8 | export const fontMono = FontMono({
9 | subsets: ["latin"],
10 | variable: "--font-mono",
11 | })
12 |
--------------------------------------------------------------------------------
/demo/app/index.css:
--------------------------------------------------------------------------------
1 | .prose {
2 | @apply !w-full !max-w-full;
3 |
4 | h1 {
5 | @apply text-2xl font-bold;
6 | }
7 |
8 | h2 {
9 | @apply text-xl font-semibold;
10 | }
11 |
12 | h3,
13 | h4 {
14 | @apply text-lg font-medium;
15 | }
16 |
17 | code {
18 | @apply !font-mono font-bold;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demo/app/(mdx)/layout.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/display-name */
2 | /* eslint-disable import/no-anonymous-default-export */
3 |
4 | import type { PropsWithChildren } from "react"
5 |
6 | export default ({ children }: PropsWithChildren) => (
7 | <>
8 |
{children}
9 |
10 | )
11 |
--------------------------------------------------------------------------------
/demo/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "tailwind": {
5 | "config": "tailwind.config.js",
6 | "css": "app/globals.css",
7 | "baseColor": "slate",
8 | "cssVariables": true
9 | },
10 | "rsc": false,
11 | "aliases": {
12 | "utils": "@/lib/utils",
13 | "components": "@/components"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
5 | import { type ThemeProviderProps } from "next-themes/dist/types"
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return {children}
9 | }
10 |
--------------------------------------------------------------------------------
/demo/config/site.ts:
--------------------------------------------------------------------------------
1 | export type SiteConfig = typeof siteConfig
2 |
3 | export const siteConfig = {
4 | name: "React Tw Component",
5 | description:
6 | "Beautifully designed React Component built with Radix UI and Tailwind CSS.",
7 | mainNav: [],
8 | links: {
9 | twitter: "https://twitter.com/__oQuery",
10 | github: "https://github.com/innei-template/rc-library-template",
11 | docs: "https://ui.shadcn.com",
12 | },
13 | }
14 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "enabled": false,
3 | "extends": [
4 | "config:base",
5 | ":semanticCommits",
6 | ":automergePatch",
7 | ":automergeTypes",
8 | ":automergeTesters",
9 | ":automergeLinters",
10 | ":automergeMinor",
11 | ":rebaseStalePrs"
12 | ],
13 | "packageRules": [
14 | {
15 | "updateTypes": [
16 | "major"
17 | ],
18 | "labels": [
19 | "UPDATE-MAJOR"
20 | ]
21 | }
22 | ]
23 | }
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | jobs:
9 | release:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v3
13 | with:
14 | fetch-depth: 0
15 |
16 | - uses: actions/setup-node@v3
17 | with:
18 | node-version: 18.x
19 |
20 | - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
21 | env:
22 | GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
23 |
--------------------------------------------------------------------------------
/demo/next.config.mjs:
--------------------------------------------------------------------------------
1 | import withMDX from "@next/mdx"
2 | import remarkFrontmatter from "remark-frontmatter"
3 | import remarkGfm from "remark-gfm"
4 | import remarkMdxFrontmatter from "remark-mdx-frontmatter"
5 |
6 | /** @type {import('next').NextConfig} */
7 | const nextConfig = {
8 | reactStrictMode: false,
9 | pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
10 | }
11 |
12 | export default withMDX({
13 | options: {
14 | remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, remarkGfm],
15 | },
16 | })(nextConfig)
17 |
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 |
11 | # next.js
12 | .next/
13 | out/
14 | build
15 |
16 | # misc
17 | .DS_Store
18 | *.pem
19 |
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .pnpm-debug.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
32 | # turbo
33 | .turbo
34 |
35 | .contentlayer
36 | .env
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # next-template
2 |
3 | A Next.js 13 template for building apps with Radix UI and Tailwind CSS.
4 |
5 | ## Usage
6 |
7 | ```bash
8 | npx create-next-app -e https://github.com/shadcn/next-template
9 | ```
10 |
11 | ## Features
12 |
13 | - Next.js 13 App Directory
14 | - Radix UI Primitives
15 | - Tailwind CSS
16 | - Icons from [Lucide](https://lucide.dev)
17 | - Dark mode with `next-themes`
18 | - Tailwind CSS class sorting, merging and linting.
19 |
20 | ## License
21 |
22 | Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
23 |
--------------------------------------------------------------------------------
/demo/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/components/layout/sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { buildFsTree } from "@/lib/fs"
2 |
3 | import { LeftAsideLink } from "./LeftAsideLink"
4 |
5 | export const LeftAside = async ({ asWeight }: { asWeight?: boolean }) => {
6 | const tree = buildFsTree()
7 |
8 | return (
9 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/demo/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Moon, Sun } from "lucide-react"
5 | import { useTheme } from "next-themes"
6 |
7 | import { Button } from "@/components/ui/button"
8 |
9 | export function ThemeToggle() {
10 | const { setTheme, theme } = useTheme()
11 |
12 | return (
13 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/demo/components/layout/LeftAsideLink.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { memo } from "react"
4 | import Link from "next/link"
5 | import { usePathname } from "next/navigation"
6 | import { clsxm } from "~/lib/helper"
7 |
8 | export const LeftAsideLink = memo(
9 | ({ title, path }: { title: string; path: string }) => {
10 | const pathname = usePathname()
11 |
12 | return (
13 |
21 | {title}
22 |
23 | )
24 | }
25 | )
26 |
27 | LeftAsideLink.displayName = "LeftAsideLink"
28 |
--------------------------------------------------------------------------------
/demo/mdx-components.tsx:
--------------------------------------------------------------------------------
1 | import type { MDXComponents } from "mdx/types"
2 | import { getHighlighter } from "shiki"
3 |
4 | const highlighter = await getHighlighter({
5 | themes: ["github-dark"],
6 | langs: ["javascript", "typescript", "json", "jsx", "tsx", "shell"],
7 | })
8 |
9 | export function useMDXComponents(components: MDXComponents): MDXComponents {
10 | return {
11 | ...components,
12 | pre: (props) => {
13 | const language =
14 | (props.children as any).props.className?.replace(/language-/, "") ||
15 | "text"
16 |
17 | const rawCode = (props.children as any).props.children
18 | return (
19 |
27 | )
28 | },
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/demo/app/hero.tsx:
--------------------------------------------------------------------------------
1 | import { Button, buttonVariants } from "@/components/ui/button"
2 |
3 | export const Hero = () => {
4 | return (
5 |
6 |
7 |
8 |
9 | Beautifully designed React Component{" "}
10 |
11 | built with Radix UI and Tailwind CSS.
12 |
13 |
14 | A demo page.
15 |
16 |
17 |
19 |
20 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/demo/prettier.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('prettier').Config} */
2 | module.exports = {
3 | endOfLine: "lf",
4 | semi: false,
5 | singleQuote: false,
6 | tabWidth: 2,
7 | trailingComma: "es5",
8 | importOrder: [
9 | "^(react/(.*)$)|^(react$)",
10 | "^(next/(.*)$)|^(next$)",
11 | "",
12 | "",
13 | "^types$",
14 | "^@/types/(.*)$",
15 | "^@/config/(.*)$",
16 | "^@/lib/(.*)$",
17 | "^@/hooks/(.*)$",
18 | "^@/components/ui/(.*)$",
19 | "^@/components/(.*)$",
20 | "^@/styles/(.*)$",
21 | "^@/app/(.*)$",
22 | "",
23 | "^[./]",
24 | ],
25 | importOrderSeparation: false,
26 | importOrderSortSpecifiers: true,
27 | importOrderBuiltinModulesToTop: true,
28 | importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
29 | importOrderMergeDuplicateImports: true,
30 | importOrderCombineTypeAndValueImports: true,
31 | plugins: ["@ianvs/prettier-plugin-sort-imports"],
32 | }
33 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "baseUrl": "./src",
5 | "rootDir": "./src",
6 | "outDir": "/tmp",
7 | "jsx": "preserve",
8 | "target": "ES2020",
9 | "lib": [
10 | "ESNext",
11 | "DOM",
12 | "DOM.Iterable"
13 | ],
14 | "module": "ES2022",
15 | "moduleResolution": "Bundler",
16 | "strict": true,
17 | "resolveJsonModule": true,
18 | "esModuleInterop": true,
19 | "skipLibCheck": true,
20 | "forceConsistentCasingInFileNames": true,
21 | "sourceMap": true,
22 | "types": [
23 | "vite/client",
24 | "vitest/globals"
25 | ],
26 | "paths": {
27 | "~/*": [
28 | "*"
29 | ]
30 | }
31 | },
32 | "exclude": [
33 | "esm/*",
34 | "build/*",
35 | "node_modules/*",
36 | "lib/*",
37 | "example/*",
38 | "vitest.config.ts",
39 | "vite.config.ts",
40 | "tailwind.config.ts",
41 | "demo/*"
42 | ]
43 | }
--------------------------------------------------------------------------------
/demo/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/eslintrc",
3 | "root": true,
4 | "extends": [
5 | "next/core-web-vitals",
6 | "prettier",
7 | "plugin:tailwindcss/recommended"
8 | ],
9 | "plugins": [
10 | "tailwindcss"
11 | ],
12 | "rules": {
13 | "@next/next/no-html-link-for-pages": "off",
14 | "react/jsx-key": "off",
15 | "tailwindcss/no-custom-classname": "off",
16 | "@next/next/google-font-display": 0,
17 | "@next/next/google-font-preconnect": 0,
18 | "@next/next/no-page-custom-font": 0
19 | },
20 | "settings": {
21 | "tailwindcss": {
22 | "callees": [
23 | "cn"
24 | ],
25 | "config": "tailwind.config.js"
26 | },
27 | "next": {
28 | "rootDir": [
29 | "./"
30 | ]
31 | }
32 | },
33 | "overrides": [
34 | {
35 | "files": [
36 | "*.ts",
37 | "*.tsx"
38 | ],
39 | "parser": "@typescript-eslint/parser"
40 | }
41 | ]
42 | }
--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "dom",
5 | "dom.iterable",
6 | "esnext"
7 | ],
8 | "allowJs": true,
9 | "skipLibCheck": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "noEmit": true,
13 | "incremental": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "Bundler",
17 | "resolveJsonModule": true,
18 | "target": "ES2022",
19 | "isolatedModules": true,
20 | "jsx": "preserve",
21 | "baseUrl": ".",
22 | "paths": {
23 | "@/*": [
24 | "./*"
25 | ],
26 | "~/*": [
27 | "../src/*"
28 | ],
29 | "~": [
30 | "../src"
31 | ]
32 | },
33 | "plugins": [
34 | {
35 | "name": "next"
36 | }
37 | ],
38 | "strictNullChecks": true
39 | },
40 | "include": [
41 | "next-env.d.ts",
42 | "**/*.ts",
43 | "**/*.tsx",
44 | ".next/types/**/*.ts"
45 | ],
46 | "exclude": [
47 | "node_modules"
48 | ]
49 | }
--------------------------------------------------------------------------------
/readme.zh.md:
--------------------------------------------------------------------------------
1 | # React Component TailwindCSS + Next.js Template
2 |
3 | 这是一个用于快速搭建 React 组件的模板，使用了 TailwindCSS 描述组件 和 Next.js 搭建示例站点。
4 |
5 | ## 快速开始
6 |
7 | 你可以直接 Fork 或者 使用此模板。
8 |
9 | 然后，你需要更换 包的名称，这个取决你的组件是什么。
10 |
11 | **你需要在项目中全局的替换 `rc-template` 到 你的更换的包名。**
12 |
13 | 在 `demo` 目录中，这是一个示例站点，你可以在这个站点中测试你的组件并且编写组件的文档。
14 |
15 | ## 使用 TailwindCSS
16 |
17 | 组件使用 TailwindCSS 去描述，那么在使用你开发的组件时会存在两种情况。
18 |
19 | 第一种，项目使用了 TailwindCSS，那么，你需要告诉使用方，在 `tailwind.config.js` 中添加组件库的文件目录。
20 |
21 | ```js
22 | // tailwind.config.js
23 |
24 | module.exports = {
25 | content: [
26 | 'app/**/*.{ts,tsx}',
27 | 'components/**/*.{ts,tsx}',
28 | './node_modules//dist/*.js', // 添加这里
29 | ],
30 | }
31 | ```
32 |
33 | 第二种，项目没有使用 TailwindCSS，那么你需要告诉使用方，需要在项目中引入打包后的 css 文件。
34 |
35 | ```js
36 | import '/dist/index.css'
37 | ```
38 |
39 | 或者
40 |
41 | ```css
42 | @import '/dist/index.css';
43 | ```
44 |
45 | ## License
46 |
47 | 2024 © Innei, Released under the MIT License.
48 |
49 | > [Personal Website](https://innei.ren/) · GitHub [@Innei](https://github.com/innei/)
50 |
--------------------------------------------------------------------------------
/demo/public/thirteen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/lib/fs.ts:
--------------------------------------------------------------------------------
1 | import { readFileSync } from "fs"
2 | import { resolve } from "path"
3 |
4 | import { extractFirstHeadingText, parseYamlFrontMatterSync } from "@/lib/remark"
5 |
6 | interface Tree {
7 | to: string
8 | title: string
9 | order: number
10 | }
11 |
12 | export const buildFsTree = () => {
13 | const filePaths = (
14 | require
15 | // @ts-expect-error
16 | .context("../app/(mdx)/", true, /\.mdx$/)
17 | .keys() as string[]
18 | ).filter((path) => path.startsWith("./"))
19 |
20 | // [ './guide/install/page.mdx', 'app/(mdx)/guide/install/page.mdx' ]
21 |
22 | const tree = [] as Tree[]
23 | for (let filePath of filePaths) {
24 | const path = filePath
25 | .split("/")
26 | .slice(1, -1)
27 | .join("/")
28 | .replace(/\.mdx$/, "")
29 | // const depth = path.split("/").length
30 |
31 | const fileContent = readFileSync(
32 | resolve(process.cwd(), `app/(mdx)/${filePath}`),
33 | "utf-8"
34 | )
35 | const yaml = parseYamlFrontMatterSync(fileContent)
36 | const title = extractFirstHeadingText(fileContent)
37 |
38 | // console.log({ path: `/${path}`, title, depth })
39 | tree.push({ to: `/${path}`, title: title || "", order: yaml.order })
40 | }
41 |
42 | return tree.sort((a, b) => a.order - b.order)
43 | }
44 |
--------------------------------------------------------------------------------
/demo/components/main-nav.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import Link from "next/link"
3 |
4 | import { NavItem } from "@/types/nav"
5 | import { siteConfig } from "@/config/site"
6 | import { cn } from "@/lib/utils"
7 | import { Icons } from "@/components/icons"
8 |
9 | interface MainNavProps {
10 | items?: NavItem[]
11 | }
12 |
13 | export function MainNav({ items }: MainNavProps) {
14 | return (
15 |
16 |
17 |
18 | {siteConfig.name}
19 |
20 | {items?.length ? (
21 |
38 | ) : null}
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/demo/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Node.js CI
5 |
6 | on:
7 | push:
8 | branches:
9 | - '**'
10 | pull_request:
11 | branches: [master, main]
12 |
13 | jobs:
14 | build:
15 | runs-on: ubuntu-latest
16 |
17 | strategy:
18 | matrix:
19 | node-version: [18.x]
20 |
21 | steps:
22 | - uses: actions/checkout@v2
23 | - name: Use Node.js ${{ matrix.node-version }}
24 | uses: actions/setup-node@v2
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | - name: Cache pnpm modules
28 | uses: actions/cache@v2
29 | env:
30 | cache-name: cache-pnpm-modules
31 | with:
32 | path: ~/.pnpm-store
33 | key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
34 | restore-keys: |
35 | ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/package.json') }}
36 |
37 | - uses: pnpm/action-setup@v2.0.1
38 | with:
39 | version: 8.x.x
40 | run_install: true
41 | - run: pnpm run build
42 | env:
43 | CI: true
44 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { readFileSync, writeFileSync } from 'fs'
2 | import { resolve } from 'path'
3 | import react from '@vitejs/plugin-react'
4 | import { preserveDirectives } from 'rollup-plugin-preserve-directives'
5 | import { defineConfig } from 'vite'
6 | import dts from 'vite-plugin-dts'
7 |
8 | const packageJson = JSON.parse(
9 | readFileSync('./package.json', { encoding: 'utf-8' }),
10 | )
11 |
12 | const globals = {
13 | // @ts-ignore
14 | ...(packageJson?.dependencies || {}),
15 | }
16 | export default defineConfig({
17 | plugins: [
18 | react(),
19 | dts({
20 | // rollupTypes: true,
21 | beforeWriteFile: (filePath, content) => {
22 | writeFileSync(filePath.replace('.d.ts', '.d.cts'), content)
23 | return { filePath, content }
24 | },
25 | }),
26 | ],
27 | resolve: {
28 | alias: {
29 | '~': resolve(__dirname, './src'),
30 | },
31 | },
32 | build: {
33 | lib: {
34 | entry: [
35 | resolve(__dirname, 'src/index.ts'),
36 | resolve(__dirname, 'src/helper.ts'),
37 | ],
38 | formats: ['cjs', 'es'],
39 | },
40 |
41 | rollupOptions: {
42 | external: [
43 | 'react',
44 | 'react-dom',
45 | 'lodash',
46 | 'lodash-es',
47 | 'react/jsx-runtime',
48 | ...Object.keys(globals),
49 | ],
50 | output: {
51 | preserveModules: true,
52 | },
53 | plugins: [preserveDirectives({})],
54 | },
55 | },
56 | })
57 |
--------------------------------------------------------------------------------
/demo/lib/remark.ts:
--------------------------------------------------------------------------------
1 | import yaml from "js-yaml"
2 | import remarkParse from "remark-parse"
3 | import { unified } from "unified"
4 | import { EXIT, visit } from "unist-util-visit"
5 |
6 | // 定义函数以提取第一个一级标题的纯文字内容
7 | export function extractFirstHeadingText(markdown: string): string | null {
8 | const processor = unified().use(remarkParse)
9 | const file = processor.parse(markdown)
10 |
11 | let headingText: string | null = null
12 |
13 | // 遍历 AST，寻找第一个一级标题
14 | visit(file, "heading", (node) => {
15 | if (node.depth === 1 && headingText === null) {
16 | // 提取纯文字内容
17 | headingText = node.children
18 | .map((child) => ("value" in child ? child.value : ""))
19 | .join("")
20 | return EXIT
21 | }
22 | })
23 |
24 | return headingText
25 | }
26 |
27 | // 定义函数以同步解析 Markdown 文件顶部的 YAML Front Matter
28 | const yamlFrontMatterRegex = /^---\s*\n([\s\S]+?)\n?---\s*\n?/m
29 | export function parseYamlFrontMatterSync(
30 | markdown: string
31 | ): Record {
32 | // 尝试查找 Markdown 中的第一个 YAML Front Matter 区块
33 | const match = yamlFrontMatterRegex.exec(markdown)
34 |
35 | if (match) {
36 | // 尝试解析找到的 YAML 内容
37 | try {
38 | const yamlContent = yaml.load(match[1].replace(/---/g, "")) as object
39 | // console.log('match', match[1].replace(/---/g, ''), yamlContent)
40 | return yamlContent
41 | } catch (error) {
42 | console.error("YAML parsing error:", error, match)
43 | return {}
44 | }
45 | }
46 |
47 | return {}
48 | }
49 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # React Component TailwindCSS + Next.js Template
2 |
3 | This is a template for quickly building React components library, using TailwindCSS to describe components UI and Next.js to build example sites.
4 |
5 | ## Quick Start
6 |
7 | You can directly Fork or use this template.
8 |
9 | Then, you need to change the package name, depending on what your component is.
10 |
11 | **You need to globally replace `rc-template` with your new package name in the project.**
12 |
13 | In the `demo` directory, there is an example site where you can test your component and write documentation for it.
14 |
15 | ## Using TailwindCSS
16 |
17 | The component uses TailwindCSS for description, so there are two scenarios when using the component you developed.
18 |
19 | First, if the project uses TailwindCSS, then you need to tell the user to add the component library's file directory in `tailwind.config.js`.
20 |
21 | ```js
22 | // tailwind.config.js
23 |
24 | module.exports = {
25 | content: [
26 | 'app/**/*.{ts,tsx}',
27 | 'components/**/*.{ts,tsx}',
28 | './node_modules//dist/*.js', // Add here
29 | ],
30 | }
31 | ```
32 |
33 | Second, if the project does not use TailwindCSS, then you need to tell the user that they need to import the compiled css file into the project.
34 |
35 | ```js
36 | import '/dist/index.css'
37 | ```
38 |
39 | or
40 |
41 | ```css
42 | @import '/dist/index.css';
43 | ```
44 |
45 | ## License
46 |
47 | 2024 © Innei, Released under the MIT License.
48 |
49 | > [Personal Website](https://innei.ren/) · GitHub [@Innei](https://github.com/innei/)
--------------------------------------------------------------------------------
/demo/components/site-header.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 |
3 | import { siteConfig } from "@/config/site"
4 | import { buttonVariants } from "@/components/ui/button"
5 | import { Icons } from "@/components/icons"
6 | import { MainNav } from "@/components/main-nav"
7 | import { ThemeToggle } from "@/components/theme-toggle"
8 |
9 | export function SiteHeader() {
10 | return (
11 |
12 |
13 |
14 |
15 |
48 |
49 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
76 |
80 |
81 |
82 |
83 |
84 | {children}
85 |
86 |
87 |
}>
88 |
91 |
92 |
93 |
94 |
96 |