Microblog on Hey Loura!

Micro.blog Discovery Ideas

Wed, 27 Aug 2025 12:30:55 -0400

I wrote this draft on 7/28/2025 when I wanted to expand a reply into a full post but then shelved it. Now, almost one month later there is another post complaining about the Micro.blog discover feed. Anyway, I thought it might be nice to gather all of my ideas on the subject in one place.

My Ideas

When I first started, I found the account Micro Monday very helpful to find people around Micro.blog. It was an account that posted occasional roll calls about common topics and people could reply with links to other accounts (or their own) if it fit the topic. There was also a weekly Monday post that people could use to recommend other users or link to an interesting post. I found quite a few of the people I initially followed through that account.

Automated accounts

A roll call account:

What if we brought an account like Micro Monday back? We could crowd source a list of topics for roll calls and automate that account posting a roll call every two weeks. It could be listed on the sign up page as a good account to follow.

A weekly or daily recommendation account:

An automated account that creates a post prompting for this weeks or today’s interesting posts. People could reply and list their recommendations.

Potential cons of this approach

Since both of those would be standard Micro.blog accounts the report/block/mute functionality should work as well as respecting any muted keywords (I’m assuming this works in quoted content, haven’t checked). While this would help ease the burden of discovery, it may increase the burden on Micro.blog with more “report user” requests. It could also lead to fractured conversations if people replied to the automated account instead of following the thread back to the original user. Also the weekly or daily recommendation account would be prone to self-promotion and spamming… so idk.

Follow actions in the timeline

I did this on my own little client which showed the parent conversation first with the replies below it. I had a quick button next to the user I wasn’t following that let me follow them. I was able to quickly expand my follow list, which made my timeline nice and lively. When “seeing replies on the timeline” is enabled for an account, what if there was an indicator that a reply post was to someone you’re not following? And then maybe in the conversation view a follow button next to usernames you aren’t following (like on the “following # users you aren’t following” page)?

Sorting the “following # users you aren’t following”

I would add a last posted timestamp here and sort the list according to that, with the most recently active on top. It can be a burden to open each persons account page to see when they last posted.

Remove non Micro.blog accounts from the tagmoji feeds.

I think if these feeds were cleaned up and made more prominent on the discover UI it would be a nice place to find accounts to follow.

Conclusion

Anyway, these are wish list items and Micro.blog is a very small team. So when I see posts on my timeline complaining about the discover feed I try to think of solutions that don’t require constant attention to curate. But it is a delicate balance to strike, between features that allow discovery and keeping the more toxic nature of social media at bay.

In my personal opinion I like that Micro.blog has erred on the side manual curation for its discovery feed. Yes it is more cumbersome to find people to follow… but I like that? It has made me follow a larger variety of people on Micro.blog than I think I would if not constrained by a limited discovery feature. I also don’t mind the infrequent updates. Once or twice a week is fine by me. I have no urge to visit Discover all that often (which is nice given all the push for services to have you attention 100% of the time)

Just my 2 cents and I’m going to keep thinking on it. :)

Backlinks on a Micro.blog hosted website

Sat, 05 Apr 2025 14:54:26 -0400

One of my goals when transforming my website into a digital garden was to include backlinks on my posts. A backlink is a link to a post that refers to the current post that you are viewing. There are several blog posts out there that explain how enable this for Hugo blogs that I used for inspiration. Here are the steps I used to get this functionality on my blog.

You will need to edit your theme for single blog posts which is located at layouts/posts/single.html (or if using a theme that supports Matt Langford’s microhooks, add/edit one for microhook-after-post.html)

The first thing that needs to happen is to grab the url of the page (in this case the relative permalink) and create a variable to store the matches you come across. That’s the {{ $pages := slice }}

You then iterate through all the blog pages… {{- range .Site.Pages -}} and store {{ $pages = $pages | append . }} any that contain the text of the relative permalink {{- if strings.Contains .Content $relpermalink -}}

	{{ $relpermalink := .RelPermalink }}
	{{ $pages := slice }}
	{{- range .Site.Pages -}}
		{{- if strings.Contains .Content $relpermalink -}}
			{{ $pages = $pages | append . }}
		{{- end -}}
	{{- end -}}

