forked from vercel/next.js
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding windicss example. This is my first pull request to next.js, so I am very sorry if I did something wrong. ## Documentation / Examples - [X] Make sure the linting passes by running `yarn lint` Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
- Loading branch information
Showing
11 changed files
with
234 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
# 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/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
*.pem | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
.pnpm-debug.log* | ||
|
||
# local env files | ||
.env*.local | ||
|
||
# vercel | ||
.vercel | ||
|
||
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# Next.js + WindiCSS Example | ||
|
||
This example shows how to use [WindiCSS](https://windicss.org/) with Next.js. | ||
|
||
## Deploy your own | ||
|
||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/hello-world) | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-windicss&project-name=with-windicss&repository-name=with-windicss) | ||
|
||
## How to use | ||
|
||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
||
```bash | ||
npx create-next-app --example with-windicss | ||
# or | ||
yarn create next-app --example with-windicss | ||
# or | ||
pnpm create next-app --example with-windicss | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
/** @type {import('next').NextConfig} */ | ||
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin') | ||
|
||
const nextConfig = { | ||
reactStrictMode: true, | ||
webpack: (config) => { | ||
config.plugins.push(new WindiCSSWebpackPlugin()) | ||
return config | ||
}, | ||
} | ||
|
||
module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"next": "latest", | ||
"react": "18.2.0", | ||
"react-dom": "18.2.0" | ||
}, | ||
"devDependencies": { | ||
"@types/node": "17.0.21", | ||
"@types/react": "17.0.40", | ||
"typescript": "4.6.2", | ||
"windicss": "3.5.1", | ||
"windicss-webpack-plugin": "1.6.7" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import '../styles/globals.css' | ||
import type { AppProps } from 'next/app' | ||
import 'windi.css' | ||
|
||
function MyApp({ Component, pageProps }: AppProps) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import type { NextPage } from 'next' | ||
import Head from 'next/head' | ||
import Image from 'next/image' | ||
|
||
const Home: NextPage = () => { | ||
return ( | ||
<div className="flex min-h-screen flex-col items-center justify-center py-2"> | ||
<Head> | ||
<title>Create Next App</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center"> | ||
<h1 className="text-6xl font-bold"> | ||
Welcome to{' '} | ||
<a className="text-blue-600" href="https://nextjs.org"> | ||
Next.js! | ||
</a> | ||
</h1> | ||
|
||
<p className="mt-3 text-2xl"> | ||
Get started by editing{' '} | ||
<code className="rounded-md bg-gray-100 p-3 font-mono text-lg"> | ||
pages/index.tsx | ||
</code> | ||
</p> | ||
|
||
<div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full"> | ||
<a | ||
href="https://nextjs.org/docs" | ||
className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Documentation →</h3> | ||
<p className="mt-4 text-xl"> | ||
Find in-depth information about Next.js features and API. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://nextjs.org/learn" | ||
className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Learn →</h3> | ||
<p className="mt-4 text-xl"> | ||
Learn about Next.js in an interactive course with quizzes! | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://github.com/vercel/next.js/tree/canary/examples" | ||
className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Examples →</h3> | ||
<p className="mt-4 text-xl"> | ||
Discover and deploy boilerplate example Next.js projects. | ||
</p> | ||
</a> | ||
|
||
<a | ||
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600" | ||
> | ||
<h3 className="text-2xl font-bold">Deploy →</h3> | ||
<p className="mt-4 text-xl"> | ||
Instantly deploy your Next.js site to a public URL with Vercel. | ||
</p> | ||
</a> | ||
</div> | ||
</main> | ||
|
||
<footer className="flex h-24 w-full items-center justify-center border-t"> | ||
<a | ||
className="flex items-center justify-center gap-2" | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> | ||
</a> | ||
</footer> | ||
</div> | ||
) | ||
} | ||
|
||
export default Home |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
html, | ||
body { | ||
padding: 0; | ||
margin: 0; | ||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, | ||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; | ||
} | ||
|
||
a { | ||
color: inherit; | ||
text-decoration: none; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"compilerOptions": { | ||
"target": "es5", | ||
"lib": ["dom", "dom.iterable", "esnext"], | ||
"allowJs": true, | ||
"skipLibCheck": true, | ||
"strict": true, | ||
"forceConsistentCasingInFileNames": true, | ||
"noEmit": true, | ||
"esModuleInterop": true, | ||
"module": "esnext", | ||
"moduleResolution": "node", | ||
"resolveJsonModule": true, | ||
"isolatedModules": true, | ||
"jsx": "preserve", | ||
"incremental": true | ||
}, | ||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], | ||
"exclude": ["node_modules"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { defineConfig } from 'windicss/helpers' | ||
|
||
export default defineConfig({ | ||
extract: { | ||
include: ['**/*.{jsx,tsx,css}'], | ||
exclude: ['node_modules', '.git', '.next'], | ||
}, | ||
}) |