refactor(template): revise color template blur (#35)

Author: agustinusnathaniel

src/lib/components/image-templates/ColorTemplate.tsx

@@ -6,16 +6,25 @@ import type { OgImageOption } from "lib/types/ogImageOption";
 
 type ColorTemplateProps = Omit<OgImageOption, "template">;
 
-const ColorTemplate = ({ heading, text, center }: ColorTemplateProps) => {
+const ColorTemplate = ({
+  heading,
+  text,
+  center,
+  width,
+  height,
+}: ColorTemplateProps) => {
+  const aHeight = height ?? 0;
+  const aWidth = width ?? 0;
+  const blurSize = (aWidth < aHeight ? aWidth : aHeight) / 3.2;
+
   return (
     <div tw="w-screen h-screen flex flex-col justify-center bg-gray-900">
       <div
         style={{
           position: "absolute",
-          height: "150%",
-          width: "150%",
-          transform: "translate(-50%)",
-          filter: "blur(200px) saturate(150%)",
+          height: `${aHeight.toString()}px`,
+          width: `${aWidth.toString()}px`,
+          filter: `blur(${blurSize}px) saturate(150%)`,
           backgroundImage: `linear-gradient(45deg, #f97316, #06b6d4)`,
         }}
       />

src/lib/components/image-templates/TemplateWrapper.tsx

@@ -13,12 +13,14 @@ const TemplateSwitcher = ({
   text,
   template,
   center,
+  width,
+  height,
 }: TemplateSwitcherProps) => {
   if (template === PLAIN_TEMPLATE) {
-    return <BaseTemplate {...{ heading, text }} />;
+    return <BaseTemplate {...{ heading, text, width, height }} />;
   }
 
-  return <ColorTemplate {...{ heading, text, center }} />;
+  return <ColorTemplate {...{ heading, text, center, width, height }} />;
 };
 
 export default TemplateSwitcher;

src/lib/types/ogImageOption.ts

@@ -3,8 +3,10 @@ export type OgImageOption = {
   text?: string;
   template?: string;
   center?: boolean;
+  width?: number;
+  height?: number;
 };
 
-export type OgImageOptionConverted = Omit<OgImageOption, "center"> & {
-  center?: string;
+export type OgImageOptionConverted = {
+  [key in keyof OgImageOption]?: string;
 };

src/lib/utils/buildOgImageUrl.ts

@@ -10,6 +10,8 @@ export const buildOgImageUrl = (options: OgImageOption) => {
   const converted: OgImageOptionConverted = {
     ...options,
     center: options.center ? String(options.center) : undefined,
+    width: options.width?.toString(),
+    height: options.height?.toString(),
   };
   const purgedOptions = pickBy(converted);
   const urlParams = new URLSearchParams(purgedOptions).toString();

src/pages/api/generate.tsx

@@ -20,7 +20,7 @@ export default async function handler(req: NextRequest) {
   const center = Boolean(searchParams.get("center"));
   const width = Number(searchParams.get("width") ?? 1200);
   const height = Number(searchParams.get("height") ?? 630);
-  const templateProps = { heading, text, template, center };
+  const templateProps = { heading, text, template, center, width, height };
 
   return new ImageResponse(<TemplateSwitcher {...templateProps} />, {
     width,