Next you’ll want to iterate through those pages and display them. For simplicity of this post I’m just using a basic HTML list. If the backlinking post has a title, let’s display that, otherwise just take the summary or truncate it.

{{ with $pages }}
	  
			  {{ range $pages }}
				{{- if .Title -}}
				
				  {{ .Title }}
				
				{{- else -}}
				
				  {{ .Summary | truncate 150 }}
				
				{{- end -}}
			  {{ end }}
			
	{{ end }}

Result on my website after some extra styling

You can checkout the full code snippet here:

Updated 4 Apr 2025 based on a comment by Leon Mika to stop backlinks to newsletter pages.

	{{ $relpermalink := .RelPermalink }}
	{{ $pages := slice }}
	{{- range .Site.Pages -}}
		{{- if strings.Contains .Content $relpermalink -}}
		  {{- if not (strings.HasPrefix .RelPermalink "/newsletters") -}}
			  {{ $pages = $pages | append . }}
			{{- end -}}
		{{- end -}}
	{{- end -}}
{{ with $pages }}
  <ul class="backlinks">
		  {{ range $pages }}
			{{- if .Title -}}
			<li>
			  <a class="p-url" href="&#123;&#123; .Permalink%20}}">{{ .Title }}</a>
			</li>
			{{- else -}}
			<li>
			  <a class="p-url" href="&#123;&#123; .Permalink%20}}">{{ .Summary | truncate 150 }}</a>
			</li>
			{{- end -}}
		  {{ end }}
		</ul>
{{ end }}

Thu, 03 Apr 2025 14:56:55 -0400

So I made a new category for my blog and noticed this new error message coming up under the Micro.blog -> Account Logs area

Error: Error building site: failed to render pages: open _site/categories/micro.blog-tips-and-tricks/page/1/index.html: not a directory

The name of the category was Micro.blog-tips-and-tricks and after it was generated the path was /categories/micro.blog-tips-and-tricks. This caused that strange error. Renaming the path to /categories/micro-blog-tips-and-tricks fixed the issue.

Micro.blog Private Notes + 7.css Fun

Tue, 11 Feb 2025 19:48:00 -0400

Back in October I posted a bit about using YAML front-matter with Micro.blog private notes to extend it’s functionally. I ended up releasing that to Lillihub users earlier this year.

I’ve moved over to using analog index cards for most of my daily note taking but I still have several collections of notes I’m growing. And I needed a place for them. Why not use Micro.blog? Is what I asked myself. Now that Manton has built out a versioning system that saves note changes for 60 days I feel more confident using the service with a larger volume of notes. But what I’ve built out so far in Lillihub (tagging and having titles) is not quite enough.

A Fetch Quest - Getting my notes

Just like my last coding adventure, first I needed to authenticate. I’m not going to write that up again. But do not fear fellow adventurer. I have a map with the secrets of Micro.blog’s indieauth spelled out.

So now that I have the magical token, I need only ask the API nicely for what I need.

Firstly, my notebooks

const fetching = await fetch(`https://micro.blog/notes/notebooks`, { method: "GET", headers: { "Authorization": "Bearer " + token } } );
const results = await fetching.json();

And then upon choosing a notebook and divining its id, I can get all my lovely notes…

const fetching = await fetch(`https://micro.blog/notes/notebooks/${id}`, { method: "GET", headers: { "Authorization": "Bearer " + token } } );
const eNotes = await fetching.json();

But wait! I cannot read my lovely notes! They are garbled and undecipherable to my eye.

A Wizards Secret - Decrypt and encrypt my notes 🧙‍♀️

Luckily some documentation lights the way.

The end. 🤣

Okay, kidding! I’ll share (some of) my secrets.

Behold!

The first of three spells - creating a key 🔑

The first spell component needed is the private note key from Micro.blog. This I saved in localStorage so I could access when needed.

