Merge branch 'main' into vercel-analytics

docs/app/[...slug]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { allContentPages } from 'contentlayer/generated';
 
+import { Headline } from '@/ui';
 import { Mdx } from '@/ui/mdx';
 
 interface ContentPageProps {
@@ -51,8 +52,8 @@ export default async function ContentPage({ params }: ContentPageProps) {
   }
 
   return (
-    <article className="prose dark:prose-invert py-6">
-      <h1>{page.title}</h1>
+    <article className="prose py-6">
+      <Headline level="1">{page.title}</Headline>
       <Mdx code={page.body.code} />
     </article>
   );

docs/app/components/[...slug]/page.tsx

@@ -2,11 +2,12 @@ import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { allComponentPages } from 'contentlayer/generated';
 
+import { Headline } from '@/ui';
 import { Mdx } from '@/ui/mdx';
-import { MarigoldThemeSwitch, ThemeMenu } from './_components';
-
 import { b2bTheme, coreTheme } from '@/theme';
 
+import { MarigoldThemeSwitch, ThemeMenu } from './_components';
+
 interface ComponentPageProps {
   params: {
     slug: string[];
@@ -59,8 +60,8 @@ export default async function ComponentPage({ params }: ComponentPageProps) {
   }
 
   return (
-    <article className="prose dark:prose-invert py-6">
-      <h1>{page.title}</h1>
+    <article className="prose py-6">
+      <Headline level="1">{page.title}</Headline>
       <MarigoldThemeSwitch themes={themes} initial="b2bTheme">
         <ThemeMenu />
         <Mdx title={page.title} code={page.body.code} />

docs/app/layout.tsx

@@ -28,7 +28,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
               <aside className="fixed top-14 z-20 -ml-2 hidden w-60 overflow-y-auto md:block">
                 <Navigation />
               </aside>
-              <div className="md:pl-60">
+              <div className="md:pl-60 lg:pl-72">
                 <main className="max-w-3xl">{children}</main>
               </div>
             </div>

docs/content/components/accordion/basic-accordion.demo.tsx

@@ -0,0 +1,46 @@
+import { Accordion, Text } from '@marigold/components';
+
+export default () => {
+  return (
+    <Accordion defaultExpandedKeys={[1]}>
+      <Accordion.Item key={1} title="Harry Potter and the Philosopher's Stone">
+        <Text>
+          Harry Potter and the Philosopher's Stone is a 1997 fantasy novel
+          written by British author J. K. Rowling. The first novel in the Harry
+          Potter series and Rowling's debut novel, it follows Harry Potter, a
+          young wizard who discovers his magical heritage on his eleventh
+          birthday, when he receives a letter of acceptance to Hogwarts School
+          of Witchcraft and Wizardry. Harry makes close friends and a few
+          enemies during his first year at the school and with the help of his
+          friends, Ron Weasley and Hermione Granger, he faces an attempted
+          comeback by the dark wizard Lord Voldemort, who killed Harry's
+          parents, but failed to kill Harry when he was just 15 months old.
+        </Text>
+      </Accordion.Item>
+      <Accordion.Item key={2} title="Harry Potter and the Chamber of Secrets">
+        <Text>
+          Harry Potter and the Chamber of Secrets is a fantasy novel written by
+          British author J. K. Rowling and the second novel in the Harry Potter
+          series. The plot follows Harry's second year at Hogwarts School of
+          Witchcraft and Wizardry, during which a series of messages on the
+          walls of the school's corridors warn that the "Chamber of Secrets" has
+          been opened and that the "heir of Slytherin" would kill all pupils who
+          do not come from all-magical families. These threats are found after
+          attacks that leave residents of the school petrified. Throughout the
+          year, Harry and his friends Ron and Hermione investigate the attacks.
+        </Text>
+      </Accordion.Item>
+      <Accordion.Item key={3} title="Harry Potter and the Prisoner of Azkaban">
+        <Text>
+          Harry Potter and the Prisoner of Azkaban is a fantasy novel written by
+          British author J. K. Rowling and is the third in the Harry Potter
+          series. The book follows Harry Potter, a young wizard, in his third
+          year at Hogwarts School of Witchcraft and Wizardry. Along with friends
+          Ronald Weasley and Hermione Granger, Harry investigates Sirius Black,
+          an escaped prisoner from Azkaban, the wizard prison, believed to be
+          one of Lord Voldemort's old allies.
+        </Text>
+      </Accordion.Item>
+    </Accordion>
+  );
+};

docs/contentlayer.config.ts

@@ -88,7 +88,26 @@ export default makeSource({
     rehypePlugins: [
       [rehypeComponentDemo, { contentDirPath }],
       rehypeSlug,
-      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'wrap',
+          properties: {
+            class: [
+              'relative',
+              'no-underline',
+              'before:absolute',
+              'before:-left-6',
+              'before:inset-y-0',
+              'before:flex',
+              'before:items-center',
+              'before:text-secondary-400',
+              'before:text-2xl',
+              `hover:before:content-['#']`,
+            ].join(' '),
+          },
+        },
+      ],
     ],
   },
   documentTypes: [ContentPage, ComponentPage],

docs/next.config.js

@@ -13,9 +13,18 @@ const nextConfig = {
   },
   transpilePackages: [
     '@marigold/components',
-    '@marigold/theme-preset',
     '@marigold/system',
+    '@marigold/theme-preset',
   ],
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/introduction/getting-started',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(nextConfig);

docs/package.json

@@ -3,15 +3,17 @@
   "version": "5.6.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "pnpm registry && next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "registry": "zx ./scripts/build-registry.mjs"
   },
   "dependencies": {
     "@marigold/components": "workspace:*",
     "@marigold/eslint-config": "workspace:*",
     "@marigold/icons": "workspace:*",
     "@marigold/theme-preset": "workspace:*",
+    "@tailwindcss/typography": "0.5.9",
     "@vercel/analytics": "1.0.1",
     "autoprefixer": "10.4.14",
     "contentlayer": "0.3.4",
@@ -26,7 +28,8 @@
     "rehype-autolink-headings": "6.1.1",
     "rehype-slug": "5.1.0",
     "remark-gfm": "3.0.1",
-    "tailwindcss": "3.3.2"
+    "tailwindcss": "3.3.2",
+    "zx": "7.2.2"
   },
   "devDependencies": {
     "@types/node": "18.16.19",

docs/registry/index.tsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import dynamic from 'next/dynamic';
+
+export const registry = {
+  'basic-accordion': {
+    name: 'basic-accordion',
+    demo: dynamic(
+      () => import('@/content/components/accordion/basic-accordion.demo')
+    ),
+    file: 'content/components/accordion/basic-accordion.demo.tsx',
+  },
+  'button-variant': {
+    name: 'button-variant',
+    demo: dynamic(
+      () => import('@/content/components/button/button-variant.demo')
+    ),
+    file: 'content/components/button/button-variant.demo.tsx',
+  },
+} as const;

docs/scripts/build-registry.mjs

@@ -0,0 +1,34 @@
+#!/usr/bin/env zx
+// Registry of demos ideas is based on https://github.com/shadcn/ui !
+
+import fs from 'fs';
+import path, { basename } from 'path';
+import { glob } from 'zx';
+
+let demoPath = await glob([`content/components/**/**.demo.tsx`]);
+
+console.log('📑 Building registry...');
+
+let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import dynamic from 'next/dynamic';
+
+export const registry = {`;
+
+for (const item of demoPath) {
+  const name = basename(item, '.demo.tsx');
+  index += `
+  '${name}': {
+    name: '${name}',
+    demo: dynamic(
+      () => import('@/${item.replace('.tsx', '')}')
+    ),
+    file: '${item}',
+  },`;
+}
+index += `
+} as const;`;
+
+fs.writeFileSync(path.join(process.cwd(), 'registry/index.tsx'), index);
+console.log('✅ Registry build successfully!');

docs/tailwind.config.ts

@@ -12,11 +12,15 @@ const config: Config = {
     './ui/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
 
+    // Used for the anchor links
+    './contentlayer.config.ts',
+
     // Marigold components
     '../packages/{components,system}/**/*.{tsx,ts}',
     '!../packages/{components,system}/**/*.{stories,test}.{tsx,ts}',
   ],
   presets: [preset],
+  plugins: [require('@tailwindcss/typography')],
 };
 
 export default config;

docs/tsconfig.json

@@ -4,8 +4,15 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strictNullChecks": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
     "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
@@ -24,7 +31,8 @@
       "@/*": ["./*"],
       "@marigold/*": ["../packages/*/src", "../themes/*/src"],
       "contentlayer/generated": ["./.contentlayer/generated"]
-    }
+    },
+    "strict": false
   },
   "include": [
     "**/*.ts",
@@ -34,7 +42,8 @@
     "../packages/**/*.ts",
     "../packages/**/*.tsx",
     "../.next/types/**/*.ts",
-    "contentlayer.config.ts"
+    "contentlayer.config.ts",
+    "scripts/build-registry.mjs"
   ],
   "exclude": ["node_modules"]
 }

docs/ui/ComponentDemo.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { registry } from '@/lib/registry';
+import { registry } from '../registry';
 
 export interface ComponentDemoProps {
-  name: string;
+  name: keyof typeof registry;
   source: string;
   children?: ReactNode;
 }
@@ -12,15 +12,14 @@ export const ComponentDemo = ({
   source,
   children,
 }: ComponentDemoProps) => {
-  const Demo = registry[name];
+  const Demo = registry[name].demo;
 
   return (
     <div className="bg-cyan-800 p-10 text-cyan-100">
       <pre>
         <code className="language-tsx">{source}</code>
       </pre>
       <hr />
-      <div>{children}</div>
       <div>
         <Demo />
       </div>

docs/ui/mdx.tsx

@@ -48,14 +48,14 @@ const typography = {
 // MDX Components
 // ---------------
 const components = {
+  ...DocComponents,
+  ...typography,
   // TODO: wrap Marigold's Image/Link with next's image/link component
   ComponentDemo,
   Headline,
   Message,
   Text,
   IconList,
-  ...DocComponents,
-  ...typography,
 };
 
 // Props

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "license": "MIT",
   "engines": {
-    "node": ">=16.x"
+    "node": "18.x"
   },
   "packageManager": "[email protected]",
   "dependencies": {
@@ -44,6 +44,7 @@
     "build:docs": "pnpm --filter @marigold/docs... build",
     "build:storybook": "pnpm --filter @marigold/storybook-config... build",
     "build:themes": "pnpm --filter \"@marigold/theme*...\" build",
+    "registry": "pnpm --filter @marigold/docs registry",
     "test": "jest --config jest.config.js",
     "test:coverage": "jest --config jest.config.js --coverage --coverageReporters html",
     "test:ci": "jest --config jest.config.js --coverage --ci --no-cache",