diff --git a/README.md b/README.md index baab76e..065b2c3 100644 --- a/README.md +++ b/README.md @@ -11,24 +11,26 @@ TODO 3. (Optional) Add [Options](#custom-options) 4. Done! Wait for the embed to load -![GIF showing example on how to embed links](readme-images/Auto-Embed%20Getting%20Started.gif) +![GIF showing example on how to embed links](readme-assets/Auto-Embed%20Getting%20Started.gif) -Uses the [same syntax as Obsidian](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages). Syntax: `![options](link)` +Uses the same syntax as Obsidian - [Embed Web pages](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages). Syntax: `![options](link)` ## Features Auto embeds websites like: [Imgur](https://imgur.com/), [CodePen](https://codepen.io/), [Steam](https://store.steampowered.com/). Full list of [supported websites](#supported-websites) ### Supported websites: -- [X](https://x.com) (Obsidian only supports twitter.com but not x.com) -- [Reddit](https://www.reddit.com/) (Has some resizing bugs) +- [X](https://x.com) * +- [Reddit](https://www.reddit.com/) * - [Imgur](https://imgur.com/) - [CodePen](https://codepen.io/) - [Steam](https://store.steampowered.com/) -- [Spotify](https://open.spotify.com/) (Has a 30 second preview limit. Spotify only allows full songs when logged in) +- [Spotify](https://open.spotify.com/) * > [!WARNING] -> This plugin won't change Twitter and YouTube links since [Obsidian handles those](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages). Which means that [options](#custom-options) don't work. +> Those websites that has `*` means that it has some limitation. See [Current Limitations & Known Bugs](#current-limitations--known-bugs) for more info + +For a list with examples on how the websites look like: [Supported Websites List](SupportedWebsiteList.md) ## Custom Options How to add options: @@ -38,9 +40,9 @@ How to add options: ### All options: | Option | Description | Example Markdown | |---|---|---| -|noembed|Disables embedding on this iframe|`![noembed](https://example.com)` -|w:`value` / width:`value`|Sets embed's width Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)|`![w:100%](https://example.com)` -|h:`value` / height:`value`|Sets embed's height. Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)|`![h:500px](https://example.com)` +|noembed|Disables embedding for this link. If possible, try to use `[](link)` instead. Same syntax, just without '!'|`![noembed](https://example.com)` +|w:`value` / width:`value`|Sets embed's width|`![w:100%](https://example.com)` +|h:`value` / height:`value`|Sets embed's height |`![h:500px](https://example.com)` +Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths) where applicable. + ## How the plugin works -A brief overview of how the plugin works. Not required to use the plugin, just for those who are curious. To understand it, requires basic knowledge of HTML and Obsidian. -1. Has 2 different methods depending on the viewing mode: - - In Reading View:
+A brief overview with some steps on how the plugin works. *Not required to use the plugin*, just for those who are curious. Certain steps vary depending on whether you're in **Reading View** or **Live Preview**. However, the plugin doesn't have any impact when you're in source mode. +1. Search where in the document the syntax is found. + - In **Reading View**:
Searches for the `` tag that's generated by Obsidian when you use the this format: `![](link)` - - In Live Preview:
+ - In **Live Preview**:
Searches for `![](link)` and gets the [options](#custom-options) and url from it. -2. Gets the url from it, convert it to the embed equivalent. Usually it's the same website but only with the content. No headers, sidebar, etc +2. Gets the url from it, convert it to the embed equivalent. Usually adds `/embed/` somewhere in the url. Results in the same website but focused only on the content. No headers, footer, etc - Example:
https://codepen.io/jh3y/pen/LYNZwGm converts to https://codepen.io/jh3y/embed/LYNZwGm?default-tab=result&editable=true -3. Replaces those tags with `