9a6f4e8c4b
This PR incorporates design tweaks from #2922 without the home page or content changes. These are: - Replacing all `hello@tldraw.com` with `sales@tldraw.com` - Fix mailto links. - Showing the first item in a section on direct routes to the section - Splitting the article page for human-written content from article page for generated content - Splitting the layout for the landing page from the rest of the site (temporarily identical to the regular content) - Removing headings from left sidebar - Restoring headings in right sidebar for human-written pages with > 1 heading link - Styling block quote - Adjusting section link appearance / layout in header / menu - Changing the order of search results to preference docs over examples - Updating copy on events - Removing copy on user interface menus - Adding hero as prop to all articles - Updated icon - Fixing a few broken links - Replaces the sandpack code blocks with hljs code blocks, except in examples. ### Change Type - [x] `documentation` — Changes to the documentation only[^2]
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
/* eslint-disable no-useless-escape */
|
||
import { Article, ArticleHeading, ArticleHeadings } from '@/types/content-types'
|
||
import Link from 'next/link'
|
||
|
||
export function ArticleHeadingLinks({
|
||
headingLinks,
|
||
}: {
|
||
article: Article
|
||
headingLinks: ArticleHeadings
|
||
}) {
|
||
const linksToShow = headingLinks.filter((heading) => heading.level < 4)
|
||
|
||
if (linksToShow.length <= 1) return null
|
||
|
||
return (
|
||
<nav className="layout__headings">
|
||
<ul className="sidebar__list sidebar__sections__list">
|
||
<li className="sidebar__section">
|
||
<div className="sidebar__section__title uppercase_title">On this page</div>
|
||
<ul className="sidebar__list">
|
||
{linksToShow.map((heading) => (
|
||
<HeaderLink key={heading.slug} heading={heading} />
|
||
))}
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
)
|
||
}
|
||
|
||
function HeaderLink({ heading }: { heading: ArticleHeading }) {
|
||
return (
|
||
<li className="sidebar__article">
|
||
<Link href={`#${heading.slug}`} className="sidebar__link">
|
||
{heading.level > 2 ? <span className="sidebar__link__indent">{'–'}</span> : null}
|
||
<span className="sidebar__link__title">
|
||
{heading.isCode ? (
|
||
<code>{heading.title.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')}</code>
|
||
) : (
|
||
heading.title.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
|
||
)}
|
||
</span>
|
||
</Link>
|
||
</li>
|
||
)
|
||
}
|