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

Automatic version number

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-21 12:07:18 +01:00
parent ad3a6dc90c
commit b2fe33e7fd
5 changed files with 81 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/package.json
+1
View File
@@ -22,6 +22,7 @@
"@mdx-js/loader": "^3.1.0",
"@mdx-js/react": "^3.1.0",
"@next/mdx": "15.3.4",
"@remixicon/react": "^4.6.0",
"@storybook/react": "^8.6.8",
"@uiw/codemirror-themes": "^4.23.7",
"@uiw/react-codemirror": "^4.23.7",
docs-ui/src/app/layout.tsx
+22 -2
View File
@@ -15,11 +15,31 @@ export const metadata: Metadata = {
metadataBase: new URL('https://ui.backstage.io'),
};
export default function RootLayout({
async function getLatestPackageVersion(): Promise<string> {
try {
const response = await fetch('https://registry.npmjs.org/@backstage/ui', {
next: { revalidate: 3600 }, // Cache for 1 hour
});
if (!response.ok) {
throw new Error('Failed to fetch package info');
}
const data = await response.json();
return data['dist-tags']?.latest;
} catch (error) {
console.error('Error fetching package version:', error);
return '0.0.0';
}
}
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const packageVersion = await getLatestPackageVersion();
return (
<html
lang="en"
@@ -29,7 +49,7 @@ export default function RootLayout({
>
<body>
<Providers>
<Sidebar />
<Sidebar version={packageVersion} />
<Toolbar />
<div className={styles.container}>{children}</div>
<CustomTheme />
docs-ui/src/components/Sidebar/Sidebar.module.css
+28 -1
View File
@@ -15,6 +15,33 @@
}
}
.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%;
}
@@ -56,7 +83,7 @@
}
.content {
padding: 0 20px 48px;
padding: 0 20px 64px;
}
.menu {
docs-ui/src/components/Sidebar/index.tsx
+20 -1
View File
@@ -7,6 +7,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { motion } from 'motion/react';
import { Fragment } from 'react';
import { RiGithubLine, RiNpmjsLine } from '@remixicon/react';
const data = [
{
@@ -31,12 +32,30 @@ const data = [
},
];
export const Sidebar = () => {
interface SidebarProps {
version: string;
}
export const Sidebar = ({ version }: SidebarProps) => {
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/yarn.lock
+10
View File
@@ -907,6 +907,15 @@ __metadata:
languageName: node
linkType: hard
"@remixicon/react@npm:^4.6.0":
version: 4.6.0
resolution: "@remixicon/react@npm:4.6.0"
peerDependencies:
react: ">=18.2.0"
checksum: 10/d92c8131734062fca8d82d55dd8f3f4e28cb72c5eefda528c8aba5f3298f0c847342eecdbd7787d6da5af21b699d735f6cf27f151f0c982c1c9f06a78b235c94
languageName: node
linkType: hard
"@rtsao/scc@npm:^1.1.0":
version: 1.1.0
resolution: "@rtsao/scc@npm:1.1.0"
@@ -2302,6 +2311,7 @@ __metadata:
"@mdx-js/loader": "npm:^3.1.0"
"@mdx-js/react": "npm:^3.1.0"
"@next/mdx": "npm:15.3.4"
"@remixicon/react": "npm:^4.6.0"
"@storybook/react": "npm:^8.6.8"
"@types/mdx": "npm:^2.0.13"
"@types/node": "npm:^20"