This commit is contained in:
Ell 2022-04-13 22:09:57 +02:00
parent c32d83dc6e
commit 5c78fcf180
5 changed files with 31 additions and 6 deletions

View file

@ -10,6 +10,29 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
## 🤔 Usage ## 🤔 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. 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 ### 📱 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. 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 ## 🛣️ Roadmap
- ~~Allow setting a custom icon for each pane~~ - ~~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 - 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) - 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 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 ## ⚠️ 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. There are a few known issues with Custom Frames. If you encounter any of these, please **don't** report it on the issue tracker.

View file

@ -1,8 +1,8 @@
{ {
"id": "obsidian-custom-frames", "id": "obsidian-custom-frames",
"name": "Custom Frames", "name": "Custom Frames",
"version": "2.2.2", "version": "2.3.0",
"minAppVersion": "0.14.3", "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.", "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", "author": "Ellpeck",
"authorUrl": "https://ellpeck.de", "authorUrl": "https://ellpeck.de",

View file

@ -1,6 +1,6 @@
{ {
"name": "obsidian-custom-frames", "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.", "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", "main": "main.js",
"scripts": { "scripts": {

View file

@ -35,7 +35,7 @@ export default class CustomFramesPlugin extends Plugin {
this.addSettingTab(new CustomFramesSettingTab(this.app, this)); this.addSettingTab(new CustomFramesSettingTab(this.app, this));
this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e, ctx) => { this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e) => {
e.empty(); e.empty();
e.addClass("custom-frames-view-file"); e.addClass("custom-frames-view-file");

View file

@ -4,5 +4,6 @@
"2.1.0": "0.13.33", "2.1.0": "0.13.33",
"2.2.0": "0.14.3", "2.2.0": "0.14.3",
"2.2.1": "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"
} }