docs: more cleanup following restructure (#2702)

- 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

View file

@ -21183,6 +21183,99 @@
],
"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",
"canonicalReference": "@tldraw/editor!getArrowTerminalsInArrowSpace:function(1)",
@ -21898,6 +21991,99 @@
],
"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",
"canonicalReference": "@tldraw/editor!getPointOnCircle:function(1)",
@ -31338,76 +31524,6 @@
"isProtected": 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",
"canonicalReference": "@tldraw/editor!ShapeUtil#onResize:member",
@ -39551,63 +39667,6 @@
"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",
"canonicalReference": "@tldraw/editor!TLOnMountHandler:type",

View file

@ -1127,50 +1127,6 @@
"isProtected": 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",
"canonicalReference": "@tldraw/tldraw!ArrowShapeUtil#onResize:member",
@ -12681,6 +12637,15 @@
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "PointingArrowLabel",
"canonicalReference": "@tldraw/tldraw!~PointingArrowLabel:class"
},
{
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "PointingCanvas",
@ -12791,7 +12756,7 @@
"name": "children",
"propertyTypeTokenRange": {
"startIndex": 1,
"endIndex": 36
"endIndex": 38
},
"isStatic": true,
"isProtected": false,

View file

@ -6027,33 +6027,6 @@
"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",
"canonicalReference": "@tldraw/tlschema!TLHandle#id:member",
@ -6136,33 +6109,6 @@
"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",
"canonicalReference": "@tldraw/tlschema!TLHandle#x:member",

View file

@ -1,6 +1,7 @@
'use client'
import {
APIGroup,
ArticleHeadings,
SidebarContentArticleLink,
SidebarContentCategoryLink,
@ -43,7 +44,7 @@ export function Sidebar({
useEffect(() => {
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
// spot. this compensates for that but, ugh.
@ -94,7 +95,7 @@ function SidebarLink({ headings, ...props }: SidebarContentLink & { headings?: A
return <SidebarArticle headings={headings} {...props} />
}
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)
if (children.length === 0) return null
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
)
const activeGroup = activeArticle && (activeArticle as SidebarContentArticleLink).groupId
const groups = ['Class', 'Function', 'Variable', 'Interface', 'Enum', 'TypeAlias', 'Namespace']
const groups = Object.values(APIGroup)
return (
<li className="sidebar__category">
@ -156,9 +161,9 @@ function SidebarCategory({ title, children }: SidebarContentCategoryLink) {
<Chevron />
</Accordion.Trigger>
<Accordion.Content>
<ul className="sidebar__list" style={{ paddingLeft: '8px' }}>
<ul className="sidebar__list sidebar__group" style={{ paddingLeft: '8px' }}>
{articles.map((link) => (
<SidebarLink key={link.url} {...link} />
<SidebarLink key={link.url} headings={headings} {...link} />
))}
</ul>
</Accordion.Content>
@ -190,7 +195,8 @@ function SidebarArticle({
articleId,
headings,
}: SidebarContentArticleLink & { headings?: ArticleHeadings }) {
const isActive = useContext(linkContext)?.activeId === articleId
const activeLink = useContext(linkContext)
const isActive = activeLink?.activeId === articleId
return (
<li className="sidebar__article">
@ -201,9 +207,12 @@ function SidebarArticle({
{isActive && (
<ul className="sidebar__list">
{headings
?.filter((heading) => heading.level < 3)
?.filter((heading) => heading.level < 4)
.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">
{heading.isCode ? (
<code>{heading.title.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')}</code>

View file

@ -62,7 +62,21 @@ export const Paragraph = (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) => {

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.
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

View file

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

View file

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

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

View file

@ -111,7 +111,7 @@ export async function getApiMarkdown(categoryName: string, item: ApiItem, j: num
await addFrontmatter(result, item, categoryName, j)
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)
result.markdown += `</details>\n\n`
}

View file

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

View file

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

View file

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