feat(starters): add nextjs-starter-tutorial

reflexjs · Feb 25, 2021 · 2a12793 · 2a12793
commit 2a12793
Show file tree

Hide file tree

Showing 19 changed files with 3,771 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel", "reflexjs/babel"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+.next
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+# Local Netlify folder
+.netlify
diff --git a/README.md b/README.md
@@ -0,0 +1,25 @@
+# reflexjs/nextjs-starter-tutorial
+
+Use this starter to learn how to build a landing page with Next.js. See https://reflexjs.org/guides/build-landing-page-with-nextjs
+
+## Getting Started
+
+```sh
+npx create-next-app -e https://github.com/reflexjs/nextjs-starter-tutorial
+```
+
+## Running your site
+
+```sh
+cd site
+
+npm run dev
+```
+
+## Docs
+
+Visit [https://reflexjs.org/docs](https://reflexjs.org/docs) to learn more about Nextjs and Reflexjs.
+
+## License
+
+Licensed under the [MIT license](https://github.com/reflexjs/reflexjs/blob/master/LICENSE).
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  images: {
+    domains: ["localhost"],
+  },
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "nextjs-starter-tutorial",
+  "version": "0.0.1",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "preview": "next build && next start"
+  },
+  "dependencies": {
+    "next": "^10.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "reflexjs": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/node": "^14.14.12",
+    "@types/react": "^17.0.0",
+    "typescript": "^4.1.2"
+  }
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,12 @@
+import * as React from "react"
+import { AppProps } from "next/app"
+import { ThemeProvider } from "reflexjs"
+import theme from "../src/theme"
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,24 @@
+import Document, { Html, Main, NextScript, Head } from "next/document"
+import { InitializeColorMode } from "reflexjs"
+
+export default class extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <meta charSet="utf-8" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <InitializeColorMode />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,14 @@
+import { Layout } from "@/components/layout"
+import Hero from "@/blocks/hero"
+
+export default function IndexPage() {
+  return (
+    <Layout>
+      <Hero
+        heading="Welcome to Reflexjs"
+        text="Get started by editing `pages/index.js`"
+        image="/images/placeholder.jpg"
+      />
+    </Layout>
+  )
+}
diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg
diff --git a/src/blocks/hero.tsx b/src/blocks/hero.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image"
+
+export default function Block({
+  heading,
+  text = null,
+  image = null,
+  ...props
+}) {
+  return (
+    <section py="6|12|20" {...props}>
+      <div variant="container" textAlign="center" py="16">
+        {heading && <h1 variant="heading.h1">{heading}</h1>}
+        {text && (
+          <p variant="text.lead" mt="2">
+            {text}
+          </p>
+        )}
+        {image && (
+          <div mt="6" rounded="lg">
+            <Image src={image} width="500" height="350" />
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -0,0 +1,13 @@
+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>
+  )
+}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -0,0 +1,14 @@
+import config from "@/config"
+import { Navbar } from "@/components/navbar"
+import { Footer } from "@/components/footer"
+
+export function Layout({ children }) {
+  const { site } = config
+  return (
+    <>
+      <Navbar branding={site.branding} links={site.links} />
+      <main>{children}</main>
+      <Footer copyright={site.copyright} />
+    </>
+  )
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -0,0 +1,93 @@
+import * as React from "react"
+import Link from "next/link"
+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 href="/" passHref>
+              <a
+                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>
+              </a>
+            </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} href={link.href} passHref>
+          <a
+            variant="text"
+            textAlign="left|center"
+            fontSize="xl|md"
+            px="4|0"
+            _hover={{
+              color: "primary",
+            }}
+          >
+            {link.title}
+          </a>
+        </Link>
+      ))}
+    </div>
+  ) : null
+}
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,22 @@
+export default {
+  site: {
+    branding: {
+      name: "Reflexjs",
+    },
+    copyright: `© ${new Date().getFullYear()} Reflexjs`,
+    links: [
+      {
+        title: "Home",
+        href: "/",
+      },
+      {
+        title: "Docs",
+        href: "https://reflexjs.org/docs",
+      },
+      {
+        title: "GitHub",
+        href: "https://github.com/reflexjs/reflexjs",
+      },
+    ],
+  },
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />