Update docs

strawberry-graphql · Apr 18, 2020 · 68dcb4e · 68dcb4e
1 parent 16d5f6d
commit 68dcb4e
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 26 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -6,7 +6,12 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const blogPostTemplate = path.resolve(`src/templates/docs.tsx`);
   const result = await graphql(`
     {
-      allFile(filter: { sourceInstanceName: { eq: "strawberry-repo" } }) {
+      allFile(
+        filter: {
+          sourceInstanceName: { eq: "strawberry-repo" }
+          extension: { eq: "md" }
+        }
+      ) {
         edges {
           node {
             relativePath

diff --git a/src/components/docs-navigation.tsx b/src/components/docs-navigation.tsx
@@ -15,7 +15,12 @@ const Nav: React.SFC = () => {
     allFile: { edges },
   } = useStaticQuery<DocsNavigationQuery>(graphql`
     query DocsNavigationQuery {
-      allFile(filter: { sourceInstanceName: { eq: "strawberry-repo" } }) {
+      allFile(
+        filter: {
+          sourceInstanceName: { eq: "strawberry-repo" }
+          extension: { eq: "md" }
+        }
+      ) {
         edges {
           node {
             childMdx {
@@ -30,17 +35,45 @@ const Nav: React.SFC = () => {
     }
   `);
 
+  const sections = {
+    general: [],
+    concepts: [],
+    features: [],
+  };
+
+  edges.map(({ node }) => {
+    for (const key of Object.keys(sections)) {
+      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/header.tsx b/src/components/header.tsx
@@ -61,7 +61,7 @@ export const Header: React.SFC = () => {
         }}
         as="nav"
       >
-        <Link variant="nav" href="/docs/">
+        <Link variant="nav" href="/docs/" partiallyActive={true}>
           Docs
         </Link>
         <Link variant="nav" target="_blank" href={github.repository.url}>

diff --git a/src/components/link.tsx b/src/components/link.tsx
@@ -9,14 +9,24 @@ type LinkProps = {
   href: string;
   variant?: string;
   target?: string;
+  partiallyActive?: boolean;
 };
 
-export const Link: React.SFC<LinkProps> = ({ children, href, ...props }) => {
+export const Link: React.SFC<LinkProps> = ({
+  children,
+  href,
+  partiallyActive,
+  ...props
+}) => {
   const isExternal = href.startsWith("http");
   const LinkComponent = isExternal
     ? ThemeLink
-    : ({ ...props }: { to: string }) => (
-        <GatsbyLink activeClassName="active" {...props} />
+    : (props: { to: string }) => (
+        <GatsbyLink
+          activeClassName="active"
+          partiallyActive={partiallyActive}
+          {...props}
+        />
       );
 
   if (props.target == "_blank") {
@@ -25,7 +35,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/components.js b/src/gatsby-plugin-theme-ui/components.js
@@ -1,8 +1,25 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui";
+
 import Prism from "@theme-ui/prism";
 import { Link } from "../components/link";
 
+// TODO: update branch to be master
+const getImageSrc = src => {
+  if (src.startsWith("./")) {
+    return src.replace(
+      "./",
+      "https://github.com/strawberry-graphql/strawberry/raw/feature/docs/docs/"
+    );
+  }
+
+  return src;
+};
+
 export default {
   pre: props => props.children,
   code: Prism,
   a: Link,
+  // eslint-disable-next-line react/display-name
+  img: ({ src, ...props }) => <img src={getImageSrc(src)} {...props} />,
 };
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,16 @@ export default {
       fontWeight: "body",
       lineHeight: "body",
       my: "1em",
+      code: {
+        backgroundColor: "muted",
+        padding: 1,
+      },
+    },
+    li: {
+      code: {
+        backgroundColor: "muted",
+        padding: 1,
+      },
     },
     a: {
       color: "primary",
@@ -194,6 +209,8 @@ export default {
       fontFamily: "monospace",
       overflowX: "auto",
       padding: 3,
+      border: "2px solid",
+      borderColor: "primary",
 
       code: {
         color: "inherit",