@harr I have spent hours and hours and days and days trying to figure out how to do this. I have read all the documentation. I have read all the previous responses. I have examined the codebases of multiple plugins. I have installed and uninstalled and reinstalled CustomJS, JSEngine, etc.
I will explain in detail below, but to get to the point:
How do you call a JavaScript function from within the Obsidian desktop app, in a specific Markdown file? How do you do it in such a way that it renders both in Edit and in Read mode, as well as when it goes to Publish?
— Longer Explanation —
I am trying to create a beautiful link card that dynamically fetches OpenGraph assets from the links I am linking to. For reference, CraftDocs does this and here’s my example published page of links to Database Apps.
I know how to do this in CSS, HTML, and JavaScript. I have it working on my local machine. How do I then put it into my Obsidian vault, and it renders in Edit, Read, and Publish?
To break down the question:
I know how and where to edit CSS in both the publish.css file and the .obsidian/snippets folder. But I don’t know know how to make the CSS apply to the Obsidian extended markdown (or Markdown in general).
I know how to write JavaScript functions that return an object, but I don’t know how to render it in the Obsidian editor.
I have written a function called fetchOpenGraphData that returns an object with properties.
async function getFromOpenGraphIo(url) {
try {
const proxyUrl = `https://opengraph.io/api/1.1/site/${encodeURIComponent(url)}?accept_lang=auto&use_proxy=true&app_id=${OPEN_GRAPH_API_KEY}`;
const response = await fetch(proxyUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Raw data from OpenGraph.io:', data); // Debugging step
const ogProperties = {};
if (data.hybridGraph) {
ogProperties.image = data.hybridGraph.image;
ogProperties.site_name = data.hybridGraph.site_name;
ogProperties.title = data.hybridGraph.title;
ogProperties.url = data.hybridGraph.url;
}
console.log('Fetched OpenGraph properties:', ogProperties);
return ogProperties;
} catch (error) {
console.error('Error fetching OpenGraph properties:', error);
return null;
}
}
However, I cannot for the life of me call this object. What is the precise syntax? Am I importing it as a script into embedded HTML? (Doesn’t seem to work.)
Am I calling it inside a codeblock with the tag js-engine or @RunJS or whatever?
While I am at it, where can you save .env tokens like API keys? That is also not answered anywhere. In this function I am calling OpenGraph.io API, and I don’t want that key to be publicly accessible, yet I need to use a proxy api in order to get OpenGraph objects reliably.
I just want a very specific set of files as examples: a markdown file that calls a javascript function from a javascript file. Renders inside Edit and Read modes, and on publish.
Thanks for your time.
