Remove share buttons

About 0.19% of visitors in the past 12 months have clicked the share buttons at all. The code is a little ugly, and it wastes a tiny bit of space at the bottom of the page. I don't think it's really worth having. And I think people probably print a page through the browser UI anyways.
Remove full-width-hr shortcode
2025-08-31 00:57:33 -05:00 · 2025-08-09 00:22:27 -05:00 · 2025-08-08 14:10:20 -05:00 · 2025-08-08 14:01:37 -05:00 · 2025-08-08 13:51:50 -05:00 · 2025-08-08 13:45:30 -05:00
18 changed files with 115 additions and 242 deletions
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -158,61 +158,38 @@ pre > code {

 /* }}} */

-/* Basic elements {{{ */
+/* Common distances/sizes {{{ */

-html {
-  scroll-behavior: smooth;
+:root {
+  --page-margin: 16px;
 }

-@media screen and (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
+/* }}} */

-body {
-  background-color: var(--background-0);
-  color: var(--text-0);
-  overflow-wrap: break-word;
-  margin: 0;
-}

-.main-container {
-  margin: 20px auto;
-  padding: 0 20px;
-  max-width: 760px; /* 720px + 20px for left & right padding */
-}
-
-footer {
-  margin: 20px 0;
-  text-align: center;
-  font-size: smaller;
-}
-
-footer p {
-  margin: 0;
-}
+/* Common elements {{{ */

 img,
 video {
  max-width: 100%;
 }

-.post-media > figure img,
-.post-media > figure video {
+figure > .figure-media {
  padding: 5px;
-  border: 7px solid var(--figure-border);
 }

-figure img,
-figure video {
-  padding: 5px;
+figure > .figure-media.border {
  border: 2px solid var(--figure-border);
 }

+.post-media > figure > .figure-media {
+  border: 7px solid var(--figure-border);
+}
+
 figure {
-  margin: auto;
-  display: inline-block;
+  display: block;
+  text-align: center;
+  margin: 0;
 }

 figcaption {
@@ -240,14 +217,6 @@ hr {
  border: 1px solid var(--background-3);
 }

-@media (min-width: 720px) {
-  .full-width-hr {
-    /* see also: the related-posts section too */
-    margin-left: calc(-100vw / 2 + 760px / 2);
-    margin-right: calc(-100vw / 2 + 760px / 2);
-  }
-}
-
 table.simple {
  border-collapse: collapse;
  border: 2px solid var(--text-1);
@@ -307,12 +276,40 @@ table.simple tbody tr:nth-child(even) {
 /* }}} */


-/* Heading formatting (article section titles) {{{ */
+/* Baseof formatting {{{ */

-/* this is also used i.e. in page-title */
-.heading-link {
-  color: inherit;
-  font-weight: bold;
+html {
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+body {
+  background-color: var(--background-0);
+  color: var(--text-0);
+  overflow-wrap: break-word;
+  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 */
+}
+
+footer {
+  margin: var(--page-margin) 0;
+  text-align: center;
+  font-size: smaller;
+}
+
+footer p {
+  margin: 0;
 }

 /* }}} */
@@ -325,23 +322,30 @@ table.simple tbody tr:nth-child(even) {
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: var(--background-1);
+  /* padding can't be here because then the first navbar element will be shifted too far over,
+   * or it will need its hover background to be chopped off on the left */
 }

 .header {
  flex-grow: 1;
-  margin: 8px 16px;
+  margin: 8px var(--page-margin);
  font-size: 1.25em;
  display: flex;
  align-items: center;
 }

+.header a {
+  color: inherit;
+  font-weight: bold;
+}
+
 .navbar {
  display: flex;
  flex-wrap: wrap;
 }

 .navbar-item {
-  padding: 12px 16px;
+  padding: 12px var(--page-margin);
  white-space: nowrap;
 }

@@ -375,7 +379,7 @@ table.simple tbody tr:nth-child(even) {
 /* Breadcrumb navigation {{{ */

 .breadcrumb {
-  margin: 20px 0;
+  margin: var(--page-margin) 0;
 }

 .breadcrumb ul {
@@ -483,6 +487,10 @@ table.simple tbody tr:nth-child(even) {
  margin-bottom: 10px;
 }

+.page-title a {
+  color: inherit;
+}
+
 .page-title h1 {
  margin: 0;
 }
@@ -633,7 +641,7 @@ table.simple tbody tr:nth-child(even) {
 /* }}} */


-/* Content (single) formatting {{{ */
+/* Components exclusive to content/single pages {{{ */

 .series-box {
  background-color: var(--background-1);
@@ -660,43 +668,6 @@ table.simple tbody tr:nth-child(even) {
  padding: 8px 15px;
 }

-/* Social media share buttons */
-
-.share-buttons {
-  background: var(--background-1);
-  color: var(--text-1);
-  margin: 25px 0;
-  padding: 8px 0;
-  border-radius: 8px;
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  font-size: 32px;
-}
-
-.share-buttons a {
-  background-color: var(--background-2);
-  color: var(--text-2);
-  padding: 4px;
-  border-radius: 8px;
-}
-.share-buttons a:hover {
-  background-color: var(--background-3);
-  color: var(--text-3);
-}
-
-.share-buttons svg {
-  display: block;
-}
-
-/* https://stackoverflow.com/a/72073682/19003757 */
-/*
-.telegram-share > svg {
-  transform: scale(1.5);
-  margin: 9px -9px -9px 9px;
-}
-*/
-
 /* See also formating */
 .see-also {
  background-color: var(--background-1);
@@ -873,19 +844,16 @@ aside.quote {

 /* }}} */

-/* }}} */
-
 /* Related posts section {{{ */

-.full-width-page-list {
-  /* make left/right 0 margin so it takes up full width */
-  margin: 25px 0;
-}
+/* 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-left: 20px;
-  margin-right: 20px;
+  margin: var(--page-margin);
 }

 .related-posts .page {
@@ -895,21 +863,24 @@ aside.quote {
 }

 .related-posts .page:first-child {
-  margin-left: 20px;
+  margin-left: var(--page-margin);
 }
 .related-posts .page:last-child {
-  margin-right: 20px;
+  margin-right: var(--page-margin);
 }

 .related-posts .page-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  margin-bottom: var(--page-margin);
 }

 /* }}} */

+/* }}} */
+

 /* @media specializations {{{ */

@@ -929,7 +900,6 @@ aside.quote {
  .post-meta-view-markdown,
  .code-copy-button,
  .prevnext,
-  .share-buttons,
  .related-posts {
    display: none;
  }
--- a/assets/js/share-event.js
+++ b/assets/js/share-event.js
@@ -1,3 +0,0 @@
-function share_event(service) {
-    plausible("Share", {props: {Network: service}});
-}
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -125,21 +125,3 @@ aria_navbar:

 aria_table_of_contents:
  other: "table of contents"
-
-aria_share_twitter:
-  other: "share to twitter button"
-
-aria_share_facebook:
-  other: "share to facebook button"
-
-aria_share_linkedin:
-  other: "share to linkedin button"
-
-aria_share_reddit:
-  other: "share to reddit button"
-
-aria_share_telegram:
-  other: "share to telegram button"
-
-aria_share_print:
-  other: "print article button"
--- a/layouts/_partials/description-or-summary.html
+++ b/layouts/_partials/description-or-summary.html
@@ -1,7 +0,0 @@
-{{ with .Description }}
-    <p>{{ . | markdownify }}</p>
-{{ else }}
-    {{ with .Summary }}
-        {{ . }}
-    {{ end }}
-{{ end }}
--- a/layouts/_partials/embed-resource.html
+++ b/layouts/_partials/embed-resource.html
@@ -3,9 +3,9 @@
       *       claims that images won't work with JS disabled since it would
       *       make tracking possible, but my experience says otherwise
       */}}
-    <img src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
+    <img class="figure-media" src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
 {{ else if eq .ResourceType "video" }}
-    <video controls preload="metadata">
+    <video class="figure-media" controls preload="metadata">
        {{ with .Params.alt }}
            {{ warnf "video does not support alt text, '%s'" . }}
        {{ end }}
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -19,9 +19,6 @@
    {{ 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 }}
--- a/layouts/_partials/_internal/pagination.html
+++ b/layouts/_partials/_internal/pagination.html
--- a/layouts/_partials/pagination.html
+++ b/layouts/_partials/pagination.html
@@ -1,6 +1,6 @@
 {{ if gt .Paginator.TotalPages 1 }}
    <nav class="pagination">
        {{/* https://github.com/gohugoio/hugo/blob/a88b488181279befd50e1d127f9f67604f2f9854/tpl/tplimpl/embedded/templates/_partials/pagination.html */}}
-        {{ partial "_internal/pagination.html" . }}
+        {{ partial "pagination-hugo.html" . }}
    </nav>
 {{ end }}
--- a/layouts/_partials/share.html
+++ b/layouts/_partials/share.html
@@ -1,69 +0,0 @@
-<div class="share-buttons">
-    {{ if .Site.Params.shareButtons.twitter }}
-        <a class="twitter-share"
-           target="_blank"
-           rel="noopener"
-           aria-label="{{ i18n "aria_share_twitter" }}"
-           onclick="share_event('Twitter');"
-           href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&via=bbaovanc">
-            {{- partial "icon.html" "twitter" -}}
-        </a>
-    {{ end }}
-
-    {{ if .Site.Params.shareButtons.facebook }}
-        <a class="facebook-share"
-           target="_blank"
-           rel="noopener"
-           aria-label="{{ i18n "aria_share_facebook" }}"
-           onclick="share_event('Facebook');"
-           href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">
-            {{- partial "icon.html" "facebook" -}}
-        </a>
-    {{ end }}
-
-    {{ if .Site.Params.shareButtons.linkedin }}
-        <a class="linkedin-share"
-           target="_blank"
-           rel="noopener"
-           aria-label="{{ i18n "aria_share_linkedin" }}"
-           onclick="share_event('LinkedIn');"
-           href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}">
-            {{- partial "icon.html" "linkedin" -}}
-        </a>
-    {{ end }}
-
-    {{ if .Site.Params.shareButtons.reddit }}
-        <a class="reddit-share"
-           target="_blank"
-           rel="noopener"
-           aria-label="{{ i18n "aria_share_reddit" }}"
-           onclick="share_event('Reddit');"
-           href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}">
-            {{- partial "icon.html" "reddit" -}}
-        </a>
-    {{ end }}
-
-    {{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing.
-            https://stackoverflow.com/q/72073399/19003757
-            https://github.com/michaelampr/jam/issues/39
-    {{ if .Site.Params.shareButtons.telegram }}
-        <a class="telegram-share"
-           target="_blank"
-           rel="noopener"
-           aria-label="{{ i18n "aria_share_telegram" }}"
-           onclick="share_event('Telegram');"
-           href="https://t.me/share/url?url={{ .Permalink }}&text={{ .Title }}">
-            {{- partial "icon.html" "telegram" -}}
-        </a>
-    {{ end }}
-    */}}
-
-    {{ if .Site.Params.shareButtons.print }}
-        <a class="print-share"
-           aria-label="{{ i18n "aria_share_print" }}"
-           href="javascript:void(0)"
-           onclick="window.print(); share_event('Print');">
-            {{- partial "icon.html" "printer" -}}
-        </a>
-    {{ end }}
-</div>
--- a/layouts/_partials/top.html
+++ b/layouts/_partials/top.html
@@ -1,6 +1,6 @@
 <div class="top">
    <header class="header">
-        <a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
+        <a href="{{ .Site.Home.Permalink | absLangURL }}">
            {{ .Site.Title | markdownify }}
        </a>
    </header>
--- a/layouts/_shortcodes/full-width-hr.html
+++ b/layouts/_shortcodes/full-width-hr.html
@@ -1 +0,0 @@
-<hr class="full-width-hr">
--- a/layouts/authors/summary.html
+++ b/layouts/authors/summary.html
@@ -1,13 +1,15 @@
 <h2 class="page-title">
-    <a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
 </h2>

 {{ partial "page-metadata/author.html" . }}

-<div class="page-description">
-    {{ partial "description-or-summary.html" . }}
-</div>
+{{ with .Summary }}
+    <div class="page-description">
+        {{ . }}
+    </div>
+{{ end }}

 <div class="readmore">
    <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -13,28 +13,28 @@
                {{ partial "breadcrumb.html" . }}
            {{ end }}

-            <main id="main-content" {{ if .IsPage }}data-pagefind-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>
+
+            {{ 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 */}}
        {{ end }}
-
-        {{ if or .Site.Copyright .Site.Params.footer }}
-            <footer>
-                {{ with .Site.Copyright }}
-                    {{ . | safeHTML }}
-                {{ end }}
-
-                {{ with .Site.Params.footer }}
-                    {{ . | $.RenderString (dict "display" "block") }}
-                {{ end }}
-            </footer>
-        {{ end }}
    </body>

 </html>
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -24,7 +24,7 @@

    {{ partial "feature-figure.html" . }}

-    <article class="post-content">
+    <article class="post-content" data-pagefind-body>
        {{ .Content }}
    </article>

@@ -60,10 +60,6 @@
        </div>
    {{ end }}

-    {{ if .Site.Params.shareButtons }}
-        {{ partial "share.html" . }}
-    {{ end }}
-
    {{ if .Params.comments }}
        <div class="comments">
            {{ partial "comments.html" . }}
--- a/layouts/section.summary.html
+++ b/layouts/section.summary.html
@@ -5,8 +5,10 @@
            {{ .Title | markdownify }}
        </h2>

-        <div class="section-description">
-            {{ partial "description-or-summary.html" . }}
-        </div>
+        {{ with .Summary }}
+            <div class="section-description">
+                {{ . }}
+            </div>
+        {{ end }}
    </div>
 </a>
--- a/layouts/series/summary.html
+++ b/layouts/series/summary.html
@@ -1,14 +1,16 @@
 <h2 class="page-title">
    {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
-    <a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
 </h2>

 {{ partial "page-metadata/series.html" . }}

-<div class="page-description">
-    {{ partial "description-or-summary.html" . }}
-</div>
+{{ with .Summary }}
+    <div class="page-description">
+        {{ . }}
+    </div>
+{{ end }}

 <div class="page-list series-inner">
    {{ range .Data.Pages.Reverse }}
--- a/layouts/summary.html
+++ b/layouts/summary.html
@@ -1,6 +1,6 @@
 <h2 class="page-title">
    {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
-    <a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
+    <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
 </h2>

@@ -8,9 +8,11 @@

 {{ partial "feature-figure.html" . }}

-<div class="page-description">
-    {{ partial "description-or-summary.html" . }}
-</div>
+{{ with .Summary }}
+    <div class="page-description">
+        {{ . }}
+    </div>
+{{ end }}

 <div class="readmore">
    <a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
--- a/layouts/taxonomy.html
+++ b/layouts/taxonomy.html
@@ -28,7 +28,7 @@
                            </a>
                            {{ partial "page-metadata/taxonomy.html" . }}
                        </div>
-                        {{ partial "description-or-summary.html" . }}
+                        {{ .Summary }}
                    </article>
                {{ end }}
            {{ end }}
Author	SHA1	Message	Date
BBaoVanC	b1cdf7c318	Remove share buttons About 0.19% of visitors in the past 12 months have clicked the share buttons at all. The code is a little ugly, and it wastes a tiny bit of space at the bottom of the page. I don't think it's really worth having. And I think people probably print a page through the browser UI anyways.	2025-08-09 00:22:27 -05:00
BBaoVanC	14475c13f4	Remove full-width-hr shortcode Not sure what I planned to use this for. It has since become outdated and out of sync with the new margins I set on body recently in `4e753395ba` and `6b729c6acf`.	2025-08-08 14:10:20 -05:00
BBaoVanC	6b729c6acf	Adjust margins on related-posts to match rest of body Didn't notice this when writing `4e753395ba`	2025-08-08 14:01:37 -05:00
BBaoVanC	f751c4b104	Remove unused .full-width-page-list rule	2025-08-08 13:51:50 -05:00
BBaoVanC	de20387b5a	Fix useless scrollbar on related posts When all related posts fit on the same screen, there was a useless scrollbar. I never noticed this because Firefox incorrectly hides the scrollbar automatically. The issue is visible on Chromium.	2025-08-08 13:45:30 -05:00
BBaoVanC	84004d3ac0	Change pagefind to only index the content of articles Fixes #97	2025-08-08 01:42:25 -05:00
BBaoVanC	52a6440011	Remove heading-link class It was used to make both website title and page titles in summaries not have link color. Instead, just directly configure those elements.	2025-08-08 01:41:38 -05:00
BBaoVanC	322928ed7a	Reorganize CSS to have better sections - Separate baseof.html elements from styling code for general elements used everywhere - Rename some of the fold titles - Include related posts section styling in the content styling section	2025-08-08 01:28:28 -05:00
BBaoVanC	4e753395ba	Align top bar with main horizontal margin - Use a variable to make sure that top bar and body margins stay equal - Lower side margins to 16px so that the gap in navbar-items fits right	2025-08-08 01:02:04 -05:00
BBaoVanC	5d335647d0	Remove description-or-summary partial and just use .Summary I think this may have changed in Hugo's history, but now description and summary are considered different things. The description is what goes in metadata (and what search engines see), while the summary is the blurb about the article that should be displayed when rendering a summary (what I should've been using always here).	2025-08-07 02:17:24 -05:00
BBaoVanC	22fff1a9c5	Replace _internal subdirectory in partials I originally put it there to mimic the old pattern before Hugo 0.148, but it probably just makes things confusing. Fixes #90	2025-08-07 01:05:06 -05:00
BBaoVanC	b79c956c07	Remove make figure images centered and remove border Also use a generic .figure-media class instead of manually specifying both img and video in the CSS Fixes #36 and a draft issue	2025-08-05 21:49:28 -05:00