✨ feat: add indicator to external links

[welpo]

Summary

Adds styling to links with external class. The class can be added to external links by the [markdown] (not [extra]) section in config.toml:

[markdown]
external_links_class = "external"

Related issue

This will be merged once getzola/zola#2717 makes it into the next version of Zola.

Changes

Adds reading-direction-agnostic CSS to style external links.

Accessibility

From my research, screen readers needn't mention a link is external; the visual indicator will be ignored.

Note: it's recommended to avoid setting links to open in new tabs (external_links_target_blank setting), as the W3C recommends:

“In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content.”

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

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	c82e471
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/67b050a4bff8b8000801d793
😎 Deploy Preview	https://deploy-preview-443--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.