diff --git a/README.md b/README.md index 566f33f..289f326 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,29 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl ## 🤔 Usage To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the "Custom Frames: Open" command. +### 🗒️ Markdown Mode +You can also display your custom frames in your Markdown documents. Custom Frames adds a special code block syntax that transforms the code block into a custom frame in Live Preview and Reading mode. Your code block should look like this: +~~~ +```custom-frames +frame: YOUR FRAME'S NAME +``` +~~~ + +Optionally, you can also pass custom style settings to the embed, which allows you to change things like the embed's height: +~~~ +```custom-frames +frame: YOUR FRAME'S NAME +style: SOME CSS +~~~ + +Here's an example that creates a very tall embed using the [Google Keep preset](#📦-presets): +~~~ +```custom-frames +frame: Google Keep +style: height: 1000px; +``` +~~~ + ### 📱 On Obsidian Mobile Unfortunately, Obsidian Mobile does not run on [Electron](https://www.electronjs.org/), which is what allows iframes and [webviews](https://www.electronjs.org/docs/latest/api/webview-tag) to be displayed with very few restrictions related to cookies, cross-origin resource sharing, and so on. This means that a lot of sites won't work there, especially ones that you have to log in to. However, when you create a frame, you can toggle the "Disable on Mobile" option to hide a Desktop-only frame in Obsidian mobile. @@ -26,10 +49,11 @@ If you create a frame that you think other people would like, don't hesitate to ## 🛣️ Roadmap - ~~Allow setting a custom icon for each pane~~ -- Allow displaying custom frames in Markdown code blocks +- ~~Allow displaying custom frames in Markdown code blocks~~ - Allow creating links that open in a custom frame rather than the browser - Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored) - Add a global setting that causes popups to be opened in a new Obsidian window rather than the default browser +- Add more options to Markdown mode, like allowing for back and forward buttons ## ⚠️ Known Issues There are a few known issues with Custom Frames. If you encounter any of these, please **don't** report it on the issue tracker. diff --git a/manifest.json b/manifest.json index 219d40d..b000b2d 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "id": "obsidian-custom-frames", "name": "Custom Frames", - "version": "2.2.2", - "minAppVersion": "0.14.3", + "version": "2.3.0", + "minAppVersion": "0.14.5", "description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.", "author": "Ellpeck", "authorUrl": "https://ellpeck.de", diff --git a/package.json b/package.json index e5712fa..12015c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-custom-frames", - "version": "2.2.2", + "version": "2.3.0", "description": "An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.", "main": "main.js", "scripts": { diff --git a/src/main.ts b/src/main.ts index d95d857..7081267 100644 --- a/src/main.ts +++ b/src/main.ts @@ -35,7 +35,7 @@ export default class CustomFramesPlugin extends Plugin { this.addSettingTab(new CustomFramesSettingTab(this.app, this)); - this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e, ctx) => { + this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e) => { e.empty(); e.addClass("custom-frames-view-file"); diff --git a/versions.json b/versions.json index 7c28144..59e7733 100644 --- a/versions.json +++ b/versions.json @@ -4,5 +4,6 @@ "2.1.0": "0.13.33", "2.2.0": "0.14.3", "2.2.1": "0.14.3", - "2.2.2": "0.14.3" + "2.2.2": "0.14.3", + "2.3.0": "0.14.5" }