Merge pull request samwarnick#47 from udbhav-s/main

Add a generic link preview source

Author: samwarnick

.gitignore

@@ -1,3 +1,5 @@
+genericPreviewCache.json
+
 # VSCode
 .vscode
 
@@ -12,5 +14,5 @@ main.js
 # obsidian
 data.json
 
-.DS_Store
-.nova
+.DS_Store
+.nova

embeds/generic-preview.ts

@@ -0,0 +1,71 @@
+import { requestUrl } from "obsidian";
+import { EmbedSource, EnableEmbedKey } from "./";
+import { getPreviewFromContent } from "link-preview-js";
+import { PluginSettings } from "settings";
+import SimpleEmbedsPlugin from "main";
+
+export class GenericPreviewEmbed implements EmbedSource {
+  name = "Generic Preview";
+  enabledKey: EnableEmbedKey = "replaceGenericLinks";
+  // unmatchable regex
+  // this source is used as a fallback when other sources fail to match
+  regex = new RegExp("(?!)");
+
+  createEmbed(
+    link: string,
+    container: HTMLElement,
+    settings: Readonly<PluginSettings>,
+    currentTheme: "light" | "dark",
+    plugin: SimpleEmbedsPlugin,
+  ) {
+    const preview = document.createElement("a");
+    preview.setAttr("href", link);
+    preview.classList.add("preview");
+    preview.textContent = "Loading preview...";
+
+    const loadPreview = async () => {
+      let metadata;
+
+      // await cache file load if not available yet
+      if (!plugin.genericPreviewCache) await plugin.cacheFileLoadPromise;
+
+      if (settings.useCacheForGenericLinks && link in plugin.genericPreviewCache) {
+        metadata = plugin.genericPreviewCache[link];
+      } else {
+        const res = await requestUrl({ url: link });
+        metadata = await getPreviewFromContent({
+          headers: res.headers,
+          data: res.text,
+          url: link
+        });
+
+        if (settings.useCacheForGenericLinks && "title" in metadata) {
+          plugin.saveGenericPreviewCache(link, metadata);
+        }
+      }
+
+      if (!("title" in metadata)) return;
+
+      preview.innerHTML = 
+        String.raw`
+          <div class="image-container">
+            ${ metadata.images.length ? String.raw`<img src="${metadata.images[0]}" />` : "" }
+          </div>
+          <div class="content">
+            <div class="title">${metadata.title}</div>
+            <div class="description">${metadata.description ? metadata.description : ""}</div>
+          </div>
+        `;
+    }
+
+    try {
+      loadPreview();
+    } catch {
+      preview.textContent = "Could not load preview";
+    }
+
+    container.appendChild(preview);
+    container.classList.add("generic-preview");
+    return container;
+  }
+}

embeds/index.ts

@@ -1,3 +1,4 @@
+import SimpleEmbedsPlugin from "main";
 import { Setting } from "obsidian";
 import { EnableEmbeds, PluginSettings } from "../settings";
 
