Use Case or Problem
Like Obsidian itself, Obsidian Publish is already an impressive service that’s helped to reduce the number of services I actively need to publish my works. Custom theming through publish.css, custom behavior through publish.js, mass uploads and updates with only a few clicks… it’s genuinely impressive to me, and I’m thankful to be able to use the service!
However, I feel like styling for Publish could use an update. It feels a bit… clunky to need to copy over your theme to the vault’s root, edit it to remove anything unnecessary, and make sure your snippets added to the theme file, potentially bloating the theme far beyond what’s necessary for some pages.
Obsidian already has CSS snippets available, so why not provide a way to make them work for Publish, too?
Why Do I (Personally) Want This?
In my case, there are presently ~30 different fonts that are used throughout my site, though only 2-6 of these are used for any given note. While these are presently @imported to reduce space with the theme itself, each @import represents additional requests and downloads—which also means that every font that isn’t used on that page is being unnecessarily downloaded for “use” by the browser.
While changing these to encoded @font-face rules could reduce the network impact of the numerous @imports, they would also result in a massively larger publish.css file; many fonts I use have numerous associated @font-face rules, some of which individual consist of 50, 75, or more predefined @font-faces. For my particular case, as much of an edge-case as this might be, limiting the numerous @import calls and @font-face rules to what’s necessary for that specific page would be of immense benefit to anyone going to my Publish site, and any others that make use of similarly “heavy” resources through CSS.
Proposed Solution
Introducing CSS Snippets for Publish! This would be a place within vaults—possibly within the Publish menu—for selecting which snippets should be uploaded to Publish for public use.
The benefits for this would be quite delightful, I think:
- Having such a place for this would help encourage smaller themes for Publish, as they wouldn’t also need to contain every single style you use.
-
publish.csscould then be used as the base theme, much likeobsidian.cssfor themes made available through Community Themes, with snippets extending or modifying this as-needed just like in the core app.
-
- CSS snippets could be loaded on-demand specifically for the notes they’re applied to, instead of being loaded in the theme for every page visited.
- While the difference will likely be negligible for most cases, this could be very useful for cases like mine, where fonts can (and will) change regularly.
- This would allow such drastic (and potentially performance-striking) changes to be restricted to only what’s needed.
- This would open up the possibility of fine-grained style loading for any users with Publish, not just those with a custom domain!
Additionally, it could have some extras to help make it a more powerful feature:
- If CSS snippets receive their own hub akin to what Themes presently have with the Theme Manager, it may be possible to toggle which snippets are also used with Publish through the same interface.
- Even if not, having an interface for this available through the “Publish changes” interface would make adding, removing, and updating Publish Snippets very simple!
- Bonus points for tracking which snippets have been used in pages designated for publishing! (Yes, I realize this would likely be more of a challenge and may not make it in, especially earlier on. This would be great QoL for the feature, but far from required for it to work properly.)
Notes on potential issues
- I’m aware that choosing a location to draw these snippets from may be a challenge.
- While adding them into the root is definitely feasible, it’s also not ideal—particularly if you have a bunch of snippets to use.
- This presents a different challenge than Themes, and simply copying the snippets to the root folder for upload could create a lot of clutter that many users wouldn’t want. (This applies specifically to users who have enable the
Detect all file extensionssetting enabled underFiles & Links.)
- Creating an alternate folder to store the snippets in would most likely result in duplicate snippets.
- Like themes, most will likely be developed for Obsidian’s core first, and then transferred to Publish.
- Having a way to simply flag which snippets are available to Publish would greatly reduce this duplication, and could reduce the friction needed to get them into Publish sites.
Current Workarounds
Right now, the only way to achieve anything similar to this is by loading the snippets directly into publish.css. It works, even if it’s what I’d rather avoid doing.
For those with a custom domain: publish.js may be used to identify pages with specific classes and automatically load the style(s) used for that page specifically, albeit at the cost of a potentially-large javascript file being uploaded as well. This also likely assumes that the user a) knows what they’re doing with JS enough to do this in the first place, or b) knows someone who does that’s willing to do the work for them.
Related Feature Requests
CSS Snippet Store: Something like this to help manage Publish Snippets would be immensely useful, and would make it significantly easier for users to select which styles they need. It’d also enable users who have created Publish Snippets to share them somewhere for others to quickly and easily access. It might even be possible to do a small modification of this to enable it for Publish Snippets as well!