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

Add Microformats #3052

Merged
merged 8 commits into from
Jul 23, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/author-profile-custom-links.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!--
<li>
<a href="http://link-to-whatever-social-network.com/user/" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="http://link-to-whatever-social-network.com/user/" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fas fa-fw" aria-hidden="true"></i> Custom Social Profile Link
</a>
</li>
Expand Down
72 changes: 38 additions & 34 deletions _includes/author-profile.html
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
{% assign author = page.author | default: page.authors[0] | default: site.author %}
{% assign author = site.data.authors[author] | default: author %}

<div itemscope itemtype="https://schema.org/Person">
<div itemscope itemtype="https://schema.org/Person" class="h-card">

<a class="u-url hidden" rel="me" href="{{ '/' | relative_url }}">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove this hidden markup since u-url is being applied to the author.home link.
If u-url is required and the thought was to add the hidden markup because there is no guarantee someone adds author.home to their config.

Perhaps we can do a similar thing to the post title. In this case make the author name a link... use author.home first fallback to the site's root URL if the home link hasn't been configured.

<h3 class="author__name" itemprop="name" class="p-name">{{ author.name }}</h3>
  <a class="u-url" rel="me" href="{{ author.home | default: '/' | relative_url }}">{{ author.name }}</a>
</h3>

Hidden microformat entry for representative h-card
</a>

{% if author.avatar %}
<div class="author__avatar">
{% if author.home %}
<a href="{{ author.home | relative_url }}">
<img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image">
<img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image" class="u-photo">
</a>
{% else %}
<img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image">
<img src="{{ author.avatar | relative_url }}" alt="{{ author.name }}" itemprop="image" class="u-photo">
{% endif %}
</div>
{% endif %}

<div class="author__content">
{% if author.home %}
<a href="{{ author.home | relative_url }}"><h3 class="author__name" itemprop="name">{{ author.name }}</h3></a>
<a href="{{ author.home | relative_url }}" class="u-url"><h3 class="author__name" itemprop="name" class="p-name">{{ author.name }}</h3></a>
{% else %}
<h3 class="author__name" itemprop="name">{{ author.name }}</h3>
<h3 class="author__name" itemprop="name" class="p-name">{{ author.name }}</h3>
{% endif %}
{% if author.bio %}
<div class="author__bio" itemprop="description">
<div class="author__bio p-note" itemprop="description">
{{ author.bio | markdownify }}
</div>
{% endif %}
Expand All @@ -33,29 +37,29 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>
<ul class="author__urls social-icons">
{% if author.location %}
<li itemprop="homeLocation" itemscope itemtype="https://schema.org/Place">
<i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i> <span itemprop="name">{{ author.location }}</span>
<i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i> <span itemprop="name" class="p-locality">{{ author.location }}</span>
</li>
{% endif %}

{% if author.links %}
{% for link in author.links %}
{% if link.label and link.url %}
<li><a href="{{ link.url }}" rel="nofollow noopener noreferrer"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i><span class="label">{{ link.label }}</span></a></li>
<li><a href="{{ link.url }}" rel="nofollow noopener noreferrer me"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i><span class="label">{{ link.label }}</span></a></li>
{% endif %}
{% endfor %}
{% endif %}

{% if author.uri %}
<li>
<a href="{{ author.uri }}" itemprop="url">
<a href="{{ author.uri }}" itemprop="url" rel="me">
<i class="fas fa-fw fa-link" aria-hidden="true"></i><span class="label">{{ site.data.ui-text[site.locale].website_label | default: "Website" }}</span>
</a>
</li>
{% endif %}

{% if author.email %}
<li>
<a href="mailto:{{ author.email }}">
<a href="mailto:{{ author.email }}" rel="me" class="u-email">
<meta itemprop="email" content="{{ author.email }}" />
<i class="fas fa-fw fa-envelope-square" aria-hidden="true"></i><span class="label">{{ site.data.ui-text[site.locale].email_label | default: "Email" }}</span>
</a>
Expand All @@ -64,127 +68,127 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>

