diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/docs/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..fd3dbb5 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/docs/LICENSE b/docs/LICENSE new file mode 100644 index 0000000..ab7a1da --- /dev/null +++ b/docs/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Mohd. Nisab + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..dbda438 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,75 @@ +## Documentation Template + +This feature-packed documentation template, built with Next.js, offers a sleek and responsive design, perfect for all your project documentation needs. + +
+ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/nisabmohd/Documentation-Template) + +Got it! Here's a way to present the features in a more structured and visually appealing way using a table: + + + + +## Features + +```plaintext +Features +├── MDX supported +├── Syntax highlighting +├── Table of contents +├── Pagination +├── Search +├── Code line highlight & code title +├── Static site generation +├── Custom components +├── Light mode & dark mode +├── Code Switcher +├── Code copy +└── Table of content observer highlight +``` + + + + + + + + diff --git a/docs/app/docs/[[...slug]]/layout.tsx b/docs/app/docs/[[...slug]]/layout.tsx new file mode 100644 index 0000000..d74d702 --- /dev/null +++ b/docs/app/docs/[[...slug]]/layout.tsx @@ -0,0 +1,14 @@ +import { Leftbar } from "@/components/leftbar"; + +export default function DocsLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+ +
{children}
{" "} +
+ ); +} diff --git a/docs/app/docs/[[...slug]]/page.tsx b/docs/app/docs/[[...slug]]/page.tsx new file mode 100644 index 0000000..6873934 --- /dev/null +++ b/docs/app/docs/[[...slug]]/page.tsx @@ -0,0 +1,59 @@ +import DocsBreadcrumb from '@/components/docs-breadcrumb' +import Pagination from '@/components/pagination' +import Toc from '@/components/toc' +import { page_routes } from '@/lib/routes-config' +import { notFound } from 'next/navigation' +import { getMarkdownForSlug } from '@/lib/markdown' +import { PropsWithChildren, cache } from 'react' + +type PageProps = { + params: { slug: string[] } +} + +const cachedGetMarkdownForSlug = cache(getMarkdownForSlug) + +export default async function DocsPage({ params: { slug = [] } }: PageProps) { + const pathName = slug.join('/') + const res = await cachedGetMarkdownForSlug(pathName) + + if (!res) notFound() + return ( +
+
+ + +

{res.frontmatter.title}

+

{res.frontmatter.description}

+
{res.content}
+ + +
+ +
+ ) +} + +function Markdown({ children }: PropsWithChildren) { + return ( +
+ {children} +
+ ) +} + +export async function generateMetadata({ params: { slug = [] } }: PageProps) { + const pathName = slug.join('/') + const res = await cachedGetMarkdownForSlug(pathName) + if (!res) return null + const { frontmatter } = res + return { + title: frontmatter.title, + description: frontmatter.description, + } +} + +export function generateStaticParams() { + return page_routes.map((item) => ({ + slug: item.href.split('/'), + })) +} diff --git a/docs/app/error.tsx b/docs/app/error.tsx new file mode 100644 index 0000000..592d98d --- /dev/null +++ b/docs/app/error.tsx @@ -0,0 +1,34 @@ +"use client"; // Error components must be Client Components + +import { Button } from "@/components/ui/button"; +import { useEffect } from "react"; + +export default function Error({ + error, + reset, +}: { + error: Error & { digest?: string }; + reset: () => void; +}) { + useEffect(() => { + // Log the error to an error reporting service + console.error(error); + }, [error]); + + return ( +
+
+

Oops!

+

Something went wrong!

+
+ +
+ ); +} diff --git a/docs/app/favicon.ico b/docs/app/favicon.ico new file mode 100644 index 0000000..7b68735 Binary files /dev/null and b/docs/app/favicon.ico differ diff --git a/docs/app/globals.css b/docs/app/globals.css new file mode 100644 index 0000000..d4f7532 --- /dev/null +++ b/docs/app/globals.css @@ -0,0 +1,167 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; + --radius: 0.5rem; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + } +} + +.prose { + margin: 0 !important; +} + +pre { + padding: 0 !important; + width: inherit !important; + overflow-x: auto; +} + +pre>code { + display: grid; + max-width: inherit !important; + padding: 14px 0 !important; +} + +.code-line { + padding: 0.75px 12.5px; +} + +.line-number::before { + display: inline-block; + width: 1rem; + margin-right: 22px; + margin-left: -2px; + color: rgb(110, 110, 110); + content: attr(line); + font-size: 13.5px; + text-align: right; +} + + +.highlight-line { + @apply dark:bg-neutral-800/90; + @apply bg-neutral-200/90; +} + +.punctuation { + color: gray; +} + +.comment { + color: gray; +} + +.keyword { + color: rgb(255, 50, 115) +} + +.function { + color: hsla(210, 100%, 66%, 1) +} + +.string, +.constant, +.annotation, +.boolean, +.number { + color: hsl(0, 0%, 29%) +} + +.dark .string, +.dark .constant, +.dark .annotation, +.dark .boolean, +.dark.number { + color: hsl(0, 0%, 71%) +} + +.dark .keyword { + color: hsla(341, 90%, 67%, 1) +} + +.attr-value { + color: hsla(131, 43%, 57%, 1) +} + +.tag { + color: hsla(341, 90%, 67%, 1) +} + +.attr-name { + color: #414141; +} + +.dark .attr-name { + color: #cacaca; + +} + +.rehype-code-title { + @apply px-2; + @apply -mb-8; + @apply w-full; + @apply text-sm; + @apply pt-1; + @apply pb-5; + @apply font-normal; + @apply tracking-wider; + @apply font-medium; + font-family: var(--font-code) !important; +} + +.highlight-comp>code { + background-color: transparent !important; +} \ No newline at end of file diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx new file mode 100644 index 0000000..a97342b --- /dev/null +++ b/docs/app/layout.tsx @@ -0,0 +1,55 @@ +import type { Metadata } from 'next' +import { ThemeProvider } from '@/components/theme-provider' +import { Navbar } from '@/components/navbar' +import { GeistSans } from 'geist/font/sans' +import { GeistMono } from 'geist/font/mono' +import { Footer } from '@/components/footer' +import './globals.css' +import Head from 'next/head' + +export const metadata: Metadata = { + title: 'Duck UI', + metadataBase: new URL('https://duck-ui.vercel.app/'), + description: + 'This comprehensive documentation template, crafted with Next.js and available as open-source, delivers a sleek and responsive design, tailored to meet all your project documentation requirements.', + icons: { + icon: '/logo.png', + shortcut: '/logo.png', + }, +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + + + + + + +
{children}
+