External links in post bodies already opened in a new tab and showed an
icon, but the icon is invisible to screen readers, so nothing announced
that the link leaves the site.
- blogex: ExternalLinks.rewrite/1 appends
<span class="blogex-external-hint"> (opens in a new tab)</span> as the
last child of every external anchor. No aria-label, so the accessible
name still contains the visible link text (WCAG 2.5.3); the icon colour
and 2.5.3 both hold. Idempotent: a second pass adds no second hint.
- blogex: anchors are now matched together with their closing tag
(the hint goes inside), so a stray unclosed <a> is left alone.
- app: sr-only rule for .blogex-external-hint in .blogex-post-body. The
split stays as before: blogex marks up, the host app styles.
- tests: hint cases in blogex (appended, per link, after inner markup,
idempotent, not on internal/mailto/anchor links) + anchors without href
(Blogex.ExternalLinks now at 100% line coverage), and an app test that
the hint reaches the rendered post page. Two exact-string expectations
updated for the intended markup change.
make test: app 179, blogex 162. make verify: green.
External links in post bodies now open in a new tab and show a
box-with-arrow marker icon, so readers can tell at a glance which
links leave the site.
- blogex: new Blogex.ExternalLinks.rewrite/1 marks up anchors with
http(s) hrefs at compile time with target="_blank", rel="noopener"
and class="blogex-external" (idempotent, merges into existing
class/rel values, leaves relative, mailto: and #anchor links alone)
- blogex: Post.build/3 applies the rewrite, so every blog gets it
- app: CSS in .blogex-post-body draws the marker via a mask so it
inherits the link colour; empty ::after content stays invisible
to screen readers
- make test now also runs the blogex suite; it is currently red
with 3 pre-existing blog_integration_test failures caused by the
vacuous link validator (parked yak
link-validator-never-sees-compiled-html-...)
- Install highlight.js via npm with 8 language definitions
- SourceViewer hook applies syntax highlighting on mount/update
- Atom One Dark theme for dark mode, Atom One Light for light mode
- Add hooks directory, package.json, and package-lock.json
- Add demo document and screenshots
- Add rodney-docker.md documentation
- Ignore .rodney/ chrome data directory
Goal: have a personal blog, and try out another point in the 'modular
app design with elixir' space.
Designing OTP systems with elixir had some interesting ideas.
Willem van den Ende
mostalive