Update docs

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

Hide file tree

Showing 12 changed files with 4,619 additions and 2,977 deletions.
diff --git a/apollo.config.js b/apollo.config.js
@@ -2,7 +2,7 @@ module.exports = {
   client: {
     addTypename: false,
     excludes: [],
-    includes: ["./src/**/*.tsx","./src/**/*.ts","./node_modules/gatsby-source-contentful/src/*.js","./node_modules/gatsby-transformer-sharp/src/*.js","./node_modules/gatsby-image/src/*.js"],
+    includes: ["./src/**/*.tsx","./src/**/*.ts","./plugins/**/*.js","./node_modules/gatsby-source-contentful/src/*.js","./node_modules/gatsby-source-datocms/fragments/*.js","./node_modules/gatsby-transformer-sharp/src/*.js","./node_modules/gatsby-image/src/*.js"],
     service: {
       name: "gatsbySchema",
       localSchemaFile: "./schema.json"

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/package.json b/package.json
@@ -14,60 +14,60 @@
     "typescript"
   ],
   "dependencies": {
-    "@emotion/core": "^10.0.22",
-    "@mdx-js/mdx": "^1.5.1",
-    "@mdx-js/react": "^1.5.1",
-    "@theme-ui/components": "^0.2.46",
-    "@theme-ui/match-media": "^0.2.46",
-    "@theme-ui/prism": "^0.2.46",
-    "gatsby": "^2.17.6",
-    "gatsby-image": "^2.2.30",
-    "gatsby-plugin-codegen": "^1.0.7",
+    "@emotion/core": "^10.0.28",
+    "@mdx-js/mdx": "^1.5.8",
+    "@mdx-js/react": "^1.5.8",
+    "@theme-ui/components": "^0.3.1",
+    "@theme-ui/match-media": "^0.3.1",
+    "@theme-ui/prism": "^0.3.0",
+    "gatsby": "^2.20.25",
+    "gatsby-image": "^2.3.4",
+    "gatsby-plugin-codegen": "^1.1.0",
     "gatsby-plugin-favicon": "^3.1.6",
     "gatsby-plugin-google-fonts": "^1.0.1",
-    "gatsby-plugin-manifest": "^2.2.25",
-    "gatsby-plugin-mdx": "^1.0.54",
-    "gatsby-plugin-offline": "^3.0.17",
-    "gatsby-plugin-react-helmet": "^3.1.13",
-    "gatsby-plugin-sharp": "^2.2.34",
-    "gatsby-plugin-theme-ui": "^0.2.43",
-    "gatsby-plugin-typescript": "^2.1.15",
+    "gatsby-plugin-manifest": "^2.3.5",
+    "gatsby-plugin-mdx": "^1.1.9",
+    "gatsby-plugin-offline": "^3.1.4",
+    "gatsby-plugin-react-helmet": "^3.2.4",
+    "gatsby-plugin-sharp": "^2.5.6",
+    "gatsby-plugin-theme-ui": "^0.3.0",
+    "gatsby-plugin-typescript": "^2.3.3",
     "gatsby-remark-external-links": "0.0.4",
-    "gatsby-remark-images": "^3.1.28",
-    "gatsby-remark-prismjs": "^3.3.20",
-    "gatsby-remark-responsive-iframe": "^2.2.25",
-    "gatsby-source-filesystem": "^2.1.35",
+    "gatsby-remark-images": "^3.2.4",
+    "gatsby-remark-prismjs": "^3.4.3",
+    "gatsby-remark-responsive-iframe": "^2.3.3",
+    "gatsby-source-filesystem": "^2.2.4",
     "gatsby-source-git": "^1.0.2",
-    "gatsby-source-github-contributors": "^0.1.7",
-    "gatsby-source-graphql": "^2.1.21",
-    "gatsby-theme-style-guide": "^0.2.46",
-    "gatsby-transformer-remark": "^2.6.32",
-    "gatsby-transformer-sharp": "^2.3.1",
+    "gatsby-source-github-contributors": "^0.1.10",
+    "gatsby-source-graphql": "^2.4.2",
+    "gatsby-theme-style-guide": "^0.3.1",
+    "gatsby-transformer-remark": "^2.7.3",
+    "gatsby-transformer-sharp": "^2.4.6",
     "marksy": "^8.0.0",
     "prism-react-renderer": "^1.0.2",
-    "prismjs": "^1.17.1",
+    "prismjs": "^1.20.0",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "react-helmet": "^5.2.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^6.0.0",
     "react-use-mailchimp": "^0.4.0",
-    "styled-components": "^4.4.0",
-    "theme-ui": "^0.2.46",
-    "typescript": "^3.6.4"
+    "styled-components": "^5.1.0",
+    "theme-ui": "^0.3.1",
+    "typescript": "^3.8.3"
   },
   "devDependencies": {
-    "@types/node": "^12.11.7",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "@types/react-helmet": "^5.0.13",
-    "@types/theme-ui": "^0.2.3",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
-    "@typescript-eslint/parser": "^2.6.0",
-    "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "prettier": "^1.18.2"
+    "@types/node": "^13.13.0",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.6",
+    "@types/react-helmet": "^5.0.15",
+    "@types/theme-ui": "^0.3.1",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "prettier": "^2.0.4"
   },
   "repository": {
     "type": "git",

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} variant="docs-nav">
+                  {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={{ mr: isExternal ? 1 : 0 }}>
         {children}
       </Box>
 

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
@@ -1,6 +1,6 @@
 import { graphql, StaticQuery } from "gatsby";
 import * as React from "react";
-import Helmet from "react-helmet";
+import { Helmet } from "react-helmet";
 
 interface SEOProps {
   description?: string;
@@ -12,6 +12,18 @@ interface SEOProps {
 
 const socialImageUrl = "https://strawberry.rocks/social.png";
 
+const DETAILS_QUERY = graphql`
+  query DefaultSEOQuery {
+    site {
+      siteMetadata {
+        title
+        description
+        author
+      }
+    }
+  }
+`;
+
 const SEO: React.SFC<SEOProps> = ({
   description,
   lang,
@@ -20,7 +32,7 @@ const SEO: React.SFC<SEOProps> = ({
   title,
 }): JSX.Element => (
   <StaticQuery
-    query={detailsQuery}
+    query={DETAILS_QUERY}
     render={data => {
       const metaDescription = description || data.site.siteMetadata.description;
       return (
@@ -94,15 +106,3 @@ SEO.defaultProps = {
 };
 
 export default SEO;
-
-const detailsQuery = graphql`
-  query DefaultSEOQuery {
-    site {
-      siteMetadata {
-        title
-        description
-        author
-      }
-    }
-  }
-`;
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} />,
 };