initial commit

.babelrc

@@ -0,0 +1,29 @@
+{
+    "plugins": [
+        [
+            "module-resolver",
+            {
+                "root": [
+                    "."
+                ],
+                "alias": {
+                    "styles": "./styles"
+                },
+                "cwd": "babelrc"
+            }
+        ],
+        [
+            "wrap-in-js",
+            {
+                "extensions": [
+                    "css$",
+                    "scss$"
+                ]
+            }
+        ]
+    ],
+    "presets": [
+        "next/babel"
+    ],
+    "ignore": []
+}

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.next
+.vscode
+out/
+node_modules
+yarn.lock
+package-lock.json

README.md

@@ -0,0 +1,3 @@
+# Next.js Starter with Global Sass Support
+
+A simple Next.js starter that supports global, hot-reloading stylesheets and Sass.

components/Banner.js

@@ -0,0 +1,18 @@
+const Banner = (props) => (
+    <section id="banner" className="major">
+        <div className="inner">
+            <header className="major">
+                <h1>Hi, my name is Forty</h1>
+            </header>
+            <div className="content">
+                <p>A responsive site template designed by HTML5 UP<br />
+                and released under the Creative Commons.</p>
+                <ul className="actions">
+                    <li><a href="#one" className="button next scrolly">Get Started</a></li>
+                </ul>
+            </div>
+        </div>
+    </section>
+)
+
+export default Banner

components/BannerLanding.js

@@ -0,0 +1,15 @@
+const BannerLanding = (props) => (
+    <section id="banner" className="style2">
+        <div className="inner">
+            <header className="major">
+                <h1>Landing</h1>
+            </header>
+            <div className="content">
+                <p>Lorem ipsum dolor sit amet nullam consequat<br />
+                sed veroeros. tempus adipiscing nulla.</p>
+            </div>
+        </div>
+    </section>
+)
+
+export default BannerLanding

components/Contact.js

@@ -0,0 +1,53 @@
+const Contact = (props) => (
+    <section id="contact">
+        <div className="inner">
+            <section>
+                <form method="post" action="#">
+                    <div className="field half first">
+                        <label htmlFor="name">Name</label>
+                        <input type="text" name="name" id="name" />
+                    </div>
+                    <div className="field half">
+                        <label htmlFor="email">Email</label>
+                        <input type="text" name="email" id="email" />
+                    </div>
+                    <div className="field">
+                        <label htmlFor="message">Message</label>
+                        <textarea name="message" id="message" rows="6"></textarea>
+                    </div>
+                    <ul className="actions">
+                        <li><input type="submit" value="Send Message" className="special" /></li>
+                        <li><input type="reset" value="Clear" /></li>
+                    </ul>
+                </form>
+            </section>
+            <section className="split">
+                <section>
+                    <div className="contact-method">
+                        <span className="icon alt fa-envelope"></span>
+                        <h3>Email</h3>
+                        <a href="#">[email protected]</a>
+                    </div>
+                </section>
+                <section>
+                    <div className="contact-method">
+                        <span className="icon alt fa-phone"></span>
+                        <h3>Phone</h3>
+                        <span>(000) 000-0000 x12387</span>
+                    </div>
+                </section>
+                <section>
+                    <div className="contact-method">
+                        <span className="icon alt fa-home"></span>
+                        <h3>Address</h3>
+                        <span>1234 Somewhere Road #5432<br />
+                        Nashville, TN 00000<br />
+                        United States of America</span>
+                    </div>
+                </section>
+            </section>
+        </div>
+    </section>
+)
+
+export default Contact

components/Footer.js

@@ -0,0 +1,18 @@
+const Footer = (props) => (
+    <footer id="footer">
+        <div className="inner">
+            <ul className="icons">
+                <li><a href="#" className="icon alt fa-twitter"><span className="label">Twitter</span></a></li>
+                <li><a href="#" className="icon alt fa-facebook"><span className="label">Facebook</span></a></li>
+                <li><a href="#" className="icon alt fa-instagram"><span className="label">Instagram</span></a></li>
+                <li><a href="#" className="icon alt fa-github"><span className="label">GitHub</span></a></li>
+                <li><a href="#" className="icon alt fa-linkedin"><span className="label">LinkedIn</span></a></li>
+            </ul>
+            <ul className="copyright">
+                <li>&copy; Untitled</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
+            </ul>
+        </div>
+    </footer>
+)
+
+export default Footer

