dwindown/docs.addonsejoli.pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update versi docubook

Browse Source
This commit is contained in:
Wildan Nursahidan
2025-05-04 00:06:21 +07:00
parent 2bd2c03429
commit 82c3a03d3a
34 changed files with 1038 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/blog/[slug]/page.tsx
View File

@@ -1,4 +1,4 @@
import { Typography } from "@/components/docs/typography";
import { Typography } from "@/components/typography";
import { buttonVariants } from "@/components/ui/button";
import { Author, getAllBlogStaticPaths, getBlogForSlug } from "@/lib/markdown";
import { ArrowLeftIcon } from "lucide-react";
@@ -6,7 +6,7 @@ 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/docs/scroll-to-top";
import { ScrollToTop } from "@/components/scroll-to-top";
type PageProps = {
params: { slug: string };

2
app/blog/page.tsx
View File

@@ -16,7 +16,7 @@ export default async function BlogIndexPage() {
(a, b) => stringToDate(b.date).getTime() - stringToDate(a.date).getTime()
);
return (
<div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] pt-2">
<div className="w-full mx-auto flex flex-col gap-1 sm:min-h-[91vh] min-h-[88vh] py-2">
<div className="mb-7 flex flex-col gap-2">
<h1 className="text-2xl font-extrabold">
Blog Posts

14
app/docs/[[...slug]]/page.tsx
View File

@@ -1,14 +1,14 @@
import { notFound } from "next/navigation";
import { getDocsForSlug, getDocsTocs } from "@/lib/markdown";
import DocsBreadcrumb from "@/components/docs/docs-breadcrumb";
import Pagination from "@/components/docs/pagination";
import Toc from "@/components/docs/toc";
import { Typography } from "@/components/docs/typography";
import EditThisPage from "@/components/docs/edit-on-github";
import DocsBreadcrumb from "@/components/docs-breadcrumb";
import Pagination from "@/components/pagination";
import Toc from "@/components/toc";
import { Typography } from "@/components/typography";
import EditThisPage from "@/components/edit-on-github";
import { formatDate2 } from "@/lib/utils";
import docuConfig from "@/docu.json";
import MobToc from "@/components/docs/mob-toc";
import { ScrollToTop } from "@/components/docs/scroll-to-top";
import MobToc from "@/components/mob-toc";
import { ScrollToTop } from "@/components/scroll-to-top";
const { meta } = docuConfig;

2
app/docs/layout.tsx
View File

@@ -1,4 +1,4 @@
import { Leftbar } from "@/components/docs/leftbar";
import { Leftbar } from "@/components/leftbar";
export default function DocsLayout({
children,

4
app/layout.tsx
View File

@@ -1,9 +1,9 @@
import type { Metadata } from "next";
import { ThemeProvider } from "@/components/contexts/theme-provider";
import { Navbar } from "@/components/docs/navbar";
import { Navbar } from "@/components/navbar";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { Footer } from "@/components/docs/footer";
import { Footer } from "@/components/footer";
import docuConfig from "@/docu.json";
import { Toaster } from "@/components/ui/sonner";
import "@/styles/globals.css";

292
app/playground/page.tsx
View File

@@ -29,7 +29,8 @@ import {
Laptop2,
Copy,
Download,
RotateCcw
RotateCcw,
Calendar
} from "lucide-react";
import { Button as UIButton } from "@/components/ui/button";
import { cn } from "@/lib/utils";
@@ -38,8 +39,23 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuSeparator,
} 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 }) => (
@@ -167,9 +183,7 @@ export default function PlaygroundPage() {
</UIButton>
</div>
</div>
), {
duration: 10000,
});
), { duration: 10000 });
}
};
@@ -179,149 +193,17 @@ export default function PlaygroundPage() {
const before = markdown.substring(0, start);
const after = markdown.substring(end);
const newText = before + text + after;
// Menambahkan satu baris kosong sebelum dan sesudah komponen
const newText = `${before}${text}\n${after}`;
setMarkdown(newText);
requestAnimationFrame(() => {
textArea.focus();
const newPosition = start + text.length;
const newPosition = start + text.length + 1;
textArea.setSelectionRange(newPosition, newPosition);
});
};
const handleParagraphClick = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, 'this is regular text, **bold text**, *italic text*\n');
}
};
const handleHeading2Click = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '## Heading 2\n');
}
};
const handleHeading3Click = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '### Heading 3\n');
}
};
const handleBulletListClick = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '- List One\n- List Two\n- Other List\n');
}
};
const handleNumberedListClick = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '1. Number One\n2. Number Two\n3. Number Three\n');
}
};
const handleLinkClick = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '[Visit OpenAI](https://www.openai.com)\n');
}
};
const handleImageClick = () => {
const textArea = document.querySelector('textarea');
if (textArea) {
insertAtCursor(textArea, '![Alt text for the image](https://via.placeholder.com/150)\n');
}
};
const handleBlockquoteClick = () => {
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');
}
};
const handleCodeBlockClick = () => {
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');
}
};
const handleTableClick = () => {
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. |
`);
}
};
const handleNoteClick = (type: string) => {
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);
}
};
const handleComponentClick = (component: string) => {
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]);
};
if (isMobile) {
return <MobileMessage />;
@@ -402,86 +284,88 @@ export default function PlaygroundPage() {
</UIButton>
</div>
<div className="flex items-center border-b p-1 bg-background">
<ToolbarButton icon={Type} label="Paragraph" onClick={handleParagraphClick} />
<ToolbarButton icon={Heading2} label="Heading 2" onClick={handleHeading2Click} />
<ToolbarButton icon={Heading3} label="Heading 3" onClick={handleHeading3Click} />
<ToolbarButton icon={List} label="Bullet List" onClick={handleBulletListClick} />
<ToolbarButton icon={ListOrdered} label="Numbered List" onClick={handleNumberedListClick} />
<ToolbarButton icon={Calendar} label="Metadata" onClick={() => handleMetadataClick(insertAtCursor)} />
<ToolbarSeparator />
<ToolbarButton icon={Code} label="Code Block" onClick={handleCodeBlockClick} />
<ToolbarButton icon={Quote} label="Blockquote" onClick={handleBlockquoteClick} />
<ToolbarButton icon={ImageIcon} label="Image" onClick={handleImageClick} />
<ToolbarButton icon={LinkIcon} label="Link" onClick={handleLinkClick} />
<ToolbarButton icon={Table} label="Table" onClick={handleTableClick} />
<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>
<DropdownMenuTrigger asChild>
<UIButton
variant="ghost"
size="sm"
className="h-8 px-2 flex items-center gap-1 font-normal"
variant="ghost"
size="sm"
className="h-8 px-2 flex items-center gap-1 font-normal"
>
<Notebook className="h-4 w-4 text-muted-foreground" />
<ChevronDown className="h-4 w-4 text-muted-foreground" />
<Notebook className="h-4 w-4" />
<ChevronDown className="h-4 w-4" />
</UIButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={() => handleNoteClick('note')}>
Note
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'note')}>
Note
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleNoteClick('danger')}>
Danger
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'danger')}>
Danger
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleNoteClick('warning')}>
Warning
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'warning')}>
Warning
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleNoteClick('success')}>
Success
<DropdownMenuItem onClick={handleNoteClick(insertAtCursor, 'success')}>
Success
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuContent>
</DropdownMenu>
<ToolbarSeparator />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger asChild>
<UIButton
variant="ghost"
size="sm"
className="h-8 px-2 flex items-center gap-1 font-normal"
variant="ghost"
size="sm"
className="h-8 px-2 flex items-center gap-1 font-normal"
>
<Component className="h-4 w-4 text-muted-foreground" />
<ChevronDown className="h-4 w-4 text-muted-foreground" />
<Component className="h-4 w-4" />
<ChevronDown className="h-4 w-4" />
</UIButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={() => handleComponentClick('stepper')}>
<Rows className="h-4 w-4 mr-2" />
Stepper
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'stepper')}>
<Rows className="h-4 w-4 mr-2" />
Stepper
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('card')}>
<LayoutGrid className="h-4 w-4 mr-2" />
Card
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'card')}>
<LayoutGrid className="h-4 w-4 mr-2" />
Card
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('button')}>
<MousePointer2 className="h-4 w-4 mr-2" />
Button
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'button')}>
<MousePointer2 className="h-4 w-4 mr-2" />
Button
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('accordion')}>
<ChevronDown className="h-4 w-4 mr-2" />
Accordion
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'accordion')}>
<ChevronDown className="h-4 w-4 mr-2" />
Accordion
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('tabs')}>
<LayoutPanelTop className="h-4 w-4 mr-2" />
Tabs
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'tabs')}>
<LayoutPanelTop className="h-4 w-4 mr-2" />
Tabs
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('youtube')}>
<YoutubeIcon className="h-4 w-4 mr-2" />
Youtube
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'youtube')}>
<YoutubeIcon className="h-4 w-4 mr-2" />
Youtube
</DropdownMenuItem>
<DropdownMenuItem onClick={() => handleComponentClick('tooltip')}>
<HelpCircle className="h-4 w-4 mr-2" />
Tooltip
<DropdownMenuItem onClick={handleComponentClick(insertAtCursor, 'tooltip')}>
<HelpCircle className="h-4 w-4 mr-2" />
Tooltip
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
@@ -494,13 +378,13 @@ export default function PlaygroundPage() {
</div>
</div>
<textarea
ref={editorRef}
value={markdown}
onChange={(e) => setMarkdown(e.target.value)}
className="editor-textarea"
spellCheck={false}
placeholder="Start writing markdown..."
/>
ref={editorRef}
value={markdown}
onChange={(e) => setMarkdown(e.target.value)}
className="editor-textarea"
spellCheck={false}
placeholder="Type '/' for commands..."
/>
</div>
</ScrollArea>
</div>