const imported_key = localStorage.getItem("notes_key") ? await crypto.subtle.importKey(
    'raw',
    hexStringToArrayBuffer(localStorage.getItem("notes_key").substr(4)),
    { name: 'AES-GCM', length: 256 },
    true,
    ['encrypt', 'decrypt']
) : '';
function hexStringToArrayBuffer(hexString) {
const length = hexString.length / 2;
const array_buffer = new ArrayBuffer(length);
const uint8_array = new Uint8Array(array_buffer);
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> byte <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>hexString<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span>i <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    uint8_array<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> byte<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">return</span> array_buffer<span class="token punctuation">;</span>

}

The second of three spells - decrypting 🧩

async function decryptWithKey(encryptedText, imported_key) {
    const encrypted_data = new Uint8Array(atob(encryptedText).split('').map(char => char.charCodeAt(0)));
    const iv = encrypted_data.slice(0, 12);
    const ciphertext = encrypted_data.slice(12);
<span class="token keyword">const</span> decrypted_buffer <span class="token operator">=</span> <span class="token keyword">await</span> crypto<span class="token punctuation">.</span>subtle<span class="token punctuation">.</span><span class="token function">decrypt</span><span class="token punctuation">(</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AES-GCM'</span><span class="token punctuation">,</span> iv <span class="token punctuation">}</span><span class="token punctuation">,</span>
    imported_key<span class="token punctuation">,</span>
    ciphertext
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> decoder <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TextDecoder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> decrypted_text <span class="token operator">=</span> decoder<span class="token punctuation">.</span><span class="token function">decode</span><span class="token punctuation">(</span>decrypted_buffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> decrypted_text<span class="token punctuation">;</span>

}

The third of three spells - encrypting 🪄

async function encryptWithKey(text,  imported_key) {
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const encoder = new TextEncoder();
    const plaintext_buffer = encoder.encode(text);
<span class="token keyword">const</span> ciphertext_buffer <span class="token operator">=</span> <span class="token keyword">await</span> crypto<span class="token punctuation">.</span>subtle<span class="token punctuation">.</span><span class="token function">encrypt</span><span class="token punctuation">(</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AES-GCM'</span><span class="token punctuation">,</span> iv <span class="token punctuation">}</span><span class="token punctuation">,</span>
    imported_key<span class="token punctuation">,</span>
    plaintext_buffer
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> encrypted_data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>iv<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>ciphertext_buffer<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> base64_encoded <span class="token operator">=</span> <span class="token function">btoa</span><span class="token punctuation">(</span>String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token operator">...</span>encrypted_data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> base64_encoded<span class="token punctuation">;</span>

}

With these spells in our arsenal we can decrypt any of our notes and then save them again by re-encrypting them.

const markdown = await decryptWithKey(note, imported_key);
const eNote = await encryptWithKey(markdown, imported_key);

With that out of the way, let’s see what we can can do 🫠

I Can Never Make Up My Mind 🫥

I’ll admit it. I change up how I save my data regularly. No structure is safe for more than a couple of months. Maybe I’m strange. I find it soooooo soooothing to rename and reorganize digital files.

Not being able to move notes around in notebooks started to drive me insane.

Nor did the documentation hand me a simple endpoint to get it done either. Oh well. I’m sure I’ll think of something.

What about…. copy and delete? As in copy the note into a new notebook and then delete the original.

So with a little HTML, CSS, and JS I have lovely modal I can use to select a notebook and thus send my note along to it’s new home… Oh yeah, I better put up a warning for other users.

The code isn’t that complicated and there is no need to decrypt anything.

let fetching = await fetch(`https://micro.blog/notes/${id}`, { method: "GET", headers: { "Authorization": "Bearer " + accessTokenValue } } );
const eNote = await fetching.json();
const formBody = new URLSearchParams();
formBody.append(“notebook_id”, notebook);
formBody.append(“text”, eNote.content_text);
let posting = await fetch(‘https://micro.blog/notes', {
method: “POST”,
body: formBody.toString(),
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=utf-8”,
“Authorization”: “Bearer “ + accessTokenValue
}
});
if(posting.ok) {
posting = await fetch(</span><span class="token string">https://micro.blog/notes/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">, {
method: “DELETE”,
headers: {
“Authorization”: “Bearer “ + accessTokenValue
}
});
}

Sweet.

I also added in the ability to rename a notebook and delete a notebook. I won’t go into details since those are just endpoint you call and they are in the documentation.

Danger! ☠️ Loura lost 10 HP!

So while writing the first draft of this blog post, I stepped away from my desk and didn’t lock my computer. The cat took advantage of this and decided to step all over my keyboard. I lost the first draft 😢

Okay, that sucked. Maybe I should do something about that…

I know! auto save!

This was pretty easy. The editor I’m using is EasyMDE and it includes it out of the box. Sweet! Just pass it the right configuration autosave:{enabled:true} and….

Uh oh…..

Did you spot it?

Maybe I should let people know I’m saving a copy of the decrypted note in localStorage.

And thus a toggle was born.

Side Quest - Storing other one-off project data.

One other fun thing I started doing, was using using private notes to hold other small amounts of data for my growing collection of personal PWA’s. Remeber this project with the iframes? I did end up finishing that (though not the blog posts), turned it into a PWA and hooked it up to a private note. I just serialize the data and store it.

It’s my personal todo list calendar hybrid on my phone.

A Dragon’s Hoard Must Be Shiny! 🪙

Okay, okay. I made a micro post on January 15th when I discovered 7.css.

And I uh….

had a bit too much fun.

🤣😅🤣😅🤣

What I love about it? opening up all my notes in different windows! I can even drag the windows around and resize them.

Yep… 😅

The End

♥️ Loura

Micro.blog hosted blog - List only titled posts on homepage

Mon, 18 Nov 2024 18:07:00 -0400

Here are the steps I used to make my Micro.blog hosted blog list only the titled posts on my homepage and still paginate correctly. Note: This does require editing your blog theme.

1.) The file you need to edit is: layouts/index.html

