fixing tailwind issue

pmndrs · Aug 10, 2024 · 6e73f9c · 6e73f9c
1 parent c8f9434
commit 6e73f9c
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 113 deletions.
diff --git a/src/components/mdx/Grid.tsx b/src/components/mdx/Grid.tsx
@@ -0,0 +1,16 @@
+export const Grid = ({ children, cols = 4 }: { children: React.ReactNode; cols?: number }) => (
+ <ul
+ className={`grid sm:grid-cols-2 ${
+ cols === 4
+ ? 'md:grid-cols-4'
+ : cols === 3
+ ? 'md:grid-cols-3'
+ : cols === 2
+ ? 'md:grid-cols-2'
+ : 'md:grid-cols-1'
+ } gap-4 text-sm text-gray-700 grid-list`}
+ style={{ marginBottom: '1rem' }}
+ >
+ {children}
+ </ul>
+)
diff --git a/src/components/mdx/Hint.tsx b/src/components/mdx/Hint.tsx
@@ -0,0 +1,7 @@
+export const Hint = ({ children }: { children: React.ReactNode }) => {
+ return (
+ <div className="hint shadow overflow-hidden bg-yellow-100 border-b border-gray-200 sm:rounded-lg px-6 py-4 mb-6 dark:text-gray-500">
+ {children}
+ </div>
+ )
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
@@ -0,0 +1,96 @@
+import { MARKDOWN_REGEX } from '@/utils/docs'
+
+export * from './Grid'
+export * from './Hint'
+
+export const h2 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+ <a href={`#${id}`} className="heading text-3xl mb-6 mt-8 tracking-light">
+ <h2 id={id}>{children}</h2>
+ </a>
+)
+const h3 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+ <a href={`#${id}`} className="heading text-xl mb-4 mt-6 tracking-light">
+ <h3 id={id}>{children}</h3>
+ </a>
+)
+const h4 = ({ children, id }: { children: React.ReactNode; id: string }) => (
+ <a href={`#${id}`} className="heading text-base mb-4 mt-4 tracking-light">
+ <h4 id={id}>{children}</h4>
+ </a>
+)
+
+const ul = ({ children }: { children: React.ReactNode }) => (
+ <ul className="px-4 mb-8">{children}</ul>
+)
+const ol = ({ children }: { children: React.ReactNode }) => (
+ <ol className="px-4 mb-8">{children}</ol>
+)
+const li = ({ children }: { children: React.ReactNode }) => (
+ <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
+)
+
+const p = ({ children }: { children: React.ReactNode }) => (
+ <p className="mb-4 text-base text-gray-700 dark:text-gray-400">{children}</p>
+)
+
+const blockquote = ({ children }: { children: React.ReactNode }) => (
+ <blockquote className="mb-8 text-base pl-4 border-l-4 border-gray-600">{children}</blockquote>
+)
+
+const table = ({ children }: { children: React.ReactNode }) => (
+ <div className="flex flex-col my-6">
+ <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+ <div className="py-6 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+ <div className="shadow-lg overflow-hidden border-b border-gray-200 sm:rounded-lg dark:border-gray-700">
+ <table className="divide-y divide-gray-200 w-full dark:divide-gray-700">{children}</table>
+ </div>
+ </div>
+ </div>
+ </div>
+)
+
+const a = ({
+ href,
+ target,
+ rel,
+ children,
+}: {
+ href: string
+ target?: string
+ rel?: string
+ children: React.ReactNode
+}) => {
+ const isAnchor = href.startsWith('https://')
+ target = isAnchor ? '_blank' : target
+ rel = isAnchor ? 'noopener noreferrer' : rel
+ href = isAnchor ? href : href.replace(MARKDOWN_REGEX, '')
+ return (
+ <a href={href} target={target} rel={rel}>
+ {children}
+ </a>
+ )
+}
+
+export const img = ({
+ src,
+ alt,
+ width,
+ height,
+ ...rest
+}: {
+ src: string
+ alt: string
+ width: number
+ height: number
+}) => (
+ // eslint-disable-next-line @next/next/no-img-element
+ <img
+ src={src}
+ decoding="async"
+ loading="lazy"
+ alt={alt}
+ width={width}
+ height={height}
+ {...rest}
+ />
+)
diff --git a/src/utils/docs.tsx b/src/utils/docs.tsx
@@ -12,6 +12,8 @@ import rehypePrismPlus from 'rehype-prism-plus'
 import { codesandbox, toc } from '@/utils/rehype'
 import Codesandbox, { fetchCSB } from '@/components/Codesandbox'
 
