Setting Up Umami Kudos on Astropaper

I was asked to share about how I setup Umami for Kudos or upvotes by Jack. This is that process!

Table of contents

Intro

Umami is a self-hosted web analytics app that is pretty easy to setup, to use and get value out of. One of the more interesting features of it is the ability to create custom events to track what ever you want. For blogs, one possible use is for an upvote or kudos button. This is a button that site visitors can press that signals you as site owner that the site visitors appreciated whatever page they happen to be viewing. I like it as it helps me understand the sort of content that people like to read (as well as the converse - what they don’t want to read). See it in action at the bottom of this post!

Get Yourself Ready

To follow along you need to make sure that you:

• Have Umami setup for your site
• Have Astropaper setup with your
• Have an easy was to access and modify the Astropaper src directory

Getting Umami Ready

As long as you have the site setup in Umami and tracking code installed in Astropaper you are good! If you don’t have this done you need to do it. Start by adding a site to your Umami install. Under settings, click on the Tracking Code tab and copy it. Then, in your astropaper install, edit this file:

src/layouts/Layout.astro

And add the tracking code before you see <!-- General Meta Tags -->

Once this is done, you are done on the Umami side (until you start viewing events!).

Setup the UpVote Button

To setup the Upvote button you only need to edit one file in Astropaper: src/layouts/PostDetails.astro

First, add the button

In the PostDetails file, find the position in the HTML where you want the Upvote button to be. I chose right after the tags. If you are unsure (or are uncomfortable in code) start here. Look for this code block:

    <ul class="my-8">
      {tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
    </ul>

That’s what puts the tags in the HTML. Add this on the next line:

<button id="upVote" class="focus-outline whitespace-nowrap py-1 hover:opacity-75" data-umami-event={post.id}>
<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-star"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<span>Like this post? Up Vote it!</span></button>
<br />
<br />

The important parts here:

• The id=upVote and class="... data-umami-event={post.id} in the Button attributes are the most important bits. The first serves as an anchor that allows you to signal to the page that the button has been pressed; the second is what communicates with the Umami script to track the event when the button is pressed.

Change whatever you want stylistically but keep in mind that you’ve got to be able to anchor to the button to update classes and Umami has to be able to register the press.

Pressing the Button

Next, you need to scroll to the bottom of the PostDetails file and add the following codeblock before the </script> tag:

  function upVote() {
    document.querySelector("#upVote")?.addEventListener("click", () => {
      document.querySelector("#upVote").classList.add("upvoted");
    });
  }
  upVote();

This bit of javascript adds a new class (upvoted) to the button once the button has been pressed. This allows you to style differently when pressed (or not).

Finally, Style It!

There is one last bit of code to add to PostDetails. You’ll need to scroll up to the Styles section and add the new classes used for the button. For me, this looks like adding the following code to the Styles section:

  #upVote.upvoted {
   color: blue !important;
 }

Right now this is really simple for me - it just changes the color.

Test it Out!

Once you do all of this you can save the file! If you run Astropaper in SSR mode you can view the change immediately; if it’s a static site you’ll need to process it. Navigate to a post and test it out!

Outstanding Issues

• Currently, you can only view total number of views in Umami. I’d love to code a bit to keep track of it and show it on the page as well (#longtermgoals)
• Currently, there is nothing stopping you from repeatedly upvoting. Ideally that would be fixed (like in Bear Blog) but I’m not planning on it anytime soon. (#longertermgoals)
• I’d love to tighten up the styling (#shorttermgoals!)