Merge pull request #252 from framesjs/feat/custom-fonts-example

feat: custom fonts example

.changeset/grumpy-moose-beam.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: custom fonts example

examples/framesjs-starter/app/examples/new-api-custom-font/frames/edge/route.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "../frames";
+
+// without this line, this type of importing fonts doesn't work for some reason
+export const runtime = "edge";
+
+const interRegularFont = fetch(
+  new URL("/public/Inter-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+const interBoldFont = fetch(
+  new URL("/public/Inter-Bold.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+const firaScriptFont = fetch(
+  new URL("/public/FiraCodeiScript-Regular.ttf", import.meta.url)
+).then((res) => res.arrayBuffer());
+
+const handleRequest = frames(async (ctx) => {
+  const [interRegularFontData, interBoldFontData, firaScriptFontData] =
+    await Promise.all([interRegularFont, interBoldFont, firaScriptFont]);
+
+  return {
+    image: (
+      <span tw="flex flex-col">
+        <div>Edge functions example custom fonts</div>
+        <div style={{ marginTop: 40, fontWeight: 400 }}>Regular Inter Font</div>
+        <div style={{ marginTop: 40, fontWeight: 700 }}>Bold Inter Font</div>
+        <div
+          style={{
+            fontFamily: "'Fira Code', monospace",
+            marginTop: 40,
+          }}
+        >
+          Fira
+        </div>
+      </span>
+    ),
+    buttons: [
+      <Button action="post" target={"/nodejs"}>
+        Node.js
+      </Button>,
+    ],
+    imageOptions: {
+      fonts: [
+        {
+          name: "Inter",
+          data: interRegularFontData,
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: interBoldFontData,
+          weight: 700,
+        },
+        {
+          name: "Fira Code",
+          data: firaScriptFontData,
+          weight: 700,
+        },
+      ],
+    },
+  };
+});
+
+export const POST = handleRequest;

examples/framesjs-starter/app/examples/new-api-custom-font/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-custom-font/frames",
+});

examples/framesjs-starter/app/examples/new-api-custom-font/frames/nodejs/route.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import { frames } from "../frames";
+
+export const runtime = "nodejs";
+
+const interRegularFont = fs.readFile(
+  path.join(path.resolve(process.cwd(), "public"), "Inter-Regular.ttf")
+);
+
+const interBoldFont = fs.readFile(
+  path.join(path.resolve(process.cwd(), "public"), "Inter-Bold.ttf")
+);
+
+const firaScriptFont = fs.readFile(
+  path.join(
+    path.resolve(process.cwd(), "public"),
+    "FiraCodeiScript-Regular.ttf"
+  )
+);
+
+const handleRequest = frames(async (ctx) => {
+  const [interRegularFontData, interBoldFontData, firaScriptData] =
+    await Promise.all([interRegularFont, interBoldFont, firaScriptFont]);
+
+  return {
+    buttons: [
+      <Button target={"/edge"} action="post">
+        Edge Fn
+      </Button>,
+    ],
+    image: (
+      <span tw="flex flex-col">
+        <div>Node.js example custom fonts</div>
+        <div style={{ marginTop: 40, fontWeight: 400 }}>Regular Inter Font</div>
+        <div style={{ marginTop: 40, fontWeight: 700 }}>Bold Inter Font</div>
+        <div
+          style={{
+            fontFamily: "'Fira Code', monospace",
+            marginTop: 40,
+          }}
+        >
+          Fira
+        </div>
+      </span>
+    ),
+    imageOptions: {
+      fonts: [
+        {
+          name: "Inter",
+          data: interRegularFontData,
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: interBoldFontData,
+          weight: 700,
+        },
+        {
+          name: "Fira Code",
+          data: firaScriptData,
+          weight: 700,
+        },
+      ],
+    },
+  };
+});
+
+export const POST = handleRequest;

examples/framesjs-starter/app/examples/new-api-custom-font/frames/route.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-key */
+import { Button } from "frames.js/next";
+import { frames } from "./frames";
+
+const handler = frames(async (ctx) => {
+  return {
+    image: <div tw="flex">Custom fonts example</div>,
+    buttons: [
+      <Button action="post" target="/nodejs">
+        Node.js runtime
+      </Button>,
+      <Button action="post" target="/edge">
+        Edge function
+      </Button>,
+    ],
+  };
+});
+
+export const GET = handler;
+export const POST = handler;

examples/framesjs-starter/app/examples/new-api-custom-font/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { currentURL, vercelURL } from "../../utils";
+import { createDebugUrl } from "../../debug";
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: "New api example",
+    description: "This is a new api example",
+    other: {
+      ...(await fetchMetadata(
+        new URL(
+          "/examples/new-api-custom-font/frames",
+          vercelURL() || "http://localhost:3000"
+        )
+      )),
+    },
+  };
+}
+
+export default async function Home() {
+  const url = currentURL("/examples/new-api-custom-font");
+
+  return (
+    <div>
+      Custom font example{" "}
+      <Link href={createDebugUrl(url)} className="underline">
+        Debug
+      </Link>
+    </div>
+  );
+}