+import * as components from '@/components/mdx'
+
 /**
  * Checks for .md(x) file extension
  */
@@ -52,114 +54,6 @@ async function crawl(dir: string, filter?: RegExp, files: string[] = []) {
  * @param root - absolute or relative (to cwd) path to docs folder
  */
 
-const components = {
- Codesandbox,
- Hint: ({ children }: { children: React.ReactNode }) => (
- <div className="hint shadow overflow-hidden bg-yellow-100 border-b border-gray-200 sm:rounded-lg px-6 py-4 mb-6 dark:text-gray-500">
- {children}
- </div>
- ),
- Grid: ({ children, cols = 4 }: { children: React.ReactNode; cols?: number }) => (
- <ul
- className={`grid sm:grid-cols-2 ${
- cols === 4
- ? 'md:grid-cols-4'
- : cols === 3
- ? 'md:grid-cols-3'
- : cols === 2
- ? 'md:grid-cols-2'
- : 'md:grid-cols-1'
- } gap-4 text-sm text-gray-700 grid-list`}
- style={{ marginBottom: '1rem' }}
- >
- {children}
- </ul>
- ),
- h2: ({ children, id }: { children: React.ReactNode; id: string }) => (
- <a href={`#${id}`} className="heading text-3xl mb-6 mt-8 tracking-light">
- <h2 id={id}>{children}</h2>
- </a>
- ),
- h3: ({ children, id }: { children: React.ReactNode; id: string }) => (
- <a href={`#${id}`} className="heading text-xl mb-4 mt-6 tracking-light">
- <h3 id={id}>{children}</h3>
- </a>
- ),
- h4: ({ children, id }: { children: React.ReactNode; id: string }) => (
- <a href={`#${id}`} className="heading text-base mb-4 mt-4 tracking-light">
- <h4 id={id}>{children}</h4>
- </a>
- ),
- ul: ({ children }: { children: React.ReactNode }) => <ul className="px-4 mb-8">{children}</ul>,
- ol: ({ children }: { children: React.ReactNode }) => <ol className="px-4 mb-8">{children}</ol>,
- li: ({ children }: { children: React.ReactNode }) => (
- <li className="mb-4 text-base leading-6 text-gray-700 dark:text-gray-400">{children}</li>
- ),
- p: ({ children }: { children: React.ReactNode }) => (
- <p className="mb-4 text-base text-gray-700 dark:text-gray-400">{children}</p>
- ),
- blockquote: ({ children }: { children: React.ReactNode }) => (
- <blockquote className="mb-8 text-base pl-4 border-l-4 border-gray-600">{children}</blockquote>
- ),
- table: ({ children }: { children: React.ReactNode }) => (
- <div className="flex flex-col my-6">
- <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
- <div className="py-6 align-middle inline-block min-w-full sm:px-6 lg:px-8">
- <div className="shadow-lg overflow-hidden border-b border-gray-200 sm:rounded-lg dark:border-gray-700">
- <table className="divide-y divide-gray-200 w-full dark:divide-gray-700">
- {children}
- </table>
- </div>
- </div>
- </div>
- </div>
- ),
- a: ({
- href,
- target,
- rel,
- children,
- }: {
- href: string
- target?: string
- rel?: string
- children: React.ReactNode
- }) => {
- const isAnchor = href.startsWith('https://')
- target = isAnchor ? '_blank' : target
- rel = isAnchor ? 'noopener noreferrer' : rel
- href = isAnchor ? href : href.replace(MARKDOWN_REGEX, '')
- return (
- <a href={href} target={target} rel={rel}>
- {children}
- </a>
- )
- },
- img: ({
- src,
- alt,
- width,
- height,
- ...rest
- }: {
- src: string
- alt: string
- width: number
- height: number
- }) => (
- // eslint-disable-next-line @next/next/no-img-element
- <img
- src={src}
- decoding="async"
- loading="lazy"
- alt={alt}
- width={width}
- height={height}
- {...rest}
- />
- ),
-}
-
 async function _getDocs(
  root: string,
  slugOfInterest: string[] | null,

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,11 +2,7 @@ import type { Config } from 'tailwindcss'
 
 const config: Config = {
  darkMode: 'class',
- content: [
- './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
- './src/components/**/*.{js,ts,jsx,tsx,mdx}',
- './src/app/**/*.{js,ts,jsx,tsx,mdx}',
- ],
+ content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio')],
 }
 export default config