21 May 2022 micro

Took some time late last night to try to figure out how to port some of the code on my blot blog to a micro.blog hosted site to see if I could get that to work… Don’t really know much more than copying the JavaScript (I didn’t write…) from blot and pasting into a custom theme on micro.blog… Safe to say I could not get it to work.

A few things that are basically requirements for me at this point, which will make it hard to move away:

  1. Each date is only listed once as a header for the day and all posts written that day fall under it
  2. Posts within a day are listed chronologically (newest on top,)
  3. Non-micro posts only list the title on the homepage, while microposts are fully visible on the homepage
  4. Lastly, since the date is no longer a permalink, the title of posts should be the link to the full post and a symbol can be used for the permalink at the end of microposts (I use ✖︎ today)

I have JavaScript for 1 & 2, but don’t know how to actually implement in micro.blog. 3 & 4 are handled pretty easily for me in blot by tags. All of this lives in the entries.html file.

JavaScript snippets:

    <script type="text/javascript">
            container = document.querySelector('.container.index');
            dates = document.querySelectorAll('.{{#formatDate}}[date_]YYYY_MM_DD{{/formatDate}}');
            if (dates.length > 1) {
            container.insertBefore(dates[dates.length - 1], dates[0]);
                                }         console.log(dates);


    <script type="text/javascript">
                let allDates = [];
            document.querySelectorAll(".light").forEach(function(node) {
            if (allDates.indexOf(node.innerHTML) > -1) {
                node.style.display = "none";
            } else {

Lastly, 3&4 were relatively easy by determining how posts show up on the entries.html based on tag using Blot’s settings:

            <span class="wrap {{#formatDate}}[date_]YYYY_MM_DD{{/formatDate}}">
            <p><span class="light">{{date}}</span></p>


                    <a class="entryblocktitle" href="{{url}}">{{title}}</a>

                 <a class="float" href="{{url}}">✖︎</a>
                 <span class="micro">{{{html}}}</span>


✉️  Reply by email