diff --git a/.eslintignore b/.eslintignore index bc469db979..5a4a4551d1 100644 --- a/.eslintignore +++ b/.eslintignore @@ -12,4 +12,5 @@ node_modules package-lock.json /packages/clay-css/src/js/**/*.js packages/generator-clay-component/app/templates -yarn.lock \ No newline at end of file +yarn.lock +.next \ No newline at end of file diff --git a/.gitignore b/.gitignore index 921d284099..abd0e853ea 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ lib node_modules *.log package-lock.json +.env .gradle .parcel-cache .parcel-ci-builds diff --git a/.prettierignore b/.prettierignore index 9ec4816ed2..95f357225c 100644 --- a/.prettierignore +++ b/.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 \ No newline at end of file +yarn.lock +.next \ No newline at end of file diff --git a/www/.eslintrc.json b/www/.eslintrc.json new file mode 100644 index 0000000000..72cc705c1d --- /dev/null +++ b/www/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/www/.gitignore b/www/.gitignore new file mode 100644 index 0000000000..fd3dbb571a --- /dev/null +++ b/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 diff --git a/www/README.md b/www/README.md new file mode 100644 index 0000000000..5ce4a7c668 --- /dev/null +++ b/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. diff --git a/www/app/_components/Heading.tsx b/www/app/_components/Heading.tsx new file mode 100644 index 0000000000..1340e63499 --- /dev/null +++ b/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 ( +
+

{title}

+ {description && ( +

{description}

+ )} + + {npmPackage && ( + <> + + + + + + + + + + + + + + + +
installyarn add {npmPackage}
version + NPM Version +
use{use}
+ + + + + React + + + HTML/CSS + + + + + )} +
+ ); +} diff --git a/www/app/_components/Link.tsx b/www/app/_components/Link.tsx new file mode 100644 index 0000000000..7210d90714 --- /dev/null +++ b/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) { + const pathname = usePathname(); + + return ( + + {children} + + ); +} diff --git a/www/app/_components/Navbar.tsx b/www/app/_components/Navbar.tsx new file mode 100644 index 0000000000..f70d78f33d --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/www/app/_components/Sandpack.tsx b/www/app/_components/Sandpack.tsx new file mode 100644 index 0000000000..9eaaf7702e --- /dev/null +++ b/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; diff --git a/www/app/_components/SandpackStyles.tsx b/www/app/_components/SandpackStyles.tsx new file mode 100644 index 0000000000..60141d0055 --- /dev/null +++ b/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 ( +