Skip to content

Commit 2a12793

Browse files
shadcnshadcn
committed
feat(starters): add nextjs-starter-tutorial
0 parents  commit 2a12793

19 files changed

+3771
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["next/babel", "reflexjs/babel"]
3+
}

‎.gitignore

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
.next
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
lerna-debug.log*
28+
29+
# local env files
30+
.env.local
31+
.env.development.local
32+
.env.test.local
33+
.env.production.local
34+
35+
# vercel
36+
.vercel
37+
# Local Netlify folder
38+
.netlify

‎README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# reflexjs/nextjs-starter-tutorial
2+
3+
Use this starter to learn how to build a landing page with Next.js. See https://reflexjs.org/guides/build-landing-page-with-nextjs
4+
5+
## Getting Started
6+
7+
```sh
8+
npx create-next-app -e https://github.com/reflexjs/nextjs-starter-tutorial
9+
```
10+
11+
## Running your site
12+
13+
```sh
14+
cd site
15+
16+
npm run dev
17+
```
18+
19+
## Docs
20+
21+
Visit [https://reflexjs.org/docs](https://reflexjs.org/docs) to learn more about Nextjs and Reflexjs.
22+
23+
## License
24+
25+
Licensed under the [MIT license](https://github.com/reflexjs/reflexjs/blob/master/LICENSE).

‎next-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎next.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
images: {
3+
domains: ["localhost"],
4+
},
5+
}

‎package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "nextjs-starter-tutorial",
3+
"version": "0.0.1",
4+
"private": true,
5+
"license": "MIT",
6+
"scripts": {
7+
"dev": "next dev",
8+
"build": "next build",
9+
"preview": "next build && next start"
10+
},
11+
"dependencies": {
12+
"next": "^10.0.1",
13+
"react": "^16.14.0",
14+
"react-dom": "^16.14.0",
15+
"reflexjs": "^1.0.0"
16+
},
17+
"devDependencies": {
18+
"@babel/core": "^7.12.9",
19+
"@types/node": "^14.14.12",
20+
"@types/react": "^17.0.0",
21+
"typescript": "^4.1.2"
22+
}
23+
}

‎pages/_app.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as React from "react"
2+
import { AppProps } from "next/app"
3+
import { ThemeProvider } from "reflexjs"
4+
import theme from "../src/theme"
5+
6+
export default function App({ Component, pageProps }: AppProps) {
7+
return (
8+
<ThemeProvider theme={theme}>
9+
<Component {...pageProps} />
10+
</ThemeProvider>
11+
)
12+
}

‎pages/_document.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Document, { Html, Main, NextScript, Head } from "next/document"
2+
import { InitializeColorMode } from "reflexjs"
3+
4+
export default class extends Document {
5+
render() {
6+
return (
7+
<Html lang="en">
8+
<Head>
9+
<meta charSet="utf-8" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
13+
rel="stylesheet"
14+
/>
15+
</Head>
16+
<body>
17+
<InitializeColorMode />
18+
<Main />
19+
<NextScript />
20+
</body>
21+
</Html>
22+
)
23+
}
24+
}

‎pages/index.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Layout } from "@/components/layout"
2+
import Hero from "@/blocks/hero"
3+
4+
export default function IndexPage() {
5+
return (
6+
<Layout>
7+
<Hero
8+
heading="Welcome to Reflexjs"
9+
text="Get started by editing `pages/index.js`"
10+
image="/images/placeholder.jpg"
11+
/>
12+
</Layout>
13+
)
14+
}

‎public/images/placeholder.jpg

9.81 KB
Loading

‎src/blocks/hero.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Image from "next/image"
2+
3+
export default function Block({
4+
heading,
5+
text = null,
6+
image = null,
7+
...props
8+
}) {
9+
return (
10+
<section py="6|12|20" {...props}>
11+
<div variant="container" textAlign="center" py="16">
12+
{heading && <h1 variant="heading.h1">{heading}</h1>}
13+
{text && (
14+
<p variant="text.lead" mt="2">
15+
{text}
16+
</p>
17+
)}
18+
{image && (
19+
<div mt="6" rounded="lg">
20+
<Image src={image} width="500" height="350" />
21+
</div>
22+
)}
23+
</div>
24+
</section>
25+
)
26+
}

