Update README.md with SupportedWebsiteList.md for all the embeds with examples.

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) <!-- TODO: Add description / link of why its not supported -->
+- [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)`
 <!--- 
 TODO: Dark mode
 
@@ -48,48 +50,59 @@ TODO: Find out how to format size. the seperator between width and height is "x"
 |size: `value`x`value`|Sets both embed's width and height. Uses [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)|`[size:100%x300px](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 <u>Reading View</u>: <br>
+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**: <br>
 		Searches for the `<img>` tag that's generated by Obsidian when you use the this format: `![](link)`
-	- In <u>Live Preview</u>: <br>
+	- In **Live Preview**: <br>
 		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: <br>https://codepen.io/jh3y/pen/LYNZwGm converts to https://codepen.io/jh3y/embed/LYNZwGm?default-tab=result&editable=true
-3. Replaces those tags with `<iframe>` and apply options.
+3. Replaces those tags with `<iframe>` and apply options (width, height, dark mode, etc)
 4. Some websites like Twitter, Reddit or Imgur, will send a resize message. The plugin uses the info to resize the embed.
 
 ## Roadmap
-- [ ] Add support for other websites (Suggest some examples?)
+- [ ] Add support for other websites (If you want other websites, create an issue or message me)
 	- [ ] Google Maps
 	- [ ] Google Docs
 	- [ ] Google Calendar
 	- [ ] Notion 
-	- [ ] Other websites. [Iframely](https://iframely.com/domains) has a list of websites that are embeddable.
+	- [ ] Other websites. [Iframely](https://iframely.com/domains) has a list of websites that can be embedded.
 - [ ] Add tests
 - [ ] Updated README.md
+	- [ ] Improve readability. Open to suggestions, especially if something wasn't clear!
 	- [ ]  Add images / gifs to show examples
  	- [ ]  Add installation instructions
 - [ ]  Submit to Obsidian plugin directory?
 
 ### Current Limitations & Known Bugs 
-- **Reddit**: Incorrect resizing of Reddit embeds when there are multiple Reddit embeds that appear in the same page.
-- **Spotify**: Only able to play 30 seconds of a song. Spotify only allows when the user is logged in the browser, which is not possible in Obsidian. 
-- **Live Preview**: It's still experimental which means it might have bugs. Please [send any issues](https://github.com/GnoxNahte/obsidian-auto-embed/issues) you found!
-- **Mobile**: Not tested yet
+- General
+	- **Live Preview**: It's still experimental which means it might have bugs. 
+	- **Mobile**: Not tested yet
+- Website specific
+	- **Reddit**: Incorrect resizing of Reddit embeds when there are multiple Reddit embeds that appear in the same view.  <br><u>Temporary fix methods:</u>
+		- Space out the reddit embeds such that there isn't multiple embeds in your view
+		- Manually set the height by using options: `![h:240px](reddit link)`
+	- **Spotify**: Only able to play 30 seconds of a song. Spotify only allows when the user is logged in the browser, which is not possible in Obsidian. 
+	- **Twitter & YouTube**: Since [Obsidian supports it](https://help.obsidian.md/Editing+and+formatting/Embed+web+pages), I won't interfere with it. However, it means that [options](#custom-options) isn't supported. I might be able to replace Obsidian's embeds with mine, but it'll only work in *Live Preview*, but not *Reading Mode*. This makes an inconsistent user experience but if you want this feature, contact me.
+	- **Twitter / X**: Obsidian supports https://twitter.com but not https://x.com. This plugin just helps embedding X. If you replace twitter with x, or vice versa, it'll lead to the same tweet / post. Usually when copying from the mobile app, it's X. When copying from the web, it's Twitter.
+
+Please [send any issues](https://github.com/GnoxNahte/obsidian-auto-embed/issues) you found!
 
 ## Frequently asked questions
 ### The embed isn't appearing
-1. Have you enabled the plugin?
+1. Have you [enabled the plugin](https://help.obsidian.md/Extending+Obsidian/Community+plugins#Enable+a+community+plugin)?
 2. Are you following this syntax? `![](link)`<br>
 	For example: `![]()`
 
-## Support
+## Contact Me
 I've just started Obsidian and this is my first plugin.<br>
 If you have any questions, feature requests or issues feel free to [create a issue](https://github.com/GnoxNahte/obsidian-auto-embed/issues/new) or contact me!<br>
 
 Email - gnoxnahte@gmail.com<br>
-Discord - https://discordapp.com/users/222261096738717696 <br>
+Discord DM - https://discordapp.com/users/222261096738717696 <br>
 
-If this plugin helped you and want to support it's development, consider supporting me at [ko-fi](https://ko-fi.com/gnoxnahtedev)
+If this plugin helped you and want to support it's development, consider supporting me at [Ko-fi](https://ko-fi.com/gnoxnahtedev)

SupportedWebsiteList.md

@@ -0,0 +1,14 @@
+# obsidian-auto-embed
+[Obsidian](https://obsidian.md/) plugin to help embed links automatically instead of using iframes
+
+## Supported website list
+This is a list of supported websites with some examples.Websites with a `*` means it has some limitation. See [Current Limitations & Known Bugs](README.md/#current-limitations--known-bugs) for more info
+
+| Website | Markdown example | Result |
+|---|---|---|
+|[X](https://x.com) *|`![](https://x.com/obsdmd/status/1739667211462316449)`|![](readme-assets/examples/X-Example.gif)
+|[Reddit](https://www.reddit.com/) *|`![](https://www.reddit.com/r/ObsidianMD/comments/1bji8i4/obsidian_sync_now_starts_at_4_per_month_with_the/)`|![](readme-assets/examples/Reddit-Example.gif)
+|[Imgur](https://imgur.com/)|`![](https://imgur.com/t/cat/4JFfaXN)`|![](readme-assets/examples/Imgur-Example.gif)
+|[CodePen](https://codepen.io/)|`![h:500px](https://codepen.io/jh3y/pen/LYNZwGm)`|![](readme-assets/examples/CodePen-Example.gif)
+|[Steam](https://store.steampowered.com/)|`![](https://store.steampowered.com/app/367520/Hollow_Knight/)`|![](readme-assets/examples/Steam-Example.png)
+|[Spotify](https://open.spotify.com/) *|`![](https://open.spotify.com/album/06mXfvDsRZNfnsGZvX2zpb)`|![](readme-assets/examples/Spotify-Example.png)

src/embeds/twitter.ts

@@ -64,8 +64,8 @@ export class TwitterEmbed extends EmbedBase {
         for (let i = 0; i < iframes.length; ++i) {
             const iframe = iframes[i] as HTMLIFrameElement;
             
-            iframe.style.height = params["height"] + "px";
-            iframe.style.width = params["width"] + "px";
+            iframe.style.height = ((params["height"] as number) + 1) + "px";
+            // iframe.style.width = ((params["width"] as number) + 1) + "px";
         }
     }
 }