Browse Source

Migrating from custom Pug setup to Hugo

master
Mobius K 10 months ago
parent
commit
515d6710da
  1. 3
      .gitignore
  2. BIN
      assets/apple-touch-icon.png
  3. 0
      assets/index.scss
  4. 17
      assets/manifest.json
  5. BIN
      assets/screenshots/pomodoro.png
  6. 29
      config/_default/config.yaml
  7. 12
      config/development/config.yaml
  8. 2
      config/primary/config.yaml
  9. 2
      config/secondary/config.yaml
  10. 9
      content/404.html
  11. 10
      content/500.html
  12. 30
      content/_index.html
  13. 4
      html/routes/404.pug
  14. 5
      html/routes/500.pug
  15. 23
      html/routes/index.pug
  16. 4
      html/routes/offline.pug
  17. 59
      html/routes/pomodoro.pug
  18. 6
      html/templates/error.pug
  19. 34
      html/templates/layout.pug
  20. 67
      layouts/_default/baseof.html
  21. 3
      layouts/_default/single.html
  22. 3
      layouts/index.html
  23. 17
      scripts/index.ts
  24. 41
      scripts/service-worker.ts
  25. 0
      static/favicon.ico
  26. 0
      static/icon.png

3
.gitignore

@ -0,0 +1,3 @@
# Build system
hugo_stats.json
resources

BIN
assets/apple-touch-icon.png (Stored with Git LFS)

size 24895

0
styles/index.scss → assets/index.scss

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": "MobiusK Portfolio",
"scope": "/",
"short_name": "MobiusK",
"start_url": "/index.html",
"theme_color": "#538154"
}

BIN
assets/screenshots/pomodoro.png (Stored with Git LFS)

size 10594

29
config/_default/config.yaml

@ -0,0 +1,29 @@
# Write hugo_stats.json to use for CSS post-processing
build:
writeStats: true
# We don't want/need these content types
disableKinds:
- RSS
- sitemap
- taxonomy
- term
# We explicitly don't want taxonomies (https://gohugo.io/content-management/taxonomies/)
ignoreErrors:
- error-disable-taxonomy
# Minimize HTML
minify:
minifyOutput: true
# Available at $.Site.Params.<key> in templates
params:
scss:
outputStyle: compressed # expanded (largest), nested (default), compact, or compressed (smallest)
targetPath: portfolio.css
# Where to read static files from
staticDir:
- ../shared/assets/
- static

12
config/development/config.yaml

@ -0,0 +1,12 @@
# Write hugo_stats.json to use for CSS post-processing
build:
writeStats: false
# Minimize HTML
minify:
minifyOutput: false
# Available at $.Site.Params.<key> in templates
params:
scss:
outputStyle: expanded # expanded (largest), nested (default), compact, or compressed (smallest)

2
config/primary/config.yaml

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

2
config/secondary/config.yaml

@ -0,0 +1,2 @@
# Hostname root
baseURL: "https://qa.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>

30
content/_index.html

@ -0,0 +1,30 @@
---
title: Portfolio
---
<p>
<a href="https://pixelle.cc">Pixelle</a>
Illustration, concept art, and emote gallery
</p>
<!--
<p>
<a href="https://minecraft.mobiusk.com">MobiCraft</a>
Community MineCraft server
</p>
-->
<p>
<a href="https://mscloud.art">MsCloud Art</a>
Commission platform for artist
</p>
<p>
<a href="https://bluetooth-class.mobiusk.com">BlueTooth Class</a>
Helps build class codes for hcitool
</p>
<p>
<a href="https://pomodoro.mobiusk.com">Pomodoro</a>
Work interval manager utilizing timed periods of effort and rest
</p>

4
html/routes/404.pug

@ -1,4 +0,0 @@
extends /portfolio/html/templates/error
block message
| The file you are looking for doesn't exist here

5
html/routes/500.pug

@ -1,5 +0,0 @@
extends /portfolio/html/templates/error
block message
| 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.

23
html/routes/index.pug

@ -1,23 +0,0 @@
extends /portfolio/html/templates/layout
block content
p
a(href="https://pixelle.cc") Pixelle
| Illustration, concept art, and emote gallery
//- p
//- a(href="https://minecraft.mobiusk.com") MobiCraft
//- | Community MineCraft server
p
a(href="https://mscloud.art") MsCloud Art
| Commission platform for artist
p
a(href="https://bluetooth-class.mobiusk.com") BlueTooth Class
| Helps build class codes for hcitool
p
a(href="/pomodoro") Pomodoro
| Work interval manager utilizing timed periods of effort and rest

4
html/routes/offline.pug

@ -1,4 +0,0 @@
extends /portfolio/html/templates/error
block message
| Please check your Internet connection, your request could not be completed.

59
html/routes/pomodoro.pug

