Initial commit from Create Next App
This commit is contained in:
Chris Grimmett
commit
15d833deee
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# 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*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 Rogier van den Berg
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# About this project
|
||||
|
||||
|
||||
|
||||
Typescript boiler plate for [Next.js](https://nextjs.org/learn), using Typescript. See also my [DEV Community post](https://dev.to/rogiervandenberg/next-js-with-bulma-in-typescript-boilerplate-107p)
|
||||
|
||||
## How to start
|
||||
|
||||
* Create a project: `npx create-next-app my-website --use-npm --example "https://github.com/rogiervandenberg/nextjs-typescript-bulma-boilerplate"`
|
||||
* Run `npm run dev`
|
||||
* Build your own stuff!
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function Counter() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = `You clicked ${count} times`;
|
||||
});
|
||||
|
||||
function handleAlertClick() {
|
||||
setTimeout(() => {
|
||||
alert("You clicked on: " + count);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>You clicked {count} times</p>
|
||||
<button onClick={() => setCount(count + 1)}>Click me</button>
|
||||
<button onClick={handleAlertClick}>Show alert</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
|
||||
export const siteTitle = "Next.js Sample Website";
|
||||
|
||||
export default function Layout({
|
||||
children,
|
||||
home,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
home?: boolean;
|
||||
}) {
|
||||
/*
|
||||
* Added this to toggle the is-active class. See:
|
||||
*
|
||||
* https://bulma.io/documentation/components/navbar/#navbar-menu
|
||||
* https://github.com/jgthms/bulma/issues/856
|
||||
*/
|
||||
const toggleStyles = (event) => {
|
||||
document.querySelector("#burger").classList.toggle("is-active");
|
||||
document.querySelector("#navbarmenu").classList.toggle("is-active");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{siteTitle} {home ? "Homepage" : ""}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<header>
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<div className="navbar-brand">
|
||||
<a className="navbar-item">
|
||||
<img src="/images/vercel.svg" />
|
||||
</a>
|
||||
<a
|
||||
id="burger"
|
||||
onClick={toggleStyles}
|
||||
role="button"
|
||||
className="navbar-burger burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarmenu"
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbarmenu" className="navbar-menu">
|
||||
<div className="navbar-start">
|
||||
<Link href="/">
|
||||
<a className="navbar-item">Home</a>
|
||||
</Link>
|
||||
<Link href="/secondPage">
|
||||
<a className="navbar-item">Second page</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="buttons">
|
||||
<a
|
||||
onClick={() => alert("You clicked the button!")}
|
||||
className="button is-primary"
|
||||
>
|
||||
Click
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
{children}
|
||||
<footer className="footer">
|
||||
<div className="content has-text-centered">
|
||||
<span>I'm the footer</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const path = require("path");
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
sassOptions: {
|
||||
includePaths: [path.join(__dirname, "styles")],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "nextjs-typescript-bulma-boilerplate",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "^12.0.10",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"sass": "^1.49.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.14.6",
|
||||
"@types/react": "^16.9.55",
|
||||
"bulma": "^0.9.3",
|
||||
"eslint": "^8.8.0",
|
||||
"eslint-config-next": "12.0.10",
|
||||
"typescript": "4.5.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import "../styles/global.sass";
|
||||
import { AppProps } from "next/app";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Layout from "../components/layout";
|
||||
import Counter from "../components/counter";
|
||||
|
||||
const Index = () => (
|
||||
<Layout home>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h1 className="title">
|
||||
Hello World from <a href="https://nextjs.org/">Next.js</a> and{" "}
|
||||
<a href="https://bulma.io/">Bulma</a>!
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<Counter></Counter>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import Layout from "../components/layout";
|
||||
|
||||
const SecondPage = () => (
|
||||
<Layout>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h1 className="title">Second page</h1>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
export default SecondPage;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg height="50" viewBox="0 0 148 90" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z" fill="#000" fill-rule="nonzero"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
@charset "utf-8"
|
||||
|
||||
// Import a Google Font
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700')
|
||||
|
||||
// Set your brand colors
|
||||
$purple: #8A4D76
|
||||
$pink: #FA7C91
|
||||
$brown: #757763
|
||||
$beige-light: #D0D1CD
|
||||
$beige-lighter: #EFF0EB
|
||||
|
||||
// Update Bulma's global variables
|
||||
$family-sans-serif: "Nunito", sans-serif
|
||||
$grey-dark: $brown
|
||||
$grey-light: $beige-light
|
||||
$primary: $purple
|
||||
$link: $pink
|
||||
$widescreen-enabled: false
|
||||
$fullhd-enabled: false
|
||||
|
||||
// Update some of Bulma's component variables
|
||||
$body-background-color: $beige-lighter
|
||||
$control-border-width: 2px
|
||||
$input-border-color: transparent
|
||||
$input-shadow: none
|
||||
|
||||
// Import only what you need from Bulma
|
||||
@import "../node_modules/bulma/sass/utilities/_all.sass"
|
||||
@import "../node_modules/bulma/sass/base/_all.sass"
|
||||
@import "../node_modules/bulma/sass/elements/button.sass"
|
||||
@import "../node_modules/bulma/sass/elements/container.sass"
|
||||
@import "../node_modules/bulma/sass/elements/title.sass"
|
||||
@import "../node_modules/bulma/sass/form/_all.sass"
|
||||
@import "../node_modules/bulma/sass/components/navbar.sass"
|
||||
@import "../node_modules/bulma/sass/layout/hero.sass"
|
||||
@import "../node_modules/bulma/sass/layout/section.sass"
|
||||
|
||||
// @import "../node_modules/bulma/bulma.sass"
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue