1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-31 10:51:44 +02:00

docs: convert examples to typescript (#3766)

* docs: convert examples to typescript

* docs: convert remaining examples

* docs: update next.js

* ci: fix lint

* docs: fix next.js path

* docs: cleanup

* update

Co-authored-by: wendellhu <wendellhu@tencent.com>
This commit is contained in:
Wendell Hu
2020-08-20 00:14:51 +08:00
committed by GitHub
parent 7b2b6df215
commit 912d4b79da
30 changed files with 1598 additions and 1028 deletions

11
site/pages/api/index.ts Normal file
View File

@@ -0,0 +1,11 @@
import { readdirSync } from 'fs'
import { join } from 'path'
const examplePath = join(process.cwd(), 'examples')
export function getAllExamples() {
const slugs = readdirSync(examplePath)
return slugs
.filter(name => name.match(/.tsx$/))
.map(n => n.replace(/.tsx$/, ''))
}

View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react'
import React, { useState, PropsWithChildren, Ref } from 'react'
import { cx, css } from 'emotion'
import { useRouter } from 'next/router'
import Head from 'next/head'
import Link from 'next/link'
import dynamic from 'next/dynamic'
@@ -27,6 +26,9 @@ import SearchHighlighting from '../../examples/search-highlighting'
import CodeHighlighting from '../../examples/code-highlighting'
import Tables from '../../examples/tables'
// node
import { getAllExamples } from '../api'
const EXAMPLES = [
['Checklists', CheckLists, 'check-lists'],
['Editable Voids', EditableVoids, 'editable-voids'],
@@ -149,26 +151,39 @@ const TabButton = props => (
/>
)
const Tab = React.forwardRef(({ active, href, ...props }, ref) => (
<a
ref={ref}
href={href}
{...props}
className={css`
display: inline-block;
margin-bottom: 0.2em;
padding: 0.2em 1em;
border-radius: 0.2em;
text-decoration: none;
color: ${active ? 'white' : '#777'};
background: ${active ? '#333' : 'transparent'};
const Tab = React.forwardRef(
(
{
active,
href,
...props
}: PropsWithChildren<{
active: boolean
href: string
[key: string]: unknown
}>,
ref: Ref<HTMLAnchorElement | null>
) => (
<a
ref={ref}
href={href}
{...props}
className={css`
display: inline-block;
margin-bottom: 0.2em;
padding: 0.2em 1em;
border-radius: 0.2em;
text-decoration: none;
color: ${active ? 'white' : '#777'};
background: ${active ? '#333' : 'transparent'};
&:hover {
background: #333;
}
`}
/>
))
&:hover {
background: #333;
}
`}
/>
)
)
const Wrapper = ({ className, ...props }) => (
<div
@@ -233,12 +248,10 @@ const Warning = props => (
/>
)
const ExamplePage = () => {
const [error, setError] = useState()
const [stacktrace, setStacktrace] = useState()
const [showTabs, setShowTabs] = useState()
const router = useRouter()
const { example = router.asPath.replace('/examples/', '') } = router.query
const ExamplePage = ({ example }: { example: string }) => {
const [error, setError] = useState<Error | undefined>()
const [stacktrace, setStacktrace] = useState<string | undefined>()
const [showTabs, setShowTabs] = useState<boolean>()
const EXAMPLE = EXAMPLES.find(e => e[2] === example)
const [name, Component, path] = EXAMPLE
return (
@@ -291,7 +304,7 @@ const ExamplePage = () => {
<TabList isVisible={showTabs}>
{EXAMPLES.map(([n, , p]) => (
<Link
key={p}
key={p as string}
href="/examples/[example]"
as={`/examples/${p}`}
passHref
@@ -331,8 +344,29 @@ const NoSsrExamplePage = dynamic(() => Promise.resolve(ExamplePage), {
ssr: false,
})
NoSsrExamplePage.getInitialProps = () => {
return {}
export async function getStaticPaths() {
const paths = getAllExamples()
return {
paths: paths.map(path => ({
params: {
example: path,
},
})),
fallback: false,
}
}
export async function getStaticProps({
params,
}: {
params: { example: string }
}) {
return {
props: {
example: params.example,
},
}
}
export default NoSsrExamplePage