notroot (Posts about blog)

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!

Blogging with Emacs: Plots and Diagrams

Notroot — Wed, 01 May 2024 00:39:09 GMT

Continuing my very-meta habit of blogging about how I'm blogging, and not much else… I give you: "Bells and Whistles," perhaps better titled, "More of the Same".

In Emacs Org Mode, there are many ways to plot and diagram, and even draw (it's terrible, don't bother). Let's see if we can get some working with my Nikola-based blogging solution.

Plotting Charts

This example is from Org Mode's official documentation, though I've changed the output path for Nikola building.

First I'll activate a Python venv with matplotlib pre-installed

import matplotlib
import matplotlib.pyplot as plt
fig=plt.figure(figsize=(3,2))
plt.plot([1,3,2])
fig.tight_layout()

fname = '../images/myfig.png'
plt.savefig(fname)
# fname[1:] # return this to org-mode

Then make an HTML link (on Org export) into images, like this:

[[./images/myfig.png]]

Which will then display the image after Nikola builds, like this:

Voila! We plotted a chart! If I change the Python code, and re-build, I'll get a different chart.

Diagramming

Diagrams are different from plots and charts. They aren't strictly mathematical. Instead, we need to look to other possible solutions.

Emacs package sources offer several options, but the one I have experience with is ditaa.

+--------+   +-------+    +-------+
|        | --+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+

Then make an HTML link like before:

Voila! We made a diagram!

Conclusion

I also tried including LaTeX equations and inline LaTeX, to no avail. Even with the default MathJax, it seems that Nikola does not do a pure Emacs Org Mode export to HTML, and I was unable to get LaTeX working.

Which brings up the point I'd like to conclude with:

Nikola + Org Mode is a workable solution that lets us use most Org Mode features out-of-the-box, like tables, executable code blocks, and the like.

However, when it comes to bells and whistles, it falls a little short of pure Org Mode HTML export.

Having to create a separate HTML link for an image is annoying, but Nikola makes so much else easier that I can probably overlook it. If I was doing a pure Org Mode export, Emacs would create the image link for me.
The ditaa integration was awkward, at best. I basically had to do an Org Mode HTML export to the ../images directory, then add an HTML link. If it was pure Org Mode export, Emacs would create the image link for me.
No Emacs-based LaTeX. In fact, I couldn't get LaTeX to display at all! Even after I added the mathjax tag to the post's meta file, as described in the Nikola Handbook.

For now, I'll keep using Nikola, but my next iteration of this blog might be pure Org Mode, with HTML templates.

Blog Upgrade

Notroot — Sat, 06 Apr 2024 21:38:32 GMT

I'm an engineer, and I'm an Emacs nut, so yes: I tinker a lot.

My latest tinkering was to move my Nikola- and Emacs-based blog out of GitHub, when I abandoned that service entirely, and moved all my code to GitLab.

My reasons for moving are pretty straightforward: I think the "AI" hype is bullshit, and I won't have anything to do with it. I certainly don't want Micro$oft training their "AI" LLMs on my code. Fuck our robot overlords. They can meet me in the street and we can fight it out.

GitLab also has "AI" features, but nothing like GitHub. What's more, I can host my own GitLab and eschew their "AI" fuckstickery, entirely. Can't do that with GitHub, so it was an easy calculus to perform.

I did try to use GitLab Pages, which is really part of GitLab CI, which is to say, "Pipelines".

Overkill, yo. Too much configuration-over-convention for my taste. I don't like Python Django, either, for the same reason. If I'm doing web work, gimme Flask any day of the week.

Anyhow, while I was moving my blog, I thought I'd give it a new look. No more white background, and no more left-aligned container div.

Still not much here on this pathetic blog, but maybe now that I can write and easily deploy to my own host, I'll actually blog a little more.

I might even write about something besides Emacs!

Ya never know…