feat: add nextjs and gatsby starters

starters/gatsby-starter/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["babel-preset-gatsby", "reflexjs/babel"]
+}

starters/gatsby-starter/.env.example

@@ -0,0 +1 @@
+SITE_URL=http://localhost:8000

starters/gatsby-starter/.gitignore

@@ -0,0 +1,71 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity
+
+.netlify/

starters/gatsby-starter/README.md

@@ -0,0 +1,25 @@
+# reflexjs/gatsby-starter
+
+This is the base starter for kicking off your Gatsby project with Reflexjs.
+
+## Getting Started
+
+```sh
+gatsby new site reflexjs/gatsby-starter
+```
+
+## Running your site
+
+```sh
+cd site
+
+npm run dev
+```
+
+## Docs
+
+Visit [https://reflexjs.org/docs](https://reflexjs.org/docs) to learn more about Gatsby and Reflexjs.
+
+## License
+
+Licensed under the [MIT license](/~https://github.com/reflexjs/reflexjs/blob/master/LICENSE).

starters/gatsby-starter/gatsby-browser.js

@@ -0,0 +1 @@
+require("typeface-inter")

starters/gatsby-starter/gatsby-config.js

@@ -0,0 +1,19 @@
+require(`dotenv`).config()
+
+const theme = require("./src/theme")
+
+module.exports = {
+  siteMetadata: {
+    title: "Reflexjs",
+    description: "Starter for Reflexjs.",
+    siteUrl: process.env.SITE_URL || "http://localhost:8000",
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-reflexjs`,
+      options: {
+        theme,
+      },
+    },
+  ],
+}

starters/gatsby-starter/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "gatsby-starter",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "gatsby develop",
+    "build": "gatsby build",
+    "preview": "gatsby build && gatsby serve"
+  },
+  "dependencies": {
+    "babel-preset-gatsby": "^0.8.0",
+    "gatsby": "^2.26.1",
+    "gatsby-plugin-reflexjs": "^0.1.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "reflexjs": "^1.0.0-alpha.7",
+    "typeface-inter": "^1.1.13"
+  }
+}

starters/gatsby-starter/src/blocks/cards.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+export default function Block({
+  subheading,
+  heading,
+  text,
+  buttons,
+  cards,
+  columns = 3,
+  ...props
+}) {
+  return (
+    <section py="4|6|12|20" {...props}>
+      <div variant="container">
+        <div textAlign="center">
+          {subheading && <p variant="subheading">{subheading}</p>}
+          {heading && (
+            <h2 variant="heading.h1" lineHeight="1">
+              {heading}
+            </h2>
+          )}
+          {text && (
+            <p variant="text.lead" mt="2">
+              {text}
+            </p>
+          )}
+        </div>
+        {cards && (
+          <div display="grid" col={`1|2|${columns}`} gap="4|8" my="8|12">
+            {cards.map((card, index) => (
+              <Card key={index} {...card} />
+            ))}
+          </div>
+        )}
+        {buttons}
+      </div>
+    </section>
+  )
+}
+
+export function Card({ heading, text, image, link, ...props }) {
+  return (
+    <div borderWidth="1" rounded="lg" p="6" {...props}>
+      {image && <img w="full" mb="4" rounded="md" {...image} />}
+      <h4 variant="heading.h4">{heading}</h4>
+      {text && (
+        <p variant="text.paragraph text.sm" mt="1">
+          {text}
+        </p>
+      )}
+      {link}
+    </div>
+  )
+}

starters/gatsby-starter/src/blocks/hero.js

@@ -0,0 +1,56 @@
+import * as React from "react"
+
+export default function Block({
+  subheading,
+  heading,
+  text,
+  image,
+  imagePosition = "right",
+  buttons,
+  children,
+  ...props
+}) {
+  return (
+    <section py="6|12|20" {...props}>
+      <div variant="container">
+        <div
+          display="grid"
+          gridAutoFlow="dense"
+          col="1|1|2"
+          gap="8|8|12"
+          alignItems="center"
+        >
+          {image && (
+            <img
+              colStart={`null|null|${imagePosition === "left" ? 1 : 2}`}
+              w="full"
+              rounded="lg"
+              overflow="hidden"
+              {...image}
+            />
+          )}
+          <div
+            d="flex"
+            flexDirection="column"
+            alignItems="center|flex-start"
+            textAlign="center|left"
+          >
+            {subheading && <p variant="subheading">{subheading}</p>}
+            {heading && (
+              <h1 variant="heading.h1" lineHeight="1">
+                {heading}
+              </h1>
+            )}
+            {text && (
+              <p variant="text.lead" mt="4">
+                {text}
+              </p>
+            )}
+            {buttons}
+            {children}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

starters/gatsby-starter/src/components/footer.js

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+export function Footer({ copyright, ...props }) {
+  return (
+    <section py={[8, 10, 12]} {...props}>
+      <div variant="container">
+        {copyright && (
+          <p variant="text.sm" textAlign="center" my="0">
+            {copyright}
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}

starters/gatsby-starter/src/components/index.js

@@ -0,0 +1,3 @@
+export * from "./footer"
+export * from "./layout"
+export * from "./navbar"

starters/gatsby-starter/src/components/layout.js

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { Navbar, Footer } from "."
+import config from "../config"
+
+export function Layout({ children }) {
+  const { site } = config
+  return (
+    <>
+      <Navbar branding={site.branding} links={site.links} />
+      <main>{children}</main>
+      <Footer copyright={site.copyright} />
+    </>
+  )
+}

starters/gatsby-starter/src/components/navbar.js

@@ -0,0 +1,93 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { Icon } from "reflexjs"
+
+export function Navbar({ branding, links, ...props }) {
+  const [showMenu, setShowMenu] = React.useState(false)
+
+  return (
+    <header py="6" {...props}>
+      <div variant="container">
+        <div display="flex" alignItems="center">
+          {branding && (
+            <Link to="/">
+              <span
+                display="flex"
+                alignItems="center"
+                _hover={{
+                  color: "primary",
+                }}
+              >
+                {branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
+                <span fontWeight="semibold" fontSize="3xl|2xl">
+                  {branding.name}
+                </span>
+              </span>
+            </Link>
+          )}
+          <NavLinks links={links} display="none|grid" />
+          <button
+            display="flex|none"
+            p="2"
+            size="14"
+            ml="auto"
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            <Icon name="menu-alt" size="10" />
+          </button>
+        </div>
+      </div>
+      <div
+        position="absolute"
+        zIndex="1000"
+        bg="background"
+        top="24"
+        left="4"
+        right="4"
+        px="4"
+        rounded="xl"
+        overflow="scroll"
+        boxShadow="3xl"
+        border="1px solid"
+        borderColor="border"
+        transform={`scale(${showMenu ? 1 : 0.95})`}
+        visibility={showMenu ? "visible" : "hidden"}
+        opacity={showMenu ? 1 : 0}
+        transition="all .25s ease-in"
+        transformOrigin="100% 0"
+        maxHeight="95vh"
+        display="block|none"
+      >
+        <NavLinks links={links} py="8" />
+      </div>
+    </header>
+  )
+}
+
+export function NavLinks({ links, ...props }) {
+  return links.length ? (
+    <div
+      display="grid"
+      col={`1|repeat(${links.length}, auto)`}
+      gap="8|10|12"
+      ml="auto"
+      {...props}
+    >
+      {links.map((link, index) => (
+        <Link key={index} to={link.href}>
+          <span
+            variant="text"
+            textAlign="left|center"
+            fontSize="xl|md"
+            px="4|0"
+            _hover={{
+              color: "primary",
+            }}
+          >
+            {link.title}
+          </span>
+        </Link>
+      ))}
+    </div>
+  ) : null
+}