@@ -11,6 +12,7 @@ export interface EmbedSource {
     container: HTMLElement,
     settings: Readonly<PluginSettings>,
     currentTheme: "light" | "dark",
+    plugin: SimpleEmbedsPlugin,
   ): HTMLElement;
   afterAllEmbeds?(): void;
   updateTheme?(
@@ -37,3 +39,4 @@ export * from "./reddit";
 export * from "./twitter";
 export * from "./vimeo";
 export * from "./youtube";
+export * from "./generic-preview";

main.ts

@@ -13,9 +13,14 @@ import {
   TwitterEmbed,
   VimeoEmbed,
   YouTubeEmbed,
+  GenericPreviewEmbed,
 } from "./embeds";
-import { debounce, Debouncer, MarkdownView, Plugin } from "obsidian";
-import { DEFAULT_SETTINGS, PluginSettings } from "./settings";
+import { debounce, Debouncer, MarkdownView, Plugin, TFile } from "obsidian";
+import {
+  DEFAULT_SETTINGS,
+  GenericPreviewMetadata,
+  PluginSettings,
+} from "./settings";
 import { SimpleEmbedPluginSettingTab } from "./settings-tab";
 import { buildSimpleEmbedsViewPlugin } from "./view-plugin";
 
@@ -39,6 +44,15 @@ export default class SimpleEmbedsPlugin extends Plugin {
   processedMarkdown: Debouncer<[]>;
   currentTheme: "dark" | "light";
 
+  genericPreviewEmbed = new GenericPreviewEmbed();
+  genericPreviewCache = null as {
+    [url: string]: GenericPreviewMetadata;
+  } | null;
+  genericPreviewCacheFile =
+    this.app.vault.configDir +
+    "/plugins/obsidian-simple-embeds/genericPreviewCache.json";
+  cacheFileLoadPromise = null as Promise<void>;
+
   async onload() {
     console.log(`Loading ${this.manifest.name} v${this.manifest.version}`);
     await this.loadSettings();
@@ -57,7 +71,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
 
     this.registerMarkdownPostProcessor((el, ctx) => {
       const anchors = el.querySelectorAll(
-        "a.external-link",
+        "a.external-link"
       ) as NodeListOf<HTMLAnchorElement>;
       anchors.forEach((anchor) => {
         this._handleAnchor(anchor);
@@ -77,8 +91,27 @@ export default class SimpleEmbedsPlugin extends Plugin {
             });
           });
         }
-      }),
+      })
     );
+
+    // Load file for generic preview cache
+    const loadCacheFile = async () => {
+      if (
+        !(await this.app.vault.adapter.exists(this.genericPreviewCacheFile))
+      ) {
+        await this.app.vault.create(this.genericPreviewCacheFile, "{}");
+      }
+      try {
+        const contents = JSON.parse(
+          await this.app.vault.adapter.read(this.genericPreviewCacheFile)
+        );
+        this.genericPreviewCache = contents;
+      } catch (e) {
+        console.error("Error reading generic preview cache file");
+        console.error(e);
+      }
+    };
+    this.cacheFileLoadPromise = loadCacheFile();
   }
 
   onunload() {
@@ -100,6 +133,19 @@ export default class SimpleEmbedsPlugin extends Plugin {
     });
   }
 
+  async saveGenericPreviewCache(
+    link: string,
+    metadata: GenericPreviewMetadata
+  ) {
+    if (this.genericPreviewCacheFile) {
+      this.genericPreviewCache[link] = metadata;
+      await this.app.vault.adapter.write(
+        this.genericPreviewCacheFile,
+        JSON.stringify(this.genericPreviewCache)
+      );
+    }
+  }
+
   private _getCurrentTheme(): "dark" | "light" {
     return document.body.classList.contains("theme-dark") ? "dark" : "light";
   }
@@ -117,7 +163,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
 
     const replaceWithEmbed = this.shouldReplaceWithEmbed(
       a.innerText,
-      isWithinText,
+      isWithinText
     );
     const fullWidth = a.innerText.includes("|fullwidth");
     // Remove any allowed properties:
@@ -141,9 +187,21 @@ export default class SimpleEmbedsPlugin extends Plugin {
         href,
         fullWidth,
         this.settings.centerEmbeds,
-        this.settings.keepLinksInPreview,
+        this.settings.keepLinksInPreview
       );
       this._insertEmbed(a, embed);
+    } else {
+      if (this.settings.replaceGenericLinks) {
+        // fall back to creating a generic embed
+        const embed = this.createEmbed(
+          this.genericPreviewEmbed,
+          href,
+          fullWidth,
+          this.settings.centerEmbeds,
+          this.settings.keepLinksInPreview
+        );
+        this._insertEmbed(a, embed);
+      }
     }
   }
 
@@ -162,7 +220,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
     link: string,
     fullWidth: boolean,
     centered: boolean,