2.) The line you are replacing should look something like this: {{- $paginator := .Paginate (where .Site.Pages.ByDate.Reverse “Type” “post”) (index .Site.Params “archive-paginate” | default 20) }} (assuming you and/or your theme haven’t already customized this)

3.) You are going to need to replace it with the following:

{{ $pages := where .Site.Pages.ByDate.Reverse "Type" "post" }}
{{ $pages = where $pages "Params.title" "ne" nil }}
{{- $paginator := .Paginate $pages (index .Site.Params "archive-paginate" | default 20) }}

Then save your changes.

Micro.blog Bookmarks & Highlights

Wed, 14 Aug 2024 12:15:00 -0400

Life has been way too much lately and most of my hobbies were put on pause while I dealt with keeping up with the unexpected. One of those that was dropped was writing down weekly notes that focused on my development side projects (and honestly, even coding side-projects took a nose-dive). My last post was on March 1st 😱

So I’m doing a little reframing to make it feel a bit easier to write, thus the “Coding Adventure”. I want to keep these posts more along the line of “Hey, here’s something fun I played around with and it might still be mostly broken 🤪”

Background

I use Micro.blog, I know…. you’re shocked 😝 and one of the things I love, is how open they are with their API. It’s a fun playground of potential side-projects just waiting to be explored. One piece that I’ve dabbled with is the bookmarks feature. Basically you can save URLs as bookmarks and if you are a premium member, organize them with tags and add highlights. Manton, the creator of Micro.blog, rolled out a feature to bookmarks including having AI summarize the link (only if you’ve enabled AI on your account and, important to me, if the robots.txt of the bookmarked link allows it).

But it’s not a feature I use all that much and I wanted to see if I could change that with a few of my own touches.

Getting Started

Like most of my recent side-projects, I’ve been using Deno. Its quick to get started with a Github repo and they have hard free tier limits so I feel safe playing around.

