docs: Improve typography of content

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/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/package.json

@@ -12,6 +12,7 @@
     "@marigold/eslint-config": "workspace:*",
     "@marigold/icons": "workspace:*",
     "@marigold/theme-preset": "workspace:*",
+    "@tailwindcss/typography": "0.5.9",
     "autoprefixer": "10.4.14",
     "contentlayer": "0.3.4",
     "eslint": "8.44.0",

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",

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