Add OpenGraph + Twitter card preview links (#74)

benvinegar · Apr 29, 2024 · 26b539d · 26b539d
1 parent 47b9c41
commit 26b539d
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git a/app/root.test.tsx b/app/root.test.tsx
@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { json } from "@remix-run/node";
+import { beforeAll, describe, expect, test, vitest } from "vitest";
+import "vitest-dom/extend-expect";
+import { render, waitFor, screen } from "@testing-library/react";
+import { createRemixStub } from "@remix-run/testing";
+
+import Root from "./root";
+
+describe("Root", () => {
+    beforeAll(() => {
+        // not sure what calls scrollTo, but it does get
+        // called in this test - and if we don't mock it this
+        // will throw an exception/warning
+
+        window.scrollTo = vitest.fn(() => {});
+    });
+
+    test("renders without crashing", async () => {
+        function loader() {
+            return json({
+                version: "ABC123",
+                origin: "http://example.com",
+                url: "http://example.com/path",
+            });
+        }
+
+        // note: this will render an <html> element into a <div>,
+        // which will trigger a warning in the console
+        //
+        // "Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>."
+
+        const RemixStub = createRemixStub([
+            {
+                path: "/",
+                Component: Root,
+                loader,
+            },
+        ]);
+
+        render(<RemixStub />);
+        // wait until the rows render in the document
+        await waitFor(() => screen.findByText("Version"));
+        expect(screen.getByText("ABC123")).toBeInTheDocument();
+    });
+});
diff --git a/app/root.tsx b/app/root.tsx
@@ -20,8 +20,13 @@ export const links: LinksFunction = () => [
     ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 ];
 
-export const loader = ({ context }: LoaderFunctionArgs) => {
-    return json({ version: context.env.VERSION });
+export const loader = ({ context, request }: LoaderFunctionArgs) => {
+    const url = new URL(request.url);
+    return json({
+        version: context.env.VERSION,
+        origin: url.origin,
+        url: request.url,
+    });
 };
 
 export default function App() {
@@ -36,6 +41,31 @@ export default function App() {
                     content="width=device-width, initial-scale=1"
                 />
                 <link rel="icon" type="image/x-icon" href="/favicon.png" />
+
+                <meta property="og:url" content={data.url} />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="Counterscale" />
+                <meta
+                    property="og:description"
+                    content="Scalable web analytics you run yourself on Cloudflare"
+                />
+                <meta
+                    property="og:image"
+                    content={data.origin + "/counterscale-og-large.webp"}
+                />
+
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta property="twitter:domain" content="counterscale.dev" />
+                <meta property="twitter:url" content={data.url} />
+                <meta name="twitter:title" content="Counterscale" />
+                <meta
+                    name="twitter:description"
+                    content="Scalable web analytics you run yourself on Cloudflare"
+                />
+                <meta
+                    name="twitter:image"
+                    content={data.origin + "/counterscale-og-large.webp"}
+                />
                 <Meta />
                 <Links />
             </head>

diff --git a/public/counterscale-og-large.webp b/public/counterscale-og-large.webp