Remove pug in favor of a few posthtml plugins

Pug caused no end of issues and is frankly far too heavy-weight for
what I want.

As it turns out, there are posthtml plugins to do everything pug did
for me, so it's getting kicked out.
This commit is contained in:
Tristan Daniël Maat 2021-04-11 00:32:26 +01:00
parent 144e52df2b
commit db64e511d0
Signed by: tlater
GPG key ID: 49670FD774E43268
16 changed files with 756 additions and 1554 deletions

View file

@ -1,6 +1,16 @@
{ {
"plugins": { "plugins": {
"posthtml-md": {
"root": "src",
},
"posthtml-extend": {
"root": "src",
},
"posthtml-include": {
"root": "src",
},
"posthtml-favicons": { "posthtml-favicons": {
"root": "src",
"outDir": "./dist/browser/", "outDir": "./dist/browser/",
"configuration": { "configuration": {
"appName": "tlater.net", "appName": "tlater.net",
@ -23,4 +33,4 @@
}, },
}, },
}, },
}; }

File diff suppressed because it is too large Load diff

968
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -22,7 +22,6 @@
"devDependencies": { "devDependencies": {
"@babel/preset-env": "^7.10.4", "@babel/preset-env": "^7.10.4",
"@babel/preset-typescript": "^7.13.0", "@babel/preset-typescript": "^7.13.0",
"@parcel/transformer-pug": "2.0.0-beta.2",
"@parcel/transformer-sass": "2.0.0-beta.2", "@parcel/transformer-sass": "2.0.0-beta.2",
"@parcel/validator-typescript": "2.0.0-beta.2", "@parcel/validator-typescript": "2.0.0-beta.2",
"@types/jquery": "^3.5.0", "@types/jquery": "^3.5.0",
@ -35,8 +34,10 @@
"eslint": "^7.23.0", "eslint": "^7.23.0",
"jstransformer-markdown-it": "^2.1.0", "jstransformer-markdown-it": "^2.1.0",
"parcel": "2.0.0-beta.2", "parcel": "2.0.0-beta.2",
"posthtml-extend": "^0.6.0",
"posthtml-favicons": "^1.3.0", "posthtml-favicons": "^1.3.0",
"pug": "^3.0.2", "posthtml-include": "^1.7.0",
"posthtml-md": "^1.1.0",
"sass": "^1.26.10", "sass": "^1.26.10",
"typescript": "^4.2.4", "typescript": "^4.2.4",
"typescript-language-server": "^0.4.0" "typescript-language-server": "^0.4.0"
@ -46,10 +47,10 @@
}, },
"scripts": { "scripts": {
"preinstall": "npx npm-force-resolutions", "preinstall": "npx npm-force-resolutions",
"build": "parcel build --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)", "build": "parcel build --no-autoinstall src/index.html",
"serve": "parcel serve --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)", "serve": "parcel serve --no-autoinstall src/index.html",
"watch": "parcel watch --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)", "watch": "parcel watch --no-autoinstall src/index.html",
"build-dist": "parcel build --no-cache --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print); rename '.html' '.html.hbs' dist/browser/*.html" "build-dist": "parcel build --no-cache --no-autoinstall src/index.html; rename '.html' '.html.hbs' dist/browser/*.html"
}, },
"targets": { "targets": {
"browser": { "browser": {

92
src/index.html Normal file
View file

@ -0,0 +1,92 @@
<extends src="./lib/html/base.html">
<block name="stylesheets">
<style>
.no-js .head-line .typed {
visibility: visible;
}
.head-line .typed {
visibility: hidddden;
}
</style>
</block>
<block name="content">
<h1 class="head-line">
$&nbsp;<span class="typed">Welcome to tlater.net!</span>
</h1>
<hr />
<div class="row">
<div class="col-md-6">
<markdown>
#### About Me
Looks like you found my website. I suppose introductions are
in order.
My name's Tristan, I'm an avid Dutch-South African software
consultant working in the UK. You probably either met me at an
open source conference, a hackathon, a badminton session or at
a roleplaying table.
If not, well, this is also a great place to "meet" me. Have a
nosey!
#### This Website
There is not a whole lot here at the moment.
You may find the following interesting though:
</markdown>
<!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks -->
<ul>
<li>
A <a href="~/src/music_sample.html">little web app</a> showing off
what WebGL can do in combination with the JavaScript Audio
interface.
</li>
</ul>
</div>
<div class="col-md-6">
<markdown>
#### My Work
I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester,
UK. Our specializaiton is open source software, so this has
allowed me to directly contribute to a number of open source
projects, notably
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
an integration tool for large software stacks.
I've given a couple of talks on it, as well:
- Build meetup 2017
- Build meetup 2018
- Build meetup 2019
Outside of work for Codethink, I'm generally interested in
things such as NixOS and other tools that assist maintaining
Linux systems - mostly born out of my pursuit of the perfect
Linux desktop (feel free to have a browse through my
[dotfiles](https://github.com/tlater/dotfiles)).
I also just enjoy Programming, my core languages currently are
Rust, Python, Lisp and JavaScript (including a number of
frameworks and tools for these), although I have hopes to
eventually reduce these to just Rust ;)
If you're interested in seeing these things for yourself,
visit my [Gitlab](https://gitlab.com/tlater) and
[GitHub](https://github.com/tlater) pages.
</markdown>
</div>
</div>
</block>
<block name="footer">
<script type="text/javascript" src="./index.ts" defer></script>
</block>
</extends>

View file

@ -1,79 +0,0 @@
extends ./lib/pug/base
block stylesheets
style.
.no-js .head-line .typed {
visibility: visible;
}
.head-line .typed {
visibility: hidden;
}
block content
h1.head-line
| $&nbsp;
span.typed Welcome to tlater.net!
hr
.row
.col-md-6
:markdown-it
#### About Me
Looks like you found my website. I suppose introductions are
in order.
My name's Tristan, I'm an avid Dutch-South African software
consultant working in the UK. You probably either met me at an
open source conference, a hackathon, a badminton session or at
a roleplaying table.
If not, well, this is also a great place to "meet" me. Have a
nosey!
#### This Website
There is not a whole lot here at the moment.
You may find the following interesting though:
- A [little web app](./music_sample.pug) showing off what
WebGL can do in combination with the JavaScript Audio
interface.
.col-md-6
:markdown-it
#### My Work
I'm a software consultant working for
[Codethink](https://www.codethink.co.uk) in Manchester,
UK. Our specializaiton is open source software, so this has
allowed me to directly contribute to a number of open source
projects, notably
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
an integration tool for large software stacks.
I've given a couple of talks on it, as well:
- Build meetup 2017
- Build meetup 2018
- Build meetup 2019
Outside of work for Codethink, I'm generally interested in
things such as NixOS and other tools that assist maintaining
Linux systems - mostly born out of my pursuit of the perfect
Linux desktop (feel free to have a browse through my
[dotfiles](https://github.com/tlater/dotfiles)).
I also just enjoy Programming, my core languages currently are
Rust, Python, Lisp and JavaScript (including a number of
frameworks and tools for these), although I have hopes to
eventually reduce these to just Rust ;)
If you're interested in seeing these things for yourself,
visit my [Gitlab](https://gitlab.com/tlater) and
[GitHub](https://github.com/tlater) pages.
block footer
script(type="text/javascript" src="./index.ts" defer)

40
src/lib/html/base.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="tlater.net web server" />
<meta name="author" contnet="Tristan Daniël Maat" />
<meta name="viewport" content="width=device-width initial-scale=1" />
<link rel="icon" href="./icon.svg" type="image/x-icon" />
<link rel="stylesheet" href="~/src/lib/scss/main.scss" />
<block name="stylesheets"></block>
<title>tlater.net</title>
</head>
<body class="d-flex flex-column">
<block name="navigation">
<include src="lib/html/navigation.html"></include>
</block>
<div class="container floating-container">
<include src="lib/html/message-flash.html"></include>
<block name="content"></block>
</div>
<script
type="text/javascript"
src="~/node_modules/jquery/dist/jquery.min.js"
defer
></script>
<script
type="text/javascript"
src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"
defer
></script>
<script type="text/javascript" src="~/src/lib/js/main.ts" defer></script>
<block name="footer"></block>
</body>
</html>

View file

@ -0,0 +1,11 @@
{{#if flash}}
<div
class="alert alert-{{flash.type}} alert-dismissible fade show"
role="alert"
>
{{ flash.message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{{/if}}

View file

@ -0,0 +1,31 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">tlater</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar"
aria-controls="#navbar"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="navbar-collapse collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="~/src/mail.html">E-Mail</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.gitlab.com/tlater">GitLab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.github.com/TLATER">GitHub</a>
</li>
</ul>
</div>
</div>
</nav>

View file

@ -1,23 +0,0 @@
doctype html
html.no-js(lang="en")
head
meta(charset="utf-8")
meta(name="description", content="tlater.net web server")
meta(name="author", content="Tristan Daniël Maat")
meta(name="viewport", content="width=device-width, initial-scale=1")
link(rel="icon", href="./icon.svg", type="image/x-icon")
link(rel="stylesheet", href="~/src/lib/scss/main.scss")
block stylesheets
title="tlater.net"
body.d-flex.flex-column
block navigation
include ./navigation
.container.floating-container
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.ts" defer)
block footer

View file

@ -1,8 +0,0 @@
{{#if flash}}
<div class="alert alert-{{ flash.type }} alert-dismissible fade show" role="alert">
{{ flash.message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{{/if}}

View file

@ -1,18 +0,0 @@
nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
a.navbar-brand(href="/") tlater
button.navbar-toggler(
type="button",
data-toggle="collapse",
data-target="#navbar",
aria-controls="#navbar",
aria-expanded="false",
aria-label="Toggle navigation"
)
span.navbar-toggler-icon
#navbar.navbar-collapse.collapse
ul.navbar-nav.mr-auto
li.nav-item: a.nav-link(href="~/src/mail.pug") E-Mail
li.nav-item: a.nav-link(href="https://www.gitlab.com/tlater") GitLab
li.nav-item: a.nav-link(href="https://www.github.com/TLATER") GitHub

65
src/mail.html Normal file
View file

@ -0,0 +1,65 @@
<extends src="./lib/html/base.html">
<block name="content">
<h1 class="head-line">Contact Me</h1>
<div class="row">
<div class="col-md-6">
<form id="sendmail" role="form" action="mail.html" method="post">
<div class="form-group">
<label div="control-label" for="mail">Email address</label>
<input
id="mail"
class="form-control"
type="email"
placeholder="Your address"
name="mail"
required
/>
</div>
<div class="form-group">
<label div="control-label" for="subject">Subject</label>
<input
id="subject"
class="form-control"
type="text"
placeholder="E.g. There's a typo on your home page!"
name="subject"
autocomplete="off"
required
/>
</div>
<div class="form-group">
<label div="control-label" for="message">Message</label>
<textarea
id="message"
class="form-control"
type="text"
rows="6"
name="message"
autocomplete="off"
required
></textarea>
</div>
<button class="btn btn-primary" type="submit" form="sendmail">
Send
</button>
</form>
</div>
<div class="col-md-6">
<markdown>
Any messages you enter here are directly forwarded to me. I aim to
respond within a day.
Don't be upset about the form, I want to avoid the spam
publishing your email address brings with it... And minimize
the amount of mail that doesn't reach me, this form is an
exception in all my spam filters, you see ;)
</markdown>
</div>
</div>
</block>
</extends>

View file

@ -1,52 +0,0 @@
extends ./lib/pug/base
block content
h1.head-line Contact me
.row
//- The form
.col-md-6
form#sendmail(role="form", action="mail.html", method="post")
//- The sender address
.form-group
label.control-label(for="mail") Email address
input#mail.form-control(
type="email",
placeholder="Your address",
name="mail",
required
)
//- The subject line
.form-group
label.control-label(for="subject") Subject
input#subject.form-control(
type="text",
placeholder="E.g. There's a typo on your home page!",
name="subject",
autocomplete="off",
required
)
//- The message box
.form-group
label.control-label(for="message") Message
textarea#message.form-control(
type="text",
rows="6",
name="message",
autocomplete="off",
required
)
button.btn.btn-primary(type="submit", form="sendmail") Send
.col-md-6
:markdown-it
Any messages you enter here are directly forwarded to me. I aim to
respond within a day.
Don't be upset about the form, I want to avoid the spam
publishing your email address brings with it... And minimize
the amount of mail that doesn't reach me, this form is an
exception in all my spam filters, you see ;)

10
src/music_sample.html Normal file
View file

@ -0,0 +1,10 @@
<extends src="./lib/html/base.html">
<block name="stylesheets">
<link rel="stylesheet" , href="music/music.scss" />
</block>
<block name="footer">
<div id="playerUI" class="container-fluid flex-grow-1"></div>
<script type="text/javascript" src="./music/"></script>
</block>
</extends>

View file

@ -1,8 +0,0 @@
extends ./lib/pug/base
block stylesheets
link(rel="stylesheet", href="music/music.scss")
block footer
#playerUI.container-fluid.flex-grow-1
script(type="text/javascript" src="./music/")