diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..7b2dff6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel", "reflexjs/babel"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d3da95a --- /dev/null +++ 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 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..42b480b --- /dev/null +++ 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 new file mode 100644 index 0000000..7b7aa2c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..f351211 --- /dev/null +++ b/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + images: { + domains: ["localhost"], + }, +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..6edb2c3 --- /dev/null +++ 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 new file mode 100644 index 0000000..3f61069 --- /dev/null +++ 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 ( + + + + ) +} diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..798d8d1 --- /dev/null +++ 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 ( + + + + + + + + +
+ + + + ) + } +} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..d611f5c --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,14 @@ +import { Layout } from "@/components/layout" +import Hero from "@/blocks/hero" + +export default function IndexPage() { + return ( + + + + ) +} diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg new file mode 100644 index 0000000..fe518f0 Binary files /dev/null and b/public/images/placeholder.jpg differ diff --git a/src/blocks/hero.tsx b/src/blocks/hero.tsx new file mode 100644 index 0000000..6f6c91d --- /dev/null +++ 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 ( +
+
+ {heading &&

{heading}

} + {text && ( +

+ {text} +

+ )} + {image && ( +
+ +
+ )} +
+
+ ) +} diff --git a/src/components/footer.tsx b/src/components/footer.tsx new file mode 100644 index 0000000..7954d61 --- /dev/null +++ b/src/components/footer.tsx @@ -0,0 +1,13 @@ +export function Footer({ copyright, ...props }) { + return ( +
+
+ {copyright && ( +

+ {copyright} +

+ )} +
+
+ ) +} diff --git a/src/components/layout.tsx b/src/components/layout.tsx new file mode 100644 index 0000000..9cd913f --- /dev/null +++ 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 ( + <> + +
{children}
+