From 1b3b62f45740e99b9e9c7ac588d7eac64ba08b31 Mon Sep 17 00:00:00 2001 From: Cody De Arkland Date: Sun, 9 Nov 2025 21:48:54 -0800 Subject: [PATCH 1/4] feat: Add Beta and New badge components for sidebar navigation - Add beta and new frontmatter fields to FrontMatter type - Add badge styling (.beta-badge and .new-badge) to sidebar styles - Update SidebarLink to render badges based on props - Update CollapsibleSidebarLink to accept and pass through beta/isNew props - Update dynamicNav to pass badge props from context - Update platformSidebar to map frontmatter badge fields This allows documentation pages to display BETA or NEW badges in the sidebar by setting beta: true or new: true in their frontmatter. --- .../sidebar/collapsibleSidebarLink.tsx | 14 +++++ src/components/sidebar/dynamicNav.tsx | 19 +++++-- src/components/sidebar/platformSidebar.tsx | 2 + src/components/sidebar/sidebarLink.tsx | 14 +++-- src/components/sidebar/style.module.scss | 52 +++++++++++++++++-- src/types/frontmatter.ts | 16 ++++++ 6 files changed, 104 insertions(+), 13 deletions(-) diff --git a/src/components/sidebar/collapsibleSidebarLink.tsx b/src/components/sidebar/collapsibleSidebarLink.tsx index e660102a6f2cf..d3b5a0d0fcc19 100644 --- a/src/components/sidebar/collapsibleSidebarLink.tsx +++ b/src/components/sidebar/collapsibleSidebarLink.tsx @@ -26,6 +26,16 @@ interface SidebarLinkProps { * Indicates that the links are currently hidden. Overridden by isActive */ collapsed?: boolean | null; + + /** + * Shows a beta badge next to the title + */ + beta?: boolean; + + /** + * Shows a new badge next to the title + */ + isNew?: boolean; } /** @@ -39,6 +49,8 @@ export function CollapsibleSidebarLink({ path, collapsed = null, className = '', + beta = false, + isNew = false, }: SidebarLinkProps) { const isActive = path?.indexOf(to) === 0; const enableSubtree = isActive || collapsed === false; @@ -54,6 +66,8 @@ export function CollapsibleSidebarLink({ isActive={to === getUnversionedPath(path)} collapsible={hasSubtree} title={title} + beta={beta} + isNew={isNew} onClick={() => { // Allow toggling the sidebar subtree only if the item is selected if (path === to) { diff --git a/src/components/sidebar/dynamicNav.tsx b/src/components/sidebar/dynamicNav.tsx index bf144120f871b..3d0b2c417bb36 100644 --- a/src/components/sidebar/dynamicNav.tsx +++ b/src/components/sidebar/dynamicNav.tsx @@ -11,6 +11,8 @@ type Node = { [key: string]: any; context: { [key: string]: any; + beta?: boolean; + new?: boolean; sidebar_hidden?: boolean; sidebar_order?: number; sidebar_title?: string; @@ -63,7 +65,7 @@ export const renderChildren = ( showDepth: number = 0, depth: number = 0 ): React.ReactNode[] => { - return sortPages( + const sortedChildren = sortPages( children.filter( ({name, node}) => node && @@ -73,23 +75,32 @@ export const renderChildren = ( !node.context.sidebar_hidden ), ({node}) => node! - ).map(({node, children: nodeChildren}) => { + ); + + const result: React.ReactNode[] = []; + + sortedChildren.forEach(({node, children: nodeChildren}, index) => { // will not be null because of the filter above if (!node) { - return null; + return; } - return ( + + result.push( = showDepth} path={path} + beta={node.context.beta} + isNew={node.context.new} > {renderChildren(nodeChildren, exclude, path, showDepth, depth + 1)} ); }); + + return result; }; type ChildrenProps = { diff --git a/src/components/sidebar/platformSidebar.tsx b/src/components/sidebar/platformSidebar.tsx index 8e6213a6d91e0..ebbe1694ec378 100644 --- a/src/components/sidebar/platformSidebar.tsx +++ b/src/components/sidebar/platformSidebar.tsx @@ -22,6 +22,8 @@ export function PlatformSidebar({ sidebar_order: n.frontmatter.sidebar_order, sidebar_title: n.frontmatter.sidebar_title, sidebar_hidden: n.frontmatter.sidebar_hidden, + beta: n.frontmatter.beta, + new: n.frontmatter.new, }, path: '/' + n.path + '/', }; diff --git a/src/components/sidebar/sidebarLink.tsx b/src/components/sidebar/sidebarLink.tsx index 10b50564545b0..adf9ec3c4012a 100644 --- a/src/components/sidebar/sidebarLink.tsx +++ b/src/components/sidebar/sidebarLink.tsx @@ -13,11 +13,15 @@ export function SidebarLink({ collapsible, onClick, topLevel = false, + beta = false, + isNew = false, }: { href: string; title: string; + beta?: boolean; collapsible?: boolean; isActive?: boolean; + isNew?: boolean; onClick?: () => void; topLevel?: boolean; }) { @@ -33,12 +37,12 @@ export function SidebarLink({ }`} data-sidebar-link > -
{title}
+
+ {title} + {beta && BETA} + {isNew && NEW} +
{collapsible && } ); } - -export function SidebarSeparator() { - return
; -} diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss index 3a6850e7d3d31..2cfa5530f6912 100644 --- a/src/components/sidebar/style.module.scss +++ b/src/components/sidebar/style.module.scss @@ -91,10 +91,6 @@ } } - .sidebar-separator { - border-top: 1px solid var(--border-color); - } - .toc { font-size: 0.875rem; flex: 1; @@ -159,3 +155,51 @@ background-color: var(--brandDecoration); } } + +.sidebar-link-content { + display: flex; + align-items: center; + gap: 0.5rem; + flex: 1; + min-width: 0; +} + +.beta-badge { + display: inline-flex; + align-items: center; + padding: 0.0625rem 0.375rem; + font-size: 0.625rem; + font-weight: 500; + letter-spacing: 0.02em; + color: #fafaf9; /* off-white */ + background-color: transparent; + border: 1px solid #f59e0b; /* amber-500 warning color */ + border-radius: 0.25rem; + white-space: nowrap; + flex-shrink: 0; +} + +:global(.dark) .beta-badge { + color: #fafaf9; /* off-white */ + border-color: #fbbf24; /* amber-400 for dark mode */ +} + +.new-badge { + display: inline-flex; + align-items: center; + padding: 0.0625rem 0.375rem; + font-size: 0.625rem; + font-weight: 500; + letter-spacing: 0.02em; + color: #fafaf9; /* off-white */ + background-color: transparent; + border: 1px solid #10b981; /* emerald-500 success green */ + border-radius: 0.25rem; + white-space: nowrap; + flex-shrink: 0; +} + +:global(.dark) .new-badge { + color: #fafaf9; /* off-white */ + border-color: #34d399; /* emerald-400 for dark mode */ +} diff --git a/src/types/frontmatter.ts b/src/types/frontmatter.ts index 197a4e2c5a8b3..8946a1008b3b0 100644 --- a/src/types/frontmatter.ts +++ b/src/types/frontmatter.ts @@ -23,6 +23,17 @@ export interface FrontMatter { * Set this to true to mark this page as a draft, and hide it from various other components (such as the PageGrid). */ draft?: boolean; + + /** + * Set this to true to show a "beta" badge next to the title in the sidebar + */ + beta?: boolean; + + /** + * Set this to true to show a "new" badge next to the title in the sidebar + */ + new?: boolean; + /** * Set this to true to take all the available width for the page content. */ @@ -87,6 +98,11 @@ export interface FrontMatter { */ sidebar_title?: string; + /** + * Set this to true to show a separator/divider below this item in the sidebar + */ + section_end_divider?: boolean; + /** * filesystem path to the source file, generated during build time */ From b18ed9f4a92a35649c244d9794dd8044b112d677 Mon Sep 17 00:00:00 2001 From: Cody De Arkland Date: Sun, 9 Nov 2025 22:55:15 -0800 Subject: [PATCH 2/4] Fix TypeScript and linting errors - Add missing SidebarSeparator component export - Fix interface key ordering in collapsibleSidebarLink and frontmatter types - Remove unused index parameter in dynamicNav - Add CSS styles for sidebar separator --- .../sidebar/collapsibleSidebarLink.tsx | 11 +++++----- src/components/sidebar/dynamicNav.tsx | 2 +- src/components/sidebar/sidebarLink.tsx | 4 ++++ src/components/sidebar/style.module.scss | 6 ++++++ src/types/frontmatter.ts | 21 ++++++++++--------- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/components/sidebar/collapsibleSidebarLink.tsx b/src/components/sidebar/collapsibleSidebarLink.tsx index d3b5a0d0fcc19..73c51680888ab 100644 --- a/src/components/sidebar/collapsibleSidebarLink.tsx +++ b/src/components/sidebar/collapsibleSidebarLink.tsx @@ -16,6 +16,12 @@ interface SidebarLinkProps { */ title: string; to: string; + + /** + * Shows a beta badge next to the title + */ + beta?: boolean; + /** * Children represent the additional links nested under this sidebar link */ @@ -27,11 +33,6 @@ interface SidebarLinkProps { */ collapsed?: boolean | null; - /** - * Shows a beta badge next to the title - */ - beta?: boolean; - /** * Shows a new badge next to the title */ diff --git a/src/components/sidebar/dynamicNav.tsx b/src/components/sidebar/dynamicNav.tsx index 3d0b2c417bb36..8f0a2841d5a7f 100644 --- a/src/components/sidebar/dynamicNav.tsx +++ b/src/components/sidebar/dynamicNav.tsx @@ -79,7 +79,7 @@ export const renderChildren = ( const result: React.ReactNode[] = []; - sortedChildren.forEach(({node, children: nodeChildren}, index) => { + sortedChildren.forEach(({node, children: nodeChildren}) => { // will not be null because of the filter above if (!node) { return; diff --git a/src/components/sidebar/sidebarLink.tsx b/src/components/sidebar/sidebarLink.tsx index adf9ec3c4012a..e5de1be487543 100644 --- a/src/components/sidebar/sidebarLink.tsx +++ b/src/components/sidebar/sidebarLink.tsx @@ -46,3 +46,7 @@ export function SidebarLink({ ); } + +export function SidebarSeparator() { + return
; +} diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss index 2cfa5530f6912..91c1894602782 100644 --- a/src/components/sidebar/style.module.scss +++ b/src/components/sidebar/style.module.scss @@ -203,3 +203,9 @@ color: #fafaf9; /* off-white */ border-color: #34d399; /* emerald-400 for dark mode */ } + +.sidebar-separator { + margin: 1rem 0; + border: none; + border-top: 1px solid var(--border-color); +} diff --git a/src/types/frontmatter.ts b/src/types/frontmatter.ts index 8946a1008b3b0..d11aec379289e 100644 --- a/src/types/frontmatter.ts +++ b/src/types/frontmatter.ts @@ -19,10 +19,6 @@ export interface FrontMatter { customCanonicalTag?: string; /** Add this if you want to add a canonical tag (without this it will default to the page url). Should be a relative path without the domain (e.g. `/platforms/react/options/`) */ description?: string; - /** - * Set this to true to mark this page as a draft, and hide it from various other components (such as the PageGrid). - */ - draft?: boolean; /** * Set this to true to show a "beta" badge next to the title in the sidebar @@ -30,14 +26,19 @@ export interface FrontMatter { beta?: boolean; /** - * Set this to true to show a "new" badge next to the title in the sidebar + * Set this to true to mark this page as a draft, and hide it from various other components (such as the PageGrid). */ - new?: boolean; + draft?: boolean; /** * Set this to true to take all the available width for the page content. */ fullWidth?: boolean; + + /** + * Set this to true to show a "new" badge next to the title in the sidebar + */ + new?: boolean; /** * A list of keywords for indexing with search. */ @@ -94,14 +95,14 @@ export interface FrontMatter { sidebar_order?: number; /** - * optional sidebar title + * Set this to true to show a separator/divider below this item in the sidebar */ - sidebar_title?: string; + section_end_divider?: boolean; /** - * Set this to true to show a separator/divider below this item in the sidebar + * optional sidebar title */ - section_end_divider?: boolean; + sidebar_title?: string; /** * filesystem path to the source file, generated during build time From 00a10a0fae38d3d0536976876bc6c9c48110ef1b Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Mon, 10 Nov 2025 06:56:15 +0000 Subject: [PATCH 3/4] [getsentry/action-github-commit] Auto commit --- src/types/frontmatter.ts | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/types/frontmatter.ts b/src/types/frontmatter.ts index d11aec379289e..edbc7fae4fd9f 100644 --- a/src/types/frontmatter.ts +++ b/src/types/frontmatter.ts @@ -13,18 +13,18 @@ export interface FrontMatter { * Document title - used in as well as things like search titles. */ title: string; + /** + * Set this to true to show a "beta" badge next to the title in the sidebar + */ + beta?: boolean; /** * A description to use in the <meta> header, as well as in auto generated page grids. */ customCanonicalTag?: string; + /** Add this if you want to add a canonical tag (without this it will default to the page url). Should be a relative path without the domain (e.g. `/platforms/react/options/`) */ description?: string; - /** - * Set this to true to show a "beta" badge next to the title in the sidebar - */ - beta?: boolean; - /** * Set this to true to mark this page as a draft, and hide it from various other components (such as the PageGrid). */ @@ -35,14 +35,14 @@ export interface FrontMatter { */ fullWidth?: boolean; - /** - * Set this to true to show a "new" badge next to the title in the sidebar - */ - new?: boolean; /** * A list of keywords for indexing with search. */ keywords?: string[]; + /** + * Set this to true to show a "new" badge next to the title in the sidebar + */ + new?: boolean; /** * The next page in the bottom pagination navigation. @@ -82,9 +82,14 @@ export interface FrontMatter { previousPage?: PaginationNavNode; /** - * The next page in the sidebar navigation. + * Set this to true to show a separator/divider below this item in the sidebar */ + section_end_divider?: boolean; + /** + * The next page in the sidebar navigation. + */ +/** * Set this to true to hide from the sidebar */ sidebar_hidden?: boolean; @@ -94,11 +99,6 @@ export interface FrontMatter { */ sidebar_order?: number; - /** - * Set this to true to show a separator/divider below this item in the sidebar - */ - section_end_divider?: boolean; - /** * optional sidebar title */ From bbf94aa405b5336fda1d0f54d32f38a159ea5d99 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Mon, 10 Nov 2025 06:56:59 +0000 Subject: [PATCH 4/4] [getsentry/action-github-commit] Auto commit --- src/types/frontmatter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/frontmatter.ts b/src/types/frontmatter.ts index edbc7fae4fd9f..c7a71bbb5041d 100644 --- a/src/types/frontmatter.ts +++ b/src/types/frontmatter.ts @@ -89,7 +89,7 @@ export interface FrontMatter { /** * The next page in the sidebar navigation. */ -/** + /** * Set this to true to hide from the sidebar */ sidebar_hidden?: boolean;