feat: implemented the dev card OG image (#3903)

open-sauced · Aug 9, 2024 · 5047e1f · 5047e1f
1 parent 73ffd16
commit 5047e1f
Show file tree

Hide file tree

Showing 8 changed files with 424 additions and 27 deletions.
diff --git a/e2e/user-profile.spec.ts b/e2e/user-profile.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
-import playwrightConfig from "../playwright.config";
+import config from "../playwright.config";
 
-const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? playwrightConfig.use?.baseURL ?? "http://localhost:3000";
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? config.use?.baseURL ?? "http://localhost:3000";
 
 test("Loads user profile page", async ({ page }) => {
   await page.goto("/u/bdougie");
@@ -10,6 +10,13 @@ test("Loads user profile page", async ({ page }) => {
 
   await expect(page.getByRole("heading", { name: "bdougie", exact: true })).toBeVisible();
 
+  // Check for the OG image
+  const expectedUrl = `${config.use?.baseURL}/og-images/dev-card?username=bdougie`;
+
+  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute("content", expectedUrl);
+  await expect(page.locator('meta[name="twitter:image"]')).toHaveAttribute("content", expectedUrl);
+  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute("content", "summary_large_image");
+
   // Check for login button for viewing OSCR
   await page
     .getByRole("button", { name: "Log in to view  Open Source Contributor Rating (OSCR)", exact: true })
@@ -18,6 +25,19 @@ test("Loads user profile page", async ({ page }) => {
   await expect(page.url()).toContain("https://github.com/login");
 });
 
+test("Loads user dev card page", async ({ page }) => {
+  await page.goto("/u/bdougie/card");
+
+  expect(await page.title()).toBe("bdougie | OpenSauced");
+
+  // Check for the OG image
+  const expectedUrl = `${config.use?.baseURL}/og-images/dev-card?username=bdougie`;
+
+  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute("content", expectedUrl);
+  await expect(page.locator('meta[name="twitter:image"]')).toHaveAttribute("content", expectedUrl);
+  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute("content", "summary_large_image");
+});
+
 test("Redirects to user profile page", async ({ page }) => {
   await page.goto("/user/bdougie");
 

diff --git a/lib/utils/urls.ts b/lib/utils/urls.ts
@@ -29,9 +29,6 @@ export const isValidUrl = (url: string) => {
  */
 export const cardPageUrl = (username: string) => siteUrl(`user/${username}/card`);
 
-export const cardImageUrl = (username: string, opts: { size?: string } = {}) =>
-  siteUrl(`api/card`, { username, ...opts });
-
 export const twitterCardShareUrl = (username: string) => {
   const url = new URL("https://twitter.com/intent/tweet");
   url.searchParams.append("text", "Check out my open-source contributions card!");