The first thing I needed was a valid authorization token from micro.blog. I got this using indieauth and saving the resulting token in a http-only cookie. That way I’ll have the token with each page request. To make things easier in this proof of concept, I hard-coded values inside the server generated HTML form I was using. For instance the form action, the scope and response type. On the server I generated a random string for the state (the ${} notation is a JavaScript template literal) and I also included the state as a session cookie when the page is rendered.

<form action="https://micro.blog/indieauth/auth" method="get">
    <input type="url" placeholder="https://username.micro.blog" name="me">
    <input type="hidden" name="client_id" value="https://my-demo.com"/>
    <input type="hidden" name="redirect_uri" value="https://my-demo.com/auth"/>
    <input type="hidden" name="state" value="${uuid}"/>
    <input type="hidden" name="scope" value="create"/>
    <input type="hidden" name="response_type" value="code"/>
    <button type="submit">Sign Inbutton>
form>

Submitting this form creates a get request to Mico.blog’s indieauth endpoint which redirects me to approve the login. Once I approve it, it sends a request back to my /auth endpoint with a code and state in the query string of a URL. I check that the state matches the state inside the cookie and then I make a POST request to Micro.blog’s token endpoint, https://micro.blog/indieauth/token, using the code. If everything was wired up correctly I get back my lovey authorization token. Here is a code snippet of the token portion:

const formBody = new URLSearchParams();
formBody.append("code", code);
formBody.append("client_id", 'https://my-demo.com');
formBody.append("grant_type", "authorization_code");
// request access_token
const fetching = await fetch(‘https://micro.blog/indieauth/token', {
method: “POST”,
body: formBody.toString(),
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=utf-8”,
“Accept”: “application/json”
}
}); 

const response = await fetching.json();

A Fetch Quest: Getting My Bookmarks

Okay, let’s get some bookmarks. Micro.blog has documentation on its bookmarks endpoints in its help center, so that’s the first place to go diving. This was all familiar to me since I put bookmarks in my side project Lillihub a while back.

let fetching = await fetch(`https://micro.blog/posts/bookmarks`, { 
    method: "GET", 
    headers: { "Authorization": "Bearer " + access_token } 
});
let results = await fetching.json();

This returns twenty-five of my most recent bookmarks. Nice. There was some trial and error but I figured out that you can use query parameter before_id to enable getting more bookmarks. For example, if the last bookmark id was 123123 then I could call https://micro.blog/posts/bookmarks?before_id=123123 and get the twenty-five after that last bookmark.

If you have tags you can get the by adding the tag with the name of the tag, like this: https://micro.blog/posts/bookmarks?tag=code and you will get the first 25 bookmarks with that tag.

Lost in the Woods: Bookmarks and What I Couldn’t Figure Out

What I couldn’t figure out is how to go backwards. The Micro.blog post API supports a since_id parameter and a count parameter allowing for a full paging experience. Those don’t seem to work on bookmarks endpoint. I tried grabbing the bookmarks via the micropub endpoint but I had no luck there, just getting the posts on my blog.

Nor could I figure out how to search for a bookmark. I figured this would be handy with the AI summarization or even to search part of the bookmark title. There is limited support for searching on the Micro.blog website but it mixes results together from the other related sections of links and highlights.

So two paths then. Load all the bookmarks on the HTML page and then use JavaScript to search OR load all the bookmarks on the server, search it, and then return the results.

Since I don’t have thousands of bookmarks… yet. I’m going with the quick and easy client side solution.

Search For Treasure: Enabling Search

The while loop was my weapon of choice for this part of the adventure. I iterated calling the bookmarks API and gathered the results. And I kept doing that until the request returned less than 25 results… signaling the end.

Then I put those bookmarks in a table with some styling and….

Nice.

The search box runs a little bit of JavaScript that hides table rows if they don’t contain the search term. Clicking on a tag, whether at the top or on a bookmark fills the textbox and retriggers the search.

One strange thing with the Micro.blog bookmark API is that it doesn’t have separate properties for things like title or reader link. It jumbles them all together in the content_html field.

