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

✨ feat(webmentions): add webmentions support templates #485

Open
wants to merge 27 commits into
base: main
Choose a base branch
from

Conversation

gortavoher
Copy link

@gortavoher gortavoher commented Feb 10, 2025

Summary

Related issue

Webmentions are part of the Indieweb suite of protocols references in issue #463.

Changes

  • 🌐 i18n(html): add microformats2 classes for semantic markup
    • 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
  • πŸ“ docs(shortcodes): add example for webmentions section
    • include dual theme image example for webmentions
    • provide live example based on page_url configuration
  • ✨ feat(blog): add webmention images and section enhancements
    • add webmention_dark.webp and webmention_light.webp for dual theme support
    • update webmentions section with an anchor and image display code
  • πŸ”§ chore(config): update page_url in config.toml
    • change page_url to point to the new blog update and release page
    • ensure the configuration reflects the latest URL for webmention script usage
  • πŸ› fix(blog): correct webmention config typo
  • fix typo in config.toml example from 'enable' to 'enabled' to ensure proper functionality
  • πŸ“ docs(blog): update webmentions configuration details
    • 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(config): update webmentions configuration
    • 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
  • ✨ feat(csp): add webmention support to content security policy
    • include webmention.io in connect-src when webmention system is enabled
    • ensure compatibility with webmention services by updating CSP directives
  • πŸ’„ style(sass): enhance webmention styling with variables
    • move to scss as a component of main to take advantage of theme variables to assure text accessibility
  • πŸ“ docs(blog): add webmentions section to mastering tabi settings
    • Describe webmentions configuration and how they are used in the "Mastering tabi Settings: A Comprehensive Guide" blog post
  • ✨ feat(shortcodes): add webmentions section
    • Document the webmentions shortcode and the required config settings to enable the use of the shortcode.
  • ✨ feat(header): add webmentions support
    • link in the webmentions partial if webmentions is enabled in the config.
  • ✨ feat(styles): add webmention styling
    • Style sheet for webmentions HTML components
  • ✨ feat(webmention): add webmention.js for embedding webmentions
    • JavaScript functions to fetch webmentions from webmention.io and create HTML components to place on the page.
  • ✨ feat(config): add webmention support
    • Add webmention support in the config file (and theme.toml shadow) to support the JavaScript function configuration options and the CSP config to permit access to webmention.io.
  • ✨ feat(webmentions): add webmentions support templates
    • Add partial to include webmention configuration in the head section of the page including the notification link using webmention.io, the link to the style sheet and the configured link to the JavaScript functions.

Accessibility

Screenshots

Type of change

  • Bug fix (fixes an issue without altering functionality)
  • New feature (adds non-breaking functionality)
  • Breaking change (alters existing functionality)
  • UI/UX improvement (enhances user interface without altering functionality)
  • Refactor (improves code quality without altering functionality)
  • Documentation update
  • Other (please describe below)

Checklist

  • I have verified the accessibility of my changes
  • I have tested all possible scenarios for this change
  • I have updated theme.toml with a sane default for the feature
  • I have updated config.toml in tabi-start
  • I have made corresponding changes to the documentation:
    • Updated config.toml comments
    • Updated theme.toml comments
    • Updated "Mastering tabi" post in English
    • (Optional) Updated "Mastering tabi" post in Spanish
    • (Optional) Updated "Mastering tabi" post in Catalan

- create webmentions partial template for page head integration
- add webmentions shortcode template to position webmentions on the page
@gortavoher gortavoher requested a review from welpo as a code owner February 10, 2025 17:54
Copy link

netlify bot commented Feb 10, 2025

βœ… Deploy Preview for tabi-demo ready!

Name Link
πŸ”¨ Latest commit 89ebc6d
πŸ” Latest deploy log https://app.netlify.com/sites/tabi-demo/deploys/67b88f3ea00f600008416bad
😎 Deploy Preview https://deploy-preview-485--tabi-demo.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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
@gortavoher gortavoher marked this pull request as draft February 11, 2025 14:01
feat(webmentions): add webmentions support templates
@welpo
Copy link
Owner

welpo commented Feb 11, 2025

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!

@welpo welpo added the enhancement New feature or request label Feb 11, 2025
jerusdp and others added 13 commits February 11, 2025 22:30
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
- 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
@gortavoher gortavoher marked this pull request as ready for review February 21, 2025 14:46
@jerusdp
Copy link

jerusdp commented Feb 25, 2025

@welpo ready for review now!

@welpo
Copy link
Owner

welpo commented Mar 3, 2025

Noted! I will try to review it before next Monday. Feel free to ping me if you see me slacking :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants