Adding a Fediverse Share Button to my Emacs Nikola Blog

Notroot — Fri, 17 May 2024 19:46:34 GMT

I was browsing the Fediverse, as is my wont, and I came across a fella named Stefan Bohacek announcing the release of his new Fediverse Share Button. I tried it with my Sharkey instance and it worked! So I decided to add it to this blog. Even working with Nikola and Emacs, it was pretty frickin' easy.

To continue my very meta habit of writing about blogging on my blog, here's how I added the share button at the bottom of this page.

Install Fediverse Share Button

First, we simply need to clone the fediverse-share-button repo. I cloned it next to my blog directory to make it a little simpler to move files into place, like this:

cp -r ./fediverse-share-button/fediverse-share-button ./notroot-blog/files

That's it for now! Next, I'll show you how to incorporate those files into your Nikola builds.

I referred to this "Random Geekery" blog post to figure out how to tweak Nikola themes and templates to include my fancy new share button.

Boiling down my "learnings" (barf) for the reader, here's what I did.

Create a New Theme to Tweak

Rather than tweaking the installed theme – in my case, the hack theme – we want to inherit from it, and make the changes to our own theme templates.

First, I created a new theme called notroot, based on hack, like this:

nikola theme --new notroot --parent hack

Then, I changed my theme and disabled bundling in Nikola's conf.py, like this:

THEME = "notroot"
USE_BUNDLES = False

Then, I copied the post template into my new notroot theme, like this:

nikola theme --copy-template post.tmpl

To make sure my new notroot theme was exactly the same as hack, I did a quick built and served it locally, like this:

nikola build
nikola serve

Perfect! Nothing changed… yet.

Add Fediverse Share Button

Next, I opened the aforementioned post.tmpl file in Emacs, and more or less followed Stefan's instructions. However, because we're working with a Nikola template (Mako), there was a little more to it.

My post.tmpl has a block called extra_head, so that's where I added the CSS link. It should look sorta like this afterwards:

<%block name="extra_head">
<!-- ... the rest of 'extra_head' ... -->
<link rel="stylesheet" href="/fediverse-share-button/styles.min.css">
</%block>

Note that, unlike Stefan's instructions, we use an absolute path here /, not a relative path ./, to the fediverse-share-button/ directory. That's because Nikola will move things around when it builds, and because we just plopped fediverse-share-button into the files/ directory, it will be at the top level, next to assets/ and images/.

To include the <script> tag pointing to the Javascript for our share button, I had to add an extra_js block to the bottom of post.tmpl. It also uses absolute paths, like this:

<%block name="extra_js">
<script src="/fediverse-share-button/script.min.js" defer class="fsb-script"></script>
</%block>

Then, finally, I was able to include the actual button <form> element. I chose the bottom of the post, above the navigation. The whole content block, after my changes, looks like this (comments added for emphasis):

<%block name="content">
<article class="post-${post.meta('type')} h-entry hentry postpage" itemscope="itemscope" itemtype="http://schema.org/Article">
    ${pheader.html_post_header()}
    <div class="e-content entry-content" itemprop="articleBody text">
    ${post.text()}
    </div>
    <aside class="postpromonav">

	<!-- START fediverse-share-button form -->

	<form class="fsb-prompt">
	    <label>Share with the fediverse</label>
	    <div class="fsb-input-group mb-3">
		<span class="fsb-input-group-text">https://</span>
		<input required
		       type="text"
		       name="fediverse-domain"
		       placeholder="mastodon.social"
		       class="fsb-input fsb-domain"
		       aria-label="Amount (to the nearest dollar)">
		<button class="fsb-button"
			type="submit"><img src="/fediverse-share-button/icons/mastodon.svg"
					   class="fsb-icon"></span>Share</button>
	    </div>
	    <p class="fsb-support-note fsb-d-none">
		This server does not support sharing. Please visit <a class="fsb-support-note-link"
								      target="_blank"
								      href=""></a>.
	    </p>
	</form>

	<!-- END form -->

    <nav>
    ${helper.html_tags(post)}
    ${helper.html_pager(post)}
    </nav>
    </aside>
    % if not post.meta('nocomments') and site_has_comments:
	<section id="comment-section" class="comments hidden-print">
	<h2>${messages("Comments")}</h2>
	${comments.comment_form(post.permalink(absolute=True), post.title(), post._base_path)}
	</section>
    % endif
    ${math.math_scripts_ifpost(post)}
</article>
${comments.comment_link_script()}
</%block>

Then, once again, I built it and served it locally to check my work.

Style the Fediverse Share Button

Success! Except…

Except the CSS was all screwy. The share button itself was enormous, due to how hack CSS treats all <img> tags, and it was all left-justified, when my tags right below are centered.

Let's fix that!

It turned out to be dead simple. I inspected the classes in the browser, fixed it so it looked right, then copied those styles out of files/fediverse-share-button/styles.css and into my own files/assets/css/custom.css file. Then I added the attributes needed to fix things.

To fix the enormous button, I just added !important to max-width:

.fsb-icon {
  max-width: 1rem !important;
  margin-right: 0.5rem;
  vertical-align: baseline;
}

To get the whole shebang centered, I modified .fsb-prompt to add auto margins on the right and left, which effectively centered the <form> itself. I also had the form center text. It looks like this, now:

.fsb-prompt{
  max-width: 500px;
  margin-top: 52px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

And voila! Beautiful!

Build and Deploy

Once I was satisfied with the look and functionality, I was ready for the final build and deployment.

First, though, I needed to minify the CSS changes that I had made. Stefan describes this, as well – for both JS and CSS – but here's exactly what I did:

npm install minify -g
minify files/fediverse-share-button/styles.css > files/fediverse-share-button/styles.min.css

Finally I was ready to build and deploy, as usual, from within Emacs.

M-x nikola-build to build.
M-! nikola deploy to deploy.

Next Steps

Next steps are three-fold:

Publish this blog post to my blog.
Once published, I will click the Fediverse Share Button and share to my Fediverse account.
Then I will get the article ID of that Fediverse note, and add it to the meta for this post. Then I'll rebuild and redeploy. This will enable the "Comments" section, and replies to my Fediverse note will appear as comments on this blog post!

It's like frickin' magic, baby!