From 68383379da3572611872533b0fda9254ed15b683 Mon Sep 17 00:00:00 2001 From: Wildan Nursahidan Date: Thu, 27 Feb 2025 21:47:17 +0700 Subject: [PATCH] improve : search & anchor --- components/anchor.tsx | 15 ++-- components/search.tsx | 19 ++++- contents/blogs/components.mdx | 133 +++++++++++++++++++++++++++++++++ contents/blogs/nested-docs.mdx | 98 ++++++++++++++++++++++++ 4 files changed, 256 insertions(+), 9 deletions(-) create mode 100644 contents/blogs/components.mdx create mode 100644 contents/blogs/nested-docs.mdx diff --git a/components/anchor.tsx b/components/anchor.tsx index fcc456b..3976334 100644 --- a/components/anchor.tsx +++ b/components/anchor.tsx @@ -14,11 +14,16 @@ type AnchorProps = ComponentProps & { const Anchor = forwardRef( ({ absolute, className = "", activeClassName = "", disabled, children, ...props }, ref) => { const path = usePathname(); - let isMatch = absolute - ? props.href.toString().split("/")[1] == path.split("/")[1] - : path === props.href; + const href = props.href.toString(); - if (props.href.toString().includes("http")) isMatch = false; + // Deteksi URL eksternal menggunakan regex + const isExternal = /^(https?:\/\/|\/\/)/.test(href); + + let isMatch = absolute + ? href.split("/")[1] === path.split("/")[1] + : path === href; + + if (isExternal) isMatch = false; // Hindari mencocokkan URL eksternal if (disabled) return ( @@ -32,7 +37,7 @@ const Anchor = forwardRef( ); } ); -// ✅ Tambahkan display name agar tidak error saat build + Anchor.displayName = "Anchor"; export default Anchor; diff --git a/components/search.tsx b/components/search.tsx index 9856711..01935b2 100644 --- a/components/search.tsx +++ b/components/search.tsx @@ -1,7 +1,7 @@ "use client"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState, useRef } from "react"; import { ArrowUpIcon, ArrowDownIcon, CommandIcon, FileTextIcon, SearchIcon, CornerDownLeftIcon } from "lucide-react"; import { Input } from "@/components/ui/input"; import { @@ -22,6 +22,7 @@ export default function Search() { const [searchedInput, setSearchedInput] = useState(""); const [isOpen, setIsOpen] = useState(false); const [selectedIndex, setSelectedIndex] = useState(0); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { @@ -32,7 +33,6 @@ export default function Search() { }; window.addEventListener("keydown", handleKeyDown); - return () => { window.removeEventListener("keydown", handleKeyDown); }; @@ -72,12 +72,20 @@ export default function Search() { }; window.addEventListener("keydown", handleNavigation); - return () => { window.removeEventListener("keydown", handleNavigation); }; }, [isOpen, filteredResults, selectedIndex, router]); + useEffect(() => { + if (itemRefs.current[selectedIndex]) { + itemRefs.current[selectedIndex]?.scrollIntoView({ + behavior: "smooth", + block: "nearest", + }); + } + }, [selectedIndex]); + return (
@@ -128,6 +136,9 @@ export default function Search() { return ( { + itemRefs.current[index] = el as HTMLDivElement | null; + }} className={cn( "dark:hover:bg-accent/15 hover:bg-accent/10 w-full px-3 rounded-sm text-sm flex items-center gap-2.5", isActive && "bg-primary/20 dark:bg-primary/30", diff --git a/contents/blogs/components.mdx b/contents/blogs/components.mdx new file mode 100644 index 0000000..325b448 --- /dev/null +++ b/contents/blogs/components.mdx @@ -0,0 +1,133 @@ +--- +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 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, + felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc + dolor in lorem. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut + eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut + ipsum nec nulla ultricies porttitor et non justo. + + + +#### Code + +``` + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum, + felis sed efficitur tincidunt, justo nulla viverra enim, et maximus nunc + dolor in lorem. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque ut + eros auctor accumsan. Mauris a nisl vitae magna ultricies aliquam. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut + ipsum nec nulla ultricies porttitor et non justo. + + +``` + +### 2. **Note** + +#### Preview + + + This is a general note to convey information to the user. + + + This is a danger alert to notify the user of a critical issue. + + + This is a warning alert for issues that require attention. + + + This is a success message to inform the user of successful actions. + + +#### Code + +``` + + This is a general note to convey information to the user. + + + This is a danger alert to notify the user of a critical issue. + + + This is a warning alert for issues that require attention. + + + This is a success message to inform the user of successful actions. + +``` + +### 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! + +🚀📚 diff --git a/contents/blogs/nested-docs.mdx b/contents/blogs/nested-docs.mdx new file mode 100644 index 0000000..ac2b24a --- /dev/null +++ b/contents/blogs/nested-docs.mdx @@ -0,0 +1,98 @@ +--- +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 + +![version 1.3.0 - release note image](https://docubook.pro/images/release-note.png) + +### 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. + +🚀📚