Overriding Docusaurus themes

To update our custom components when Docusaurus is updated:

• First delete CodeBlock/, Layout/, and Navbar from src/theme/

Adding Mac OS terminal circles to code blocks:

• Swizzle CodeBlock with yarn swizzle @docusaurus/theme-classic CodeBlock
• Copy paste MacOSCircle.jsx into the newly re-created src/theme/CodeBlock
• Import ./MacOSCircle.jsx in src/theme/CodeBlock/index.js
• Inside the export default code block component, add the following:

let useMacOsCircles = false;

if (metastring && metastring.includes('terminal=true')) {
  useMacOsCircles = true
}

• In the code block return, find the div whose className={styles.codeBlockLines} and add at the top of the div:

{useMacOsCircles && (
  <div style={{
    display: 'flex'
  }}>
    <MacOSCircle color='#ff5f56' margin={false} />
    <MacOSCircle color='#ffbd2e' margin={true}/>
    <MacOSCircle color='#27c93f' margin={true}/>
  </div>
)}

---

Adding the scroll notifier to the navbar:

• Swizzle Layout with yarn swizzle @docusaurus/theme-classic Layout
• Swizzle Navbar with yarn swizzle @docusaurus/theme-classic Navbar

In src/theme/Navbar/index.js:

• Add import ScrollNotifier from ../ScrollNotifier
• Change function Navbar() to function Navbar(props)
• In function Navbar(props), add:

let useScrollNotifier = false
try {
  useScrollNotifier = window.location.pathname != siteConfig.baseUrl
} catch (e) {}

• In the return statement of function Navbar(props), wrap the entire thing with <> </>, and under the </nav> closing tag, add <ScrollNotifier useScrollNotifier={useScrollNotifier} scrollPercent={props.scrollPercent} />

In src/theme/Layout/index.js:

• Add import { useScrollPercentage } from 'react-scroll-percentage'
• In function Layout(props), add:

try {
  effectiveDocumentHeight = document.body.scrollHeight - window.innerHeight
  scrollPercent = Math.min(1, window.scrollY / effectiveDocumentHeight)
} catch (e) {}

const [scrollRef,] = useScrollPercentage()  // purpose of this hook is to refresh data on scroll

• Change <Navbar /> to <Navbar scrollPercent={scrollPercent} />