"Specific" guide to transitioning from Web Development to Obsidian Mods, Publish, Themes, Custom CSS and Custom JS

Help
1

Hi,

I will happily reward anyone who can either answer in detail here or publish an article or series of articles.

What I’m trying to do

I’m trying to use Obsidian, Custom CSS and Custom JS for mission-critical work related communication, so futzing around and going down rabbit holes trying to understand the idiosyncrasies is not something I can keep doing.

Things I have tried

I have read the Obsidian official documentation, many other articles and posts, and the code for both Themes and Plugins.

I have been down rabbit holes trying to make it all work together, and I seem to be doing it wrong. I have tried Plugins such as RunJS, JS-Engine, Dataview, and the like. At this point I have lost days of work time. I can’t keep losing time.

Specific Questions:

  1. Where can I put environment variables that will allow me to use private API keys in my JavaScript? If this was a normal JS project in any framework, there would be a .env file in the root directory, and a library would import constants from it as environment variables such as OPENGRAPH_API_KEY. Given I am using Publish, I need to know where I can put these environment variables so the JavaScript works in Publish, but the key is not exposed.
  2. How are CSS selectors called from the Markdown syntax that Obsidian uses? If I have a class or id selector, where does it go in embedded markdown? (For context, it’s been impossible for me to figure out how to use Markdown to make CSS for a Carousel that works both in Edit mode and also on the Publish site.
  3. If I want to use modular CSS, how can I make sure that styles are applied consistently from the publish.css file and the .obsidian/snippets/ files?
  4. If I want to use modular JS, how can I make sure that functions and classes that are set up in a js/custom/ directory can be called from a markdown file in both Edit and in Publish mode? How do I call JS functions in both Markdown syntax and in raw HTML embeds?

I am a proficient web developer, so I know how to do these things on an independent website.

What I am missing is the exact syntax and the exact directory structure. The Obsidian documentation is not specific enough to be helpful for me.

Will reward a good answer.

2
  1. Publish doesn’t support environment variables.
  2. I don’t understand what you’re trying to do, but you can follow this guide to create a Publish theme and learn about Obsidian’s CSS variables. You can also use Obsidian dev tools and your browser’s dev tools to understand the DOM structure if you want to target specific elements.
  3. You can only have one CSS file for your site (publish.css) so you’d need to compile CSS using something like Sass or Less if you want to keep it modular. Snippets and publish.css can target some of the same elements since Publish has a similar DOM structure to the app, but snippets apply only to the app, whereas publish.css applies only to your site.
  4. Same as publish.css you can only have one publish.js file so you’ll have to compile that file if you want to build it up from several files.
2 Likes
3

This doesn’t answer the question. I want specifics.

If I have a function in publish.js, how do I call it from a Markdown file? What exact syntax do I use?

Let’s say ‘fetchOpenGraphIoData’ returns an HTML block, how do I call it in the Markdown files so when I push it to publish it works?

4

I have no clue about Javascript, but I know a thing or two about DOM and CSS. And I enjoy digging through documentation. :slight_smile:

What I learned so far in the forum, is that scripts for desktop and Publish work differently. AFAIK on desktop you need a plugin to run a script, whereas in Publish you can add it to publish.js. So I’d approach the scripting for Publish separately from desktop.

How to add content with Javascript on Publish?

I found a script that adds Cookie banners. Apparently it is possible to trigger a script just by opening a page and to target a particular location in the page for the output:

Then I searched for “publish.js tags:publish”.

It shows other examples of publish.js adding content to a webpage, like a donation button.

Triggering a script on Publish seems straight-forward. But the difficult part seems to find useful selectors for parameters and output.

The way I understand it, you don’t call scripts in Markdown.