View template source in NetNewsWire with JavaScript
- Posted
6 April 2025
This weekend I sat down to do a little more on my NetNewsWire theme and got side tracked delving into what is possible in a 2025 NetNewsWire theme. I’ve applied some of what I learned into an updated version of the Template variables theme.
Side loading theme assets
I was hoping it might be possible to do something similar today to load a (suitably licensed) web font from a theme package.
Much older versions of NetNewsWire loaded the selected theme CSS into the web view with a <link>
. My theme for this era of the app Ollicle Reflex used JavaScript to get that path, then used it to fetch additional resources from the theme package including more JavaScript and images.
View source in NetNewsWire
To determine if there were any paths rendered in the view I needed to see how the web view was put together. It is not inspectable with dev tools, so I turned to JavaScript.
The JavaScript is not complicated:
Object.assign(document.getElementById("fullSource"), {
value: document.documentElement.innerHTML
});
This grabs the source of the web view page and sticks it into a <textarea>
added to the theme template.html for the purpose.
Looking at the result quickly answered my question and conveniently exposed the CSS NetNewsWire loads in addition to the selected theme.
Will the old reflex hack work?
No. Turns out modern NetNewsWire does not link theme styles like the old version did. It loads the contents of the file inline into a <style>
instead. At least on MacOS – I’m yet to delve into what happens on iOS.
Loading additional assets into a NetNewsWire theme would be possible using full urls from the web, but doing so seems like a bad idea:
- Requires an elevated level of trust in a theme author
- Brings ongoing hosting of the side loaded assets
- Wouldn’t work offline
Excuse for a theme update
I’ve baked this function into version 3 of the Template variables theme.
While I was at it:
- Applied the necessary CSS for the theme to respond to a dark theme
- Made the article font sizing set in NetNewsWire settings work
- Some cosmetic polish
What next?
I have plenty to play with from here:
- Loading fonts I have installed on my Mac
- The story on iOS
- Actually building a theme for use