General doc page fixes

components/Docs/Docs.module.scss

@@ -45,7 +45,7 @@
   flex-direction: column;
   flex: 0 0 300px;
   position: sticky;
-  height: calc(100vh - 54px);
+  height: 100vh;
   top: 0px;
   z-index: 5;
   max-width: 300px;
@@ -225,7 +225,6 @@
   h4,
   h5 {
     scroll-margin-top: var(--size-large);
-    margin: var(--size-large) 0 !important;
 
     &:hover {
       text-decoration: underline;
@@ -1009,7 +1008,7 @@ h5:hover .headingCopyIcon {
     flex: 0 0 auto;
     height: auto;
     border-bottom: 1px solid var(--divider-on-dark);
-    padding: var(--size-large) var(--size-large);
+    gap: 8px;
     position: relative;
     max-width: none;
     top: 0;
@@ -1029,13 +1028,15 @@ h5:hover .headingCopyIcon {
   }
 
   .leftInner {
-    padding: 0;
+    padding: 8px;
   }
 
   .tocMenu {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    padding: 8px;
+    margin: 0 8px;
 
     .tocMenuLabel {
       display: flex;
@@ -1092,10 +1093,6 @@ h5:hover .headingCopyIcon {
     word-break: break-word;
   }
 
-  .leftSection {
-    top: 0;
-  }
-
   .centerSection {
     padding: var(--size-large) var(--size-medium) var(--size-4xLarge);
   }

components/Docs/DocsTypographyRenderer/DocsTypographyRenderer.tsx

@@ -1,12 +1,12 @@
-import styles from '../Docs.module.scss'
+import classNames from 'classnames'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { createElement } from 'react'
+import { BiLink } from 'react-icons/bi'
 import { HeroVideo } from '../../Home/HeroVideo/HeroVideo'
 import { Callout } from '../Callout/Callout'
+import styles from '../Docs.module.scss'
 import { HighlightCodeBlock } from '../HighlightCodeBlock/HighlightCodeBlock'
-import Link from 'next/link'
-import { BiLink } from 'react-icons/bi'
-import { createElement } from 'react'
-import classNames from 'classnames'
 
 const getIdFromHTMLHeaderProps = (props: any) => {
   return props?.children
@@ -34,6 +34,7 @@ export const generateIdString = (str: string) => {
     .trim()
     .split(' ')
     .join('-')
+    .toLowerCase()
 }
 
 const copyHeadingIcon = (index: number) => {

pages/docs/[[...doc]].tsx

@@ -105,7 +105,7 @@ const useIntersectionObserver = (setActiveId: (s: string) => void) => {
     }
 
     const observer = new IntersectionObserver(callback, {
-      rootMargin: '0px 0px -40% 0px',
+      rootMargin: '-45% 0px',
     })
 
     const headingElements = Array.from(document.querySelectorAll('h4, h5'))
@@ -435,7 +435,11 @@ const PageRightBar = ({ relativePath }: { title: string; relativePath: string })
           <FaDiscord style={{ height: 20, width: 20 }}></FaDiscord>
           <Typography type="copy3">Community / Support</Typography>
         </Link>
-        <Link className={styles.socialItem} href={`${DOCS_GITUB_LINK}${relativePath}`} target="_blank">
+        <Link
+          className={styles.socialItem}
+          href={`${DOCS_GITUB_LINK}${relativePath}`.replaceAll(/\/+/g, '/')}
+          target="_blank"
+        >
           <FaGithub style={{ height: 20, width: 20 }}></FaGithub>
           <Typography type="copy3">Suggest Edits?</Typography>
         </Link>
@@ -465,6 +469,8 @@ const PageRightBar = ({ relativePath }: { title: string; relativePath: string })
                       e.preventDefault()
                       document.querySelector(`#${heading.id}`)?.scrollIntoView({
                         behavior: 'smooth',
+                        block: 'center',
+                        inline: 'center',
                       })
                       const basePath = router.asPath.split('#')[0]
                       const newUrl = `${basePath}#${heading.id}`
@@ -496,11 +502,13 @@ const TableOfContents = ({
   docPaths,
   openParent,
   openTopLevel = false,
+  onNavigate,
 }: {
   toc: TocEntry
   openParent: boolean
   openTopLevel?: boolean
   docPaths: DocPath[]
+  onNavigate?: () => void
 }) => {
   const hasChildren = !!toc?.children.length
 
@@ -513,7 +521,8 @@ const TableOfContents = ({
     setIsCurrentPage(currentPage === window.location.pathname)
     const isParentOfCurrentPage = window.location.pathname.includes(docPaths[toc.docPathId || 0]?.simple_path)
     setOpen((prevOpenState) => prevOpenState || isParentOfCurrentPage)
-  }, [docPaths, toc.docPathId])
+    onNavigate?.()
+  }, [docPaths, toc.docPathId, onNavigate])
 
   return (
     <div className="max-w-full">
@@ -720,6 +729,7 @@ const DocPage = ({
                     docPaths={docOptions}
                     openParent={false}
                     openTopLevel={false}
+                    onNavigate={() => setOpen(false)}
                   />
                 ))
               )}
@@ -771,7 +781,15 @@ const DocPage = ({
                         h1: (props) => <h4 {...props} />,
                         h2: (props) => {
                           if (props.children && typeof props.children === 'string') {
-                            return <h5 id={generateIdString(props.children as string)} {...props} />
+                            const id = generateIdString(props.children as string)
+                            return (
+                              <Link
+                                href={`#${id}`}
+                                className="inline-flex items-baseline gap-2 my-6 transition-all group"
+                              >
+                                <h5 id={id} {...props} />
+                              </Link>
+                            )
                           }
                           return <></>
                         },
@@ -918,28 +936,15 @@ const QuickStart = (content: { content: QuickStartContent }) => {
         {c.entries.map((step: QuickStartStep, i: number) => {
           if (step.hidden) return null
           return (
-            <div key={JSON.stringify(step)} style={{ display: 'flex', gap: 24 }}>
-              <div style={{ display: 'flex', width: 40, flexDirection: 'column' }}>
-                <div
-                  style={{
-                    width: 32,
-                    minHeight: 32,
-                    backgroundColor: '#30294E',
-                    borderRadius: 100,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
+            <div key={JSON.stringify(step)} className="flex gap-6">
+              <div className="flex flex-col items-center flex-shrink-0 w-10">
+                <div className="grid flex-shrink-0 w-8 h-8 rounded-full bg-divider-on-dark place-items-center">
                   {i + 1}
                 </div>
-                <div style={{ width: 16, height: '100%', borderRight: '2px solid #30294E' }}></div>
+                <div className="w-0.5 flex-1 bg-divider-on-dark" />
               </div>
-              <div style={{ width: '100%', display: 'flex', gap: 20, marginBottom: 42 }}>
-                <div
-                  style={{ width: '50%', display: 'flex', flexDirection: 'column', gap: 8 }}
-                  className={styles.quickStartSubtext}
-                >
+              <div className="grid gap-5 mb-[42px] flex-1 min-[1000px]:grid-cols-2 min-[1000px]:grid-flow-col">
+                <div className={classNames(' flex flex-col gap-2', styles.quickStartSubtext)}>
                   <Typography type="copy2" emphasis>
                     {step.title}
                   </Typography>
@@ -959,7 +964,7 @@ const QuickStart = (content: { content: QuickStartContent }) => {
                     {step.content}
                   </Markdown>
                 </div>
-                <div style={{ width: '50%' }}>
+                <div className="min-w-0">
                   {step.code && (
                     <HighlightCodeBlock
                       style={{ position: 'sticky', top: '80px' }}

pages/index.tsx

@@ -155,12 +155,12 @@ const Home: NextPage = () => {
             </div>
           </AnimateBugRight>
           <div className={styles.anchorFeature}>
-            <h2 className={classNames(styles.landingAnchorHead)}>
+            <h2 className={classNames(styles.landingAnchorHead, 'px-5')}>
               The open source, fullstack <br />
               <span className="text-highlight-yellow">Monitoring Platform.</span>
             </h2>
             <div className="flex justify-center mt-8 mb-16">
-              <div className="flex flex-col sm:flex-row justify-center gap-4 w-screen sm:w-auto px-5">
+              <div className="flex flex-col justify-center w-screen gap-4 px-5 sm:flex-row sm:w-auto">
                 <PrimaryButton
                   className={classNames(styles.solidButton, 'min-w-[180px]')}
                   href="https://app.highlight.io/sign_up"