toc label + work intro bg

assets/scss/components/intro.scss

@@ -1,12 +1,14 @@
 #work #intro {
 	--headerHeight: 4em;
 	--navHeight: 4em;
-	background-color: rgb(80, 102, 124);
 	color: #fff;
 	
 	padding: 0;
 	display: flex;
 	flex: 1;
+	background-image: url('/images/backgrounds/ffflux1.svg');
+	background-size: cover;
+	background-position: center;
 	.container {
 		display: grid;
 		grid-template-rows: auto auto 1fr;

assets/scss/components/table-of-contents.scss

@@ -0,0 +1,41 @@
+/* === ordered: true === */
+
+#TableOfContents ol {
+	/*
+	each list gets a new counter
+	*/
+	counter-reset: item;
+	margin-inline-start: 0;
+	list-style: none;
+}
+#TableOfContents ol li:before {
+	/*
+	the counter is added as a pseudo-element,
+	and nested counters are joined by a dot
+	*/
+	content: counters(item, ".") " ";
+	counter-increment: item;
+	/* ensure the counters align visually */
+	font-family: monospace;
+	font-weight: bold;
+	margin-inline-end: 1em;
+}
+#TableOfContents > ol > li {
+	/*
+	top-level items wrap after the number,
+	in order to add some visual separation
+	*/
+	display: flex;
+	flex-flow: column;
+}
+
+/* === ordered: false === */
+
+#TableOfContents ul {
+	list-style: none;
+	margin-left: 0;
+}
+
+#TableOfContents ul ul {
+	margin-left: 1em;
+}

assets/scss/layouts/_default/single.scss

@@ -0,0 +1,46 @@
+.page .title {
+	font-family: serif;
+	margin-top: 2em;
+}
+
+.page .summary {
+	font-size: 1.25em;
+	font-family: serif;
+}
+
+.page .wordcount {
+	margin: 0;
+}
+
+.page .tags-title {
+	font-variant: small-caps;
+	font-weight: bold;
+	margin: 0.5em 0;
+}
+
+.page .tags {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 0.5em;
+	list-style: none;
+	margin-left: 0;
+	li {
+		margin: 0;
+	}
+	a {
+		display: block;
+		padding: 0.5rem;
+		background: #cde;
+		border-radius: 6px;
+		&:before {
+			content: "#"
+		}
+	}
+
+}
+
+.page .toc-title {
+	margin-block-end: 0.5em;
+	font-weight: bold;
+	font-variant: small-caps;
+}

assets/scss/layouts/blog/single.scss

@@ -38,6 +38,13 @@
 	}
 }
 
+.blog .toc-title {
+	margin-block-end: 0.5em;
+	font-weight: 900;
+	text-transform: uppercase;
+	color: var(--ui-text-muted);
+}
+
 .blog .post .content {
 	margin-block: 4em;
 }

assets/scss/main.scss

@@ -27,6 +27,8 @@
 @import "layouts/blog/single.scss";
 @import "layouts/blog/list.scss";
 
+@import "components/table-of-contents";
+
 @import "layouts/index.scss";
 @import "content/work.scss";
 @import "content/code.scss";

content/blog/no-right-to-profit/index.md

@@ -1,12 +1,11 @@
----
++++
-title: "You don't have a right to profit."
+title = "You don't have a right to profit."
-summary: "People will go to ridiculous lengths in the name of protecting the “right” to profit. Let’s be real here. No one has a “right” to profit."
+summary = "People will go to ridiculous lengths in the name of protecting the “right” to profit. Let’s be real here. No one has a “right” to profit."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2015-07-08"
+date = "2015-07-08"
-tags: ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"]
+tags = ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"]
-category: "Blog"
+categories = ["Blog"]
-cover: ""
++++
----
 
 <p>These days, you see a lot of ridiculous things like <a href="https://torrentfreak.com/the-worlds-most-idiotic-copyright-complaint-150222/">copyright claims on the download pages of free software</a>, because they contain the word “download”. A lot of these stupid actions are done in the name of “protecting the artists”. People will go to ridiculous lengths in the name of protecting the “right” to profit.</p>
 

