Added a realistic highlighter overlay to <mark> tags in my custom Micro.blog theme … f$&k if I know why.
mark, .yellow-highlighter {
position: relative;
background-color: transparent;
&::before {
content: "";
background: transparent url("/assets/png/highlighter.png") repeat-x;
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.25;
}
}
Wonder if using Hugo's resource bundling capability to shove all the Micro.blog plugin Javascript into one file would be worth the time … or the stylesheets for that matter.
Wild hair runner up goes to refactoring some of my Sass variables into CSS variables … opening up all kinds of theme parameterization possibilities for the theme consumer without having to know a lick of code.
<body style="--md-header-bg: var(--md-header-bg-light); --md-footer-bg: var(--md-footer-bg-light); --md-footer-link-color: var(--md-footer-link-color-dark); --md-footer-link-hover-color: var(--md-footer-link-hover-color-dark); --md-nav-link-color: var(--md-nav-link-color-dark); --md-nav-link-hover-color: var(--md-nav-link-hover-color-dark); --md-nav-link-hover-shadow: var(--md-nav-link-hover-shadow-dark); --md-nav-link-selected-shadow: var(--md-nav-link-selected-shadow-dark); --md-copyright-color: var(--md-copyright-color-dark);">
Any one of those MFers could just as easily be {{/* site.Params.my_awesome_parameter_value */}}
Today's wild hair award goes to adding the ability to conditionally load Micro.blog plugin assets according to configured page paths in plugin-precision-injection. No README yet, but I'm not sure how many of y'all are up for messing with custom themes to begin with.
Enjoy this screenshot while I try to figure out why the f$&k the bottom 'more' HTML comments get through while the top f$&king comments are getting ganked.
Turns out a Hugo shortcode that injects `
` is more useful than simply including it directly.
.@pimoore The other advantage of utilizing Sass would be that theme and plugin creators could make it super easy to custom the appearance of their offerings via proper utilization of Sass variables. I've lumped all of my theme's style sh$te into one big file at the moment as I whittle away at it until it is properly Sassified (since debugging can be a bit of a b$tch … the most I get out of @manton at the moment is the number of errors that happened to be logged) and you might get a sense of how Sass variables and partials can be leveraged by having a look at it (and this is without even touching the functions, mixins, interpolation, etc.):
Updated the category cloud README for the latest version: moondeer.blog/2021/10/2...
plugin-category-cloud got sh$t tons cooler today. The README still needs updating, however.
For the Micro.blog-heads, once I'm done pushing the boundaries of what a plugin can do, I'll start taking requests. You can see what all I'm playing around with here
Updated the lightbox plugin's README with the whole dynamically generated Javascript spiel: moondeer.blog/2021/10/3...
.@mantion … So, parameterizing the plugin-lightbox options (via data files, see this post) totally worked. lightbox.js is now a template file that gets built along with the rest of the site. The walls of possibility for Micro.blog plugins just expanded outward by a sh$t ton.
Boom, @manton, and just like that … all my custom theme's stylesheets are now built from Sass files located in the theme's assets/sass directory.
A plugin for Micro.blog that injects structured data for blog posts via a JSON-LD script tag. This is what search engines use to decorate their results. Confirmation that the structured data is accessible can be had by using Google’s rich results test. It's code lives here.
A guide to navigating the non-obvious nature of the process for providing the data my plugins want … and that you want to give them.
Updated this one: plugin-favicons
All that time fussing with aliases, turns out you can just straight up set the category page's URL in the front matter:
---
title: "Perspectives"
description: "Essays off the beaten path, mostly political in nature at the moment."
url: /perspectives/
menu:
main:
name: "Perspectives"
title: "Perspectives"
identifier: "perspectives"
url: "/perspectives/"
weight: 10
---
*Essays off the beaten path.*
Recreated @manton's Conversation.js output. Not sure why yet.
<div id="conversation-output"></div>
<script type="text/javascript">
fetch('https://micro.blog/conversation.js?url={{ .Permalink }}&format=jsonfeed')
.then(response => response.json())
.then(data => {
loadResponse(data);
});
function loadResponse(response) {
let output = document.getElementById("conversation-output");
if (response.title == "Conversation") {
let posts = response.items.map(entry => loadEntry(entry));
posts.forEach(post => output.appendChild(post));
} else {
output.remove();
}
}
function loadEntry(entry) {
let date = new Date(entry.date_published);
let post = document.createElement("DIV");
post.setAttribute("class", "microblog_post");
post.innerHTML = `
<div class="microblog_user">
<img class="microblog_avatar" src="${entry.author.avatar}" width="20" height="20" style="max-width: 20px;" />
<span class="microblog_fullname">${entry.author.name}</span>
</div>
<div class="microblog_text">${entry.content_html}</div>
<div class="microblog_time">
<a href="${entry.url}>${date.toDateString()}</a>
</div>`;
return post
}
</script>
A plugin for Micro.blog that injects favicon meta into the page <head>. Its code lives here.
If y'all Micro.blog-types ever get curious about all this plugin horsesh$t I've been posting about, feel free to drop on by moondeer.blog. The only reason I write any of them is to use them:
And now I've factored out my social media links into plugin-social-media-links. This might just be OCD.
Let's see, so far today we've created plugin-webring and plugin-precision-injection. Both still need their READMEs.
What I was up to this week:
plugin-bookshelves
plugin-cards
plugin-category-cloud
plugin-plausible-plus
plugin-twitter-analytics
plugin-google-analytics
plugin-google-tag-manager
plugin-prismjs
plugin-banner
plugin-lightbox
plugin-gallery
A plugin for Micro.blog that injects Prism Javascript and CSS stylesheets to enable syntax highlighting for a sh$t ton of grammars within inline <code> tags and <pre><code> combination code blocks. Its code lives here.
A plugin for Micro.blog for presenting a slide carousel containing images and/or videos. Its code lives here. It was inspired by Jason Becker’s plugin with which I’m sure you are already familiar.