Fix sidebar links

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-23 07:36:21 +01:00
parent 5519be9762
commit b829a7427b
8 changed files with 15 additions and 59 deletions
-45
View File
@@ -1,45 +0,0 @@
import { TextSnippet } from '@/snippets/stories-snippets';
import { Snippet } from '@/components/Snippet';
# Typography
Backstage UI offers a suite of typography components designed to seamlessly align
with the rest of your Backstage instance. While you can customize their
appearance to match your brand, the underlying API remains consistent and
unchanged. Each component is built on a responsive structure, allowing you to
define different typography values for various breakpoints.
## Text
Backstage UI provides four distinct text variants, each offering different font sizes
carefully designed to cover the majority of use cases. These variants are
versatile and can be paired with regular and bold of font weights. You can use
the [Text component](?path=/docs/components-text--docs) to add text to your
page.
<Snippet
open
preview={<TextSnippet story="AllVariants" />}
code={`<Flex direction="column" gap="4">
<Text variant="subtitle" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="body" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="caption" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
<Text variant="label" style={{ maxWidth: '600px' }}>
A man looks at a painting in a museum and says, “Brothers and sisters I
have none, but that man&apos;s father is my father&apos;s son.” Who is
in the painting?
</Text>
</Flex>`}
/>
+9 -4
View File
@@ -1,7 +1,12 @@
'use client';
import styles from './Sidebar.module.css';
import { components, overview, layoutComponents, theme } from '@/utils/data';
import {
components,
overview,
layoutComponents,
coreConcepts,
} from '@/utils/data';
import { ScrollArea } from '@base-ui-components/react/scroll-area';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
@@ -15,9 +20,9 @@ const data = [
url: '',
},
{
title: 'Theme',
content: theme,
url: '/theme',
title: 'Core Concepts',
content: coreConcepts,
url: '',
},
{
title: 'Layout Components',
+1 -5
View File
@@ -19,7 +19,7 @@ export const overview: Page[] = [
},
];
export const theme: Page[] = [
export const coreConcepts: Page[] = [
{
title: 'Iconography',
slug: 'iconography',
@@ -36,10 +36,6 @@ export const theme: Page[] = [
title: 'Theming',
slug: 'theming',
},
{
title: 'Typography',
slug: 'typography',
},
];
export const layoutComponents: Page[] = [
+5 -5
View File
@@ -1,4 +1,4 @@
import { overview, theme, components, layoutComponents } from './data';
import { overview, coreConcepts, components, layoutComponents } from './data';
export function getPageName(slug: string): string | null {
// Search in overview pages
@@ -7,10 +7,10 @@ export function getPageName(slug: string): string | null {
return overviewPage.title;
}
// Search in theme pages
const themePage = theme.find(p => p.slug === slug);
if (themePage) {
return themePage.title;
// Search in core concepts array
const coreConcept = coreConcepts.find(c => c.slug === slug);
if (coreConcept) {
return coreConcept.title;
}
// Search in components array