add link preview generation

Author: udbhav-s

embeds/generic-preview.ts

@@ -1,39 +1,44 @@
-import { Setting } from "obsidian";
+import { Setting, requestUrl } from "obsidian";
 import { PluginSettings } from "settings";
 import { EmbedSource, EnableEmbedKey } from "./";
-
-import got from "got";
-import metascraperModule from "metascraper";
-import metascraperTitleModule from "metascraper-title";
-import metascraperDescriptionModule from "metascraper-description";
-import metascraperImageModule from "metascraper-image";
-
-const metascraper = metascraperModule([
-  metascraperTitleModule(),
-  metascraperImageModule(),
-  metascraperDescriptionModule(),
-]);
+import { getPreviewFromContent } from "link-preview-js";
 
 export class GenericPreviewEmbed implements EmbedSource {
   name = "Generic Preview";
   enabledKey: EnableEmbedKey = "replaceGenericLinks";
-  // unmatchable regex
-  // this embed will be created as a fallback on all others failing to match
-  regex = new RegExp("(?!)");
+  regex = new RegExp("");
 
   createEmbed(
     link: string,
     container: HTMLElement,
     settings: Readonly<PluginSettings>,
     currentTheme: "light" | "dark",
   ) {
-    const preview = document.createElement("div");
-    preview.textContent = "Loading...";
+    const preview = document.createElement("a");
+    preview.setAttr("href", link);
+    preview.classList.add("preview");
+    preview.textContent = "Loading embed...";
 
     const loadPreview = async () => {
-      const { body: html, url } = await got(link);
-      const metadata = await metascraper({ html, url });
-      preview.innerHTML = `<h2>${metadata.title}</h2> <br> <p>${metadata.description}</p>`
+      const res = await requestUrl({ url: link });
+      const metadata = await getPreviewFromContent({
+        headers: res.headers,
+        data: res.text,
+        url: link
+      });
+
+      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>
+        `;
     }
     loadPreview();
 

manifest.json

@@ -1,6 +1,6 @@
 {
-  "id": "simple-embeds",
-  "name": "Simple Embeds",
+  "id": "simple-embeds-dev",
+  "name": "Simple Embeds Dev",
   "version": "1.12.0",
   "minAppVersion": "0.13.8",
   "description": "Replaces links, like Twitter and YouTube, with embeds when previewing a file.",

package.json

@@ -24,6 +24,7 @@
     "@codemirror/stream-parser": "https://github.com/lishid/stream-parser",
     "@codemirror/view": "^0.19.0",
     "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
     "@types/jest": "^27.0.2",
@@ -38,6 +39,7 @@
   },
   "dependencies": {
     "got": "^12.3.1",
+    "link-preview-js": "^3.0.3",
     "metascraper": "^5.30.2",
     "metascraper-description": "^5.30.2",
     "metascraper-image": "^5.30.2",

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;