{
    ...,
    "content_html": "Homemade Oreos sallysbakingaddiction.com
Reader: sallysbakingaddiction.com ",
    ...
},

So I’m displaying the bookmark title as what’s in the first paragraph tag and removing everything else.

Side Quest: Adding Bookmarks

This was actually something I figured out a while back, but I figured I’d actually list the code sample here for a more complete picture.

First you need to create the bookmark using micropub:

const formBody = new URLSearchParams();
formBody.append("h", "entry");
formBody.append("bookmark-of", url);
const posting = await fetch(</span><span class="token string">https://micro.blog/micropub</span><span class="token template-punctuation string">, {
method: “POST”,
body: formBody.toString(),
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=utf-8”,
“Authorization”: “Bearer “ + accessTokenValue
}
});

and then you need to add the tags using the Micro.blog bookmarks API.

Get the bookmarks
The new one should be first one returned, grab it’s id
Add the tags (comma-separated list)

const formBodyTags = new URLSearchParams();
formBodyTags.append("tags", tags);
const postingTags = await fetch(</span><span class="token string">https://micro.blog/posts/bookmarks/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>bookmark<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">, {
method: “POST”,
body: formBodyTags.toString(),
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=utf-8”,
“Authorization”: “Bearer “ + accessTokenValue
}
});
const responseTags = await postingTags.text();

Exploring the Dungeon: Highlights

Let’s circle back to that reader link in the content_html property. Micro.blog premium users can make highlights on bookmarks, assuming the website’s robot.txt doesn’t prohibit it being crawled and the content isn’t dynamic. A copy of the content is provided along with an interface to make highlights. This video at the 2:52 mark by [@manton](https://micro.blog/manton) shows the functionality I’m talking about.

First thing I wanted to change, I want the number of highlights displayed in-line with my bookmarks. So I fire off the request to get my highlights and the first problem becomes apparent. There is no id link between a bookmark and a highlight, or at least one that I could spot.

So…. what matches? The url of the bookmark and the url of the highlight. So I can match them up with that. Downside? I’ll need to get all the highlights and loop through to find matches on the bookmarks. That’ll work for my small collection, but probably not for someone with a lot of bookmarks/highlights.

With that I was able to add a little marker to tell me when I have highlights. 🥳… one monster down 🧟‍♀️⚔️

Now I’m getting to the tricky part.

One thing I don’t like with the highlights… is that you can’t highlight the underlying HTML. Which means that if you highlight some text with an anchor tag, you get the text of the anchor, but not the anchor link itself. Which means the handy web reader you can get from Micro.blog won’t work out of the book. First, here is a look at a different part of the JSON returned for a bookmark:

   {
      ...
      "_microblog": {
        "links": [
          {
            "id": 6888713,
            ....,
          }
        ],
      }
    }

You can’t use the id of the bookmark to get the Micro.blog reader. The endpoint is https://micro.blog/hybrid/bookmarks/123 , with the 123 being the id of the first object under the _microblog.links property in a bookmark response. This returns a text response that is an HTML page. Sweet.

Now I can start dissecting it!

In Which I Spend Way Too Much Time Staring At Source Code

This was the tedious part of the adventure. I needed to parse out what was being returned, rip it apart and then rebuild it. I’m on a personal mission to not use any JavaScript libraries, so….

Step one: Bye bye JQuery 👻⚔️

Luckily the contents of the web reader page has a div around it with an id

. This means I can get the content of the bookmark. A point in my favor, the inline JQuery script is outside that div. But by removing JQuery the two helpful script tags included by Micro.blog aren’t going to work anymore.
Step two: Fix the broken images 🧪🔨
So if the bookmark had images in it… they are all broken. Why? because where my app is running is not where the images are. Thankfully I have a base url to work with. It was included in the head of the HTML returned by Micro.blog. I grabbed the 
extracted the value and then prepended it to all the image src’s.
Step Three: Mark up the existing highlights 🖊️🧝🏻‍♀️
Another downside, using just the reader page I don’t have the highlighted text… or title. Micro.blog seems, I’m not sure on this since I can’t see their code, to generate the highlight inside a script, marking the start and end range of the highlight… like this restoreHighlight(0, 1132, 1225); with restoreHighlight being a custom function included on the page.
For now I’m to loop through my highlights and find the ones I need. But this a place where I may need to rethink my approach. Now that have the text of the highlight, I loop through each one and add a  tag around the matching text of the content. This very neatly adds a highlight, no additional CSS needed.
Step Four: Write new JavaScript to capture highlighted text 🐲🔥
Note: I’ve only tested this on browsers I use…
Okay, let’s get technical. I need to listen for a text selection event and then get what was selected. Plus I really only need to care if something was actually selected.
document.addEventListener("selectionchange", function(event) {
    const selection = window.getSelection();     
    if (selection.rangeCount === 0) {
        return;
    }
    getSelectionHtml();
});

the getSelectionHtml() function I wrote does all the nitty gritty calculating and saves the information in a hidden form on the page. This form appears in a dialog modal after a one second delay. If the submit button is hit, it posts the form and I save the highlight. This Micro.blog endpoint wasn’t actually included in the documentation… but it works:
const form = new URLSearchParams();
form.append("text", text);
form.append("start", start);
form.append("end", end);
const posting = await fetch(</span><span class="token string">https://micro.blog/bookmarks/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/highlights</span><span class="token template-punctuation string">, {
method: “POST”,
body: form.toString(),
headers: {
“Content-Type”: “application/x-www-form-urlencoded; charset=utf-8”,
“Authorization”: “Bearer “ + mbToken
}
});