‎src/components/footer.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export function Footer({ copyright, ...props }) {
2+
return (
3+
<section py="8|10|12" {...props}>
4+
<div variant="container">
5+
{copyright && (
6+
<p variant="text.sm" textAlign="center" my="0">
7+
{copyright}
8+
</p>
9+
)}
10+
</div>
11+
</section>
12+
)
13+
}

‎src/components/layout.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import config from "@/config"
2+
import { Navbar } from "@/components/navbar"
3+
import { Footer } from "@/components/footer"
4+
5+
export function Layout({ children }) {
6+
const { site } = config
7+
return (
8+
<>
9+
<Navbar branding={site.branding} links={site.links} />
10+
<main>{children}</main>
11+
<Footer copyright={site.copyright} />
12+
</>
13+
)
14+
}

‎src/components/navbar.tsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import * as React from "react"
2+
import Link from "next/link"
3+
import { Icon } from "reflexjs"
4+
5+
export function Navbar({ branding, links, ...props }) {
6+
const [showMenu, setShowMenu] = React.useState(false)
7+
8+
return (
9+
<header py="6" {...props}>
10+
<div variant="container">
11+
<div display="flex" alignItems="center">
12+
{branding && (
13+
<Link href="/" passHref>
14+
<a
15+
display="flex"
16+
alignItems="center"
17+
_hover={{
18+
color: "primary",
19+
}}
20+
>
21+
{branding.icon && <Icon name={branding.icon} size="5" mr="2" />}
22+
<span fontWeight="semibold" fontSize="3xl|2xl">
23+
{branding.name}
24+
</span>
25+
</a>
26+
</Link>
27+
)}
28+
<NavLinks links={links} display="none|grid" />
29+
<button
30+
display="flex|none"
31+
p="2"
32+
size="14"
33+
ml="auto"
34+
onClick={() => setShowMenu(!showMenu)}
35+
>
36+
<Icon name="menu-alt" size="10" />
37+
</button>
38+
</div>
39+
</div>
40+
<div
41+
position="absolute"
42+
zIndex="1000"
43+
bg="background"
44+
top="24"
45+
left="4"
46+
right="4"
47+
px="4"
48+
rounded="xl"
49+
overflow="scroll"
50+
boxShadow="3xl"
51+
border="1px solid"
52+
borderColor="border"
53+
transform={`scale(${showMenu ? 1 : 0.95})`}
54+
visibility={showMenu ? "visible" : "hidden"}
55+
opacity={showMenu ? 1 : 0}
56+
transition="all .25s ease-in"
57+
transformOrigin="100% 0"
58+
maxHeight="95vh"
59+
display="block|none"
60+
>
61+
<NavLinks links={links} py="8" />
62+
</div>
63+
</header>
64+
)
65+
}
66+
67+
export function NavLinks({ links, ...props }) {
68+
return links.length ? (
69+
<div
70+
display="grid"
71+
col={`1|repeat(${links.length}, auto)`}
72+
gap="8|10|12"
73+
ml="auto"
74+
{...props}
75+
>
76+
{links.map((link, index) => (
77+
<Link key={index} href={link.href} passHref>
78+
<a
79+
variant="text"
80+
textAlign="left|center"
81+
fontSize="xl|md"
82+
px="4|0"
83+
_hover={{
84+
color: "primary",
85+
}}
86+
>
87+
{link.title}
88+
</a>
89+
</Link>
90+
))}
91+
</div>
92+
) : null
93+
}

‎src/config.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export default {
2+
site: {
3+
branding: {
4+
name: "Reflexjs",
5+
},
6+
copyright: `© ${new Date().getFullYear()} Reflexjs`,
7+
links: [
8+
{
9+
title: "Home",
10+
href: "/",
11+
},
12+
{
13+
title: "Docs",
14+
href: "https://reflexjs.org/docs",
15+
},
16+
{
17+
title: "GitHub",
18+
href: "https://github.com/reflexjs/reflexjs",
19+
},
20+
],
21+
},
22+
}

0 commit comments

Comments
 (0)