Browse Source

Migrating from custom Pug setup to Hugo

master
Mobius K 10 months ago
parent
commit
56031f7b24
  1. 6
      README.md
  2. BIN
      assets/apple-touch-icon.png
  3. 6
      assets/index.scss
  4. 17
      assets/index.ts
  5. 8
      assets/intervals.ts
  6. 10
      assets/jsconfig.json
  7. 17
      assets/manifest.json
  8. 3
      assets/sentry.ts
  9. 8
      config/_default/config.yaml
  10. 2
      config/primary/config.yaml
  11. 2
      config/secondary/config.yaml
  12. 9
      content/404.html
  13. 10
      content/500.html
  14. 46
      content/_index.html
  15. 5
      html/routes/404.pug
  16. 7
      html/routes/500.pug
  17. 39
      html/routes/index.pug
  18. 5
      html/routes/offline.pug
  19. 57
      html/templates/layout.pug
  20. 102
      layouts/_default/baseof.html
  21. 3
      layouts/_default/single.html
  22. 3
      layouts/index.html
  23. 43
      scripts/service-worker.ts
  24. 0
      static/en.json
  25. 0
      static/es.json
  26. 0
      static/favicon.ico
  27. 0
      static/icon.png
  28. 0
      static/logo.png

6
README.md