content/blog/personal-websites/index.md

@@ -4,7 +4,7 @@ summary = "When I say personal website, I do not mean a page or portfolio for po
 author = "Abdullah Tarawneh"
 date = "2023-03-18"
 tags = ["personal websites", "portfolios", "services", "branding", "marketing", "capitalism"]
-category = "Blog"
+categories = ["Blog"]
 +++
 
 <p class="has-pullquote before left" data-pullquote="I want [...] [s]tuff that gets to the heart of who you are.">A lot of resources and materials that are readily available for helping you make a so-called personal website generally assume that you are trying to get hired or get clients. To me, this is a strange interpretation of "personal". I would describe such websites as professional websites instead. When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you. I mean a place to be yourself and to express yourself to others. I want advice on self-reflection and introspection and knowing yourself -- how to identify and how to introduce yourself; how to be genuinely engaging. Stuff that gets to the heart of who you are.</p>

content/blog/rip-grooveshark/index.md

@@ -1,12 +1,11 @@
----
++++
-title: "RIP Grooveshark."
+title = "RIP Grooveshark."
-summary: "I last used Grooveshark earlier today. I refreshed the page and found that it was dead. [...] I find myself feeling about Grooveshark similarly as when I found out that Megaupload had been shut down, and that many of my files were lost forever."
+summary = "I last used Grooveshark earlier today. I refreshed the page and found that it was dead. [...] I find myself feeling about Grooveshark similarly as when I found out that Megaupload had been shut down, and that many of my files were lost forever."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2015-05-01"
+date = "2015-05-01"
-tags: ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"]
+tags = ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"]
-category: "Blog"
+categories = ["Blog"]
-cover: ""
++++
----
 
 I last used Grooveshark earlier today. I refreshed the page and found that it was dead. Grooveshark has finally shut down. UMG et al have won. Effective immediately, the Grooveshark service no longer works, all music has been wiped entirely from the site, user data has been lost, curated playlists are inaccessible, VIP users are unable to get refunds, all social media accounts have been deleted, and the grooveshark.com website shows only an apology that admits wrongdoing and directs users to whymusicmatters.org, the RIAA’s website.
 

content/blog/twitter-not-social/index.md

@@ -4,7 +4,7 @@ summary = "That service that started out as a way to send status updates to your
 author = "Abdullah Tarawneh"
 date = "2018-04-27"
 tags = ["twitter", "social network", "social media", "analysis", "capitalism"]
-category = "Blog"
+categories = ["Blog"]
 [[resources]]
 name = 'cover'
 src = 'failwhale.png'

content/code/certbot-namecheap/index.md

@@ -1,12 +1,11 @@
----
++++
-title: "Certbot DNS-01 hook for Namecheap"
+title = "Certbot DNS-01 hook for Namecheap"
-summary: "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python."
+summary = "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2019-10-30"
+date = "2019-10-30"
-tags: ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]
+tags = ["namecheap", "certbot", "dns-01", "python", "letsencrypt"]
-category: "Code"
+categories = ["Code"]
-cover: "/code/certbot-namecheap/cover.png"
++++
----
 
 ## The problem
 

content/code/liberapay-pleroma/index.md

@@ -1,12 +1,14 @@
----
++++
-title: "Liberapay: Add Pleroma support"
+title = "Liberapay: Add Pleroma support"
-summary: "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account."
+summary = "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2019-11-13"
+date = "2019-11-13"
-tags: ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"]
+tags = ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"]
-category: "Code"
+categories = ["Code"]
-cover: "/images/cover/liberapay-pleroma.jpg"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/liberapay-pleroma.jpg"
++++
 
 pleroma is compatible with mastodon api.
 only difference is url format:

content/code/mastomods/index.md