{% if author.keybase %}
<li>
<a href="https://keybase.io/{{ author.keybase }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://keybase.io/{{ author.keybase }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fas fa-fw fa-key" aria-hidden="true"></i><span class="label">Keybase</span>
</a>
</li>
{% endif %}

{% if author.twitter %}
<li>
<a href="https://twitter.com/{{ author.twitter }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://twitter.com/{{ author.twitter }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-twitter-square" aria-hidden="true"></i><span class="label">Twitter</span>
</a>
</li>
{% endif %}

{% if author.facebook %}
<li>
<a href="https://www.facebook.com/{{ author.facebook }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.facebook.com/{{ author.facebook }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-facebook-square" aria-hidden="true"></i><span class="label">Facebook</span>
</a>
</li>
{% endif %}

{% if author.linkedin %}
<li>
<a href="https://www.linkedin.com/in/{{ author.linkedin }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.linkedin.com/in/{{ author.linkedin }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-linkedin" aria-hidden="true"></i><span class="label">LinkedIn</span>
</a>
</li>
{% endif %}

{% if author.xing %}
<li>
<a href="https://www.xing.com/profile/{{ author.xing }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.xing.com/profile/{{ author.xing }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-xing-square" aria-hidden="true"></i><span class="label">XING</span>
</a>
</li>
{% endif %}

{% if author.instagram %}
<li>
<a href="https://instagram.com/{{ author.instagram }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://instagram.com/{{ author.instagram }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-instagram" aria-hidden="true"></i><span class="label">Instagram</span>
</a>
</li>
{% endif %}

{% if author.tumblr %}
<li>
<a href="https://{{ author.tumblr }}.tumblr.com" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://{{ author.tumblr }}.tumblr.com" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-tumblr-square" aria-hidden="true"></i><span class="label">Tumblr</span>
</a>
</li>
{% endif %}

{% if author.bitbucket %}
<li>
<a href="https://bitbucket.org/{{ author.bitbucket }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://bitbucket.org/{{ author.bitbucket }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-bitbucket" aria-hidden="true"></i><span class="label">Bitbucket</span>
</a>
</li>
{% endif %}

{% if author.github %}
<li>
<a href="https://github.com/{{ author.github }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://github.com/{{ author.github }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-github" aria-hidden="true"></i><span class="label">GitHub</span>
</a>
</li>
{% endif %}

{% if author.gitlab %}
<li>
<a href="https://gitlab.com/{{ author.gitlab }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://gitlab.com/{{ author.gitlab }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-gitlab" aria-hidden="true"></i><span class="label">GitLab</span>
</a>
</li>
{% endif %}

{% if author.stackoverflow %}
<li>
<a href="https://stackoverflow.com/users/{{ author.stackoverflow }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://stackoverflow.com/users/{{ author.stackoverflow }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-stack-overflow" aria-hidden="true"></i><span class="label">Stack Overflow</span>
</a>
</li>
{% endif %}

{% if author.lastfm %}
<li>
<a href="https://last.fm/user/{{ author.lastfm }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://last.fm/user/{{ author.lastfm }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-lastfm-square" aria-hidden="true"></i><span class="label">Last.fm</span>
</a>
</li>
{% endif %}

{% if author.dribbble %}
<li>
<a href="https://dribbble.com/{{ author.dribbble }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://dribbble.com/{{ author.dribbble }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-dribbble" aria-hidden="true"></i><span class="label">Dribbble</span>
</a>
</li>
{% endif %}

{% if author.pinterest %}
<li>
<a href="https://www.pinterest.com/{{ author.pinterest }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.pinterest.com/{{ author.pinterest }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-pinterest" aria-hidden="true"></i><span class="label">Pinterest</span>
</a>
</li>
{% endif %}

{% if author.foursquare %}
<li>
<a href="https://foursquare.com/{{ author.foursquare }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://foursquare.com/{{ author.foursquare }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-foursquare" aria-hidden="true"></i><span class="label">Foursquare</span>
</a>
</li>
{% endif %}

