Add #17: Add Instagram embed

src/embeds/embedManager.ts

@@ -12,6 +12,7 @@ import { TikTokEmbed } from "./tiktok";
 import { SoundCloudEmbed } from "./soundcloud";
 import { SupportedWebsites } from "src/settings-tab";
 import { apiVersion } from "obsidian";
+import { InstagramEmbed } from "./instagram";
 // import { YouTubeEmbed } from "./youtube";
 
 export class EmbedManager {
@@ -43,6 +44,7 @@ export class EmbedManager {
             new GoogleDocsEmbed(plugin),
             new TikTokEmbed(plugin),
             new SoundCloudEmbed(plugin),
+            new InstagramEmbed(plugin),
         ];
 
         // Having some trouble replacing the embedded web pages from Obsidian. 

src/embeds/instagram.ts

@@ -0,0 +1,50 @@
+import { SupportedWebsites } from "src/settings-tab";
+import { EmbedBase } from "./embedBase";
+
+export class InstagramEmbed extends EmbedBase {
+    name: SupportedWebsites = "Instagram";
+    regex = new RegExp(/https:\/\/(?:www\.)?instagram\.com\/(?:(?:(?:[\w._(?:[\w._]+\/)?(?:p|reel)\/([\w\-_]+))|(?:[\w._(?:[\w._]+))/);
+
+    createEmbed(url: string): HTMLElement {
+        const regexMatch = url.match(this.regex);
+        // Shouldn't happen since got test before. But in case
+        if (regexMatch === null)
+            return this.onErrorCreatingEmbed(url);
+
+        // Creating the iframe
+        const iframe = createEl("iframe");
+        
+        const isProfile = regexMatch[1] === undefined;
+
+        // Set the original regex to not capture profile
+        if (isProfile) {
+            const profileMatch = url.match(/https:\/\/(?:www\.)?instagram\.com\/([\w._(?:[\w._]+)/);
+            if (profileMatch === null)
+                return this.onErrorCreatingEmbed(url);
+
+            iframe.src = `https://instagram.com/${profileMatch[1]}/embed/`;
+            iframe.classList.add("instagram-profile");
+        }
+        else {
+            iframe.src = `https://instagram.com/reel/${regexMatch[1]}/embed/`;
+        }
+
+        iframe.classList.add(this.autoEmbedCssClass);
+        iframe.dataset.containerClass = "instagram-embed";
+        iframe.setAttribute("scrolling", "no");
+
+        function resizeEmbed() {
+            if (isProfile) {
+                iframe.style.height = (0.7 * iframe.offsetWidth + 200) + "px";
+            }
+            else {
+                // iframe.style.height = (0.563 * iframe.offsetWidth + 206) + "px";
+                iframe.style.height = (1.25 * iframe.offsetWidth + 208) + "px";
+            }
+        }
+
+        resizeEmbed();
+        new ResizeObserver(resizeEmbed).observe(iframe)
+        return iframe;
+    }
+} 

src/settings-tab.ts

@@ -24,7 +24,7 @@ export enum PreloadOptions {
 
 // export type SupportedWebsites = "CodePen" | "Google Docs" | "Imgur" | "Reddit" | "SoundCloud" | "Spotify" | "Steam" | "TikTok" | "Twitter/X" | "YouTube";
 
-const supportedWebsites = [ "Twitter/X", "Imgur", "Reddit", "CodePen", "Google Docs", "SoundCloud", "Spotify", "Steam", "TikTok" ] as const;
+const supportedWebsites = [ "Twitter/X", "Imgur", "Reddit", "CodePen", "Google Docs", "SoundCloud", "Spotify", "Steam", "TikTok", "Instagram" ] as const;
 export type SupportedWebsites = (typeof supportedWebsites)[number];
 export type SupportedWebsitesMap = {
     [key in SupportedWebsites]: boolean

styles.css

@@ -310,4 +310,19 @@ iframe.default-fallback-embed {
 .imgur-embed {
     width: 300px;
     height: 300px;
-}
+}
+
+.instagram-embed {
+    /* max-width: 500px; */
+
+    /* From Instagram's embed */
+    max-width: 658px;
+    min-width: 330px;
+    
+    .auto-embed {
+        transition-duration: 0.25s;
+        /* transition: none; */
+    }
+    /* height: calc(210px + 80vw); */
+    /* aspect-ratio: 1; */
+}