Initial commit

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "es6": true,
+        "browser": true,
+        "jquery": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "warn",
+            "always"
+        ],
+        "no-console": [
+            "off"
+        ],
+        "no-unused-vars": [
+            "warn"
+        ]
+    }
+}

.gitignore

@@ -0,0 +1,2 @@
+/dist/*
+/node_modules/

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "tlaternet",
+  "version": "1.0.0",
+  "description": "tlaternet web interface",
+  "main": "index.js",
+  "author": "Tristan Maat <tm@tlater.net>",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
+    "clean-webpack-plugin": "^0.1.19",
+    "css-loader": "^0.28.11",
+    "exports-loader": "^0.7.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.1.0",
+    "jstransformer-markdown-it": "^2.0.0",
+    "node-sass": "^4.8.3",
+    "postcss-loader": "^2.1.3",
+    "precss": "^3.1.2",
+    "pug": "^2.0.3",
+    "pug-loader": "^2.4.0",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.20.3",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-merge": "^4.1.2"
+  },
+  "dependencies": {
+    "bootstrap": "^4.0.0",
+    "jquery": "^3.3.1",
+    "popper.js": "^1.14.1"
+  },
+  "scripts": {
+    "dev": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.prod.js"
+  }
+}

src/index/index.js

@@ -0,0 +1,2 @@
+import "bootstrap";
+import "./index.scss";

src/index/index.pug

@@ -0,0 +1,62 @@
+extends ../lib/pug/base
+
+block content
+  h1 Welcome to tlater.net!
+  h5: em Your #1 site for useless time sinks
+
+  hr
+
+  .row
+    .col-md-6
+      :markdown-it
+        #### About Me
+
+        I am a 20 year old CS student currently studying in
+        Manchester, UK. Almost everything I do revolves around
+        computers, so when I am not working on them I spend my time
+        optimizing the way I work on them. As a consequence, I use
+        Linux regularly, and love to help others in the various
+        communities revolving around the OS.
+
+        My Linux background ensures that most of my projects involve
+        scripting languages like bash, lua or python, with the
+        occasional bit of pure C, and tools that are relevant to the
+        open source community, such as git, but I also have experience
+        with web development technologies such as PHP, SQL, NodeJS and
+        generic JavaScript.
+
+    .col-md-6
+      :markdown-it
+        #### My Work
+
+        Besides the webpage you are looking at right now and its
+        components, most of my side projects are accessible through my
+        [GitHub account](https://www.github.com/TLATER).
+
+        I am particularly proud of my [Linux
+        dotfiles](https://github.com/TLATER/dotfiles) which contain
+        several helper applications for emacs, Google Chrome, awesome
+        WM and others.
+
+  hr
+
+  .row
+    .col-md-6
+      :markdown-it
+        #### Contacting Me
+
+        The best way to contact me is probably through the [e-mail
+        form](mail). I will usually respond within a day. If this is
+        inconvenient for some reason, feel free to contact me through
+        GitHub.
+
+    .col-md-6
+      :markdown-it
+        #### This Website
+
+        There is not a whole lot here at the moment. I am planning on adding
+        several of my JavaScript toys, but few of them are ready to show off.
+
+        You may find the following interesting though:
+
+        - A [little web app](/music_sample) showing off what Webgl can do in combination with the JavaScript Audio interface.

src/index/index.scss

@@ -0,0 +1,2 @@
+@import "../lib/scss/custom-bootstrap";
+@import "~bootstrap/scss/bootstrap";

src/lib/pug/base.pug

@@ -0,0 +1,16 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="utf-8")
+    meta(name="description", content="tlater.net web server")
+    meta(name="author", content="Tristan Daniel Maat")
+    meta(name="viewport", content="width=device-width, initial-scale=1")
+    title= htmlWebpackPlugin.options.title
+  body
+    block navigation
+      include ./navigation
+
+    .container.floating-container
+      block content
+
+    block footer

src/lib/pug/navigation.pug

@@ -0,0 +1,24 @@
+nav.navbar.navbar-inverse.navbar-static-top
+  .container-fluid
+    .navbar-header
+      //- The navbar toggle button for small displays.
+      button.navbar-toggle.collapsed(
+          type="button",
+          data-toggle="collapse",
+          data-target="#navbar",
+          aria-expanded="false",
+          aria-controls="navbar"
+      )
+        span.sr-only Toggle navigation
+        span.icon-bar
+        span.icon-bar
+        span.icon-bar
+
+      //- The page title
+      a.navbar-brand(href="#") tlater
+
+    //- The actual navbar items
+    #navbar.navbar-collapse.collapse
+      ul.nav.navbar-nav
+        li: a(href="mail") E-Mail
+        li: a(href="https://www.github.com/TLATER") GitHub

src/lib/scss/custom-bootstrap.scss

@@ -0,0 +1,13 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+// @import "~nunito-fontface/css/nunito/nunito";
+
+$body-bg: #0f0f0f;
+$body-color: #dddddd;
+$headings-font-family: "Nunito", $font-family-base;
+$hr-border-color: #dddddd;
+
+.navbar .navbar-brand {
+  text-transform: uppercase;
+}

src/mail/mail.js

@@ -0,0 +1,2 @@
+import "bootstrap";
+import "./mail.scss";

src/mail/mail.pug

@@ -0,0 +1,4 @@
+extends ../lib/pug/base
+
+block content
+  p This is the mail page.

src/mail/mail.scss

@@ -0,0 +1,2 @@
+@import "../lib/scss/custom-bootstrap.scss";
+@import "~bootstrap/scss/bootstrap";

src/pages/index.json

@@ -0,0 +1,7 @@
+{
+    "hash": true,
+    "title": "tlater.net",
+    "filename": "./index.html",
+    "template": "./src/index/index.pug",
+    "chunks": ["index"]
+}

src/pages/mail.json

@@ -0,0 +1,7 @@
+{
+    "hash": true,
+    "title": "tlater.net contact",
+    "filename": "./mail.html",
+    "template": "./src/mail/mail.pug",
+    "chunks": ["mail"]
+}

webpack.common.js

@@ -0,0 +1,77 @@
+const fs = require("fs");
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+const PAGE_DIR = path.resolve(__dirname, "src", "pages");
+
+// Collect page configurations
+const page_files = fs.readdirSync(PAGE_DIR);
+
+const pages = page_files.map(page => JSON.parse(fs.readFileSync(
+    path.resolve(PAGE_DIR, page),
+    {encoding: "UTF-8"}
+)));
+
+module.exports = {
+    entry: {
+        index: "./src/index/index.js",
+        mail: "./src/mail/mail.js"
+    },
+    output: {
+        filename: "[name].bundle.js",
+        path: path.resolve(__dirname, "dist")
+    },
+    plugins: [
+        new CleanWebpackPlugin("dist"),
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery"
+        })
+    ].concat(pages.map(page => new HtmlWebpackPlugin(page))),
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /{node_modules}/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: ["babel-preset-env"]
+                    }
+                }
+            },
+            {
+                test: /.scss$/,
+                use: [{
+                    loader: "style-loader"
+                }, {
+                    loader: "css-loader"
+                }, {
+                    loader: "postcss-loader",
+                    options: {
+                        plugins: () => [
+                            require("precss"),
+                            require("autoprefixer")
+                        ]
+                    }
+                }, {
+                    loader: "sass-loader"
+                }]
+            },
+            {
+                test: /.html$/,
+                use: [{
+                    loader: "html-loader"
+                }]
+            },
+            {
+                test: /.pug$/,
+                use: [{
+                    loader: "pug-loader"
+                }]
+            }
+        ]
+    }
+};

webpack.config.js

@@ -0,0 +1,7 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    "mode": "development",
+    devtool: "cheap-eval-source-map"
+});

webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    devtool: "source-map",
+    mode: "production"
+});