From f79e8b70067cf827f97764018a8a2ac4c3eca355 Mon Sep 17 00:00:00 2001 From: Jan Shanel Date: Fri, 23 Jun 2023 09:07:59 +0200 Subject: [PATCH 01/21] feat initial mdx docs implementation --- .../(with-navbar)/components/[type]/page.tsx | 21 ++++++- src/app/(with-navbar)/components/page.tsx | 31 +++++++--- .../InstallationDemo/InstallationDemo.tsx | 56 +++++++++++++++++++ src/docs/components/InstallationDemo/index.ts | 1 + src/docs/examples/badges/Demo.tsx | 45 +++++++++++++++ src/docs/examples/badges/installation.mdx | 18 ++++++ src/docs/examples/installation.mdx | 7 +++ src/docs/lib/mdx.ts | 36 ++++++++++++ 8 files changed, 204 insertions(+), 11 deletions(-) create mode 100644 src/docs/components/InstallationDemo/InstallationDemo.tsx create mode 100644 src/docs/components/InstallationDemo/index.ts create mode 100644 src/docs/examples/badges/Demo.tsx create mode 100644 src/docs/examples/badges/installation.mdx create mode 100644 src/docs/examples/installation.mdx diff --git a/src/app/(with-navbar)/components/[type]/page.tsx b/src/app/(with-navbar)/components/[type]/page.tsx index e013e6c2..5e0ba5a0 100644 --- a/src/app/(with-navbar)/components/[type]/page.tsx +++ b/src/app/(with-navbar)/components/[type]/page.tsx @@ -10,6 +10,8 @@ import { } from "@components/ComponentExample"; import { getHighlighter, highlight } from "@lib/shiki"; +import { getInstallationDoc } from "@lib/mdx"; +import { InstallationDemo } from "@components/InstallationDemo"; import { componentTypes } from "@examples"; type ComponentPageProps = { @@ -48,8 +50,21 @@ export default async function ComponentPage({ }: ComponentPageProps) { const component = await getComponent(type); + const installationDoc = await getInstallationDoc({ + key: type, + // TODO discuss approach, it works but probably not allowed to use async component by TS here + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + components: { InstallationDemo }, + }); + return (
+ {installationDoc && ( +
+ {installationDoc.content} +
+ )}

{component.title}

@@ -95,7 +110,9 @@ const getComponent = async ( const typePath = join(process.cwd(), CONTENT_DIR, component.type); // Read all the files in that dir - const files = readdirSync(typePath); + const files = readdirSync(typePath).filter( + (file) => file.endsWith(".tsx") && !file.startsWith("Demo") + ); // Initiate instance of highlighter const highlighter = await getHighlighter(); @@ -108,7 +125,7 @@ const getComponent = async ( parser: "typescript", }); const Component = ( - await import(`src/docs/examples/${component.type}/${id}`) + await import(`src/docs/examples/${component.type}/${id}.tsx`) ).default; const html = format(render(, { pretty: true }), { diff --git a/src/app/(with-navbar)/components/page.tsx b/src/app/(with-navbar)/components/page.tsx index 4e23b754..a6912eae 100644 --- a/src/app/(with-navbar)/components/page.tsx +++ b/src/app/(with-navbar)/components/page.tsx @@ -1,5 +1,7 @@ import type { Metadata } from "next"; import { ComponentsPreview } from "@components/ComponentsPreview"; +import { CTA } from "@components/CTA"; +import { getInstallationDoc } from "@lib/mdx"; export const metadata: Metadata = { title: "Components", @@ -21,15 +23,26 @@ export const metadata: Metadata = { }, }; -const Components = () => ( -
-

- Explore components -

-
- +const Components = async () => { + const installationDoc = await getInstallationDoc({ + components: { CTA }, + }); + + return ( +
+ {installationDoc && ( +
+ {installationDoc.content} +
+ )} +

+ Explore components +

+
+ +
-
-); + ); +}; export default Components; diff --git a/src/docs/components/InstallationDemo/InstallationDemo.tsx b/src/docs/components/InstallationDemo/InstallationDemo.tsx new file mode 100644 index 00000000..020f8e33 --- /dev/null +++ b/src/docs/components/InstallationDemo/InstallationDemo.tsx @@ -0,0 +1,56 @@ +import { readFileSync } from "fs"; +import { join } from "path"; + +import { format } from "prettier"; +import { render } from "@mailingui/utils"; +import { getHighlighter, highlight } from "@lib/shiki"; + +import { + ComponentExample, + ComponentExampleProps, +} from "@components/ComponentExample"; + +const CONTENT_DIR = "src/docs/examples"; + +export const InstallationDemo = async ({ + componentKey, +}: { + componentKey: string; +}) => { + const componentData = await getComponent(componentKey); + + return ; +}; + +const getComponent = async ( + componentKey: string +): Promise => { + const file = "Demo.tsx"; + const typePath = join(process.cwd(), CONTENT_DIR, componentKey); + + const id = file.replace(/.tsx/, ""); + + const data = format(readFileSync(join(typePath, file), "utf8"), { + parser: "typescript", + }); + const Component = (await import(`src/docs/examples/${componentKey}/Demo.tsx`)) + .default; + + const html = format(render(, { pretty: true }), { + parser: "html", + }); + const plainText = render(, { plainText: true }); + + // Initiate instance of highlighter + const highlighter = await getHighlighter(); + const source = await highlight(highlighter, data); + const markup = await highlight(highlighter, html, "html"); + return { + id, + html, + source, + markup, + plainText, + type: componentKey, + }; +}; diff --git a/src/docs/components/InstallationDemo/index.ts b/src/docs/components/InstallationDemo/index.ts new file mode 100644 index 00000000..3c1d0706 --- /dev/null +++ b/src/docs/components/InstallationDemo/index.ts @@ -0,0 +1 @@ +export { InstallationDemo } from "./InstallationDemo"; diff --git a/src/docs/examples/badges/Demo.tsx b/src/docs/examples/badges/Demo.tsx new file mode 100644 index 00000000..be63c482 --- /dev/null +++ b/src/docs/examples/badges/Demo.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import { + Body, + Container, + Head, + Html, + Preview, + Section, +} from "@react-email/components"; +import { Badge } from "@mailingui/components"; +import { getCssText } from "@mailingui/utils"; + +const MediumBadges = () => ( + + +