@@ -1,12 +1,14 @@
----
++++
-title: "MastoMods"
+title = "MastoMods"
-summary: "CSS tweaks and modifications for Mastodon, a libre micro-blogging social server similar to Twitter."
+summary = "CSS tweaks and modifications for Mastodon, a libre micro-blogging social server similar to Twitter."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2019-02-18"
+date = "2019-02-18"
-tags: ["mastomods", "mastodon", "css", "userstyles", "tweaks"]
+tags = ["mastomods", "mastodon", "css", "userstyles", "tweaks"]
-category: "Code"
+categories = ["Code"]
-cover: "/images/cover/mastomods.jpg"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/mastomods.jpg"
++++
 
 This work is heavily based on (and an extension of) my earlier work on Mastodon Flat CSS, and its child theme Linernotes Mastodon Themes. I grew tired of having to maintain what was essentially the same code in multiple different places, so this repo was created to be a more modular way of managing code snippets after I learned enough about how importing works.
 

content/code/obs-edit-transform/index.md

@@ -1,12 +1,14 @@
----
++++
-title: "OBS Studio: Ctrl+E to Edit Transform"
+title = "OBS Studio: Ctrl+E to Edit Transform"
-summary: "I added a shortcut to edit transforms on a source in OBS Studio."
+summary = "I added a shortcut to edit transforms on a source in OBS Studio."
-date: "2017-04-30"
+date = "2017-04-30"
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-tags: ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"]
+tags = ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"]
-category: "Code"
+categories = ["Code"]
-cover: "/images/cover/obs-transform.jpg"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/obs-transform.jpg"
++++
 
 Editing was very easy in OBS Classic, and I could not find the option for stretching a source to bounds in OBS Studio, so the "Edit Transform" dialogue should be more user-facing. Giving it a keyboard shortcut denotes that it is important enough to have a shortcut, as opposed to the myriad options with no shortcut.
 

content/code/photobucketgrabber/index.md

@@ -1,12 +1,11 @@
----
++++
-title: "PhotoBucketGrabber"
+title = "PhotoBucketGrabber"
-summary: "Download all your photos from PhotoBucket using this Python script."
+summary = "Download all your photos from PhotoBucket using this Python script."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2019-03-17"
+date = "2019-03-17"
-tags: ["python", "photobucket", "automation", "scripting", "archive", "export", "download"]
+tags = ["python", "photobucket", "automation", "scripting", "archive", "export", "download"]
-category: "Code"
+categories = ["Code"]
-cover: "/code/photobucketgrabber/cover.png"
++++
----
 
 ## The problem
 

content/code/salatime/index.md

@@ -1,12 +1,14 @@
----
++++
-title: "salatime"
+title = "salatime"
-summary: "Basic terminal script to print out daily prayer times for Birmingham, AL."
+summary = "Basic terminal script to print out daily prayer times for Birmingham, AL."
-date: "2019-05-09"
+date = "2019-05-09"
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-tags: ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"]
+tags = ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"]
-category: "Code"
+categories = ["Code"]
-cover: "/images/cover/salatime.jpg"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/salatime.jpg"
++++
 
 ## The problem
 

content/design/motarawneh/index.md

@@ -4,7 +4,7 @@ summary = "A personal website for Mo Tarawneh, inaugural chairperson of the UN C
 author = "Abdullah Tarawneh"
 date = "2020-03-17"
 tags = ["website", "web", "responsive", "design"]
-category = "Design"
+categories = ["Design"]
 draft = true
 [[resources]]
 name = 'cover'

content/work/eqin/index.md

@@ -1,16 +1,16 @@
----
++++
-title: "Director of Technology at Equality Initiative"
+title = "Director of Technology at Equality Initiative"
-summary: "3 years helping a non-profit manage all technical aspects, from website to email."
+summary = "3 years helping a non-profit manage all technical aspects, from website to email."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2014-02-20"
+date = "2014-02-20"
-start: "Feb 2014"
+start = "Feb 2014"
-end: "Feb 2017"
+end = "Feb 2017"
-at: "Equality Initiative"
+at = "Equality Initiative"
-position: "Director of Technology"
+position = "Director of Technology"
-tags: ["nonprofit"]
+tags = ["nonprofit"]
-category: "Work"
+categories = ["Work"]
-cover: "/images/cover/eqin.jpg"
+src = "/images/cover/eqin.jpg"
----
++++
 
 ## Building and maintaining a website
 

