Clickable headings; various design fixes

safe-global · May 14, 2024 · 50dedb3 · 50dedb3
1 parent c613399
commit 50dedb3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 29 deletions.
diff --git a/components/ApiReference/Parameter.tsx b/components/ApiReference/Parameter.tsx
@@ -1,6 +1,6 @@
-import Typography from '@mui/material/Typography'
 import Property from './Property'
 import Hr from '../Hr'
+import { MdxHeading } from '../../lib/mdx'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Parameters: React.FC<{ parameters: any[] }> = ({ parameters }) => {
@@ -11,9 +11,7 @@ const Parameters: React.FC<{ parameters: any[] }> = ({ parameters }) => {
     <>
       {query.length > 0 && (
         <>
-          <Typography variant='h4' sx={{ mt: 2 }}>
-            Query Parameters
-          </Typography>
+          <MdxHeading headingLevel={4}>Query Parameters</MdxHeading>
           <Hr />
         </>
       )}
@@ -29,9 +27,7 @@ const Parameters: React.FC<{ parameters: any[] }> = ({ parameters }) => {
       ))}
       {body.length > 0 && (
         <>
-          <Typography variant='h4' sx={{ mt: 2 }}>
-            Request Body
-          </Typography>
+          <MdxHeading headingLevel={4}>Request Body</MdxHeading>
           <Hr />
         </>
       )}

diff --git a/components/ApiReference/Response.tsx b/components/ApiReference/Response.tsx
@@ -8,6 +8,7 @@ import ExpandMore from '@mui/icons-material/ExpandMore'
 
 import Property from './Property'
 import Hr from '../Hr'
+import { MdxHeading } from '../../lib/mdx'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Response: React.FC<{ response: any, index: number }> = ({
@@ -90,7 +91,9 @@ const Response: React.FC<{ response: any, index: number }> = ({
                   borderRadius: 1,
                   border: 'none',
                   mr: 1,
-                  backgroundColor: isSuccess ? 'success.background' : 'error.background'
+                  backgroundColor: isSuccess
+                    ? 'success.background'
+                    : 'error.background'
                 }}
               />
             </Grid>
@@ -136,9 +139,7 @@ const Response: React.FC<{ response: any, index: number }> = ({
 const Responses: React.FC<{ responses: any[] }> = ({ responses }) => {
   return (
     <Grid sx={{ mt: 2 }}>
-      <Typography variant='h4' gutterBottom>
-        Responses
-      </Typography>
+      <MdxHeading headingLevel={4}>Responses</MdxHeading>
       <Hr />
       {responses?.map?.((response, index) => (
         <Response key={index} index={index} response={response} />

diff --git a/components/ApiReference/mainnet-swagger.json b/components/ApiReference/mainnet-swagger.json
@@ -1112,7 +1112,7 @@
         ],
         "deprecated": false,
         "path": "/v1/safes/{address}/balances/",
-        "title": "List a Safe's Balances",
+        "title": "List a Safe's Balances (Deprecated)",
         "additionalInfo": ""
       },
       "parameters": {
@@ -3470,7 +3470,7 @@
           "title": "Uuid",
           "type": "string",
           "format": "uuid",
-          "default": "0287b78d-96ed-4a9c-b80b-1965c1753dc9"
+          "default": "bb1a4b6f-98b1-4379-bdc6-dab2ce1fb87a"
         },
         "safes": {
           "type": "array",
@@ -3539,7 +3539,7 @@
           "title": "Uuid",
           "type": "string",
           "format": "uuid",
-          "default": "8da0a387-58c9-4028-9c98-73857f3c5a3b"
+          "default": "92c9255f-1c80-42bf-80d9-a86a4ea1b1e1"
         },
         "safes": {
           "type": "array",

diff --git a/components/Hr.tsx b/components/Hr.tsx
@@ -1,9 +1,11 @@
+import { palette } from '../styles/palette'
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Hr: React.FC<{ style?: any }> = props => (
   <hr
     {...props}
     style={{
-      border: '0px solid DimGray',
+      border: `0px solid ${palette.border.light}`,
       borderBottomWidth: '1px',
       ...props.style
     }}

diff --git a/lib/mdx.tsx b/lib/mdx.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link'
 import throttle from 'lodash/throttle'
 import { type SxProps } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
 import {
   CopyToClipboard,
   Code,
@@ -25,7 +26,7 @@ import swagger from '../components/ApiReference/mainnet-swagger.json'
 import pathsMetadata from '../components/ApiReference/paths-metadata.json'
 
 export const slugify: (text: string) => string = text =>
-  text?.replace?.(/ /g, '-').replace(/\//g, '-')
+  text?.replace(' #', '')?.replace?.(/ /g, '-').replace(/\//g, '-')
 
 export const getHeadingChildren: (heading: string) => Heading[] = heading => {
   const headingPath = '/v1/' + heading + '/'
@@ -60,6 +61,7 @@ export const getHeadingsFromHtml: (
         const headingText = heading
           .replace(/<[^>]*>/g, '')
           .replace(/&nbsp;/g, ' ')
+          .replace(' #', '')
           .trim()
         const link = `#${slugify(headingText)}`
         return {
@@ -73,22 +75,52 @@ export const getHeadingsFromHtml: (
   return []
 }
 
+export const MdxHeading: React.FC<{
+  headingLevel: number
+  children: ReactNode
+}> = ({ headingLevel, children }) => (
+  <Typography
+    variant={`h${headingLevel}` as 'h1'}
+    textTransform='none'
+    id={slugify(children as string)}
+    sx={{
+      '&:hover .MuiButton-root': {
+        opacity: '1'
+      },
+      transition: '0.2s'
+    }}
+  >
+    {children as string}{' '}
+    {headingLevel > 1 && (
+      <Button
+        href={`#${slugify(children as string)}`}
+        disableRipple
+        sx={{
+          p: 0,
+          minWidth: 12,
+          minHeight: 24,
+          fontSize: 24,
+          backgroundColor: 'transparent',
+          color: 'grey.700',
+          opacity: '0',
+          transition: '0.2s',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          }
+        }}
+      >
+        #
+      </Button>
+    )}
+  </Typography>
+)
+
 const getMarkdownHeaderComponent: (
   headingLevel: number
 ) => React.FC<{ children: ReactNode }> =
   headingLevel =>
-    ({ children }) => {
-      const HeadingComponent: React.FC = () => (
-      <Typography
-        variant={`h${headingLevel}` as 'h1'}
-        textTransform='none'
-        id={slugify(children as string)}
-      >
-        {children as string}
-      </Typography>
-      )
-      return HeadingComponent({})
-    }
+    ({ children }) =>
+      MdxHeading({ headingLevel, children })
 
 export const useCurrentTocIndex: (
   headings: Heading[],
@@ -129,7 +161,7 @@ export const useCurrentTocIndex: (
       setCurrentIndex(
         isNextHeadingInView ? nextHeading?.link ?? '' : active?.link ?? ''
       )
-    } else setCurrentIndex('')
+    } else setCurrentIndex(_headings[0]?.children?.[0]?.link ?? '')
   }, [headings, navHeight])
 
   const scrollListener = useMemo(