paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 20 Packages Projects Releases Wiki Activity

Improve docs header

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-22 15:08:50 +01:00
parent 771dcc28a0
commit 2329cb09e5
13 changed files with 401 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/app/layout.tsx
+4 -2
View File
@@ -1,6 +1,7 @@
import type { Metadata } from 'next';
import { Sidebar } from '../components/Sidebar';
import { Toolbar } from '@/components/Toolbar';
import { StickyHeader } from '../components/StickyHeader/StickyHeader';
import { Providers } from './providers';
import { CustomTheme } from '@/components/CustomTheme';
import styles from './layout.module.css';
@@ -49,8 +50,9 @@ export default async function RootLayout({
>
<body>
<Providers>
<Sidebar version={packageVersion} />
<Toolbar />
<Sidebar />
<Toolbar version={packageVersion} />
<StickyHeader />
<div className={styles.container}>
<div className={styles.content}>{children}</div>
</div>
docs-ui/src/components/Sidebar/Sidebar.module.css
+4 -27
View File
@@ -15,33 +15,6 @@
}
}
.version {
font-size: 0.875rem;
font-weight: 500;
color: var(--secondary);
margin-inline: 32px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.versionLinks {
display: flex;
align-items: center;
gap: 8px;
a {
color: var(--secondary);
transition: color 0.2s ease-in-out;
&:hover {
color: var(--primary);
}
}
}
.root {
height: 100%;
}
@@ -106,6 +79,10 @@
color: var(--secondary);
margin-top: 40px;
text-transform: uppercase;
&:first-child {
margin-top: 12px;
}
}
.line {
docs-ui/src/components/Sidebar/index.tsx
+1 -15
View File
@@ -36,26 +36,12 @@ interface SidebarProps {
version: string;
}
export const Sidebar = ({ version }: SidebarProps) => {
export const Sidebar = () => {
const pathname = usePathname();
const isPlayground = pathname.includes('/playground');
return (
<div className={styles.sidebar}>
<div className={styles.version}>
Version {version}
<div className={styles.versionLinks}>
<a
href="https://github.com/backstage/backstage/tree/master/packages/ui"
target="_blank"
>
<RiGithubLine size={16} />
</a>
<a href="https://www.npmjs.com/package/@backstage/ui" target="_blank">
<RiNpmjsLine size={16} />
</a>
</div>
</div>
<ScrollArea.Root className={styles.root}>
<ScrollArea.Viewport className={styles.viewport}>
<div className={styles.content}>
docs-ui/src/components/StickyHeader/StickyHeader.module.css
+92
View File
@@ -0,0 +1,92 @@
.stickyHeader {
position: fixed;
top: 0px;
left: 32px;
right: 32px;
z-index: 99999;
background-color: var(--background);
padding: 16px 20px 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(10px);
pointer-events: auto;
isolation: isolate;
transform: translateZ(0);
opacity: 0;
width: calc(100% - 64px);
mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(
to bottom,
black 0%,
black 80%,
transparent 100%
);
}
@media (max-width: 768px) {
.stickyHeader {
display: none;
}
}
.right {
display: flex;
align-items: center;
gap: 24px;
}
.name {
font-size: 24px;
color: var(--text-primary);
font-weight: 400;
}
.version {
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;
}
.actions {
display: flex;
align-items: center;
gap: 16px;
}
.versionLinks {
display: flex;
align-items: center;
gap: 12px;
}
.versionLinks a {
color: var(--text-secondary);
transition: color 0.2s ease;
}
.versionLinks a:hover {
color: var(--text-primary);
}
@media (max-width: 768px) {
.stickyHeader {
padding: 12px 16px;
}
.right {
gap: 16px;
}
.version {
font-size: 12px;
}
}
@media (min-width: 768px) {
.stickyHeader {
width: calc(100% - 332px - 40px);
left: 332px;
right: 40px;
}
}
docs-ui/src/components/StickyHeader/StickyHeader.tsx
+50
View File
@@ -0,0 +1,50 @@
'use client';
import { motion, useScroll, useTransform, circOut } from 'framer-motion';
import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
import { ThemeSelector } from '../Toolbar/theme';
import { ThemeNameSelector } from '../Toolbar/theme-name';
import { useCurrentPage } from '@/hooks/useCurrentPage';
import styles from './StickyHeader.module.css';
export const StickyHeader = () => {
const { scrollY } = useScroll();
const currentPage = useCurrentPage();
// Transform scroll position to opacity only
const opacity = useTransform(scrollY, [100, 200], [0, 1], {
clamp: false,
});
const yPos = useTransform(scrollY, [200, 500], [-60, 0], {
clamp: true,
ease: circOut,
});
return (
<motion.div
className={styles.stickyHeader}
style={{
opacity,
y: yPos,
}}
>
<div className={styles.name}>{currentPage || 'Backstage UI'}</div>
<div className={styles.actions}>
<div className={styles.versionLinks}>
<a
href="https://github.com/backstage/backstage/tree/master/packages/ui"
target="_blank"
>
<RiGithubLine size={16} />
</a>
<a href="https://www.npmjs.com/package/@backstage/ui" target="_blank">
<RiNpmjsLine size={16} />
</a>
</div>
<ThemeNameSelector />
<ThemeSelector />
</div>
</motion.div>
);
};
docs-ui/src/components/Toolbar/Logo.tsx
+20
View File
File diff suppressed because one or more lines are too long
docs-ui/src/components/Toolbar/Toolbar.module.css
+63 -12
View File
@@ -11,30 +11,50 @@
padding-left: 0.25rem;
}
@media (min-width: 960px) {
.toolbar {
left: 332px;
right: 40px;
}
}
.left {
/* width: 296px; */
display: flex;
align-items: center;
gap: 0.5rem;
padding-right: 20px;
}
.name {
margin-top: 3px;
font-size: 28px;
color: #26c9ad;
font-weight: 500;
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.actions {
display: none;
}
.version {
display: none;
}
.versionLinks {
display: flex;
align-items: center;
a {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary);
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
border-radius: 48px;
&:hover {
color: var(--primary);
background-color: var(--action);
}
}
}
@media (min-width: 600px) {
.actions {
display: flex;
@@ -42,3 +62,34 @@
gap: 1rem;
}
}
@media (min-width: 768px) {
.toolbar {
right: 40px;
}
}
@media (min-width: 820px) {
.right {
justify-content: space-between;
}
.version {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--action);
border-radius: 48px;
padding-inline: 20px;
color: var(--primary);
font-size: 0.875rem;
font-weight: 500;
height: 48px;
}
}
@media (min-width: 960px) {
.left {
width: 296px;
}
}
docs-ui/src/components/Toolbar/Toolbar.tsx
+40 -19
View File
File diff suppressed because one or more lines are too long
docs-ui/src/components/Toolbar/theme-name.module.css
+41 -68
View File
@@ -25,19 +25,6 @@
}
}
.SelectIcon {
display: flex;
}
.SelectValue {
font-size: 0.875rem;
font-weight: 400;
}
.Positioner {
z-index: 20;
}
.Popup {
box-sizing: border-box;
padding-block: 0.25rem;
@@ -73,65 +60,51 @@
}
}
.Item {
box-sizing: border-box;
outline: 0;
font-size: 0.875rem;
line-height: 1rem;
padding-block: 0.5rem;
padding-left: 0.625rem;
padding-right: 1rem;
font-size: 0.875rem;
font-weight: 600;
display: grid;
gap: 0.5rem;
align-items: center;
grid-template-columns: 0.75rem 1fr;
cursor: default;
user-select: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
.Popup[data-trigger='Select'] {
min-width: var(--trigger-width);
[data-side='none'] & {
font-size: 1rem;
padding-right: 3rem;
min-width: calc(var(--anchor-width) + 1rem);
.ListBox {
display: block;
width: unset;
max-height: inherit;
min-height: unset;
border: none;
.react-aria-Header {
padding-left: 1.571rem;
}
}
&[data-highlighted] {
z-index: 0;
.Item {
position: relative;
color: var(--color-gray-50);
background-color: var(--bg);
}
padding: 0 0.571rem 0 1.571rem;
height: 2rem;
display: flex;
align-items: center;
&[data-highlighted]::before {
content: '';
z-index: -1;
position: absolute;
inset-block: 0;
inset-inline: 0.25rem;
border-radius: 0.25rem;
background-color: var(--color-gray-900);
&[data-focus-visible] {
outline: none;
}
&[data-selected] {
font-weight: 600;
background: unset;
color: var(--text-color);
&::before {
content: '✓';
content: '✓' / '';
alt: ' ';
position: absolute;
left: 4px;
}
}
&[data-focused],
&[data-pressed] {
background: var(--bg);
color: var(--primary);
cursor: pointer;
}
}
}
.ItemIndicator {
grid-column-start: 1;
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
}
.ItemIndicatorIcon {
display: block;
width: 0.75rem;
height: 0.75rem;
}
.ItemText {
grid-column-start: 2;
font-size: 14px;
}
docs-ui/src/components/Toolbar/theme-name.tsx
+25 -30
View File
@@ -1,6 +1,13 @@
'use client';
import { Select } from '@base-ui-components/react/select';
import {
Button,
ListBox,
ListBoxItem,
Popover,
Select,
SelectValue,
} from 'react-aria-components';
import styles from './theme-name.module.css';
import { Icon } from '@backstage/ui';
import { usePlayground } from '@/utils/playground-context';
@@ -15,35 +22,23 @@ export const ThemeNameSelector = () => {
const { selectedThemeName, setSelectedThemeName } = usePlayground();
return (
<Select.Root
value={selectedThemeName || 'default'}
onValueChange={setSelectedThemeName}
<Select
selectedKey={selectedThemeName || 'default'}
onSelectionChange={setSelectedThemeName}
>
<Select.Trigger className={styles.Select}>
<Select.Value
className={styles.SelectValue}
placeholder="Select a theme"
/>
<Select.Icon className={styles.SelectIcon}>
<Icon name="chevron-down" />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Positioner className={styles.Positioner} sideOffset={8}>
<Select.Popup className={styles.Popup}>
{themes.map(({ name, value }) => (
<Select.Item className={styles.Item} value={value} key={value}>
<Select.ItemIndicator className={styles.ItemIndicator}>
<Icon name="check" />
</Select.ItemIndicator>
<Select.ItemText className={styles.ItemText}>
{name}
</Select.ItemText>
</Select.Item>
))}
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
<Button className={styles.Select}>
<SelectValue />
<Icon name="chevron-down" />
</Button>
<Popover className={styles.Popup}>
<ListBox className={styles.ListBox}>
{themes.map(({ name, value }) => (
<ListBoxItem key={value} id={value} className={styles.Item}>
{name}
</ListBoxItem>
))}
</ListBox>
</Popover>
</Select>
);
};
docs-ui/src/css/globals.css
+1 -1
View File
@@ -1,5 +1,5 @@
:root {
--bg: #f8f8f8;
--bg: #f4f4f4;
--panel: #fff;
--primary: #000;
--secondary: #929292;
docs-ui/src/hooks/useCurrentPage.ts
+31
View File
@@ -0,0 +1,31 @@
'use client';
import { usePathname } from 'next/navigation';
import { getPageName } from '@/utils/getPageName';
export function useCurrentPage(): string | null {
const pathname = usePathname();
// Handle root path
if (pathname === '/') {
return 'Getting Started';
}
// Extract slug from various path patterns
const patterns = [
/^\/components\/(.+)$/, // /components/button
/^\/theme\/(.+)$/, // /theme/typography
/^\/about$/, // /about
/^\/changelog$/, // /changelog
];
for (const pattern of patterns) {
const match = pathname.match(pattern);
if (match) {
const slug = match[1] || pathname.slice(1); // Use full path for exact matches
return getPageName(slug);
}
}
return null;
}
docs-ui/src/utils/getPageName.ts
+29
View File
@@ -0,0 +1,29 @@
import { overview, theme, components, layoutComponents } from './data';
export function getPageName(slug: string): string | null {
// Search in overview pages
const overviewPage = overview.find(p => p.slug === slug);
if (overviewPage) {
return overviewPage.title;
}
// Search in theme pages
const themePage = theme.find(p => p.slug === slug);
if (themePage) {
return themePage.title;
}
// Search in components array
const component = components.find(c => c.slug === slug);
if (component) {
return component.title;
}
// Search in layoutComponents array
const layoutComponent = layoutComponents.find(c => c.slug === slug);
if (layoutComponent) {
return layoutComponent.title;
}
return null;
}