Support my work ♥

Switching from CSS to HTML generated "," and Telegram instantview implementation

Implementing the instantview feature has been on my list for a while now. Today I implemented it for this website.

Having a static website built by a generator makes this relatively easy.

Changes to this website

With the new year 2020 I started tagging my content. The default implementation did not yield commas between the tags.

So in the first instance I implemented them with CSS:

footer.post-info .tags a::after {
    content: ", ";
}
footer.post-info .tags a:last-child::after {
    content: "";
}

That meant I had to fix them in the instantview too:

@map($body/div[@class="tags"]/a) {
  $a: $@
  @if_not( $last ) {
    @append_to($a): ", "
  }
}

Now the "hot fixing" has gone too far.

Fixing the jinja2 template

{% if article.tags %}
<div class="tags">
    Tags:
    {% for tag in article.tags | sort %}
        <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
        {%- if not loop.last -%}, {%- endif -%}
    {% endfor %}
</div>
{% endif %}

The important difference are the - inside the if statements. The dashes turn result in an inline block instead of and indented + newline separated block.

Instantview

The instantview rules are now on the telegram service. So the feature could get activated for my domain now any time.

However, since the contest in 2019 was over the communication pretty much stopped. It is not clear what their process is or if the even add new domains at this point.

The rules

~version: "2.1"

### STEP 1: Define which pages get Instant View and which don't

# Articles
?exists: /html/head/meta[@property="article:published_time"]

### STEP 2: Define the essential elements

# The 'body' and 'title' *properties* are required for an Instant View page to work. 
# 'Subtitle' is optional for IV pages, but Medium posts can have subtitles, so it is essential that we reflect this in our template.
body:     //div[@class="entry-content"]
#@debug
title:    //h2.entry-title/a

#author: //address[@class="vcard author"]/a


### STEP 3: Further refinements
# extract tags for newer articles
@prepend_to($body): //footer[@class="post-info"]/div[@class="tags"]

# remove all svg images, sadly
@replace_tag(<pre>): //img[contains(@src, ".svg")]
# extract images from <p>
@split_parent: //p/img

## STEP 4: Cleanup
@remove: //section.extras
@remove: //footer
@remove: //canvas
@remove: //script

### Index pages
?not_exists: /html/head/meta[@property="article:published_time"]
body:     //section[@id="content"]
#@debug
title:    //h2.entry-title/a

# remove all svg images, sadly
@replace_tag(<pre>): //img[contains(@src, ".svg")]
@replace_tag(<pre>): //section[@id="content"]/footer
#@debug
@replace_tag(<div>): //footer[@class="post-info"]
#@debug

# make post visible
@replace_tag(<section>): $body//ol[@id="post-list"]/li
@replace_tag(<div>): //ol[@id="post-list"]
# extract images from <a> and <p> (order matters)
@split_parent: //a/img
@split_parent: //p/img


@remove: //section[@id="content"]/h2
@remove: //section.extras
@remove: //hr
#@remove: //footer
@remove: //canvas
@remove: //script

links

social