diff --git a/components/markup/filetree.tsx b/components/markup/filetree.tsx new file mode 100644 index 0000000..0a495bb --- /dev/null +++ b/components/markup/filetree.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { createContext, memo, useCallback, useContext, useState, ReactElement, ReactNode } from 'react'; +import { FiFileText } from "react-icons/fi"; +import { LuFolder, LuFolderClosed } from "react-icons/lu"; + +import cn from "clsx"; + +const ctx = createContext(0); + +interface FolderProps { + name: string; + label?: ReactElement; + open?: boolean; + defaultOpen?: boolean; + onToggle?: (open: boolean) => void; + children: ReactNode; +} + +interface FileProps { + name: string; + label?: ReactElement; +} + +function useIndent() { + return useContext(ctx); +} + + +function Tree({ children }: { children: ReactNode }): ReactElement { + return ( +
+ +
+ ); +} + +export const Folder = memo(({ label, name, open, defaultOpen = false, onToggle, children }: FolderProps) => { + const indent = useIndent(); + const [isOpen, setIsOpen] = useState(defaultOpen); + + const toggle = useCallback(() => { + onToggle?.(!isOpen); + setIsOpen(!isOpen); + }, [isOpen, onToggle]); + + const isFolderOpen = open === undefined ? isOpen : open; + + return ( +
  • +
    + + {isFolderOpen ? : } + + {label ?? name} +
    + {isFolderOpen && ( + + )} +
    • + ); +}); + +Folder.displayName = 'Folder'; + +export const File = memo(({ label, name }: FileProps) => ( +
  • +
    + + + + {label ?? name} +
    +
    • +)); + +File.displayName = 'File'; + +export default Tree; diff --git a/contents/docs/markup/alert/index.mdx b/contents/docs/markup/alert/index.mdx deleted file mode 100644 index 20e0bf4..0000000 --- a/contents/docs/markup/alert/index.mdx +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Alert -description: This section provides an overview of Introduction. ---- - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam - - - [x] Write the press release - - [ ] Update the website - - [ ] Contact the media - -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - - - Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - -## Conclusion - -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! diff --git a/contents/docs/markup/cards/index.mdx b/contents/docs/markup/cards/index.mdx index 8648d5e..03a279d 100644 --- a/contents/docs/markup/cards/index.mdx +++ b/contents/docs/markup/cards/index.mdx @@ -5,76 +5,75 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media - -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - -## Conclusion - -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! +## Small Card + + + + + + + +## Large Card + + + + + + + +## Image Card + + + + + + \ No newline at end of file diff --git a/contents/docs/markup/diagrams/index.mdx b/contents/docs/markup/diagrams/index.mdx index 7e78639..1c61774 100644 --- a/contents/docs/markup/diagrams/index.mdx +++ b/contents/docs/markup/diagrams/index.mdx @@ -5,76 +5,42 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media - -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - -## Conclusion - -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! +## Flowchart + + Task1; + Task1 --> Task2; + Task2 --> End;`} /> + +## Decision Tree + + B{Is it raining?}; + B -->|Yes| C[Take an umbrella]; + B -->|No| D[Enjoy the weather]; + C --> E[Go outside]; + D --> E;`} /> + +## Entity-Relationship Diagram + + \ No newline at end of file diff --git a/contents/docs/markup/filetree/index.mdx b/contents/docs/markup/filetree/index.mdx new file mode 100644 index 0000000..fbe0f09 --- /dev/null +++ b/contents/docs/markup/filetree/index.mdx @@ -0,0 +1,20 @@ +--- +title: Filetree +description: This section provides an overview of Introduction. +--- + +Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam + + + + + + + + + + + + + + diff --git a/contents/docs/markup/lists/index.mdx b/contents/docs/markup/lists/index.mdx index 21ecaff..49ef637 100644 --- a/contents/docs/markup/lists/index.mdx +++ b/contents/docs/markup/lists/index.mdx @@ -5,76 +5,30 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam +## Checklist + - [x] Write the press release - [ ] Update the website - [ ] Contact the media -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. +## Simple List -## Code Examples with switch +- Item 1 +- Item 2 +- Item 3 -Here a custom tab component from shadcn ui is used. +## Number List - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - +1. Research +2. Draft the content +3. Review and edit +4. Publish -## Conclusion +## Nested List -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! +- Main Category 1 + - Sub Item 1.1 + - Sub Item 1.2 +- Main Category 2 + - Sub Item 2.1 + - Sub Item 2.2 \ No newline at end of file diff --git a/contents/docs/markup/maths/index.mdx b/contents/docs/markup/maths/index.mdx index 148ec7c..b8a2e3d 100644 --- a/contents/docs/markup/maths/index.mdx +++ b/contents/docs/markup/maths/index.mdx @@ -5,83 +5,43 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam -Lift($$L$$) can be determined by Lift Coefficient ($$C_L$$) like the following -equation. +## Basic Algebra + +The area of a circle ($$A$$) can be calculated using the radius ($$r$$) as follows: ```math -L = \frac{1}{2} \rho v^2 S C_L +A = \pi r^2 ``` -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media - -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} + +## Quadratic Formula + +The quadratic formula for solving an equation of the form $$ax^2 + bx + c = 0$$ is: + +```math +x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} ``` - - -## Conclusion +## Newton's Second Law of Motion + +Newton's second law of motion states that force ($$F$$) is the product of mass ($$m$$) and acceleration ($$a$$): + +```math +F = ma +``` -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! +## Pythagorean Theorem + +The Pythagorean theorem relates the lengths of the sides of a right triangle: + +```math +a^2 + b^2 = c^2 +``` + +## Einstein's Mass-Energy Equivalence + +Einstein's famous equation relates energy ($$E$$), mass ($$m$$), and the speed of light ($$c$$): + +```math +E = mc^2 +``` \ No newline at end of file diff --git a/contents/docs/markup/notes/index.mdx b/contents/docs/markup/notes/index.mdx new file mode 100644 index 0000000..51db71a --- /dev/null +++ b/contents/docs/markup/notes/index.mdx @@ -0,0 +1,30 @@ +--- +title: Notes +description: This section provides an overview of Introduction. +--- + +Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam + +## Standard Note + + + The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file. + + +## Success Note + + + The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file. + + +## Warning Note + + + The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file. + + +## Danger Note + + + The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file. + \ No newline at end of file diff --git a/contents/docs/markup/steps/index.mdx b/contents/docs/markup/steps/index.mdx index c4f3bfa..6121d57 100644 --- a/contents/docs/markup/steps/index.mdx +++ b/contents/docs/markup/steps/index.mdx @@ -3,78 +3,42 @@ title: Steps description: This section provides an overview of Introduction. --- -Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam +The `` and `` components allow you to create structured step-by-step guides in your documentation. These components are particularly useful when you want to break down a process or tutorial into easy-to-follow stages. -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media +## Steps -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | +To create a step-by-step guide in your MDX, you can use the following structure: -## Getting Started + + + Make sure you have Node.js installed on your machine. You can download it from [here](https://nodejs.org). + + To verify the installation, run the following command: -To begin using the Documentation Template, follow these simple steps: + ```bash + node -v + ``` + -- Start by cloning the repository to your local machine. + + After cloning the repository, navigate to the project directory and install the necessary dependencies: -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. + ```bash + npm install + ``` + -## Blockquotes + + Start the development server: -Blockquotes are useful for emphasizing key points or quoting external sources: + ```bash + npm run dev + ``` -> "Documentation is a love letter that you write to your future self." - Damian Conway + You can access the application at: -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} -``` - - - -## Conclusion - -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! + ```bash + http://localhost:3000 + ``` + + \ No newline at end of file diff --git a/contents/docs/markup/table/index.mdx b/contents/docs/markup/table/index.mdx index d54f82b..2eb2626 100644 --- a/contents/docs/markup/table/index.mdx +++ b/contents/docs/markup/table/index.mdx @@ -5,94 +5,15 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media - | Syntax | Description | Test Text | | :------------ | :---------: | ----------: | | Header | Title | Here's this | | Paragraph | Text | And more | | Strikethrough | | ~~Text~~ | -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - -## Code Examples with switch - -Here a custom tab component from shadcn ui is used. - - - - layout.jsx - layout.tsx - - - ```jsx {7} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ children }) { - return ( - - - {children} - - - )} -```` - - -```tsx {11} showLineNumbers -import ThemeProvider from './theme-provider' - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} - -/* ==================== - Typography Styles -==================== */ -.typography { - @apply prose prose-zinc `prose-headings`:scroll-m-20 prose-code:leading-6 prose-code:font-code prose-code:p-1 prose-code:rounded-md prose-pre:bg-neutral-100 prose-pre:border prose-code:before:content-none prose-code:after:content-none prose-img:rounded-md prose-img:border; - @apply text-sm prose-code:text-xs w-[85vw] !min-w-full sm:w-full sm:mx-auto pt-2; - @apply dark:prose-invert dark:prose-code:bg-neutral-900 prose-code:text-neutral-800 dark:prose-code:text-white dark:prose-pre:bg-neutral-900; -} - -.prose { - margin: 0 !important; -} - -/* List styles */ -.prose ul > li::marker { - color: hsl(0, 0%, 29%); -} -``` - - - -## Conclusion -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! +| Feature | Documentation Link | Notes | +| :---------- | :----------------: | ----------------------: | +| **Feature A**| [Docs](#) | For more info click here | +| **Feature B**| [Guide](#) | See the full guide here | +| **Feature C**| [Setup](#) | Setup instructions | diff --git a/contents/docs/markup/tabs/index.mdx b/contents/docs/markup/tabs/index.mdx index ee32972..5febe82 100644 --- a/contents/docs/markup/tabs/index.mdx +++ b/contents/docs/markup/tabs/index.mdx @@ -5,60 +5,6 @@ description: This section provides an overview of Introduction. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam -- [x] Write the press release -- [ ] Update the website -- [ ] Contact the media - -| Syntax | Description | Test Text | -| :------------ | :---------: | ----------: | -| Header | Title | Here's this | -| Paragraph | Text | And more | -| Strikethrough | | ~~Text~~ | - -# Sample Document with Mermaid - -Here is a Mermaid diagram: - -B; - A-->C; - B-->D; - C-->D;`} /> - -This diagram should render automatically without any extra imports. - - - - - - -## Getting Started - -To begin using the Documentation Template, follow these simple steps: - -- Start by cloning the repository to your local machine. - -Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet. - -## Blockquotes - -Blockquotes are useful for emphasizing key points or quoting external sources: - -> "Documentation is a love letter that you write to your future self." - Damian Conway - -Feel free to use blockquotes to highlight important information or quotes relevant to your documentation. - ## Code Examples with switch Here a custom tab component from shadcn ui is used. @@ -102,7 +48,3 @@ export default function RootLayout({ ``` - -## Conclusion - -Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting! diff --git a/dist/scripts/settings/documents.mjs b/dist/scripts/settings/documents.mjs index db0487e..397e2b4 100644 --- a/dist/scripts/settings/documents.mjs +++ b/dist/scripts/settings/documents.mjs @@ -50,10 +50,6 @@ export const Documents = [ href: "/markup", heading: "Components", items: [ - { - title: "Alert", - href: "/alert", - }, { title: "Cards", href: "/cards", @@ -62,6 +58,10 @@ export const Documents = [ title: "Diagrams", href: "/diagrams", }, + { + title: "Filetree", + href: "/filetree", + }, { title: "Lists", href: "/lists", @@ -70,6 +70,10 @@ export const Documents = [ title: "Maths", href: "/maths", }, + { + title: "Notes", + href: "/notes", + }, { title: "Steps", href: "/steps", diff --git a/lib/components.ts b/lib/components.ts index 5d3541f..da3cae8 100644 --- a/lib/components.ts +++ b/lib/components.ts @@ -7,10 +7,21 @@ import Pre from "@/components/ui/pre"; import { Step, StepItem } from "@/components/markup/step"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import dynamic from 'next/dynamic'; + +const FileTree = dynamic(() => import('@/components/markup/filetree'), { + ssr: false, +}); + +import { Folder, File } from '@/components/markup/filetree'; + export const components = { a: RoutedLink as React.ComponentType>, Card, CardGrid, + FileTree, + Folder, + File, Mermaid, Note, pre: Pre, diff --git a/public/images/banner.png b/public/images/banner.png index 2fc51c8..49dd71d 100644 Binary files a/public/images/banner.png and b/public/images/banner.png differ diff --git a/public/search-data/documents.json b/public/search-data/documents.json index 920438b..b629f1f 100644 --- a/public/search-data/documents.json +++ b/public/search-data/documents.json @@ -23,23 +23,23 @@ "description": "Setting up and configuring your documentation project", "content": "Setting up your new documentation project is straightforward. Most of the essential project settings can be configured within the `settings` folder.\n\n## Settings\n\nThis section provides the core settings for your documentation site, such as defining the site's URL, site icon and title.\n\n```tsx showLineNumbers\nexport const url = \"\"; // The URL for your documentation site\r\nexport const siteicon = \"\"; // Icon displayed next to the site name in the header\r\nexport const sitename = \"\"; // Title of your documentation site\n```\n\n## Google Tags\n\nThis section allows you to integrate Google Tag Manager into your documentation project. You can add your GTM code and configure whether it's connected.\n\n```tsx showLineNumbers\nexport const gtm = \"\"; // Add your Google Tag Manager code here\r\nexport const gtmconnected = true; // Set to true if GTM is connected, otherwise set to false\n```\n\n## Search Engine\n\nConfigure essential SEO settings to ensure your documentation site is optimized for search engines. This includes meta descriptions, keywords and social media sharing details like images and alt text.\n\n```tsx showLineNumbers\nexport const description = \"\"; // Description of your documentation site for SEO\r\nexport const keywords = [\"\", \"\"]; // List of SEO keywords for your documentation site\r\nexport const urlimage = \"\"; // The URL of the image used when sharing on social media)\r\nexport const imagealt = \"\"; // Alt text for shared images, helpful for screen readers\r\nexport const twitterhandle = \"\"; // Your company’s Twitter handle for social sharing\n```\n\n## Footer Branding\n\nThe footer settings allow you to customize the company information displayed at the bottom of the site. You can add the company name and the URL that the name will link to.\n\n```tsx showLineNumbers\nexport const companyname = \"\"; // The company name displayed in the copyright section\r\nexport const companylink = \"\"; // The URL your company name should link to\n```\n\n## General Layout\n\nThe layout settings control the appearance and functionality of various elements of the documentation site, such as branding, the right sidebar, feedback options, table of contents, and scroll-to-top functionality.\n\n```tsx showLineNumbers\nexport const branding = true; // Set to true to display our branding elements\r\nexport const rightsidebar = true; // Set to true to enable the right sidebar with feedback, table of contents and scroll-to-top\r\nexport const feedbackedit = true; // Control to enable/disable feedback on GitHub\r\nexport const tableofcontent = true; // Control to enable/disable the generated table of contents\r\nexport const totopscroll = true; // Control to enable/disable scroll-to-top button\n```\n\n## Github Control\n\nIf your MDX files are hosted on GitHub, you can configure the project to load documents directly from there. This option can be useful for syncing documentation updates directly with your repository.\n\n```tsx showLineNumbers\nexport const loadfromgithub = false; // Set to true to load your MDX documents directly from GitHub\n```\n\n## Project Structure\n\n\n \n\n" }, - { - "slug": "/markup/alert", - "title": "Alert", - "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\n| :------------ | :---------: | ----------: |\n| Header | Title | Here's this |\n| Paragraph | Text | And more |\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" - }, { "slug": "/markup/cards", "title": "Cards", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\r\n| :------------ | :---------: | ----------: |\r\n| Header | Title | Here's this |\r\n| Paragraph | Text | And more |\r\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Small Card\n\n\n \n\n \n\n \n\n\n## Large Card\n\n\n \n\n \n\n \n\n\n## Image Card\n\n\n \n\n \n\n \n\n" }, { "slug": "/markup/diagrams", "title": "Diagrams", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\r\n| :------------ | :---------: | ----------: |\r\n| Header | Title | Here's this |\r\n| Paragraph | Text | And more |\r\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Flowchart\n\n## Decision Tree\n\n## Entity-Relationship Diagram\n" + }, + { + "slug": "/markup/filetree", + "title": "Filetree", + "description": "This section provides an overview of Introduction.", + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n" }, { "slug": "/markup", @@ -51,31 +51,37 @@ "slug": "/markup/lists", "title": "Lists", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\r\n| :------------ | :---------: | ----------: |\r\n| Header | Title | Here's this |\r\n| Paragraph | Text | And more |\r\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Checklist\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n## Simple List\n\n* Item 1\n* Item 2\n* Item 3\n\n## Number List\n\n1. Research\n2. Draft the content\n3. Review and edit\n4. Publish\n\n## Nested List\n\n* Main Category 1\n * Sub Item 1.1\n * Sub Item 1.2\n* Main Category 2\n * Sub Item 2.1\n * Sub Item 2.2\n" }, { "slug": "/markup/maths", "title": "Maths", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\nLift($$L$$) can be determined by Lift Coefficient ($$C\\_L$$) like the following\r\nequation.\n\n```math\nL = \\frac{1}{2} \\rho v^2 S C_L\n```\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\r\n| :------------ | :---------: | ----------: |\r\n| Header | Title | Here's this |\r\n| Paragraph | Text | And more |\r\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Basic Algebra\n\nThe area of a circle ($$A$$) can be calculated using the radius ($$r$$) as follows:\n\n```math\nA = \\pi r^2\n```\n\n## Quadratic Formula\n\nThe quadratic formula for solving an equation of the form $$ax^2 + bx + c = 0$$ is:\n\n```math\nx = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\n```\n\n## Newton's Second Law of Motion\n\nNewton's second law of motion states that force ($$F$$) is the product of mass ($$m$$) and acceleration ($$a$$):\n\n```math\nF = ma\n```\n\n## Pythagorean Theorem\n\nThe Pythagorean theorem relates the lengths of the sides of a right triangle:\n\n```math\na^2 + b^2 = c^2\n```\n\n## Einstein's Mass-Energy Equivalence\n\nEinstein's famous equation relates energy ($$E$$), mass ($$m$$), and the speed of light ($$c$$):\n\n```math\nE = mc^2\n```\n" + }, + { + "slug": "/markup/notes", + "title": "Notes", + "description": "This section provides an overview of Introduction.", + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Standard Note\n\n\n The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file.\n\n\n## Success Note\n\n\n The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file.\n\n\n## Warning Note\n\n\n The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file.\n\n\n## Danger Note\n\n\n The project's search functionality relies on the Husky's automation to build `search-data/documents.json` ensure git commit is performed to generate this file.\n\n" }, { "slug": "/markup/steps", "title": "Steps", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\r\n| :------------ | :---------: | ----------: |\r\n| Header | Title | Here's this |\r\n| Paragraph | Text | And more |\r\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "The `` and `` components allow you to create structured step-by-step guides in your documentation. These components are particularly useful when you want to break down a process or tutorial into easy-to-follow stages.\n\n## Steps\n\nTo create a step-by-step guide in your MDX, you can use the following structure:\n\n\n \n Make sure you have Node.js installed on your machine. You can download it from [here](https://nodejs.org).\n\n To verify the installation, run the following command:\n\n ```bash\n node -v\n ```\n \n\n \n After cloning the repository, navigate to the project directory and install the necessary dependencies:\n\n ```bash\n npm install\n ```\n \n\n \n Start the development server:\n\n ```bash\n npm run dev\n ```\n\n You can access the application at:\n\n ```bash\n http://localhost:3000\n ```\n \n\n" }, { "slug": "/markup/table", "title": "Table", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\n| :------------ | :---------: | ----------: |\n| Header | Title | Here's this |\n| Paragraph | Text | And more |\n| Strikethrough | | ~~Text~~ |\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n| Syntax | Description | Test Text |\n| :------------ | :---------: | ----------: |\n| Header | Title | Here's this |\n| Paragraph | Text | And more |\n| Strikethrough | | ~~Text~~ |\n\n| Feature | Documentation Link | Notes |\n| :---------- | :----------------: | ----------------------: |\n| **Feature A**| [Docs](#) | For more info click here |\n| **Feature B**| [Guide](#) | See the full guide here |\n| **Feature C**| [Setup](#) | Setup instructions |\n" }, { "slug": "/markup/tabs", "title": "Tabs", "description": "This section provides an overview of Introduction.", - "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n* \\[x] Write the press release\n* \\[ ] Update the website\n* \\[ ] Contact the media\n\n| Syntax | Description | Test Text |\n| :------------ | :---------: | ----------: |\n| Header | Title | Here's this |\n| Paragraph | Text | And more |\n| Strikethrough | | ~~Text~~ |\n\n# Sample Document with Mermaid\n\nHere is a Mermaid diagram:\n\nThis diagram should render automatically without any extra imports.\n\n\n \n\n \n\n\n## Getting Started\n\nTo begin using the Documentation Template, follow these simple steps:\n\n* Start by cloning the repository to your local machine.\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.\n\n## Blockquotes\n\nBlockquotes are useful for emphasizing key points or quoting external sources:\n\n> \"Documentation is a love letter that you write to your future self.\" - Damian Conway\n\nFeel free to use blockquotes to highlight important information or quotes relevant to your documentation.\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n\n## Conclusion\n\nThank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!\n" + "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam\n\n## Code Examples with switch\n\nHere a custom tab component from shadcn ui is used.\n" }, { "slug": "/navigation", diff --git a/settings/documents.ts b/settings/documents.ts index 1bb8e5d..09efde1 100644 --- a/settings/documents.ts +++ b/settings/documents.ts @@ -52,10 +52,6 @@ export const Documents: Paths[] = [ href: "/markup", heading: "Components", items: [ - { - title: "Alert", - href: "/alert", - }, { title: "Cards", href: "/cards", @@ -64,6 +60,10 @@ export const Documents: Paths[] = [ title: "Diagrams", href: "/diagrams", }, + { + title: "Filetree", + href: "/filetree", + }, { title: "Lists", href: "/lists", @@ -72,6 +72,10 @@ export const Documents: Paths[] = [ title: "Maths", href: "/maths", }, + { + title: "Notes", + href: "/notes", + }, { title: "Steps", href: "/steps",