20 Commits

Author SHA1 Message Date
f9481a6e7f WIP 2025-08-24 02:35:25 -05:00
8083b1a299 WIP 2025-08-24 02:25:12 -05:00
314b533698 WIP 2025-08-22 19:51:15 -05:00
00a0f64be4 WIP body-module and smarter usage of container divs 2025-08-22 12:11:24 -05:00
741b3bc01b robots.txt: Stop Bing from complaining about md output not having title 2025-08-20 19:00:42 -05:00
df2fae9886 Update min_version because of template system refactor
I think this version has the newest features that I'm using. Hopefully I
didn't miss/forget about something when skimming through the Hugo
release history just now.
2025-08-16 03:21:27 -05:00
f38abfe73f archetype: Update blog to match figure shortcode revamp 2025-08-16 00:27:17 -05:00
3d55a7dabe Use individual <a> for each tag/category/etc in post metadata
Fixes #85
2025-08-09 22:34:11 -05:00
67de113bdf Change <header> to be entire top bar
This is more semantically correct.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/banner_role
2025-08-09 21:10:57 -05:00
349672bbad Hide comments counter when JavaScript disabled 2025-08-09 20:54:51 -05:00
ec382b2085 Remove unused .view-section rule
It was introduced in 906b6213fd but it
doesn't look like it was actually used for anything.
2025-08-09 20:15:44 -05:00
21f2a91b54 refactor: Move skip to main content CSS into baseof formatting section 2025-08-09 20:15:43 -05:00
0237c496ed refactor: Move components on both list & content pages to different fold 2025-08-09 20:15:38 -05:00
61d5ca29dd Set specific height of code block header
Otherwise it collapses to be too tiny if the copy button is removed.
2025-08-09 03:27:26 -05:00
8bb8720545 Hide code block copy button when JavaScript is disabled 2025-08-09 03:27:05 -05:00
bd8e34a381 Support opengraph structured properties on image and video 2025-08-09 02:53:46 -05:00
62cdcf5b11 Add warning if twitter username is missing
I don't know if the docs are correct, but they seem to say that
twitter:site is required for a card to render at all. Better safe than
sorry.

https://developer.x.com/en/docs/x-for-websites/cards/overview/markup
2025-08-09 02:40:03 -05:00
c9909762d6 Remove use of style attributes on top level comment section elements 2025-08-09 02:20:33 -05:00
cc4af0c385 Add comment explaining why comments.css is not in head 2025-08-09 02:13:15 -05:00
7aeb95a437 Add paragraph around comment section "Enable JavaScript" warning 2025-08-09 01:55:43 -05:00
21 changed files with 312 additions and 233 deletions

View File

@@ -24,7 +24,17 @@ series:
resources:
- name: feature
src: something.webp
title: Some image (image format can be anything; webp is just an example)
title: >-
Fallback title if one is not provided when calling figure shortcode with
this listed as the src
params:
alt: Write an accessible description of this image. Don't over-write.
- src: demonstration.webp
params:
alt: >-
Annotate an image without giving it an explicit name (the filename is
simply used as the `name` instead).
---

View File

