Remove a few unnecessary elements when printing

- Hide clickable link icon on headings in articles - Hide "Copy" button on code blocks - Hide "View raw" button in page metadata
layouts: Rename list to section and single to page
2025-08-31 00:57:33 -05:00 · 2025-07-30 01:45:11 -05:00 · 2025-07-30 01:19:19 -05:00 · 2025-07-30 00:43:05 -05:00 · 2025-07-30 00:43:05 -05:00 · 2025-07-30 00:43:05 -05:00
16 changed files with 229 additions and 12 deletions
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -924,8 +924,10 @@ aside.quote {
 /* Print compatibility {{{ */
@media print {
  .top > .navbar,
-  .section-header-link,
+  .content-heading-link,
  .post-meta-edit-history,
+  .post-meta-view-markdown,
+  .code-copy-button,
  .prevnext,
  .share-buttons,
  .related-posts {
--- a/assets/css/comments.css
+++ b/assets/css/comments.css
@@ -0,0 +1,121 @@
+/* Isso styling */
+h4.isso-thread-heading {
+    color: var(--text-0);
+    margin-bottom: 8px;
+}
+
+.isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    border-color: var(--background-3);
+}
+
+.isso-author,
+.isso-page-author-suffix,
+.isso-comment-footer,
+.isso-comment-footer .isso-votes {
+    color: var(--text-gray-0);
+}
+
+.isso-comment-header .isso-spacer,
+.isso-spacer:hover,
+.isso-permalink,
+.isso-permalink:hover {
+    color: var(--text-gray-1) !important;
+}
+a.isso-author:hover,
+.isso-permalink:hover {
+    text-decoration: underline !important;
+}
+
+.isso-comment.isso-is-page-author > .isso-text-wrapper {
+    background-color: var(--background-accent-1);
+}
+
+.isso-feedlink:hover,
+.isso-reply {
+    color: var(--link-0) !important;
+    text-shadow: unset !important;
+}
+.isso-reply:hover {
+    text-decoration: underline;
+}
+
+.isso-text pre,
+.isso-text :not(pre) > code {
+    background-color: var(--background-2);
+    border: none;
+    padding: 2px 4px;
+    border-radius: 5px;
+    /* thanks isso.css for setting this to 85% for whatever reason */
+    font-size: 0.75em;
+}
+
+.isso-input-wrapper input,
+.isso-post-action > input,
+.isso-textarea,
+.isso-preview {
+    color: var(--text-1);
+    background-color: var(--background-1);
+    border-color: var(--background-2) !important;
+}
+
+.isso-input-wrapper input:focus,
+.isso-textarea:focus {
+    border-color: var(--background-3) !important;
+}
+
+.isso-post-action > input:hover {
+    background-color: var(--background-2);
+}
+.isso-post-action > input:focus,
+.isso-post-action > input:active {
+    background-color: var(--background-3);
+}
+
+.isso-textarea {
+    margin-bottom: 4px;
+}
+.isso-input-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    margin-right: 4px;
+    max-width: 25%;
+}
+.isso-input-wrapper input {
+    order: 1;
+}
+.isso-input-wrapper label {
+    order: 2;
+    font-size: small;
+}
+.isso-post-action {
+    margin-left: 4px;
+    margin-top: 0;
+}
+@media screen and (max-width: 600px) {
+    .isso-input-wrapper {
+        display: block;
+        max-width: 100%;
+    }
+}
+
+@media print {
+    .comments {
+        break-before: always;
+    }
+    .isso-comment {
+        max-width: unset;
+    }
+    .isso-text-wrapper {
+        break-inside: avoid;
+    }
+
+    .isso-postbox,
+    .isso-feedlink {
+        display: none;
+    }
+}
+
+.isso-target {
+    animation: target-fade 10s ease-out; /* defined in bobatheme */
+}
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -0,0 +1,9 @@
+/* put on body so it overrides the defaults set in :root by pagefind.css */
+body {
+    /* https://pagefind.app/docs/ui-usage/#customising-the-styles */
+    --pagefind-ui-background: var(--background-1);
+    --pagefind-ui-border: var(--background-2);
+    --pagefind-ui-primary: var(--link-0);
+    --pagefind-ui-tag: var(--background-1);
+    --pagefind-ui-text: var(--text-1);
+}
--- a/assets/js/share-event.js
+++ b/assets/js/share-event.js
@@ -0,0 +1,3 @@
+function share_event(service) {
+    plausible("Share", {props: {Network: service}});
+}
--- a/layouts/_markup/render-heading.html
+++ b/layouts/_markup/render-heading.html
@@ -1,6 +1,6 @@
 <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="section-heading">
    {{ .Text | safeHTML }}
-    <a class="heading-link" href="#{{ .Anchor | safeURL }}">
+    <a class="content-heading-link" href="#{{ .Anchor | safeURL }}">
        <span aria-label="{{ i18n "aria_heading_link" }}">
            {{ partial "icon.html" "link" }}
        </span>
--- a/layouts/_partials/comments.html
+++ b/layouts/_partials/comments.html
@@ -1,4 +1,15 @@
-{{/*
-    Create a file named `layouts/partials/comments.html` at your site root to
-    add a comment system. Page variables are passed.
-*/}}
+{{ 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;">
+    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>
+</noscript>
+
+<section id="isso-thread" data-title="{{ .Title }}"></section>
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -16,6 +16,65 @@
    {{ with resources.Get "js/bobatheme.js" | fingerprint "sha512" }}
        <script defer src="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
    {{ end }}
+    {{ if not hugo.IsServer }}
+        <script defer data-domain="bbaovanc.com" src="https://plausible.bbaovanc.com/js/bobalytics.outbound-links.js"></script>
+        <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+        {{ with resources.Get "js/share-event.js" | fingerprint "sha512" }}
+            <script defer src="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
+        {{ end }}
+    {{ end }}
+    {{ $isso_url := .Permalink }}
+    {{ if .IsTranslated }}
+        {{ with index .AllTranslations 0 }}
+            {{ $isso_url = .Permalink }}
+        {{ end }}
+    {{ end }}
+    <script defer src="https://isso.bbaovanc.com/js/embed.min.js"
+            data-isso-id="{{ $isso_url }}"
+            data-isso-default-lang="{{ .Language.Lang }}"
+            data-isso-css="true"
+            data-isso-max-comments-top="inf"
+            data-isso-max-comments-nested="inf"
+            data-isso-reveal-on-click="5"
+            {{/*
+            data-isso-avatar-bg="#111"
+            data-isso-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
+            */}}
+            data-isso-vote="true"
+            {{/*
+            data-isso-vote-levels=""
+            */}}
+            data-isso-feed="true"
+            data-isso-require-email="false"
+            data-isso-reply-notifications="true"
+            data-isso-reply-notifications-default-enabled="true"
+
+            {{ with (.GetTerms "authors") }}
+                {{ $authorHashes := slice }}
+                {{ range . }}
+                    {{ with .Params.issoUserID }}
+                        {{ $authorHashes = $authorHashes | append . }}
+                    {{ end }}
+                {{ end }}
+
+                data-isso-page-author-hashes="{{ delimit $authorHashes "," }}"
+            {{ end }}
+            >
+    </script>
+
+    {{ if eq .Layout "search" }}
+        {{ with resources.Get "css/search.css" | fingerprint "sha512" }}
+            <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+        {{ end }}
+
+        <link rel="stylesheet" type="text/css" href="{{ absURL "pagefind/pagefind-ui.css" }}" crossorigin="anonymous">
+        <script src="{{ absURL "pagefind/pagefind-ui.js" }}" crossorigin="anonymous"></script>
+        <script>
+            window.addEventListener('DOMContentLoaded', (event) => {
+                new PagefindUI({ element: "#search-box", showSubResults: true });
+            });
+        </script>
+    {{ end }}

    {{ with .Site.Params.faviconSVG }}
        <link rel="icon" href="{{ . | absURL }}" />
@@ -26,6 +85,10 @@

    <title>{{ .Render "head_title" }}</title>

+    {{ range .Site.Params.rel_me }}
+        <link rel="me" href="{{ . }}" />
+    {{ end }}
+
    {{ partial "seo-tags/opengraph.html" . }}
    {{ partial "seo-tags/twitter-cards.html" . }}
    {{ partial "seo-tags/schema.html" . }}
@@ -34,6 +97,4 @@

    <meta name="language" content="{{ .Language.Lang }}">
    <meta name="description" content="{{ (partial "seo-description.html" .) | plainify }}">
-
-    {{ partial "additional-head.html" . }}
 </head>
--- a/layouts/_partials/page-metadata/custom-full.html
+++ b/layouts/_partials/page-metadata/custom-full.html
@@ -1 +0,0 @@
-<!-- Placeholder for website to add custom post metadata to summaries -->
--- a/layouts/_partials/page-metadata/item/comments-counter.html
+++ b/layouts/_partials/page-metadata/item/comments-counter.html
@@ -0,0 +1,8 @@
+<span class="page-metadata-item" 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
+       * have access to the original page context
+       */}}
+    <a href="{{ .RelPermalink }}#isso-thread">comments</a>
+</span>
--- a/layouts/_partials/page-metadata/post-full.html
+++ b/layouts/_partials/page-metadata/post-full.html
@@ -21,8 +21,7 @@
        {{ partial "page-metadata/item/readingtime.html" . }}
        {{ partial "page-metadata/item/edithistory.html" . }}
        {{ partial "page-metadata/item/viewraw.html" . }}
-
-        {{ partial "page-metadata/custom-full.html" . }}
+        {{ partial "page-metadata/item/comments-counter.html" . }}

        {{ partial "page-metadata/item/categories.html" . }}

--- a/layouts/_partials/page-metadata/post-short.html
+++ b/layouts/_partials/page-metadata/post-short.html
@@ -9,6 +9,7 @@

        {{ partial "page-metadata/item/authors.html" . }}
        {{ partial "page-metadata/item/readingtime.html" . }}
+        {{ partial "page-metadata/item/comments-counter.html" . }}

        {{ partial "page-metadata/item/series.html" . }}
        {{ partial "page-metadata/item/categories.html" . }}
--- a/layouts/_shortcodes/figure.html
+++ b/layouts/_shortcodes/figure.html
@@ -12,6 +12,6 @@
    {{ end }}

    {{ with or (.Get "caption") (.Get 0) $resource_title }}
-        <figcaption>{{ . | markdownify }}</figcaption>
+        <figcaption>{{ (replace . "\\bt" "`") | markdownify }}</figcaption>
    {{ end }}
 </figure>
--- a/layouts/single.html
+++ b/layouts/single.html
--- a/layouts/single.markdown.md
+++ b/layouts/single.markdown.md
--- a/layouts/search.html
+++ b/layouts/search.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+    <div id="search-box"></div>
+{{ end }}
--- a/layouts/section.html
+++ b/layouts/section.html
Author	SHA1	Message	Date
BBaoVanC	b15ca73977	Remove a few unnecessary elements when printing - Hide clickable link icon on headings in articles - Hide "Copy" button on code blocks - Hide "View raw" button in page metadata	2025-07-30 01:45:11 -05:00
BBaoVanC	ccb5170d2b	layouts: Rename list to section and single to page This makes them more specific. For example, section.html can't accidentally be a fallback for taxonomy.html, and page.html can't for term.html. Fixes #88	2025-07-30 01:19:19 -05:00
BBaoVanC	433dd125e2	Add comment counter to page metadata Also move the Isso script tag from comments.html to the <head>, since it essentially needs to load on all pages. Fixes #94	2025-07-30 00:43:05 -05:00
BBaoVanC	d50a4dc6bd	Import remaining template and styling code from bbaovanc.com It's probably better structure-wise to have it all consolidated in bobatheme. Then bbaovanc.com is only concerned about content, not stuff that I declared to be specific to my site. This came from when I had multiple sites running bobatheme in the background, so now it's just an arbitrary, legacy distinction. Fixes #86	2025-07-30 00:43:05 -05:00
BBaoVanC	bbe76a44bb	Allow backticks in figure inline caption using \bt Workaround for multline strings bounded with backtick not supporting any way to escape one to type it inside the string.	2025-07-30 00:43:05 -05:00
				`@@ -1 +0,0 @@`
				`<!-- Placeholder for website to add custom post metadata to summaries -->`