bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2025-09-04 02:17:34 -05:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: bbaovanc:remove-share-buttons
Branches Tags
bbaovanc:master bbaovanc:page-list-and-summary-css-cleanup bbaovanc:semantic-html bbaovanc:cleanup-body-modules bbaovanc:remove-share-buttons bbaovanc:share-button-template bbaovanc:wip-print-backgrouhnds bbaovanc:reduce-print-backgrounds bbaovanc:clean-up-print-backgrounds bbaovanc:custom-fonts bbaovanc:custom-fonts-google bbaovanc:breadcrumb-nav-styling bbaovanc:image-resizing
bbaovanc:v1.0.1 bbaovanc:v1.0
..
compare: bbaovanc:61d5ca29dda9931dd698de63e564e9c4b4f0b499
Branches Tags
bbaovanc:master bbaovanc:page-list-and-summary-css-cleanup bbaovanc:semantic-html bbaovanc:cleanup-body-modules bbaovanc:remove-share-buttons bbaovanc:share-button-template bbaovanc:wip-print-backgrouhnds bbaovanc:reduce-print-backgrounds bbaovanc:clean-up-print-backgrounds bbaovanc:custom-fonts bbaovanc:custom-fonts-google bbaovanc:breadcrumb-nav-styling bbaovanc:image-resizing
bbaovanc:v1.0.1 bbaovanc:v1.0

7 Commits
remove-sha ... 61d5ca29dd

Author SHA1 Message Date
BBaoVanC
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
BBaoVanC
8bb8720545 Hide code block copy button when JavaScript is disabled 2025-08-09 03:27:05 -05:00
BBaoVanC
bd8e34a381 Support opengraph structured properties on image and video 2025-08-09 02:53:46 -05:00
BBaoVanC
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
BBaoVanC
c9909762d6 Remove use of style attributes on top level comment section elements 2025-08-09 02:20:33 -05:00
BBaoVanC
cc4af0c385 Add comment explaining why comments.css is not in head 2025-08-09 02:13:15 -05:00
BBaoVanC
7aeb95a437 Add paragraph around comment section "Enable JavaScript" warning 2025-08-09 01:55:43 -05:00
11 changed files with 195 additions and 14 deletions
Expand all files Collapse all files

43
assets/css/bobastyle.css
View File

@@ -668,6 +668,43 @@ footer p {
padding: 8px 15px; 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 formating */
.see-also { .see-also {
background-color: var(--background-1); background-color: var(--background-1);
@@ -747,10 +784,13 @@ footer p {
padding: 4px 8px; padding: 4px 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
height: 2em;
}
.code-block > .code-header > * {
margin: auto 0;
} }
.code-block > .code-header > .code-type { .code-block > .code-header > .code-type {
border-top-left-radius: 8px; border-top-left-radius: 8px;
margin: auto 0;
} }
/* TODO: make the code copy button prettier */ /* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button { .code-block > .code-header > .code-copy-button {
@@ -900,6 +940,7 @@ aside.quote {
.post-meta-view-markdown, .post-meta-view-markdown,
.code-copy-button, .code-copy-button,
.prevnext, .prevnext,
.share-buttons,
.related-posts { .related-posts {
display: none; display: none;
} }

11
assets/css/comments.css
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 */ /* Isso styling */
h4.isso-thread-heading { h4.isso-thread-heading {
color: var(--text-0); color: var(--text-0);

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

@@ -0,0 +1,3 @@
.code-copy-button {
display: none;
}

3
assets/js/share-event.js Normal file
View File

@@ -0,0 +1,3 @@
function share_event(service) {
plausible("Share", {props: {Network: service}});
}

18
i18n/en.yaml
View File

@@ -125,3 +125,21 @@ aria_navbar:
aria_table_of_contents: aria_table_of_contents:
other: "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"

11
layouts/_partials/comments.html
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" }} {{ with resources.Get "css/comments.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }} {{ end }}
<h2 style="margin-bottom: 0;">Comments</h2> <h2>Comments</h2>
<p style="margin: 0; font-size: smaller;"> <p class="email-address-notice">
If you provide an email address, you can enable notifications for If you provide an email address, you can enable notifications for
replies to your comment. It will not be shown publicly. replies to your comment. It will not be shown publicly.
</p> </p>
<noscript> <noscript>
<i>Enable JavaScript to see the comment section.</i> <p class="enable-javascript-notice">
Enable JavaScript to see the comment section.
</p>
</noscript> </noscript>
<section id="isso-thread" data-title="{{ .Title }}"></section> <section id="isso-thread" data-title="{{ .Title }}"></section>

9
layouts/_partials/head.html
View File

@@ -6,6 +6,12 @@
{{ with resources.Get "css/bobastyle.css" | fingerprint "sha512" }} {{ with resources.Get "css/bobastyle.css" | fingerprint "sha512" }}
<link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }} {{ 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" }} {{ 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'"> <link rel="stylesheet" type="text/css" href="{{ .Permalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" media="print" onload="this.media='all'">
{{ end }} {{ end }}
@@ -19,6 +25,9 @@
{{ if not hugo.IsServer }} {{ if not hugo.IsServer }}
<script defer data-domain="bbaovanc.com" src="https://plausible.bbaovanc.com/js/bobalytics.outbound-links.js"></script> <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> <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 }} {{ end }}
{{ $isso_url := .Permalink }} {{ $isso_url := .Permalink }}
{{ if .IsTranslated }} {{ if .IsTranslated }}

36
layouts/_partials/seo-tags/opengraph.html
View File

@@ -3,16 +3,6 @@
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}"> <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:url" content="{{ .Permalink }}"> <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 }} {{ with .Section }}
<meta property="article:section" content="{{ . }}"> <meta property="article:section" content="{{ . }}">
{{ end }} {{ end }}
@@ -37,12 +27,38 @@
<meta property="og:site_name" content="{{ . }}"> <meta property="og:site_name" content="{{ . }}">
{{ end }} {{ 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" }} {{ $videos := $.Resources.ByType "video" }}
{{ $featured_video := $videos.GetMatch "*feature*" }} {{ $featured_video := $videos.GetMatch "*feature*" }}
{{ if not $featured_video }} {{ if not $featured_video }}
{{ $featured_video = $videos.GetMatch "{*cover*,*thumbnail*}" }} {{ $featured_video = $videos.GetMatch "{*cover*,*thumbnail*}" }}
{{ end }} {{ end }}
{{ with $featured_video }} {{ with $featured_video }}
<meta property="og:video" content="{{ $featured_video.Permalink | absURL }}"> <meta property="og:video" content="{{ $featured_video.Permalink | absURL }}">
{{ with .MediaType }}
<meta property="og:video:type" content="{{ . }}">
{{ end }}
{{ end }} {{ end }}

2
layouts/_partials/seo-tags/twitter-cards.html
View File

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

69
layouts/_partials/share.html Normal file
View File

@@ -0,0 +1,69 @@
<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>

4
layouts/page.html
View File

@@ -60,6 +60,10 @@
</div> </div>
{{ end }} {{ end }}
{{ if .Site.Params.shareButtons }}
{{ partial "share.html" . }}
{{ end }}
{{ if .Params.comments }} {{ if .Params.comments }}
<div class="comments"> <div class="comments">
{{ partial "comments.html" . }} {{ partial "comments.html" . }}