Note, the id is the id of the reader, not the bookmark.
Okay, so the getSelectionHtml() is a bit of a beast. I haven’t really played around with widow.getSelection() before and I wanted to remove the JQuery dependency with the original code. Luckily it didn’t need too much tweaking to make it work.
First we want to make sure our selection isn’t undefined. Then we want to create a container (in this case a div) to hold our HTML selection. I then iterate through and clone the nodes into that container. Then I can get the innerHTML of the container and that holds the user selected HTML. For brevity I took out the calculateOffset portion and left comments where that code would go.
function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
            if (!sel.isCollapsed) {
                //save the HTML to the form
                //calculate the offsets and save values to form
                //trigger the 1 second delay
            }
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
            //save the HTML to the form
            //calculate the offsets and save values to form
            //trigger the 1 second delay
        }
    }
}

To calculate the offset you need to gather up all the child nodes. Luckily this code was already included in the page. I just needed to remove the JQuery portion and port it over to vanillaJS.
function gatherNodes(startElement, results) {
    results.push(startElement);
    startElement.childNodes.forEach(function (e) {
        gatherNodes(e, results);
    });
}
function calculateContentOffset(findNode, offset) {
var e = document.getElementById(“content”);
var results = Array();
gatherNodes(e, results);
var current_pos = 0;
for (var i = 0; i «/span> results.length; i++) {
var node = results[i];
if (node.isSameNode(findNode)) {
return current_pos + offset;
}
if (node.length != undefined) {
current_pos = current_pos + node.length;
}
}
}

Whew….
It works!

And if I double check it on Micro.blog, I can see the link is saved. Yep!

Or maybe not…. 😱

As you can see, there is a mismatch between what’s in my UI and on the Micro.blog website. I wonder if the offset I’m calculating is different somehow… 🤔
There Are Monsters Yet To Slay🦇

Highlights saved with my app that have HTML in them… aren’t visible or in the wrong position in the Micro.blog reader on the Micro.blog website. They do show up correctly in the highlight list and when hitting the “New Post” button. Which was one of the reasons I started this adventure.
Highlights saved with the Micro.blog website that cover HTML elements (like anchors) don’t show in my reader.

So this isn’t ready for prime-time.
Conclusion
I now have my own little web reader for my bookmarks and I can mark up highlights. It has its drawbacks, but I’m going to use it for a bit and see how it holds up.
I think that’s all the adventuring I’m up for this week. I’m going home and having a nice cup of peppermint tea.