Merge pull request #65 from omnifed/64-docs-add-badge-links-to-source…

…s-for-components

64 docs add badge links to sources for components

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "csstools",
+    "frontmatter",
     "nextjs",
     "omni",
     "oxlint",

docs/app/components/ApiLinks.tsx

@@ -0,0 +1,76 @@
+import { css } from '@/styled-system/css'
+import { hstack } from '@/styled-system/patterns'
+import { LogoGithub, LogoNpm } from '@cerberus-design/icons'
+import { Show } from '@cerberus-design/react'
+
+const apiLinkStyles = css({
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: 'action.border.100',
+  bgColor: 'action.bg.100.initial',
+  display: 'inline-flex',
+  gap: '2',
+  pxi: '2',
+  rounded: 'full',
+  textStyle: 'body-xs',
+  textDecoration: 'none',
+  transition: 'all 200ms ease-in-out',
+  _hover: {
+    bgColor: 'action.navigation.hover',
+    color: 'neutral.text.inverse !important',
+    textStyle: 'link',
+  },
+})
+
+interface ApiLinksProps {
+  npm?: string
+  source?: string
+  recipe?: string
+}
+
+export default function ApiLinks(props: ApiLinksProps) {
+  return (
+    <ul
+      className={hstack({
+        gap: '4',
+        mb: '8',
+      })}
+    >
+      <Show when={Boolean(props.npm)}>
+        <li>
+          <a
+            className={apiLinkStyles}
+            href={`https://www.npmjs.com/package/${props.npm}`}
+          >
+            <LogoNpm />
+            npm
+          </a>
+        </li>
+      </Show>
+
+      <Show when={Boolean(props.source)}>
+        <li>
+          <a
+            className={apiLinkStyles}
+            href={`https://github.com/omnifed/cerberus/blob/main/packages/react/src/${props.source}`}
+          >
+            <LogoGithub />
+            source
+          </a>
+        </li>
+      </Show>
+
+      <Show when={Boolean(props.recipe)}>
+        <li>
+          <a
+            className={apiLinkStyles}
+            href={`https://github.com/omnifed/cerberus/tree/main/packages/panda-preset/src/recipes/${props.recipe}`}
+          >
+            <LogoGithub />
+            recipe
+          </a>
+        </li>
+      </Show>
+    </ul>
+  )
+}

docs/app/components/RootHeadline.tsx

@@ -1,12 +1,14 @@
 'use client'
 
-import { css } from '@/styled-system/css'
-import { useThemeContext } from '@cerberus-design/react'
+import { css, cx } from '@/styled-system/css'
+import { Show, useThemeContext } from '@cerberus-design/react'
+import { Splash } from 'next/font/google'
 
-const rootHeadlineText = {
-  light: 'The cutest protector of brand consistency in the realm.',
-  dark: 'The most vicious protector of brand consistency in the realm.',
-}
+const splash = Splash({
+  display: 'swap',
+  subsets: ['latin'],
+  weight: ['400'],
+})
 
 export default function RootHeadline() {
   const { mode } = useThemeContext()
@@ -16,9 +18,27 @@ export default function RootHeadline() {
       className={css({
         lineHeight: '135%',
         textStyle: 'display-lg',
+        textWrap: 'pretty',
       })}
     >
-      {rootHeadlineText[mode]}
+      <Show
+        when={mode === 'dark'}
+        fallback={<>The cutest protector of brand consistency in the realm.</>}
+      >
+        The{' '}
+        <span
+          className={cx(
+            splash.className,
+            css({
+              color: 'danger.bg.initial',
+              fontSize: '7rem',
+            }),
+          )}
+        >
+          most vicious
+        </span>{' '}
+        protector of brand consistency in the realm.
+      </Show>
     </h1>
   )
 }

docs/app/global.d.ts

@@ -1 +1,7 @@
 declare module 'color-space'
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element
+  export const frontmatter: Record<string, string>
+  export default MDXComponent
+}

docs/app/page.tsx

@@ -1,16 +1,95 @@
-import { vstack } from '@/styled-system/patterns'
+import { grid, gridItem, vstack } from '@/styled-system/patterns'
 import RootHeadline from './components/RootHeadline'
