stylize breadcrumb sidenav prev next links and rebase

postcss.config.js

@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

src/css/custom.css

@@ -26,9 +26,60 @@
 .breadcrumbs__link {
   @apply !text-light-neutral-1 dark:!text-dark-neutral-1 !bg-transparent !p-0 !body-3;
 }
-.breadcrumbs__item:first-child, .breadcrumbs__item:first-child:after {
+.breadcrumbs__item:first-child,
+.breadcrumbs__item:first-child:after {
   @apply !hidden;
 }
 .breadcrumbs__item:not(:last-child):after {
-  @apply !text-light-neutral-1 dark:!text-dark-neutral-1;
-}
+  background: url('/img/chevron.svg') center !important;
+  @apply text-light-neutral-1 dark:text-dark-neutral-1 !h-4 !opacity-100;
+}
+.docMainContainer_src-theme-DocPage-Layout-Main-styles-module {
+  @apply !mt-nav-h;
+}
+.breadcrumbs__item {
+  @apply inline-flex flex-row items-center;
+}
+.Toc__title {
+  @apply !body-3 text-light-neutral-1 dark:text-dark-neutral-1;
+}
+.theme-edit-this-page {
+  all: initial;
+}
+.theme-edit-this-page {
+  @apply text-light-neutral-3 dark:text-dark-neutral-3 !body-3;
+  svg {
+    @apply !hidden;
+  }
+}
+.theme-doc-toc-desktop {
+  @apply !relative !top-auto;
+}
+.Toc__container {
+  @apply max-h-[calc(100vh-(theme(spacing.nav-h)+2rem))] overflow-y-auto sticky top-[calc(theme(spacing.nav-h)+1rem)];
+}
+.table-of-contents__link {
+  @apply !text-light-neutral-2 dark:!text-dark-neutral-2 hover:underline !body-3;
+}
+.table-of-contents__left-border {
+  @apply !border-0;
+  li {
+    @apply !ml-0;
+  }
+  ul {
+    @apply border-y-0 border-r-0 border-l-2 border-solid border-l-light-surface-3 dark:border-l-dark-surface-3 !pl-4;
+  }
+}
+.pagination-nav__link {
+  @apply !flex !flex-col !space-y-1 bg-light-accent-2 dark:bg-dark-accent-2 text-light-accent-1 dark:text-dark-accent-1 !rounded-lg !p-4 !border-0 !min-h-fit !h-auto;
+}
+.pagination-nav__sublabel {
+  @apply text-light-accent-1 dark:text-dark-accent-1 !body-4;
+}
+.pagination-nav__label {
+  @apply !subheading-2;
+}
+.pagination-nav__label::before,
+.pagination-nav__label::after {
+  @apply !content-none;
+}

src/css/infima-overrides.css

@@ -102,3 +102,7 @@ select {
     scroll-behavior: auto !important;
   }
 }
+
+.navbar {
+  all: initial;
+}

src/theme/DocBreadcrumbs.tsx

@@ -1,16 +1,10 @@
 import OriginalDocBreadcrumbs from '@theme-original/DocBreadcrumbs'
-import { DocsSentimentSection } from '@uniswap/analytics-events'
 import React from 'react'
 
-import SentimentTracking from '../components/SentimentTracking'
-
 export default function DocBreadcrumbs(props) {
   return (
     <div>
       <OriginalDocBreadcrumbs />
-      <div>
-        <SentimentTracking analyticsSection={DocsSentimentSection.TOP_SECTION} />
-      </div>
     </div>
   )
 }

src/theme/DocItem/Content/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import Heading from '@theme/Heading';
-import MDXContent from '@theme/MDXContent';
+import React from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import Heading from '@theme/Heading'
+import MDXContent from '@theme/MDXContent'
 /**
  Title can be declared inside md content or declared through
  front matter and added manually. To make both cases consistent,
@@ -15,16 +15,15 @@ import MDXContent from '@theme/MDXContent';
  - the markdown content does not already contain a top-level h1 heading
 */
 function useSyntheticTitle() {
-  const {metadata, frontMatter, contentTitle} = useDoc();
-  const shouldRender =
-    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  const { metadata, frontMatter, contentTitle } = useDoc()
+  const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined'
   if (!shouldRender) {
-    return null;
+    return null
   }
-  return metadata.title;
+  return metadata.title
 }
-export default function DocItemContent({children}) {
-  const syntheticTitle = useSyntheticTitle();
+export default function DocItemContent({ children }) {
+  const syntheticTitle = useSyntheticTitle()
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
       {syntheticTitle && (
@@ -34,5 +33,5 @@ export default function DocItemContent({children}) {
       )}
       <MDXContent>{children}</MDXContent>
     </div>
-  );
+  )
 }

src/theme/DocItem/Footer/index.js

@@ -1,34 +1,22 @@
-import React from 'react';
-import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import LastUpdated from '@theme/LastUpdated';
-import EditThisPage from '@theme/EditThisPage';
-import TagsListInline from '@theme/TagsListInline';
-import styles from './styles.module.css';
+import React from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import LastUpdated from '@theme/LastUpdated'
+import TagsListInline from '@theme/TagsListInline'
+import styles from './styles.module.css'
 function TagsRow(props) {
   return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        'row margin-bottom--sm',
-      )}>
+    <div className={clsx(ThemeClassNames.docs.docFooterTagsRow, 'row margin-bottom--sm')}>
       <div className="col">
         <TagsListInline {...props} />
       </div>
     </div>
