ability to view og image html

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "chrome-aws-lambda": "9.1.0",
+    "copy-to-clipboard": "^3.3.1",
     "marked": "2.0.3",
     "next": "10.2.0",
     "next-seo": "^4.24.0",

src/constants.ts

@@ -0,0 +1,2 @@
+export const OG_WIDTH = 2048;
+export const OG_HEIGHT = 1170;

src/hooks/useCopy.ts

@@ -0,0 +1,23 @@
+import { useRef, useState } from "react";
+import copy from "copy-to-clipboard";
+
+export const useCopy = (): [boolean, (text: string) => void] => {
+  const [showCopied, setShowCopied] = useState(false);
+  const timeoutRef = useRef<any>(null);
+
+  const copyText = (text: string) => {
+    copy(text);
+    setShowCopied(true);
+
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setShowCopied(false);
+      timeoutRef.current = null;
+    }, 1500);
+  };
+
+  return [showCopied, copyText];
+};

src/layouts/starterLayout.tsx

@@ -17,6 +17,7 @@ const getCSS: GetCSSFn = config => {
     justify-content: flex-end;
     background-color: ${colours.bg};
     color: ${colours.fg};
+    padding: 80px;
   }
 
     .rlogo {
@@ -32,6 +33,7 @@ const getCSS: GetCSSFn = config => {
     }
 
     h1 {
+      margin: 0;
       text-align: right;
       font-size: 1.5em;
       font-weight: 800;
@@ -41,14 +43,13 @@ const getCSS: GetCSSFn = config => {
     .dicon-wrapper {
       display: flex;
       justify-content: flex-end;
+      margin-bottom: 80px;
     }
 
     .dicon {
-      margin-left: auto;
       width: 300px;
       height: 300px;
       border-radius: 2px;
-      margin-bottom: 20px;
     }
 
     .em {

src/pages/api/_lib/chromium.ts

@@ -1,4 +1,5 @@
 import core from "puppeteer-core";
+import { OG_HEIGHT, OG_WIDTH } from "../../../constants";
 import { FileType } from "../../../types";
 import { getOptions } from "./options";
 let _page: core.Page | null;
@@ -19,7 +20,7 @@ export async function getScreenshot(
   isDev: boolean,
 ) {
   const page = await getPage(isDev);
-  await page.setViewport({ width: 2048, height: 1170 });
+  await page.setViewport({ width: OG_WIDTH, height: OG_HEIGHT });
   await page.setContent(html);
   const file = await page.screenshot({ type });
   return file;

src/pages/api/html.ts

@@ -0,0 +1,22 @@
+import { NextApiHandler } from "next";
+import { parseRequest } from "./_lib/parser";
+import { getHtml } from "./_lib/template";
+
+const handler: NextApiHandler = async (req, res) => {
+  try {
+    const config = parseRequest(req);
+    console.log("\n\n--- /api/image");
+    console.log("CONFIG", config);
+
+    const html = getHtml(config);
+    res.setHeader("Content-Type", "text/html");
+    res.end(html);
+  } catch (e) {
+    res.statusCode = 500;
+    res.setHeader("Content-Type", "text/html");
+    res.end("<h1>Internal Error</h1><p>Sorry, there was a problem</p>");
+    console.error(e);
+  }
+};
+
+export default handler;

src/pages/api/image.ts

@@ -4,7 +4,6 @@ import { parseRequest } from "./_lib/parser";
 import { getHtml } from "./_lib/template";
 
 const isDev = !process.env.RAILWAY_STATIC_URL;
-const isHtmlDebug = process.env.OG_HTML_DEBUG === "true";
 
 const handler: NextApiHandler = async (req, res) => {
   try {
@@ -13,11 +12,6 @@ const handler: NextApiHandler = async (req, res) => {
     console.log("CONFIG", config);
 
     const html = getHtml(config);
-    if (isHtmlDebug) {
-      res.setHeader("Content-Type", "text/html");
-      res.end(html);
-      return;
-    }
     const { fileType } = config;
     const file = await getScreenshot(html, fileType, isDev);
     res.statusCode = 200;

src/pages/index.tsx

@@ -1,14 +1,16 @@
 import { NextPage } from "next";
 import React, { useMemo } from "react";
-import "twin.macro";
 import { Field, Label } from "../components/Field";
 import { Layout } from "../components/Layout";
+import { Link } from "../components/Link";
 import { Select } from "../components/Select";
 import { useConfig } from "../hooks/useConfig";
 import { useIsMounted } from "../hooks/useIsMounted";
 import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { layouts } from "../layouts";
 import { FileType } from "../types";
+import tw from "twin.macro";
+import { useCopy } from "../hooks/useCopy";
 
 const Home: NextPage = () => {
   const isMounted = useIsMounted();
@@ -76,6 +78,7 @@ export const Config: React.FC = () => {
 export const Viewer: React.FC = () => {
   const [config] = useConfig();
   const [layoutConfig] = useLayoutConfig();
+  const [isCopied, copy] = useCopy();
 
   const query = useMemo(() => {
     const searchParams = new URLSearchParams();
@@ -89,17 +92,32 @@ export const Viewer: React.FC = () => {
   }, [config, layoutConfig]);
 
   const imageURL = useMemo(() => `/api/image?${query}`, [query]);
+  const htmlURL = useMemo(() => `/api/html?${query}`, [query]);
 
   return (
     <div tw="space-y-4 w-full col-span-2">
       <div className="image-wrapper">
         <img tw="shadow-lg w-full" src={imageURL} alt="" />
       </div>
 
-      <div tw="break-all text-gray-600 text-right max-w-lg ml-auto">
-        {window.location.origin}
-        {imageURL}
+      <div className="buttons" tw="flex space-x-2 justify-end">
+        <button
+          css={[buttonStyles]}
+          onClick={() => copy(`${window.location.origin}${imageURL}`)}
+        >
+          {isCopied ? "Copied!" : "Copy Image URL"}
+        </button>
+        <Link css={[buttonStyles]} href={htmlURL} external>
+          Open HTML Page
+        </Link>
       </div>
     </div>
   );
 };
+
+const buttonStyles = tw`
+  flex items-center justify-center
+  px-2 py-1 w-40 h-9 rounded text-base text-white bg-accent font-medium
+  hover:bg-pink-500
+  focus:outline-none focus:ring-2 focus:ring-pink-500
+`;

yarn.lock

@@ -848,6 +848,13 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2868,6 +2875,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"