feat: various social image improvements

# Why - There are some things I noticed after the review that we should clean up. - The ability to generate the image server-side is incredible. Folks can actually use this to link to the image from within documentation systems! # What - Expose the feature more prominently in the share dialog - Clean up the URL paths to make this easier to discover - Some cleanup
dash0hq · Dec 20, 2023 · c7cc550 · c7cc550
1 parent 2febc3c
commit c7cc550
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 65 deletions.
diff --git a/packages/otelbin/package-lock.json b/packages/otelbin/package-lock.json
diff --git a/packages/otelbin/package.json b/packages/otelbin/package.json
@@ -65,7 +65,6 @@
 		"@types/js-yaml": "^4.0.9",
 		"@types/lodash": "^4.14.201",
 		"@types/node": "^18.18.13",
-		"@types/prettier": "^3.0.0",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.17",
 		"@typescript-eslint/eslint-plugin": "^5.59.6",

diff --git a/...src/app/social-preview/[id]/img/route.tsx → ...ages/otelbin/src/app/s/[id]/img/route.tsx b/...src/app/social-preview/[id]/img/route.tsx → ...ages/otelbin/src/app/s/[id]/img/route.tsx
@@ -9,8 +9,9 @@ import { getShortLinkPersistenceKey } from "~/lib/shortLink";
 import type { IConfig } from "~/components/react-flow/dataType";
 import { editorBinding } from "~/components/monaco-editor/editorBinding";
 import JsYaml from "js-yaml";
-import { calcScale, toUrlState } from "../../metadataUtils";
-import Logo from "../../../../components/assets/svg/otelbin_logo_white.svg";
+import { calcScale, toUrlState } from "../metadataUtils";
+import Logo from "~/components/assets/svg/otelbin_logo_white.svg";
+import { notFound } from "next/navigation";
 
 export const runtime = "edge";
 
@@ -20,7 +21,7 @@ const edgeWidth = 80;
 export async function GET(request: NextRequest) {
 	const shortLinkId = request.nextUrl.searchParams.get("id") ?? "";
 	if (!shortLinkId) {
-		return new NextResponse("No short link ID found in the request", { status: 400 });
+		return notFound();
 	}
 	const fullLink = (await redis.get<string>(getShortLinkPersistenceKey(shortLinkId))) ?? "";
 	let url;
@@ -75,7 +76,7 @@ export async function GET(request: NextRequest) {
 		{
 			width: 1200,
 			height: 630,
-			headers: { "Cache-Control": "public, max-age=3600, stale-while-revalidate=3600, stale-if-error=3600" },
+			headers: { "Cache-Control": "public, max-age=3600, stale-while-revalidate=604800, stale-if-error=604800" },
 		}
 	);
 }
diff --git a/.../app/social-preview/metadataUtils.test.ts → ...lbin/src/app/s/[id]/metadataUtils.test.ts b/.../app/social-preview/metadataUtils.test.ts → ...lbin/src/app/s/[id]/metadataUtils.test.ts
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { describe, expect, it } from "@jest/globals";
-import { sortAndDeduplicate, extractComponents, calcScale, toUrlState } from "./metadataUtils";
+import { calcScale, extractComponents, sortAndDeduplicate, toUrlState } from "./metadataUtils";
 import type { IConfig } from "~/components/react-flow/dataType";
 import { type Node } from "reactflow";
