Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 14287cc

Browse files
justinTsugranesjustinTsugranes
committed
layout work
1 parent c007cd0 commit 14287cc

File tree

8 files changed

+82
-25
lines changed

8 files changed

+82
-25
lines changed

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,13 @@
11
# Next.js TailwindCSS Jest Babel Node.js Template
2+
3+
Next.js
4+
React.js
5+
TailwindCSS
6+
Jest
7+
Babel
8+
Node.js
9+
Prettier Plugin
10+
Heroicons
11+
PostCSS Purge
12+
ESLint
13+
Typscript

‎components/Layout.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default ({ children }) => {
2+
return (
3+
<div className="antialiased text-gray-900 flex items-center justify-center min-h-screen">
4+
{ children }
5+
</div>
6+
)
7+
}

‎package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"type-check": "tsc"
1111
},
1212
"dependencies": {
13+
"@heroicons/react": "^1.0.6",
1314
"isomorphic-unfetch": "3.0.0",
1415
"next": "12.2.4",
1516
"react": "18.2.0",

‎pages/_app.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import '../styles/globals.css'
33
import type { AppProps } from 'next/app'
4+
import Layout from '../components/Layout'
45

56
function MyApp({ Component, pageProps }: AppProps) {
67
return <Component {...pageProps} />

‎pages/index.tsx‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,43 @@
11
import * as React from 'react'
2+
import Layout from '../components/Layout'
23
import type { NextPage } from 'next'
34
import Head from 'next/head'
45
import Image from 'next/image'
6+
import { BeakerIcon } from '@heroicons/react/solid'
7+
/* https://heroicons.com/ */
58

69
const Home: NextPage = () => {
710
return (
8-
<div className='flex min-h-screen flex-col items-center justify-center py-2'>
9-
<Head>
11+
<Layout>
12+
<div className='min-h-screen flex-col py-2'>
13+
<Head >
1014
<title>NextJS Tailwind Template</title>
11-
<link rel='icon' href='/favicon.ico' />
1215
</Head>
1316

1417
<main>
15-
<h1>Hi! I'm Justin. Welcome to my Next Template.</h1>
18+
<h1 className='text-4xl font-bold text-blue-600 flex items-center justify-center min-h-screen'>
19+
Hi! I'm Justin. Welcome to my Next Template.</h1>
20+
<BeakerIcon className="h-5 w-5 text-blue-600" />
1621
</main>
1722

18-
<footer className='flex h-24 w-full items-center justify-center border-t'></footer>
19-
</div>
23+
<footer className='flex h-24 w-full items-center justify-center border-t'>
24+
<ul role="list">
25+
<li>Next.js</li>
26+
<li>React.ks</li>
27+
<li>TailwindCSS</li>
28+
<li>Jest</li>
29+
<li>Babel</li>
30+
<li>Node.js</li>
31+
<li>Prettier Plugin</li>
32+
<li>Heroicons</li>
33+
<li>PostCSS Purge</li>
34+
<li>ESLint</li>
35+
<li>Typescript</li>
36+
</ul>
37+
</footer>
38+
</div>
39+
</Layout>
2040
)
2141
}
2242

23-
export default Home
43+
export default Home

‎postcss.config.js‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1+
const purgecss = [
2+
"@fullhuman/postcss-purgecss",
3+
{
4+
content: ["./components/**/*.js", "./pages/**/*.js"],
5+
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
6+
}
7+
];
18
module.exports = {
29
plugins: [
3-
'tailwindcss',
4-
process.env.NODE_ENV === 'production'
5-
? [
6-
'@fullhuman/postcss-purgecss',
7-
{
8-
content: [
9-
'./pages/**/*.{js,jsx,ts,tsx}',
10-
'./components/**/*.{js,jsx,ts,tsx}',
11-
],
12-
defaultExtractor: (content) =>
13-
content.match(/[\w-/:]+(?<!:)/g) || [],
14-
},
15-
]
16-
: undefined,
17-
'postcss-preset-env',
18-
],
19-
}
10+
"postcss-import",
11+
"tailwindcss",
12+
"autoprefixer",
13+
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
14+
]
15+
};

‎yarn.lock‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1069,6 +1069,11 @@
10691069
"postcss" "7.0.32"
10701070
"purgecss" "^2.3.0"
10711071

1072+
"@heroicons/react@^1.0.6":
1073+
"integrity" "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ=="
1074+
"resolved" "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz"
1075+
"version" "1.0.6"
1076+
10721077
"@humanwhocodes/config-array@^0.10.4":
10731078
"integrity" "sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw=="
10741079
"resolved" "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz"
@@ -4301,7 +4306,7 @@
43014306
"resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
43024307
"version" "18.2.0"
43034308

4304-
"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@18.2.0":
4309+
"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@18.2.0":
43054310
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
43064311
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
43074312
"version" "18.2.0"

0 commit comments

Comments
 (0)