+import { Image as ImageIcon } from '@cerberus-design/icons'
+import { css } from '@/styled-system/css'
+import Link from 'next/link'
 
 export default function Home() {
   return (
     <div
-      className={vstack({
+      className={css({
         pxi: '4',
-        py: '20',
+        pt: '10',
+        pb: '20',
       })}
     >
-      <main>
-        <RootHeadline />
+      <main
+        className={grid({
+          gap: '4',
+          columns: 12,
+          justifyContent: 'center',
+        })}
+      >
+        <div
+          className={gridItem({
+            gridColumnStart: 1,
+            gridColumnEnd: 13,
+            md: {
+              gridColumnStart: 7,
+              h: '66dvh',
+            },
+          })}
+        >
+          <div
+            className={vstack({
+              bgColor: 'gray',
+              gap: '0',
+              justify: 'center',
+              h: '15rem',
+              w: 'full',
+              md: {
+                h: 'full',
+              },
+            })}
+          >
+            <ImageIcon size={32} />
+          </div>
+        </div>
+
+        <div
+          className={gridItem({
+            gridColumnStart: 1,
+            gridColumnEnd: 13,
+            md: {
+              alignSelf: 'center',
+              gridColumnStart: 1,
+              gridColumnEnd: 6,
+              gridRowStart: 1,
+              paddingInlineStart: '6',
+            },
+          })}
+        >
+          <RootHeadline />
+          <div
+            className={css({
+              mt: '4',
+            })}
+          >
+            <Link
+              className={css({
+                alignItems: 'center',
+                bgColor: 'action.navigation.initial',
+                color: 'neutral.text.inverse',
+                display: 'inline-flex',
+                h: '3.3rem',
+                justifyContent: 'center',
+                pxi: '4',
+                w: 'full',
+                rounded: 'md',
+                transition: 'background-color 0.2s ease-in-out',
+                _hover: {
+                  bgColor: 'action.navigation.hover',
+                },
+                md: {
+                  w: 'auto',
+                },
+              })}
+              href="/preset/"
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
       </main>
     </div>
   )

docs/app/preset/overview.mdx

@@ -55,7 +55,7 @@ import { Poppins } from 'next/font/google'
 const poppins = Poppins({
   display: 'swap',
   subsets: ['latin'],
-  weight: ['400', '600', '700', '800'],
+  weight: ['400', '600', '700'],
 })
 ```
 

docs/app/react/show/doc.mdx

@@ -1,3 +1,9 @@
+---
+npm: '@cerberus-design/react'
+source: 'components/Show.tsx'
+recipe: ''
+---
+
 import {
   WhenToUseAdmonition,
   WhenNotToUseAdmonition,

docs/app/react/show/page.tsx

@@ -1,11 +1,13 @@
+import ApiLinks from '@/app/components/ApiLinks'
 import OnThisPage from '../../components/OnThisPage'
 import { PageMainContent, PageSections } from '../../components/PageLayout'
-import Doc from './doc.mdx'
+import Doc, { frontmatter } from './doc.mdx'
 
 export default function ShowPage() {
   return (
     <>
       <PageMainContent>
+        <ApiLinks {...frontmatter} />
         <main>
           <Doc />
         </main>

docs/app/react/use-theme-context/doc.mdx

@@ -1,3 +1,9 @@
+---
+npm: '@cerberus-design/react'
+source: 'context/theme.tsx'
+recipe: ''
+---
+
 import {
   WhenToUseAdmonition,
   WhenNotToUseAdmonition,

docs/app/react/use-theme-context/page.tsx

@@ -1,11 +1,13 @@
+import ApiLinks from '@/app/components/ApiLinks'
 import OnThisPage from '../../components/OnThisPage'
 import { PageMainContent, PageSections } from '../../components/PageLayout'
-import UseThemeDoc from './doc.mdx'
+import UseThemeDoc, { frontmatter } from './doc.mdx'
 
 export default function UseThemeContextPage() {
   return (
     <>
       <PageMainContent>
+        <ApiLinks {...frontmatter} />
         <main>
           <UseThemeDoc />
         </main>

docs/app/react/use-theme/doc.mdx

@@ -1,3 +1,9 @@
+---
+npm: '@cerberus-design/react'
+source: 'hooks/useTheme.ts'
+recipe: ''
+---
+
 import {
   WhenToUseAdmonition,
   WhenNotToUseAdmonition,

docs/app/react/use-theme/page.tsx

@@ -1,11 +1,13 @@
+import ApiLinks from '@/app/components/ApiLinks'
 import OnThisPage from '../../components/OnThisPage'
 import { PageMainContent, PageSections } from '../../components/PageLayout'
-import UseThemeDoc from './doc.mdx'
+import UseThemeDoc, { frontmatter } from './doc.mdx'
 
 export default function UseThemePage() {
   return (
     <>
       <PageMainContent>
+        <ApiLinks {...frontmatter} />
         <main>
           <UseThemeDoc />
         </main>

docs/app/styles/markdown.ts

@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 
 const headlineStyles = {
   color: 'neutral.text.initial',
-  pb: '2',
+  py: '2',
 }
 
 export const markdown = css({

docs/next.config.mjs

@@ -2,6 +2,8 @@ import createMDX from '@next/mdx'
 import emoji from 'remark-emoji'
 import remarkParse from 'remark-parse'
 import remarkGfm from 'remark-gfm'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 import rehypeExpressiveCode from 'rehype-expressive-code'
 import rehypeStringify from 'rehype-stringify'
 import rehypeSlug from 'rehype-slug'
@@ -22,7 +24,13 @@ const nextConfig = {
 
 const withMDX = createMDX({
   options: {
-    remarkPlugins: [emoji, remarkParse, remarkGfm],
+    remarkPlugins: [
+      emoji,
+      remarkParse,
+      remarkGfm,
+      remarkFrontmatter,
+      remarkMdxFrontmatter,
+    ],
     rehypePlugins: [
       [
         rehypeExpressiveCode,

docs/package.json

@@ -41,7 +41,9 @@
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-emoji": "^4.0.1",
+    "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-mdx-frontmatter": "^4.0.0",
     "remark-parse": "^11.0.0"
   }
 }

docs/tsconfig.json

@@ -21,6 +21,9 @@
       "@/*": ["./*"]
     }
   },
+  "mdx": {
+    "plugins": ["remark-frontmatter", "remark-frontmatter-mdx"]
+  },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }