-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
👍 feat(docs): adding docs and navigations
- Loading branch information
1 parent
4baffe1
commit a677da9
Showing
28 changed files
with
961 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { CenterContent, LeftContent, RightContent } from '@features/docs' | ||
| import * as React from 'react' | ||
|
|
||
| type Params = { | ||
| slug: string[] | undefined | ||
| } | ||
|
|
||
| type DocsLayoutProps = { | ||
| children: React.ReactNode | ||
| params: Promise<Params> | ||
| } | ||
|
|
||
| export default async function DocsLayout({ | ||
| children, | ||
| params, | ||
| }: DocsLayoutProps): Promise<React.ReactElement> { | ||
| const { slug } = await params | ||
|
|
||
| return ( | ||
| <main className="flex mt-28 min-h-screen relative"> | ||
| <LeftContent /> | ||
| <CenterContent slug={slug}>{children}</CenterContent> | ||
| <RightContent slug={slug} /> | ||
| </main> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { DocsContent, getAllDocsPaths, getDocMetadata } from '@features/docs' | ||
| import { sharedMetadata } from '@shared/libs' | ||
| import { Metadata, ResolvingMetadata } from 'next' | ||
| import * as React from 'react' | ||
|
|
||
| type Params = { | ||
| slug: string[] | undefined | ||
| } | ||
|
|
||
| type DocsPageProps = { | ||
| params: Promise<Params> | ||
| } | ||
|
|
||
| export async function generateMetadata( | ||
| { params }: DocsPageProps, | ||
| parent: ResolvingMetadata, | ||
| ): Promise<Metadata> { | ||
| const { slug } = await params | ||
| const meta = await getDocMetadata(slug) | ||
| const previousOgImages = (await parent).openGraph?.images || [] | ||
| const previousTwitterImages = (await parent).twitter?.images || [] | ||
|
|
||
| return { | ||
| title: meta.title, | ||
| description: meta.description, | ||
| openGraph: { | ||
| ...sharedMetadata.openGraph, | ||
| title: meta.title, | ||
| description: meta.description, | ||
| images: [...previousOgImages], | ||
| }, | ||
| twitter: { | ||
| ...sharedMetadata.twitter, | ||
| title: meta.title, | ||
| description: meta.description, | ||
| images: [...previousTwitterImages], | ||
| }, | ||
| } | ||
| } | ||
|
|
||
| export async function generateStaticParams(): Promise<Params[]> { | ||
| const paths = await getAllDocsPaths() | ||
| const staticParams = paths.map((path) => ({ | ||
| slug: [path], | ||
| })) | ||
|
|
||
| return staticParams | ||
| } | ||
|
|
||
| export default async function DocsPage({ | ||
| params, | ||
| }: DocsPageProps): Promise<React.ReactElement> { | ||
| const { slug } = await params | ||
|
|
||
| return ( | ||
| <div className="flex flex-col"> | ||
| <DocsContent slug={slug} /> | ||
| </div> | ||
| ) | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import Link from 'next/link' | ||
| import * as React from 'react' | ||
| import { getBreadcrumb } from './docs-service' | ||
|
|
||
| type BreadcrumbProps = { | ||
| slug: string[] | undefined | ||
| } | ||
|
|
||
| export async function Breadcrumb({ | ||
| slug, | ||
| }: BreadcrumbProps): Promise<React.ReactElement> { | ||
| const { title, link } = await getBreadcrumb(slug) | ||
|
|
||
| return ( | ||
| <div className="flex items-center w-full text-sm text-foreground/60 gap-1"> | ||
| <Link | ||
| href={'/docs'} | ||
| className="transition-all duration-300 hover:text-foreground" | ||
| > | ||
| Docs | ||
| </Link> | ||
|
|
||
| <i className="fi fi-rr-angle-small-right" /> | ||
|
|
||
| <Link | ||
| href={link} | ||
| className="transition-all duration-300 hover:text-foreground" | ||
| > | ||
| {title} | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import * as React from 'react' | ||
| import { Breadcrumb } from './breadcrumb' | ||
|
|
||
| type CenterContentProps = { | ||
| children: React.ReactNode | ||
| slug: string[] | undefined | ||
| } | ||
|
|
||
| export function CenterContent({ | ||
| children, | ||
| slug, | ||
| }: CenterContentProps): React.ReactElement { | ||
| return ( | ||
| <div className="flex container mx-auto"> | ||
| <div className="flex flex-col w-9/12 mx-auto gap-6 pb-28 tablet:pb-36"> | ||
| <Breadcrumb slug={slug} /> | ||
| <div className="flex w-full">{children}</div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| --- | ||
| title: Introduction | ||
| description: Welcome to Brook Code Theme! | ||
| publishedAt: 2024-12-19 | ||
| --- | ||
|
|
||
| Brook Code Theme is your ultimate companion for an elegant and productive coding experience. Designed with developers in mind, this theme brings a **clean**, **balanced**, and **visually appealing** look to your favorite code editors. | ||
|
|
||
| ## 🌟 Why Brook Code Theme? | ||
|
|
||
| Brook Code Theme stands out by offering: | ||
|
|
||
| - **Elegant Syntax Highlighting** | ||
| Say goodbye to cluttered code. Enjoy a balanced color palette that improves readability and keeps your focus intact during long coding sessions. | ||
|
|
||
| - **Dark and Light Modes** | ||
| Switch effortlessly between dark and light themes to match your coding environment and preference. | ||
|
|
||
| - **Multi-Editor Support** | ||
| Compatible with popular editors, including: | ||
|
|
||
| - **VSCode** | ||
|
|
||
| - **JetBrains IDEs** | ||
|
|
||
| - **Zed** | ||
| - And more! | ||
|
|
||
| - **Language Versatility** | ||
| Optimized for a wide range of programming languages, including: | ||
| - **JavaScript**, **TypeScript**, **Python**, **Go**, **Rust**, **HTML**, and **CSS**. | ||
|
|
||
| ## 🎨 Key Features | ||
|
|
||
| 1. **Aesthetic Design** | ||
| Enjoy a polished theme with carefully selected colors that are easy on the eyes. | ||
|
|
||
| 2. **Focus-Driven Color Palette** | ||
| Each color is chosen to emphasize the structure and syntax of your code, reducing cognitive load and improving productivity. | ||
|
|
||
| 3. **Flexible Variants** | ||
| Choose between subtle pastel tones or vibrant colors to suit your coding style. | ||
|
|
||
| 4. **Cross-Platform Compatibility** | ||
| Works seamlessly across multiple platforms and editors for a consistent experience. | ||
|
|
||
| ## 🚀 Installation Guide | ||
|
|
||
| ### For VSCode | ||
|
|
||
| 1. Open the Extensions Marketplace. | ||
| 2. Search for **Brook Code Theme**. | ||
| 3. Click "Install" and select the theme from your settings. | ||
|
|
||
| ### For JetBrains IDEs | ||
|
|
||
| 1. Download the theme file from the official website (coming soon!). | ||
| 2. Import the theme in **Preferences > Appearance & Behavior > Themes**. | ||
| 3. Apply the theme and start coding. | ||
|
|
||
| ### For Zed | ||
|
|
||
| 1. Follow the Zed documentation for custom theme installation. | ||
| 2. Copy the Brook Code Theme configuration file. | ||
| 3. Activate the theme in Zed. | ||
|
|
||
| ## 📸 Preview | ||
|
|
||
| Here’s a sneak peek of Brook Code Theme in action: | ||
|
|
||
| - **Dark Mode**: A moody, elegant theme with perfect contrast. | ||
| - **Light Mode**: Bright and vibrant for daylight coding sessions. | ||
|
|
||
| _Full previews and live demos will be available on our official website._ | ||
|
|
||
| ## ✨ Future Plans | ||
|
|
||
| Brook Code Theme is evolving! Here’s what’s next: | ||
|
|
||
| - **More Editor Support**: Expand compatibility to editors like Sublime Text and Atom. | ||
| - **Terminal Themes**: Matching themes for terminal applications like iTerm2 and Warp. | ||
| - **Customizable Options**: Tools to tweak the theme and make it truly yours. | ||
|
|
||
| Brook Code Theme is designed to enhance your coding experience, whether you're | ||
| building apps, writing scripts, or crafting web designs. | ||
|
|
||
| **Get ready to code in style. Let Brook Code Theme be your go-to choice for a seamless coding environment!** | ||
|
|
||
| Stay tuned for updates, or follow us on [GitHub](#) for the latest releases. |
Oops, something went wrong.