chore: www

.eslintignore

@@ -12,4 +12,5 @@ node_modules
 package-lock.json
 /packages/clay-css/src/js/**/*.js
 packages/generator-clay-component/app/templates
-yarn.lock
+yarn.lock
+.next

.gitignore

@@ -5,6 +5,7 @@ lib
 node_modules
 *.log
 package-lock.json
+.env
 .gradle
 .parcel-cache
 .parcel-ci-builds

.prettierignore

@@ -15,4 +15,5 @@ package-lock.json
 /packages/clay-css/src/js/**/*.js
 /packages/clay-css/src/scss/bootstrap/**/*.scss
 /packages/generator-clay-component/app/templates
-yarn.lock
+yarn.lock
+.next

www/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "next/core-web-vitals"
+}

www/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

www/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

www/app/_components/Heading.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import classNames from 'classnames';
+import NavigationBar from '@clayui/navigation-bar';
+import ClayLink, {ClayLinkContext} from '@clayui/link';
+import Link from 'next/link';
+import styles from './heading.module.css';
+
+type Props = {
+	description?: string;
+	title: string;
+	npmPackage?: string;
+	use?: string;
+};
+
+export default function Heading({description, title, npmPackage, use}: Props) {
+	return (
+		<div className={styles.heading_container}>
+			<h1 className="text-10">{title}</h1>
+			{description && (
+				<p className="text-6 text-secondary">{description}</p>
+			)}
+
+			{npmPackage && (
+				<>
+					<table className={classNames('table', styles.table)}>
+						<tbody>
+							<tr>
+								<th>install</th>
+								<td>yarn add {npmPackage}</td>
+							</tr>
+							<tr>
+								<th>version</th>
+								<td>
+									<img
+										alt="NPM Version"
+										src={`https://img.shields.io/npm/v/${npmPackage}?style=flat-square&logo=npm&label=%20&labelColor=%23fff&color=%23fff`}
+									/>
+								</td>
+							</tr>
+							<tr>
+								<th>use</th>
+								<td>{use}</td>
+							</tr>
+						</tbody>
+					</table>
+
+					<ClayLinkContext.Provider value={Link}>
+						<NavigationBar
+							triggerLabel="Navigation"
+							className={styles.nav}
+						>
+							<NavigationBar.Item active>
+								<ClayLink href="#">React</ClayLink>
+							</NavigationBar.Item>
+							<NavigationBar.Item>
+								<ClayLink href="#">HTML/CSS</ClayLink>
+							</NavigationBar.Item>
+						</NavigationBar>
+					</ClayLinkContext.Provider>
+				</>
+			)}
+		</div>
+	);
+}

www/app/_components/Link.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import {usePathname} from 'next/navigation';
+import classNames from 'classnames';
+import Link from 'next/link';
+import styles from './link.module.css';
+
+export default function ClayLink({
+	children,
+	href,
+	...otherProps
+}: React.ComponentProps<typeof Link>) {
+	const pathname = usePathname();
+
+	return (
+		<Link
+			{...otherProps}
+			href={href}
+			className={classNames({
+				[styles.link_active]: pathname === href,
+			})}
+		>
+			{children}
+		</Link>
+	);
+}

