a basic next.js template

Author: noeljackson

README.md

@@ -1 +1,3 @@
-# next.js-example-template
+# next.js-example-template
+
+next.js site template that maps optimizes static assets and serves favicons, Dockerfile included.

components/Container.js

@@ -0,0 +1,10 @@
+import Link from 'next/link'
+import Head from 'next/head'
+
+export default ({ children, id, className }) => (
+  <div className={`content-container ${className}`} id={id}>
+    <div className="sleeve">
+    { children }
+    </div>
+  </div>
+)

components/MarkdownText.js

@@ -0,0 +1,71 @@
+'use strict';
+
+import React from 'react';
+import Markdown from 'remarkable';
+import Link from 'next/prefetch'
+
+
+
+var Remarkable = React.createClass({
+
+  getDefaultProps() {
+    return {
+      container: 'div',
+      options: {}
+    };
+  }
+
+  render() {
+
+    var Container = this.props.container;
+
+    return (
+      <Container>
+        {this.content()}
+      </Container>
+    );
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    if (nextProps.options !== this.props.options) {
+      this.md = new Markdown(nextProps.options);
+    }
+  }
+
+  content() {
+
+    if (this.props.source) {
+      return <span id={this.props.id} dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
+    }
+    else {
+      return React.Children.map(this.props.children, child => {
+        if (typeof child === 'string') {
+
+          return <span id={this.props.id} dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
+        }
+        else {
+          return child;
+        }
+      });
+    }
+  }
+
+  renderMarkdown(source) {
+
+    if (!this.md) {
+      this.md = new Markdown(this.props.options);
+    }
+
+    let sourcetomodify = source;
+
+    let regexpattern = "<a href\=(\"|\')((https?:\/\/" + encodeURIComponent() + '|\.\.|\.|\/).+\/?)(\"|\')>([^"]+)<\/a>';
+
+    let sourcemodified = sourcetomodify.replace(new RegExp(regexpattern, "gm"), "<Link to=$2>$5<\/Link>" );
+
+    return this.md.render(source);
+
+  }
+
+});
+
+export default Remarkable;

components/SVGIMG.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+
+const SVGIMG = React.createClass({
+ render() {
+   const SvgSrc = this.props.src;
+
+   return (
+     <div dangerouslySetInnerHTML={{ __html: SvgSrc  }} />
+   )
+ }
+})
+
+export default SVGIMG

gulpfile.js

@@ -0,0 +1,21 @@
+const gulp = require('gulp');
+const imagemin = require('gulp-imagemin');
+var del = require('del');
+
+var paths = {
+   images: [  './static/**/*(*.jpg|*.svg|*.gif|*.png)', '!./static/o/**/*' ]
+ , imagesoptimized: './static/o/'
+};
+
+gulp.task('clean', function() {
+  // You can use multiple globbing patterns as you would with `gulp.src`
+  return del( paths.imagesoptimized );
+});
+
+gulp.task('images', ['clean'], () =>
+  gulp.src(paths.images)
+    .pipe( imagemin({optimizationLevel: 5}) )
+    .pipe( gulp.dest( paths.imagesoptimized ) )
+);
+
+gulp.task('default', ['watch', 'scripts', 'images']);

next.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  webpack: (config, { dev }) => {
+    config.module.rules.push(
+      {
+        test: /\.(css|scss|svg|jpg)/,
+        loader: 'emit-file-loader',
+        options: {
+          name: 'dist/[path][name].[ext]'
+        }
+      }
+    ,
+    {
+      test: /\.(svg|jpg)$/,
+      loader: 'babel-loader!raw-loader'
+    }
+  ,
+      {
+        test: /\.css$/,
+        loader: 'babel-loader!raw-loader!sass-loader'
+      }
+    ,
+      {
+        test: /\.scss$/,
+        loader: 'babel-loader!raw-loader!sass-loader'
+      }
+    )
+    return config
+  }
+}

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "optimized",
+  "version": "1.0.0",
+  "description": "https://optimized.technology",
+  "repository": "https://github.com/optimized/optimized.technology",
+  "license": "GPLv3",
+  "dependencies": {
+    "babel-loader": "^6.3.2",
+    "babel-plugin-wrap-in-js": "^1.1.0",
+    "css-loader": "^0.26.1",
+    "next": "^2.0.0-beta.31",
+    "node-sass": "^4.4.0",
+    "normalize.css": "^5.0.0",
+    "raw-loader": "^0.5.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-markdown": "^2.4.4",
+    "remarkable": "^1.7.1",
+    "sass-loader": "^4.1.1",
+    "webpack": "^2.2.1"
+  },
+  "devDependencies": {
+    "del": "^2.2.2",
+    "gulp": "^3.9.1",
+    "gulp-imagemin": "^3.1.1",
+    "now": "^4.5.6"
+  },
+  "scripts": {
+    "dev": "node server.js",
+    "build": "gulp images && next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "babel": {
+    "plugins": [
+      [
+        "wrap-in-js",
+        {
+          "extensions": [
+            "css$",
+            "scss$",
+            "jpg$",
+            "svg$"
+          ]
+        }
+      ]
+    ],
+    "presets": [
+      "next/babel"
+    ],
+    "ignore": []
+  }
+}

pages/_document.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Document, { Head, Main, NextScript } from 'next/document';
+import normalize from '../node_modules/normalize.css/normalize.css';
+import stylesheet from './styles.scss';
+
+export default class MyDocument extends Document {
+    render() {
+        return (
+            <html>
+                <Head>
+                <meta name="viewport" content="initial-scale=1" />
+                <style dangerouslySetInnerHTML={{ __html: normalize + stylesheet }} />
+                </Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </html>
+        );
+    }
+}

pages/index.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import Link from 'next/prefetch'
+import SVGIMG from '../components/SVGIMG.js'
+import logo from '../static/logo.svg';
+import clientlogos from '../static/logos-clients.svg';
+import bg from '../static/header-background-gray.svg';
+import Markdown from '../components/MarkdownText.js';
+import Container from '../components/Container.js';
+
+// If you are using `css-loader` with CSS modules,
+// `styles` would be an object containing the generated classnames
+
+class MyComponent extends React.Component {
+  static async getInitialProps({req}) {
+
+    return req
+      ? {
+        userAgent: req.headers['user-agent']
+      }
+      : {
+        userAgent: navigator.userAgent
+      }
+  }
+
+  render() {
+    return (
+      <main>
+        <header id="header">
+
+          <SVGIMG src={bg} />
+
+          <div id="logo">
+
+            <SVGIMG src={logo} />
+            <div id="description">
+            <Markdown source='This is one sentence.' options={{
+              html: true,
+              linkify: true,
+              typographer: true
+            }}/>
+            </div>
+          </div>
+
+        </header>
+
+        <Container id="intro">
+          <Markdown options={{
+            html: true,
+            linkify: true,
+            typographer: true
+          }}>
+            This is a short paragraph.
+
+            This is also a short paragraph.
+          </Markdown>
+        </Container>
+
+      </main>
+    );
+  }
+}
+
+export default MyComponent;