Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
l0b0 opened this issue Sep 14, 2023 · 3 comments

Comments

@l0b0
Copy link
Contributor

l0b0 commented Sep 14, 2023

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
Copy link
Collaborator

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
Copy link
Contributor Author

l0b0 commented Oct 2, 2023

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

image

fancypantalons added a commit that referenced this issue Oct 2, 2023
This commit is intended to address issues #175, #176, and #177.  It is a
fairly involved reworking of these templates that standardizes the
layout and, I hope, does a better job of rendering h-card information
for posts and so forth.

These changes introduce some structural changes to the HTML, including
consistently embedding webmention content in article tags, and
repositioning some of the relevant classes.

Any users of the default templates will want to inspect these changes
and make corresponding changes to their CSS.

Now, I have to admit, the sheer amount of code duplication across these
templates fills me with sadness, but because of the need to support both
client- and server-side template rendering, these things kinda need to
stand on their own.  I did explore the use of custom filters to render
blocks like the h-card using their own templates, but figuring out how
to make a custom filter on the JS side, not to mention testing it, was
beyond my ken.
@fancypantalons
Copy link
Collaborator

fancypantalons commented Oct 2, 2023

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).

@l0b0 l0b0 closed this as completed Oct 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants