Skip to content

Commit 5d6e78a

Browse files
zettcazettca
authored
docs: migrate to nextra@4 (#4754)
* docs: move pages -> content folder * chore: upgrade nextra/next & setup layout/page config chore: fix getStaticProps/useData APIs in Header/Playground * chore: migrate components Header & merge Header/Playground * chore: misc fixes & fix decorators * chore: add pagefind & ignore code regions * chore: review icons & description * docs: align visuals * chore: fix examples nav
1 parent 06776ee commit 5d6e78a

File tree

183 files changed

+2306
-3044
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

183 files changed

+2306
-3044
lines changed

‎.github/workflows/documentation.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ jobs:
2020
steps:
2121
- name: Checkout
2222
uses: actions/checkout@v4
23+
with:
24+
fetch-depth: 0
2325

2426
- name: Install Dependencies
2527
uses: ./.github/actions/install-dependencies

‎apps/docs/env.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "!!raw-loader!*" {
2+
const src: string;
3+
export default src;
4+
}

‎apps/docs/next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
5+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

‎apps/docs/next.config.mjs

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import nextra from "nextra";
22
import rehypeMdxCodeProps from "rehype-mdx-code-props";
33

44
const withNextra = nextra({
5-
theme: "nextra-theme-docs",
6-
themeConfig: "./theme.config.tsx",
75
defaultShowCopyCode: true,
86
search: {
97
codeblocks: false,
@@ -43,6 +41,21 @@ export default withNextra({
4341
],
4442
});
4543

44+
// Inject "use client"; to UI Kit packages' entry (index.ts) file
45+
config.module.rules.push({
46+
test: /packages\/.*\/src\/index\.ts$/,
47+
use: [
48+
{
49+
loader: "string-replace-loader",
50+
options: {
51+
search: "^",
52+
replace: '"use client";\n',
53+
flags: "g",
54+
},
55+
},
56+
],
57+
});
58+
4659
// Add raw file loader
4760
config.module.rules.push({
4861
test: /\.(tsx|ts|mdx)$/,

‎apps/docs/package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"scripts": {
66
"dev": "next dev",
77
"build": "next build",
8+
"postbuild": "pagefind --site dist --output-path dist/_pagefind",
89
"start": "npx serve dist"
910
},
1011
"dependencies": {
@@ -14,9 +15,9 @@
1415
"@hitachivantara/uikit-react-viz": "*",
1516
"@phosphor-icons/react": "^2.1.7",
1617
"clsx": "^2.1.1",
17-
"next": "^15.1.7",
18-
"nextra": "^3.3.1",
19-
"nextra-theme-docs": "^3.3.1",
18+
"next": "^15.3.2",
19+
"nextra": "^4.2.17",
20+
"nextra-theme-docs": "^4.2.17",
2021
"prism-react-renderer": "^2.4.0",
2122
"react": "^18.3.1",
2223
"react-docgen-typescript": "^2.2.2",
@@ -30,6 +31,7 @@
3031
"@types/node": "^20.11.6",
3132
"@types/react": "^18.2.43",
3233
"@unocss/postcss": "^66.0.0",
34+
"pagefind": "^1.3.0",
3335
"raw-loader": "^4.0.2",
3436
"rehype-mdx-code-props": "^3.0.1",
3537
"string-replace-loader": "^3.1.0",

‎apps/docs/src/app/[[...mdxPath]]/page.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { generateStaticParamsFor, importPage } from "nextra/pages";
2+
3+
import { useMDXComponents as getMDXComponents } from "../../mdx-components";
4+
5+
export const generateStaticParams = generateStaticParamsFor("mdxPath");
6+
7+
export async function generateMetadata(props: any) {
8+
const params = await props.params;
9+
const { metadata } = await importPage(params.mdxPath);
10+
return metadata;
11+
}
12+
13+
const Wrapper = getMDXComponents().wrapper;
14+
15+
export default async function Page(props: any) {
16+
const params = await props.params;
17+
const result = await importPage(params.mdxPath);
18+
const { default: MDXContent, toc, metadata } = result;
19+
20+
return (
21+
<Wrapper toc={toc} metadata={metadata}>
22+
<MDXContent {...props} params={params} />
23+
</Wrapper>
24+
);
25+
}

‎apps/docs/src/app/globals.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@unocss all;
2+
3+
.dark {
4+
@apply bg-[#151c26];
5+
}
6+
7+
html,
8+
body {
9+
height: auto;
10+
}
11+
12+
pre {
13+
@apply my-4;
14+
}
15+
16+
article main,
17+
article main.x\:w-full {
18+
font-size: 1rem;
19+
}
20+
21+
header {
22+
& a:last-of-type svg {
23+
@apply size-20px;
24+
}
25+
& button svg {
26+
@apply size-16px;
27+
}
28+
}
29+
30+
.nextra-toc {
31+
@apply w-224px;
32+
33+
& a {
34+
@apply font-normal;
35+
}
36+
37+
& p {
38+
@apply shadow-none;
39+
}
40+
}
41+
42+
.nextra-sidebar-footer,
43+
.nextra-toc-footer {
44+
display: none;
45+
}
46+
47+
.nextra-breadcrumb {
48+
@apply mb-sm;
49+
}
50+
51+
.nextra-code {
52+
@apply !my-0;
53+
}
54+
55+
.nextra-code .nextra-focus {
56+
@apply bg-slate-50;
57+
}
58+
59+
.nextra-scrollbar {
60+
& [aria-current="true"] {
61+
@apply text-text;
62+
}
63+
64+
& [aria-current="false"] {
65+
@apply text-textSubtle;
66+
}
67+
}

‎apps/docs/src/app/layout.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import "nextra-theme-docs/style.css";
2+
import "./globals.css";
3+
4+
import { type NextraMetadata } from "nextra";
5+
import { Layout, Navbar, ThemeSwitch } from "nextra-theme-docs";
6+
import { Head, Search } from "nextra/components";
7+
import { getPageMap } from "nextra/page-map";
8+
9+
import { UIKitLogo } from "../assets/logos";
10+
import { Footer } from "../components/Footer";
11+
import { Main } from "../components/Main";
12+
import { ThemeSwitcher } from "../components/ThemeSwitcher";
13+
14+
const title = "UI Kit";
15+
const description = "UI Kit documentation site";
16+
17+
export const metadata = {
18+
metadataBase: new URL("https://github.com/lumada-design/hv-uikit-react"),
19+
title: { default: "UI Kit", template: "%s - UI Kit" },
20+
description,
21+
icons: "https://lumada-design.github.io/assets/uikit-icon.svg",
22+
creator: "UI Kit Team",
23+
applicationName: title,
24+
appleWebApp: { title },
25+
openGraph: {
26+
url: "@site",
27+
siteName: title,
28+
title,
29+
description,
30+
type: "website",
31+
},
32+
twitter: {
33+
site: "@site",
34+
creator: "@creator",
35+
card: "summary",
36+
},
37+
} satisfies NextraMetadata;
38+
39+
const navbar = (
40+
<Navbar
41+
logo={<UIKitLogo />}
42+
projectLink="https://github.com/lumada-design/hv-uikit-react"
43+
>
44+
<ThemeSwitch lite />
45+
<ThemeSwitcher />
46+
</Navbar>
47+
);
48+
49+
export default async function RootLayout({
50+
children,
51+
}: {
52+
children: React.ReactNode;
53+
}) {
54+
return (
55+
<html lang="en" dir="ltr" suppressHydrationWarning>
56+
<Head faviconGlyph="✦" color={{ hue: 210 }}>
57+
<link
58+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;&family=Open+Sans:wght@400;600&display=swap"
59+
rel="stylesheet"
60+
/>
61+
</Head>
62+
<body>
63+
<Layout
64+
navbar={navbar}
65+
feedback={{ content: null }}
66+
toc={{ title: "Table of Contents" }}
67+
search={<Search placeholder="Search..." />}
68+
footer={<Footer />}
69+
editLink={null}
70+
docsRepositoryBase="https://github.com/lumada-design/hv-uikit-react/tree/master/apps/docs"
71+
sidebar={{ defaultMenuCollapseLevel: 1, toggleButton: false }}
72+
pageMap={await getPageMap()}
73+
>
74+
<Main>{children}</Main>
75+
</Layout>
76+
</body>
77+
</html>
78+
);
79+
}

‎apps/docs/src/assets/logos.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export const UIKitLogo = () => (
2+
<svg width="100" viewBox="0 0 439 160" fill="light-dark(#333, #fff)">
3+
<title>UI Kit Logo</title>
4+
<path d="M0 12C0 5.37258 5.37258 0 12 0H165C171.627 0 177 5.37258 177 12V148C177 154.627 171.627 160 165 160H12C5.37258 160 0 154.627 0 148V12Z" />
5+
<path
6+
d="M82.2727 39.7273H105.966V95.6364C105.966 102.284 104.375 108.037 101.193 112.895C98.0398 117.724 93.6364 121.46 87.983 124.102C82.3295 126.716 75.767 128.023 68.2955 128.023C60.767 128.023 54.1761 126.716 48.5227 124.102C42.8693 121.46 38.4659 117.724 35.3125 112.895C32.1875 108.037 30.625 102.284 30.625 95.6364V39.7273H54.3182V93.5909C54.3182 96.2898 54.9148 98.7045 56.108 100.835C57.3011 102.937 58.9489 104.585 61.0511 105.778C63.1818 106.972 65.5966 107.568 68.2955 107.568C71.0227 107.568 73.4375 106.972 75.5398 105.778C77.642 104.585 79.2898 102.937 80.483 100.835C81.6761 98.7045 82.2727 96.2898 82.2727 93.5909V39.7273ZM140.92 39.7273V127H117.227V39.7273H140.92Z"
7+
fill="light-dark(#fff, #333)"
8+
/>
9+
<path d="M214.608 127V39.7273H230.418V79.8267H231.483L265.531 39.7273H284.835L251.085 78.8892L285.134 127H266.128L240.091 89.5852L230.418 101.006V127H214.608ZM311.629 39.7273V127H295.819V39.7273H311.629ZM324.913 52.9801V39.7273H394.544V52.9801H367.57V127H351.888V52.9801H324.913Z" />
10+
</svg>
11+
);
12+
13+
export const GitHubLogo = () => (
14+
<svg
15+
width="1em"
16+
height="1em"
17+
viewBox="0 0 16 16"
18+
fill="light-dark(#000, #fff)"
19+
>
20+
<title>GitHub Logo</title>
21+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
22+
</svg>
23+
);
24+
25+
export const NpmLogo = () => (
26+
<svg width="1em" height="1em" viewBox="0 0 256 256">
27+
<title>NPM Logo</title>
28+
<path d="M0 256V0h256v256z" fill="#C12127" />
29+
<path d="M48 48h160v160h-32V80h-48v128H48z" fill="#FFF" />
30+
</svg>
31+
);

‎apps/docs/src/components/Examples.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1+
import canvas from "!!raw-loader!../content/examples/canvas.mdx";
2+
import charts from "!!raw-loader!../content/examples/charts.mdx";
3+
import dnd from "!!raw-loader!../content/examples/dnd.mdx";
4+
import inputs from "!!raw-loader!../content/examples/inputs.mdx";
5+
import kpis from "!!raw-loader!../content/examples/kpis.mdx";
6+
import tables from "!!raw-loader!../content/examples/tables.mdx";
17
import { clsx } from "clsx";
28
import Link from "next/link";
39
import {
410
HvIconContainer,
511
HvTypography,
612
} from "@hitachivantara/uikit-react-core";
713

8-
import canvas from "../pages/examples/canvas.mdx?raw";
9-
import charts from "../pages/examples/charts.mdx?raw";
10-
import dnd from "../pages/examples/dnd.mdx?raw";
11-
import inputs from "../pages/examples/inputs.mdx?raw";
12-
import kpis from "../pages/examples/kpis.mdx?raw";
13-
import tables from "../pages/examples/tables.mdx?raw";
14-
1514
/**
1615
* Extracts the number of CodeBlock components in the given file content.
1716
*/

0 commit comments

Comments
 (0)