jacob-mathison/tuono
1
0
Fork 0
mirror of https://github.com/tuono-labs/tuono synced 2026-07-25 12:52:47 -07:00
Code Issues Packages Projects Releases Wiki Activity

docs: move from bullet points to tables for reference docs (#352)

Browse Source 
Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>
This commit is contained in:
Jacob Marshall
2025-01-16 17:42:37 +00:00
committed by GitHub
parent 11c6fc820b
commit b19512dffc
8 changed files with 266 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/documentation/package.json
+1
View File
@@ -19,6 +19,7 @@
"clsx": "2.1.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"remark-gfm": "4.0.0",
"tuono": "npm:tuono@0.16.9"
},
"devDependencies": {
apps/documentation/src/components/MdxProvider/MdxProvider.tsx
+7
View File
@@ -7,6 +7,7 @@ import MdxQuote from './MdxQuote'
import MdxCode from './MdxCode'
import { h } from './MdxTitle'
import MdxBold from './MdxBold'
import MdxTable from './MdxTable'
interface MdxProviderProps {
children: ReactNode
@@ -30,6 +31,12 @@ export default function MdxProvider({
h5: h(5),
h6: h(6),
strong: MdxBold,
table: MdxTable,
thead: MdxTable.Thead,
tbody: MdxTable.Tbody,
tr: MdxTable.Tr,
th: MdxTable.Th,
td: MdxTable.Td,
}}
>
{children}
apps/documentation/src/components/MdxProvider/MdxTable/MdxTable.tsx
+26
View File
@@ -0,0 +1,26 @@
import type { DetailedHTMLProps, TableHTMLAttributes } from 'react'
import { Table } from '@mantine/core'
import type React from 'react'
type MdxTableProps = DetailedHTMLProps<
TableHTMLAttributes<HTMLTableElement>,
HTMLTableElement
>
function MdxTable(props: MdxTableProps): React.JSX.Element {
const { children, ...rest } = props
return (
<Table highlightOnHover stickyHeader stickyHeaderOffset={60} {...rest}>
{children}
</Table>
)
}
MdxTable.Thead = Table.Thead
MdxTable.Tbody = Table.Tbody
MdxTable.Tr = Table.Tr
MdxTable.Th = Table.Th
MdxTable.Td = Table.Td
MdxTable.Caption = Table.Caption
export default MdxTable
apps/documentation/src/components/MdxProvider/MdxTable/index.ts
+3
View File
@@ -0,0 +1,3 @@
import MdxTable from './MdxTable'
export default MdxTable
apps/documentation/src/routes/documentation/components/link.mdx
+5 -3
View File
@@ -32,6 +32,8 @@ For navigating to pages outside of your app (other websites), you should use the
The `Link` component behaves similarly to the `<a>` HTML tag, with a few additional features controlled by the following props:
- `href`: `string` (Required) - Relative path to the page in your application. Anchor names (links with hashtags) are also valid.
- `preload`: `boolean` (Defaults to `true`) - Whether to preload the page if the link is within the viewport.
- `scroll`: `boolean` (Defaults to `true`) - Whether to preserve scroll position between navigations.
| Prop | Type | Default value | Description |
| --------- | ------------------- | ------------- | ------------------------------------------------------------------------------------------------- |
| `href` | `string` (Required) | - | Relative path to the page in your application. Anchor names (links with hashtags) are also valid. |
| `preload` | `boolean` | `true` | Whether to preload the page if the link is within the viewport. |
| `scroll` | `boolean` | `true` | Whether to preserve scroll position between navigations. |
apps/documentation/src/routes/documentation/hooks/use-router.mdx
+15 -8
View File
@@ -7,22 +7,27 @@ import MetaTags from '@/components/MetaTags'
import Breadcrumbs from '@/components/Breadcrumbs'
<Breadcrumbs breadcrumbs={[{ label: 'Hooks' }]} />
<Breadcrumbs breadcrumbs={[{ label: 'useRouter' }]} />
# useRouter
The `useRouter` hook provides access to various data about the current route, as well as methods to navigate between pages, as seen in the below example:
```typescript jsx
```tsx
import { JSX } from 'react'
import { useRouter } from 'tuono'
export default function IndexPage() {
export default function IndexPage(): JSX.Element {
const router = useRouter()
return (
<>
<p>pathname: {router.pathname}</p>
<button onClick={() => router.push("/foo")}>
<button
onClick={() => {
router.push('/foo')
}}
>
My link
</button>
</>
@@ -30,7 +35,7 @@ export default function IndexPage() {
}
```
## `router` object
## `useRouter` result
- `pathname`: `string` - Returns the current path name
- `query`: `Record<string, string>` - This object contains all the query params of the current route
@@ -45,6 +50,8 @@ Handles client side page navigation quickly. Useful for internal links, or for w
router.push(path, options)
```
- `path`: `string` - The path of the page you want to navigate to
- `options`: `PushOptions` - Optional config object for additional control
- `scroll`: `boolean` - If `false` the scroll offset will be kept across page navigation. Default `true`
| Prop | Type | Default value | Description |
| ---------------- | ------------------- | ------------- | ----------------------------------------------------------------- |
| `path` | `string` (Required) | - | The path of the page you want to navigate to. |
| `options` | `PushOptions` | - | Optional config object for additional control. |
| `options.scroll` | `boolean` | `true` | If `false` the scroll offset will be kept across page navigation. |
apps/documentation/tuono.config.ts
+8 -1
View File
@@ -1,5 +1,6 @@
import type { TuonoConfig } from 'tuono/config'
import mdx from '@mdx-js/rollup'
import remarkGfm from 'remark-gfm'
const config: TuonoConfig = {
vite: {
@@ -8,7 +9,13 @@ const config: TuonoConfig = {
'@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
},
plugins: [
{ enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
{
enforce: 'pre',
...mdx({
providerImportSource: '@mdx-js/react',
remarkPlugins: [remarkGfm],
}),
},
],
},
}
pnpm-lock.yaml
Generated
+201
View File
@@ -68,6 +68,9 @@ importers:
react-dom:
specifier: 18.3.1
version: 18.3.1(react@18.3.1)
remark-gfm:
specifier: 4.0.0
version: 4.0.0
tuono:
specifier: npm:tuono@0.16.9
version: 0.16.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.25.0)(sugarss@4.0.1(postcss@8.5.0))
@@ -1591,6 +1594,10 @@ packages:
resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
engines: {node: '>=10'}
escape-string-regexp@5.0.0:
resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
engines: {node: '>=12'}
eslint-import-resolver-node@0.3.9:
resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
@@ -2270,13 +2277,37 @@ packages:
resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
engines: {node: '>=16'}
markdown-table@3.0.4:
resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
math-intrinsics@1.1.0:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
mdast-util-find-and-replace@3.0.2:
resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
mdast-util-from-markdown@2.0.2:
resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
mdast-util-gfm-autolink-literal@2.0.1:
resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
mdast-util-gfm-footnote@2.0.0:
resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==}
mdast-util-gfm-strikethrough@2.0.0:
resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
mdast-util-gfm-table@2.0.0:
resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
mdast-util-gfm-task-list-item@2.0.0:
resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
mdast-util-gfm@3.0.0:
resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==}
mdast-util-mdx-expression@2.0.1:
resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
@@ -2312,6 +2343,27 @@ packages:
micromark-core-commonmark@2.0.2:
resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
micromark-extension-gfm-autolink-literal@2.1.0:
resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
micromark-extension-gfm-footnote@2.1.0:
resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
micromark-extension-gfm-strikethrough@2.1.0:
resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
micromark-extension-gfm-table@2.1.0:
resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==}
micromark-extension-gfm-tagfilter@2.0.0:
resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
micromark-extension-gfm-task-list-item@2.1.0:
resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
micromark-extension-gfm@3.0.0:
resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
micromark-extension-mdx-expression@3.0.0:
resolution: {integrity: sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==}
@@ -2755,6 +2807,9 @@ packages:
rehype-recma@1.0.0:
resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
remark-gfm@4.0.0:
resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
remark-mdx@3.1.0:
resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
@@ -2764,6 +2819,9 @@ packages:
remark-rehype@11.1.1:
resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
remark-stringify@11.0.0:
resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
resolve-dir@1.0.1:
resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
engines: {node: '>=0.10.0'}
@@ -4972,6 +5030,8 @@ snapshots:
escape-string-regexp@4.0.0: {}
escape-string-regexp@5.0.0: {}
eslint-import-resolver-node@0.3.9:
dependencies:
debug: 3.2.7
@@ -5767,8 +5827,17 @@ snapshots:
markdown-extensions@2.0.0: {}
markdown-table@3.0.4: {}
math-intrinsics@1.1.0: {}
mdast-util-find-and-replace@3.0.2:
dependencies:
'@types/mdast': 4.0.4
escape-string-regexp: 5.0.0
unist-util-is: 6.0.0
unist-util-visit-parents: 6.0.1
mdast-util-from-markdown@2.0.2:
dependencies:
'@types/mdast': 4.0.4
@@ -5786,6 +5855,63 @@ snapshots:
transitivePeerDependencies:
- supports-color
mdast-util-gfm-autolink-literal@2.0.1:
dependencies:
'@types/mdast': 4.0.4
ccount: 2.0.1
devlop: 1.1.0
mdast-util-find-and-replace: 3.0.2
micromark-util-character: 2.1.1
mdast-util-gfm-footnote@2.0.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
mdast-util-from-markdown: 2.0.2
mdast-util-to-markdown: 2.1.2
micromark-util-normalize-identifier: 2.0.1
transitivePeerDependencies:
- supports-color
mdast-util-gfm-strikethrough@2.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-from-markdown: 2.0.2
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm-table@2.0.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
markdown-table: 3.0.4
mdast-util-from-markdown: 2.0.2
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm-task-list-item@2.0.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
mdast-util-from-markdown: 2.0.2
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm@3.0.0:
dependencies:
mdast-util-from-markdown: 2.0.2
mdast-util-gfm-autolink-literal: 2.0.1
mdast-util-gfm-footnote: 2.0.0
mdast-util-gfm-strikethrough: 2.0.0
mdast-util-gfm-table: 2.0.0
mdast-util-gfm-task-list-item: 2.0.0
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-mdx-expression@2.0.1:
dependencies:
'@types/estree-jsx': 1.0.5
@@ -5891,6 +6017,64 @@ snapshots:
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm-autolink-literal@2.1.0:
dependencies:
micromark-util-character: 2.1.1
micromark-util-sanitize-uri: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm-footnote@2.1.0:
dependencies:
devlop: 1.1.0
micromark-core-commonmark: 2.0.2
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-normalize-identifier: 2.0.1
micromark-util-sanitize-uri: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm-strikethrough@2.1.0:
dependencies:
devlop: 1.1.0
micromark-util-chunked: 2.0.1
micromark-util-classify-character: 2.0.1
micromark-util-resolve-all: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm-table@2.1.0:
dependencies:
devlop: 1.1.0
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm-tagfilter@2.0.0:
dependencies:
micromark-util-types: 2.0.1
micromark-extension-gfm-task-list-item@2.1.0:
dependencies:
devlop: 1.1.0
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-gfm@3.0.0:
dependencies:
micromark-extension-gfm-autolink-literal: 2.1.0
micromark-extension-gfm-footnote: 2.1.0
micromark-extension-gfm-strikethrough: 2.1.0
micromark-extension-gfm-table: 2.1.0
micromark-extension-gfm-tagfilter: 2.0.0
micromark-extension-gfm-task-list-item: 2.1.0
micromark-util-combine-extensions: 2.0.1
micromark-util-types: 2.0.1
micromark-extension-mdx-expression@3.0.0:
dependencies:
'@types/estree': 1.0.6
@@ -6465,6 +6649,17 @@ snapshots:
transitivePeerDependencies:
- supports-color
remark-gfm@4.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-gfm: 3.0.0
micromark-extension-gfm: 3.0.0
remark-parse: 11.0.0
remark-stringify: 11.0.0
unified: 11.0.5
transitivePeerDependencies:
- supports-color
remark-mdx@3.1.0:
dependencies:
mdast-util-mdx: 3.0.0
@@ -6489,6 +6684,12 @@ snapshots:
unified: 11.0.5
vfile: 6.0.3
remark-stringify@11.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-to-markdown: 2.1.2
unified: 11.0.5
resolve-dir@1.0.1:
dependencies:
expand-tilde: 2.0.2