-  );
+  )
 }
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}) {
+function EditMetaRow({ editUrl, lastUpdatedAt, lastUpdatedBy, formattedLastUpdatedAt }) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
-
       <div className={clsx('col', styles.lastUpdated)}>
         {(lastUpdatedAt || lastUpdatedBy) && (
           <LastUpdated
@@ -39,21 +27,19 @@ function EditMetaRow({
         )}
       </div>
     </div>
-  );
+  )
 }
 export default function DocItemFooter() {
-  const {metadata} = useDoc();
-  const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
-    metadata;
-  const canDisplayTagsRow = tags.length > 0;
-  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
-  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
+  const { metadata } = useDoc()
+  const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags } = metadata
+  const canDisplayTagsRow = tags.length > 0
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy)
+  const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow
   if (!canDisplayFooter) {
-    return null;
+    return null
   }
   return (
-    <footer
-      className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
+    <footer className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
       {canDisplayTagsRow && <TagsRow tags={tags} />}
       {canDisplayEditMetaRow && (
         <EditMetaRow
@@ -64,5 +50,5 @@ export default function DocItemFooter() {
         />
       )}
     </footer>
-  );
+  )
 }

src/theme/DocItem/Layout/index.js

@@ -1,39 +1,39 @@
-import React from 'react';
-import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import DocItemPaginator from '@theme/DocItem/Paginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocItemFooter from '@theme/DocItem/Footer';
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
-import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
-import DocItemContent from '@theme/DocItem/Content';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import styles from './styles.module.css';
+import React from 'react'
+import clsx from 'clsx'
+import { useWindowSize } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import DocItemPaginator from '@theme/DocItem/Paginator'
+import DocVersionBanner from '@theme/DocVersionBanner'
+import DocVersionBadge from '@theme/DocVersionBadge'
+import DocItemFooter from '@theme/DocItem/Footer'
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'
+import DocItemContent from '@theme/DocItem/Content'
+import DocBreadcrumbs from '@theme/DocBreadcrumbs'
+import EditThisPage from '@theme/EditThisPage'
+import styles from './styles.module.css'
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
 function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
-  const windowSize = useWindowSize();
-  const hidden = frontMatter.hide_table_of_contents;
-  const canRender = !hidden && toc.length > 0;
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
-  const desktop =
-    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
-      <DocItemTOCDesktop />
-    ) : undefined;
+  const { frontMatter, toc } = useDoc()
+  const windowSize = useWindowSize()
+  const hidden = frontMatter.hide_table_of_contents
+  const canRender = !hidden && toc.length > 0
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined
+  const desktop = canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? <DocItemTOCDesktop /> : undefined
   return {
     hidden,
     mobile,
     desktop,
-  };
+  }
 }
-export default function DocItemLayout({children}) {
-  const docTOC = useDocTOC();
+export default function DocItemLayout({ children }) {
+  const docTOC = useDocTOC()
+  const { metadata } = useDoc()
+  const { editUrl } = metadata
   return (
-    <div className="row">
+    <div className="row relative">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
         <DocVersionBanner />
         <div className={styles.docItemContainer}>
@@ -47,7 +47,15 @@ export default function DocItemLayout({children}) {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">On this page {docTOC.desktop}</div>}
+      <div className="col col--3 Toc__container">
+        {docTOC.desktop && (
+          <>
+            <p className="Toc__title">On this page</p>
+            {docTOC.desktop}
+          </>
+        )}
+        {editUrl && <EditThisPage editUrl={editUrl} />}
+      </div>
     </div>
-  );
+  )
 }

src/theme/DocItem/Metadata/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import {PageMetadata} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import React from 'react'
+import { PageMetadata } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
 export default function DocItemMetadata() {
-  const {metadata, frontMatter, assets} = useDoc();
+  const { metadata, frontMatter, assets } = useDoc()
   return (
     <PageMetadata
       title={metadata.title}
       description={metadata.description}
       keywords={frontMatter.keywords}
       image={assets.image ?? frontMatter.image}
     />
-  );
+  )
 }

src/theme/DocItem/Paginator/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import DocPaginator from '@theme/DocPaginator';
+import React from 'react'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import DocPaginator from '@theme/DocPaginator'
 /**
  * This extra component is needed, because <DocPaginator> should remain generic.
  * DocPaginator is used in non-docs contexts too: generated-index pages...
  */
 export default function DocItemPaginator() {
-  const {metadata} = useDoc();
-  return <DocPaginator previous={metadata.previous} next={metadata.next} />;
+  const { metadata } = useDoc()
+  return <DocPaginator previous={metadata.previous} next={metadata.next} />
 }

src/theme/DocItem/TOC/Desktop/index.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import TOC from '@theme/TOC';
+import React from 'react'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import TOC from '@theme/TOC'
 export default function DocItemTOCDesktop() {
-  const {toc, frontMatter} = useDoc();
+  const { toc, frontMatter } = useDoc()
   return (
     <TOC
       toc={toc}
       minHeadingLevel={frontMatter.toc_min_heading_level}
       maxHeadingLevel={frontMatter.toc_max_heading_level}
       className={ThemeClassNames.docs.docTocDesktop}
     />
-  );
+  )
 }

src/theme/DocItem/TOC/Mobile/index.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
-import TOCCollapsible from '@theme/TOCCollapsible';
-import styles from './styles.module.css';
+import React from 'react'
+import clsx from 'clsx'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { useDoc } from '@docusaurus/theme-common/internal'
+import TOCCollapsible from '@theme/TOCCollapsible'
+import styles from './styles.module.css'
 export default function DocItemTOCMobile() {
-  const {toc, frontMatter} = useDoc();
+  const { toc, frontMatter } = useDoc()
   return (
     <TOCCollapsible
       toc={toc}
       minHeadingLevel={frontMatter.toc_min_heading_level}
       maxHeadingLevel={frontMatter.toc_max_heading_level}
       className={clsx(ThemeClassNames.docs.docTocMobile, styles.tocMobile)}
     />
-  );
+  )
 }