www/app/_components/Navbar.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import {DocSearch} from '@docsearch/react';
+import Link from 'next/link';
+import styles from './navbar.module.css';
+import '@docsearch/css';
+
+export function Navbar() {
+	return (
+		<header>
+			<nav className={styles.navbar}>
+				<DocSearch
+					apiKey={process.env.NEXT_PUBLIC_ALGOLIA_PUBLIC_KEY!}
+					appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!}
+					indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX!}
+				/>
+
+				<div className={styles.navbar_items}>
+					<Link className={styles.navbar_item} href="/blog">
+						Blog
+					</Link>
+					<a
+						href="https://github.com/liferay/clay"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<svg
+							width={20}
+							height={20}
+							viewBox="0 0 439 429"
+							fill="none"
+						>
+							<path
+								fill="currentColor"
+								d="M409.132 109.573C389.524 75.977 362.927 49.379 329.334 29.773C295.736 10.166 259.057 0.364998 219.271 0.364998C179.49 0.364998 142.799 10.169 109.208 29.773C75.612 49.378 49.016 75.977 29.408 109.573C9.803 143.168 0 179.854 0 219.63C0 267.41 13.94 310.375 41.827 348.536C69.711 386.7 105.733 413.108 149.89 427.763C155.03 428.717 158.835 428.046 161.309 425.767C163.784 423.485 165.02 420.627 165.02 417.205C165.02 416.634 164.971 411.497 164.876 401.788C164.778 392.079 164.732 383.609 164.732 376.382L158.165 377.518C153.978 378.285 148.696 378.61 142.319 378.518C135.945 378.429 129.328 377.761 122.477 376.519C115.623 375.288 109.248 372.433 103.347 367.96C97.449 363.487 93.262 357.632 90.787 350.404L87.932 343.834C86.029 339.46 83.033 334.601 78.94 329.275C74.847 323.944 70.708 320.33 66.521 318.427L64.522 316.996C63.19 316.045 61.954 314.898 60.811 313.567C59.669 312.236 58.814 310.904 58.243 309.57C57.671 308.235 58.145 307.14 59.67 306.281C61.195 305.422 63.951 305.005 67.95 305.005L73.658 305.858C77.465 306.621 82.174 308.9 87.791 312.709C93.405 316.515 98.02 321.463 101.637 327.551C106.017 335.357 111.294 341.305 117.483 345.398C123.667 349.491 129.902 351.534 136.182 351.534C142.462 351.534 147.886 351.058 152.456 350.111C157.021 349.159 161.304 347.728 165.303 345.826C167.016 333.068 171.68 323.267 179.291 316.416C168.443 315.276 158.69 313.559 150.027 311.276C141.369 308.99 132.422 305.28 123.192 300.136C113.957 294.999 106.296 288.62 100.207 281.01C94.117 273.396 89.119 263.4 85.22 251.031C81.319 238.657 79.368 224.383 79.368 208.205C79.368 185.17 86.888 165.568 101.925 149.388C94.881 132.07 95.546 112.656 103.922 91.148C109.442 89.433 117.628 90.72 128.476 95.001C139.326 99.284 147.27 102.953 152.316 105.995C157.362 109.036 161.405 111.613 164.451 113.703C182.156 108.756 200.427 106.282 219.269 106.282C238.111 106.282 256.386 108.756 274.092 113.703L284.941 106.854C292.36 102.284 301.121 98.096 311.203 94.289C321.291 90.484 329.005 89.436 334.337 91.151C342.899 112.66 343.662 132.073 336.616 149.391C351.652 165.571 359.175 185.178 359.175 208.208C359.175 224.386 357.217 238.705 353.322 251.174C349.422 263.645 344.381 273.631 338.197 281.153C332.006 288.674 324.296 295.003 315.066 300.139C305.834 305.279 296.884 308.989 288.226 311.275C279.564 313.561 269.811 315.279 258.963 316.421C268.857 324.983 273.805 338.498 273.805 356.96V417.197C273.805 420.619 274.995 423.476 277.377 425.759C279.756 428.038 283.513 428.709 288.653 427.754C332.816 413.101 368.838 386.692 396.721 348.528C424.601 310.367 438.546 267.402 438.546 219.622C438.536 179.851 428.728 143.168 409.132 109.573Z"
+							/>
+						</svg>
+					</a>
+					<a
+						href="https://storybook.clayui.com"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<svg width={20} height={20} viewBox="0 0 24 24">
+							<path
+								fill="currentColor"
+								d="m16.71.243l-.12 2.71a.18.18 0 0 0 .29.15l1.06-.8l.9.7a.18.18 0 0 0 .28-.14l-.1-2.76l1.33-.1a1.2 1.2 0 0 1 1.279 1.2v21.596a1.2 1.2 0 0 1-1.26 1.2l-16.096-.72a1.2 1.2 0 0 1-1.15-1.16l-.75-19.797a1.2 1.2 0 0 1 1.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08c0-3.2-1.72-4.89-4.859-4.89c-3.15 0-4.899 1.72-4.899 4.29c0 4.45 5.999 4.53 5.999 6.959c0 .7-.32 1.1-1.05 1.1c-.96 0-1.35-.49-1.3-2.16c0-.36-3.649-.48-3.769 0c-.27 4.03 2.23 5.2 5.099 5.2c2.79 0 4.969-1.49 4.969-4.18c0-4.77-6.099-4.64-6.099-6.999c0-.97.72-1.1 1.13-1.1c.45 0 1.25.07 1.19 1.87z"
+							/>
+						</svg>
+					</a>
+				</div>
+			</nav>
+		</header>
+	);
+}

