No permalink URL in `{% webmentions page.url %}` template despite `url` property in webmentions

[l0b0]

I don't quite understand how this is possible. The template code is

{% if webmention.url %}
  <a class="webmention__source u-url" href="{{ webmention.url }}" rel="nofollow">Permalink</a>
{% endif %}

The response from `https://webmention.io/api/mentions.jf2?target=https://paperless.blog/nix-shell-template' is

{
  "type": "feed",
  "name": "Webmentions",
  "children": [
    {
      "type": "entry",
      "author": {
        "type": "card",
        "name": "",
        "photo": "",
        "url": ""
      },
      "url": "https://zerobytes.monster/post/561745",
      "published": null,
      "wm-received": "2023-08-06T12:52:20Z",
      "wm-id": 1702269,
      "wm-source": "https://zerobytes.monster/post/561745",
      "wm-target": "https://paperless.blog/nix-shell-template",
      "wm-protocol": "webmention",
      "mention-of": "https://paperless.blog/nix-shell-template",
      "wm-property": "mention-of",
      "wm-private": false,
      "rels": {
        "canonical": "https://zerobytes.monster/post/561745"
      }
    },
    {
      "type": "entry",
      "author": {
        "type": "card",
        "name": "l0b0",
        "photo": "",
        "url": "https://lobste.rs/u/l0b0"
      },
      "url": "https://lobste.rs/s/xc37sv",
      "published": null,
      "wm-received": "2023-07-07T09:15:14Z",
      "wm-id": 1693455,
      "wm-source": "https://lobste.rs/s/xc37sv",
      "wm-target": "https://paperless.blog/nix-shell-template",
      "wm-protocol": "webmention",
      "repost-of": "https://paperless.blog/nix-shell-template",
      "wm-property": "repost-of",
      "wm-private": false
    }
  ]
}

This should result in a page with a "Permalink" URL for both entries, but instead the resulting HTML is

<ol class="webmentions__list">
  <li id="webmention-1693455" class="webmentions__item">
    <article class="h-cite webmention webmention--repost
          webmention--no-photo
          ">
      <div class="webmention__author p-author h-card">
        <a class="u-url" href="https://lobste.rs/u/l0b0" rel="nofollow">
          <b class="p-name">l0b0</b>
        </a>
      </div>
      <div class="webmention__content p-content">
      </div>
      <div class="webmention__meta">
        <time class="webmention__pubdate dt-published" datetime="2023-07-07T09:15:14+00:00">07 July 2023</time>
      </div>
    </article>
  </li>
  <li id="webmention-1702269" class="webmentions__item">
    <article class="h-cite webmention webmention--link
          webmention--no-author
          webmention--no-photo
          ">
      <div class="webmention__content p-content">
      </div>
      <div class="webmention__meta">
        <time class="webmention__pubdate dt-published" datetime="2023-08-06T12:52:20+00:00">06 August 2023</time>
      </div>
    </article>
  </li>
</ol>

Why do neither of the webmention__meta divs have permalinks?

[fancypantalons]

I noticed that myself, it's because the attribute isn't url, it's uri (if you look at the cached webmention_io_received.yml you can see that for yourself, that's where all those elements are pulled). The template is just broken!

[l0b0]

OK, I might just disable webmentions for now - it takes ages to collect them, and the output is less than ideal:

[fancypantalons]

So naturally the native rendering without styling is going to look a bit silly, as the output HTML is designed to be styled. If you check out this page on my site:

https://b-ark.ca/2023/09/25/yanagi-socks.html

You can see how I've formatted things.

First, I used the type-specific webmention tags to group things up rather than spitting out a flat list of every webmention in chronological order (I'll be honest, I don't actually think the webmentions tag is particularly useful as I doubt anyone really wants that).

So instead of just {{ webmentions page.url }} I'm using {{ webmention_likes page.url }} and doing the same for each of the webmention types I care to render (right now I'm showing likes and posts), so that each type is grouped together into their own lists.

Then I've used CSS to format those lists into facepiles and so forth.

I've also customized the templates a bit including, yes, fixing the issue you've identified here (though I've pushed a changeset to, among other things, incorporate the fix into the stock templates).