#+ELEVENTY_COLLECTIONS: _posts
#+ELEVENTY_BASE_DIR: ~/proj/static-blog/
#+ELEVENTY_BASE_URL: https://sachachua.com

* TODO Updating Planet Venus so that planet.emacslife.com can handle mix-blend-mode in my SVGs  :geek:python:
:PROPERTIES:
:EXPORT_DATE: 2024-01-26T09:30:12-0500
:EXPORT_ELEVENTY_PERMALINK: /blog/2024/01/updating-planet-venus-so-that-planet-emacslife-com-can-handle-mix-blend-mode-in-my-svgs/
:EXPORT_ELEVENTY_FILE_NAME: blog/2024/01/updating-planet-venus-so-that-planet-emacslife-com-can-handle-mix-blend-mode-in-my-svgs/
:END:

I wanted to easily turn segments from my Yay Emacs
livestreams or recorded narration into
closed-caption audio and dynamic highlighting of
my SVG sketches and text transcripts. That way,
people could easily jump around to sections
they're interested in.

Not everyone has Javascript turned on, so I wanted
to start with something that made sense even in
RSS feeds like the one on [[https://planet.emacslife.com][Planet Emacslife]] (which
strips out ~<style>~ and ~<script>~) and was
progressively enhanced with captions and
highlighting if you saw it on my site.

#+CAPTION: My SVGs were broken: black fill, no mix-blend-mode
[[file:/home/sacha/recordings/2024-01-25_08-37-11.png]]

The blog aggregator I'm using, [[https://github.com/rubys/venus][Planet Venus]],
hasn't been updated in 14 years. It even uses
Python 2. I considered switching to a different
aggregator, so I started checking out different
community planets. Most of the other planets
listed in this [[https://news.ycombinator.com/item?id=4929490][HN thread about aggregators]] looked
like they were using the same Planet Venus
aggregator, although these were some planets that
used something else:
- https://github.com/hrw/very-simple-planet-aggregator
- https://github.com/openSUSE/planet-o-o
- https://planet.lisp.org/about.html

I decided I'd stick with Planet Venus for now,
since I could probably figure out how to get the
attributes sorted out.

I found ~planet/vendor/feedparser.py~ by digging
around. Adding ~mix-blend-mode~ to the list of
attributes there was not enough to get it working.
I started exploring [[https://realpython.com/emacs-the-best-python-editor/][pdb]] for interactive Python
debugging inside Emacs, although I think [[https://www.reddit.com/r/emacs/comments/k5dsar/emacs_ide_for_python_setting_up_the_debugger_with/][dap]] is an
option too. I wrote a short bit of code to test things out:

#+begin_src python :eval no
import sys,os
sys.path.insert(1, os.path.join(os.path.dirname(__file__), 'planet/vendor'))
from feedparser import _sanitizeHTML
assert 'strong' in _sanitizeHTML('<strong>Hello</strong>', 'utf-8', 'text/html')
assert 'mix-blend-mode' in _sanitizeHTML('<svg><path style="fill: red;mix-blend-mode:darken"></path></svg>', 'utf-8', 'text/html')
#+end_src

It was pretty easy to use pdb to start stepping
through and into functions, although I didn't dig
into it deeply because I figured it out another
way. While looking through the pull requests for
the Venus repository, I came across this
[[https://github.com/rubys/venus/pull/19][pull
request to add data- attributes]] which was
helpful because it pointed me to
~planet/vendor/html5lib/sanitizer.py~. Once I
added ~mix-blend-mode~ to that one, things worked.
[[https://github.com/sachac/venus/tree/sachac-additional-attribs][Here's my Github branch]].

#+CAPTION: planet.emacslife.com now lets me use mix-blend-mode
[[file:/home/sacha/recordings/2024-01-25_08-51-33.png]]

On a somewhat related note, I also had to [[blog:/blog/2024/01/patching-elfeed-and-shr-to-handle-svg-images-with-viewbox-attributes/][patching
shr to handle SVG images with viewBox attributes]].
I guess SVGs aren't that common yet, but I'm
looking forward to playing around with them more,
so I might as well make things better (at least
when it comes to things I can actually tweak).
[[https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#browser_compatibility][mix-blend-mode on SVG elements]] says it's not
supported in Safari or a bunch of mobile browsers,
but it seems to be working on my phone, so maybe
that's cool now. Using mix-blend-mode means I
don't have to do something complicated when it
comes to animating highlights while still keeping
text visible, and improving SVG support is the
right thing to do. Onward!