www/app/_components/Sandpack.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import {
+	Sandpack,
+	SandpackProvider,
+	SandpackLayout,
+	SandpackCodeEditor,
+	SandpackPreview,
+} from '@codesandbox/sandpack-react';
+
+export const theme = {
+	colors: {
+		surface1: '#ffffff',
+		surface2: '#F3F3F3',
+		surface3: '#f5f5f5',
+		clickable: '#959da5',
+		base: '#24292e',
+		disabled: '#d1d4d8',
+		hover: '#24292e',
+		accent: '#24292e',
+	},
+	syntax: {
+		keyword: '#d73a49',
+		property: '#005cc5',
+		plain: '#24292e',
+		static: '#032f62',
+		string: '#032f62',
+		definition: '#6f42c1',
+		punctuation: '#24292e',
+		tag: '#22863a',
+		comment: {
+			color: '#6a737d',
+			fontStyle: 'normal',
+		},
+	},
+	font: {
+		body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+		mono: '"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',
+		size: '13px',
+		lineHeight: '20px',
+	},
+};
+
+export {SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview};
+export default Sandpack;

www/app/_components/SandpackStyles.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import {getSandpackCssText} from '@codesandbox/sandpack-react';
+import {useServerInsertedHTML} from 'next/navigation';
+
+/**
+ * Ensures CSSinJS styles are loaded server side.
+ */
+export const SandPackCSS = () => {
+	useServerInsertedHTML(() => {
+		return (
+			<style
+				dangerouslySetInnerHTML={{__html: getSandpackCssText()}}
+				id="sandpack"
+			/>
+		);
+	});
+
+	return null;
+};

