Skip to content

Commit

Permalink
fixing tailwind issue
Browse files Browse the repository at this point in the history
  • Loading branch information
abernier committed Aug 10, 2024
1 parent c8f9434 commit b6bd947
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 108 deletions.
16 changes: 16 additions & 0 deletions src/components/mdx/Grid.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
8 changes: 8 additions & 0 deletions src/components/mdx/Hint.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const Hint = ({ children }: { children: React.ReactNode }) => {
console.log('Hint', children)
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>
)
}
96 changes: 96 additions & 0 deletions src/components/mdx/index.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
)
110 changes: 2 additions & 108 deletions src/utils/docs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit b6bd947

Please sign in to comment.