@@ -295,15 +295,35 @@ body {
margin: 0;
}
.main-container {
margin: var(--page-margin) auto;
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
padding: 0 var(--page-margin);
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
/* body-module types:
*
* full-width: no max-width, no margin from the sides of the page
* full-padded: no max-width, but has margin from the left/right page edges
* center: max-width 720px, centered when too large, padded when screen is narrow
*/
.body-module--full-width,
.body-module--full-padded,
.body-module--center-wide {
margin-block: var(--page-margin);
}
.body-module--full-width {
margin-inline: 0;
}
.body-module-full-padded {
margin-inline: var(--page-margin);
}
.body-module--center {
margin-inline: auto;
/* add the minimum margin here because we are using auto for its centering */
padding-inline: var(--page-margin);
/* account for the padding being included in the element's calculated width */
max-width: calc(720px + 2 * var(--page-margin));
}
footer {
margin: var(--page-margin) 0;
margin-bottom: var(--page-margin);
text-align: center;
font-size: smaller;
}
@@ -312,6 +332,20 @@ footer p {
margin: 0;
}
#skip-to-main {
position: absolute;
padding: 8px;
background-color: var(--text-0);
color: var(--background-0);
transform: translateY(-100%);
}
#skip-to-main:focus {
transform: translateY(0%);
}
#main-content:target {
animation: none; /* prevent it from turning yellow */
}
/* }}} */
/* Top bar formatting {{{ */
@@ -326,7 +360,7 @@ footer p {
* or it will need its hover background to be chopped off on the left */
}
.header {
.brand {
flex-grow: 1;
margin: 8px var(--page-margin);
font-size: 1.25em;
@@ -334,7 +368,7 @@ footer p {
align-items: center;
}
.header a {
.brand a {
color: inherit;
font-weight: bold;
}
@@ -360,28 +394,8 @@ footer p {
/* }}} */
/* Skip to main content {{{ */
#skip-to-main {
position: absolute;
padding: 8px;
background-color: var(--text-0);
color: var(--background-0);
transform: translateY(-100%);
}
#skip-to-main:focus {
transform: translateY(0%);
}
#main-content:target {
animation: none; /* prevent it from turning yellow */
}
/* }}} */
/* Breadcrumb navigation {{{ */
.breadcrumb {
margin: var(--page-margin) 0;
}
.breadcrumb ul {
margin: 0;
padding: 0;
@@ -508,6 +522,14 @@ footer p {
margin-top: 10px;
}
:is(
.page-metadata-section:is(.categories, .tags, .series),
.page-metadata-item.authors
) > a:not(:last-child):after {
color: var(--text-0);
content: ",";
}
.post-media {
margin-top: 15px;
}
@@ -634,10 +656,6 @@ footer p {
margin-bottom: 5px;
}
.view-section {
margin-top: 5px;
}
/* }}} */
@@ -705,19 +723,6 @@ footer p {
}
*/
/* See also formating */
.see-also {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px;
border-radius: 8px;
margin: 10px 0;
}
.see-also p {
margin: 0;
}
/* Previous and next page buttons {{{ */
.prevnext {
@@ -768,6 +773,45 @@ footer p {
/* }}} */
/* Related posts section {{{ */
/* set the margins on the contents instead of the parent .related-posts
* so that the posts in the list clip off the edge of the screen,
* which makes a more obvious indicator that it's scrollable
*/
.related-posts > hr,
.related-posts > h1 {
margin: var(--page-margin);
}
.related-posts .page {
min-width: 300px;
max-width: 300px;
}
.related-posts .page:first-child {
margin-left: var(--page-margin);
}
.related-posts .page:last-child {
margin-right: var(--page-margin);
}
.related-posts .page-list {
display: flex;
flex-direction: row;
gap: 20px;
overflow-x: auto;
margin-bottom: var(--page-margin);
}
/* }}} */
/* }}} */
/* Content components (can appear both in single and list pages) {{{ */
/* Code & code blocks {{{ */
.code-block {
display: flex;
@@ -784,10 +828,13 @@ footer p {
padding: 4px 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 2em;
}
.code-block > .code-header > * {
margin: auto 0;
}
.code-block > .code-header > .code-type {
border-top-left-radius: 8px;
margin: auto 0;
}
/* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button {
@@ -881,42 +928,21 @@ aside.quote {
/* }}} */
/* Related posts section {{{ */
/* set the margins on the contents instead of the parent .related-posts
* so that the posts in the list clip off the edge of the screen,
* which makes a more obvious indicator that it's scrollable
*/
.related-posts > hr,
.related-posts > h1 {
margin: var(--page-margin);
/* See also formating */
.see-also {
background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px;
border-radius: 8px;
margin: 10px 0;
}
.related-posts .page {
min-width: 300px;
max-width: 300px;
}
.related-posts .page:first-child {
margin-left: var(--page-margin);
}
.related-posts .page:last-child {
margin-right: var(--page-margin);
}
.related-posts .page-list {
display: flex;
flex-direction: row;
gap: 20px;
overflow-x: auto;
margin-bottom: var(--page-margin);
.see-also p {
margin: 0;
}
/* }}} */
/* }}} */
/* @media specializations {{{ */

View File

@@ -1,3 +1,14 @@
.comments > h2 {
margin-bottom: 0;
}
.comments .email-address-notice {
margin: 0;
font-size: smaller;
}
.comments .enable-javascript-notice {
font-style: italic;
}
/* Isso styling */
h4.isso-thread-heading {
color: var(--text-0);

4
assets/css/noscript.css Normal file
View File

@@ -0,0 +1,4 @@
.page-meta-comments-counter,
.code-copy-button {
display: none;
}

View File

@@ -1,4 +1,4 @@
<nav class="breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
<nav class="body-module--center breadcrumb" aria-label="{{ i18n "aria_breadcrumbnav" }}">
<ul>
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
</ul>

View File

@@ -1,15 +1,20 @@
{{/* put comments CSS here instead of in <head> so that it doesn't get
* loaded unnecessarily on regular pages
*/}}
{{ with resources.Get "css/comments.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
<h2 style="margin-bottom: 0;">Comments</h2>
<p style="margin: 0; font-size: smaller;">
<h2>Comments</h2>
<p class="email-address-notice">
If you provide an email address, you can enable notifications for
replies to your comment. It will not be shown publicly.
</p>
<noscript>
<i>Enable JavaScript to see the comment section.</i>
<p class="enable-javascript-notice">
Enable JavaScript to see the comment section.
</p>
</noscript>
<section id="isso-thread" data-title="{{ .Title }}"></section>

View File

@@ -6,6 +6,12 @@
{{ with resources.Get "css/bobastyle.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{ with resources.Get "css/noscript.css" | fingerprint "sha512" }}
<noscript>
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
</noscript>
{{ end }}
{{ with resources.Get "css/syntax.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
{{ end }}

View File

@@ -1,16 +1,9 @@
{{ with .Params.authors }}
<span class="page-metadata-item" data-pagefind-meta="authors" aria-label="{{ i18n "aria_post_meta_authors" }}">
{{ with .GetTerms "authors" }}
<span class="page-metadata-item authors" aria-label="{{ i18n "aria_post_meta_authors" }}">
{{ partial "icon.html" "user-circle" }}
{{ if index $.Site.Taxonomies "authors" }}
{{ $authors := slice }}
{{ range . }}
{{ $url := (printf "authors/%s" (. | anchorize)) | absLangURL }}
{{ $authors = $authors | append (printf `<a href="%s">%s</a>` $url .) }}
{{ end }}
{{ delimit $authors ", " | safeHTML }}
{{ else }}
{{ delimit . ", " }}
{{ range . }}
<a href="{{ .Permalink }}" data-pagefind-filter="author">{{ .LinkTitle }}</a>
{{ end }}
</span>
{{ end }}

View File

@@ -4,8 +4,10 @@
{{ $categories = $categories | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
{{ end }}
<div class="page-metadata-section categories" data-pagefind-meta="categories" aria-label="{{ i18n "aria_post_meta_categories" }}">
<div class="page-metadata-section categories" aria-label="{{ i18n "aria_post_meta_categories" }}">
{{ partial "icon.html" "folder" }}
{{ delimit $categories ", " | safeHTML }}
{{ range . }}
<a href="{{ .Permalink }}" data-pagefind-filter="category">{{ .LinkTitle }}</a>
{{ end }}
</div>
{{ end }}

View File

@@ -1,4 +1,4 @@
<span class="page-metadata-item" aria-label="comments counter">
<span class="page-metadata-item page-meta-comments-counter" aria-label="comments counter">
{{ partial "icon.html" "message" }}
{{/* TODO: figure out if there's a nicer way to generate this URL
* the current issue is that we can't use RelRef, since content view means that we don't

View File

@@ -1,11 +1,8 @@
{{ with (.GetTerms "series") }}
{{ $series := slice }}
{{ range . }}
{{ $series = $series | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
{{ end }}
<div class="page-metadata-section series" data-pagefind-meta="series" aria-label="{{ i18n "aria_post_meta_series" }}">
<div class="page-metadata-section series" aria-label="{{ i18n "aria_post_meta_series" }}">
{{ partial "icon.html" "files" }}
{{ delimit $series ", " | safeHTML }}
{{ range . }}
<a href="{{ .Permalink }}" data-pagefind-filter="series">{{ .LinkTitle }}</a>
{{ end }}
</div>
{{ end }}

View File

@@ -1,11 +1,10 @@
{{ with (.GetTerms "tags") }}
{{ $tags := slice }}
{{ range . }}
{{ $tags = $tags | append (printf `<a href="%s">%s</a>` .Permalink .LinkTitle) }}
{{ end }}
<div class="page-metadata-section tags" data-pagefind-meta="tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
<div class="page-metadata-section tags" aria-label="{{ i18n "aria_post_meta_tags" }}">
{{ partial "icon.html" "tag" }}
{{ delimit $tags ", " | safeHTML }}
{{ range . }}
<a href="{{ .Permalink }}" data-pagefind-filter="tag">{{ .LinkTitle }}</a>
{{ end }}
</div>
{{ end }}

View File

@@ -3,16 +3,6 @@
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">
{{ $images := $.Resources.ByType "image" }}
{{ $featured := $images.GetMatch "*feature*" }}
{{ if not $featured }}
{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
{{ end }}
{{ with $featured }}
<meta property="og:image" content="{{ $featured.Permalink }}">
{{ end }}
{{ with .Section }}
<meta property="article:section" content="{{ . }}">
{{ end }}
@@ -37,12 +27,38 @@
<meta property="og:site_name" content="{{ . }}">
{{ end }}
{{ $images := $.Resources.ByType "image" }}
{{ $featured := $images.GetMatch "*feature*" }}
{{ if not $featured }}
{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}
{{ end }}
{{ with $featured }}
<meta property="og:image" content="{{ $featured.Permalink }}">
{{ with .Params.alt }}
<meta property="og:image:alt" content="{{ . }}">
{{ end }}
{{ with .MediaType }}
<meta property="og:image:type" content="{{ . }}">
{{ end }}
{{ with .Width }}
<meta property="og:image:width" content="{{ . }}">
{{ end }}
{{ with .Height }}
<meta property="og:image:height" content="{{ . }}">
{{ end }}
{{ end }}
{{ $videos := $.Resources.ByType "video" }}
{{ $featured_video := $videos.GetMatch "*feature*" }}
{{ if not $featured_video }}
{{ $featured_video = $videos.GetMatch "{*cover*,*thumbnail*}" }}
{{ end }}
{{ with $featured_video }}
<meta property="og:video" content="{{ $featured_video.Permalink | absURL }}">
{{ with .MediaType }}
<meta property="og:video:type" content="{{ . }}">
{{ end }}
{{ end }}

View File

@@ -31,6 +31,8 @@
*/}}
{{ with .Site.Params.social.twitter }}
<meta name="twitter:site" content="@{{ . }}">
{{ else }}
{{ errorf "a twitter username is required for twitter cards to work" }}
{{ end }}
{{ with .GetTerms "authors" }}
{{ range . }}

View File

@@ -1,9 +1,9 @@
<div class="top">
<header class="header">
<header class="top">
<div class="brand">
<a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</header>
</div>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }}
@@ -21,4 +21,4 @@
href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</nav>
</div>
</header>

View File

@@ -1,24 +1,26 @@
{{ define "main" }}
<h1>
{{ partial "icon.html" "user-circle" }}
{{ .Title | markdownify }}
</h1>
<section class="body-module--center">
<h1>
{{ partial "icon.html" "user-circle" }}
{{ .Title | markdownify }}
</h1>
{{ with .Content }}
{{ . }}
{{ end }}
<div class="page-list">
{{ with .Paginator.Pages }}
{{ range . }}
<article class="page">
{{ .Render "summary" }}
</article>
{{ end }}
{{ else }}
<div>
{{ i18n "no_posts" }}
</div>
{{ with .Content }}
{{ . }}
{{ end }}
</div>
<div class="page-list">
{{ with .Paginator.Pages }}
{{ range . }}
<article class="page">
{{ .Render "summary" }}
</article>
{{ end }}
{{ else }}
<div>
{{ i18n "no_posts" }}
</div>
{{ end }}
</div>
</section>
{{ end }}

View File

@@ -8,32 +8,30 @@
{{ partial "top.html" . }}
<div class="main-container">
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
{{ if not .IsHome }}
{{ partial "breadcrumb.html" . }}
{{ end }}
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ block "pre-body" . }}{{ end }}
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}
</main>
{{ block "post-body" . }}{{ end }}
{{ if or .Site.Copyright .Site.Params.footer }}
<footer class="body-module--center">
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
</main>
{{ if or .Site.Copyright .Site.Params.footer }}
<footer>
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</div>
{{ block "post-body" . }}
{{/* currently this is only used for related posts */}}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</body>

View File

@@ -1,13 +1,15 @@
{{ define "main" }}
{{ with .Content }}
<article class="homepage-content">
<article class="body-module--center">
{{ . }}
</article>
<hr>
<hr class="body-module--center">
{{ end }}
{{ end }}
{{ define "post-body" }}
{{ if .Site.Params.homepageLatestPosts }}
<div class="homepage-latest-posts">
<div class="body-module--center">
<h1>
{{ i18n "latest_posts" }}
{{ partial "rss-link.html" . }}

View File

@@ -1,81 +1,83 @@
{{ define "main" }}
<div class="page-title">
<h1>
{{ .Title | markdownify }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h1>
</div>
<article class="body-module--center">
<div class="page-title">
<h1>
{{ .Title | markdownify }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h1>
</div>
{{ partial "page-metadata/post-full.html" . }}
{{ partial "series-box.html" . }}
{{ partial "page-metadata/post-full.html" . }}
{{ partial "series-box.html" . }}
{{ if .Params.Toc }}
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<details>
<summary>{{ i18n "table_of_contents" }}</summary>
{{ if .Params.Toc }}
<div class="table-of-contents" aria-label="{{ i18n "aria_table_of_contents" }}">
<details>
<summary>{{ i18n "table_of_contents" }}</summary>
{{ .TableOfContents }}
</details>
</div>
<div class="table-of-contents print">
{{ i18n "table_of_contents" }}
{{ .TableOfContents }}
</details>
</div>
<div class="table-of-contents print">
{{ i18n "table_of_contents" }}
{{ .TableOfContents }}
</div>
{{ end }}
</div>
{{ end }}
{{ partial "feature-figure.html" . }}
{{ partial "feature-figure.html" . }}
<article class="post-content" data-pagefind-body>
{{ .Content }}
<article class="post-content" data-pagefind-body>
{{ .Content }}
</article>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }}
<div class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
&larr; {{ i18n "newer_post" }}
</div>
<div class="prev-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="prev"></div>
{{ end }}
{{ with .PrevInSection }}
<a class="next" href="{{ .Permalink }}">
<div class="next-caption">
{{ i18n "older_post" }} &rarr;
</div>
<div class="next-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="next"></div>
{{ end }}
</div>
{{ end }}
{{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Params.comments }}
<div class="comments">
{{ partial "comments.html" . }}
</div>
{{ end }}
</article>
{{ partial "series-box.html" . }}
{{ if or .NextInSection .PrevInSection }}
<div class="prevnext">
{{ with .NextInSection }}
<a class="prev" href="{{ .Permalink }}">
<div class="prev-caption">
&larr; {{ i18n "newer_post" }}
</div>
<div class="prev-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="prev"></div>
{{ end }}
{{ with .PrevInSection }}
<a class="next" href="{{ .Permalink }}">
<div class="next-caption">
{{ i18n "older_post" }} &rarr;
</div>
<div class="next-post">
{{ .Title | markdownify }}
</div>
</a>
{{ else }}
<div class="next"></div>
{{ end }}
</div>
{{ end }}
{{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Params.comments }}
<div class="comments">
{{ partial "comments.html" . }}
</div>
{{ end }}
{{ end }}
{{ define "post-body" }}
{{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }}
<div class="related-posts">
<div class="body-module--full-width related-posts">
<hr>
<h1>{{ i18n "related_posts" }}</h1>
{{ partial "page-list.html" . }}

View File

@@ -1,2 +1,6 @@
User-Agent: *
Sitemap: {{ "sitemap.xml" | absLangURL }}
{{/* It complains about the raw markdown output having no title tag */ -}}
User-Agent: Bingbot
Disallow: /blog/*.md$

View File

@@ -8,7 +8,7 @@ description = "Simple Hugo theme for boba.best and bbaovanc.com"
homepage = "https://bbaovanc.com"
tags = []
features = []
min_version = "0.93.0"
min_version = "0.146.0"
[author]
name = "bbaovanc"