components/Header.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+const Header = (props) => (
+    <header id="header" className="alt">
+        <Link href="/">
+            <a className="logo"><strong>Forty</strong> <span>by HTML5 UP</span></a>
+        </Link>
+        <nav>
+            <a className="menu-link" onClick={props.onToggleMenu} href="javascript:;">Menu</a>
+        </nav>
+    </header>
+)
+
+Header.propTypes = {
+    onToggleMenu: PropTypes.func
+}
+
+export default Header

components/Layout.js

@@ -0,0 +1,62 @@
+import Head from "next/head"
+import stylesheet from 'styles/main.scss'
+
+import Header from './Header'
+import Menu from './Menu'
+import Contact from './Contact'
+import Footer from './Footer'
+
+class Layout extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isMenuVisible: false,
+            loading: 'is-loading'
+        }
+        this.handleToggleMenu = this.handleToggleMenu.bind(this)
+    }
+
+    componentDidMount() {
+        this.timeoutId = setTimeout(() => {
+            this.setState({ loading: '' });
+        }, 100);
+    }
+
+    componentWillUnmount() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+    }
+
+    handleToggleMenu() {
+        this.setState({
+            isMenuVisible: !this.state.isMenuVisible
+        })
+    }
+
+    render() {
+        return (
+            <div className={`body ${this.state.loading} ${this.state.isMenuVisible ? 'is-menu-visible' : ''}`}>
+                <Head>
+                    <title>Next.js Starter</title>
+                    <meta name="description" content="Next.js Starter - Forty" />
+                    <link href="/static/css/skel.css" rel="stylesheet" />
+                    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
+                    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600,600i" rel="stylesheet" />
+                </Head>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+
+                <div id="wrapper">
+                    <Header onToggleMenu={this.handleToggleMenu} />
+                    {this.props.children}
+                    <Contact />
+                    <Footer />
+                </div>
+                <Menu onToggleMenu={this.handleToggleMenu} />
+
+            </div>
+        )
+    }
+}
+
+export default Layout

components/Menu.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+const Menu = (props) => (
+    <nav id="menu">
+        <div className="inner">
+            <ul className="links">
+                <li><Link href="/"><a><span onClick={props.onToggleMenu}>Home</span></a></Link></li>
+                <li><Link href="/landing"><a><span onClick={props.onToggleMenu}>Landing</span></a></Link></li>
+                <li><Link href="/generic"><a><span onClick={props.onToggleMenu}>Generic</span></a></Link></li>
+                <li><Link href="/elements"><a><span onClick={props.onToggleMenu}>Elements</span></a></Link></li>
+            </ul>
+            <ul className="actions vertical">
+                <li><a href="#" className="button special fit">Get Started</a></li>
+                <li><a href="#" className="button fit">Log In</a></li>
+            </ul>
+        </div>
+        <a className="close" onClick={props.onToggleMenu} href="javascript:;">Close</a>
+    </nav>
+)
+
+Menu.propTypes = {
+    onToggleMenu: PropTypes.func
+}
+
+export default Menu

next.config.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const glob = require('glob')
+
+module.exports = {
+  webpack: (config, { dev }) => {
+    config.module.rules.push(
+      {
+        test: /\.(css|scss)/,
+        loader: 'emit-file-loader',
+        options: {
+          name: 'dist/[path][name].[ext]'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['babel-loader', 'raw-loader', 'postcss-loader']
+      },
+      {
+        test: /\.s(a|c)ss$/,
+        use: ['babel-loader', 'raw-loader', 'postcss-loader',
+          { loader: 'sass-loader',
+            options: {
+              outputStyle: 'compressed', // These options are from node-sass: https://github.com/sass/node-sass
+              includePaths: ['styles', 'node_modules']
+                .map((d) => path.join(__dirname, d))
+                .map((g) => glob.sync(g))
+                .reduce((a, c) => a.concat(c), [])
+            }
+          }
+        ]
+      }
+    )
+    return config
+  },
+  exportPathMap: function(defaultPathMap) {
+    return {
+      '/': { page: '/' },
+      '/landing': { page: '/landing' },
+      '/generic': { page: '/generic' },
+      '/landing': { page: '/landing' }
+    }
+  }
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nextjs-starter-global-sass",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "export": "next build && next export"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "autoprefixer": "7.1.5",
+    "babel-plugin-module-resolver": "^2.7.1",
+    "babel-plugin-wrap-in-js": "^1.1.0",
+    "glob": "^7.1.2",
+    "next": "latest",
+    "node-sass": "^4.4.0",
+    "postcss-easy-import": "^3.0.0",
+    "postcss-loader": "^2.0.7",
+    "raw-loader": "^0.5.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "sass-loader": "^6.0.6"
+  }
+}