diff --git a/.gitignore b/.gitignore index fd3dbb5..714404d 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,9 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# bun +bun.lock + +# pnpm +pnpm-lock.yaml diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 3b71425..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,357 +0,0 @@ -## [1.8.5] - 2025-05-10 - -> Add sponsor card on single docs page - -### Added - -- Expandables Leftbar -- sponsor badges or ads -- boolean show/hide `edit on github` -- with the same code run anywhere (bun or nodejs) -- add fronmatter (metadata) to playground editor - -### Improved - -- adjusment docu.json -- adjustment navbar, footer and components - -### Fixed - -- bun compability rename .js to common js -- cli manage packageManager on package.json -- inconsistent design moved to better UI/UX -- error handle render footer.social - -### Removed - -- remove confused and verbose cli on installer - -## [1.8.0] - 2025-03-01 - -> Now looks more modern and clean which is a big change in layout and design - -### Added - -- Social footer -- Toggle group -- Site description {meta.description} in footer -- Site title {meta.title} in footer - -### Improved - -- Header design changes -- Footer design changes -- New functions in theme provider -- Object changes in docu.json - -### Fixed - -- Updates to path structure components -- Groups to organize components - -## [1.7.0] - 2025-02-23 - -> Remove the old function in the search dialog and replace it with a new and more optimal feature - -### Added - -- Up and down navigation : search dialog.tsx -- Enter (return) to select : search dialog.tsx -- Escape to close the dialog : search dialog.tsx - -### Improved - -- Maintenance for anchor components -- Anchor.tsx adjustments for all elements that use it - -### Removed - -- Remove suboptimal search features - -## [1.6.0] - 2025-02-21 - -> New Feature Card Groups with arrays for more Flexible Content - -### Added - -- Card Groups Components -- Props : href to url link -- Props : horizontal boolean - -### Improved - -- Card props styling -- Compability for Cards components -- {children} support for card content - -### Removed - -- remove unused props cards components - -## [1.5.0] - 2025-02-18 - -> Minor Update - improved features and responsiveness on all devices - -### Added - -- New dialog footer on searchbox above @media 768px -- Icon X for close dialog on searcbox as esc on medium screen - -### Improved - -- Responsive Leftbar components on large screen -- Menu Trigger on medium screen -- Responsive Navbar components on medium screen -- Better UX for searchbox dialog -- tooltips components can be written together with regular paragraphs - -### Fixed - -- Responsive issue -- Compatibility for Bun -- Changes postcss.config.js to .cjs for Bun -- all CLI installer and updater not working -- adjustments for package managers npm, pnpm, bun, yarn - -## [1.4.2] - 2025-02-16 - -> Complex Content for Accordion Component props {children} - -### Added - -- New Props with {children} in accordion -- Compatibility for markdown in accordion -- Nested components inside an accordion -- New icon on note components -- add CLI npx @docubook/create@latest -- add CLI npx @docubook/update@latest - -### Improved - -- Better UI design for accordion -- Styling Note components on markdown -- Change accordion output on playground -- Change accordion output on snippet - -### Removed - -- Remove depcreated props on accordion -- Remove CLI npx update_docu -- Remove CLI npx create_docu - -## [1.4.0] - 2025-02-11 - -> Floating Button Version with Dynamic Tag {version} on Changelog page - -### Added - -- New components / changelog floating-version.tsx -- Button popover to open version-toc below @media 1024px -- Dynamic tag by section ID #version -- Dynamic url tag #version -- Dynamic version indicator on floating version when scrolling section by ID - -### Improved - -- change icon version history -- responsive version-toc -- improvement components to changelog page - -## [1.3.8] - 2025-02-08 - -> Responsive Table of Content - -### Added - -- Components terminal MagicUI -- Components card Shadcn -- New mob-toc for a better experience on mobile devices -- New Components scroll to top button -- Scroll to top :blog-post -- Scroll to top :docs-post - -### Improved - -- lib/markdown for generated dynamic toc on markdown -- Responsive Table of Content below @media 1024px -- Improve docs page - -## [1.3.6] - 2025-02-01 - -> Appears more modern editor for Docu Play - -![version 1.3.6 - Playground](https://docubook.pro/images/new-editor.png) - -### Added - -- Line Number for editor -- editor.css - -### Improved - -- Better Design for Editor -- Similar to Github Editor -- Moved Handler Element (copy, download, reset and fullscreen) on Header - -## [1.3.5] - 2025-01-30 - -> it's Easy to Write Markdown with Playground - -![version 1.3.5 - Playground](https://docubook.pro/images/img-playground.png) - -### Added - -- New Playground Page -- New Playground Layout -- Toolbar for Markdown Components -- Fullscreen Mode to Focus Editing Your Content -- Copy to Clipboard Your Content -- Download Your Content as index.mdx -- Reset Your Content without refresh the Browser -- Only Large Screen for Better Experience - -## [1.3.1] - 2025-01-20 - -> Snippet Feature to Easily Write Markdown and Call DocuBook Components - -![version 1.3.1 - Snippet Features](https://docubook.pro/images/snippet.png) - -### Added - -- New Feature Snippet for Markdown Components -- Support Snippet for Visual Studio Code - -### Removed - -- remove props icon and props description for accordion components - -## [1.3.0] - 2024-12-31 - -> Release Note Feature to Make it Easier to Write Changelogs - -### Added - -- New Release Note Feature -- New Layout for Changelog page -- New Changelog page -- Add Release Note Component -- Easily write release notes directly from the CHANGELOG.md file -- TOC for versioning -- Write with the markdown tag -- Add lib / changelog.ts - -### Improved - -- Improvement Responsive feature image for Version Entry -- Improvement Layout for changelog page -- Improvement Padding on mobile devices -- Only use containers of md size -- Improvement syntax.css for ul>li classes - -### Fixed - -- Fix og:image not showing on Page.tsx -- Fix text-indent on class li - -### Removed - -- Remove excessive padding -- Remove Logo on Footer - -## [1.2.0] - 2024-12-22 - -> New Accordion Component : Support content plain text, html and all markdown component - -### Added - -- add New Accordion - -### Improved - -- Props Improvement -- Support Dynamic Content for Accordion - -## [1.1.0] - 2024-12-15 - -> Minor Update : Easily manage set up with docu.json - -### Added - -- add docu.json file -- add openGraph (title, description, image) -- add Dynamic metadata -- Generate metadata as openGraph -- openGraph support for .mdx - -### Improved - -- routes-config from json -- Frontmatter improvement -- Edit the content of footer.tsx simply via the docu.json file -- Edit the content of navbar.tsx simply via the docu.json file - -## [1.0.7] - 2024-12-14 - -> Easily updates your DocuBook Version with CLI npx update_docu - -### Added - -- CLI npx update_docu (update features into docubook existing directory) -- Playground (easily to written content) -- New Button component -- Navbar external link conditions -- CLI npx create_docu - -### Improved - -- Searchbar Improvement -- Navigation Improvement -- Edit on Github Improvement - -### Removed -- Remove CLI npx create-docu (on this version not usage dash `-`) - -## [1.0.6] - 2024-11-24 - -> New Components, Fix and Improvement - -### Added - -- New Card component -- New Tooltips component - -### Fixed - -- change root folder - -### Improved - -- logo on navbar & footer -- easily change logo - -## [1.0.5] - 2024-11-16 - -> Add New Features and Improvement for this version - -### Added - -- New Youtube component -- edit this page - easily manage directory content via the github repo -- support installation via cli commant npx create-docu - -### Improved - -- keyboard shortcut command + k or ctrl + k to open search dialog - -## [1.0.0] - 2024-11-10 - -> Initial release of DocuBook to create interactive nested docs with MDX - -### Added - -- Initial release of DocuBook -- Basic documentation structure -- Markdown support with MDX -- Responsive design -- Search functionality -- Dark mode support diff --git a/README.md b/README.md index fbec515..68f4d02 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,6 @@ **DocuBook** is a documentation web project designed to provide a simple and user-friendly interface for accessing various types of documentation. This site is crafted for developers and teams who need quick access to references, guides, and essential documents. -> **Note**: This application is a fork of [AriaDocs](https://github.com/nisabmohd/Aria-Docs), created by [Nisab Mohd](https://github.com/nisabmohd). DocuBook provides an alternative to the documentation solution found on [Mintlify](https://mintlify.com/), utilizing `.mdx` (Markdown + JSX) for content creation and management. - [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gitfromwildan/docubook) diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx deleted file mode 100644 index 42951bc..0000000 --- a/app/blog/[slug]/page.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { Typography } from "@/components/typography"; -import { buttonVariants } from "@/components/ui/button"; -import { Author, getAllBlogStaticPaths, getBlogForSlug } from "@/lib/markdown"; -import { ArrowLeftIcon } from "lucide-react"; -import Link from "next/link"; -import { notFound } from "next/navigation"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -import { formatDate } from "@/lib/utils"; -import { ScrollToTop } from "@/components/scroll-to-top"; - -type PageProps = { - params: { slug: string }; -}; - -export async function generateMetadata({ params: { slug } }: PageProps) { - const res = await getBlogForSlug(slug); - if (!res) return null; - const { frontmatter } = res; - return { - title: frontmatter.title, - description: frontmatter.description, - }; -} - -export async function generateStaticParams() { - const val = await getAllBlogStaticPaths(); - if (!val) return []; - return val.map((it) => ({ slug: it })); -} - -export default async function BlogPage({ params: { slug } }: PageProps) { - const res = await getBlogForSlug(slug); - if (!res) notFound(); - return ( -
- - Back to blog - -
-

