Skip to content

Commit 6c33f63

Browse files
tay1orjonestay1orjones
authored
feat(examples): add lastBuiltOn to elements previews (#22194)
* chore: update Next.js examples to v16 * fix(examples): correct root pathing problems with turborepo * ci(examples): add elements previews ci check * feat(examples): add lastBuiltOn to elements previews * fix: move lastBuiltOn to header instead of footer
1 parent aa1c85a commit 6c33f63

10 files changed

Lines changed: 100 additions & 16 deletions

File tree

‎packages/colors/examples/preview/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@ function Code({ children }) {
4040
);
4141
}
4242

43-
export default function App() {
43+
export default function App({ lastBuiltOn }) {
4444
return (
4545
<main>
4646
<h1>Preview</h1>
47+
<p>Last built on {lastBuiltOn}</p>
4748
<section>
4849
<header>
4950
<h1>Colors</h1>
@@ -100,6 +101,14 @@ export default function App() {
100101
return 'App!';
101102
}
102103

104+
export async function getStaticProps() {
105+
return {
106+
props: {
107+
lastBuiltOn: new Date().toISOString(),
108+
},
109+
};
110+
}
111+
103112
// <Table>
104113
// {Object.keys(colors).map(key => (
105114
// <tr key={key}>

‎packages/grid/examples/css-grid/src/pages/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
export default function IndexPage() {
1+
export default function IndexPage({ lastBuiltOn }) {
22
return (
33
<>
44
<h1>CSS Grid</h1>
5+
<p>Last built on {lastBuiltOn}</p>
56
<GridExamples />
67
<hr style={{ margin: '6rem 0' }}/>
78
<div dir="rtl">
@@ -12,6 +13,14 @@ export default function IndexPage() {
1213
);
1314
}
1415

16+
export async function getStaticProps() {
17+
return {
18+
props: {
19+
lastBuiltOn: new Date().toISOString(),
20+
},
21+
};
22+
}
23+
1524
function GridExamples() {
1625
return (
1726
<>
@@ -460,4 +469,3 @@ function GridExamples() {
460469
</>
461470
);
462471
}
463-

‎packages/grid/examples/preview/src/pages/index.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import Prism from 'prismjs';
33
import React from 'react';
44
import ReactDOM from 'react-dom/server';
55

6-
export default function IndexPage() {
6+
export default function IndexPage({ lastBuiltOn }) {
77
return (
88
<main>
99
<div className="cds--grid">
1010
<div className="cds--row">
11-
<div className="cds--col">
12-
<h1>Grid</h1>
13-
</div>
14-
</div>
11+
<div className="cds--col">
12+
<h1>Grid</h1>
13+
<p>Last built on {lastBuiltOn}</p>
14+
</div>
15+
</div>
1516
<div className="cds--row">
1617
<div className="cds--col">
1718
<ul>
@@ -80,6 +81,14 @@ export default function IndexPage() {
8081
);
8182
}
8283

84+
export async function getStaticProps() {
85+
return {
86+
props: {
87+
lastBuiltOn: new Date().toISOString(),
88+
},
89+
};
90+
}
91+
8392
const sections = [
8493
{
8594
id: 'usage',

‎packages/icons/examples/preview/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import metadata from '../../../../metadata.json';
88
const GITHUB_ICON_URL =
99
'https://github.com/carbon-design-system/carbon/tree/master/packages/icons/src/svg';
1010

11-
export default function IndexPage() {
11+
export default function IndexPage({ lastBuiltOn }) {
1212
const headers = ['Name', 'Size', 'Preview', 'GitHub', 'Issues', 'Path'];
1313

1414
const isBrowser = () => typeof window !== 'undefined';
@@ -19,6 +19,7 @@ export default function IndexPage() {
1919
<div className="cds--row">
2020
<div className="cds--col">
2121
<h1>Icons</h1>
22+
<p>Last built on {lastBuiltOn}</p>
2223
</div>
2324
</div>
2425
<div className="cds--row">
@@ -186,6 +187,14 @@ export default function IndexPage() {
186187
);
187188
}
188189

190+
export async function getStaticProps() {
191+
return {
192+
props: {
193+
lastBuiltOn: new Date().toISOString(),
194+
},
195+
};
196+
}
197+
189198
function Table({ children, headers }) {
190199
return (
191200
<table>

‎packages/layout/examples/preview/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import {useState} from "react";
22
import * as CarbonLayout from "@carbon/layout";
33
import { paramCase } from "change-case-all";
44

5-
export default function IndexPage() {
5+
export default function IndexPage({ lastBuiltOn }) {
66
return (
77
<>
88
<h1>Layout package basic examples</h1>
9+
<p>Last built on {lastBuiltOn}</p>
910

1011
<article>
1112
<header>
@@ -49,3 +50,11 @@ export default function IndexPage() {
4950
</>
5051
);
5152
}
53+
54+
export async function getStaticProps() {
55+
return {
56+
props: {
57+
lastBuiltOn: new Date().toISOString(),
58+
},
59+
};
60+
}

‎packages/pictograms/examples/preview/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import metadata from '../../../../metadata.json';
88
const GITHUB_PICTOGRAM_URL =
99
'https://github.com/carbon-design-system/carbon/tree/master/packages/pictograms/src/svg';
1010

11-
export default function IndexPage() {
11+
export default function IndexPage({ lastBuiltOn }) {
1212
const headers = ['Name', 'Preview', 'GitHub', 'Issues'];
1313

1414
const isBrowser = () => typeof window !== 'undefined';
@@ -19,6 +19,7 @@ export default function IndexPage() {
1919
<div className="cds--row">
2020
<div className="cds--col">
2121
<h1>Pictograms</h1>
22+
<p>Last built on {lastBuiltOn}</p>
2223
</div>
2324
</div>
2425
<div className="cds--row">
@@ -103,6 +104,14 @@ export default function IndexPage() {
103104
);
104105
}
105106

107+
export async function getStaticProps() {
108+
return {
109+
props: {
110+
lastBuiltOn: new Date().toISOString(),
111+
},
112+
};
113+
}
114+
106115
function Table({ children, headers }) {
107116
return (
108117
<table>

‎packages/themes/examples/preview-v10/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const colorNameLookup = Object.keys(colors).reduce(
2525

2626
const tokens = meta.colors.flatMap((color) => color.tokens);
2727

28-
export default function IndexPage() {
28+
export default function IndexPage({ lastBuiltOn }) {
2929
return (
3030
<React.Fragment>
3131
<div className="bx--grid">
@@ -34,6 +34,7 @@ export default function IndexPage() {
3434
<h1>
3535
<code>v10 @carbon/themes</code>
3636
</h1>
37+
<p>Last built on {lastBuiltOn}</p>
3738
</div>
3839
</div>
3940
<div className="bx--row">
@@ -240,6 +241,14 @@ $custom-theme: map-merge(
240241
);
241242
}
242243

244+
export async function getStaticProps() {
245+
return {
246+
props: {
247+
lastBuiltOn: new Date().toISOString(),
248+
},
249+
};
250+
}
251+
243252
function ThemeSwitcher() {
244253
const [theme, setTheme] = useState('white');
245254
const className = cx({

‎packages/themes/examples/preview/src/pages/index.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function getColorName(hex) {
8686
return '—';
8787
}
8888

89-
export default function IndexPage() {
89+
export default function IndexPage({ lastBuiltOn }) {
9090
const [activeGroup, setActiveGroup] = React.useState('All');
9191
const [activeProperty, setActiveProperty] = React.useState('All');
9292
const [activeSet, setActiveSet] = React.useState('All');
@@ -95,7 +95,10 @@ export default function IndexPage() {
9595
<main>
9696
<section>
9797
<header className="flex items-center justify-between header">
98-
<h1 id="table-title">Tokens ({tokens.length})</h1>
98+
<div>
99+
<h1 id="table-title">Tokens ({tokens.length})</h1>
100+
<p>Last built on {lastBuiltOn}</p>
101+
</div>
99102
<ul className="grid grid-columns-4 gap">
100103
{activeGroup !== 'All' ||
101104
activeProperty !== 'All' ||
@@ -302,3 +305,11 @@ export default function IndexPage() {
302305
</main>
303306
);
304307
}
308+
309+
export async function getStaticProps() {
310+
return {
311+
props: {
312+
lastBuiltOn: new Date().toISOString(),
313+
},
314+
};
315+
}

‎packages/type/examples/preview/src/pages/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import {useState} from "react";
22
import * as CarbonType from "@carbon/type";
33
import { paramCase } from "change-case-all";
44

5-
export default function IndexPage() {
5+
export default function IndexPage({ lastBuiltOn }) {
66
return (
77
<>
8+
<p>Last built on {lastBuiltOn}</p>
89
<TableOfContents />
910
<FontFaces />
1011
<TypeStyles />
@@ -13,6 +14,14 @@ export default function IndexPage() {
1314
);
1415
}
1516

17+
export async function getStaticProps() {
18+
return {
19+
props: {
20+
lastBuiltOn: new Date().toISOString(),
21+
},
22+
};
23+
}
24+
1625
function TableOfContents() {
1726
return (
1827
<>

‎tasks/examples.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ const IGNORE_EXAMPLE_DIRS = new Set([
4141
async function main() {
4242
reporter.info('Building examples...');
4343

44+
const lastBuiltOn = new Date().toISOString();
45+
4446
await fs.remove(BUILD_DIR);
4547
await fs.ensureDir(BUILD_DIR);
4648

@@ -193,7 +195,7 @@ async function main() {
193195
<title>Carbon Elements</title>
194196
<style>body { font-family: 'IBM Plex Mono', monospaces; }</style>
195197
</head>
196-
<body>${links}</body>
198+
<body>${links}<footer>Last built on ${lastBuiltOn}</footer></body>
197199
</html>
198200
`;
199201

0 commit comments

Comments
 (0)