Fix sidebar links
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
@@ -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's father is my father'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's father is my father'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's father is my father'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's father is my father's son.” Who is
|
||||
in the painting?
|
||||
</Text>
|
||||
</Flex>`}
|
||||
/>
|
||||
@@ -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',
|
||||
|
||||
@@ -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[] = [
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user