fix: bookmarks not showing up when request fails

We are simplifying the implementation to no longer guess the description
based on the contents of the page. Doing that does work when the page
has paragraphs but for customized layouts there are no grantees.
Defaulting to showing title and URL when no meta tags are present is
consistent with how Notion does it.

Closes: #555
\#555: Bookmarks not working when using multiple bookmarks

server/lib/notion/blocks/media/BlockBookmark/hooks/useMetadata.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+
+const metascraper = require("metascraper")([
+  require("metascraper-description")(),
+  require("metascraper-image")(),
+  require("metascraper-logo-favicon")(),
+  require("metascraper-title")(),
+  require("metascraper-url")(),
+]);
+
+export interface Metadata {
+  description: string;
+  title: string;
+  logo: string;
+  image: string;
+}
+
+export default async function useMetadata(url: string): Promise<Metadata> {
+  try {
+    let response = await axios.get(url);
+    return metascraper({ html: response.data, url: url });
+  } catch (error) {
+    return {
+      description: "",
+      title: new URL(url).hostname,
+      logo: "",
+      image: "",
+    };
+  }
+}

server/lib/notion/blocks/media/BlockBookmark/index.tsx

@@ -0,0 +1,30 @@
+import ReactDOMServer from "react-dom/server";
+
+import { GetBlockResponse } from "@notionhq/client/build/src/api-endpoints";
+import useMetadata from "./hooks/useMetadata";
+
+const BlockBookmark = async (
+  block: GetBlockResponse
+): Promise<string | null> => {
+  /* @ts-ignore */
+  const bookmark = block.bookmark;
+  const metadata = await useMetadata(bookmark.url);
+
+  return ReactDOMServer.renderToStaticMarkup(
+    <a style={{margin: "4px"}} href={bookmark.url} className="bookmark source">
+      <div className="bookmark-info">
+        <div className="bookmark-text">
+          {metadata.title && <div className="bookmark-title">{metadata.title}</div>}
+          {metadata.description && <div className="bookmark-description">{metadata.description}</div>}
+        </div>
+        <div className="bookmark-href">
+          {metadata.logo && <img src={metadata.logo} className="icon bookmark-icon" />}
+          {bookmark.url}
+        </div>
+      </div>
+      {metadata.image && <img src={metadata.image} className="bookmark-image" />}
+    </a>
+  );
+};
+
+export default BlockBookmark;