✨ feat(webmentions): add webmentions support templates #485
Conversation
- create webmentions partial template for page head integration - add webmentions shortcode template to position webmentions on the page
✅ Deploy Preview for tabi-demo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
- introduce webmention.io configuration for enhanced comment integration - add connect-src directive for webmention.io to CSP policy
- add webmention.js to enable client-side embedding of webmentions from webmention.io - support multiple configuration parameters for customization - based on PlaidWeb/webmention.js ✨ feat(webmention): add minified version of webmention.js - include webmention.min.js as a minified version for optimized loading - mirror functionality of the unminified webmention.js
- introduce webmention.css for styling web mention elements - create minified version webmention.min.css for optimized load times
- adjust indentation and spacing for better readability ✨ feat(header): add webmentions support - include webmentions partial if enabled in config
- introduce a section for displaying webmentions for posts - include subsections for mentions of posts and sites mentioned in posts 📝 docs(shortcodes): correct typos and improve clarity - fix spacing and punctuation issues in Mermaid diagrams - correct typo in "Provides" within the swap image section - update Markdown syntax in admonition examples - change "tranquility" to "tranquillity" in multilingual quote - correct movie title from "Beoning" to "Burning" - add usage examples for webmentions section
- introduce webmentions as per W3C standard - provide configuration and usage instructions - include links for further reading
- eliminate unwanted space at the end of a sentence for style consistency
- add color and background color variables for consistent styling - update margins and padding for better layout ♻️ refactor(css): migrate and rename webmention CSS to SCSS - move webmention.css to sass/parts/_webmention.scss - remove unused webmention.min.css - update template to remove old stylesheet link
- delete repeated updated date entry from the blog post metadata
feat(webmentions): add webmentions support templates
|
Hi! Thanks so much for working on this! I know this is a draft, but I took a quick look and I think it's worth mentioning this… Rather than ask users to update their CSP, I believe we should handle the case where webmentions is enabled and automatically enable the necessary directives in https://github.com/welpo/tabi/blob/main/templates/partials/content_security_policy.html, like we do for other built-in systems. If you need help with this CSP bit or anything else, don't hesitate to reach out! |
comment out page_url
- comment out page_url to prevent its usage and rely on default behavior
- include webmention.io in connect-src when webmention system is enabled - ensure compatibility with webmention services by updating CSP directives
- change "enable" to "enabled" for correct configuration key - uncomment and set webmentions configurations for correct functionality ✨ feat(blog): add webmentions shortcode - insert webmentions shortcode in blog shortcode index for display 🐛 fix(theme): update webmentions configuration in theme - change "enable" to "enabled" for correct configuration key in theme - uncomment and set webmentions configurations for correct functionality
- adjust heading level for webmentions section - simplify webmentions configuration instructions - remove redundant CSP directive explanation 🐛 fix(blog): correct webmentions enabled parameter - change "enable" to "enabled" in config.toml example
- fix typo in config.toml example from 'enable' to 'enabled' to ensure proper functionality
Webmentions
- correct spelling of "whether" in search index format description
- change page_url to point to the new blog update and release page - ensure the configuration reflects the latest URL for webmention script usage
- add webmention_dark.webp and webmention_light.webp for dual theme support - update webmentions section with an anchor and image display code
- include dual theme image example for webmentions - provide live example based on page_url configuration
- introduce h-entry, p-name, u-url, u-uid, p-author, dt-published, p-category, dt-updated, and e-content classes - enhance HTML with semantic and machine-readable attributes for better accessibility and SEO
|
@welpo ready for review now! |
|
Noted! I will try to review it before next Monday. Feel free to ping me if you see me slacking :) |
| @@ -372,6 +372,47 @@ service = "goatcounter" | |||
| # Leave this field empty if you're using the service's default hosting. | |||
| self_hosted_url = "https://tabi-stats.osc.garden" | |||
|
|
|||
| [extra.webmentions] | |||
There was a problem hiding this comment.
All of these settings should be unset by default (e.g. domain =""), and the feature should be disabled
| @@ -372,6 +372,47 @@ service = "goatcounter" | |||
| # Leave this field empty if you're using the service's default hosting. | |||
| self_hosted_url = "https://tabi-stats.osc.garden" | |||
|
|
|||
| [extra.webmentions] | |||
| enabled = true | |||
| wordcount = 20 | ||
|
|
||
| # The maximum number of mentions to retrieve. Defaults to 30. | ||
| # max_webmentions |
There was a problem hiding this comment.
How about we make it
# max_webmentions = 30
(commented out)
| # nicely with webmention bridges (such as brid.gy and telegraph) | ||
| # but allows certain spoofing attacks. If you would like to prevent | ||
| # spoofing, set this to a non-empty string (e.g. "true"). | ||
| # prevent_spoofing |
There was a problem hiding this comment.
This sounds like it should be always true? What's a good reason to leave it off?
| @@ -1,7 +1,7 @@ | |||
| +++ | |||
| title = "Sense JavaScript obligatori" | |||
| date = 2023-01-06 | |||
| updated = 2025-02-15 | |||
| updated = 2025-02-21 | |||
There was a problem hiding this comment.
There's a few files that have only the updated line changed, but nothing is different in the contents.
Can you revert these changes?
| @@ -227,7 +228,13 @@ <h1 class="article-title"> | |||
| {{ macros_toc::toc(page=page, header=true, language_strings=language_strings) }} | |||
| {% endif %} | |||
|
|
|||
| <section class="body"> | |||
| {#- Optional Summary paragraph for readers -#} | |||
There was a problem hiding this comment.
Can you explain this? It feels like this shouldn't be in this PR, but on another one
| <noscript><link rel="stylesheet" href="{{ get_url(path='no_js.css') | safe }}"/></noscript> | ||
| <script type="text/javascript" src="{{ get_url(path='js/initializeTheme.min.js') | safe }}"></script> | ||
| <script defer src="{{ get_url(path='js/themeSwitcher.min.js', trailing_slash=false) | safe }}"></script> | ||
| {# If JavaScript is disabled, hide the button. #} |
There was a problem hiding this comment.
Can you undo this? Unrelated to the goal of the PR, plus I prefer the nesting within ifs
| > | ||
| </script> | ||
|
|
||
| {# |
| @@ -320,6 +320,47 @@ custom_subset = true | |||
| # Leave this field empty if you're using the service's default hosting. | |||
| # self_hosted_url = "" | |||
|
|
|||
| [extra.webmentions] | |||
There was a problem hiding this comment.
Will need to be in sync with config.toml changes
| {%- set dash = "-" -%} | ||
| {% endif %} | ||
|
|
||
| <div class="webmentions-container" id="webmentions{{ dash}}{{ format }}">hello</div> |
There was a problem hiding this comment.
Why did you opt for a shortcode instead of a similar comments.html approach, where it's always added at the end?
It increases the time to set up to little benefit. Or am I missing a cool use-case where an author might want to have the webmentions somewhere other than the end of the post?
Summary
Related issue
Webmentions are part of the Indieweb suite of protocols references in issue #463.
Changes
Accessibility
Screenshots
Type of change
Checklist
theme.tomlwith a sane default for the featureconfig.tomlin tabi-startconfig.tomlcommentstheme.tomlcomments