21 May 2022 🐜

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>

And…

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

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

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

            {{^tagged.🐜}}

                <p>
                    <a class="entryblocktitle" href="{{url}}">{{title}}</a>
                </p>
  
            {{/tagged.🐜}}
  
            {{#tagged.🐜}}

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

    {{/entries]]