www/app/_components/Sidebar.tsx

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+import ClayLink from '../_components/Link';
+import styles from './sidebar.module.css';
+
+type Item = {
+	name: string;
+	items: Array<{name: string; href: string}>;
+};
+
+type Props = {
+	items: Array<Item>;
+};
+
+export function Sidebar({items}: Props) {
+	return (
+		<nav className={styles.sidebar}>
+			<Link className={styles.logo} href="/docs">
+				<svg width={27} height={37} viewBox="0 0 64 85">
+					<g
+						stroke="none"
+						strokeWidth="1"
+						fill="none"
+						fillRule="evenodd"
+					>
+						<g fill="#B3472D">
+							<path d="M63.9134908,25.3330425 C63.9134908,20.3098732 60.3642372,14.1418975 56.0279342,11.6293683 L39.9291975,2.30467363 C35.5910117,-0.207855536 28.4943873,-0.207855536 24.1562014,2.30467363 L8.05746477,11.6293683 C3.71927889,14.1418975 0.170025254,20.3098732 0.170025254,25.3330425 L0.170025254,62.5449218 C0.170025254,65.0668966 2.20919856,67.1128132 4.72286095,67.1128132 C7.23840623,67.110924 9.27569665,65.0668966 9.27757954,62.5449218 L9.27757954,26.0414623 C9.27757954,23.5289332 11.0512649,20.4440007 13.2203579,19.1877362 L28.0989797,10.5714613 C30.2699556,9.31519674 33.8173263,9.31519674 35.9864192,10.5714613 L50.8650411,19.1896253 C53.034134,20.4440007 54.8078194,23.5289332 54.8078194,26.0414623 L54.8097023,47.220383 C54.8097023,49.7442469 56.8469927,51.7901635 59.3606551,51.7920526 C61.1305747,51.7901635 62.6613668,50.7775953 63.4145241,49.2984146 C63.7327331,48.6750051 63.9172566,47.9684744 63.9172566,47.2222721 L63.9134908,25.3330425 Z" />
+							<path d="M63.9153737,63.4152392 C63.9153737,65.937214 61.8762004,67.9812415 59.3606551,67.9831306 C56.8469927,67.9831306 54.8097023,65.937214 54.8097023,63.4152392 L54.8097023,60.0752756 C54.8097023,57.5514118 56.8469927,55.5054952 59.3606551,55.5054952 C61.8762004,55.5054952 63.9153737,57.5514118 63.9153737,60.0733865 L63.9153737,63.4152392 Z" />
+							<path d="M32.0423229,30.093624 C29.5286605,30.0955132 27.4894872,32.1395406 27.4894872,34.6634045 L27.4913701,63.415806 C27.4913701,65.9377807 29.5286605,67.9836973 32.0423229,67.9836973 C34.5578682,67.9836973 36.5951586,65.9377807 36.5951586,63.415806 L36.5951586,34.6634045 C36.5951586,32.1395406 34.5559853,30.0955132 32.0423229,30.093624" />
+							<path d="M45.7006417,42.2538874 C48.2124212,42.2538874 50.2497116,40.211749 50.2534774,37.6916634 L50.2534774,28.6786734 C50.2534774,26.1661442 48.479792,23.0831009 46.3106991,21.8268363 L35.9867958,15.8458835 C33.8177029,14.5896189 30.2684492,14.5896189 28.0993563,15.8458835 L17.7735701,21.8268363 C15.6063601,23.0831009 13.8307918,26.1661442 13.8307918,28.6786734 L13.8307918,70.2714213 C13.8307918,72.7839504 15.6063601,75.8651046 17.7735701,77.1213692 L28.0993563,83.1042112 C30.2684492,84.3604758 33.8177029,84.3604758 35.9867958,83.1042112 L46.3106991,77.1213692 C48.479792,75.8651046 50.2534774,72.7839504 50.2534774,70.2714213 L50.2534774,50.5301207 C50.2497116,48.010035 48.2124212,45.9678967 45.7006417,45.9678967 C43.1869793,45.9678967 41.147806,48.0138133 41.147806,50.535788 L41.147806,67.2809448 C41.147806,68.5353203 40.2609633,70.0768419 39.1764169,70.7059188 L34.0135238,73.6963952 C32.9289773,74.3254721 31.1552919,74.3254721 30.0707455,73.6963952 L24.9097353,70.7059188 C23.8251888,70.0768419 22.9383461,68.5353203 22.9383461,67.2809448 L22.9383461,31.6691498 C22.9383461,30.4128853 23.8251888,28.8732527 24.9097353,28.2422868 L30.0707455,25.2518103 C31.1552919,24.6227335 32.9289773,24.6227335 34.0135238,25.2518103 L39.1764169,28.2422868 C40.2609633,28.8732527 41.147806,30.4128853 41.147806,31.6691498 L41.147806,37.685996 C41.147806,40.2079708 43.1869793,42.2538874 45.7006417,42.2538874" />
+						</g>
+					</g>
+				</svg>
+				<span className={styles.logo_title}>Clay</span>
+			</Link>
+
+			{items.map((item) => (
+				<ul key={item.name} className={styles.sidebar_nav}>
+					<p className={styles.sidebar_nav_title}>{item.name}</p>
+					<ul>
+						{item.items.map((item) => (
+							<li key={item.name}>
+								<ClayLink href={item.href}>
+									{item.name}
+								</ClayLink>
+							</li>
+						))}
+					</ul>
+				</ul>
+			))}
+		</nav>
+	);
+}