tlaternet/tlaternet-templates
Archived
1
0
Fork 0
Code Issues 4 Pull requests Releases Wiki Activity

Introduce new parcel-based world order

Browse source 
Webpack was entirely and utterly unmaintainable. This commit throws it
out of the window into the gutter where it belongs, and rewrites the
entire repository so that it may work with parcel instead.
This commit is contained in:
Tristan Daniël Maat 2020-02-20 00:48:12 +09:00
parent 849168606f
commit 1b0aab1713
Signed by: tlater
GPG key ID: 49670FD774E43268
34 changed files with 3966 additions and 14075 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.dir-locals.el Normal file
View file

@ -0,0 +1,11 @@
;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")
((json-mode
(js-indent-level . 2))
(pug-mode
(tab-width . 2))
(scss-mode
(css-indent-offset . 2)))

3
.gitignore vendored
View file

@ -1,2 +1,3 @@
/dist/*
/node_modules/
/.parcel-cache/
/dist/

6
.parcelrc Normal file
View file

@ -0,0 +1,6 @@
{
"extends": "@parcel/config-default",
"transforms": {
"*.mp3": [ "@parcel/transformer-raw" ]
}
}

10143
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

47
package.json
View file

@ -2,36 +2,15 @@
"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": "^7.8.4",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^1.0.1",
"css-loader": "^2.1.0",
"exports-loader": "^0.7.0",
"favicons-webpack-plugin": "^3.0.1",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0-beta.11",
"jsdoc": "^3.5.5",
"jstransformer-markdown-it": "^2.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^2.3.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.2.1",
"webpack-merge": "^4.1.2"
"jstransformer-markdown-it": "^2.1.0",
"parcel": "^2.0.0-alpha.3.2",
"pug": "^2.0.4",
"sass": "^1.25.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.12.1",
@ -41,7 +20,21 @@
"three": "^0.101.1"
},
"scripts": {
"dev": "webpack --config webpack.config.js",
"build": "webpack --config webpack.prod.js"
"build": "parcel build --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
"serve": "parcel serve --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
"watch": "parcel watch --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
"build-dist": "parcel build --no-cache --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)"
},
"targets": {
"browser": {
"engines": {
"browsers": [
">1%",
"not dead"
]
},
"distDir": "dist",
"publicUrl": "https://tlater.net"
}
}
}

11
src/index/index.js → src/index.js
View file

@ -1,5 +1,4 @@
import "bootstrap";
import "./index.scss";
import $ from "jquery";
// Helpers
@ -105,11 +104,7 @@ class Typer {
}
}
// Application code
function main() {
// Type the head line
$(document).ready(() => {
let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
typer.type();
}
$(document).ready(main);
})

16
src/index/index.pug → src/index.pug
View file

@ -1,12 +1,15 @@
extends ../lib/pug/base
extends ./lib/pug/base
block content
noscript
block stylesheets
style.
.head-line .typed {
.no-js .head-line .typed {
visibility: visible;
}
.head-line .typed {
visibility: hidden;
}
block content
h1.head-line
| $&nbsp;
span.typed Welcome to tlater.net!
@ -67,4 +70,7 @@ block content
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.
- A [little web app](./music_sample.pug) showing off what Webgl can do in combination with the JavaScript Audio interface.
block footer
script(type="text/javascript" src="./index.js" defer)

6
src/index/index.scss
View file

@ -1,6 +0,0 @@
@import "../lib/scss/main";
@import "~bootstrap/scss/bootstrap";
.head-line .typed {
visibility: hidden;
}

3
src/lib/js/main.js Normal file
View file

@ -0,0 +1,3 @@
import $ from "jquery";
$(document).ready($("html").removeClass("no-js"));

11
src/lib/pug/base.pug
View file

@ -1,11 +1,13 @@
doctype html
html(lang="en")
html.no-js(lang="en")
head
meta(charset="utf-8")
meta(name="description", content="tlater.net web server")
meta(name="author", content="Tristan Daniel Maat")
meta(name="author", content="Tristan Daniël Maat")
meta(name="viewport", content="width=device-width, initial-scale=1")
title= htmlWebpackPlugin.options.title
link(rel="stylesheet", href="~/src/lib/scss/main.scss")
block stylesheets
title="tlater.net"
body
block navigation
include ./navigation
@ -14,4 +16,7 @@ html(lang="en")
include ./message-flash.html
block content
script(type="text/javascript", src="~/node_modules/jquery/dist/jquery.min.js" defer)
script(type="text/javascript", src="~/node_modules/bootstrap/dist/js/bootstrap.min.js" defer)
script(type="text/javascript", src="~/src/lib/js/main.js" defer)
block footer

2
src/lib/pug/navigation.pug
View file

@ -13,5 +13,5 @@ nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
#navbar.navbar-collapse.collapse
ul.navbar-nav.mr-auto
li.nav-item: a.nav-link(href="mail") E-Mail
li.nav-item: a.nav-link(href="~/src/mail.pug") E-Mail
li.nav-item: a.nav-link(href="https://www.github.com/TLATER") GitHub

49
src/lib/scss/_custom-bootstrap.scss
View file

@ -1,6 +1,6 @@
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "bootstrap/scss/_functions";
@import "bootstrap/scss/_variables";
@import "bootstrap/scss/_mixins";
// Theme colors
$green: #2aa889;
@ -14,8 +14,13 @@ $colors: (
);
$theme-colors: (
"info": $cyan,
"primary": $primary,
"secondary": $secondary,
"success": $green,
"info": $cyan,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
@ -56,3 +61,39 @@ $navbar-dark-hover-color: rgba($white, 90);
color: $white !important;
}
}
// Optional
@import "bootstrap/scss/_root";
@import "bootstrap/scss/_reboot";
@import "bootstrap/scss/_type";
@import "bootstrap/scss/_images";
@import "bootstrap/scss/_code";
@import "bootstrap/scss/_grid";
@import "bootstrap/scss/_tables";
@import "bootstrap/scss/_forms";
@import "bootstrap/scss/_buttons";
@import "bootstrap/scss/_transitions";
@import "bootstrap/scss/_dropdown";
@import "bootstrap/scss/_button-group";
@import "bootstrap/scss/_input-group";
@import "bootstrap/scss/_custom-forms";
@import "bootstrap/scss/_nav";
@import "bootstrap/scss/_navbar";
@import "bootstrap/scss/_card";
@import "bootstrap/scss/_breadcrumb";
@import "bootstrap/scss/_pagination";
@import "bootstrap/scss/_badge";
@import "bootstrap/scss/_jumbotron";
@import "bootstrap/scss/_alert";
@import "bootstrap/scss/_progress";
@import "bootstrap/scss/_media";
@import "bootstrap/scss/_list-group";
@import "bootstrap/scss/_close";
@import "bootstrap/scss/_toasts";
@import "bootstrap/scss/_modal";
@import "bootstrap/scss/_tooltip";
@import "bootstrap/scss/_popover";
@import "bootstrap/scss/_carousel";
@import "bootstrap/scss/_spinners";
@import "bootstrap/scss/_utilities";
@import "bootstrap/scss/_print";

24
src/lib/scss/_fonts.scss
View file

@ -3,13 +3,13 @@
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
src: url('../lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: url('~/src/lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */
src: local('Nunito Italic'), local('Nunito-Italic'),
url('../lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */
url('~/src/lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~/src/lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('~/src/lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */
}
/* nunito-regular - latin */
@ -17,11 +17,11 @@
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url('../lib/fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: url('~/src/lib/fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Nunito Regular'), local('Nunito-Regular'),
url('../lib/fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../lib/fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
url('~/src/lib/fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('~/src/lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('~/src/lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('~/src/lib/fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
}

4
src/lib/scss/main.scss
View file

@ -1,5 +1,3 @@
@import 'custom-bootstrap';
@import 'fonts';
/* @import 'fonts'; */
@import 'headings';
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

2
src/mail/mail.pug → src/mail.pug
View file

@ -1,4 +1,4 @@
extends ../lib/pug/base
extends ./lib/pug/base
block content
h1.head-line Contact me

2
src/mail/mail.js
View file

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

2
src/mail/mail.scss
View file

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

5
src/music/music.js
View file

@ -1,7 +1,4 @@
import "bootstrap";
import "./music.scss";
import music from "./Mseq_-_Journey.mp3";
import Player from "./player/index.js";
import Player from "./player/player.js";
window.player = new Player(music);

9
src/music/music.scss
View file

@ -1,7 +1,8 @@
@import "../lib/scss/main";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~bootstrap/scss/bootstrap";
// $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
// @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
// @import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "~/src/lib/scss/main";
#playerUI {
width: 100%;

2
src/music/player/controls.js vendored
View file

@ -1,3 +1,5 @@
import $ from "jquery";
/**
* _Text()
*

1
src/music/player/display.js
View file

@ -1,3 +1,4 @@
import $ from "jquery";
import Spectrum from "./backgrounds/Spectrum.js";
let backgrounds = {

1
src/music/player/index.js → src/music/player/player.js
View file

@ -1,3 +1,4 @@
import $ from "jquery";
import AudioManager from "./audio_manager";
import Controls from "./controls";
import Display from "./display";

6
src/music/music.pug → src/music_sample.pug
View file

@ -1,4 +1,7 @@
extends ../lib/pug/base
extends ./lib/pug/base
block stylesheets
link(rel="stylesheet", href="music/music.scss")
block footer
#playerUI.container-fluid
@ -8,3 +11,4 @@ block footer
.row
span#playerButton.col-1.playerControlsContent.fa.fa-fw.fa-spin.fa-spinner
#playerText.col-11.playerControlsContent Some text for now
script(type="text/javascript" src="./music/music.js")

7
src/pages/index.json
View file

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

7
src/pages/mail.json
View file

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

7
src/pages/music.json
View file

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

7
src/pages/startpage.json
View file

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

9
src/startpage/startpage.js
View file

@ -1,9 +0,0 @@
import "bootstrap";
import "./startpage.scss";
function print_time_recursively (element) {
element.html(new Date().toLocaleString());
setTimeout(() => print_time_recursively(element), 1000);
}
$(() => print_time_recursively($("#clock h1")));

9
src/startpage/startpage.pug
View file

@ -1,9 +0,0 @@
extends ../lib/pug/base
block navigation
block content
.container
.row
#clock.col-md-12
h1

7
src/startpage/startpage.scss
View file

@ -1,7 +0,0 @@
@import "../lib/scss/main";
@import "~bootstrap/scss/bootstrap";
#clock {
text-align: center;
padding-top: 20px;
}

107
webpack.common.js
View file

@ -1,107 +0,0 @@
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 MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FaviconsWebpackPlugin = require("favicons-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",
startpage: "./src/startpage/startpage.js",
music: "./src/music/music.js"
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist", "static")
},
plugins: [
new CleanWebpackPlugin("dist"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new MiniCssExtractPlugin(),
new FaviconsWebpackPlugin({
logo: path.resolve(__dirname, "src", "lib", "favicon.png"),
prefix: "../static/",
title: "tlater.net"
})
].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: MiniCssExtractPlugin.loader,
options: {
output: {
path: path.resolve(__dirname, "dist", "static")
}
}
}, {
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"
}]
},
{
test: /\.mp3$/,
use: [{
loader: "file-loader",
options: {
publicPath: "static/"
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{
loader: "file-loader"
}]
}
]
}
};

7
webpack.config.js
View file

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

19
webpack.prod.js
View file

@ -1,19 +0,0 @@
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = merge(common, {
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
},
devtool: "source-map",
mode: "production"
});

7457
yarn.lock
View file

File diff suppressed because it is too large Load diff