Merge pull request #53 from pheralb/pheralb

⚒️ Docs sidebar improvements + MDX Components + fix bugs.

app/docs/getting-started.mdx

@@ -1,16 +1,19 @@
 ---
-title: Getting Started with SuperUI.
+title: Getting Started
 tags:
   - react
   - tailwindcss
 date: "2022-08-05"
 description: SuperUI is a amazing UI library for React.
 ---
+#### Design goals
 
-# 🚀 Getting Started
-
-Install SuperUI:
+Install SuperUI
 
 ```bash
-npm install superui
+npm install
 ```
+
+#### Accessibility
+
+The design system follow WCAG standards as best it can (continuely improved!) via the use of [Radix-UI](https://www.radix-ui.com/) base components and accessible default themes.

app/src/components/documents/mdx/index.tsx

@@ -0,0 +1,68 @@
+import {
+  Divider,
+  Heading,
+  ListItem,
+  OrderedList,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  UnorderedList,
+  Link,
+  TableColumnHeaderProps,
+  ListProps,
+  TableProps,
+  TextProps,
+  TableRowProps,
+  TableBodyProps,
+  HeadingProps,
+  LinkProps,
+  ListItemProps,
+} from "@chakra-ui/react";
+
+export const MDXComponents = {
+  a: (props: LinkProps) => (
+    <Link textDecoration="underline" isExternal={true} {...props} />
+  ),
+  hr: (props: TextProps) => <Divider {...props} />,
+  h1: (props: HeadingProps) => (
+    <Heading as="h1" mt={8} mb={3} size="3xl" fontWeight="light" {...props} />
+  ),
+  h2: (props: HeadingProps) => (
+    <Heading as="h2" mt={6} mb={16} size="2xl" fontWeight="bold" {...props} />
+  ),
+  h3: (props: HeadingProps) => (
+    <Heading as="h3" mt={8} mb={3} size="lg" fontWeight="light" {...props} />
+  ),
+  h4: (props: HeadingProps) => (
+    <Heading
+      as="h4"
+      mt={8}
+      mb={3}
+      fontSize="24px"
+      fontWeight="light"
+      {...props}
+    />
+  ),
+  h5: (props: HeadingProps) => (
+    <Heading as="h5" mt={8} mb={3} size="md" fontWeight="light" {...props} />
+  ),
+  h6: (props: HeadingProps) => (
+    <Heading as="h6" mt={8} mb={3} size="sm" fontWeight="light" {...props} />
+  ),
+  p: (props: TextProps) => <Text fontSize="lg" mb={3} {...props} />,
+  table: (props: TableProps) => (
+    <Table variant="striped" colorScheme="orange" {...props} />
+  ),
+  thead: (props: TableBodyProps) => <Thead {...props} />,
+  tbody: (props: TableBodyProps) => <Tbody {...props} />,
+  th: (props: TableColumnHeaderProps) => <Th {...props} />,
+  tr: (props: TableRowProps) => <Tr {...props} />,
+  td: (props: TableColumnHeaderProps) => <Td {...props} />,
+  ul: (props: ListProps) => <UnorderedList styleType="none" {...props} />,
+  ol: (props: ListProps) => <OrderedList styleType="none" {...props} />,
+  li: (props: ListItemProps) => <ListItem {...props} />,
+};

app/src/components/documents/sidebar/content.tsx

@@ -29,7 +29,7 @@ const SidebarContent = (props: SidebarContentProps) => {
       overflowX="hidden"
       overflowY="auto"
       borderRightWidth="1px"
-      w="60"
+      w="240px"
       {...props}
     >
       <Flex direction="column" as="nav" aria-label="Main Navigation">

app/src/pages/_app.tsx

@@ -30,13 +30,13 @@ function MyApp({ Component, pageProps }: AppProps) {
         showOnShallow={true}
         options={{ showSpinner: false }}
       />
-      <ChakraProvider theme={docsTheme}>
-        <Layout>
-          <SuperUIProvider>
+      <SuperUIProvider>
+        <ChakraProvider theme={docsTheme}>
+          <Layout>
             <Component {...pageProps} />
-          </SuperUIProvider>
-        </Layout>
-      </ChakraProvider>
+          </Layout>
+        </ChakraProvider>
+      </SuperUIProvider>
     </>
   );
 }

app/src/pages/docs/[slug].tsx

@@ -11,10 +11,7 @@ interface DocsPageProps {
 }
 
 // Custom Components =>
-import Image from "next/image";
-const MDXComponents = {
-  Image,
-};
+import { MDXComponents } from "@/components/documents/mdx";
 
 // Plugins =>
 import matter from "gray-matter";
@@ -23,13 +20,20 @@ import rehypePrism from "rehype-prism-plus";
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import Sidebar from "@/components/documents/sidebar";
+import { Box, Heading, Text } from "@chakra-ui/react";
 
 const Doc = ({ source, frontMatter }: DocsPageProps) => {
   return (
     <Sidebar>
       <Head>
         <title>{frontMatter.title}</title>
       </Head>
+      <Box mb="16" mt="5">
+        <Heading mb={2} fontSize="6xl">
+          {frontMatter.title}
+        </Heading>
+        <Text mb={5}>{frontMatter.description}</Text>
+      </Box>
       <MDXRemote {...source} components={MDXComponents} />
     </Sidebar>
   );

app/src/styles/docsTheme.ts

@@ -17,8 +17,9 @@ const docsTheme = extendTheme({
     },
   },
   fonts: {
-    body: "Inter-Regular, sans-serif",
-    heading: "Inter-Medium, sans-serif",
+    body: "Inter, sans-serif",
+    heading: "Inter, sans-serif",
+    mono: "Cascadia, monospace",
   },
   styles: {
     global: (props: ChakraProps) => ({

app/src/styles/globals.css

@@ -3,15 +3,15 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: "Inter-Regular";
+  font-family: "Inter";
   font-style: normal;
   font-display: optional;
-  src: url("/fonts/Inter-Regular.woff2") format("woff2");
+  src: url("/fonts/inter-var-latin.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: "Inter-Medium";
+  font-family: "Cascadia";
   font-style: normal;
   font-display: optional;
-  src: url("/fonts/Inter-Medium.woff2") format("woff2");
+  src: url("/fonts/CascadiaCode.woff2") format("woff2");
 }

app/src/styles/prism.css

@@ -1,9 +1,9 @@
 pre[class*="language-"],
 code[class*="language-"] {
 	color: #d4d4d4;
-	font-size: 13px;
+	font-size: 16px;
 	text-shadow: none;
-	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	font-family: "Cascadia";
 	direction: ltr;
 	text-align: left;
 	white-space: pre;
@@ -38,7 +38,9 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	background: #1e1e1e;
+	background: #131314;
+	border: 1px solid #323236;
+	border-radius: 5px;
 }
 
 :not(pre) > code[class*="language-"] {