PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

docs: more cleanup following restructure (#2702)

Browse source 
- add TOC for Reference section
- make external links use _blank to open a new tab
- fix some more /gen links spots I missed, oops
- add a general redirect from old /gen links → /reference
- some more stylistic touchups

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Release Notes

- Docs: further cleanup following restructure.
This commit is contained in:
Mime Čuvalo 2024-02-01 14:16:17 +00:00 committed by GitHub
parent 279abff228
commit 63e3d6dfc9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 308 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

313
apps/docs/api/editor.api.json
View file

@ -21183,6 +21183,99 @@
], ],
"implementsTokenRanges": [] "implementsTokenRanges": []
}, },
{
"kind": "Function",
"canonicalReference": "@tldraw/editor!getArcMeasure:function(1)",
"docComment": "/**\n * Get the measure of an arc.\n *\n * @param A - The angle from center to arc's start point (A) on the circle\n *\n * @param B - The angle from center to arc's end point (B) on the circle\n *\n * @param sweepFlag - 1 if the arc is clockwise, 0 if counter-clockwise\n *\n * @param largeArcFlag - 1 if the arc is greater than 180 degrees, 0 if less than 180 degrees\n *\n * @returns The measure of the arc, negative if counter-clockwise\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function getArcMeasure(A: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", B: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", sweepFlag: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", largeArcFlag: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/editor/src/lib/primitives/utils.ts",
"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 10
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "A",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
},
{
"parameterName": "B",
"parameterTypeTokenRange": {
"startIndex": 3,
"endIndex": 4
},
"isOptional": false
},
{
"parameterName": "sweepFlag",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 6
},
"isOptional": false
},
{
"parameterName": "largeArcFlag",
"parameterTypeTokenRange": {
"startIndex": 7,
"endIndex": 8
},
"isOptional": false
}
],
"name": "getArcMeasure"
},
{ {
"kind": "Function", "kind": "Function",
"canonicalReference": "@tldraw/editor!getArrowTerminalsInArrowSpace:function(1)", "canonicalReference": "@tldraw/editor!getArrowTerminalsInArrowSpace:function(1)",
@ -21898,6 +21991,99 @@
], ],
"name": "getPointerInfo" "name": "getPointerInfo"
}, },
{
"kind": "Function",
"canonicalReference": "@tldraw/editor!getPointInArcT:function(1)",
"docComment": "/**\n * Returns the t value of the point on the arc.\n *\n * @param mAB - The measure of the arc from A to B, negative if counter-clockwise\n *\n * @param A - The angle from center to arc's start point (A) on the circle\n *\n * @param B - The angle from center to arc's end point (B) on the circle\n *\n * @param P - The angle on the circle (P) to find the t value for\n *\n * @returns The t value of the point on the arc, with 0 being the start and 1 being the end\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function getPointInArcT(mAB: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", A: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", B: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ", P: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/editor/src/lib/primitives/utils.ts",
"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 10
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "mAB",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"isOptional": false
},
{
"parameterName": "A",
"parameterTypeTokenRange": {
"startIndex": 3,
"endIndex": 4
},
"isOptional": false
},
{
"parameterName": "B",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 6
},
"isOptional": false
},
{
"parameterName": "P",
"parameterTypeTokenRange": {
"startIndex": 7,
"endIndex": 8
},
"isOptional": false
}
],
"name": "getPointInArcT"
},
{ {
"kind": "Function", "kind": "Function",
"canonicalReference": "@tldraw/editor!getPointOnCircle:function(1)", "canonicalReference": "@tldraw/editor!getPointOnCircle:function(1)",
@ -31338,76 +31524,6 @@
"isProtected": false, "isProtected": false,
"isAbstract": false "isAbstract": false
}, },
{
"kind": "Property",
"canonicalReference": "@tldraw/editor!ShapeUtil#onHandleDragEnd:member",
"docComment": "/**\n * A callback called when a shape starts being dragged.\n *\n * @param shape - The shape.\n *\n * @returns A change to apply to the shape, or void.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "onHandleDragEnd?: "
},
{
"kind": "Reference",
"text": "TLOnHandleDragStartHandler",
"canonicalReference": "@tldraw/editor!TLOnHandleDragStartHandler:type"
},
{
"kind": "Content",
"text": "<Shape>"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "onHandleDragEnd",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"isStatic": false,
"isProtected": false,
"isAbstract": false
},
{
"kind": "Property",
"canonicalReference": "@tldraw/editor!ShapeUtil#onHandleDragStart:member",
"docComment": "/**\n * A callback called when a shape starts being dragged.\n *\n * @param shape - The shape.\n *\n * @returns A change to apply to the shape, or void.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "onHandleDragStart?: "
},
{
"kind": "Reference",
"text": "TLOnHandleDragStartHandler",
"canonicalReference": "@tldraw/editor!TLOnHandleDragStartHandler:type"
},
{
"kind": "Content",
"text": "<Shape>"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "onHandleDragStart",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"isStatic": false,
"isProtected": false,
"isAbstract": false
},
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!ShapeUtil#onResize:member", "canonicalReference": "@tldraw/editor!ShapeUtil#onResize:member",
@ -39551,63 +39667,6 @@
"endIndex": 8 "endIndex": 8
} }
}, },
{
"kind": "TypeAlias",
"canonicalReference": "@tldraw/editor!TLOnHandleDragStartHandler:type",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export type TLOnHandleDragStartHandler<T extends "
},
{
"kind": "Reference",
"text": "TLShape",
"canonicalReference": "@tldraw/tlschema!TLShape:type"
},
{
"kind": "Content",
"text": "> = "
},
{
"kind": "Content",
"text": "(shape: T) => "
},
{
"kind": "Reference",
"text": "TLShapePartial",
"canonicalReference": "@tldraw/tlschema!TLShapePartial:type"
},
{
"kind": "Content",
"text": "<T> | void"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/editor/src/lib/editor/shapes/ShapeUtil.ts",
"releaseTag": "Public",
"name": "TLOnHandleDragStartHandler",
"typeParameters": [
{
"typeParameterName": "T",
"constraintTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"defaultTypeTokenRange": {
"startIndex": 0,
"endIndex": 0
}
}
],
"typeTokenRange": {
"startIndex": 3,
"endIndex": 6
}
},
{ {
"kind": "TypeAlias", "kind": "TypeAlias",
"canonicalReference": "@tldraw/editor!TLOnMountHandler:type", "canonicalReference": "@tldraw/editor!TLOnMountHandler:type",

55
apps/docs/api/tldraw.api.json
View file

@ -1127,50 +1127,6 @@
"isProtected": false, "isProtected": false,
"isAbstract": false "isAbstract": false
}, },
{
"kind": "Property",
"canonicalReference": "@tldraw/tldraw!ArrowShapeUtil#onHandleDragStart:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "onHandleDragStart: "
},
{
"kind": "Reference",
"text": "TLOnHandleDragStartHandler",
"canonicalReference": "@tldraw/editor!TLOnHandleDragStartHandler:type"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "TLArrowShape",
"canonicalReference": "@tldraw/tlschema!TLArrowShape:type"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": false,
"releaseTag": "Public",
"name": "onHandleDragStart",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 5
},
"isStatic": false,
"isProtected": false,
"isAbstract": false
},
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/tldraw!ArrowShapeUtil#onResize:member", "canonicalReference": "@tldraw/tldraw!ArrowShapeUtil#onResize:member",
@ -12681,6 +12637,15 @@
"kind": "Content", "kind": "Content",
"text": " | typeof " "text": " | typeof "
}, },
{
"kind": "Reference",
"text": "PointingArrowLabel",
"canonicalReference": "@tldraw/tldraw!~PointingArrowLabel:class"
},
{
"kind": "Content",
"text": " | typeof "
},
{ {
"kind": "Reference", "kind": "Reference",
"text": "PointingCanvas", "text": "PointingCanvas",
@ -12791,7 +12756,7 @@
"name": "children", "name": "children",
"propertyTypeTokenRange": { "propertyTypeTokenRange": {
"startIndex": 1, "startIndex": 1,
"endIndex": 36 "endIndex": 38
}, },
"isStatic": true, "isStatic": true,
"isProtected": false, "isProtected": false,

54
apps/docs/api/tlschema.api.json
View file

@ -6027,33 +6027,6 @@
"endIndex": 2 "endIndex": 2
} }
}, },
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tlschema!TLHandle#h:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "h?: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "h",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{ {
"kind": "PropertySignature", "kind": "PropertySignature",
"canonicalReference": "@tldraw/tlschema!TLHandle#id:member", "canonicalReference": "@tldraw/tlschema!TLHandle#id:member",
@ -6136,33 +6109,6 @@
"endIndex": 2 "endIndex": 2
} }
}, },
{
"kind": "PropertySignature",
"canonicalReference": "@tldraw/tlschema!TLHandle#w:member",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "w?: "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isReadonly": false,
"isOptional": true,
"releaseTag": "Public",
"name": "w",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
}
},
{ {
"kind": "PropertySignature", "kind": "PropertySignature",
"canonicalReference": "@tldraw/tlschema!TLHandle#x:member", "canonicalReference": "@tldraw/tlschema!TLHandle#x:member",

27
apps/docs/components/Sidebar.tsx
View file

@ -1,6 +1,7 @@
'use client' 'use client'
import { import {
APIGroup,
ArticleHeadings, ArticleHeadings,
SidebarContentArticleLink, SidebarContentArticleLink,
SidebarContentCategoryLink, SidebarContentCategoryLink,
@ -43,7 +44,7 @@ export function Sidebar({
useEffect(() => { useEffect(() => {
document.body.classList.remove('sidebar-open') document.body.classList.remove('sidebar-open')
document.querySelector('.sidebar [data-active=true]')?.scrollIntoView({ block: 'center' }) document.querySelector('.sidebar__nav [data-active=true]')?.scrollIntoView({ block: 'center' })
// XXX(mime): scrolling the sidebar into position also scrolls the page to the wrong // XXX(mime): scrolling the sidebar into position also scrolls the page to the wrong
// spot. this compensates for that but, ugh. // spot. this compensates for that but, ugh.
@ -94,7 +95,7 @@ function SidebarLink({ headings, ...props }: SidebarContentLink & { headings?: A
return <SidebarArticle headings={headings} {...props} /> return <SidebarArticle headings={headings} {...props} />
} }
case 'category': { case 'category': {
return <SidebarCategory {...props} /> return <SidebarCategory headings={headings} {...props} />
} }
} }
} }
@ -118,7 +119,11 @@ function SidebarSection({
) )
} }
function SidebarCategory({ title, children }: SidebarContentCategoryLink) { function SidebarCategory({
title,
children,
headings,
}: SidebarContentCategoryLink & { headings?: ArticleHeadings }) {
const linkCtx = useContext(linkContext) const linkCtx = useContext(linkContext)
if (children.length === 0) return null if (children.length === 0) return null
const hasGroups = children.some((child) => !!(child as SidebarContentArticleLink).groupId) const hasGroups = children.some((child) => !!(child as SidebarContentArticleLink).groupId)
@ -126,7 +131,7 @@ function SidebarCategory({ title, children }: SidebarContentCategoryLink) {
(child) => (child as SidebarContentArticleLink).articleId === linkCtx?.articleId (child) => (child as SidebarContentArticleLink).articleId === linkCtx?.articleId
) )
const activeGroup = activeArticle && (activeArticle as SidebarContentArticleLink).groupId const activeGroup = activeArticle && (activeArticle as SidebarContentArticleLink).groupId
const groups = ['Class', 'Function', 'Variable', 'Interface', 'Enum', 'TypeAlias', 'Namespace'] const groups = Object.values(APIGroup)
return ( return (
<li className="sidebar__category"> <li className="sidebar__category">
@ -156,9 +161,9 @@ function SidebarCategory({ title, children }: SidebarContentCategoryLink) {
<Chevron /> <Chevron />
</Accordion.Trigger> </Accordion.Trigger>
<Accordion.Content> <Accordion.Content>
<ul className="sidebar__list" style={{ paddingLeft: '8px' }}> <ul className="sidebar__list sidebar__group" style={{ paddingLeft: '8px' }}>
{articles.map((link) => ( {articles.map((link) => (
<SidebarLink key={link.url} {...link} /> <SidebarLink key={link.url} headings={headings} {...link} />
))} ))}
</ul> </ul>
</Accordion.Content> </Accordion.Content>
@ -190,7 +195,8 @@ function SidebarArticle({
articleId, articleId,
headings, headings,
}: SidebarContentArticleLink & { headings?: ArticleHeadings }) { }: SidebarContentArticleLink & { headings?: ArticleHeadings }) {
const isActive = useContext(linkContext)?.activeId === articleId const activeLink = useContext(linkContext)
const isActive = activeLink?.activeId === articleId
return ( return (
<li className="sidebar__article"> <li className="sidebar__article">
@ -201,9 +207,12 @@ function SidebarArticle({
{isActive && ( {isActive && (
<ul className="sidebar__list"> <ul className="sidebar__list">
{headings {headings
?.filter((heading) => heading.level < 3) ?.filter((heading) => heading.level < 4)
.map((heading) => ( .map((heading) => (
<li key={heading.slug}> <li
key={heading.slug}
data-heading-level={heading.title === 'Constructor' ? 2 : heading.level}
>
<Link href={`#${heading.slug}`} className="sidebar__link"> <Link href={`#${heading.slug}`} className="sidebar__link">
{heading.isCode ? ( {heading.isCode ? (
<code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code> <code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code>

16
apps/docs/components/mdx-components/generic.tsx
View file

@ -62,7 +62,21 @@ export const Paragraph = (props: any) => {
} }
export const A = (props: any) => { export const A = (props: any) => {
return <a {...props} /> const isLocalUrl = props.href.startsWith('/') || props.href.startsWith('#')
let maybeParsedUrl
try {
maybeParsedUrl = isLocalUrl ? null : new URL(props.href)
} catch (e) {
console.error(`Invalid URL: ${props.href}`)
}
const derivedTarget =
isLocalUrl ||
maybeParsedUrl?.host.includes('tldraw.com') ||
maybeParsedUrl?.host.includes('localhost')
? undefined
: '_blank'
const target = props.target ?? derivedTarget
return <a {...props} target={target} />
} }
export const Divider = (props: any) => { export const Divider = (props: any) => {

2
apps/docs/content/docs/editor.mdx
View file

@ -122,7 +122,7 @@ editor.bailToMark('first') // will return to A
The [Editor](?) class receives events from its [Editor#dispatch](?) method. When the [Editor](?) receives an event, it is first handled internally to update [Editor#inputs](?) and other state before, and then sent into to the editor's state chart. The [Editor](?) class receives events from its [Editor#dispatch](?) method. When the [Editor](?) receives an event, it is first handled internally to update [Editor#inputs](?) and other state before, and then sent into to the editor's state chart.
You shouldn't need to use the [Editor#dispatch](?) method directly, however you may write code in the state chart that responds to these events. See the [Tools page](tools) to learn how to do that, or read below for a more detailed information about the state chart itself. You shouldn't need to use the [Editor#dispatch](?) method directly, however you may write code in the state chart that responds to these events. See the [Tools page](/docs/tools) to learn how to do that, or read below for a more detailed information about the state chart itself.
### State Chart ### State Chart

40
apps/docs/content/sections.json
View file

@ -30,10 +30,6 @@
"title": "@tldraw/editor", "title": "@tldraw/editor",
"description": "", "description": "",
"groups": [ "groups": [
{
"id": "Namespace",
"path": null
},
{ {
"id": "Class", "id": "Class",
"path": null "path": null
@ -57,6 +53,10 @@
{ {
"id": "TypeAlias", "id": "TypeAlias",
"path": null "path": null
},
{
"id": "Namespace",
"path": null
} }
] ]
}, },
@ -65,10 +65,6 @@
"title": "@tldraw/store", "title": "@tldraw/store",
"description": "", "description": "",
"groups": [ "groups": [
{
"id": "Namespace",
"path": null
},
{ {
"id": "Class", "id": "Class",
"path": null "path": null
@ -92,6 +88,10 @@
{ {
"id": "TypeAlias", "id": "TypeAlias",
"path": null "path": null
},
{
"id": "Namespace",
"path": null
} }
] ]
}, },
@ -100,10 +100,6 @@
"title": "@tldraw/tldraw", "title": "@tldraw/tldraw",
"description": "", "description": "",
"groups": [ "groups": [
{
"id": "Namespace",
"path": null
},
{ {
"id": "Class", "id": "Class",
"path": null "path": null
@ -127,6 +123,10 @@
{ {
"id": "TypeAlias", "id": "TypeAlias",
"path": null "path": null
},
{
"id": "Namespace",
"path": null
} }
] ]
}, },
@ -135,10 +135,6 @@
"title": "@tldraw/tlschema", "title": "@tldraw/tlschema",
"description": "", "description": "",
"groups": [ "groups": [
{
"id": "Namespace",
"path": null
},
{ {
"id": "Class", "id": "Class",
"path": null "path": null
@ -162,6 +158,10 @@
{ {
"id": "TypeAlias", "id": "TypeAlias",
"path": null "path": null
},
{
"id": "Namespace",
"path": null
} }
] ]
}, },
@ -170,10 +170,6 @@
"title": "@tldraw/validate", "title": "@tldraw/validate",
"description": "", "description": "",
"groups": [ "groups": [
{
"id": "Namespace",
"path": null
},
{ {
"id": "Class", "id": "Class",
"path": null "path": null
@ -197,6 +193,10 @@
{ {
"id": "TypeAlias", "id": "TypeAlias",
"path": null "path": null
},
{
"id": "Namespace",
"path": null
} }
] ]
} }

6
apps/docs/next.config.js
View file

@ -57,6 +57,12 @@ const nextConfig = {
destination: '/reference/editor/ShapeUtil', destination: '/reference/editor/ShapeUtil',
permanent: true, permanent: true,
}, },
{
// For reverse compatibility with old links
source: '/gen/:slug*',
destination: '/reference/:slug*',
permanent: true,
},
] ]
}, },
} }

12
apps/docs/scripts/functions/createApiMarkdown.ts
View file

@ -1,4 +1,4 @@
import { InputSection } from '@/types/content-types' import { APIGroup, InputSection } from '@/types/content-types'
import { nicelog } from '@/utils/nicelog' import { nicelog } from '@/utils/nicelog'
import { ApiModel } from '@microsoft/api-extractor-model' import { ApiModel } from '@microsoft/api-extractor-model'
import fs from 'fs' import fs from 'fs'
@ -51,15 +51,7 @@ export async function createApiMarkdown() {
id: categoryName, id: categoryName,
title: packageModel.name, title: packageModel.name,
description: '', description: '',
groups: [ groups: Object.values(APIGroup).map((title) => ({
'Namespace',
'Class',
'Function',
'Variable',
'Enum',
'Interface',
'TypeAlias',
].map((title) => ({
id: title, id: title,
path: null, path: null,
})), })),

2
apps/docs/scripts/functions/getApiMarkdown.ts
View file

@ -111,7 +111,7 @@ export async function getApiMarkdown(categoryName: string, item: ApiItem, j: num
await addFrontmatter(result, item, categoryName, j) await addFrontmatter(result, item, categoryName, j)
if (toc.markdown.length) { if (toc.markdown.length) {
result.markdown += `<details class="article__table-of-contents">\n\t<summary>Table of contents</summary>\n` result.markdown += `<details className="article__table-of-contents">\n\t<summary>Table of contents</summary>\n`
addMarkdown(result, toc.markdown) addMarkdown(result, toc.markdown)
result.markdown += `</details>\n\n` result.markdown += `</details>\n\n`
} }

52
apps/docs/styles/globals.css
View file

@ -42,6 +42,9 @@
--hl-6: rgb(179, 108, 50); --hl-6: rgb(179, 108, 50);
--hl-7: rgb(73, 131, 216); --hl-7: rgb(73, 131, 216);
--hl-8: rgb(180, 133, 64); --hl-8: rgb(180, 133, 64);
/* Shape */
--border-radius-menu: 4px;
} }
[data-theme='dark'] { [data-theme='dark'] {
@ -162,7 +165,7 @@ body {
background-color: transparent; background-color: transparent;
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s; transition-delay: 0.1s;
border-radius: 4px; border-radius: var(--border-radius-menu);
} }
.layout_header__section[data-active='true'] { .layout_header__section[data-active='true'] {
@ -196,7 +199,7 @@ body {
content: ''; content: '';
inset: 0; inset: 0;
background-color: var(--bg); background-color: var(--bg);
border-radius: 4px; border-radius: var(--border-radius-menu);
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
transition-delay: 0s; transition-delay: 0s;
} }
@ -291,7 +294,7 @@ body {
gap: 8px; gap: 8px;
border: 1px solid var(--color-accent); border: 1px solid var(--color-accent);
padding: 10px 16px; padding: 10px 16px;
border-radius: 4px; border-radius: var(--border-radius-menu);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -463,7 +466,7 @@ body {
margin: 32px 0px; margin: 32px 0px;
padding: 16px; padding: 16px;
background-color: var(--color-tint-0); background-color: var(--color-tint-0);
border-radius: 4px; border-radius: var(--border-radius-menu);
font-size: 13px; font-size: 13px;
overflow-x: auto; overflow-x: auto;
} }
@ -487,7 +490,7 @@ body {
font-weight: 500; font-weight: 500;
padding: 2px 5px; padding: 2px 5px;
margin: 0px -2px; margin: 0px -2px;
border-radius: 4px; border-radius: var(--border-radius-menu);
} }
.article pre > code { .article pre > code {
@ -525,7 +528,7 @@ body {
.article table { .article table {
margin: 20px 0px; margin: 20px 0px;
border-radius: 4px; border-radius: var(--border-radius-menu);
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
text-align: left; text-align: left;
@ -568,7 +571,7 @@ body {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: 4px; border-radius: var(--border-radius-menu);
border: 1px solid var(--color-tint-2); border: 1px solid var(--color-tint-2);
} }
@ -586,7 +589,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
border-radius: 4px; border-radius: var(--border-radius-menu);
border: 1px solid var(--color-tint-2); border: 1px solid var(--color-tint-2);
} }
@ -682,7 +685,7 @@ body {
height: 28px; height: 28px;
margin: 2px; margin: 2px;
position: relative; position: relative;
border-radius: 4px; border-radius: var(--border-radius-menu);
background-color: var(--hl-1); background-color: var(--hl-1);
} }
@ -771,6 +774,7 @@ body {
max-height: calc(100vh); max-height: calc(100vh);
z-index: 800; z-index: 800;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
font-size: 14px; font-size: 14px;
} }
@ -802,16 +806,36 @@ body {
.sidebar__list li .sidebar__article, .sidebar__list li .sidebar__article,
.sidebar__list li .sidebar__article li { .sidebar__list li .sidebar__article li {
margin-top: -6px; margin-top: -6px;
margin-bottom: -6px;
width: 100%; width: 100%;
} }
.sidebar__list li .sidebar__article:not(:last-of-type),
.sidebar__list li .sidebar__article lie:not(:last-of-type) {
margin-bottom: -6px;
}
.sidebar__list li .sidebar__category li a, .sidebar__list li .sidebar__category li a,
.sidebar__list li .sidebar__article li a { .sidebar__list li .sidebar__article li a {
padding-left: 8px; padding-left: 8px;
font-size: 13px; font-size: 13px;
} }
.sidebar__list li .sidebar__category li[data-heading-level="3"] a,
.sidebar__list li .sidebar__article li[data-heading-level="3"] a {
padding-left: 16px;
}
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="2"] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="2"] a {
padding-left: 16px;
color: var(--color-text-secondary);
}
.sidebar__list li .sidebar__category .sidebar__group li[data-heading-level="3"] a,
.sidebar__list li .sidebar__article .sidebar__group li[data-heading-level="3"] a {
padding-left: 24px;
}
.sidebar__link { .sidebar__link {
position: relative; position: relative;
padding: 6px 0; padding: 6px 0;
@ -850,7 +874,7 @@ body {
left: -8px; left: -8px;
right: -8px; right: -8px;
background-color: var(--bg); background-color: var(--bg);
border-radius: 4px; border-radius: var(--border-radius-menu);
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
transition-delay: 0s; transition-delay: 0s;
} }
@ -973,7 +997,7 @@ body {
padding-left: 20px; padding-left: 20px;
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius: 4px; border-radius: var(--border-radius-menu);
border: none; border: none;
background-color: var(--color-background); background-color: var(--color-background);
font-family: var(--font-body); font-family: var(--font-body);
@ -1354,7 +1378,7 @@ html[data-theme='light'] .hero__dark {
background-color: transparent; background-color: transparent;
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
transition-delay: 0.1s; transition-delay: 0.1s;
border-radius: 4px; border-radius: var(--border-radius-menu);
margin: 0 4px; margin: 0 4px;
padding: 8px 12px; padding: 8px 12px;
height: 44px; height: 44px;
@ -1381,7 +1405,7 @@ html[data-theme='light'] .hero__dark {
top: calc(100% + 4px); top: calc(100% + 4px);
left: 4px; left: 4px;
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: var(--border-radius-menu);
background-color: var(--color-background); background-color: var(--color-background);
box-shadow: var(--shadow-small); box-shadow: var(--shadow-small);
} }

10
apps/docs/types/content-types.ts
View file

@ -116,6 +116,16 @@ export enum ArticleStatus {
Unlisted = 'unlisted', Unlisted = 'unlisted',
} }
export enum APIGroup {
Class = 'Class',
Function = 'Function',
Variable = 'Variable',
Enum = 'Enum',
Interface = 'Interface',
TypeAlias = 'TypeAlias',
Namespace = 'Namespace',
}
/* ---------------- Article Headings ---------------- */ /* ---------------- Article Headings ---------------- */
export interface ArticleHeading { export interface ArticleHeading {

3
apps/docs/utils/ContentDatabase.ts
View file

@ -276,8 +276,7 @@ export class ContentDatabase {
// Cache the links structure for next time // Cache the links structure for next time
if (sectionId === 'examples') { if (sectionId === 'examples') {
this._sidebarExamplesContentLinks = links this._sidebarExamplesContentLinks = links
} } else if (sectionId === 'reference') {
if (sectionId === 'reference') {
this._sidebarReferenceContentLinks = links this._sidebarReferenceContentLinks = links
} else { } else {
this._sidebarContentLinks = links this._sidebarContentLinks = links