Initial stab at the home

strawberry-graphql · Nov 1, 2019 · 69ecd5c · 69ecd5c
1 parent 6a9dc99
commit 69ecd5c
Show file tree

Hide file tree

Showing 20 changed files with 611 additions and 24 deletions.
diff --git a/content/home/hello-world.md b/content/home/hello-world.md
@@ -0,0 +1,16 @@
+```python
+import strawberry
+
+@strawberry.type
+class User:
+    name: str
+    age: int
+
+@strawberry.type
+class Query:
+    @strawberry.field
+    def user(self, info) -> User:
+        return User(name="Patrick", age=100)
+
+schema = strawberry.Schema(query=Query)
+```
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -9,6 +9,13 @@ module.exports = {
     author: `patrick91`,
   },
   plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `home`,
+        path: `${__dirname}/content/home/`,
+      },
+    },
     {
       resolve: "gatsby-plugin-codegen",
       options: {},

diff --git a/src/components/code-box.tsx b/src/components/code-box.tsx
@@ -0,0 +1,95 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui";
+import { Flex, Box } from "@theme-ui/components";
+
+const Background = props => (
+  <svg fill="none" viewBox="0 0 799 557" {...props}>
+    <path stroke="#FF9FA9" strokeWidth={4} d="M329 388h167v167H329z" />
+    <path
+      clipRule="evenodd"
+      d="M85.25 554.5c45.978 0 83.25-37.272 83.25-83.25S131.228 388 85.25 388 2 425.272 2 471.25s37.272 83.25 83.25 83.25z"
+      stroke="#FFCED3"
+      strokeWidth={4}
+    />
+    <path
+      clipRule="evenodd"
+      d="M713.25 441.5c45.978 0 83.25-37.272 83.25-83.25S759.228 275 713.25 275 630 312.272 630 358.25s37.272 83.25 83.25 83.25z"
+      stroke="#F7393D"
+      strokeWidth={4}
+    />
+    <path fill="#FFCED3" d="M371 0h167v167H371z" />
+    <mask id="prefix__a" fill="#fff">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M795.5 274.5v-72h-66v-72h-52v-72h-97v216h215z"
+      />
+    </mask>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M795.5 274.5v-72h-66v-72h-52v-72h-97v216h215z"
+      fill="#FF9FA9"
+    />
+    <path
+      d="M795.5 202.5h2v-2h-2v2zm0 72v2h2v-2h-2zm-66-72h-2v2h2v-2zm0-72h2v-2h-2v2zm-52 0h-2v2h2v-2zm0-72h2v-2h-2v2zm-97 0v-2h-2v2h2zm0 216h-2v2h2v-2zm213-72v72h4v-72h-4zm-64 2h66v-4h-66v4zm2-2v-72h-4v72h4zm-2-74h-52v4h52v-4zm-50 2v-72h-4v72h4zm-2-74h-97v4h97v-4zm-99 2v72h4v-72h-4zm0 72v72h4v-72h-4zm4 144v-72h-4v72h4zm213-2h-215v4h215v-4z"
+      fill="#FF9FA9"
+      mask="url(#prefix__a)"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M218 172h-72v66H74v52H2v97h216V172z"
+      fill="#F7393D"
+    />
+  </svg>
+);
+
+const Actions = props => (
+  <svg fill="none" viewBox="0 0 76 19" {...props}>
+    <path
+      d="M1.59 15.5h12.23"
+      stroke="#fff"
+      strokeWidth={2}
+      strokeLinecap="square"
+    />
+    <path stroke="#fff" strokeWidth={2} d="M32 4h11v11H32z" />
+    <path
+      d="M73.682 3.732l.707.707.707-.707-.707-.707-.707.707zm-.707.707l.707.707-.707-.707zm-.707-2.121l.707-.707-.707-.707-.707.707.707.707zm-.707.707l.707.707-.707-.707zM66.5 8.085l-.707.708.707.707.707-.707-.707-.707zm-5.06-5.06l-.708.707.707-.707zm-.708-.707l.707-.707-.707-.707-.707.707.707.707zm-1.414 1.414l-.707-.707-.707.707.707.707.707-.707zm.707.707l-.707.707.707-.707zm5.06 5.061l.708.707.707-.707-.707-.707-.707.707zm-5.792 5.793L60 16l-.707-.707zm-.707.707l-.707-.707-.707.707.707.707.707-.707zM60 17.414l-.707.707.707.707.707-.707-.707-.707zm.707-.707l.707.707-.707-.707zm5.793-5.793l.707-.707L66.5 9.5l-.707.707.707.707zm6.5 6.5l-.707.707.707.707.707-.707-.707-.707zM74.414 16l.707.707.707-.707-.707-.707-.707.707zm-6.5-6.5l-.707-.707-.707.707.707.707.707-.707zm5.061-6.475l-.707.707 1.414 1.414.707-.707-1.414-1.414zm-1.414 0l1.414 1.414 1.414-1.414-1.414-1.414-1.414 1.414zm.707.707l.707-.707-1.414-1.414-.707.707 1.414 1.414zm-5.06 5.06l5.06-5.06-1.414-1.414-5.061 5.06 1.414 1.415zm0-1.413l-5.062-5.061-1.414 1.414 5.06 5.06 1.415-1.413zm-5.062-5.061l-.707-.707-1.414 1.414.707.707 1.414-1.414zm-2.121-.707L58.61 3.025l1.414 1.414 1.414-1.414-1.414-1.414zM58.61 4.439l.707.707 1.414-1.414-.707-.707-1.414 1.414zm.707.707l5.06 5.061 1.415-1.414-5.061-5.061-1.414 1.414zM60 16l5.793-5.793-1.414-1.414-5.793 5.793L60 16zm-.707.707L60 16l-1.414-1.414-.707.707 1.414 1.414zm1.414 0l-1.414-1.414-1.414 1.414 1.414 1.414 1.414-1.414zM60 16l-.707.707 1.414 1.414.707-.707L60 16zm5.793-5.793L60 16l1.414 1.414 5.793-5.793-1.414-1.414zm0 1.414l5.793 5.793L73 16l-5.793-5.793-1.414 1.414zm5.793 5.793l.707.707 1.414-1.414L73 16l-1.414 1.414zm2.121.707l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zm1.414-2.828l-.707-.707L73 16l.707.707 1.414-1.414zm-.707-.707l-5.793-5.793-1.414 1.414L73 16l1.414-1.414zM72.268 3.732l-5.06 5.06 1.413 1.415 5.061-5.06-1.414-1.415z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export const CodeBox: React.SFC = ({ children, ...props }) => (
+  <div {...props} sx={{ position: "relative", overflowY: "hidden" }}>
+    <Background
+      sx={{
+        position: "absolute",
+      }}
+    />
+    <Box
+      sx={{
+        margin: 4,
+        borderWidth: 4,
+        borderColor: "primary",
+        borderStyle: "solid",
+        position: "relative",
+        zIndex: 1,
+      }}
+    >
+      <Flex
+        sx={{
+          padding: 3,
+          alignItems: "center",
+          justifyContent: "flex-end",
+          height: 50,
+          backgroundColor: "primary",
+        }}
+      >
+        <Actions height="18" />
+      </Flex>
+      {children}
+    </Box>
+  </div>
+);
diff --git a/src/components/docs-navigation.tsx b/src/components/docs-navigation.tsx
@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui";
-import { Link } from "@theme-ui/components";
 import { useStaticQuery, graphql } from "gatsby";
 
+import { Link } from "./link";
 import { DocsNavigationQuery } from "./__generated__/DocsNavigationQuery";
 
 export const DocsNavigation: React.SFC = () => {

diff --git a/src/components/features.tsx b/src/components/features.tsx
@@ -0,0 +1,74 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui";
+import { Grid, Link } 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";
+
+type FeatureProps = {
+  bg: string;
+  icon?: React.SFC<any>;
+};
+
+const Feature: React.SFC<FeatureProps> = ({
+  icon: Icon,
+  children,
+  ...props
+}) => (
+  <Link
+    href="#"
+    {...props}
+    sx={{
+      p: 4,
+      my: 2,
+      color: "primary",
+      textAlign: "left",
+      textDecoration: "none",
+      transition: "0.2s transform ease-out",
+      "&:hover": {
+        transform: "translate(0, -20px)",
+      },
+    }}
+  >
+    {Icon && (
+      <Icon
+        sx={{
+          display: "block",
+          my: 2,
+          mx: "auto",
+          fill: "primary",
+          height: 150,
+        }}
+      />
+    )}
+
+    {children}
+
+    <ArrowRightIcon
+      sx={{
+        ml: 3,
+        top: 10,
+        position: "relative",
+      }}
+    />
+  </Link>
+);
+
+export const Features: React.SFC = () => (
+  <Grid columns={[1, 2, 4]} gap={0} sx={{ my: 4 }}>
+    <Feature bg="secondary" icon={AsyncIcon}>
+      Async
+    </Feature>
+    <Feature bg="muted" icon={ServerIcon}>
+      Built-in server
+    </Feature>
+    <Feature bg="secondary" icon={TypingIcon}>
+      Typings
+    </Feature>
+    <Feature bg="muted" icon={PythonicIcon}>
+      Pythonic API
+    </Feature>
+  </Grid>
+);
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui";
+import { Box, Grid } from "@theme-ui/components";
+import { Logo } from "./logo";
+import { Link } from "./link";
+
+type NavItemProps = {
+  href: string;
+};
+
+const NavItem: React.SFC<NavItemProps> = ({ href, children }) => (
+  <Box as="li" sx={{ listStyle: "none" }}>
+    <Link sx={{ color: "white" }} href={href}>
+      {children}
+    </Link>
+  </Box>
+);
+
+export const Footer: React.SFC = () => (
+  <Box
+    as="footer"
+    sx={{
+      p: 5,
+      backgroundColor: "black",
+      color: "white",
+    }}
+  >
+    <Grid
+      columns={[4]}
+      sx={{
+        mx: "auto",
+        maxWidth: 1280,
+      }}
+    >
+      <Logo width="100" />
+      <nav>
+        <NavItem href="/docs">Documentation</NavItem>
+      </nav>
+      <nav></nav>
+      <nav>
+        <NavItem href="https://twitter.com/patrick91">Twitter</NavItem>
+        <NavItem href="https://twitter.com/patrick91">Github</NavItem>
+      </nav>
+    </Grid>
+  </Box>
+);
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui";
-import { Link, Flex } from "@theme-ui/components";
+import { Box, Flex } from "@theme-ui/components";
 import { useStaticQuery, graphql } from "gatsby";
 
 import { HeaderQuery } from "./__generated__/HeaderQuery";
 import { Logo } from "./logo";
+import { Link } from "./link";
 
 export const Header: React.SFC = () => {
   const { github } = useStaticQuery<HeaderQuery>(graphql`
@@ -23,32 +24,49 @@ export const Header: React.SFC = () => {
   `);
 
   return (
-    <Flex
+    <Box
       as="header"
       sx={{
-        padding: 2,
+        p: 2,
         maxWidth: 1280,
-        margin: 2,
-        marginLeft: "auto",
-        marginRight: "auto",
-        alignItems: "center",
-        justifyContent: "space-between",
+        my: 2,
+        mx: "auto",
+        display: "grid",
+        gridGap: 3,
+        gridAutoFlow: ["row", "column"],
+        gridTemplateColumns: ["repeat(2, 1fr)", "repeat(3, 1fr)"],
       }}
     >
-      <nav>
+      <Flex
+        sx={{
+          alignItems: "center",
+          justifyContent: "center",
+          gridColumnStart: [1, 2],
+          gridColumnEnd: [3, 3],
+          order: [0, 1],
+        }}
+      >
+        <Link href="/">
+          <Logo height="90" />
+        </Link>
+      </Flex>
+
+      <Flex
+        sx={{ justifyContent: "flex-start", alignItems: "center" }}
+        as="nav"
+      >
         <Link variant="nav" href="/docs">
           Docs
         </Link>
         <Link variant="nav" target="_blank" href={github.repository.url}>
           Github
         </Link>
-      </nav>
-      <Link href="/">
-        <Logo height="90" />
-      </Link>
-      <Link variant="version" href="#!">
-        {github.repository.releases.nodes[0].tagName}
-      </Link>
-    </Flex>
+      </Flex>
+      <Flex sx={{ justifyContent: "flex-end", alignItems: "center" }}>
+        <Link variant="version" href="#!">
+          {github.repository.releases.nodes[0].tagName}
+        </Link>
+      </Flex>
+    </Box>
   );
 };
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -0,0 +1,56 @@
+/** @jsx jsx */
+import { jsx } from "theme-ui";
+import { Heading, Flex, Box } from "@theme-ui/components";
+import { useStaticQuery, graphql } from "gatsby";
+import { MDXRenderer } from "gatsby-plugin-mdx";
+import { CodeBox } from "./code-box";
+
+export const Hero: React.SFC = () => {
+  const { file } = useStaticQuery(graphql`
+    query HelloWorldSnippetQuery {
+      file(
+        sourceInstanceName: { eq: "home" }
+        relativePath: { eq: "hello-world.md" }
+      ) {
+        childMdx {
+          body
+        }
+      }
+    }
+  `);
+
+  return (
+    <Flex
+      sx={{
+        padding: 2,
+        maxWidth: 1240,
+        marginLeft: "auto",
+        marginRight: "auto",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        display: ["block", null, "flex"],
+      }}
+    >
+      <Box
+        sx={{
+          flex: "0 0 400px",
+          marginTop: 4,
+          marginRight: 5,
+        }}
+      >
+        <Heading variant="hero">
+          Strawberry is a new GraphQL library for Python 3, inspired by
+          dataclasses.
+        </Heading>
+      </Box>
+      <CodeBox
+        sx={{
+          flex: "1 1 50%",
+          fontSize: 1,
+        }}
+      >
+        <MDXRenderer>{file.childMdx.body}</MDXRenderer>
+      </CodeBox>
+    </Flex>
+  );
+};