3ae48af67c
This PR starts putting in place the high-level changes we want to make to the docs site. - It makes separate sections for Reference and Examples and Community. - Gets rid of the secondary sidebar and integrates it into the main sidebar. - Groups the reference articles by type. - Pulls in the examples alongside code and a live playground so people don't have to visit examples.tldraw.com separately. <img width="1458" alt="Screenshot 2024-01-30 at 09 43 46" src="https://github.com/tldraw/tldraw/assets/469604/4f5aa339-3a69-4d9b-9b9f-dfdddea623e8"> Again, this is the top-level changes and there's more to be done for the next PR(s): - create quick start page - clean up installation page - add accordion to Examples page prbly - put fun stuff in header (from footer) - landing page - something for landing page of API - search cmd-k and border - cleanup _sidebarReferenceContentLinks - external links _blank - address potential skew issue with code examples - have a link to other examples (next.js, etc.) ### Change Type - [x] `documentation` — Changes to the documentation only[^2] ### Test Plan 1. Make sure examples work! ### Release Notes - Rework our docs site to pull together the examples app and reference section more cohesively. --------- Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Co-authored-by: Steve Ruiz <steveruizok@gmail.com> Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Lu Wilson <l2wilson94@gmail.com> Co-authored-by: Dan Groshev <git@dgroshev.com>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import dynamic from 'next/dynamic'
|
|
import { Icon } from './Icon'
|
|
|
|
const FancyBox = dynamic(async () => await import('./FancyBox'), { ssr: false })
|
|
|
|
export function Footer() {
|
|
return (
|
|
<div className="footer">
|
|
<FancyBox />
|
|
<a className="footer__lockup" href="https://tldraw.com">
|
|
<span
|
|
className="footer__lockup__icon"
|
|
style={{
|
|
mask: `url(/tldraw-icon.svg) center 100% / 100% no-repeat`,
|
|
WebkitMask: `url(/tldraw-icon.svg) center 100% / 100% no-repeat`,
|
|
}}
|
|
/>
|
|
<p>tldraw © {new Date().getFullYear()}</p>
|
|
</a>
|
|
<div className="footer__socials">
|
|
<a
|
|
href="https://twitter.com/tldraw"
|
|
className="sidebar__button icon-button"
|
|
title="twitter"
|
|
>
|
|
<Icon icon="twitter" />
|
|
</a>
|
|
<a
|
|
href="https://github.com/tldraw/tldraw"
|
|
className="sidebar__button icon-button"
|
|
title="github"
|
|
>
|
|
<Icon icon="github" />
|
|
</a>
|
|
<a
|
|
href="https://discord.com/invite/SBBEVCA4PG"
|
|
className="sidebar__button icon-button"
|
|
title="discord"
|
|
>
|
|
<Icon icon="discord" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|