@ -4,7 +4,11 @@ Time management system.
## Sub-module layout
This project is a sub-module of a parent repository that contains dependency resolution files like NPM's `package.json` and Go's `go.mod`, some build tasks in a `Makefile`, and potentially necessary shared code among many other projects.
This project is a sub-module of a parent repository that contains some shared sources:
- Dependency resolution files like NPM's `package.json` and Go's `go.mod`
- Build tasks in a `Makefile`
- Various code and other scripts
It adds some complexity but helps me maintain several similar projects more efficiently.
To setup the necessary structure:
```bash

BIN
assets/apple-touch-icon.png

Before

Width: 192  |  Height: 192  |  Size: 17 KiB

6
styles/index.scss → assets/index.scss

@ -21,9 +21,9 @@ $progress-bar-background: $primary-brand;
$progress-height: 5px;
$progress-margin-vertical: 0;
@import "uikit/src/scss/variables";
@import "uikit/src/scss/mixins";
@import "uikit/src/scss/uikit";
@import "node_modules/uikit/src/scss/variables";
@import "node_modules/uikit/src/scss/mixins";
@import "node_modules/uikit/src/scss/uikit";
// Content wrapper

17
scripts/index.ts → assets/index.ts

@ -1,23 +1,6 @@
import { release } from "shared/config/build.dev";
import { ErrorMonitor } from "shared/scripts/error-monitor";
import { I18n } from "shared/scripts/i18n";
import { Intervals } from "./intervals";
// Watch for errors and load service worker PWA functionality in production
if (release) {
new ErrorMonitor(
"pomodoro",
"https://460e632ac03d44c7a89480be3d25daa5@o127434.ingest.sentry.io/5178515"
);
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js").then();
});
}
}
// Declaring methods that will be called from the front-end templates
declare global {
interface Window {

8
scripts/intervals.ts → assets/intervals.ts

@ -30,17 +30,17 @@ export class Intervals {
/**
* Setting up our work progress indicator bar to react to application state
*/
private progressBar: HTMLInputElement | null = null;
private readonly progressBar: HTMLInputElement | null = null;
/**
* Slider controlling the rest interval duration
*/
private restSlider: HTMLInputElement | null;
private readonly restSlider: HTMLInputElement | null;
/**
* Slider controlling the work interval duration
*/
private workSlider: HTMLInputElement | null;
private readonly workSlider: HTMLInputElement | null;
/**
* Grab a reference to the interval progress bar and controlling sliders.
@ -52,7 +52,7 @@ export class Intervals {
this.restSlider = this.createSlider("restInterval");
this.workSlider = this.createSlider("workInterval");
const progressElement: Element | null = document.querySelector('.uk-progress');
const progressElement: Element | null = document.querySelector(".uk-progress");
if (progressElement != null) {
this.progressBar = <HTMLInputElement> progressElement;
}

10
assets/jsconfig.json

@ -0,0 +1,10 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"*"
]
}
}
}

17
assets/manifest.json

@ -1,17 +0,0 @@
{
"background_color": "#242424",
"display": "standalone",
"icons": [
{
"sizes": "512x512",
"src": "icon.png",
"type": "image/png",
"purpose": "any maskable"
}
],
"name": "Pomodoro",
"scope": "/",
"short_name": "Pomodoro",
"start_url": "/index.html",
"theme_color": "#C50000"
}

3
assets/sentry.ts

@ -0,0 +1,3 @@
import {ErrorMonitor} from "shared/scripts/error-monitor";
new ErrorMonitor("https://460e632ac03d44c7a89480be3d25daa5@o127434.ingest.sentry.io/5178515");

8
config/_default/config.yaml

@ -0,0 +1,8 @@
# Where to read files from (relative to parent mono-repo)
assetDir: pomodoro/assets
contentDir: pomodoro/content
dataDir: pomodoro/data
layoutDir: pomodoro/layouts
staticDir:
- shared/static
- pomodoro/static

2
config/primary/config.yaml

@ -0,0 +1,2 @@
# Hostname root
baseURL: "https://pomodoro.mobiusk.com/"

2
config/secondary/config.yaml

@ -0,0 +1,2 @@
# Hostname root
baseURL: "https://qa-pomodoro.mobiusk.com/"

9
content/404.html

@ -0,0 +1,9 @@
---
title: Content not found
url: 404.html
---
<p>
<a href="/">&lArr; Return to home page</a>
The file you are looking for doesn't exist here
</p>

10
content/500.html

@ -0,0 +1,10 @@
---
title: Error
url: 500.html
---
<p>
<a href="/">&lArr; Return to home page</a>
Something went wrong with this website.
An alert has likely been sent to me, but an email is the fastest way to get bugs fixed and is greatly appreciated.
</p>

46
content/_index.html

@ -0,0 +1,46 @@
---
title: Work intervals
---
<progress class="uk-progress" max="1" value="0"></progress>
<form class="uk-card uk-card-default uk-card-body uk-box-shadow-xlarge"
onsubmit="toggleInterval(); return false;"
>
<label for="workInterval">
<span id="workIntervalLabel"></span>
<span i18n="minuteWorkInterval"></span>
</label>
<input id="workInterval"
class="uk-range"
max="60"
min="5"
step="5"
type="range"
value="25"
>
<label for="restInterval">
<span id="restIntervalLabel"></span>
<span i18n="minuteRestInterval"></span>
</label>
<input id="restInterval"
class="uk-range"
max="60"
min="5"
step="5"
type="range"
value="5"
>
<p id="intervalDescription" i18n="ready"></p>
<button id="intervalButton" class="uk-button uk-button-default" type="submit">
<span i18n="start" hidden></span>
<span i18n="stop"></span>
</button>
</form>

5
html/routes/404.pug

@ -1,5 +0,0 @@
extends /pomodoro/html/templates/layout
block content
a(href="/") &lArr; Return to home page
p The file you are looking for doesn't exist here

7
html/routes/500.pug

@ -1,7 +0,0 @@
extends /pomodoro/html/templates/layout
block content
a(href="/") &lArr; Return to home page
p
| Something went wrong with this website.
| An alert has likely been sent to me, but an email is the fastest way to get bugs fixed and is greatly appreciated.

39
html/routes/index.pug

@ -1,39 +0,0 @@
extends /pomodoro/html/templates/layout
block content
progress.uk-progress(max="1" value="0")
form.uk-card.uk-card-default.uk-card-body.uk-box-shadow-xlarge(
onsubmit="toggleInterval(); return false;"
)
label(for="workInterval")
span#workIntervalLabel
span(i18n="minuteWorkInterval")
input#workInterval.uk-range(
max="60"
min="5"
step="5"
type="range"
value="25"
)
label(for="restInterval")
span#restIntervalLabel
span(i18n="minuteRestInterval")
input#restInterval.uk-range(
max="60"
min="5"
step="5"
type="range"
value="5"
)
p#intervalDescription(i18n="ready")
button#intervalButton.uk-button.uk-button-default(type="submit")
span(hidden i18n="start")
span(i18n="stop")

5
html/routes/offline.pug

@ -1,5 +0,0 @@
extends /pomodoro/html/templates/layout
block content
a(href="/") &lArr; Return to home page
p Please check your Internet connection, your request could not be completed.

57
html/templates/layout.pug

@ -1,57 +0,0 @@
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(name="description" content="Pomodoro time management system")
meta(name="theme-color" content="#5EBA61")
meta(name="viewport" content="width=device-width, initial-scale=1")
title Pomodoro
link(rel="shortcut icon" href="/favicon.ico")
link(rel="apple-touch-icon" href="/apple-touch-icon.png")
link(rel="stylesheet" href="/pomodoro.css")
link(rel="manifest" href="/manifest.json" crossorigin="use-credentials")
if release
script(src="/sentry.js" defer)
script(src="/pomodoro.js" defer)
body
.container.uk-text-center
header
h1
img(src="/logo.png", alt="Pomodoro", width="250px")
noscript This application requires JavaScript to run!
main
block content
footer
.uk-margin-bottom
button#enI18nButton(
class="uk-button uk-button-default"
onclick="languageChange('en')"
) English
button#esI18nButton(
class="uk-button uk-button-default uk-margin-left"
onclick="languageChange('es')"
) Español
h3.uk-margin-small-top
span(i18n="builtBy")
a(href="https://mobiusk.com") MobiusK
h3.uk-margin-small-top
span(i18n="artBy")
a(href="https://eluish.wixsite.com/portfolio") Eluish

102
layouts/_default/baseof.html

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Pomodoro time management system">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Pomodoro
{{ with .Params.Title }} - {{ . }} {{ end }}
</title>
<link rel="shortcut icon" href="/favicon.ico">
<!-- Parse styles -->
{{ $scss := resources.Get "index.scss" }}
{{ $style := $scss | toCSS $.Site.Params.scss }}
<!-- Parse scripts -->
{{ $script := resources.Get "index.ts" }}
{{ $sentry := resources.Get "sentry.ts" }}
{{ with $.Site.Params.ts }}
{{ $script = $script | babel | js.Build . }}
{{ $sentry = $sentry | babel | js.Build . }}
{{ end }}
<!-- Fingerprint assets -->
{{ if $.Site.Params.fingerprint.enabled }}
{{ with $.Site.Params.fingerprint.algorithm }}
{{ $style = $style | fingerprint . }}
{{ $script = $script | fingerprint . }}
{{ $sentry = $sentry | fingerprint . }}
{{ end }}
{{ end }}
<!-- Link assets -->
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ if $.Site.Params.sentry }}
<script src="{{ $sentry.RelPermalink }}" defer></script>
{{ end }}
<script src="{{ $script.RelPermalink }}" defer></script>
</head>
<body>
<div class="container uk-text-center">
<header>
<h1>
<img src="/logo.png" alt="Pomodoro" width="250px">
</h1>
<noscript>
This application requires JavaScript to run.
</noscript>
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
<div class="uk-margin-bottom">
<button id="enI18nButton" class="uk-button uk-button-default" onclick="languageChange('en')">
English
</button>
<button id="esI18nButton" class="uk-button uk-button-default uk-margin-left" onclick="languageChange('es')">
Español
</button>
</div>
<h3 class="uk-margin-small-top">
<span i18n="builtBy"></span>
<a href="https://mobiusk.com">MobiusK</a>
</h3>
<h3 class="uk-margin-small-top">
<span i18n="artBy"></span>
<a href="https://pixelle.cc">Elle</a>
</h3>
</footer>
</div>
</body>
</html>

3
layouts/_default/single.html

@ -0,0 +1,3 @@
{{ define "main" }}
{{ .Content }}
{{ end }}

3
layouts/index.html

@ -0,0 +1,3 @@
{{ define "main" }}
{{ .Content }}
{{ end }}

43
scripts/service-worker.ts

@ -1,43 +0,0 @@
import { ServiceWorkerCache } from "shared/scripts/service-worker-cache";
/* eslint-disable @typescript-eslint/ban-ts-comment */
// Cache manipulator
const cache: ServiceWorkerCache = new ServiceWorkerCache("replaceAtBuildWithDate");
// @ts-ignore Install the service worker and cache any files for offline use
self.addEventListener("install", (event: InstallEvent) => event.waitUntil(
cache.initialize([
"/404.html",
"/favicon.ico",
"/icon.png",
"/index.html",
"/manifest.json",
"/offline.html",
"/pomodoro.css",
"/pomodoro.js",
"/robots.txt",
"/sentry.js"
]).then(() =>
// @ts-ignore New service workers require a tab close and re-open to activate without this
self.skipWaiting()
)
));
// @ts-ignore Activate the service worker and remove previous caches
self.addEventListener("activate", (event: ExtendableEvent) => event.waitUntil(
cache.deletePreviousCaching().then(() =>
// @ts-ignore New service workers can immediately take control over current service workers
self.clients.claim()
)
));
// @ts-ignore Response priority: Cache > Network > Offline message
self.addEventListener("fetch", (event: FetchEvent) => event.respondWith(
cache.fetchOrFallback(
event.request,
() => fetch(event.request),
() => cache.match("/offline.html")
)
));

0
assets/en.json → static/en.json

0
assets/es.json → static/es.json

0
assets/favicon.ico → static/favicon.ico

0
assets/icon.png → static/icon.png

Before

Width: 512  |  Height: 512  |  Size: 31 KiB

After

Width: 512  |  Height: 512  |  Size: 31 KiB

0
assets/logo.png → static/logo.png

Before

Width: 804  |  Height: 147  |  Size: 24 KiB

After

Width: 804  |  Height: 147  |  Size: 24 KiB

Loading…
Cancel
Save