Skip to content

Commit

Permalink
More docs work (#839)
Browse files Browse the repository at this point in the history
* wip

* add changeset

* add more

* more content

* fix props

* fix lint errors

* simplify ci

* fix lint error
  • Loading branch information
shuding committed Dec 1, 2022
1 parent fdb2f57 commit a1c1e4e
Show file tree
Hide file tree
Showing 33 changed files with 832 additions and 157 deletions.
5 changes: 5 additions & 0 deletions .changeset/six-pugs-grow.md
@@ -0,0 +1,5 @@
---
'nextra': patch
---

Update docs
11 changes: 9 additions & 2 deletions .eslintrc.cjs
Expand Up @@ -5,7 +5,7 @@ const TAILWIND_CONFIG = {
'tailwindcss/enforces-negative-arbitrary-values': 'error',
'tailwindcss/enforces-shorthand': 'error',
'tailwindcss/migration-from-tailwind-2': 'error',
'tailwindcss/no-custom-classname': 'error'
'tailwindcss/no-custom-classname': 'warn'
}
}

Expand Down Expand Up @@ -94,7 +94,14 @@ module.exports = {
tailwindcss: {
config: 'docs/tailwind.config.js',
callees: ['cn'],
whitelist: ['dash-ring', 'theme-1', 'theme-2', 'theme-3', 'theme-4', 'border-primary-100/10$']
whitelist: [
'dash-ring',
'theme-1',
'theme-2',
'theme-3',
'theme-4',
'border-primary-100/10$'
]
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Expand Up @@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16, 18]
node-version: [18]
os: [ubuntu-latest, windows-latest]

steps:
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/release.yml
Expand Up @@ -22,8 +22,8 @@ jobs:
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 16
cache: "pnpm"
node-version: 18
cache: 'pnpm'

- name: Install Dependencies
run: pnpm i
Expand Down
42 changes: 31 additions & 11 deletions docs/components/card/index.tsx
Expand Up @@ -3,7 +3,16 @@ import Link from 'next/link'

import styles from './style.module.css'

export function Card({ children, title, icon, image, arrow, href, ...props }) {
export function Card({
children,
title,
icon,
image,
arrow,
demo,
href,
...props
}) {
const animatedArrow = arrow ? (
<span
className={cn(
Expand All @@ -21,22 +30,24 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
href={href}
className={cn(
styles.card,
'group flex flex-col justify-start overflow-hidden rounded-lg border border-transparent bg-gray-100 text-current no-underline shadow shadow-gray-200 transition-all duration-200',
'hover:border-gray-200 hover:shadow-lg hover:shadow-gray-200'
'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 bg-gray-100 text-current no-underline shadow shadow-gray-100 transition-all duration-200',
'hover:border-gray-300 hover:shadow-lg hover:shadow-gray-100'
)}
{...props}
>
{children}
<span
className={cn(
styles.title,
'gap-1 p-4 text-gray-700',
'gap-2 p-4 text-gray-700',
'hover:text-gray-900'
)}
>
{icon}
{title}
{animatedArrow}
<span className="flex gap-1">
{title}
{animatedArrow}
</span>
</span>
</Link>
)
Expand All @@ -47,15 +58,15 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
href={href}
className={cn(
styles.card,
'group flex flex-col justify-start overflow-hidden rounded-lg border border-transparent bg-gray-100 text-current no-underline shadow shadow-transparent transition-all duration-200',
'hover:border-gray-200 hover:shadow-md hover:shadow-gray-100'
'group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline shadow-sm shadow-gray-100 transition-all duration-200',
'hover:border-gray-300 hover:bg-slate-50 hover:shadow-md hover:shadow-gray-100'
)}
{...props}
>
<span
className={cn(
styles.title,
'gap-1 p-4 text-gray-700',
'gap-2 p-4 text-gray-700',
'hover:text-gray-900'
)}
>
Expand All @@ -67,9 +78,18 @@ export function Card({ children, title, icon, image, arrow, href, ...props }) {
)
}

export function Cards({ children, ...props }) {
export function Cards({ children, num, ...props }) {
return (
<div className={cn(styles.cards, 'mt-4 gap-4')} {...props}>
<div
className={cn(styles.cards, 'mt-4 gap-4')}
{...props}
style={
{
'--rows': num || 3,
...props.style
} as any
}
>
{children}
</div>
)
Expand Down
3 changes: 2 additions & 1 deletion docs/components/card/style.module.css
@@ -1,8 +1,9 @@
.cards {
display: grid;
--rows: 3;
grid-template-columns: repeat(
auto-fill,
minmax(max(250px, calc((100% - 1rem * 2) / 3)), 1fr)
minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)
);
}

Expand Down
143 changes: 143 additions & 0 deletions docs/components/file-tree/index.tsx
@@ -0,0 +1,143 @@
import React, { useState, useCallback, createContext, useContext } from 'react'
import cn from 'clsx'
import type { ReactElement } from 'react'

const ctx = createContext(0)

export const { Provider, Consumer } = ctx
export function useIndent() {
return useContext(ctx) || 0
}
export default ctx

interface FolderProps {
name: string
label?: ReactElement
open?: boolean
defaultOpen?: boolean
onToggle?: (open: boolean) => void
children: ReactElement | ReactElement[]
}

interface FileProps {
name: string
label?: ReactElement
active?: boolean
children: ReactElement | ReactElement[]
}

const Tree: React.FC<{
children: ReactElement | ReactElement[]
}> = ({ children }) => (
<div className="mt-6 select-none text-sm text-gray-800 dark:text-gray-300">
<div className="inline-flex rounded border px-4 py-2 dark:border-neutral-800">
{children}
</div>
</div>
)

function Ident() {
const indent = useIndent()

return (
<>
{[...Array(indent)].map((_, i) => (
<span className="inline-block w-5" key={i} />
))}
</>
)
}

const Folder: React.FC<FolderProps> = React.memo(
({ label, name, open, children, defaultOpen, onToggle }) => {
const indent = useIndent()

const [isOpen, setIsOpen] = useState(defaultOpen || false)

const toggle = useCallback(() => {
onToggle && onToggle(!isOpen)
setIsOpen(!isOpen)
}, [isOpen, onToggle])

const isFolderOpen = typeof open === 'undefined' ? isOpen : open

return (
<li className={cn('flex list-none flex-col', { ['']: isFolderOpen })}>
<a
onClick={toggle}
title={name}
className="inline-flex cursor-pointer items-center py-1 hover:opacity-60"
>
<Ident />
<span className={''}>
{isFolderOpen ? (
<svg width="1em" height="1em" viewBox="0 0 24 24">
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"
></path>
</svg>
) : (
<svg width="1em" height="1em" viewBox="0 0 24 24">
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2Z"
></path>
</svg>
)}
</span>
<span className={'ml-1'}>{label ?? name}</span>
</a>
{isFolderOpen ? (
<ul>
<Provider value={indent + 1}>{children}</Provider>
</ul>
) : null}
</li>
)
}
)

Folder.displayName = 'Folder'

const File: React.FC<FileProps> = React.memo(
({ label, name, active, ...props }) => {
return (
<li
className={cn('flex list-none', {
['nx-text-primary-500 contrast-more:!nx-text-primary-500 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50']:
active
})}
>
<a {...props} className="inline-flex cursor-default items-center py-1">
<Ident />
<span className={''}>
<svg width="1em" height="1em" viewBox="0 0 24 24">
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"
></path>
</svg>
</span>
<span className={'ml-1'}>{label ?? name}</span>
</a>
</li>
)
}
)

File.displayName = 'File'

export { Tree, Folder, File }
22 changes: 22 additions & 0 deletions docs/components/screenshot/index.jsx
@@ -0,0 +1,22 @@
import cn from 'clsx'
import Image from 'next/image'

export function Screenshot({ src, alt, full }) {
return (
<div
className={cn(
'mt-6 -mb-4 flex justify-center overflow-hidden rounded-xl border dark:border-zinc-800',
full ? 'bg-white' : 'bg-zinc-100'
)}
>
<Image
src={src}
alt={alt}
className={cn(
'w-auto select-none bg-white',
full ? '' : 'ring-1 ring-gray-200'
)}
/>
</div>
)
}
14 changes: 14 additions & 0 deletions docs/components/video/index.jsx
@@ -0,0 +1,14 @@
export default function Video({ src }) {
return (
<video
muted
autoPlay
playsInline
loop
controls
className="mt-6 rounded-xl border dark:border-zinc-800"
>
<source src={src} type="video/mp4" />
</video>
)
}
2 changes: 1 addition & 1 deletion docs/pages/docs/_meta.json
Expand Up @@ -7,7 +7,7 @@
},
"docs-theme": "Docs Theme",
"blog-theme": "Blog Theme",
"your-own-theme": "Your Own Theme",
"custom-theme": "Custom Theme",
"-- About --": {
"type": "separator",
"title": "About"
Expand Down
1 change: 1 addition & 0 deletions docs/pages/docs/custom-theme.mdx
@@ -0,0 +1 @@
# Custom Theme
6 changes: 3 additions & 3 deletions docs/pages/docs/docs-theme.mdx
Expand Up @@ -10,9 +10,9 @@ import { Card, Cards } from '@components/card'
} title="Get Started" href="/docs/docs-theme/start">
</Card>
<Card icon={
<svg width="24" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
</svg>
<svg viewBox="0 0 24 24" fill="currentColor" width="24">
<path d="M19.5 21a3 3 0 003-3v-4.5a3 3 0 00-3-3h-15a3 3 0 00-3 3V18a3 3 0 003 3h15zM1.5 10.146V6a3 3 0 013-3h5.379a2.25 2.25 0 011.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 013 3v1.146A4.483 4.483 0 0019.5 9h-15a4.483 4.483 0 00-3 1.146z" />
</svg>
} title="Page Configuration" href="/docs/docs-theme/page-configuration">
</Card>
<Card icon={
Expand Down
6 changes: 4 additions & 2 deletions docs/pages/docs/docs-theme/_meta.json
@@ -1,6 +1,8 @@
{
"start": "Get Started",
"page-configuration": "Page Configuration",
"page-configuration": {
"title": "Page Configuration"
},
"theme-configuration": "Theme Configuration",
"components": "Components"
"api": "API"
}
@@ -1,4 +1,4 @@
# Components
# API

import { Card, Cards } from '@components/card'

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit a1c1e4e

Please sign in to comment.