{% if author.steam %}
<li>
<a href="https://steamcommunity.com/id/{{ author.steam }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://steamcommunity.com/id/{{ author.steam }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-steam" aria-hidden="true"></i><span class="label">Steam</span>
</a>
</li>
Expand All @@ -193,13 +197,13 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>
{% if author.youtube %}
{% if author.youtube contains "://" %}
<li>
<a href="{{ author.youtube }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="{{ author.youtube }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-youtube" aria-hidden="true"></i><span class="label">YouTube</span>
</a>
</li>
{% elsif author.youtube %}
<li>
<a href="https://www.youtube.com/user/{{ author.youtube }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.youtube.com/user/{{ author.youtube }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-youtube" aria-hidden="true"></i><span class="label">YouTube</span>
</a>
</li>
Expand All @@ -208,39 +212,39 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>

{% if author.soundcloud %}
<li>
<a href="https://soundcloud.com/{{ author.soundcloud }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://soundcloud.com/{{ author.soundcloud }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-soundcloud" aria-hidden="true"></i><span class="label">SoundCloud</span>
</a>
</li>
{% endif %}

{% if author.weibo %}
<li>
<a href="https://www.weibo.com/{{ author.weibo }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.weibo.com/{{ author.weibo }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-weibo" aria-hidden="true"></i><span class="label">Weibo</span>
</a>
</li>
{% endif %}

{% if author.flickr %}
<li>
<a href="https://www.flickr.com/{{ author.flickr }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://www.flickr.com/{{ author.flickr }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-flickr" aria-hidden="true"></i><span class="label">Flickr</span>
</a>
</li>
{% endif %}

{% if author.codepen %}
<li>
<a href="https://codepen.io/{{ author.codepen }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://codepen.io/{{ author.codepen }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-codepen" aria-hidden="true"></i><span class="label">CodePen</span>
</a>
</li>
{% endif %}

{% if author.vine %}
<li>
<a href="https://vine.co/u/{{ author.vine }}" itemprop="sameAs" rel="nofollow noopener noreferrer">
<a href="https://vine.co/u/{{ author.vine }}" itemprop="sameAs" rel="nofollow noopener noreferrer me">
<i class="fab fa-fw fa-vine" aria-hidden="true"></i><span class="label">{{ site.data.ui-text[site.locale].email_label | default: "Email" }}</span>
</a>
</li>
Expand All @@ -249,4 +253,4 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>
{% include author-profile-custom-links.html %}
</ul>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion _includes/category-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<strong><i class="fas fa-fw fa-folder-open" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].categories_label | default: "Categories:" }} </strong>
<span itemprop="keywords">
{% for category_word in categories_sorted %}
<a href="{{ category_word | slugify | prepend: path_type | prepend: site.category_archive.path | relative_url }}" class="page__taxonomy-item" rel="tag">{{ category_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
<a href="{{ category_word | slugify | prepend: path_type | prepend: site.category_archive.path | relative_url }}" class="page__taxonomy-item p-category" rel="tag">{{ category_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
{% endfor %}
</span>
</p>
Expand Down
2 changes: 1 addition & 1 deletion _includes/tag-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<strong><i class="fas fa-fw fa-tags" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].tags_label | default: "Tags:" }} </strong>
<span itemprop="keywords">
{% for tag_word in tags_sorted %}
<a href="{{ tag_word | slugify | prepend: path_type | prepend: site.tag_archive.path | relative_url }}" class="page__taxonomy-item" rel="tag">{{ tag_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
<a href="{{ tag_word | slugify | prepend: path_type | prepend: site.tag_archive.path | relative_url }}" class="page__taxonomy-item p-category" rel="tag">{{ tag_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
{% endfor %}
</span>
</p>
Expand Down
17 changes: 13 additions & 4 deletions _layouts/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,30 @@
<div id="main" role="main">
{% include sidebar.html %}

<article class="page" itemscope itemtype="https://schema.org/CreativeWork">
<article class="page h-entry" itemscope itemtype="https://schema.org/CreativeWork">
{% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">{% endif %}
{% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date_to_xmlschema }}">{% endif %}

<ul class="hidden">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a better way of applying microformats for this data? This is the sort of extraneous markup I wanted to avoid, especially since it's duplicating the published/modified datetimes from above along with the authorship that is already being applied the author sidebar.

I get all sorts of "code smells" from it not being DRY and having to hide it all via CSS.

Copy link
Contributor Author

@dltj dltj Jul 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes—the repeated variables bother me, too. The driving cause for that is how microformats need the data to be the contents of the enclosing tag and Schema.org puts the data in attributes. Specifically:

microformats do not use link or meta elements within the content of the page and in some cases require particular elements to be used to encode information, such as using abbr to support the datetime-design-pattern as illustrated by the dtstart property in the example above. ("Mixing Syntaxes" heading at W3C's "Mixing HTML Data Formats" page)

I used existing tags where possible (the p-name class for the <h1> article title and the e-content class in the article <section> tag). The contents of the hidden <ul>, though, were the values from the Schema.org <meta> tags.

For a while, I was putting microformat markup in the _includes/page__meta.html, but separating the article microformat data across two template files felt like a worse compromise as compared to keeping all of the HTML data formats in close proximity in one template file.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With all of the "hidden" list element items, which are actually required? Can we move forward with the other data you marked up that isn't hidden from view?

I'm still iffy on the duplicating all the author markup as it's in the sidebar with microformat markup now.

Can the published/modified dates be marked up in _includes/page_date.html instead? Neither of those are hidden and you wouldn't have to duplicate the markup then.

<li>These list items are microformat entries and are hidden from view.</li>
<li class="u-url">{{site.url}}{{page.url}}</li>
{% if site.author.name %}<li><a class="p-author h-card" href="{{ site.url }}"><img class="photo" src="{{ author.avatar | absolute_url }}">{{ site.author.name | markdownify | strip_html | strip_newlines | escape_once }}</a></li>{% endif %}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Careful with your author variables. You start with site.author which will cause problems if someone has assigned an author to the post where it should override the "site" author.

You're also mixing in a {{ author }} variable to do the avatar. They probably should all be {{ author }}. Take a look at how the assign works in the author sidebar to see how I did it there.

A conditional is needed for author.avatar since we can't guarantee someone set an image and wouldn't want an empty <img>.

Either way I question if the author microformat markup is even needed here as you've added it to the sidebar already. Will it fail without it? Just trying to get a feel for how DRY this can be since I'm not really thrilled with all the duplicate markup.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, wow... an excellent point about the mixing of author variables. I will fix that with an update to the branch.

Regarding the author microdata markup in two places. The markup in the sidebar is describing an h-card. In the microformats world, it seems like the site homepage should contain this markup to describe the controlling entity of the site. The author markup in the "_single.html" file covers the stated author of the article on the page for an h-entry. (And that is where I'm definitely misusing {{ site.author }}.

I'm not familiar with the mechanics of multi-author Jekyll blogs, but from what I can gather the site variables are appropriate for the sidebar (the "h-card" microformat covering the entire site) while the author variables are appropriate for the article itself (the "h-entry" microformat).

{% if page.excerpt %}<li class="p-summary">{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}</li>{% endif %}
{% if page.date %}<li class="dt-published">{{ page.date | date_to_xmlschema }}</li>{% endif %}
{% if page.last_modified_at %}<li class="dt-updated">{{ page.last_modified_at | date_to_xmlschema }}</li>{% endif %}
</ul>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm—the specification is fuzzy ("No properties are explicitly required") and then goes on to say an "h-entry should have the following properties at a minimum for consumers:"

  • url
  • dt-published (timestamp)

In this latest commit, I moved dt-published to page__date.html as you suggested and removed dt-updated (the if..else markup in page__date.html doesn't distinguish between published and updated when it is rendered to the page). I also removed p-author and p-summary as they aren't in the required subset.

That leaves u-url. Interestingly, there is a {{ page.link}} in _layouts/single.html, but I can't find a condition where page.link would have a value (unless it is expected to come from the page front matter). Unfortunately, u-url is a required data element. Thoughts on how to handle this?

I'm still iffy on the duplicating all the author markup as it's in the sidebar with microformat markup now.

The duplication is necessary so the author information occurs within the enclosing h-entry markup, and the sidebar is outside that markup. But since it isn't required I just removed it.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The duplication is necessary so the author information occurs within the enclosing h-entry markup, and the sidebar is outside that markup. But since it isn't required I just removed it.

Now I’m remembering why I wasn’t keen on adding microformats years ago 🤣. It would be so much better if it leveraged other standards especially all this data is already in the head or other schema used in the SEO include.

The page.link variable stuff is for “link” posts so you can’t rely on it. https://mmistakes.github.io/minimal-mistakes/post%20formats/post-link/

Maybe the best path forward is add the bare minimum of microformats that doesn’t duplicate markup. Then let me noodle on future support.

The theme is showing it’s age and a lot of other features being requested could benefit from me doing a complete overhaul. Microformats could be lumped in with that…

Copy link
Contributor Author

@dltj dltj Jul 16, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I am disappointed that the IndieWeb folks aren't using something more structured like Schema.org, but I don't have any leverage to steer that community...and it seems like they have quite the organic mix of tool providers that are using microformats.

Are you okay with merging the pull request as it is now? The minimal parts of microformats for Card and Entry have been added to the existing theme markup with the exception of the hidden <ul> list with the one list item for the URL to the post. I could clean up the wording of the list item explaining the hidden list—say, "This list item holds the microformat entry for the link to this post, and it is hidden from view"—and make a final commit to this pull request, if you prefer.

If not, I'm happy maintaining my own fork of mmistakes to get the microformats functionality. (Which is using the organic-mix-of-tools to get Twitter and Facebook conversations onto the blog post entry.)

Copy link
Owner

@mmistakes mmistakes Jul 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hidden content still gives me a bad feeling.
In fact was looking at the Microformats wiki and they even discourage it.

If some content doesn't fit into your visible design, then it's not worth microformatting it.

Microformats provide a mechanism for marking up visible content. Any mechanism for embedding invisible or hidden content risks being considered spam due to the fact that invisible (meta)data inevitably ends up being abused. Avoid invisible (meta)data. Publish visible data.

https://microformats.org/wiki/faq#Hidden_Content

Copy link
Contributor Author

@dltj dltj Jul 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right: the Microformats wiki does discourage the use of hidden content. That said, I think having something in the markup that points to itself seems to be a pretty critical idea—especially if some machine process is going to extract the data out of the page to make use of somewhere else.

I went poking through the Schema-org markup for CreativeWork, and there is a property from the inherited Thing for URL—and that property isn't used in the mmistakes markup at the moment. Perhaps a permalink can be added to the footer of the article, and that can be marked up with both itemprop="url" (for Schema-org) and class="u-url" (for Microformats).

image

<p>
  <strong><i class="fas fa-fw fa-bullseye" aria-hidden="true"></i> Permalink:</strong> <span itemprop="url" class="u-url">https://dltj.org/article/dltj-with-webmention/</span>
</p>

If you like, I could wrap it in a Jekyll {% if %} block that checks for a feature flag that is set to "false" by default so the addition doesn't have a visible impact on existing sites.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if instead of adding it to the footer metas... and adding yet another config toggle, you include the permalink in the h1 with the post title? I don't think it harms anything doing that.

<h1 id="page-title" class="page__title" itemprop="headline">
  <a href="{{ page.url | absolute_url }}" class="u-url">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</a>
</h1>

About the only change would be a visual one as the title is now styled like a link... which I don't see any issue with.

Screen Shot 2021-07-22 at 3 36 39 PM


<div class="page__inner-wrap">
{% unless page.header.overlay_color or page.header.overlay_image %}
<header>
{% if page.title %}<h1 id="page-title" class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %}
{% if page.title %}<h1 id="page-title" class="page__title p-name" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %}
{% include page__meta.html %}
</header>
{% endunless %}

<section class="page__content" itemprop="text">
<section class="page__content e-content" itemprop="text">
{% if page.toc %}
<aside class="sidebar__right {% if page.toc_sticky %}sticky{% endif %}">
<nav class="toc">
Expand Down Expand Up @@ -86,4 +95,4 @@ <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label
</div>
</div>
{% endif %}
</div>
</div>