@ -1,59 +0,0 @@
extends /portfolio/html/templates/layout
block content
article
.center
h4
a(href="https://pomodoro.mobiusk.com") Pomodoro
a(href="/") &lArr; Return to home page
p
time(datetime="2019-03-06") Created March 2019
p
| #[a(href="https://en.wikipedia.org/wiki/Pomodoro_Technique") The Pomodoro Technique] is a method used to manage work and rest into small intervals.
| This was my first side-project after finishing a job using the same technology everyday and I desired a simple site to try new things.
| I decided to create my own timer to fulfill three main purposes:
ol
li Implement a dynamic system with timings and events
li Build a translation system for text
li Learn about browser notification possibilities
p
| The timings script is admittedly the sloppiest part of this project, but it works!
| And at the end of the day, something working sloppily is better than something clean not working.
| The user inputs for the work and rest intervals drive a simple
| #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval") setInterval]
| that loops until stopped.
| While looping it will change some label text and progress bar direction as needed.
| The interval interactions are #[a(href="https://gitlab.com/mobius_k/pomodoro/-/blob/master/scripts/intervals.ts") here].
p
| Making content available in multiple languages is a fun problem.
| Doing research on existing solutions seemed a little overblown for my needs.
| Instead I decided to build my own to get an idea of what goes into it.
| Translations are keys and values in JSON files that are loaded into memory.
| These keys are linked to elements with an "i18n" attribute which is a short-form of internationalization.
| #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver") Mutation observers]
| then watch for page changes to keep text translations up-to-date.
| That script can be found #[a(href="https://gitlab.com/mobius_k/mobius_k/-/blob/master/shared/scripts/i18n.ts") here].
p
| Browser notification possibilities offer a nice improvement to a computer-based work interval.
| Having a notification pop-up instead of requiring constant attention to the timer is helpful.
| Permission prompts for browser capabilities only show up when a work interval actually starts to avoid annoying pop-up on page load.
| My notifications script can be found #[a(href="https://gitlab.com/mobius_k/mobius_k/-/blob/master/shared/scripts/notifications.ts") here].
| Notifications are easily abused so hopefully users of the site are OK with this.
| I am excited to work with other browser capabilities in the future, particularly #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API") Bluetooth].
figure.center
figcaption Screenshot of the final product
img(
src="/screenshots/pomodoro.png"
alt="Screenshot of Pomodoro"
width="958px"
height="600px"
)

6
html/templates/error.pug

@ -1,6 +0,0 @@
extends layout
block content
p
a(href="/") &lArr; Return to home page
block message

34
html/templates/layout.pug

@ -1,34 +0,0 @@
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(name="description" content="Personal projects and interests")
meta(name="theme-color" content="#242424")
meta(name="viewport" content="width=device-width, initial-scale=1")
title Mobius K
link(rel="icon shortcut" href="/favicon.ico")
link(rel="apple-touch-icon" href="/apple-touch-icon.png")
link(rel="stylesheet" href="/portfolio.css")
link(rel="manifest" href="/manifest.json" crossorigin="use-credentials")
script(src="/portfolio.js" defer)
body
.container
h1 MobiusK
h2
a(href="mailto:mail@mobiusk.com") mail@mobiusk.com
h3
a(href="https://git.mobiusk.com") git.mobiusk.com
hr
block content

67
layouts/_default/baseof.html

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Personal projects and interests">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
MobiusK
{{ with .Params.Title }} - {{ . }} {{ end }}
</title>
<link rel="shortcut icon" href="/favicon.ico">
{{ $scss := resources.Get "index.scss" }}
{{ $style := $scss | toCSS $.Site.Params.scss }}
{{ with $style }}
<style>
{{ .Content | safeCSS }}
</style>
{{ end }}
</head>
<body>
<div class="container">
<h1>
MobiusK
</h1>
<h2>
<a href="mailto:mail@mobiusk.com">
mail@mobiusk.com
</a>
</h2>
<h3>
<a href="https://git.mobiusk.com">
git.mobiusk.com
</a>
</h3>
<hr>
{{ block "main" . }}{{ end }}
</div>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (const registration of registrations) {
registration.unregister();
}
}).catch(function (e) {
// Do nothing
});
}
</script>
</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 }}

17
scripts/index.ts

@ -1,17 +0,0 @@
import { release } from "shared/config/build.dev";
// import { ErrorMonitor } from "shared/scripts/error-monitor";
if (release) {
// Start the error watcher
// This only needs to be enabled when significant scripting is added (don't forget to include the CDN script tag)
// new ErrorMonitor("portfolio", "https://0e3157e4be3249678b85fd9d879b9538@o127434.ingest.sentry.io/5178458");
// Load our service worker to enable PWA functionality
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js").then();
});
}
}

41
scripts/service-worker.ts

@ -1,41 +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",
"/portfolio.css",
"/portfolio.js",
"/robots.txt",
]).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/favicon.ico → static/favicon.ico

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

Loading…
Cancel
Save