Create Embeddings for Canvas

apps/web/app/(canvas)/lib/createEmbeds.ts

@@ -50,10 +50,18 @@ export default async function createEmbedsFromUrl({url, point, sources, editor}:
  type: "url",
  url,
  });
- const fetchWebsite = await (await fetch(`https://unfurl-bookmark.pruthvirajthinks.workers.dev/?url=${url}`)).json()
- if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
- if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
- if (fetchWebsite.description) bookmarkAsset.props.description = fetchWebsite.description;
+ const fetchWebsite: {
+ title?: string;
+ image?: string;
+ description?: string;
+ } = await (await fetch(`/api/unfirlsite?website=${url}`, {
+ method: "POST"
+ })).json()
+ if (bookmarkAsset){
+ if (fetchWebsite.title) bookmarkAsset.props.title = fetchWebsite.title;
+ if (fetchWebsite.image) bookmarkAsset.props.image = fetchWebsite.image;
+ if (fetchWebsite.description) bookmarkAsset.props.description = fetchWebsite.description;
+ }
  if (!bookmarkAsset) throw Error("Could not create an asset");
  asset = bookmarkAsset;
  } catch (e) {

apps/web/app/api/editorai/route.ts

@@ -0,0 +1,20 @@
+import type { NextRequest } from "next/server";
+import { ensureAuth } from "../ensureAuth";
+
+export const runtime = "edge";
+
+export async function POST(request: NextRequest) {
+ const d = await ensureAuth(request);
+ if (!d) {
+ return new Response("Unauthorized", { status: 401 });
+ }
+ const res : {context: string, request: string} = await request.json()
+
+ try {
+ const response = await fetch(`${process.env.BACKEND_BASE_URL}/api/editorai?context=${res.context}&request=${res.request}`);
+ const result = await response.json();
+ return new Response(JSON.stringify(result));
+ } catch (error) {
+ return new Response(`Error, ${error}`)
+ }
+}

apps/web/app/api/unfirlsite/route.ts

@@ -0,0 +1,134 @@
+import { load } from 'cheerio'
+import { AwsClient } from "aws4fetch";
+
+import type { NextRequest } from "next/server";
+import { ensureAuth } from "../ensureAuth";
+
+export const runtime = "edge";
+
+const r2 = new AwsClient({
+ accessKeyId: process.env.R2_ACCESS_KEY_ID,
+ secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
+});
+
+
+export async function POST(request: NextRequest) {
+
+ const d = await ensureAuth(request);
+ if (!d) {
+ return new Response("Unauthorized", { status: 401 });
+ }
+
+ if (
+ !process.env.R2_ACCESS_KEY_ID ||
+ !process.env.R2_ACCOUNT_ID ||
+ !process.env.R2_SECRET_ACCESS_KEY ||
+ !process.env.R2_BUCKET_NAME
+ ) {
+ return new Response(
+ "Missing one or more R2 env variables: R2_ENDPOINT, R2_ACCESS_ID, R2_SECRET_KEY, R2_BUCKET_NAME. To get them, go to the R2 console, create and paste keys in a `.dev.vars` file in the root of this project.",
+ { status: 500 },
+ );
+ }
+
+ const website = new URL(request.url).searchParams.get("website");
+
+ if (!website) {
+ return new Response("Missing website", { status: 400 });
+ }
+
+ const salt = () => Math.floor(Math.random() * 11);
+ const encodeWebsite = `${encodeURIComponent(website)}${salt()}`;
+
+ try {
+ // this returns the og image, description and title of website 
+ const response = await unfurl(website);
+
+ if (!response.image){
+ return new Response(JSON.stringify(response))
+ }
+
+ const imageUrl = await process.env.DEV_IMAGES.get(encodeWebsite)
+ if (imageUrl){
+ return new Response(JSON.stringify({
+ image: imageUrl,
+ title: response.title,
+ description: response.description,
+ }))
+ }
+
+ const res = await fetch(`${response.image}`)
+ const image = await res.blob();
+
+ const url = new URL(
+ `https://${process.env.R2_BUCKET_NAME}.${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`
+ );
+
+ url.pathname = encodeWebsite;
+ url.searchParams.set("X-Amz-Expires", "3600");
+
+ const signedPuturl = await r2.sign(
+ new Request(url, {
+ method: "PUT",
+ }),
+ {
+ aws: { signQuery: true },
+ }
+ );
+ await fetch(signedPuturl.url, {
+ method: 'PUT',
+ body: image,
+ });
+
+ await process.env.DEV_IMAGES.put(encodeWebsite, `${process.env.R2_PUBLIC_BUCKET_ADDRESS}/${encodeWebsite}`)
+
+ return new Response(JSON.stringify({
+ image: `${process.env.R2_PUBLIC_BUCKET_ADDRESS}/${encodeWebsite}`,
+ title: response.title,
+ description: response.description,
+ }));
+
+ } catch (error) {
+ console.log(error)
+ return new Response(JSON.stringify({
+ status: 500,
+ error: error,
+ }))
+ }
+ }
+
+export async function unfurl(url: string) {
+ const response = await fetch(url)
+ if (response.status >= 400) {
+ throw new Error(`Error fetching url: ${response.status}`)
+ }
+ const contentType = response.headers.get('content-type')
+ if (!contentType?.includes('text/html')) {
+ throw new Error(`Content-type not right: ${contentType}`)
+ }
+
+ const content = await response.text()
+ const $ = load(content)
+
+ const og: { [key: string]: string | undefined } = {}
+ const twitter: { [key: string]: string | undefined } = {}
+
+ // @ts-ignore, it just works so why care of type safety if someone has better way go ahead
+ $('meta[property^=og:]').each((_, el) => (og[$(el).attr('property')!] = $(el).attr('content')))
+ // @ts-ignore
+ $('meta[name^=twitter:]').each((_, el) => (twitter[$(el).attr('name')!] = $(el).attr('content')))
+
+ const title = og['og:title'] ?? twitter['twitter:title'] ?? $('title').text() ?? undefined
+ const description =
+ og['og:description'] ??
+ twitter['twitter:description'] ??
+ $('meta[name="description"]').attr('content') ??
+ undefined
+ const image = og['og:image:secure_url'] ?? og['og:image'] ?? twitter['twitter:image'] ?? undefined
+
+ return {
+ title,
+ description,
+ image,
+ }
+}

apps/web/cf-env.d.ts

@@ -5,8 +5,9 @@ declare global {
  GOOGLE_CLIENT_SECRET: string;
  AUTH_SECRET: string;
  R2_ENDPOINT: string;
- R2_ACCESS_ID: string;
- R2_SECRET_KEY: string;
+ R2_ACCESS_KEY_ID: string;
+ R2_SECRET_ACCESS_KEY: string;
+ R2_PUBLIC_BUCKET_ADDRESS: string;
  R2_BUCKET_NAME: string;
  BACKEND_SECURITY_KEY: string;
  BACKEND_BASE_URL: string;

package.json

@@ -65,6 +65,7 @@
  "@tldraw/assets": "^2.2.0",
  "@types/readline-sync": "^1.4.8",
  "ai": "^3.1.14",
+ "aws4fetch": "^1.0.18",
  "cheerio": "^1.0.0-rc.12",
  "compromise": "^14.13.0",
  "drizzle-orm": "^0.30.10",