From 3822775ae7fc10b1833cc7b2f49bf3fa9590bb61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my?= Date: Mon, 1 May 2023 17:12:14 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=93=9D=20add=20documentation=20websit?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.gitignore | 34 +++ docs/components/GlobalStyle.ts | 97 +++++++ docs/components/Landing/Featured/index.tsx | 52 ++++ docs/components/Landing/Features/index.tsx | 121 +++++++++ docs/components/Landing/Render/index.tsx | 49 ++++ .../Landing/Showcase/List/Card/index.tsx | 54 ++++ .../Landing/Showcase/List/index.tsx | 43 +++ docs/components/Landing/Showcase/index.tsx | 18 ++ docs/components/Playground/code-theme.ts | 135 ++++++++++ docs/components/Playground/dynamic-live.tsx | 54 ++++ docs/components/Playground/editor.tsx | 143 ++++++++++ docs/components/Playground/index.ts | 3 + docs/components/Playground/playground.tsx | 54 ++++ docs/components/Playground/scope.ts | 9 + docs/data/showcases.ts | 14 + docs/next-env.d.ts | 5 + docs/next.config.js | 14 + docs/package.json | 28 ++ docs/pages/_app.tsx | 16 ++ docs/pages/_document.tsx | 23 ++ docs/pages/_meta.json | 18 ++ docs/pages/docs/_meta.json | 22 ++ docs/pages/docs/components/_meta.json | 3 + docs/pages/docs/components/badge.mdx | 90 +++++++ docs/pages/docs/components/button.mdx | 240 +++++++++++++++++ docs/pages/docs/components/checkbox.mdx | 109 ++++++++ docs/pages/docs/components/grid.mdx | 176 +++++++++++++ docs/pages/docs/components/icon.mdx | 145 +++++++++++ docs/pages/docs/components/modal.mdx | 185 +++++++++++++ docs/pages/docs/components/note.mdx | 123 +++++++++ docs/pages/docs/components/text.mdx | 246 ++++++++++++++++++ docs/pages/docs/frameworks/_meta.json | 11 + .../docs/frameworks/create-react-app.mdx | 1 + docs/pages/docs/frameworks/nextjs.mdx | 1 + docs/pages/docs/guides/_meta.json | 7 + docs/pages/docs/guides/colors.mdx | 0 docs/pages/docs/guides/icons.mdx | 0 docs/pages/docs/guides/playground.mdx | 0 docs/pages/docs/guides/principles.mdx | 7 + docs/pages/docs/guides/theme-builder.mdx | 0 docs/pages/docs/index.mdx | 78 ++++++ docs/pages/index.mdx | 6 + docs/pages/showcase.mdx | 1 + docs/public/android-chrome-192x192.png | Bin 0 -> 5146 bytes docs/public/android-chrome-512x512.png | Bin 0 -> 21360 bytes docs/public/apple-touch-icon.png | Bin 0 -> 4579 bytes docs/public/favicon-16x16.png | Bin 0 -> 509 bytes docs/public/favicon-32x32.png | Bin 0 -> 1001 bytes docs/public/favicon.ico | Bin 0 -> 15406 bytes docs/public/manifest.json | 19 ++ .../images/showcases/thumbnails/onruntime.svg | 11 + .../showcases/thumbnails/tonightpass.svg | 8 + docs/screens/Landing/index.tsx | 18 ++ docs/theme.config.tsx | 111 ++++++++ docs/tsconfig.json | 24 ++ docs/types/showcase.ts | 4 + 56 files changed, 2630 insertions(+) create mode 100644 docs/.gitignore create mode 100644 docs/components/GlobalStyle.ts create mode 100644 docs/components/Landing/Featured/index.tsx create mode 100644 docs/components/Landing/Features/index.tsx create mode 100644 docs/components/Landing/Render/index.tsx create mode 100644 docs/components/Landing/Showcase/List/Card/index.tsx create mode 100644 docs/components/Landing/Showcase/List/index.tsx create mode 100644 docs/components/Landing/Showcase/index.tsx create mode 100644 docs/components/Playground/code-theme.ts create mode 100644 docs/components/Playground/dynamic-live.tsx create mode 100644 docs/components/Playground/editor.tsx create mode 100644 docs/components/Playground/index.ts create mode 100644 docs/components/Playground/playground.tsx create mode 100644 docs/components/Playground/scope.ts create mode 100644 docs/data/showcases.ts create mode 100644 docs/next-env.d.ts create mode 100644 docs/next.config.js create mode 100644 docs/package.json create mode 100644 docs/pages/_app.tsx create mode 100644 docs/pages/_document.tsx create mode 100644 docs/pages/_meta.json create mode 100644 docs/pages/docs/_meta.json create mode 100644 docs/pages/docs/components/_meta.json create mode 100644 docs/pages/docs/components/badge.mdx create mode 100644 docs/pages/docs/components/button.mdx create mode 100644 docs/pages/docs/components/checkbox.mdx create mode 100644 docs/pages/docs/components/grid.mdx create mode 100644 docs/pages/docs/components/icon.mdx create mode 100644 docs/pages/docs/components/modal.mdx create mode 100644 docs/pages/docs/components/note.mdx create mode 100644 docs/pages/docs/components/text.mdx create mode 100644 docs/pages/docs/frameworks/_meta.json create mode 100644 docs/pages/docs/frameworks/create-react-app.mdx create mode 100644 docs/pages/docs/frameworks/nextjs.mdx create mode 100644 docs/pages/docs/guides/_meta.json create mode 100644 docs/pages/docs/guides/colors.mdx create mode 100644 docs/pages/docs/guides/icons.mdx create mode 100644 docs/pages/docs/guides/playground.mdx create mode 100644 docs/pages/docs/guides/principles.mdx create mode 100644 docs/pages/docs/guides/theme-builder.mdx create mode 100644 docs/pages/docs/index.mdx create mode 100644 docs/pages/index.mdx create mode 100644 docs/pages/showcase.mdx create mode 100644 docs/public/android-chrome-192x192.png create mode 100644 docs/public/android-chrome-512x512.png create mode 100644 docs/public/apple-touch-icon.png create mode 100644 docs/public/favicon-16x16.png create mode 100644 docs/public/favicon-32x32.png create mode 100644 docs/public/favicon.ico create mode 100644 docs/public/manifest.json create mode 100644 docs/public/static/images/showcases/thumbnails/onruntime.svg create mode 100644 docs/public/static/images/showcases/thumbnails/tonightpass.svg create mode 100644 docs/screens/Landing/index.tsx create mode 100644 docs/theme.config.tsx create mode 100644 docs/tsconfig.json create mode 100644 docs/types/showcase.ts diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..e3b3fe7 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# 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 +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel \ No newline at end of file diff --git a/docs/components/GlobalStyle.ts b/docs/components/GlobalStyle.ts new file mode 100644 index 0000000..2a041cc --- /dev/null +++ b/docs/components/GlobalStyle.ts @@ -0,0 +1,97 @@ +import { createGlobalStyle } from "@tonightpass/kitchen"; + +const GlobalStyle = createGlobalStyle` + *, *:before, *:after { + box-sizing: border-box; + } + + a:hover { + filter: brightness(1) !important; + } + + html, + body, + div, + span, + applet, + object, + iframe, + h1, + h2, + h3, + h4, + h5, + h6, + p, + blockquote, + pre, + a, + abbr, + acronym, + address, + big, + cite, + code, + del, + dfn, + em, + img, + ins, + kbd, + q, + s, + samp, + small, + strike, + strong, + sub, + sup, + tt, + var, + b, + u, + i, + center, + dl, + dt, + dd, + ol, + ul, + li, + fieldset, + form, + label, + legend, + table, + caption, + tbody, + tfoot, + thead, + tr, + th, + td, + article, + aside, + canvas, + details, + embed, + figure, + figcaption, + footer, + header, + hgroup, + menu, + nav, + output, + ruby, + section, + summary, + time, + mark, + audio, + video { + border: 0 solid ${({ theme }) => theme.colors.layout.dark} + } +`; + +export default GlobalStyle; diff --git a/docs/components/Landing/Featured/index.tsx b/docs/components/Landing/Featured/index.tsx new file mode 100644 index 0000000..bfba731 --- /dev/null +++ b/docs/components/Landing/Featured/index.tsx @@ -0,0 +1,52 @@ +import { Button, Container, Link, Text } from "@tonightpass/kitchen"; + +const Featured: React.FC = () => { + return ( + + + + Tonight Pass + + + delicious react styled-components + + + + Design UI like Tonight Pass in React or React Native with optimized and + customizable styled-components. + + + + + + + ); +}; + +export default Featured; diff --git a/docs/components/Landing/Features/index.tsx b/docs/components/Landing/Features/index.tsx new file mode 100644 index 0000000..d25a819 --- /dev/null +++ b/docs/components/Landing/Features/index.tsx @@ -0,0 +1,121 @@ +import kitchen, { Container, Text } from "@tonightpass/kitchen"; + +const Features = () => { + return ( + + + All features{" "} + + Kitchen contains + + + + Discover all of them. Say bye to wasted time and hello to fresh design. + + + + + + + Accessible + + + Kitchen strictly follows WAI-ARIA standards for all components. + + + + + Responsive support + + + Build simple web apps with our simple responsive system. + + + + + + + Themeable + + + Customize any part of our components to match your design needs. + + + + + All platform support + + + Whether you use React, React Native or a framework react, + Kitchen is compatible with all platforms. + + + + + + + Active Community + + + We are a team of active maintainers ready to help you whenever + you need, and using it for our own products. + + + + + Reusable hooks + + + Lots of useful hooks to use in your applications. + + + + + + + Developer experience + + + Guaranteed to boost your productivity when building your mobile app + or website. + + + + + + Light & Dark support + + + Kitchen strictly follows WAI-ARIA standards for all components. + + + + + Stylable + + + Easy to redesign with your standard thanks to styled components + already implemented. + + + + + + ); +}; + +const FeatureContainer = kitchen(Container)` + background-color: ${({ theme }) => theme.colors.layout.darker}; + + @media (min-width: ${({ theme }) => theme.breakpoint.mobile}) { + + } +`; + +export default Features; diff --git a/docs/components/Landing/Render/index.tsx b/docs/components/Landing/Render/index.tsx new file mode 100644 index 0000000..d60a77a --- /dev/null +++ b/docs/components/Landing/Render/index.tsx @@ -0,0 +1,49 @@ +import { Sandpack } from "@codesandbox/sandpack-react"; +import kitchen, { Container, useTheme } from "@tonightpass/kitchen"; + +const Render: React.FC = () => { + const { theme } = useTheme(); + + const code = `import { KitchenProvider, Container, Button } from "@tonightpass/kitchen"; + +import "@tonightpass/kitchen/fonts.css"; + +export default function App() { + return ( + + + + + + ); +}`; + + return ( + + + + ); +}; + +const StyledContainer = kitchen(Container)` + font-family: ${({ theme }) => theme.family.monospace}; + font-size: 14px; + body, div, span, input, button, textarea, select, option { + font-family: inherit; + font-size: inherit; + } +`; + +export default Render; diff --git a/docs/components/Landing/Showcase/List/Card/index.tsx b/docs/components/Landing/Showcase/List/Card/index.tsx new file mode 100644 index 0000000..1f07d53 --- /dev/null +++ b/docs/components/Landing/Showcase/List/Card/index.tsx @@ -0,0 +1,54 @@ +import kitchen, { Image, themes } from "@tonightpass/kitchen"; +import { Showcase } from "types/showcase"; + +export type ShowcaseCardProps = { + name: Showcase["name"]; + thumbnail: Showcase["thumbnail"]; +}; + +const ShowcaseCard: React.FC = ({ + name, + thumbnail, + ...props +}: ShowcaseCardProps) => { + return ( + + + + ); +}; + +const ThumbnailImage = kitchen(Image)` + opacity: 0.3; + width: 60%; + height: 100%; + max-height: 24px; + transition: all 1s; + filter: ${({ theme }) => + theme.id === themes.light.id && "grayscale(0) brightness(0) invert(0)"}; +`; + +const Container = kitchen.div` + background-color: ${({ theme }) => theme.colors.layout.darker}; + border-radius: 10px; + width: 160px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + transition: all 1s; + + :hover { + transform: scale(1.05); + ${ThumbnailImage} { + opacity: 1; + } + } +`; + +export default ShowcaseCard; diff --git a/docs/components/Landing/Showcase/List/index.tsx b/docs/components/Landing/Showcase/List/index.tsx new file mode 100644 index 0000000..5908dfe --- /dev/null +++ b/docs/components/Landing/Showcase/List/index.tsx @@ -0,0 +1,43 @@ +import kitchen, { Container, Link, Text } from "@tonightpass/kitchen"; +import showcases from "data/showcases"; +import ShowcaseCard from "./Card"; + +const ShowcaseList = () => { + return ( + + {showcases.map(({ name, thumbnail }, i) => ( + + ))} + + + 💖 Your company + + + + ); +}; + +const YourCompany = kitchen(Link)` + background-color: ${({ theme }) => theme.colors.layout.darker}; + border-radius: 10px; + width: 160px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 1s; + + ${Text} { + opacity: 0.3; + transition: all 1s; + } + + :hover { + transform: scale(1.05); + ${Text} { + opacity: 1; + } + } +`; + +export default ShowcaseList; diff --git a/docs/components/Landing/Showcase/index.tsx b/docs/components/Landing/Showcase/index.tsx new file mode 100644 index 0000000..0da4632 --- /dev/null +++ b/docs/components/Landing/Showcase/index.tsx @@ -0,0 +1,18 @@ +import { Container, Text } from "@tonightpass/kitchen"; +import ShowcaseList from "./List"; + +const Showcase: React.FC = () => { + return ( + + + Trusted by teams{" "} + + around the world + + + + + ); +}; + +export default Showcase; diff --git a/docs/components/Playground/code-theme.ts b/docs/components/Playground/code-theme.ts new file mode 100644 index 0000000..b021549 --- /dev/null +++ b/docs/components/Playground/code-theme.ts @@ -0,0 +1,135 @@ +import { PrismTheme } from "prism-react-renderer"; +import { DefaultTheme } from "@tonightpass/kitchen"; + +const makeCodeTheme = (theme: DefaultTheme): PrismTheme => ({ + plain: { + backgroundColor: theme.colors.layout.darkest, + color: theme.colors.text.lightest, + fontWeight: "400", + fontStyle: "normal", + fontFamily: theme.family.monospace, + fontSize: ".875rem", + textRendering: "geometricPrecision", + }, + styles: [ + { + types: ["comment", "prolog", "doctype", "cdata"], + style: { + color: "#B362FF", + }, + }, + { + types: ["punctuation"], + style: { + color: "#3498db", + }, + }, + { + types: ["namespace"], + style: { + opacity: 1, + }, + }, + { + types: ["tag", "operator"], + style: { + color: "#9EFFFF", + }, + }, + { + types: ["number"], + style: { + color: "#FF628C", + }, + }, + { + types: ["property", "function", "constant"], + style: { + color: "#FAD000", + }, + }, + { + types: ["tag-id", "selector", "atrule-id"], + style: { + color: "#eeebff", + }, + }, + { + types: ["attr-name"], + style: { + color: "#FAD000", + }, + }, + { + types: [ + "boolean", + "entity", + "url", + "control", + "directive", + "unit", + "statement", + "regex", + "at-rule", + "placeholder", + "variable", + "imports", + "class-name", + "property-access", + ], + style: { + color: "#2980b9", + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#2ecc71", + }, + }, + { + types: ["keyword"], + style: { + color: "#FF9D00", + }, + }, + { + types: ["deleted"], + style: { + textDecorationLine: "line-through", + }, + }, + { + types: ["language-javascript", "script"], + style: { + color: theme.colors.accent.success, + }, + }, + { + types: ["inserted"], + style: { + textDecorationLine: "underline", + }, + }, + { + types: ["italic"], + style: { + fontStyle: "italic", + }, + }, + { + types: ["important", "bold"], + style: { + fontWeight: "bold", + }, + }, + { + types: ["important"], + style: { + color: "#c4b9fe", + }, + }, + ], +}); + +export default makeCodeTheme; diff --git a/docs/components/Playground/dynamic-live.tsx b/docs/components/Playground/dynamic-live.tsx new file mode 100644 index 0000000..ffabd66 --- /dev/null +++ b/docs/components/Playground/dynamic-live.tsx @@ -0,0 +1,54 @@ +import { useTheme } from "@tonightpass/kitchen"; +import React from "react"; +import { LivePreview, LiveProvider, LiveError } from "react-live"; +import makeCodeTheme from "./code-theme"; +import Editor from "./editor"; +import kitchenScope from "./scope"; + +export interface Props { + code: string; + scope: { + [key: string]: unknown; + }; +} + +const DynamicLive: React.FC = ({ code, scope }) => { + const { theme } = useTheme(); + const codeTheme = makeCodeTheme(theme); + return ( + +
+ + +
+ + + + ); +}; + +export default DynamicLive; diff --git a/docs/components/Playground/editor.tsx b/docs/components/Playground/editor.tsx new file mode 100644 index 0000000..c97446e --- /dev/null +++ b/docs/components/Playground/editor.tsx @@ -0,0 +1,143 @@ +import { Icon, useClipboard, useTheme, useToasts } from "@tonightpass/kitchen"; +import React, { useState } from "react"; +import { LiveEditor } from "react-live"; +import { RiArrowRightSLine, RiFileCopyLine } from "react-icons/ri"; + +interface Props { + code: string; +} + +const Editor: React.FC = ({ code }) => { + const { theme } = useTheme(); + const { copy } = useClipboard(); + const [visible, setVisible] = useState(false); + const { setToast } = useToasts(); + const clickHandler = (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + setVisible(!visible); + }; + + const copyHandler = (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + copy(code); + setToast({ text: "Code copied." }); + }; + + return ( +
+
+ +
+
+ + + + {"Code Editor"} +
+
+ {visible && ( + + + + )} +
+
+ +
+ +
+
+ + +
+ ); +}; + +export default Editor; diff --git a/docs/components/Playground/index.ts b/docs/components/Playground/index.ts new file mode 100644 index 0000000..1ab7ae7 --- /dev/null +++ b/docs/components/Playground/index.ts @@ -0,0 +1,3 @@ +import Playground from "./playground"; + +export default Playground; diff --git a/docs/components/Playground/playground.tsx b/docs/components/Playground/playground.tsx new file mode 100644 index 0000000..afd30e0 --- /dev/null +++ b/docs/components/Playground/playground.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import dynamic from "next/dynamic"; +import { Skeleton, useTheme } from "@tonightpass/kitchen"; + +const DynamicLive: React.ComponentType<{ + code: PlaygroundProps["code"]; + scope: PlaygroundProps["scope"]; +}> = dynamic(() => import("./dynamic-live"), { + ssr: false, + loading: () => , +}); + +export type PlaygroundProps = { + title?: React.ReactNode | string; + desc?: React.ReactNode | string; + code: string; + scope: { + [key: string]: unknown; + }; +}; + +const defaultProps = { + desc: "", + code: "", + bindings: {}, +}; + +const Playground: React.FC = React.memo( + ({ code: inputCode, scope }: PlaygroundProps & typeof defaultProps) => { + const { theme } = useTheme(); + const code = inputCode.trim(); + + return ( + <> +
+ + +
+ + ); + } +); + +Playground.defaultProps = defaultProps; +Playground.displayName = "Playground"; +export default Playground; diff --git a/docs/components/Playground/scope.ts b/docs/components/Playground/scope.ts new file mode 100644 index 0000000..bba478e --- /dev/null +++ b/docs/components/Playground/scope.ts @@ -0,0 +1,9 @@ +import * as components from "@tonightpass/kitchen"; + +const scope = { + ...components, +}; + +delete scope.default; + +export default scope; diff --git a/docs/data/showcases.ts b/docs/data/showcases.ts new file mode 100644 index 0000000..4c891b4 --- /dev/null +++ b/docs/data/showcases.ts @@ -0,0 +1,14 @@ +import { Showcase } from "types/showcase"; + +const showcases: Showcase[] = [ + { + name: "Tonight Pass", + thumbnail: "tonightpass.svg", + }, + { + name: "onRuntime Studio", + thumbnail: "onruntime.svg", + }, +]; + +export default showcases; diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/docs/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/docs/next.config.js b/docs/next.config.js new file mode 100644 index 0000000..4057cf1 --- /dev/null +++ b/docs/next.config.js @@ -0,0 +1,14 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const nextra = require("nextra"); +const { withKitchen } = require("@tonightpass/kitchen/next"); + +const withNextra = nextra({ + theme: "nextra-theme-docs", + themeConfig: "./theme.config.tsx", +}); + +module.exports = withNextra( + withKitchen({ + reactStrictMode: true, + }) +); diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..98016a5 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,28 @@ +{ + "name": "docs", + "private": true, + "scripts": { + "dev": "next", + "start": "next start", + "build": "next build" + }, + "dependencies": { + "@codesandbox/sandpack-react": "^1.20.9", + "@preconstruct/next": "^4.0.0", + "@tonightpass/kitchen": "workspace:*", + "next": "^13.0.2", + "next-themes": "^0.2.1", + "nextra": "^2.0.1", + "nextra-theme-docs": "^2.0.1", + "prism-react-renderer": "^1.3.5", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-icons": "^4.7.1", + "react-live": "^3.1.1", + "urlcat": "^3.0.0" + }, + "devDependencies": { + "@types/node": "^18.11.9", + "typescript": "^4.9.3" + } +} diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx new file mode 100644 index 0000000..a9bb9ad --- /dev/null +++ b/docs/pages/_app.tsx @@ -0,0 +1,16 @@ +import { KitchenProvider } from "@tonightpass/kitchen"; +import { AppProps } from "next/app"; +import GlobalStyle from "@components/GlobalStyle"; + +import "@tonightpass/kitchen/fonts.css"; + +const App = ({ Component, pageProps }: AppProps) => { + return ( + + + + + ); +}; + +export default App; diff --git a/docs/pages/_document.tsx b/docs/pages/_document.tsx new file mode 100644 index 0000000..d4aa1bb --- /dev/null +++ b/docs/pages/_document.tsx @@ -0,0 +1,23 @@ +import { getSandpackCssText } from "@codesandbox/sandpack-react"; +import { KitchenDocument } from "@tonightpass/kitchen/next"; +import { Head, Html, Main, NextScript } from "next/document"; + +export default class MyDocument extends KitchenDocument { + render() { + return ( + + + + + onRuntime Logo + + + + + + \ No newline at end of file diff --git a/docs/public/static/images/showcases/thumbnails/tonightpass.svg b/docs/public/static/images/showcases/thumbnails/tonightpass.svg new file mode 100644 index 0000000..e66221f --- /dev/null +++ b/docs/public/static/images/showcases/thumbnails/tonightpass.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/screens/Landing/index.tsx b/docs/screens/Landing/index.tsx new file mode 100644 index 0000000..31856de --- /dev/null +++ b/docs/screens/Landing/index.tsx @@ -0,0 +1,18 @@ +import Featured from "@components/Landing/Featured"; +import Features from "@components/Landing/Features"; +import Render from "@components/Landing/Render"; +import { Container } from "@tonightpass/kitchen"; +import Showcase from "components/Landing/Showcase"; + +const Landing: React.FC = () => { + return ( + + + + + + + ); +}; + +export default Landing; diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx new file mode 100644 index 0000000..7acd6af --- /dev/null +++ b/docs/theme.config.tsx @@ -0,0 +1,111 @@ +/* eslint-disable react-hooks/rules-of-hooks */ +import { DocsThemeConfig, useConfig } from "nextra-theme-docs"; +import { useRouter } from "next/router"; +import urlcat from "urlcat"; +import { useTheme as useNextraTheme } from "next-themes"; +import { useTheme } from "@tonightpass/kitchen"; + +const logo = ( + + + + + + + +); + +const config: DocsThemeConfig = { + project: { + link: "https://github.com/tonightpass/kitchen", + }, + docsRepositoryBase: "https://github.com/tonightpass/kitchen/blob/master", + useNextSeoProps() { + const { route } = useRouter(); + if (route !== "/") { + return { + titleTemplate: `%s${"%s".includes("Kitchen") ? "" : " - Kitchen"}`, + }; + } + }, + logo, + head: () => { + const { theme = "system" } = useNextraTheme(); + const { setStoredTheme } = useTheme(); + setStoredTheme(theme === "dark" ? 1 : theme === "light" ? 2 : 0); + + const { title, ...meta } = useConfig().frontMatter; + + const finalTitle = title + ? `${title}${title.includes("Kitchen") ? "" : " - Kitchen"}` + : "Kitchen"; + const finalDescription = + meta.description || "Delicious React styled components."; + + const finalThumbnailUrl = + urlcat( + `https://og-image.onruntime.com/${encodeURIComponent(finalTitle)}.jpeg`, + { + description: encodeURIComponent(finalDescription || ""), + theme: "night", + md: 1, + fontSize: "100px", + images: "https://tonightpass.com/static/images/logo/tonightpass.svg", + thumbnail: meta.image, + } + ) || "https://tonightpass.com/static/images/open-graph-image.jpg"; + + return ( + <> + + + + + + + + + + + + + + + + + + + ); + }, + editLink: { + text: "Edit this page on GitHub", + }, + primaryHue: 281, +}; + +export default config; diff --git a/docs/tsconfig.json b/docs/tsconfig.json new file mode 100644 index 0000000..cd49939 --- /dev/null +++ b/docs/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "incremental": true, + "esModuleInterop": true, + "isolatedModules": true, + "moduleResolution": "node", + "jsx": "preserve", + "module": "esnext", + "resolveJsonModule": true, + "paths": { + "@components/*": ["components/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/docs/types/showcase.ts b/docs/types/showcase.ts new file mode 100644 index 0000000..c693a59 --- /dev/null +++ b/docs/types/showcase.ts @@ -0,0 +1,4 @@ +export type Showcase = { + name: string; + thumbnail: string; +}; From f8088725f6b6a14997a323d3ee3270daf0b858f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my?= Date: Mon, 1 May 2023 17:38:31 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20update=20size-limit=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .size-limit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 7db431b..6e14cf9 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -23,11 +23,11 @@ module.exports = [ modifyWebpackConfig, }, { - path: "packages/shared-types/next/dist/musy-app-shared-types.cjs.prod.js", + path: "packages/shared-types/dist/musy-app-shared-types.cjs.prod.js", modifyWebpackConfig, }, { - path: "packages/shared-types/next/dist/musy-app-shared-types.esm.js", + path: "packages/shared-types/dist/musy-app-shared-types.esm.js", modifyWebpackConfig, }, ];