-
-
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.
Merge pull request #14 from brook-code-theme/feature/docs
Feature/docs
- Loading branch information
Showing
29 changed files
with
858 additions
and
73 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
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,56 @@ | ||
| --- | ||
| title: Configuration | ||
| description: Customize Brook Code Theme to suit your coding style | ||
| publishedAt: 2024-12-19 | ||
| --- | ||
|
|
||
| Brook code theme is highly configurable, allowing you to customize the theme to your liking. Here's a quick guide to get you started. | ||
|
|
||
| ## Configuration Options | ||
|
|
||
| Brook Code Theme offers a wide range of customization options to suit your coding style and preferences. Here's a list of the most commonly used options: | ||
|
|
||
| ### Color Scheme | ||
|
|
||
| The color scheme determines the overall look and feel of the theme. You can choose between a light or dark theme, or even create your own custom color scheme. The default color scheme is a soft pastel theme that provides a calming and relaxing atmosphere. | ||
|
|
||
| ### Syntax Highlighting | ||
|
|
||
| The syntax highlighting option allows you to choose the programming language you want to highlight. You can choose from a variety of languages, including JavaScript, TypeScript, Python, Go, Rust, HTML, and CSS. The default syntax highlighting is set to JavaScript. | ||
|
|
||
| ### Theme Variant | ||
|
|
||
| The theme variant option allows you to choose between two different color schemes. The default variant is a subtle pastel theme that provides a soft and calming look. You can also choose a more vibrant and energetic variant, which is perfect for coding in a fast-paced environment. | ||
|
|
||
| ### Editor Font | ||
|
|
||
| The editor font option allows you to choose the font you want to use in your code editor. You can choose from a variety of fonts, including monospace, sans-serif, and serif. The default font is a monospace font that provides a clean and professional look. | ||
|
|
||
| ### Editor Font Size | ||
|
|
||
| The editor font size option allows you to adjust the size of the font in your code editor. You can choose from a range of font sizes, including small, medium, and large. The default font size is set to medium. | ||
|
|
||
| ### Editor Font Weight | ||
|
|
||
| The editor font weight option allows you to choose the weight of the font in your code editor. You can choose from a range of font weights, including light, regular, and bold. The default font weight is set to regular. | ||
|
|
||
| ### Editor Font Family | ||
|
|
||
| The editor font family option allows you to choose the font family of the font in your code editor. You can choose from a variety of font families, including monospace, sans-serif, and serif. The default font family is set to monospace. | ||
|
|
||
| ### Editor Font Style | ||
|
|
||
| The editor font style option allows you to choose the style of the font in your code editor. You can choose from a variety of font styles, including normal, italic, and oblique. The default font style is set to normal. | ||
|
|
||
| ## Customizing the Theme | ||
|
|
||
| Brook Code Theme is highly customizable, allowing you to tailor the theme to your liking. You can change the color scheme, syntax highlighting, theme variant, editor font, font size, font weight, font family, and font style. Here's how to customize the theme: | ||
|
|
||
| 1. Open the Brook Code Theme settings in your code editor. | ||
| 2. Navigate to the **Theme** section in the settings menu. | ||
| 3. Choose the color scheme, syntax highlighting, theme variant, editor font, font size, font weight, font family, and font style that you want to use. | ||
| 4. Save the changes and enjoy the customized theme! | ||
|
|
||
| ## Enjoy the Theme | ||
|
|
||
| With the Brook Code Theme, you can customize the theme to your liking and create a unique coding experience. Happy coding! 🎨✨ |
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,34 @@ | ||
| --- | ||
| title: Installation | ||
| description: How to install Brook Code Theme | ||
| publishedAt: 2024-12-19 | ||
| --- | ||
|
|
||
| Follow these steps to set up the Brook Code Theme in your favorite editor. This guide includes detailed instructions for Zed Editor and Visual Studio Code. | ||
|
|
||
| ## Zed Editor | ||
|
|
||
| 1. Open **Zed Editor**. | ||
| 2. Navigate to the top-right corner and click on **Settings** (`Ctrl+,` or `Cmd+,`). | ||
| 3. Select the **Themes** section in the settings menu. | ||
| 4. Click on **Marketplace** and search for `Brook Code Theme`. | ||
| 5. Click **Install** next to the Brook Code Theme. | ||
| 6. Once installed, activate the theme. | ||
|
|
||
| Congratulations! Your Zed Editor is now set up with the **Brook Code Theme**. | ||
|
|
||
| ## VSCode | ||
|
|
||
| 1. Open **Visual Studio Code**. | ||
| 2. Go to the **Extensions View**: | ||
| - Click on the Extensions icon in the Activity Bar. | ||
| - Or press `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS). | ||
| 3. In the search bar, type: | ||
| 4. Select the **Brook Code Theme** from the search results. | ||
| 5. Click the **Install** button. | ||
|
|
||
| Your VSCode is now ready to use with the **Brook Code Theme**! | ||
|
|
||
| ## Enjoy the Theme | ||
|
|
||
| Both **Zed Editor** and **VSCode** now have the vibrant and accessible **Brook Code Theme** installed. Happy coding! 🎨✨ |
Oops, something went wrong.