content/work/go-fed/index.html

@@ -1,16 +1,18 @@
----
++++
-title: Go-Fed Site Redesign
+title = "Go-Fed Site Redesign"
-summary: Taking Go-Fed's website from "yep, it has color" to "woo, looking super nice! :D"
+summary = "Taking Go-Fed's website from 'yep, it has color' to 'woo, looking super nice! :D'"
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2020-12-27"
+date = "2020-12-27"
-start: "Dec 2020"
+start = "Dec 2020"
-end: "Dec 2020"
+end = "Dec 2020"
-at: "Go-Fed"
+at = "Go-Fed"
-position: "Website Remake"
+position = "Website Remake"
-tags: ["go-fed", "redesign", "website", "web", "responsive"]
+tags = ["go-fed", "redesign", "website", "web", "responsive"]
-category: "Work"
+categories = ["Work", "Design"]
-cover: "/images/cover/go-fed.png"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/go-fed.png"
++++
 
 
 

content/work/mastodon/index.html

@@ -8,7 +8,7 @@ end = "Jan 2020"
 at = "Mastodon"
 position = "Information Architect / Documentation Specialist"
 tags = ["mastodon", "documentation", "information architecture", "rest api"]
-category = "Work"
+categories = ["Work"]
 +++
 
 <main id="mastodon">

content/work/pixelfed/index.md

@@ -1,16 +1,18 @@
----
++++
-title: "Pixelfed team member"
+title = "Pixelfed team member"
-summary: "After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort."
+summary = "After making a masterpost of bugs and issues, I turned Pixelfed from a one-person project into a team effort."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2019-01-06"
+date = "2019-01-06"
-start: "Jan 2019"
+start = "Jan 2019"
-end: "current"
+end = "current"
-at: "Pixelfed"
+at = "Pixelfed"
-position: "Product/Project Manager"
+position = "Product/Project Manager"
-tags: ["pixelfed", "project management", "product management", "github issues", "documentation"]
+tags = ["pixelfed", "project management", "product management", "github issues", "documentation"]
-category: "Work"
+categories = ["Work"]
-cover: "/images/cover/pixelfed.jpg"
+[[resources]]
----
+name = "cover"
+src = "/images/cover/pixelfed.jpg"
++++
 
 ## Overview
 

content/work/trilogy/index.html

@@ -1,16 +1,16 @@
----
++++
-title: "Senior Technical Writer at Trilogy"
+title = "Senior Technical Writer at Trilogy"
-summary: "Managing knowledge bases for numerous products owned by Trilogy."
+summary = "Managing knowledge bases for numerous products owned by Trilogy."
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2021-05-16"
+date = "2021-05-16"
-start: "May 2021"
+start = "May 2021"
-end: "Dec 2021"
+end = "Dec 2021"
-at: "Trilogy"
+at = "Trilogy"
-position: "Senior Technical Writer / Product Knowledge Curator"
+position = "Senior Technical Writer / Product Knowledge Curator"
-tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
+tags = ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
-category: "Work"
+category = "Work"
-cover: "/images/cover/trilogy.png"
+cover = "/images/cover/trilogy.png"
----
++++
 
 <main id="trilogy">
 <header class="page-header section">

content/work/uab/index.md

@@ -1,13 +1,12 @@
----
++++
-title: ""
+title = ""
-summary: "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
+summary = "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
-author: "Abdullah Tarawneh"
+author = "Abdullah Tarawneh"
-date: "2018-12-15"
+date = "2018-12-15"
-start: ""
+start = ""
-end: "Fall 2018"
+end = "Fall 2018"
-at: "UAB"
+at = "UAB"
-position: "Graduated from The University of Alabama at Birmingham"
+position = "Graduated from The University of Alabama at Birmingham"
-tags: []
+tags = []
-category: "Work"
+categories = ["Work"]
-cover: ""
++++
----

hugo.toml

@@ -6,14 +6,15 @@ enableGitInfo = true
 [markup.tableOfContents]
 startLevel = 2
 endLevel = 6
