improve styling of api portal

generator/konfig-next-app/src/components/DemoDivider.tsx

@@ -8,7 +8,7 @@ const _DemoDivider: Components['hr'] = ({
   children,
   siblingCount,
 }) => {
-  return <Divider my="sm" />
+  return <Divider mt="sm" mb="xl" />
 }
 
 export const DemoDivider = observer(_DemoDivider)

generator/konfig-next-app/src/components/DemoInfo.tsx

@@ -1,17 +1,33 @@
 import { observer } from 'mobx-react'
 import { Components } from 'react-markdown'
-import { Alert } from '@mantine/core'
+import { Alert, createStyles } from '@mantine/core'
 import { IconInfoCircleFilled } from '@tabler/icons-react'
 
+const useStyles = createStyles((theme) => ({
+  alert: {
+    '.mantine-Text-root': {
+      margin: 0,
+    },
+  },
+}))
+
 const _DemoInfo: Components['div'] = ({
   node,
   className,
   children,
   siblingCount,
   ...props
 }) => {
+  const { classes } = useStyles()
   return (
-    <Alert title={props.title} icon={<IconInfoCircleFilled size="1rem" />}>
+    <Alert
+      className={classes.alert}
+      color="blue"
+      title={props.title}
+      mb="xl"
+      radius="md"
+      icon={<IconInfoCircleFilled size="1rem" />}
+    >
       {children}
     </Alert>
   )

generator/konfig-next-app/src/components/DemoMarkdown.tsx

@@ -5,8 +5,10 @@ import remarkDirectiveRehype from 'remark-directive-rehype'
 import remarkGfm from 'remark-gfm'
 import {
   Anchor,
+  Box,
   Stack,
   Text,
+  createStyles,
   useMantineColorScheme,
   useMantineTheme,
 } from '@mantine/core'
@@ -131,34 +133,48 @@ export class DemoState {
 
 export const DemoStateContext = createContext<DemoState | null>(null)
 
+const useStyles = createStyles((theme) => ({
+  markdown: {
+    'h1:first-of-type': {
+      marginTop: 0,
+    },
+  },
+}))
+
 const DemoMarkdown = observer(({ state }: { state: DemoState }) => {
   const demoDiv = useRef<HTMLDivElement | null>(null)
   const { colors } = useMantineTheme()
+  const { classes } = useStyles()
   useEffect(() => {
     state.setDemoDiv(demoDiv.current)
   }, [state])
   return (
     <DemoStateContext.Provider value={state}>
       <Stack ref={demoDiv} spacing="xs">
         <ReactMarkdown
+          className={classes.markdown}
           remarkPlugins={[remarkGfm, remarkDirective, remarkDirectiveRehype]}
           components={{
             a: DemoAnchor,
             p({ node, children, siblingCount, ...props }) {
-              return <Text {...props}>{children}</Text>
+              return (
+                <Text mt="md" mb="xl" {...props}>
+                  {children}
+                </Text>
+              )
             },
             pre: DemoPre,
             form: DemoForm,
             input: DemoInput,
             button: DemoButton,
             code: DemoCode,
             hr: DemoDivider,
-            h1: DemoTitle,
-            h2: DemoTitle,
-            h3: DemoTitle,
-            h4: DemoTitle,
-            h5: DemoTitle,
-            h6: DemoTitle,
+            h1: (props) => <DemoTitle {...props} />,
+            h2: (props) => <DemoTitle {...props} />,
+            h3: (props) => <DemoTitle {...props} />,
+            h4: (props) => <DemoTitle {...props} />,
+            h5: (props) => <DemoTitle {...props} />,
+            h6: (props) => <DemoTitle {...props} />,
             // Make TypeScript happy by moving this into its own object
             ...{
               info: DemoInfo,

generator/konfig-next-app/src/components/DemoNote.tsx

@@ -1,17 +1,33 @@
 import { observer } from 'mobx-react'
 import { Components } from 'react-markdown'
-import { Alert } from '@mantine/core'
+import { Alert, createStyles } from '@mantine/core'
 import { IconNote } from '@tabler/icons-react'
 
+const useStyles = createStyles((theme) => ({
+  alert: {
+    '.mantine-Text-root': {
+      margin: 0,
+    },
+  },
+}))
+
 const _DemoNote: Components['div'] = ({
   node,
   className,
   children,
   siblingCount,
   ...props
 }) => {
+  const { classes } = useStyles()
   return (
-    <Alert title={props.title} icon={<IconNote size="1rem" />}>
+    <Alert
+      className={classes.alert}
+      title={props.title}
+      icon={<IconNote size="1rem" />}
+      radius="md"
+      mb="xl"
+      color="gray"
+    >
       {children}
     </Alert>
   )

generator/konfig-next-app/src/components/DemoTableOfContents.tsx

@@ -43,7 +43,7 @@ const useStyles = createStyles((theme) => ({
         ? theme.colors.dark[1]
         : theme.colors.gray[7],
     borderLeft: `${rem(1)} solid transparent`,
-    padding: `${rem(8)} ${theme.spacing.md}`,
+    padding: `${rem(6)} ${theme.spacing.md}`,
     marginLeft: -1,
   },
 
@@ -67,6 +67,7 @@ const useStyles = createStyles((theme) => ({
 
   title: {
     marginLeft: theme.spacing.md,
+    fontSize: theme.fontSizes.xs,
   },
 }))
 
@@ -103,16 +104,20 @@ function getActiveElement(rects: DOMRect[]) {
 function getHeadingElementsFromDiv(div: HTMLDivElement): HTMLHeadingElement[] {
   const headingElements: HTMLHeadingElement[] = []
 
+  const innerDiv = div.children[0]
+
   // Iterate over the children of the div
-  for (let i = 0; i < div.children.length; i++) {
-    const child = div.children[i]
+  for (let i = 0; i < innerDiv.children.length; i++) {
+    const child = innerDiv.children[i]
 
     // Check if the child is an HTMLHeadingElement
     if (child instanceof HTMLHeadingElement) {
       headingElements.push(child)
     }
   }
 
+  console.log('headingElements', headingElements)
+
   return headingElements
 }
 
@@ -174,7 +179,7 @@ export const DemoTableOfContents = observer(
           href={`#${heading.id}`}
           sx={{
             paddingLeft: `calc(${getHeadingOrder(heading) - 1} * ${
-              theme.spacing.lg
+              theme.spacing.sm
             })`,
           }}
         >
@@ -203,7 +208,7 @@ export const DemoTableOfContents = observer(
                 {items.length !== 0 && (
                   <div className={classes.header}>
                     <IconList size={20} stroke={1.5} />
-                    <Text className={classes.title}>Table of contents</Text>
+                    <Text className={classes.title}>On this page</Text>
                   </div>
                 )}
                 <ScrollArea.Autosize

generator/konfig-next-app/src/components/DemoTitle.tsx

@@ -1,4 +1,11 @@
-import { Anchor, Title, TitleOrder, rem } from '@mantine/core'
+import {
+  Anchor,
+  SpacingValue,
+  SystemProp,
+  Title,
+  TitleOrder,
+  rem,
+} from '@mantine/core'
 import { observer } from 'mobx-react'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { Components } from 'react-markdown/lib/ast-to-react'
@@ -37,6 +44,7 @@ const _DemoTitle: Components['h1'] = ({
       ref={ref}
       id={slug}
       order={level as TitleOrder}
+      mt={mt(level as TitleOrder)}
     >
       <Anchor href={`#${slug}`} unstyled>
         {children}
@@ -45,6 +53,15 @@ const _DemoTitle: Components['h1'] = ({
   )
 }
 
+function mt(level: TitleOrder): SystemProp<SpacingValue> {
+  if (level === 1) return 'xl'
+  if (level === 2) return 'xl'
+  if (level === 3) return 'lg'
+  if (level === 4) return 'md'
+  if (level === 5) return 'sm'
+  return 'xs'
+}
+
 export function generateHeaderTitle({
   demoId,
   title,

generator/konfig-next-app/src/components/DemoWarn.tsx

@@ -1,19 +1,31 @@
 import { observer } from 'mobx-react'
 import { Components } from 'react-markdown'
-import { Alert } from '@mantine/core'
+import { Alert, createStyles } from '@mantine/core'
 import { IconTrafficCone } from '@tabler/icons-react'
 
+const useStyles = createStyles((theme) => ({
+  alert: {
+    '.mantine-Text-root': {
+      margin: 0,
+    },
+  },
+}))
+
 const _DemoWarn: Components['div'] = ({
   node,
   className,
   children,
   siblingCount,
   ...props
 }) => {
+  const { classes } = useStyles()
   return (
     <Alert
+      className={classes.alert}
       color="yellow"
+      radius="md"
       title={props.title}
+      mb="xl"
       icon={<IconTrafficCone size="1rem" />}
     >
       {children}

generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx

@@ -1,5 +1,4 @@
 import DemoMarkdown, { DemoState } from '@/components/DemoMarkdown'
-import { DemoSocials } from '@/components/DemoSocials'
 import { DemoTableOfContents } from '@/components/DemoTableOfContents'
 import { DocEditThisPage } from '@/components/DocEditThisPage'
 import { DocNavLink } from '@/components/DocNavLink'
@@ -17,6 +16,9 @@ import {
   Title,
   rem,
   Divider,
+  Flex,
+  Text,
+  createStyles,
 } from '@mantine/core'
 import { OperationObject } from 'konfig-lib'
 import { observer } from 'mobx-react'
@@ -62,6 +64,14 @@ export const getStaticProps: GetStaticProps<MarkdownPageProps> = async (
 
 export const OperationsContext = createContext<OperationObject[]>([])
 
+const useStyles = createStyles((theme) => ({
+  markdown: {
+    '.mantine-Tabs-root': {
+      marginBottom: theme.spacing.xl,
+    },
+  },
+}))
+
 const DocumentationPage = observer(
   ({
     konfigYaml,
@@ -86,6 +96,8 @@ const DocumentationPage = observer(
 
     const [opened, setOpened] = useState(false)
 
+    const { classes } = useStyles()
+
     const [state, setState] = useState(() => {
       return new DemoState({
         markdown,
@@ -162,9 +174,16 @@ const DocumentationPage = observer(
                   {docConfig.sidebar.sections.map((section, i) => {
                     return (
                       <Box key={`${section.label}-${i}`}>
-                        <Title pb="xs" px="md" order={5}>
+                        <Text
+                          pb={2}
+                          px="md"
+                          weight="bold"
+                          fz="xs"
+                          style={{ textTransform: 'uppercase' }}
+                          color="dimmed"
+                        >
                           {section.label}
-                        </Title>
+                        </Text>
                         <Stack spacing={rem(3)}>
                           {section.links.map((link) => {
                             if (link.type === 'link') {
@@ -209,7 +228,11 @@ const DocumentationPage = observer(
             }
           >
             <OperationsContext.Provider value={operations}>
-              <DemoMarkdown state={state} />
+              <Flex justify="center">
+                <Box className={classes.markdown} w="100%" maw={700}>
+                  <DemoMarkdown state={state} />
+                </Box>
+              </Flex>
               <Box my={rem(40)}>
                 <DocEditThisPage
                   owner={owner}

generator/konfig-next-app/src/pages/_app.tsx

@@ -44,7 +44,16 @@ function App(props: AppProps) {
         toggleColorScheme={toggleColorScheme}
       >
         <MantineProvider
-          theme={{ colorScheme }}
+          theme={{
+            colorScheme,
+            fontSizes: {
+              xs: '0.6rem',
+              sm: '0.75rem',
+              md: '0.95rem',
+              lg: '1rem',
+              xl: '1.2rem',
+            },
+          }}
           withGlobalStyles
           withNormalizeCSS
         >