- {formatDate(res.frontmatter.date)} -

-

- {res.frontmatter.title} -

-
-

Posted by

- -
-
-
- {res.content} -
- -
- ); -} - -function Authors({ authors }: { authors: Author[] }) { - return ( -
- {authors.map((author) => { - return ( - - - - - {author.username.slice(0, 2).toUpperCase()} - - -
-

{author.username}

-

- @{author.handle} -

-
- - ); - })} -
- ); -} diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx deleted file mode 100644 index 6211155..0000000 --- a/app/blog/layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { PropsWithChildren } from "react"; - -export default function BlogLayout({ children }: PropsWithChildren) { - return ( -
- {children} -
- ); -} diff --git a/app/blog/page.tsx b/app/blog/page.tsx deleted file mode 100644 index 567db7c..0000000 --- a/app/blog/page.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -import { Author, BlogMdxFrontmatter, getAllBlogs } from "@/lib/markdown"; -import { formatDate2, stringToDate } from "@/lib/utils"; -import { getMetadata } from "@/app/layout"; -import Image from "next/image"; -import Link from "next/link"; -import { AuroraText } from "@/components/ui/aurora"; -import { ShineBorder } from "@/components/ui/shine-border"; -import docuConfig from "@/docu.json"; - -export const metadata = getMetadata({ - title: "Blog", - description: "Discover the latest updates, tutorials, and insights on DocuBook.", -}); -const { meta } = docuConfig; -export default async function BlogIndexPage() { - const blogs = (await getAllBlogs()).sort( - (a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime() - ); - return ( -
-
- # Stay Informed, Stay Ahead -

- Blog Posts -

-

- Explore updates, tips, and deep dives from the {meta.title}. -

-
-
- {blogs.map((blog) => ( - - ))} -
-
- ); -} - -function BlogCard({ - date, - title, - description, - slug, - cover, - authors, -}: BlogMdxFrontmatter & { slug: string }) { - return ( - -
- {title} -
-
-

{title}

-

{description}

-
-
-

- Published on {formatDate2(date)} -

- -
- - ); -} - -function AvatarGroup({ users, max = 4 }: { users: Author[]; max?: number }) { - const displayUsers = users.slice(0, max); - const remainingUsers = Math.max(users.length - max, 0); - - return ( -
- {displayUsers.map((user, index) => ( - - - - {user.username.slice(0, 2).toUpperCase()} - - - ))} - {remainingUsers > 0 && ( - - +{remainingUsers} - - )} -
- ); -} diff --git a/app/changelog/layout.tsx b/app/changelog/layout.tsx deleted file mode 100644 index b77f34a..0000000 --- a/app/changelog/layout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export default function ChangelogLayout({ - children, -}: { - children: React.ReactNode; -}) { - return ( -
- {children} -
- ); -} \ No newline at end of file diff --git a/app/changelog/page.tsx b/app/changelog/page.tsx deleted file mode 100644 index 0caacf0..0000000 --- a/app/changelog/page.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Suspense } from "react"; -import { getChangelogEntries } from "@/lib/changelog"; -import { VersionEntry } from "@/components/changelog/version-entry"; -import { VersionToc } from "@/components/changelog/version-toc"; -import { FloatingVersionToc } from "@/components/changelog/floating-version"; - -export default async function ChangelogPage() { - const entries = await getChangelogEntries(); - - return ( -
- }> - ({ version, date }))} - /> - - -
-
-
-
- {entries.map((entry, index) => ( -
- -
- ))} -
-
-
- {/* Floating TOC for smaller screens */} - {entries.length > 0 && ( - ({ version, date }))} - /> - )} -
- ); -} diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx index 7022893..e765173 100644 --- a/app/docs/[[...slug]]/page.tsx +++ b/app/docs/[[...slug]]/page.tsx @@ -8,7 +8,6 @@ import EditThisPage from "@/components/edit-on-github"; import { formatDate2 } from "@/lib/utils"; import docuConfig from "@/docu.json"; import MobToc from "@/components/mob-toc"; -import { ScrollToTop } from "@/components/scroll-to-top"; const { meta } = docuConfig; @@ -78,11 +77,9 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) { return (
-
+
+ -
- -

{title}

{description}

@@ -101,7 +98,6 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
-
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index ef73ca4..d949ff0 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -8,7 +8,9 @@ export default function DocsLayout({ return (
-
{children}
+
+ {children} +
); } diff --git a/app/playground/layout.tsx b/app/playground/layout.tsx deleted file mode 100644 index bd0f70b..0000000 --- a/app/playground/layout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { PropsWithChildren } from "react"; -import { getMetadata } from "@/app/layout"; - -export const metadata = getMetadata({ - title: "Playground", - description: "Test and experiment with DocuBook markdown components in real-time", - image: "img-playground.png", - }); - -export default function PlaygroundLayout({ children }: PropsWithChildren) { - return ( -
- {children} -
- ); -} diff --git a/app/playground/page.tsx b/app/playground/page.tsx deleted file mode 100644 index 2247a7d..0000000 --- a/app/playground/page.tsx +++ /dev/null @@ -1,395 +0,0 @@ -"use client"; - -import { useState, useEffect, useRef } from "react"; -import { ScrollArea } from "@/components/ui/scroll-area"; -import { Separator } from "@/components/ui/separator"; -import { toast } from "sonner"; -import { - List, - ListOrdered, - Heading2, - Heading3, - Code, - Quote, - ImageIcon, - Link as LinkIcon, - Table, - Maximize2, - Minimize2, - Type, - ChevronDown, - Notebook, - Component, - Youtube as YoutubeIcon, - HelpCircle, - LayoutGrid, - MousePointer2, - Rows, - LayoutPanelTop, - Laptop2, - Copy, - Download, - RotateCcw, - Calendar -} from "lucide-react"; -import { Button as UIButton } from "@/components/ui/button"; -import { cn } from "@/lib/utils"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { - handleParagraphClick, - handleHeading2Click, - handleHeading3Click, - handleBulletListClick, - handleNumberedListClick, - handleLinkClick, - handleImageClick, - handleBlockquoteClick, - handleCodeBlockClick, - handleTableClick, - handleNoteClick, - handleComponentClick, - handleMetadataClick, - } from "@/components/playground/MarkComponent"; - -import "@/styles/editor.css"; - -const ToolbarButton = ({ icon: Icon, label, onClick }: { icon: any, label: string, onClick?: () => void }) => ( - - - -); - -const ToolbarSeparator = () => ( - -); - -const MobileMessage = () => ( -
- -

Desktop View Recommended

-

- The Playground works best on larger screens. Please switch to a desktop device for the best experience. -

-
-); - -export default function PlaygroundPage() { - const [markdown, setMarkdown] = useState(""); - const [isFullscreen, setIsFullscreen] = useState(false); - const [isMobile, setIsMobile] = useState(false); - const [lineCount, setLineCount] = useState(1); - const editorRef = useRef(null); - const lineNumbersRef = useRef(null); - - useEffect(() => { - const checkMobile = () => { - setIsMobile(window.innerWidth < 768); - }; - - checkMobile(); - window.addEventListener('resize', checkMobile); - - return () => { - window.removeEventListener('resize', checkMobile); - }; - }, []); - - useEffect(() => { - // Update line count when markdown content changes - const lines = markdown.split('\n').length; - setLineCount(Math.max(lines, 1)); - }, [markdown]); - - // Sync scroll position between editor and line numbers - useEffect(() => { - const textarea = editorRef.current; - const lineNumbers = lineNumbersRef.current; - - if (!textarea || !lineNumbers) return; - - const handleScroll = () => { - lineNumbers.scrollTop = textarea.scrollTop; - }; - - textarea.addEventListener('scroll', handleScroll); - return () => textarea.removeEventListener('scroll', handleScroll); - }, []); - - const toggleFullscreen = () => { - setIsFullscreen(!isFullscreen); - }; - - const handleCopy = async () => { - try { - await navigator.clipboard.writeText(markdown); - toast.success('Content copied to clipboard'); - } catch (err) { - toast.error('Failed to copy content'); - } - }; - - const handleDownload = () => { - try { - const blob = new Blob([markdown], { type: 'text/markdown' }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'index.mdx'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); - toast.success('Content downloaded successfully'); - } catch (err) { - toast.error('Failed to download content'); - } - }; - - const handleReset = () => { - if (markdown.trim()) { - toast.custom((t) => ( -
-

Clear editor content?

-

This action cannot be undone.

-
- { - setMarkdown(''); - toast.success('all content in the editor has been cleaned'); - toast.dismiss(t); - }} - > - Clear - - toast.dismiss(t)} - > - Cancel - -
-
- ), { duration: 10000 }); - } - }; - - const insertAtCursor = (textArea: HTMLTextAreaElement, text: string) => { - const start = textArea.selectionStart; - const end = textArea.selectionEnd; - const before = markdown.substring(0, start); - const after = markdown.substring(end); - - const needsLeadingNewline = before && !before.endsWith('\n\n') ? '\n\n' : ''; - const needsTrailingNewline = after && !after.startsWith('\n\n') ? '\n\n' : ''; - - const newText = `${before}${needsLeadingNewline}${text}${needsTrailingNewline}${after}`; - setMarkdown(newText); - - requestAnimationFrame(() => { - textArea.focus(); - const newPosition = before.length + needsLeadingNewline.length + text.length + 1; - textArea.setSelectionRange(newPosition, newPosition); - }); - }; - - if (isMobile) { - return ; - } - - return ( -
-
-
-
-

DocuPLAY

-

- Test and experiment with DocuBook markdown components in real-time -

-
-
-
- -
-
- -
-
-
- {markdown.trim() && ( - <> - - - Copy - - - - Download - - - - Reset - - - - )} -
- - {isFullscreen ? ( - <> - - Exit Fullscreen - - ) : ( - <> - - Fullscreen - - )} - -
-
- handleMetadataClick(insertAtCursor)} /> - - handleParagraphClick(insertAtCursor)} /> - handleHeading2Click(insertAtCursor)} /> - handleHeading3Click(insertAtCursor)} /> - handleBulletListClick(insertAtCursor)} /> - handleNumberedListClick(insertAtCursor)} /> - - handleLinkClick(insertAtCursor)} /> - handleImageClick(insertAtCursor)} /> - handleBlockquoteClick(insertAtCursor)} /> - handleCodeBlockClick(insertAtCursor)} /> - handleTableClick(insertAtCursor)} /> - - - - - - - - - - - Note - - - Danger - - - Warning - - - Success - - - - - - - - - - - - - - - Stepper - - - - Card - - - - Button - - - - Accordion - - - - Tabs - - - - Youtube - - - - Tooltip - - - -
-
-
-
-
- {Array.from({ length: lineCount }).map((_, i) => ( -
- ))} -
-
-