-ordered = true
+ordered = false
 
 [markup.goldmark.renderer]
 unsafe = true
 
 [taxonomies]
 tag = "tags"
-category = "category"
+categories = "categories"
+series = "series"
 
 [menu]
 

layouts/_default/baseof.html

@@ -11,8 +11,8 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 		{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
 		{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
-		<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
+		<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">
-		<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+		<script type="text/javascript" src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
 		{{ partial "seo.html" . }}
 		{{ block "head" . }}
 		{{ end }}

layouts/_default/list.html

@@ -16,10 +16,10 @@
 		<div class="container">
 			{{ range .Pages }}
 			<article class="list-item">
-				<a class="list-item__link" href="{{ .Permalink }}">
+				<a class="list-item__link" href="{{ .RelPermalink }}">
 					{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
 					{{ with $cover }}
-					<img class="list-item__image" src="{{.Permalink}}">
+					<img class="list-item__image" src="{{.RelPermalink}}">
 					{{end}}
 					<h2 class="list-item__title">{{ .Title }}</h2>
 				</a>

layouts/_default/single.html

@@ -5,28 +5,8 @@
 			<div class="container">
 				<h1 class="page-title">{{ .Title }}</h1>
 				<p class="page-summary">{{.Summary}}</p>
-				{{ with .Params.cover }}
-				<img class="page-cover" src="{{.}}">
-				{{end}}
 			</div>
 		</header>
-		<aside class="meta section">
-			<div class="container">
-				<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
-				<p class="wordcount"> {{.WordCount}} words</p>
-
-				{{ with .Params.tags }}
-				<p>Keywords:</p>
-				<ul class="tags">
-					{{ range . }}
-					<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
-					{{ end }}
-				</ul>
-				{{ end }}
-
-				{{ .TableOfContents }}
-			</div>
-		</aside>
 		<section class="section content">
 			<div class="container">
 				{{ .Content }}

layouts/blog/list.html

@@ -9,7 +9,7 @@
 		<div class="container">
 			{{ range .Pages }}
 			<article class="list-item">
-				<a class="list-item__link" href="{{ .Permalink }}">
+				<a class="list-item__link" href="{{ .RelPermalink }}">
 					{{ with .Params.cover }}
 					<img class="list-item__image" src="{{.}}">
 					{{end}}

layouts/blog/single.html

@@ -23,7 +23,10 @@
 				</ul>
 				{{ end }}
 				
+				{{ if ne .TableOfContents "<nav id=\"TableOfContents\"></nav>" }}
+				<p class="toc-title">Table of contents:</p>
 				{{ .TableOfContents }}
+				{{ end }}
 			</aside>
 			<section class="content">
 				{{ .Content }}

layouts/partials/i18nlist.html

@@ -1,5 +1,5 @@
 {{ if .IsTranslated }}
     {{ range .Translations }}
-        <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+        <a href="{{ .RelPermalink }}">{{ .Language.LanguageName }}</a>
     {{ end }}
 {{ end }}

layouts/taxonomy/tag.html

@@ -1,5 +1,10 @@
 {{ define "main" }}
 <main>
+    <header class="section">
+        <div class="container">
+            <h1>Content tagged <span style="font-family: monospace">{{.Name}}</span></h1>
+        </div>
+    </header>
     <section class="section">
         <div class="container">
             <ul>

layouts/work/single.html

@@ -4,7 +4,7 @@
 	{{ $style := . | toCSS | minify | fingerprint }}
 	<link
 		rel="stylesheet"
-		href="{{ $style.Permalink }}"
+		href="{{ $style.RelPermalink }}"
 		integrity="{{ $style.Data.Integrity }}"
 		media="screen">
 	{{ end }}
@@ -13,7 +13,7 @@
 	{{ $js := . | minify | minify | fingerprint }}
 	<script
 		type="text/javascript"
-		src="{{ $js.Permalink }}"
+		src="{{ $js.RelPermalink }}"
 		integrity="{{ $js.Data.Integrity }}">
 	</script>
 	{{ end }}