docu v 1.11.0
This commit is contained in:
Wildan Nursahidan
6
.gitignore
vendored
6
.gitignore
vendored
@@ -34,3 +34,9 @@ yarn-error.log*
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# bun
|
||||
bun.lock
|
||||
|
||||
# pnpm
|
||||
pnpm-lock.yaml
|
||||
|
||||
357
CHANGELOG.md
357
CHANGELOG.md
@@ -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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
@@ -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.
|
||||
|
||||
[](https://vercel.com/import/project?template=https://github.com/gitfromwildan/docubook)
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<div className="lg:w-[60%] sm:[95%] md:[75%] mx-auto">
|
||||
<Link
|
||||
className={buttonVariants({
|
||||
variant: "link",
|
||||
className: "!mx-0 !px-0 mb-7 !-ml-1 ",
|
||||
})}
|
||||
href="/blog"
|
||||
>
|
||||
<ArrowLeftIcon className="w-4 h-4 mr-1.5" /> Back to blog
|
||||
</Link>
|
||||
<div className="flex flex-col gap-3 pb-7 w-full mb-2">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{formatDate(res.frontmatter.date)}
|
||||
</p>
|
||||
<h1 className="sm:text-4xl text-3xl font-extrabold">
|
||||
{res.frontmatter.title}
|
||||
</h1>
|
||||
<div className="mt-6 flex flex-col gap-3">
|
||||
<p className="text-sm text-muted-foreground">Posted by</p>
|
||||
<Authors authors={res.frontmatter.authors} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="!w-full">
|
||||
<Typography>{res.content}</Typography>
|
||||
</div>
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Authors({ authors }: { authors: Author[] }) {
|
||||
return (
|
||||
<div className="flex items-center gap-8 flex-wrap">
|
||||
{authors.map((author) => {
|
||||
return (
|
||||
<Link
|
||||
href={author.handleUrl}
|
||||
className="flex items-center gap-2"
|
||||
key={author.username}
|
||||
>
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarImage src={author.avatar} />
|
||||
<AvatarFallback>
|
||||
{author.username.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="">
|
||||
<p className="text-sm font-medium">{author.username}</p>
|
||||
<p className="font-code text-[13px] text-muted-foreground">
|
||||
@{author.handle}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { PropsWithChildren } from "react";
|
||||
|
||||
export default function BlogLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-center pt-8 pb-10 w-full mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex flex-col items-center justify-center px-2 py-8 text-center sm:py-36">
|
||||
<div className="w-full max-w-[800px] pb-8">
|
||||
<AuroraText className="text-lg"># Stay Informed, Stay Ahead</AuroraText>
|
||||
<h1 className="mb-4 text-2xl font-bold sm:text-5xl">
|
||||
Blog Posts
|
||||
</h1>
|
||||
<p className="mb-8 sm:text-xl text-muted-foreground">
|
||||
Explore updates, tips, and deep dives from the {meta.title}.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-left grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 sm:gap-8 gap-4 my-6">
|
||||
{blogs.map((blog) => (
|
||||
<BlogCard {...blog} slug={blog.slug} key={blog.slug} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BlogCard({
|
||||
date,
|
||||
title,
|
||||
description,
|
||||
slug,
|
||||
cover,
|
||||
authors,
|
||||
}: BlogMdxFrontmatter & { slug: string }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/blog/${slug}`}
|
||||
className="flex flex-col gap-2 items-start border rounded-md max-h-[420px] min-h-[420px]"
|
||||
>
|
||||
<div className="w-full">
|
||||
<Image
|
||||
src={cover}
|
||||
alt={title}
|
||||
width={400}
|
||||
height={150}
|
||||
quality={80}
|
||||
className="w-full rounded-md object-cover h-[200px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-start px-3 py-3 gap-2 mb-auto">
|
||||
<h3 className="text-md font-semibold line-clamp-2">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground line-clamp-3">{description}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between w-full px-3 mb-6">
|
||||
<p className="text-[13px] text-muted-foreground">
|
||||
Published on {formatDate2(date)}
|
||||
</p>
|
||||
<AvatarGroup users={authors} />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function AvatarGroup({ users, max = 4 }: { users: Author[]; max?: number }) {
|
||||
const displayUsers = users.slice(0, max);
|
||||
const remainingUsers = Math.max(users.length - max, 0);
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
{displayUsers.map((user, index) => (
|
||||
<Avatar
|
||||
key={user.username}
|
||||
className={`inline-block border-2 w-9 h-9 border-background ${
|
||||
index !== 0 ? "-ml-3" : ""
|
||||
} `}
|
||||
>
|
||||
<AvatarImage src={user.avatar} alt={user.username} />
|
||||
<AvatarFallback>
|
||||
{user.username.slice(0, 2).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
))}
|
||||
{remainingUsers > 0 && (
|
||||
<Avatar className="-ml-3 inline-block border-2 border-background hover:translate-y-1 transition-transform">
|
||||
<AvatarFallback>+{remainingUsers}</AvatarFallback>
|
||||
</Avatar>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
export default function ChangelogLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start gap-8">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-start">
|
||||
<Suspense fallback={<div className="lg:flex hidden flex-[1.5]" />}>
|
||||
<VersionToc
|
||||
versions={entries.map(({ version, date }) => ({ version, date }))}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<main className="flex-1 md:flex-[5.25] min-w-0 max-w-[800px]">
|
||||
<div className="relative">
|
||||
<div className="absolute left-0 top-0 h-full w-px bg-border md:block hidden" />
|
||||
<div className="md:px-12 md:py-8 max-md:py-10">
|
||||
{entries.map((entry, index) => (
|
||||
<section
|
||||
id={`version-${entry.version}`}
|
||||
key={entry.version}
|
||||
className="scroll-mt-20" // Tambahkan margin atas saat scroll
|
||||
>
|
||||
<VersionEntry {...entry} isLast={index === entries.length - 1} />
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{/* Floating TOC for smaller screens */}
|
||||
{entries.length > 0 && (
|
||||
<FloatingVersionToc
|
||||
versions={entries.map(({ version, date }) => ({ version, date }))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex items-start gap-10">
|
||||
<div className="flex-[4.5] pt-10">
|
||||
<DocsBreadcrumb paths={slug} />
|
||||
<div className="mb-8">
|
||||
<div className="flex-[4.5] pt-5">
|
||||
<MobToc tocs={tocs} />
|
||||
</div>
|
||||
<DocsBreadcrumb paths={slug} />
|
||||
<Typography>
|
||||
<h1 className="text-3xl !-mt-0.5">{title}</h1>
|
||||
<p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
|
||||
@@ -101,7 +98,6 @@ export default async function DocsPage({ params: { slug = [] } }: PageProps) {
|
||||
</div>
|
||||
<Pagination pathname={pathName} />
|
||||
</Typography>
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
<Toc path={pathName} />
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,9 @@ export default function DocsLayout({
|
||||
return (
|
||||
<div className="flex items-start gap-8">
|
||||
<Leftbar key="leftbar" />
|
||||
<div className="flex-[5.25]">{children}</div>
|
||||
<div className="flex-[5.25] px-1">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 }) => (
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 hover:bg-muted"
|
||||
title={label}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</UIButton>
|
||||
);
|
||||
|
||||
const ToolbarSeparator = () => (
|
||||
<Separator orientation="vertical" className="mx-1 h-6" />
|
||||
);
|
||||
|
||||
const MobileMessage = () => (
|
||||
<div className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 animate-in fade-in-50 duration-500">
|
||||
<Laptop2 className="w-16 h-16 mb-4 text-muted-foreground animate-bounce" />
|
||||
<h2 className="text-2xl font-bold mb-2">Desktop View Recommended</h2>
|
||||
<p className="text-muted-foreground max-w-md">
|
||||
The Playground works best on larger screens. Please switch to a desktop device for the best experience.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
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<HTMLTextAreaElement>(null);
|
||||
const lineNumbersRef = useRef<HTMLDivElement>(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) => (
|
||||
<div className="flex flex-col gap-2 bg-background border rounded-lg p-4 shadow-lg">
|
||||
<h3 className="font-semibold">Clear editor content?</h3>
|
||||
<p className="text-sm text-muted-foreground">This action cannot be undone.</p>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<UIButton
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
setMarkdown('');
|
||||
toast.success('all content in the editor has been cleaned');
|
||||
toast.dismiss(t);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</UIButton>
|
||||
<UIButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => toast.dismiss(t)}
|
||||
>
|
||||
Cancel
|
||||
</UIButton>
|
||||
</div>
|
||||
</div>
|
||||
), { 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 <MobileMessage />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
"flex flex-col transition-all duration-200",
|
||||
isFullscreen ? "fixed inset-0 z-50 bg-background" : "min-h-[calc(100vh-4rem)]"
|
||||
)}>
|
||||
<div className="border-b bg-background">
|
||||
<div className="py-8 px-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-extrabold">Docu<span className="text-primary text-lg ml-1">PLAY</span></h1>
|
||||
<p className="text-lg text-muted-foreground mt-2">
|
||||
Test and experiment with DocuBook markdown components in real-time
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 py-8 px-2">
|
||||
<div className="flex flex-col h-full pb-12">
|
||||
<ScrollArea className="flex-1 border rounded-lg">
|
||||
<div className="sticky top-0 z-20 bg-background border-b">
|
||||
<div className="flex items-center justify-between p-2 bg-muted/40">
|
||||
<div className="flex items-center gap-2">
|
||||
{markdown.trim() && (
|
||||
<>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCopy}
|
||||
className="gap-2 text-xs"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
Copy
|
||||
</UIButton>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDownload}
|
||||
className="gap-2 text-xs"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
Download
|
||||
</UIButton>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleReset}
|
||||
className="gap-2 text-xs"
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5" />
|
||||
Reset
|
||||
</UIButton>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleFullscreen}
|
||||
className="gap-2 text-xs"
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<>
|
||||
<Minimize2 className="h-3.5 w-3.5" />
|
||||
Exit Fullscreen
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Maximize2 className="h-3.5 w-3.5" />
|
||||
Fullscreen
|
||||
</>
|
||||
)}
|
||||
</UIButton>
|
||||
</div>
|
||||
<div className="flex items-center border-b p-1 bg-background">
|
||||
<ToolbarButton icon={Calendar} label="Metadata" onClick={() => handleMetadataClick(insertAtCursor)} />
|
||||
<ToolbarSeparator />
|
||||
<ToolbarButton icon={Type} label="Paragraph" onClick={() => handleParagraphClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={Heading2} label="Heading 2" onClick={() => handleHeading2Click(insertAtCursor)} />
|
||||
<ToolbarButton icon={Heading3} label="Heading 3" onClick={() => handleHeading3Click(insertAtCursor)} />
|
||||
<ToolbarButton icon={List} label="Bullet List" onClick={() => handleBulletListClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={ListOrdered} label="Numbered List" onClick={() => handleNumberedListClick(insertAtCursor)} />
|
||||
<ToolbarSeparator />
|
||||
<ToolbarButton icon={LinkIcon} label="Link" onClick={() => handleLinkClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={ImageIcon} label="Image" onClick={() => handleImageClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={Quote} label="Blockquote" onClick={() => handleBlockquoteClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={Code} label="Code Block" onClick={() => handleCodeBlockClick(insertAtCursor)} />
|
||||
<ToolbarButton icon={Table} label="Table" onClick={() => handleTableClick(insertAtCursor)} />
|
||||
<ToolbarSeparator />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 flex items-center gap-1 font-normal"
|
||||
>
|
||||
<Notebook className="h-4 w-4" />
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</UIButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'note')}>
|
||||
Note
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'danger')}>
|
||||
Danger
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'warning')}>
|
||||
Warning
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'success')}>
|
||||
Success
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<ToolbarSeparator />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<UIButton
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 px-2 flex items-center gap-1 font-normal"
|
||||
>
|
||||
<Component className="h-4 w-4" />
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</UIButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'stepper')}>
|
||||
<Rows className="h-4 w-4 mr-2" />
|
||||
Stepper
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'card')}>
|
||||
<LayoutGrid className="h-4 w-4 mr-2" />
|
||||
Card
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'button')}>
|
||||
<MousePointer2 className="h-4 w-4 mr-2" />
|
||||
Button
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'accordion')}>
|
||||
<ChevronDown className="h-4 w-4 mr-2" />
|
||||
Accordion
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'tabs')}>
|
||||
<LayoutPanelTop className="h-4 w-4 mr-2" />
|
||||
Tabs
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'youtube')}>
|
||||
<YoutubeIcon className="h-4 w-4 mr-2" />
|
||||
Youtube
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'tooltip')}>
|
||||
<HelpCircle className="h-4 w-4 mr-2" />
|
||||
Tooltip
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="editor-container">
|
||||
<div className="editor-line-numbers" ref={lineNumbersRef}>
|
||||
<div className="editor-line-numbers-content">
|
||||
{Array.from({ length: lineCount }).map((_, i) => (
|
||||
<div key={i} data-line-number={i + 1} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
ref={editorRef}
|
||||
value={markdown}
|
||||
onChange={(e) => setMarkdown(e.target.value)}
|
||||
className="editor-textarea"
|
||||
spellCheck={false}
|
||||
placeholder="Type '/' for commands..."
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
components/GithubStart.tsx
Normal file
44
components/GithubStart.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const GitHubStarButton: React.FC = () => {
|
||||
const [stars, setStars] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('https://api.github.com/repos/gitfromwildan/docubook')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.stargazers_count !== undefined) {
|
||||
setStars(data.stargazers_count);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error('Failed to fetch stars:', error));
|
||||
}, []);
|
||||
|
||||
const formatStars = (count: number) =>
|
||||
count >= 1000 ? `${(count / 1000).toFixed(1)}K` : `${count}`;
|
||||
|
||||
return (
|
||||
<Link
|
||||
href="https://github.com/gitfromwildan/docubook"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center rounded-full px-3 py-1.5 text-sm font-medium text-muted-foreground border no-underline"
|
||||
>
|
||||
<svg
|
||||
height="16"
|
||||
width="16"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
className="fill-current mr-1.5"
|
||||
>
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.4.07.55-.17.55-.38v-1.32c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.06-.49.06-.49.81.06 1.23.83 1.23.83.72 1.23 1.89.88 2.35.67.07-.52.28-.88.5-1.08-1.77-.2-3.64-.88-3.64-3.93 0-.87.31-1.58.82-2.14-.08-.2-.36-1.01.08-2.12 0 0 .67-.21 2.2.82a7.7 7.7 0 012.01-.27 7.7 7.7 0 012.01.27c1.53-1.03 2.2-.82 2.2-.82.44 1.11.16 1.92.08 2.12.51.56.82 1.27.82 2.14 0 3.06-1.87 3.73-3.65 3.93.29.25.54.73.54 1.48v2.2c0 .21.15.46.55.38A8 8 0 0016 8c0-4.42-3.58-8-8-8z" />
|
||||
</svg>
|
||||
{stars !== null ? formatStars(stars) : '...'}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default GitHubStarButton;
|
||||
@@ -1,37 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
import Link, { LinkProps } from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { ComponentProps, forwardRef } from "react";
|
||||
import { forwardRef } from "react";
|
||||
|
||||
type AnchorProps = ComponentProps<typeof Link> & {
|
||||
type AnchorProps = LinkProps & {
|
||||
absolute?: boolean;
|
||||
activeClassName?: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>;
|
||||
|
||||
const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
|
||||
({ absolute, className = "", activeClassName = "", disabled, children, ...props }, ref) => {
|
||||
({
|
||||
absolute = false,
|
||||
className = "",
|
||||
activeClassName = "",
|
||||
disabled = false,
|
||||
children,
|
||||
href,
|
||||
...props
|
||||
}, ref) => {
|
||||
const path = usePathname();
|
||||
const href = props.href.toString();
|
||||
const hrefStr = href?.toString() || '';
|
||||
|
||||
// Deteksi URL eksternal menggunakan regex
|
||||
const isExternal = /^(https?:\/\/|\/\/)/.test(href);
|
||||
// Check if URL is external
|
||||
const isExternal = /^(https?:\/\/|\/\/)/.test(hrefStr);
|
||||
|
||||
let isMatch = absolute
|
||||
? href.split("/")[1] === path.split("/")[1]
|
||||
: path === href;
|
||||
// Check if current path matches the link
|
||||
const isActive = absolute
|
||||
? hrefStr.split("/")[1] === path?.split("/")[1]
|
||||
: path === hrefStr;
|
||||
|
||||
if (isExternal) isMatch = false; // Hindari mencocokkan URL eksternal
|
||||
|
||||
if (disabled)
|
||||
return (
|
||||
<div className={cn(className, "cursor-not-allowed")}>{children}</div>
|
||||
// Apply active class only for internal links
|
||||
const linkClassName = cn(
|
||||
'transition-colors hover:text-primary',
|
||||
className,
|
||||
!isExternal && isActive && activeClassName
|
||||
);
|
||||
|
||||
if (disabled) {
|
||||
return (
|
||||
<Link ref={ref} className={cn(className, isMatch && activeClassName)} {...props}>
|
||||
<span className={cn(linkClassName, "cursor-not-allowed opacity-50")}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
if (isExternal) {
|
||||
return (
|
||||
<a
|
||||
ref={ref}
|
||||
href={hrefStr}
|
||||
className={linkClassName}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Link
|
||||
ref={ref}
|
||||
href={hrefStr}
|
||||
className={linkClassName}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
type ChangeType = "Added" | "Improved" | "Fixed" | "Deprecated" | "Removed";
|
||||
|
||||
interface ChangeGroupProps {
|
||||
type: ChangeType;
|
||||
changes: string[];
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
const typeColors: Record<ChangeType, string> = {
|
||||
Added: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
Improved: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
|
||||
Fixed: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
|
||||
Deprecated: "bg-red-500/10 text-red-600 dark:text-red-400",
|
||||
Removed: "bg-slate-500/10 text-slate-600 dark:text-slate-400"
|
||||
};
|
||||
|
||||
export function ChangeGroup({ type, changes, expanded }: ChangeGroupProps) {
|
||||
const visibleChanges = expanded ? changes : changes.slice(0, 5);
|
||||
const hasMore = changes.length > 5;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Badge variant="outline" className={cn("font-medium", typeColors[type])}>
|
||||
{type}
|
||||
</Badge>
|
||||
<ul className="list-disc list-inside space-y-2 text-muted-foreground pl-2">
|
||||
{visibleChanges.map((change, i) => (
|
||||
<li key={i} id="changelog" className="text-sm leading-relaxed marker:text-muted-foreground/60">
|
||||
{change}
|
||||
</li>
|
||||
))}
|
||||
{!expanded && hasMore && (
|
||||
<li id="changelog-more" className="text-sm text-muted-foreground/60">
|
||||
+{changes.length - 5} more improvements
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { History } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
interface FloatingVersionTocProps {
|
||||
versions: { version: string; date: string }[];
|
||||
}
|
||||
|
||||
export function FloatingVersionToc({ versions }: FloatingVersionTocProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeVersion, setActiveVersion] = useState(versions[0]?.version || "");
|
||||
|
||||
useEffect(() => {
|
||||
const handleIntersection = (entries: IntersectionObserverEntry[]) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setActiveVersion(entry.target.id.replace("version-", ""));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(handleIntersection, {
|
||||
root: null,
|
||||
rootMargin: "-64px 0px -50% 0px",
|
||||
threshold: 0.25,
|
||||
});
|
||||
|
||||
versions.forEach(({ version }) => {
|
||||
const section = document.getElementById(`version-${version}`);
|
||||
if (section) observer.observe(section);
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [versions]);
|
||||
|
||||
const handleScrollToVersion = (version: string) => {
|
||||
const element = document.getElementById(`version-${version}`);
|
||||
if (element) {
|
||||
setTimeout(() => {
|
||||
element.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}, 100);
|
||||
setActiveVersion(version);
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 md:hidden z-50">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="rounded-full shadow-lg px-4 py-2 flex items-center gap-2">
|
||||
<History className="w-5 h-5" />
|
||||
Version - {activeVersion}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-56 p-2 bg-background shadow-md rounded-lg">
|
||||
<ScrollArea className="h-72">
|
||||
<h2 className="px-4 py-2 font-semibold">Version History</h2>
|
||||
<ul className="space-y-1">
|
||||
{versions.map(({ version }) => (
|
||||
<li key={version}>
|
||||
<Separator />
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={cn("w-full justify-start text-sm", {
|
||||
"text-primary font-bold": activeVersion === version,
|
||||
})}
|
||||
onClick={() => handleScrollToVersion(version)}
|
||||
>
|
||||
v.{version}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { VersionTag } from "./version-tag";
|
||||
import { ChangeGroup } from "./change-group";
|
||||
import { formatDate2 } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
interface VersionEntryProps {
|
||||
version: string;
|
||||
date: string;
|
||||
description?: string;
|
||||
image?: string;
|
||||
changes: {
|
||||
Added?: string[];
|
||||
Improved?: string[];
|
||||
Fixed?: string[];
|
||||
Deprecated?: string[];
|
||||
Removed?: string[];
|
||||
};
|
||||
isLast?: boolean;
|
||||
}
|
||||
|
||||
export function VersionEntry({
|
||||
version,
|
||||
date,
|
||||
description,
|
||||
image,
|
||||
changes,
|
||||
isLast
|
||||
}: VersionEntryProps) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<div id={`v${version}`} className="relative scroll-mt-24">
|
||||
<div className="relative pb-12">
|
||||
{/* Version header */}
|
||||
<div className="flex flex-col gap-4 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<VersionTag version={version} />
|
||||
<time className="text-sm text-muted-foreground">
|
||||
{formatDate2(date)}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{description && (
|
||||
<p className="text-dark text-xl">{description}</p>
|
||||
)}
|
||||
|
||||
{image && (
|
||||
<div className="relative w-full h-0 pb-[56.25%] rounded-lg overflow-hidden border">
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Version ${version} preview`}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
quality={90}
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Changes */}
|
||||
<div className="space-y-6">
|
||||
{Object.entries(changes).map(([type, items]) => (
|
||||
items && items.length > 0 && (
|
||||
<ChangeGroup
|
||||
key={type}
|
||||
type={type as keyof typeof changes}
|
||||
changes={items}
|
||||
expanded={expanded}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Show more/less button */}
|
||||
{Object.values(changes).some(items => items && items.length > 5) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="mt-4 text-muted-foreground hover:bg-transparent hover:text-accent border-none"
|
||||
>
|
||||
{expanded ? (
|
||||
<>
|
||||
Show less
|
||||
<ChevronUpIcon className="ml-2 h-4 w-4" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Show more
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Version divider */}
|
||||
{!isLast && (
|
||||
<div className="absolute left-0 bottom-0 w-full">
|
||||
<Separator className="my-8" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function VersionTag({ version }: { version: string }) {
|
||||
return (
|
||||
<span className={cn(
|
||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium",
|
||||
"bg-primary/10 text-primary"
|
||||
)}>
|
||||
v{version}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { cn, formatDate2 } from "@/lib/utils";
|
||||
import { History, PanelLeftOpen, PanelLeftClose } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface VersionTocProps {
|
||||
versions: Array<{
|
||||
version: string;
|
||||
date: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
export function VersionToc({ versions }: VersionTocProps) {
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const hash = window.location.hash.slice(1);
|
||||
if (hash) {
|
||||
setActiveId(hash);
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.id;
|
||||
setActiveId(id);
|
||||
window.history.pushState(null, "", `#${id}`);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.2,
|
||||
rootMargin: "-20% 0px -60% 0px",
|
||||
}
|
||||
);
|
||||
|
||||
versions.forEach(({ version }) => {
|
||||
const element = document.getElementById(`v${version}`);
|
||||
if (element) observer.observe(element);
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [versions]);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"sticky top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300 z-20 hidden md:flex",
|
||||
collapsed ? "w-[48px]" : "w-[250px]"
|
||||
)}
|
||||
>
|
||||
{/* Toggle Button */}
|
||||
<div className="absolute top-0 right-0 py-2 px-0 ml-6 z-30">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
|
||||
onClick={() => setCollapsed((prev) => !prev)}
|
||||
>
|
||||
{collapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{!collapsed && (
|
||||
<div className="flex flex-col gap-2 w-full pt-8 pr-2">
|
||||
<div className="flex mb-2">
|
||||
<h2 className="font-semibold text-lg">Changelog</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<History className="w-4 h-4" />
|
||||
<h3 className="font-medium text-sm">Version History</h3>
|
||||
</div>
|
||||
<ScrollArea className="h-full pr-2">
|
||||
<div className="flex flex-col gap-1.5 text-sm dark:text-stone-300/85 text-stone-800 pr-4">
|
||||
{versions.map(({ version, date }) => (
|
||||
<a
|
||||
key={version}
|
||||
href={`#v${version}`}
|
||||
className={cn(
|
||||
"hover:text-foreground transition-colors py-1",
|
||||
activeId === `v${version}` && "font-medium text-primary"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
const element = document.getElementById(`v${version}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
setActiveId(`v${version}`);
|
||||
window.history.pushState(null, "", `#v${version}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
v{version}
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
{formatDate2(date)}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import { Fragment } from "react";
|
||||
|
||||
export default function DocsBreadcrumb({ paths }: { paths: string[] }) {
|
||||
return (
|
||||
<div className="pb-5">
|
||||
<div className="pb-5 max-lg:pt-12">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
|
||||
@@ -15,46 +15,28 @@ interface FooterConfig {
|
||||
social?: SocialItem[];
|
||||
}
|
||||
|
||||
interface MetaConfig {
|
||||
title: string;
|
||||
description: string;
|
||||
baseURL: string;
|
||||
favicon: string;
|
||||
}
|
||||
|
||||
interface DocuConfig {
|
||||
footer: FooterConfig;
|
||||
meta: MetaConfig;
|
||||
navbar: any;
|
||||
repository: any;
|
||||
routes: any[];
|
||||
}
|
||||
|
||||
// Type assertion for docu.json
|
||||
const docuConfig = docuData as DocuConfig;
|
||||
const docuConfig = docuData as {
|
||||
footer: FooterConfig;
|
||||
};
|
||||
|
||||
export function Footer() {
|
||||
const { footer } = docuConfig;
|
||||
const { meta } = docuConfig;
|
||||
return (
|
||||
<footer className="w-full py-4 px-2 border-t lg:py-8 bg-background">
|
||||
<div className="container flex flex-wrap items-center justify-between text-sm">
|
||||
<div className="items-start justify-center hidden gap-4 lg:flex-col lg:flex lg:w-3/5">
|
||||
<h3 className="text-lg font-bold font-code">{meta.title}</h3>
|
||||
<span className="w-3/4 text-base text-wrap text-muted-foreground">{meta.description}</span>
|
||||
<div className="flex items-center gap-6 mt-2">
|
||||
<footer className="w-full py-8 border-t bg-background">
|
||||
<div className="container flex flex-col lg:flex-row items-center justify-between text-sm">
|
||||
<div className="flex flex-col items-center lg:items-start justify-start gap-4 w-full lg:w-3/5 text-center lg:text-left">
|
||||
<p className="text-muted-foreground">
|
||||
Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
|
||||
</p>
|
||||
<div className="flex items-center justify-center lg:justify-start gap-6 mt-2 w-full">
|
||||
<FooterButtons />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center w-full gap-4 mt-4 lg:items-end lg:w-2/5">
|
||||
<p className="text-center text-muted-foreground">
|
||||
Copyright © {new Date().getFullYear()} {footer.copyright} - <MadeWith />
|
||||
</p>
|
||||
<div className="hidden lg:flex">
|
||||
<div className="hidden lg:flex items-center justify-end lg:w-2/5">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,26 +11,26 @@ import { Logo, NavMenu } from "@/components/navbar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlignLeftIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
|
||||
import { FooterButtons } from "@/components/footer";
|
||||
import { DialogTitle } from "@/components/ui/dialog";
|
||||
import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import DocsMenu from "@/components/docs-menu";
|
||||
import { ModeToggle } from "@/components/theme-toggle";
|
||||
|
||||
export function Leftbar() {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
// Toggle Button Component
|
||||
export function ToggleButton({
|
||||
collapsed,
|
||||
onToggle
|
||||
}: {
|
||||
collapsed: boolean,
|
||||
onToggle: () => void
|
||||
}) {
|
||||
return (
|
||||
<aside
|
||||
className={`sticky lg:flex hidden top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300
|
||||
${collapsed ? "w-[48px]" : "w-[250px]"} flex flex-col pr-2`}
|
||||
>
|
||||
{/* Toggle Button */}
|
||||
<div className="absolute top-0 right-0 py-6 px-0 ml-6 z-10 -mt-4">
|
||||
<div className="absolute top-0 right-0 py-6 z-10 -mt-4">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
className="hover:bg-transparent hover:text-inherit border-none text-muted-foreground"
|
||||
onClick={() => setCollapsed((prev) => !prev)}
|
||||
onClick={onToggle}
|
||||
>
|
||||
{collapsed ? (
|
||||
<PanelLeftOpen size={18} />
|
||||
@@ -39,9 +39,21 @@ export function Leftbar() {
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Leftbar() {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const toggleCollapse = () => setCollapsed(prev => !prev);
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`sticky lg:flex hidden top-16 h-[calc(100vh-4rem)] border-r bg-background transition-all duration-300
|
||||
${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
|
||||
>
|
||||
<ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
|
||||
{/* Scrollable DocsMenu */}
|
||||
<ScrollArea className="flex-1 px-2 pb-4">
|
||||
<ScrollArea className="flex-1 px-0.5 pb-4">
|
||||
{!collapsed && <DocsMenu />}
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
@@ -57,7 +69,10 @@ export function SheetLeftbar() {
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent className="flex flex-col gap-4 px-0" side="left">
|
||||
<DialogTitle className="sr-only">Menu</DialogTitle>
|
||||
<DialogTitle className="sr-only">Navigation Menu</DialogTitle>
|
||||
<DialogDescription className="sr-only">
|
||||
Main navigation menu with links to different sections
|
||||
</DialogDescription>
|
||||
<SheetHeader>
|
||||
<SheetClose className="px-5" asChild>
|
||||
<span className="px-2"><Logo /></span>
|
||||
@@ -70,9 +85,6 @@ export function SheetLeftbar() {
|
||||
<div className="mx-2 px-5">
|
||||
<DocsMenu isSheet />
|
||||
</div>
|
||||
<div className="px-6 py-2 flex justify-start items-center gap-6">
|
||||
<FooterButtons />
|
||||
</div>
|
||||
<div className="flex w-2/4 px-5">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
|
||||
102
components/markdown/KeyboardMdx.tsx
Normal file
102
components/markdown/KeyboardMdx.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
|
||||
// Map of special keys to their Mac symbols
|
||||
const macKeyMap: Record<string, string> = {
|
||||
command: '⌘',
|
||||
cmd: '⌘',
|
||||
option: '⌥',
|
||||
alt: '⌥',
|
||||
shift: '⇧',
|
||||
ctrl: '⌃',
|
||||
control: '⌃',
|
||||
tab: '⇥',
|
||||
caps: '⇪',
|
||||
enter: '⏎',
|
||||
return: '⏎',
|
||||
delete: '⌫',
|
||||
escape: '⎋',
|
||||
esc: '⎋',
|
||||
up: '↑',
|
||||
down: '↓',
|
||||
left: '←',
|
||||
right: '→',
|
||||
space: '␣',
|
||||
};
|
||||
|
||||
// Map of special keys to their Windows display text
|
||||
const windowsKeyMap: Record<string, string> = {
|
||||
command: 'Win',
|
||||
cmd: 'Win',
|
||||
option: 'Alt',
|
||||
alt: 'Alt',
|
||||
ctrl: 'Ctrl',
|
||||
control: 'Ctrl',
|
||||
delete: 'Del',
|
||||
escape: 'Esc',
|
||||
esc: 'Esc',
|
||||
enter: 'Enter',
|
||||
return: 'Enter',
|
||||
tab: 'Tab',
|
||||
caps: 'Caps',
|
||||
shift: 'Shift',
|
||||
space: 'Space',
|
||||
up: '↑',
|
||||
down: '↓',
|
||||
left: '←',
|
||||
right: '→',
|
||||
};
|
||||
|
||||
export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
|
||||
/** The key to display (e.g., 'cmd', 'ctrl', 'a') */
|
||||
show?: string;
|
||||
/** Platform style - 'window' or 'mac' */
|
||||
type?: 'window' | 'mac';
|
||||
/** Custom content to display (overrides automatic rendering) */
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const KbdComponent: React.FC<KbdProps> = ({
|
||||
show: keyProp,
|
||||
type = 'window',
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
// Get the display text based on the key and type
|
||||
const getKeyDisplay = (): React.ReactNode => {
|
||||
if (!keyProp || typeof keyProp !== 'string') return null;
|
||||
|
||||
const lowerKey = keyProp.toLowerCase();
|
||||
|
||||
// For Mac type, return the symbol if it exists
|
||||
if (type === 'mac') {
|
||||
return macKeyMap[lowerKey] || keyProp;
|
||||
}
|
||||
|
||||
// For Windows, return the formatted key if it exists, otherwise capitalize the first letter
|
||||
return windowsKeyMap[lowerKey] || (keyProp.charAt(0).toUpperCase() + keyProp.slice(1));
|
||||
};
|
||||
|
||||
// Determine what to render
|
||||
const renderContent = () => {
|
||||
// If children are provided, always use them
|
||||
if (children !== undefined && children !== null && children !== '') {
|
||||
return children;
|
||||
}
|
||||
// Otherwise use the generated display
|
||||
return getKeyDisplay() || keyProp || '';
|
||||
};
|
||||
|
||||
return (
|
||||
<kbd
|
||||
className="inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-gray-800 bg-gray-100 border border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
|
||||
{...props}
|
||||
>
|
||||
{renderContent()}
|
||||
</kbd>
|
||||
);
|
||||
};
|
||||
|
||||
// Export the component
|
||||
export const Kbd = KbdComponent;
|
||||
// Default export for backward compatibility
|
||||
export default KbdComponent;
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ComponentProps } from "react";
|
||||
import Copy from "./copy";
|
||||
import Copy from "./CopyMdx";
|
||||
|
||||
export default function Pre({
|
||||
children,
|
||||
109
components/markdown/ReleaseMdx.tsx
Normal file
109
components/markdown/ReleaseMdx.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { PlusCircle, Wrench, Zap, AlertTriangle, XCircle } from 'lucide-react';
|
||||
|
||||
interface ReleaseProps extends PropsWithChildren {
|
||||
version: string;
|
||||
title: string;
|
||||
date?: string;
|
||||
}
|
||||
|
||||
function Release({ version, title, date, children }: ReleaseProps) {
|
||||
|
||||
return (
|
||||
<div className="mb-16 group">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="bg-primary/10 text-primary border-2 border-primary/20 rounded-full px-4 py-1.5 text-base font-medium">
|
||||
v{version}
|
||||
</div>
|
||||
{date && (
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{new Date(date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-foreground/90 mb-3">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChangesProps extends PropsWithChildren {
|
||||
type: 'added' | 'fixed' | 'improved' | 'deprecated' | 'removed';
|
||||
}
|
||||
|
||||
const typeConfig = {
|
||||
added: {
|
||||
label: 'Added',
|
||||
className: 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300',
|
||||
icon: PlusCircle,
|
||||
},
|
||||
fixed: {
|
||||
label: 'Fixed',
|
||||
className: 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300',
|
||||
icon: Wrench,
|
||||
},
|
||||
improved: {
|
||||
label: 'Improved',
|
||||
className: 'bg-cyan-100 dark:bg-cyan-900/50 text-cyan-700 dark:text-cyan-300',
|
||||
icon: Zap,
|
||||
},
|
||||
deprecated: {
|
||||
label: 'Deprecated',
|
||||
className: 'bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300',
|
||||
icon: AlertTriangle,
|
||||
},
|
||||
removed: {
|
||||
label: 'Removed',
|
||||
className: 'bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300',
|
||||
icon: XCircle,
|
||||
},
|
||||
} as const;
|
||||
|
||||
function Changes({ type, children }: ChangesProps) {
|
||||
const config = typeConfig[type] || typeConfig.added;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={cn("px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1.5", config.className)}>
|
||||
<config.icon className="h-3.5 w-3.5" />
|
||||
<span>{config.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="list-none pl-0 space-y-2 text-foreground/80">
|
||||
{React.Children.map(children, (child, index) => {
|
||||
// Jika teks dimulai dengan - atau *, hapus karakter tersebut
|
||||
const processedChild = typeof child === 'string'
|
||||
? child.trim().replace(/^[-*]\s+/, '')
|
||||
: child;
|
||||
|
||||
return (
|
||||
<li key={index} className="leading-relaxed">
|
||||
{processedChild}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Release, Changes };
|
||||
|
||||
const ReleaseMdx = {
|
||||
Release,
|
||||
Changes
|
||||
};
|
||||
|
||||
export default ReleaseMdx;
|
||||
29
components/markdown/mdx-provider.tsx
Normal file
29
components/markdown/mdx-provider.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
|
||||
import { Kbd } from './KeyboardMdx';
|
||||
|
||||
// Define components mapping
|
||||
const components = {
|
||||
// Keyboard components
|
||||
Kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
|
||||
kbd: Kbd as React.ComponentType<React.HTMLAttributes<HTMLElement> & { type?: 'window' | 'mac' }>,
|
||||
};
|
||||
|
||||
interface MDXProviderWrapperProps {
|
||||
source: string;
|
||||
}
|
||||
|
||||
export function MDXProviderWrapper({ source }: MDXProviderWrapperProps) {
|
||||
return (
|
||||
<div className="prose dark:prose-invert max-w-none">
|
||||
<MDXRemote
|
||||
source={source}
|
||||
components={components}
|
||||
options={{
|
||||
parseFrontmatter: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +1,128 @@
|
||||
"use client";
|
||||
|
||||
import { ListIcon } from "lucide-react";
|
||||
import { List, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import TocObserver from "./toc-observer";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import * as React from "react";
|
||||
import { useRef, useMemo } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Button } from "./ui/button";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useScrollPosition, useActiveSection } from "@/hooks";
|
||||
import { TocItem } from "@/lib/toc";
|
||||
|
||||
interface MobTocProps {
|
||||
tocs: {
|
||||
level: number;
|
||||
text: string;
|
||||
href: string;
|
||||
}[];
|
||||
tocs: TocItem[];
|
||||
}
|
||||
|
||||
const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
|
||||
const handleClick = React.useCallback((event: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||
callback();
|
||||
}
|
||||
}, [ref, callback]);
|
||||
|
||||
React.useEffect(() => {
|
||||
document.addEventListener('mousedown', handleClick);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClick);
|
||||
};
|
||||
}, [handleClick]);
|
||||
};
|
||||
|
||||
export default function MobToc({ tocs }: MobTocProps) {
|
||||
const pathname = usePathname();
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
const tocRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Use custom hooks
|
||||
const { activeId, setActiveId } = useActiveSection(tocs);
|
||||
|
||||
// Only show on /docs pages
|
||||
const isDocsPage = useMemo(() => pathname?.startsWith('/docs'), [pathname]);
|
||||
|
||||
// Toggle expanded state
|
||||
const toggleExpanded = React.useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setIsExpanded(prev => !prev);
|
||||
}, []);
|
||||
|
||||
// Close TOC when clicking outside
|
||||
useClickOutside(tocRef, () => {
|
||||
if (isExpanded) {
|
||||
setIsExpanded(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle body overflow when TOC is expanded
|
||||
React.useEffect(() => {
|
||||
if (isExpanded) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isExpanded]);
|
||||
|
||||
// Don't render anything if not on docs page or no TOC items
|
||||
if (!isDocsPage || !tocs?.length) return null;
|
||||
|
||||
const chevronIcon = isExpanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="lg:hidden block w-full">
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="toc">
|
||||
<AccordionTrigger className="hover:no-underline">
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
ref={tocRef}
|
||||
className="lg:hidden fixed top-16 left-0 right-0 z-50"
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -100, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
>
|
||||
<div className="w-full bg-background/95 backdrop-blur-sm border-b border-stone-200 dark:border-stone-800 shadow-sm">
|
||||
<div className="sm:px-8 px-4 py-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-between h-auto py-2 px-2 -mx-1 rounded-md hover:bg-transparent hover:text-inherit"
|
||||
onClick={toggleExpanded}
|
||||
aria-label={isExpanded ? 'Collapse table of contents' : 'Expand table of contents'}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ListIcon className="w-4 h-4" />
|
||||
<List className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
<span className="font-medium text-sm">On this page</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="h-auto py-2">
|
||||
<TocObserver data={tocs} />
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
{chevronIcon}
|
||||
</Button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
ref={contentRef}
|
||||
className="mt-2 pb-2 max-h-[60vh] overflow-y-auto px-1 -mx-1"
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||||
>
|
||||
<TocObserver
|
||||
data={tocs}
|
||||
activeId={activeId}
|
||||
onActiveIdChange={setActiveId}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -38,7 +38,15 @@ export function Logo() {
|
||||
|
||||
return (
|
||||
<Link href="/" className="flex items-center gap-1.5">
|
||||
<Image src={navbar.logo.src} alt={navbar.logo.alt} width="24" height="24" />
|
||||
<div className="relative w-8 h-8">
|
||||
<Image
|
||||
src={navbar.logo.src}
|
||||
alt={navbar.logo.alt}
|
||||
fill
|
||||
sizes="32px"
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="font-bold font-code text-md">{navbar.logoText}</h2>
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -1,252 +0,0 @@
|
||||
type InsertAtCursor = (textArea: HTMLTextAreaElement, text: string) => void;
|
||||
|
||||
// toolbar handler
|
||||
export const handleMetadataClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
const metadata = `---
|
||||
title: Post Title
|
||||
description: Your Post Description
|
||||
date: ${new Date().toISOString().split("T")[0]}
|
||||
image: example-img.png
|
||||
---\n\n`;
|
||||
|
||||
insertAtCursor(textArea, metadata);
|
||||
}
|
||||
};
|
||||
|
||||
export const handleParagraphClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "this is regular text, **bold text**, *italic text*\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleHeading2Click = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "## Heading 2\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleHeading3Click = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "### Heading 3\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleBulletListClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "- List One\n- List Two\n- Other List\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleNumberedListClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "1. Number One\n2. Number Two\n3. Number Three\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleLinkClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "[Visit OpenAI](https://www.openai.com)\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleImageClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleBlockquoteClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(textArea, "> The overriding design goal for Markdown's formatting syntax is to make it as readable as possible.\n");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleCodeBlockClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(
|
||||
textArea,
|
||||
"```javascript:main.js showLineNumbers {3-4}\nfunction isRocketAboutToCrash() {\n // Check if the rocket is stable\n if (!isStable()) {\n NoCrash(); // Prevent the crash\n }\n}\n```\n"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const handleTableClick = (insertAtCursor: InsertAtCursor) => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
insertAtCursor(
|
||||
textArea,
|
||||
`| **Feature** | **Description** |
|
||||
| ------------------------------- | ----------------------------------------------------- |
|
||||
| MDX Support | Write interactive documentation with MDX. |
|
||||
| Nested Pages | Organize content in a nested, hierarchical structure. |
|
||||
| Blog Section | Include a dedicated blog section. |
|
||||
| Pagination | Split content across multiple pages. |
|
||||
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const handleNoteClick = (insertAtCursor: InsertAtCursor, type: string) => {
|
||||
return () => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (textArea) {
|
||||
const noteTemplate = `<Note type="${type}" title="${type.charAt(0).toUpperCase() + type.slice(1)}">\n This is a ${type} message.\n</Note>\n`;
|
||||
insertAtCursor(textArea, noteTemplate);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const handleComponentClick = (insertAtCursor: InsertAtCursor, component: string) => {
|
||||
return () => {
|
||||
const textArea = document.querySelector("textarea");
|
||||
if (!textArea) return;
|
||||
|
||||
const templates: { [key: string]: string } = {
|
||||
stepper: `<Stepper>
|
||||
<StepperItem title="Step 1">
|
||||
Content for step 1
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2">
|
||||
Content for step 2
|
||||
</StepperItem>
|
||||
</Stepper>\n`,
|
||||
card: `<Card title="Click on me" icon="Link" href="/docs/getting-started/components/button">
|
||||
This is how you use a card with an icon and a link. Clicking on this card brings you to the Card Group page.
|
||||
</Card>\n`,
|
||||
button: `<Button
|
||||
text="Click Me"
|
||||
href="#"
|
||||
icon="ArrowRight"
|
||||
size="md"
|
||||
variation="primary"
|
||||
/>\n`,
|
||||
accordion: `<Accordion title="Markdown">
|
||||
this is an example of plain text content from the accordion component and below is markdown ;
|
||||
1. number one
|
||||
2. number two
|
||||
3. number three
|
||||
</Accordion>\n`,
|
||||
youtube: `<Youtube videoId="your-video-id" />\n`,
|
||||
tooltip: `What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ? Create interactive nested documentations using MDX.\n`,
|
||||
tabs: `<Tabs defaultValue="tab1" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">
|
||||
Content for tab 1
|
||||
</TabsContent>
|
||||
<TabsContent value="tab2">
|
||||
Content for tab 2
|
||||
</TabsContent>
|
||||
</Tabs>\n`
|
||||
};
|
||||
|
||||
insertAtCursor(textArea, templates[component]);
|
||||
};
|
||||
};
|
||||
|
||||
// slash command handler
|
||||
export const MARK_COMPONENTS = [
|
||||
{ label: "Metadata", value: `---
|
||||
title: Post Title
|
||||
description: Your Post Description
|
||||
date: ${new Date().toISOString().split("T")[0]}
|
||||
image: example-img.png
|
||||
---\n\n` },
|
||||
|
||||
{ label: "Heading 2", value: "## Heading 2\n" },
|
||||
{ label: "Heading 3", value: "### Heading 3\n" },
|
||||
|
||||
{ label: "Paragraph", value: "this is regular text, **bold text**, *italic text*\n" },
|
||||
|
||||
{ label: "Bullet List", value: "- List One\n- List Two\n- Other List\n" },
|
||||
{ label: "Numbered List", value: "1. Number One\n2. Number Two\n3. Number Three\n" },
|
||||
|
||||
{ label: "Blockquote", value: "> The overriding design goal for Markdown's formatting syntax is to make it as readable as possible.\n" },
|
||||
|
||||
{ label: "Code Block", value: "```javascript:main.js showLineNumbers {3-4}\nfunction isRocketAboutToCrash() {\n // Check if the rocket is stable\n if (!isStable()) {\n NoCrash(); // Prevent the crash\n }\n}\n```\n" },
|
||||
|
||||
{ label: "Table", value: `| **Feature** | **Description** |
|
||||
| ------------------------------- | ----------------------------------------------------- |
|
||||
| MDX Support | Write interactive documentation with MDX. |
|
||||
| Nested Pages | Organize content in a nested, hierarchical structure. |
|
||||
| Blog Section | Include a dedicated blog section. |
|
||||
| Pagination | Split content across multiple pages. |
|
||||
|
||||
` },
|
||||
|
||||
{ label: "Link", value: "[Visit OpenAI](https://www.openai.com)\n" },
|
||||
{ label: "Image", value: "\n" },
|
||||
|
||||
// ⭐ Komponen Interaktif DocuBook ⭐
|
||||
{ label: "Stepper", value: `<Stepper>
|
||||
<StepperItem title="Step 1">
|
||||
Content for step 1
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2">
|
||||
Content for step 2
|
||||
</StepperItem>
|
||||
</Stepper>\n` },
|
||||
|
||||
{ label: "Button", value: `<Button
|
||||
text="Click Me"
|
||||
href="#"
|
||||
icon="ArrowRight"
|
||||
size="md"
|
||||
variation="primary"
|
||||
/>\n` },
|
||||
|
||||
{ label: "Accordion", value: `<Accordion title="Markdown">
|
||||
This is an example of plain text content inside the accordion component.
|
||||
1. Number One
|
||||
2. Number Two
|
||||
3. Number Three
|
||||
</Accordion>\n` },
|
||||
|
||||
{ label: "Youtube", value: `<Youtube videoId="your-video-id" />\n` },
|
||||
|
||||
{ label: "Tooltip", value: `What do you know about <Tooltip text="DocuBook" tip="npx @docubook/create@latest" /> ?\n` },
|
||||
|
||||
{ label: "Tabs", value: `<Tabs defaultValue="tab1" className="pt-5 pb-1">
|
||||
<TabsList>
|
||||
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
||||
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="tab1">
|
||||
Content for tab 1
|
||||
</TabsContent>
|
||||
<TabsContent value="tab2">
|
||||
Content for tab 2
|
||||
</TabsContent>
|
||||
</Tabs>\n` },
|
||||
|
||||
{ label: "Note", value: `<Note type="note" title="Note">
|
||||
This is a note message.
|
||||
</Note>\n` },
|
||||
|
||||
{ label: "Danger", value: `<Note type="danger" title="Danger">
|
||||
This is a danger message.
|
||||
</Note>\n` },
|
||||
|
||||
{ label: "Warning", value: `<Note type="warning" title="Warning">
|
||||
This is a warning message.
|
||||
</Note>\n` },
|
||||
|
||||
{ label: "Success", value: `<Note type="success" title="Success">
|
||||
This is a success message.
|
||||
</Note>\n` }
|
||||
|
||||
];
|
||||
@@ -1,52 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowUpIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "./ui/button";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function ScrollToTop() {
|
||||
const [show, setShow] = useState(false);
|
||||
interface ScrollToTopProps {
|
||||
className?: string;
|
||||
showIcon?: boolean;
|
||||
offset?: number; // Optional offset in pixels from the trigger point
|
||||
}
|
||||
|
||||
export function ScrollToTop({
|
||||
className,
|
||||
showIcon = true,
|
||||
offset = 0
|
||||
}: ScrollToTopProps) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const checkScroll = useCallback(() => {
|
||||
// Calculate 50% of viewport height
|
||||
const halfViewportHeight = window.innerHeight * 0.5;
|
||||
// Check if scrolled past half viewport height (plus any offset)
|
||||
const scrolledPastHalfViewport = window.scrollY > (halfViewportHeight + offset);
|
||||
|
||||
// Only update state if it changes to prevent unnecessary re-renders
|
||||
if (scrolledPastHalfViewport !== isVisible) {
|
||||
setIsVisible(scrolledPastHalfViewport);
|
||||
}
|
||||
}, [isVisible, offset]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
// Check if user has scrolled to bottom
|
||||
const scrolledToBottom =
|
||||
window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100;
|
||||
// Initial check
|
||||
checkScroll();
|
||||
|
||||
if (scrolledToBottom) {
|
||||
setShow(true);
|
||||
} else {
|
||||
setShow(false);
|
||||
}
|
||||
// Set up scroll listener with debounce for better performance
|
||||
let timeoutId: NodeJS.Timeout;
|
||||
const handleScroll = () => {
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(checkScroll, 100);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
if (timeoutId) clearTimeout(timeoutId);
|
||||
};
|
||||
}, [checkScroll]);
|
||||
|
||||
const scrollToTop = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"lg:hidden fixed top-16 items-center z-50 w-full transition-all duration-300",
|
||||
show ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
|
||||
"mt-4 pt-4 border-t border-stone-200 dark:border-stone-800",
|
||||
"transition-opacity duration-300",
|
||||
isVisible ? 'opacity-100' : 'opacity-0',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center items-center pt-3 mx-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 rounded-full shadow-md bg-background/80 backdrop-blur-sm border-primary/20 hover:bg-background hover:text-primary"
|
||||
<Link
|
||||
href="#"
|
||||
onClick={scrollToTop}
|
||||
className={cn(
|
||||
"inline-flex items-center text-sm text-muted-foreground hover:text-foreground",
|
||||
"transition-all duration-200 hover:translate-y-[-1px]"
|
||||
)}
|
||||
aria-label="Scroll to top"
|
||||
>
|
||||
<ArrowUpIcon className="h-4 w-4" />
|
||||
<span className="font-medium">Scroll to Top</span>
|
||||
</Button>
|
||||
</div>
|
||||
{showIcon && <ArrowUpIcon className="mr-1 h-3.5 w-3.5 flex-shrink-0" />}
|
||||
<span>Scroll to Top</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import Anchor from "./anchor";
|
||||
import { advanceSearch, cn } from "@/lib/utils";
|
||||
@@ -97,9 +98,14 @@ export default function Search() {
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<div className="relative flex-1 cursor-pointer max-w-[140px]">
|
||||
<div className="flex items-center">
|
||||
<div className="md:hidden p-2 -ml-2">
|
||||
<SearchIcon className="h-5 w-5 text-stone-500 dark:text-stone-400" />
|
||||
</div>
|
||||
<div className="hidden md:block w-full">
|
||||
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-500 dark:text-stone-400" />
|
||||
<Input
|
||||
className="md:w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
|
||||
className="w-full rounded-full dark:bg-background/95 bg-background border h-9 pl-10 pr-0 sm:pr-4 text-sm shadow-sm overflow-ellipsis"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
@@ -108,18 +114,24 @@ export default function Search() {
|
||||
<span>K</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="p-0 max-w-[650px] sm:top-[38%] top-[45%] !rounded-md">
|
||||
<DialogTitle className="sr-only">Search</DialogTitle>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="sr-only">Search Documentation</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogDescription className="sr-only">
|
||||
Search through the documentation
|
||||
</DialogDescription>
|
||||
<input
|
||||
value={searchedInput}
|
||||
onChange={(e) => setSearchedInput(e.target.value)}
|
||||
placeholder="Type something to search..."
|
||||
autoFocus
|
||||
className="h-14 px-6 bg-transparent border-b text-[14px] outline-none"
|
||||
className="h-14 px-6 bg-transparent border-b text-[14px] outline-none w-full"
|
||||
aria-label="Search documentation"
|
||||
/>
|
||||
</DialogHeader>
|
||||
{filteredResults.length == 0 && searchedInput && (
|
||||
<p className="text-muted-foreground mx-auto mt-2 text-sm">
|
||||
No results found for{" "}
|
||||
@@ -149,11 +161,20 @@ export default function Search() {
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center w-fit h-full py-3 gap-1.5 px-2",
|
||||
"flex items-center w-full h-full py-3 gap-1.5 px-2 justify-between",
|
||||
level > 1 && "border-l pl-4"
|
||||
)}
|
||||
>
|
||||
<FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" /> {item.title}
|
||||
<div className="flex items-center">
|
||||
<FileTextIcon className="h-[1.1rem] w-[1.1rem] mr-1" />
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
{isActive && (
|
||||
<div className="hidden md:flex items-center text-xs text-muted-foreground">
|
||||
<span>Return</span>
|
||||
<CornerDownLeftIcon className="h-3 w-3 ml-1" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Anchor>
|
||||
</DialogClose>
|
||||
|
||||
@@ -3,26 +3,62 @@
|
||||
import { getDocsTocs } from "@/lib/markdown";
|
||||
import clsx from "clsx";
|
||||
import Link from "next/link";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ScrollToTop } from "./scroll-to-top";
|
||||
import { TocItem } from "@/lib/toc";
|
||||
|
||||
type Props = { data: Awaited<ReturnType<typeof getDocsTocs>> };
|
||||
interface TocObserverProps {
|
||||
data: TocItem[];
|
||||
activeId?: string | null;
|
||||
onActiveIdChange?: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export default function TocObserver({ data }: Props) {
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
export default function TocObserver({
|
||||
data,
|
||||
activeId: externalActiveId,
|
||||
onActiveIdChange
|
||||
}: TocObserverProps) {
|
||||
const [internalActiveId, setInternalActiveId] = useState<string | null>(null);
|
||||
const observer = useRef<IntersectionObserver | null>(null);
|
||||
const [clickedId, setClickedId] = useState<string | null>(null);
|
||||
const itemRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
|
||||
|
||||
// Use external activeId if provided, otherwise use internal state
|
||||
const activeId = externalActiveId !== undefined ? externalActiveId : internalActiveId;
|
||||
const setActiveId = onActiveIdChange || setInternalActiveId;
|
||||
|
||||
// Handle intersection observer for auto-highlighting
|
||||
useEffect(() => {
|
||||
const handleIntersect = (entries: IntersectionObserverEntry[]) => {
|
||||
const visibleEntry = entries.find((entry) => entry.isIntersecting);
|
||||
if (visibleEntry) {
|
||||
setActiveId(visibleEntry.target.id);
|
||||
const visibleEntries = entries.filter(entry => entry.isIntersecting);
|
||||
|
||||
// Find the most recently scrolled-into-view element
|
||||
const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
|
||||
// Prefer the entry that's more visible or higher on the page
|
||||
const prevRatio = prev?.intersectionRatio || 0;
|
||||
const currentRatio = current.intersectionRatio;
|
||||
|
||||
if (currentRatio > prevRatio) return current;
|
||||
if (currentRatio === prevRatio &&
|
||||
current.boundingClientRect.top < prev.boundingClientRect.top) {
|
||||
return current;
|
||||
}
|
||||
return prev;
|
||||
}, visibleEntries[0]);
|
||||
|
||||
if (mostVisibleEntry && !clickedId) {
|
||||
const newActiveId = mostVisibleEntry.target.id;
|
||||
if (newActiveId !== activeId) {
|
||||
setActiveId(newActiveId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
observer.current = new IntersectionObserver(handleIntersect, {
|
||||
root: null,
|
||||
rootMargin: "-20px 0px 0px 0px",
|
||||
threshold: 0.1,
|
||||
rootMargin: "-20% 0px -70% 0px", // Adjusted margins for better section detection
|
||||
threshold: [0, 0.1, 0.5, 0.9, 1], // Multiple thresholds for better accuracy
|
||||
});
|
||||
|
||||
const elements = data.map((item) =>
|
||||
@@ -35,6 +71,11 @@ export default function TocObserver({ data }: Props) {
|
||||
}
|
||||
});
|
||||
|
||||
// Set initial active ID if none is set
|
||||
if (!activeId && elements[0]) {
|
||||
setActiveId(elements[0].id);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (observer.current) {
|
||||
elements.forEach((el) => {
|
||||
@@ -44,26 +85,180 @@ export default function TocObserver({ data }: Props) {
|
||||
});
|
||||
}
|
||||
};
|
||||
}, [data]);
|
||||
}, [data, clickedId, activeId, setActiveId]);
|
||||
|
||||
const handleLinkClick = useCallback((id: string) => {
|
||||
setClickedId(id);
|
||||
setActiveId(id);
|
||||
|
||||
// Reset the clicked state after a delay to allow for smooth scrolling
|
||||
const timer = setTimeout(() => {
|
||||
setClickedId(null);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [setActiveId]);
|
||||
|
||||
// Function to check if an item has children
|
||||
const hasChildren = (currentId: string, currentLevel: number) => {
|
||||
const currentIndex = data.findIndex(item => item.href.slice(1) === currentId);
|
||||
if (currentIndex === -1 || currentIndex === data.length - 1) return false;
|
||||
|
||||
const nextItem = data[currentIndex + 1];
|
||||
return nextItem.level > currentLevel;
|
||||
};
|
||||
|
||||
// Calculate scroll progress for the active section
|
||||
const [scrollProgress, setScrollProgress] = useState(0);
|
||||
const [activeSectionIndex, setActiveSectionIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (!activeId) return;
|
||||
|
||||
const activeElement = document.getElementById(activeId);
|
||||
if (!activeElement) return;
|
||||
|
||||
const rect = activeElement.getBoundingClientRect();
|
||||
const windowHeight = window.innerHeight;
|
||||
const elementTop = rect.top;
|
||||
const elementHeight = rect.height;
|
||||
|
||||
// Calculate how much of the element is visible
|
||||
let progress = 0;
|
||||
if (elementTop < windowHeight) {
|
||||
progress = Math.min(1, (windowHeight - elementTop) / (windowHeight + elementHeight));
|
||||
}
|
||||
|
||||
setScrollProgress(progress);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [activeId]);
|
||||
|
||||
// Update active section index when activeId changes
|
||||
useEffect(() => {
|
||||
if (activeId) {
|
||||
const index = data.findIndex(item => item.href.slice(1) === activeId);
|
||||
if (index !== -1) {
|
||||
setActiveSectionIndex(index);
|
||||
}
|
||||
}
|
||||
}, [activeId, data]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2.5 text-sm dark:text-stone-300/85 text-stone-800 ml-0.5">
|
||||
{data.map(({ href, level, text }) => {
|
||||
<div className="relative">
|
||||
<div className="relative text-sm text-stone-600 dark:text-stone-400">
|
||||
<div className="flex flex-col gap-0">
|
||||
{data.map(({ href, level, text }, index) => {
|
||||
const id = href.slice(1);
|
||||
const isActive = activeId === id;
|
||||
const indent = level > 1 ? (level - 1) * 20 : 0;
|
||||
const isParent = hasChildren(id, level);
|
||||
const isLastInLevel = index === data.length - 1 || data[index + 1].level <= level;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={clsx({
|
||||
"pl-0": level == 2,
|
||||
"pl-4": level == 3,
|
||||
"pl-8 ": level == 4,
|
||||
"font-medium text-primary": activeId == href.slice(1),
|
||||
<div key={href} className="relative">
|
||||
{/* Simple L-shaped connector */}
|
||||
{level > 1 && (
|
||||
<div
|
||||
className={clsx("absolute top-0 h-full w-6", {
|
||||
"left-[6px]": indent === 20, // Level 2
|
||||
"left-[22px]": indent === 40, // Level 3
|
||||
"left-[38px]": indent === 60, // Level 4
|
||||
})}
|
||||
>
|
||||
{/* Vertical line */}
|
||||
<div className={clsx(
|
||||
"absolute left-0 top-0 h-full w-px",
|
||||
isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
|
||||
)}>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="absolute left-0 top-0 w-full h-full bg-primary origin-top"
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={{ scaleY: scrollProgress }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Horizontal line */}
|
||||
<div className={clsx(
|
||||
"absolute left-0 top-1/2 h-px w-6",
|
||||
isActive ? "bg-primary/20" : "bg-stone-300 dark:bg-stone-600"
|
||||
)}>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="absolute left-0 top-0 h-full w-full bg-primary origin-left"
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={{ scaleX: scrollProgress }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href={href}
|
||||
onClick={() => handleLinkClick(id)}
|
||||
className={clsx(
|
||||
"relative flex items-center py-2 transition-colors",
|
||||
{
|
||||
"text-primary dark:text-primary-400 font-medium": isActive,
|
||||
"text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-200": !isActive,
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
paddingLeft: `${indent}px`,
|
||||
marginLeft: level > 1 ? '12px' : '0',
|
||||
}}
|
||||
ref={(el) => {
|
||||
const map = itemRefs.current;
|
||||
if (el) {
|
||||
map.set(id, el);
|
||||
} else {
|
||||
map.delete(id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Circle indicator */}
|
||||
<div className="relative w-4 h-4 flex items-center justify-center flex-shrink-0">
|
||||
<div className={clsx(
|
||||
"w-1.5 h-1.5 rounded-full transition-all duration-300 relative z-10",
|
||||
{
|
||||
"bg-primary scale-100": isActive,
|
||||
"bg-stone-300 dark:bg-stone-600 scale-75 group-hover:scale-100 group-hover:bg-primary/50": !isActive,
|
||||
}
|
||||
)}>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-full bg-primary/20"
|
||||
initial={{ scale: 1 }}
|
||||
animate={{ scale: 1.8 }}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span className="truncate text-sm">
|
||||
{text}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Add scroll to top link at the bottom of TOC */}
|
||||
<ScrollToTop className="mt-6" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,14 +9,14 @@ export default async function Toc({ path }: { path: string }) {
|
||||
const tocs = await getDocsTocs(path);
|
||||
|
||||
return (
|
||||
<div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-9 sticky top-16 h-[96.95vh]">
|
||||
<div className="flex flex-col gap-6 w-full pl-2 h-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="lg:flex hidden toc flex-[1.5] min-w-[238px] py-5 sticky top-16 h-[calc(100vh-4rem)]">
|
||||
<div className="flex flex-col h-full w-full px-2 gap-2 mb-auto">
|
||||
<div className="flex items-center gap-2">
|
||||
<ListIcon className="w-5 h-5" />
|
||||
<ListIcon className="w-4 h-4" />
|
||||
<h3 className="font-medium text-sm">On this page</h3>
|
||||
</div>
|
||||
<ScrollArea className="pb-2 pt-0.5 overflow-y-auto">
|
||||
<div className="flex-shrink-0 min-h-0 max-h-[calc(70vh-4rem)]">
|
||||
<ScrollArea className="h-full">
|
||||
<TocObserver data={tocs} />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ export const InteractiveHoverButton = React.forwardRef<
|
||||
</div>
|
||||
<div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
|
||||
<span>{children}</span>
|
||||
<ArrowRight />
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
---
|
||||
title: "Getting Started with DocuBook Components"
|
||||
description: "Learn how to leverage the power of DocuBook components to create dynamic and interactive documentation. This guide explores the key components available and how to integrate them into your documentation workflow."
|
||||
date: 31-12-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: mywildancloud
|
||||
username: Wildan nrs
|
||||
handleUrl: "https://github.com/mywildancloud"
|
||||
cover: "https://img.freepik.com/free-vector/spring-landscape-scene_23-2148860692.jpg?t=st=1735654206~exp=1735657806~hmac=b65033387b5519b48c72a87333cf1a5d2462de255865104c612500161b248a8a&w=2000"
|
||||
---
|
||||
|
||||
## Introduction to DocuBook Components
|
||||
|
||||
DocuBook provides a robust set of components that enable developers to build dynamic, user-friendly, and visually appealing documentation. These components are designed to enhance the user experience, making it easier for readers to navigate, understand, and interact with the content.
|
||||
|
||||
In this guide, we’ll explore the core components available in DocuBook and how you can integrate them into your documentation projects. For a complete list of components, visit the [official documentation](https://www.docubook.pro/docs/getting-started/components).
|
||||
|
||||
## Key Components and Their Usage
|
||||
|
||||
### 1. **Stepper**
|
||||
|
||||
#### Preview
|
||||
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
||||
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
||||
dolor in lorem.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Access the Project Directory">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
||||
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Install Required Dependencies">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
||||
ipsum nec nulla ultricies porttitor et non justo.
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<Stepper>
|
||||
<StepperItem title="Step 1: Clone the DocuBook Repository">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum,
|
||||
felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc
|
||||
dolor in lorem.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 2: Access the Project Directory">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut
|
||||
eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam.
|
||||
</StepperItem>
|
||||
<StepperItem title="Step 3: Install Required Dependencies">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut
|
||||
ipsum nec nulla ultricies porttitor et non justo.
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
```
|
||||
|
||||
### 2. **Note**
|
||||
|
||||
#### Preview
|
||||
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
<Note type="danger" title="Danger">
|
||||
This is a danger alert to notify the user of a critical issue.
|
||||
</Note>
|
||||
<Note type="warning" title="Warning">
|
||||
This is a warning alert for issues that require attention.
|
||||
</Note>
|
||||
<Note type="success" title="Success">
|
||||
This is a success message to inform the user of successful actions.
|
||||
</Note>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<Note type="note" title="Note">
|
||||
This is a general note to convey information to the user.
|
||||
</Note>
|
||||
<Note type="danger" title="Danger">
|
||||
This is a danger alert to notify the user of a critical issue.
|
||||
</Note>
|
||||
<Note type="warning" title="Warning">
|
||||
This is a warning alert for issues that require attention.
|
||||
</Note>
|
||||
<Note type="success" title="Success">
|
||||
This is a success message to inform the user of successful actions.
|
||||
</Note>
|
||||
```
|
||||
|
||||
### 3. **Code Block**
|
||||
|
||||
#### Preview
|
||||
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Code
|
||||
|
||||
````plaintext
|
||||
```javascript:main.js showLineNumbers {3-4}
|
||||
function isRocketAboutToCrash() {
|
||||
// Check if the rocket is stable
|
||||
if (!isStable()) {
|
||||
NoCrash(); // Prevent the crash
|
||||
}
|
||||
}```
|
||||
````
|
||||
|
||||
## How to Integrate Components into Your Workflow
|
||||
|
||||
1. **Install DocuBook**: Ensure you have DocuBook set up in your project. Refer to the [installation guide](https://www.docubook.pro/docs/getting-started).
|
||||
2. **Import Components**: Import the required components into your MDX files.
|
||||
3. **Customize**: Tailor the components to fit your documentation needs using props and styles.
|
||||
4. **Test and Deploy**: Preview your documentation locally and deploy it to your preferred hosting platform.
|
||||
|
||||
## Conclusion
|
||||
|
||||
DocuBook components are powerful tools for creating engaging and functional documentation. By incorporating these components, you can provide a seamless and intuitive experience for your users.
|
||||
|
||||
Ready to get started? Explore the full range of components in the [DocuBook documentation](https://www.docubook.pro/docs/getting-started/components) and elevate your documentation today!
|
||||
|
||||
🚀📚
|
||||
@@ -1,98 +0,0 @@
|
||||
---
|
||||
title: "Building a Dynamic Documentation Platform with DocuBook: A Deep Dive"
|
||||
description: "Explore how DocuBook simplifies the creation of interactive and dynamic documentation platforms. This blog post provides insights into its features, changelog updates, and how it enhances the documentation experience."
|
||||
date: 31-12-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: mywildancloud
|
||||
username: Wildan nrs
|
||||
handleUrl: "https://github.com/mywildancloud"
|
||||
cover: "https://img.freepik.com/free-photo/high-angle-designer-working-floor_23-2149930985.jpg?t=st=1735654027~exp=1735657627~hmac=2cd2d48f845d1691a28992aec65a3bc11b8e28680d06eeff218e8a773fffc36e&w=2000"
|
||||
---
|
||||
|
||||
## Introduction: Why DocuBook Stands Out in Documentation Platforms
|
||||
|
||||
In the fast-evolving world of web development, creating and maintaining well-structured documentation is crucial. Whether you're working on open-source projects, internal tools, or client deliverables, a robust documentation platform can make all the difference. Enter **DocuBook**—a modern, interactive, and dynamic platform designed to streamline the documentation process.
|
||||
|
||||
In this blog post, we’ll explore the key features of DocuBook, highlight recent updates from its [changelog](https://www.docubook.pro/changelog), and discuss why it’s an essential tool for developers and teams.
|
||||
|
||||
## Key Features of DocuBook
|
||||
|
||||
### 1. Interactive Documentation
|
||||
|
||||
DocuBook offers a seamless user experience with interactive elements such as expandable sections, live code previews, and integrated search functionality. This ensures that users can quickly find and engage with the content they need.
|
||||
|
||||
### 2. Dynamic Changelog Management
|
||||
|
||||
The changelog feature in DocuBook allows teams to document updates, bug fixes, and feature rollouts in a structured format. This helps maintain transparency and keeps users informed about the latest developments.
|
||||
|
||||
### 3. Customizable Themes
|
||||
|
||||
DocuBook supports theme customization, enabling you to align the documentation's appearance with your brand identity. From color schemes to typography, you have full control over the design.
|
||||
|
||||
### 4. Built-in Versioning
|
||||
|
||||
With built-in versioning, DocuBook makes it easy to manage multiple versions of your documentation. This is particularly useful for projects that evolve over time or have distinct releases.
|
||||
|
||||
### 5. Markdown and MDX Support
|
||||
|
||||
Leverage the simplicity of Markdown and the flexibility of MDX to create rich, component-based documentation. DocuBook seamlessly integrates with modern frameworks like React for a smooth development experience.
|
||||
|
||||
## Recent Updates: Highlights from the Changelog
|
||||
|
||||
## [v1.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
|
||||
|
||||
### Fixed
|
||||
|
||||
- Fix og:image not showing on Page.tsx
|
||||
|
||||
### Removed
|
||||
|
||||
- Remove excessive padding
|
||||
- Only use containers of md size
|
||||
- Remove Logo on Footer
|
||||
|
||||
For a full list of updates, visit the [changelog](https://www.docubook.pro/changelog).
|
||||
|
||||
## Why Choose DocuBook?
|
||||
|
||||
### Streamlined Collaboration
|
||||
|
||||
DocuBook enables teams to collaborate effectively by providing tools for inline comments, suggestions, and version control. This ensures that everyone stays on the same page.
|
||||
|
||||
### Developer-Friendly
|
||||
|
||||
With support for modern frameworks, DocuBook simplifies the integration process. Whether you’re using React, Next.js, or plain HTML, DocuBook adapts to your workflow.
|
||||
|
||||
### Scalability
|
||||
|
||||
Designed to handle projects of any size, DocuBook scales effortlessly, making it ideal for both small teams and enterprise-level organizations.
|
||||
|
||||
## Conclusion: Elevate Your Documentation Game with DocuBook
|
||||
|
||||
DocuBook is more than just a documentation tool; it’s a platform that empowers developers and teams to create, manage, and maintain high-quality documentation with ease. Its rich feature set, combined with regular updates, makes it a must-have for any project.
|
||||
|
||||
Ready to transform your documentation experience? Explore more at [DocuBook](https://www.docubook.pro) and start building documentation that stands out.
|
||||
|
||||
🚀📚
|
||||
@@ -1,121 +0,0 @@
|
||||
---
|
||||
title: "Using React Server Components and Server Actions in Next.js"
|
||||
description: "Explore how to leverage React Server Components and Server Actions in Next.js to build modern, efficient web applications. Learn how these features enhance performance and simplify server-side logic."
|
||||
date: 05-09-2024
|
||||
authors:
|
||||
- avatar: "https://ui.shadcn.com/avatars/02.png"
|
||||
handle: reactdev
|
||||
username: React Dev
|
||||
handleUrl: "https://github.com/reactdev"
|
||||
- avatar: "https://ui.shadcn.com/avatars/01.png"
|
||||
handle: nextjsguru
|
||||
username: Next.js Guru
|
||||
handleUrl: "https://github.com/nextjsguru"
|
||||
cover: "https://img.freepik.com/premium-vector/many-monsters-various-colors-doodle-come-bless-birthday-happy_577083-85.jpg?w=826"
|
||||
---
|
||||
|
||||
## Introduction: Enhancing Next.js with React Server Components
|
||||
|
||||
Next.js has evolved to include powerful features like React Server Components and Server Actions, which offer a new way to handle server-side rendering and logic. These features provide a more efficient and streamlined approach to building web applications, allowing you to fetch data and render components on the server without compromising performance.
|
||||
|
||||
In this blog post, we'll explore how to use React Server Components and Server Actions in Next.js with practical examples and code snippets.
|
||||
|
||||
## What Are React Server Components?
|
||||
|
||||
React Server Components (RSC) are a new type of component introduced by React that allows you to render components on the server. This approach helps reduce the amount of JavaScript sent to the client and enhances performance by offloading rendering work to the server.
|
||||
|
||||
### Benefits of React Server Components
|
||||
|
||||
- **Improved Performance**: By rendering on the server, you reduce the amount of client-side JavaScript and improve load times.
|
||||
- **Enhanced User Experience**: Faster initial page loads and smoother interactions.
|
||||
- **Simplified Data Fetching**: Fetch data on the server and pass it directly to components.
|
||||
|
||||
### Example: Creating a Server Component
|
||||
|
||||
Here’s a basic example of a React Server Component in a Next.js application:
|
||||
|
||||
```jsx
|
||||
// app/components/UserProfile.server.js
|
||||
import { getUserData } from "../lib/api";
|
||||
|
||||
export default async function UserProfile() {
|
||||
const user = await getUserData();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{user.name}</h1>
|
||||
<p>{user.email}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `UserProfile` is a server component that fetches user data on the server and renders it.
|
||||
|
||||
## What Are Server Actions?
|
||||
|
||||
Server Actions are functions that run on the server in response to user interactions or other events. They allow you to handle server-side logic, such as form submissions or API requests, directly from your React components.
|
||||
|
||||
### Benefits of Server Actions
|
||||
|
||||
- **Simplified Server Logic**: Write server-side code directly in your components.
|
||||
- **Enhanced Security**: Handle sensitive operations on the server rather than the client.
|
||||
- **Improved Performance**: Reduce client-side JavaScript and offload tasks to the server.
|
||||
|
||||
### Example: Using Server Actions
|
||||
|
||||
Here’s how you can use Server Actions in a Next.js application to handle form submissions:
|
||||
|
||||
```jsx
|
||||
// app/actions/submitForm.js
|
||||
import { saveFormData } from "../lib/api";
|
||||
|
||||
export async function submitForm(data) {
|
||||
await saveFormData(data);
|
||||
return { success: true };
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
// app/components/ContactForm.js
|
||||
"use client";
|
||||
|
||||
import { submitForm } from "../actions/submitForm";
|
||||
|
||||
export default function ContactForm() {
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.target);
|
||||
const result = await submitForm(Object.fromEntries(formData));
|
||||
if (result.success) {
|
||||
alert("Form submitted successfully!");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" name="name" required />
|
||||
</label>
|
||||
<label>
|
||||
Email:
|
||||
<input type="email" name="email" required />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this example, `submitForm` is a server action that processes form data on the server, and `ContactForm` is a client component that uses this action to handle form submissions.
|
||||
|
||||
## Conclusion: Leveraging Modern Features for Better Web Apps
|
||||
|
||||
React Server Components and Server Actions in Next.js provide powerful tools for building efficient, modern web applications. By leveraging these features, you can improve performance, simplify server-side logic, and create a more responsive user experience.
|
||||
|
||||
As you build your Next.js applications, consider incorporating React Server Components and Server Actions to take full advantage of the latest advancements in web development.
|
||||
|
||||
Happy coding!
|
||||
|
||||
🚀✨
|
||||
2
hooks/index.ts
Normal file
2
hooks/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './useScrollPosition';
|
||||
export * from './useActiveSection';
|
||||
68
hooks/useActiveSection.ts
Normal file
68
hooks/useActiveSection.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import { TocItem } from '@/lib/toc';
|
||||
|
||||
export function useActiveSection(tocs: TocItem[]) {
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const observerRef = useRef<IntersectionObserver | null>(null);
|
||||
const clickedIdRef = useRef<string | null>(null);
|
||||
|
||||
// Handle intersection observer for active section
|
||||
useEffect(() => {
|
||||
if (typeof document === 'undefined' || !tocs.length) return;
|
||||
|
||||
const handleIntersect = (entries: IntersectionObserverEntry[]) => {
|
||||
if (clickedIdRef.current) return;
|
||||
|
||||
const visibleEntries = entries.filter(entry => entry.isIntersecting);
|
||||
if (!visibleEntries.length) return;
|
||||
|
||||
// Find the most visible entry
|
||||
const mostVisibleEntry = visibleEntries.reduce((prev, current) => {
|
||||
return current.intersectionRatio > prev.intersectionRatio ? current : prev;
|
||||
}, visibleEntries[0]);
|
||||
|
||||
const newActiveId = mostVisibleEntry.target.id;
|
||||
if (newActiveId !== activeId) {
|
||||
setActiveId(newActiveId);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize intersection observer
|
||||
observerRef.current = new IntersectionObserver(handleIntersect, {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -80% 0px',
|
||||
threshold: 0.1,
|
||||
});
|
||||
|
||||
// Observe all headings
|
||||
tocs.forEach(toc => {
|
||||
const element = document.getElementById(toc.href.slice(1));
|
||||
if (element) {
|
||||
observerRef.current?.observe(element);
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
observerRef.current?.disconnect();
|
||||
};
|
||||
}, [tocs, activeId]);
|
||||
|
||||
const handleLinkClick = useCallback((id: string) => {
|
||||
clickedIdRef.current = id;
|
||||
setActiveId(id);
|
||||
|
||||
// Reset clicked state after scroll completes
|
||||
const timer = setTimeout(() => {
|
||||
clickedIdRef.current = null;
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
activeId,
|
||||
setActiveId,
|
||||
handleLinkClick,
|
||||
};
|
||||
}
|
||||
28
hooks/useScrollPosition.ts
Normal file
28
hooks/useScrollPosition.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
|
||||
export function useScrollPosition(threshold = 0.5) {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const scrollPosition = window.scrollY;
|
||||
const viewportHeight = window.innerHeight;
|
||||
const shouldBeSticky = scrollPosition > viewportHeight * threshold;
|
||||
|
||||
setIsScrolled(prev => shouldBeSticky !== prev ? shouldBeSticky : prev);
|
||||
}, [threshold]);
|
||||
|
||||
// Add scroll event listener
|
||||
useEffect(() => {
|
||||
// Initial check
|
||||
handleScroll();
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [handleScroll]);
|
||||
|
||||
return isScrolled;
|
||||
}
|
||||
@@ -12,18 +12,20 @@ import matter from "gray-matter";
|
||||
|
||||
// custom components imports
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import Pre from "@/components/markdown/pre";
|
||||
import Note from "@/components/markdown/note";
|
||||
import { Stepper, StepperItem } from "@/components/markdown/stepper";
|
||||
import Image from "@/components/markdown/image";
|
||||
import Link from "@/components/markdown/link";
|
||||
import Outlet from "@/components/markdown/outlet";
|
||||
import Youtube from "@/components/markdown/youtube";
|
||||
import Tooltip from "@/components/markdown/tooltips";
|
||||
import Card from "@/components/markdown/card";
|
||||
import Button from "@/components/markdown/button";
|
||||
import Accordion from "@/components/markdown/accordion";
|
||||
import CardGroup from "@/components/markdown/cardgroup";
|
||||
import Pre from "@/components/markdown/PreMdx";
|
||||
import Note from "@/components/markdown/NoteMdx";
|
||||
import { Stepper, StepperItem } from "@/components/markdown/StepperMdx";
|
||||
import Image from "@/components/markdown/ImageMdx";
|
||||
import Link from "@/components/markdown/LinkMdx";
|
||||
import Outlet from "@/components/markdown/OutletMdx";
|
||||
import Youtube from "@/components/markdown/YoutubeMdx";
|
||||
import Tooltip from "@/components/markdown/TooltipsMdx";
|
||||
import Card from "@/components/markdown/CardMdx";
|
||||
import Button from "@/components/markdown/ButtonMdx";
|
||||
import Accordion from "@/components/markdown/AccordionMdx";
|
||||
import CardGroup from "@/components/markdown/CardGroupMdx";
|
||||
import Kbd from "@/components/markdown/KeyboardMdx";
|
||||
import { Release, Changes } from "@/components/markdown/ReleaseMdx";
|
||||
|
||||
// add custom components
|
||||
const components = {
|
||||
@@ -44,6 +46,9 @@ const components = {
|
||||
Button,
|
||||
Accordion,
|
||||
CardGroup,
|
||||
Kbd,
|
||||
Release,
|
||||
Changes,
|
||||
};
|
||||
|
||||
// can be used for other pages like blogs, Guides etc
|
||||
@@ -177,13 +182,15 @@ const postProcess = () => (tree: any) => {
|
||||
});
|
||||
};
|
||||
|
||||
export type Author = {
|
||||
avatar?: string;
|
||||
handle: string;
|
||||
username: string;
|
||||
handleUrl: string;
|
||||
};
|
||||
// export type Author = {
|
||||
// avatar?: string;
|
||||
// handle: string;
|
||||
// username: string;
|
||||
// handleUrl: string;
|
||||
// };
|
||||
|
||||
// Blog related types and functions have been removed
|
||||
/*
|
||||
export type BlogMdxFrontmatter = BaseMdxFrontmatter & {
|
||||
date: string;
|
||||
authors: Author[];
|
||||
@@ -197,20 +204,26 @@ export async function getAllBlogStaticPaths() {
|
||||
return res.map((file) => file.split(".")[0]);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export async function getAllBlogs() {
|
||||
const blogFolder = path.join(process.cwd(), "/contents/blogs/");
|
||||
const files = await fs.readdir(blogFolder);
|
||||
const uncheckedRes = await Promise.all(
|
||||
files.map(async (file) => {
|
||||
if (!file.endsWith(".mdx")) return undefined;
|
||||
try {
|
||||
const filepath = path.join(process.cwd(), `/contents/blogs/${file}`);
|
||||
const rawMdx = await fs.readFile(filepath, "utf-8");
|
||||
return {
|
||||
...justGetFrontmatterFromMD<BlogMdxFrontmatter>(rawMdx),
|
||||
slug: file.split(".")[0],
|
||||
};
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return null;
|
||||
}
|
||||
})
|
||||
);
|
||||
return uncheckedRes.filter((it) => !!it) as (BlogMdxFrontmatter & {
|
||||
@@ -219,11 +232,13 @@ export async function getAllBlogs() {
|
||||
}
|
||||
|
||||
export async function getBlogForSlug(slug: string) {
|
||||
const blogFile = path.join(process.cwd(), "/contents/blogs/", `${slug}.mdx`);
|
||||
try {
|
||||
const blogFile = path.join(process.cwd(), "/contents/blogs/", `${slug}.mdx`);
|
||||
const rawMdx = await fs.readFile(blogFile, "utf-8");
|
||||
return await parseMdx<BlogMdxFrontmatter>(rawMdx);
|
||||
} catch {
|
||||
return undefined;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
9
lib/toc.ts
Normal file
9
lib/toc.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export interface TocItem {
|
||||
level: number;
|
||||
text: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
export interface MobTocProps {
|
||||
tocs: TocItem[];
|
||||
}
|
||||
2363
package-lock.json
generated
2363
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "docubook",
|
||||
"version": "1.8.5",
|
||||
"version": "1.11.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@@ -27,7 +27,7 @@
|
||||
"framer-motion": "^12.4.1",
|
||||
"geist": "^1.3.1",
|
||||
"gray-matter": "^4.0.3",
|
||||
"lucide-react": "^0.435.0",
|
||||
"lucide-react": "^0.511.0",
|
||||
"next": "^14.2.6",
|
||||
"next-mdx-remote": "^5.0.0",
|
||||
"next-themes": "^0.3.0",
|
||||
|
||||
@@ -98,18 +98,3 @@
|
||||
border: none;
|
||||
border-radius: 8px; /* Sudut melengkung pada iframe */
|
||||
}
|
||||
|
||||
.youtube:hover {
|
||||
transform: scale(1.05); /* Efek hover zoom */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
li#changelog {
|
||||
position: relative;
|
||||
padding-left: 1.5em;
|
||||
text-indent: -1.2rem;
|
||||
}
|
||||
|
||||
[id^="version-"] {
|
||||
scroll-margin-top: 4rem; /* sesuaikan dengan tinggi navbar */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user