-import { editorBinding } from "../../components/monaco-editor/editorBinding";
+import { editorBinding } from "../../../components/monaco-editor/editorBinding";
 
 describe("sortAndDeduplicate", () => {
 	it("should sort and deduplicate an array of strings and return a comma separated string of components", () => {

diff --git a/...n/src/app/social-preview/metadataUtils.ts → ...s/otelbin/src/app/s/[id]/metadataUtils.ts b/...n/src/app/social-preview/metadataUtils.ts → ...s/otelbin/src/app/s/[id]/metadataUtils.ts
@@ -4,7 +4,7 @@
 import type { IConfig } from "~/components/react-flow/dataType";
 import { type Node } from "reactflow";
 import type { Binding } from "~/lib/urlState/binding";
-import { parseUrlState } from "../../lib/urlState/parseUrlState";
+import { parseUrlState } from "../../../lib/urlState/parseUrlState";
 import type { Bindings } from "~/lib/urlState/typeMapping";
 
 export function sortAndDeduplicate(arr: string[]) {

diff --git a/...lbin/src/app/social-preview/[id]/page.tsx → ...s/otelbin/src/app/s/[id]/preview/page.tsx b/...lbin/src/app/social-preview/[id]/page.tsx → ...s/otelbin/src/app/s/[id]/preview/page.tsx
@@ -7,7 +7,7 @@ import type { IConfig } from "~/components/react-flow/dataType";
 import { getShortLinkPersistenceKey } from "~/lib/shortLink";
 import { editorBinding } from "~/components/monaco-editor/editorBinding";
 import JsYaml from "js-yaml";
-import { extractComponents, sortAndDeduplicate, toUrlState } from "../metadataUtils";
+import { extractComponents, sortAndDeduplicate, toUrlState } from "~/app/s/[id]/metadataUtils";
 import { notFound } from "next/navigation";
 
 interface ExtendedMetadata {
@@ -38,7 +38,7 @@ export async function generateMetadata({ params }: { params: { id: string } }):
 			return notFound();
 		}
 		const url = new URL(fullLink);
-		const imagesUrl = new URL(`/social-preview/${params.id}/img`, url.origin);
+		const imagesUrl = new URL(`/s/${params.id}/img`, url.origin);
 		const { config } = toUrlState(url, [editorBinding]);
 		const jsonData = JsYaml.load(config) as IConfig;
 		const components = extractComponents(jsonData);

diff --git a/packages/otelbin/src/app/s/[id]/route.ts b/packages/otelbin/src/app/s/[id]/route.ts
@@ -7,11 +7,7 @@ import { Redis } from "@upstash/redis";
 
 const redis = Redis.fromEnv();
 
-export async function GET(request: Request, { params }: { params: { id: string } }) {
+export async function GET(_: Request, { params }: { params: { id: string } }) {
 	const shortLink = await redis.get<string>(getShortLinkPersistenceKey(params.id));
-	return NextResponse.redirect(shortLink || "/", {
-		headers: {
-			"Cache-Control": "public, max-age=3600, stale-while-revalidate=3600, stale-if-error=3600",
-		},
-	});
+	return NextResponse.redirect(shortLink || "/");
 }
diff --git a/packages/otelbin/src/app/s/new/route.ts b/packages/otelbin/src/app/s/new/route.ts
@@ -5,7 +5,6 @@ import { Redis } from "@upstash/redis";
 import * as crypto from "crypto";
 import { Ratelimit } from "@upstash/ratelimit";
 import { type NextRequest, NextResponse } from "next/server";
-import * as process from "process";
 import { getShortLinkPersistenceKey } from "~/lib/shortLink";
 import { getUserIdentifier } from "~/lib/userIdentifier";
 
@@ -55,13 +54,14 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
 		);
 	}
 
-	const uuid = crypto.randomUUID();
-	await redis.set(getShortLinkPersistenceKey(uuid), longURL);
+	const id = crypto.createHash("sha1").update(longURL).digest("hex");
+	await redis.set(getShortLinkPersistenceKey(id), longURL);
 
-	const shortURL = `${process.env.DEPLOYMENT_ORIGIN}/s/${uuid}`;
+	const shortURL = new URL(`/s/${id}`, request.nextUrl.origin);
 	return NextResponse.json(
 		{
-			shortLink: shortURL,
+			shortLink: shortURL.href,
+			imgURL: `${shortURL.href}/img`,
 		},
 		{
 			headers: {

diff --git a/packages/otelbin/src/components/share/ShareContent.tsx b/packages/otelbin/src/components/share/ShareContent.tsx
@@ -21,7 +21,7 @@ export function ShareContent() {
 	let fullURL = window.location.origin + getLink({});
 	const { isSignedIn } = useAuth();
 
-	const { data } = useSWRImmutable<{ shortLink: string }>(
+	const { data } = useSWRImmutable<{ shortLink: string; imgURL: string }>(
 		isSignedIn
 			? {
 					url: `/s/new`,
@@ -47,28 +47,52 @@ export function ShareContent() {
 				</SignInButton>
 			)}
 
-			{isSignedIn && (
-				<div className="mt-3 border-t-1 border-subtle px-4 pt-3">
-					<p className="weight mb-2 text-sm font-normal text-default">Link to this configuration with a badge.</p>
+			{data?.shortLink && (
+				<>
+					<div className="mt-3 border-t-1 border-subtle px-4 pt-3">
+						<p className="weight mb-2 text-sm font-normal text-default flex items-center justify-between">
+							Link to this configuration with a badge.
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<IconButton size="xs" onClick={copyMarkdownToClipboard}>
+										<Copy />
+									</IconButton>
+								</TooltipTrigger>
+								<TooltipContent>Copy badge markdown to clipboard</TooltipContent>
+							</Tooltip>
+						</p>
 
-					<div className="flex gap-2 items-center">
 						<img
 							src="/badges/collector-config"
 							alt="OpenTelemetry collector configuration on OTelBin"
 							width={167}
 							height={20}
 							className="max-h-[20px] grow-0"
 						/>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<IconButton size="xs" onClick={copyToClipboard}>
-									<Copy />
-								</IconButton>
-							</TooltipTrigger>
-							<TooltipContent>Copy badge markdown to clipboard</TooltipContent>
-						</Tooltip>
 					</div>
-				</div>
+
+					<div className="mt-3 border-t-1 border-subtle px-4 pt-3">
+						<p className="weight mb-2 text-sm font-normal text-default flex items-center justify-between">
+							Link to an image of this visualization.
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<IconButton size="xs" onClick={copyImageUrlToClipboard}>
+										<Copy />
+									</IconButton>
+								</TooltipTrigger>
+								<TooltipContent>Copy image URL to clipboard</TooltipContent>
+							</Tooltip>
+						</p>
+
+						<img
+							src={data.imgURL}
+							width={280}
+							height={147}
+							alt="OpenTelemetry collector configuration on OTelBin"
+							className="grow-0"
+						/>
+					</div>
+				</>
 			)}
 
 			<div className="mt-4 border-t-1 border-subtle px-4 py-3">
@@ -87,12 +111,22 @@ export function ShareContent() {
 		</div>
 	);
 
-	function copyToClipboard() {
+	function copyMarkdownToClipboard() {
 		const text = `[![OpenTelemetry collector configuration on OTelBin](${
 			window.location.origin + "/badges/collector-config"
 		})](${fullURL})`;
+		copyToClipboard(text);
+		track("Copied badge markdown");
+	}
+
+	function copyImageUrlToClipboard() {
+		copyToClipboard(data?.imgURL ?? "");
+		track("Copied image URL");
+	}
+
+	function copyToClipboard(value: string) {
 		navigator.clipboard
-			.writeText(text)
+			.writeText(value)
 			.then(() => {
 				toast({
 					description: "Copied to clipboard.",
@@ -104,6 +138,5 @@ export function ShareContent() {
 					description: "Failed to copy to clipboard",
 				});
 			});
-		track("Copied badge markdown");
 	}
 }
diff --git a/packages/otelbin/src/middleware.ts b/packages/otelbin/src/middleware.ts
@@ -4,12 +4,11 @@
 import { authMiddleware } from "@clerk/nextjs";
 import { type NextRequest, NextResponse } from "next/server";
 import { isBotRequest } from "./lib/utils";
-import { notFound } from "next/navigation";
 
 export default authMiddleware({
 	apiRoutes: ["/s/new"],
-	publicRoutes: ["/s/:id"],
-	afterAuth(auth, request: NextRequest) {
+	publicRoutes: (req) => req.nextUrl.pathname !== "/s/new",
+	afterAuth(_, request: NextRequest) {
 		return handleShortLinkRequest(request);
 	},
 });
@@ -19,19 +18,11 @@ export const config = {
 };
 
 export async function handleShortLinkRequest(request: NextRequest) {
-	if (request.nextUrl.pathname.startsWith("/s") && !request.nextUrl.pathname.startsWith("/s/new")) {
-		const match = request.url.match(/\/s\/([^\/]+)$/);
-		const shortLink = match ? match[1] : "";
-
-		if (!shortLink) {
-			return notFound();
-		}
-
-		if (isBotRequest(request)) {
-			return NextResponse.rewrite(new URL(`/social-preview/${shortLink}`, request.url));
-		} else {
-			return NextResponse.next();
-		}
+	const shortLinkRegExp = /\/s\/([^/]+)$/;
+	const match = request.nextUrl.pathname.match(shortLinkRegExp);
+	if (match?.[1] && isBotRequest(request)) {
+		const shortLinkID = match[1];
+		return NextResponse.rewrite(new URL(`/s/${shortLinkID}/preview`, request.url));
 	} else {
 		return NextResponse.next();
 	}