swizzling.md

Docusaurus swizzling

Custom theme components

The Connect site uses swizzling to customize several Docusaurus components:

• Front page navbar
• Front page navbar item
• Docs navbar item
• Footer
• Search bar
• CodeBlock
• DocSidebar/Desktop/Content
• DocSidebarItem/Category
• NavBar/Content
• NavBar/Layout
• NavBar/MobileSidebar

To swizzle more components, run npm run swizzle -- @docusaurus/theme-classic --typescript and select component you want to modify

What lives where

In general, the site follows the standard Docusaurus structure, with swizzled components in src/theme and fully custom components in src/components. Some additional things to be aware of:

• The core logic for the front page is in src/pages/index.tsx
• Components specific to the front page are in src/components/home
• All text for the front page is defined in src/components/home/text.tsx

Vendored libraries

We've vendored out crt-terminal in order to fix a focus issue on mount. We have added the prop focusOnMount to the Terminal component.

In order to rebuild the package:

cd src/vendor/crt-terminal
npm install
npm run build
rm -rf node_modules