Update docs

strawberry-graphql · Apr 17, 2020 · 22d2e07 · 22d2e07
1 parent 16d5f6d
commit 22d2e07
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 20 deletions.
diff --git a/src/components/docs-navigation.tsx b/src/components/docs-navigation.tsx
@@ -30,17 +30,52 @@ const Nav: React.SFC = () => {
     }
   `);
 
+  console.log(edges);
+
+  const sections = {
+    general: [],
+    concepts: [],
+    features: [],
+  };
+
+  edges.map(({ node }) => {
+    for (const key of Object.keys(sections)) {
+      console.log(
+        key,
+        node.childMdx.frontmatter.path.startsWith(`/docs/${key}`)
+      );
+
+      if (node.childMdx.frontmatter.path.startsWith(`/docs/${key}`)) {
+        sections[key].push(node);
+
+        return;
+      }
+    }
+
+    sections.general.push(node);
+  });
+
   return (
-    <nav>
-      {edges.map(({ node }) => (
-        <Link
-          href={node.childMdx.frontmatter.path}
-          key={node.childMdx.frontmatter.path}
-        >
-          {node.childMdx.frontmatter.title}
-        </Link>
+    <Fragment>
+      {Object.entries(sections).map(([section, nodes]) => (
+        <Fragment key={section}>
+          <h2 sx={{ textTransform: "capitalize" }}>{section}</h2>
+
+          <nav sx={{ mb: 2 }}>
+            {nodes.map(node => (
+              <li
+                sx={{ listStyle: "none" }}
+                key={node.childMdx.frontmatter.path}
+              >
+                <Link href={node.childMdx.frontmatter.path}>
+                  {node.childMdx.frontmatter.title}
+                </Link>
+              </li>
+            ))}
+          </nav>
+        </Fragment>
       ))}
-    </nav>
+    </Fragment>
   );
 };
 

diff --git a/src/components/features.tsx b/src/components/features.tsx
@@ -1,15 +1,17 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui";
-import { Grid, Link } from "@theme-ui/components";
+import { Grid } from "@theme-ui/components";
 import { AsyncIcon } from "./icons/async";
 import { ServerIcon } from "./icons/server";
 import { PythonicIcon } from "./icons/pythonic";
 import { TypingIcon } from "./icons/typing";
 import { ArrowRightIcon } from "./icons/arrow-right";
+import { Link } from "./link";
 
 type FeatureProps = {
   bg: string;
   icon?: React.SFC<any>;
+  href: string;
 };
 
 const Feature: React.SFC<FeatureProps> = ({
@@ -18,12 +20,14 @@ const Feature: React.SFC<FeatureProps> = ({
   ...props
 }) => (
   <Link
-    href="#"
     {...props}
     variant="feature"
     sx={{
       p: 4,
       my: 3,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
       color: "primary",
       textAlign: "left",
       textDecoration: "none",
@@ -59,16 +63,16 @@ const Feature: React.SFC<FeatureProps> = ({
 
 export const Features: React.SFC = () => (
   <Grid columns={[1, 2, 4]} gap={0} sx={{ my: 4, px: [4, 4, 0] }}>
-    <Feature bg="secondary" icon={AsyncIcon}>
+    <Feature href="/docs/concepts/async" bg="secondary" icon={AsyncIcon}>
       Async
     </Feature>
-    <Feature bg="muted" icon={ServerIcon}>
+    <Feature href="/docs/features/server" bg="muted" icon={ServerIcon}>
       Built-in server
     </Feature>
-    <Feature bg="secondary" icon={TypingIcon}>
+    <Feature href="/docs/concepts/type-hints" bg="secondary" icon={TypingIcon}>
       Typings
     </Feature>
-    <Feature bg="muted" icon={PythonicIcon}>
+    <Feature href="/docs/concept/pythonic" bg="muted" icon={PythonicIcon}>
       Pythonic API
     </Feature>
   </Grid>

diff --git a/src/components/link.tsx b/src/components/link.tsx
@@ -25,7 +25,7 @@ export const Link: React.SFC<LinkProps> = ({ children, href, ...props }) => {
 
   return (
     <ThemeLink {...props} as={LinkComponent} href={href} to={href}>
-      <Box sx={{ display: "inline-block", mr: isExternal ? 1 : 0 }}>
+      <Box as="span" sx={{ display: "inline-block", mr: isExternal ? 1 : 0 }}>
         {children}
       </Box>
 

diff --git a/src/gatsby-plugin-theme-ui/index.js b/src/gatsby-plugin-theme-ui/index.js
@@ -1,3 +1,5 @@
+const PRIMARY_COLOR = "#f7393d";
+
 export default {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
@@ -21,7 +23,7 @@ export default {
   colors: {
     text: "#000000",
     background: "#fff",
-    primary: "#f7393d",
+    primary: PRIMARY_COLOR,
     secondary: "#FF9FA9",
     muted: "#FFCED3",
     accent: "#4a65ff",
@@ -48,7 +50,7 @@ export default {
         text: "#ffffff",
         background: "#171717",
         backgroundDark: "#171717",
-        primary: "#f7393d",
+        primary: PRIMARY_COLOR,
         accent: "#4a65ff",
 
         // nightowl theme
@@ -78,7 +80,7 @@ export default {
       textDecoration: "none",
       color: "text",
       marginRight: 4,
-      backgroundImage: "linear-gradient(red, red)",
+      backgroundImage: `linear-gradient(${PRIMARY_COLOR}, ${PRIMARY_COLOR})`,
       backgroundPosition: "0% 100%",
       backgroundRepeat: "no-repeat",
       backgroundSize: "0 2px",
@@ -110,7 +112,7 @@ export default {
     hero: {
       color: "text",
       display: "inline",
-      backgroundImage: "linear-gradient(red, red)",
+      backgroundImage: `linear-gradient(${PRIMARY_COLOR}, ${PRIMARY_COLOR})`,
       backgroundPosition: "0% 100%",
       backgroundRepeat: "no-repeat",
       backgroundSize: "100% 4px",
@@ -139,6 +141,9 @@ export default {
       fontWeight: "heading",
       my: "1em",
       fontSize: 4,
+      textDecoration: "underline",
+      textDecorationThickness: 2,
+      textDecorationColor: PRIMARY_COLOR,
     },
     h3: {
       color: "text",
@@ -178,6 +183,10 @@ export default {
       fontWeight: "body",
       lineHeight: "body",
       my: "1em",
+      code: {
+        backgroundColor: "muted",
+        padding: 1,
+      },
     },
     a: {
       color: "primary",
@@ -194,6 +203,8 @@ export default {
       fontFamily: "monospace",
       overflowX: "auto",
       padding: 3,
+      border: "2px solid",
+      borderColor: "primary",
 
       code: {
         color: "inherit",