-    keepLinks: boolean,
+    keepLinks: boolean
   ) {
     const container = document.createElement("div");
     container.classList.add("embed-container");
@@ -171,6 +229,7 @@ export default class SimpleEmbedsPlugin extends Plugin {
       container,
       this.settings,
       this.currentTheme,
+      this
     );
     if (fullWidth) {
       embed.classList.add("full-width");

package.json

@@ -26,5 +26,8 @@
     "ts-jest": "^27.0.7",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "link-preview-js": "^3.0.3"
   }
 }

settings-tab.ts

@@ -43,6 +43,39 @@ export class SimpleEmbedPluginSettingTab extends PluginSettingTab {
       });
     });
 
+    // Settings for generic link previews
+    containerEl.createEl("h3", { text: "Generic Link Previews" });
+
+    new Setting(containerEl)
+      .setName("Show generic previews for links")
+      .addToggle((toggle) => {
+        toggle
+          .setValue(this.plugin.settings.replaceGenericLinks)
+          .onChange(async (enabled) => {
+            await this.saveSettings({ replaceGenericLinks: enabled });
+          });
+      });
+    new Setting(containerEl)
+      .setName("Use a cache for link preview metadata")
+      .addToggle((toggle) => {
+        toggle
+          .setValue(this.plugin.settings.useCacheForGenericLinks)
+          .onChange(async (enabled) => {
+            await this.saveSettings({ useCacheForGenericLinks: enabled });
+          });
+      });
+    new Setting(containerEl)
+      .setName("Clear link preview metadata cache")
+      .addButton((button) => {
+        button
+          .setButtonText("Clear")
+          .onClick(async () => {
+            await this.app.vault.adapter.write(this.plugin.genericPreviewCacheFile, "{}");
+            this.plugin.genericPreviewCache = {};
+            await this.plugin.saveSettings({});
+          });
+      });
+
     // Any additional settings for embed sources.
     containerEl.createEl("h3", { text: "Appearance" });
 

settings.ts

@@ -12,6 +12,7 @@ export interface EnableEmbeds {
   replaceTwitterLinks: boolean;
   replaceVimeoLinks: boolean;
   replaceYouTubeLinks: boolean;
+  replaceGenericLinks: boolean;
 }
 export interface TwitterAppearanceSettings {
   twitterTheme: "auto" | "dark" | "light";
@@ -34,11 +35,25 @@ export interface AdvancedSettings {
   disableAutomaticEmbeds: boolean;
 }
 
+export interface GenericPreviewMetadata {
+  title: string;
+  description: string;
+  images: string[];
+}
+
+export interface GenericPreviewSettings {
+  useCacheForGenericLinks: boolean;
+  // genericPreviewCache: {
+  //   [url: string]: GenericPreviewMetadata;
+  // };
+}
+
 export interface PluginSettings
   extends EnableEmbeds,
     TwitterAppearanceSettings,
     CodePenAppearanceSettings,
     RedditAppearanceSettings,
+    GenericPreviewSettings,
     AdvancedSettings {}
 
 export const DEFAULT_SETTINGS: PluginSettings = {
@@ -56,6 +71,9 @@ export const DEFAULT_SETTINGS: PluginSettings = {
   replaceVimeoLinks: true,
   replaceYouTubeLinks: true,
 
+  replaceGenericLinks: false,
+  useCacheForGenericLinks: true,
+
   twitterTheme: "auto",
 
   codepenTheme: "auto",

styles.css

@@ -80,6 +80,41 @@
   left: calc(50% - 75px);
 }
 
+/* Generic Preview */
+.embed-container.generic-preview .preview {
+  text-decoration: none;
+  color: inherit;
+  background: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0.5rem 0;
+}
+.embed-container.generic-preview .preview:hover {
+  background: var(--background-secondary-alt);
+  cursor: pointer;
+}
+
+.embed-container.generic-preview .preview .image-container {
+  max-width: 100px;
+}
+
+.embed-container.generic-preview .preview .content {
+  margin: 0.5rem;
+  margin-left: 1rem;
+}
+
+.embed-container.generic-preview .preview .content .title {
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.embed-container.generic-preview .preview .content .description {
+  color: var(--text-muted);
+}
+
 /* Settings */
 .simple-embeds-settings details > summary {
   display: flex;