add random color gradient

Author: nemanjam

docs/working-notes/my-old-code/open-graph/template-html.ts

@@ -0,0 +1,74 @@
+import { html } from 'satori-html';
+import colors from 'tailwindcss/colors';
+
+import { getRandomElementFromArray, limitString } from '@/utils/strings';
+
+export interface TemplateProps {
+  title: string;
+  heroImageUrl: string;
+  avatarImageUrl: string;
+  siteUrl: string;
+}
+
+const clrs = ['gray', 'indigo', 'yellow', 'blue', 'cyan', 'lime', 'sky'];
+const directions = ['to right', 'to bottom', '45deg'];
+const shades = [50, 100, 200];
+const rnd = getRandomElementFromArray;
+
+const getRandomGradient = () =>
+  `background: linear-gradient(${rnd(directions)}, ${colors[rnd(clrs)][rnd(shades)]}, ${colors[rnd(clrs)][rnd(shades)]})`;
+
+const gradients = [
+  `background: linear-gradient(to right, ${colors.gray[100]}, ${colors.gray[300]})`,
+  `background: linear-gradient(to right, ${colors.indigo[200]}, ${colors.yellow[100]})`,
+  `background: linear-gradient(to right, ${colors.blue[100]}, ${colors.blue[200]})`,
+  `background: linear-gradient(to right, ${colors.fuchsia[200]}, ${colors.cyan[200]})`,
+  `background: linear-gradient(to right, ${colors.teal[200]}, ${colors.lime[100]})`,
+  `background: linear-gradient(to right, ${colors.sky[200]}, ${colors.sky[100]})`,
+  `background: linear-gradient(to right, ${colors.sky[200]}, ${colors.cyan[100]})`,
+];
+
+const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: TemplateProps) => {
+  // 2 rows - max 30 chars
+  // 1 row - max 18 chars
+  const isLongSiteUrl = siteUrl.length > 17;
+
+  // max 6 rows x 10-15 chars
+  const limitedTitle = limitString(title, 70);
+
+  // const randomGradient = getRandomElementFromArray(gradients);
+  const randomGradient = getRandomGradient();
+
+  return html`
+    <div class="flex p-8 h-full" style="${randomGradient}">
+      <div class="flex w-full flex-row justify-between text-slate-900">
+        <!-- left column -->
+        <div class="w-[550px] flex flex-col justify-between mr-6">
+          <!-- title -->
+          <div class="flex flex-grow text-6xl font-semibold mb-4">${limitedTitle}</div>
+
+          <!-- avatar and site -->
+          <div class="flex items-center ${isLongSiteUrl ? 'flex-col justify-end items-start' : ''}">
+            <img
+              src=${avatarImageUrl}
+              alt="Nemanja Mitic"
+              width="120"
+              height="120"
+              class="rounded-full mr-8"
+            />
+            <div class="flex items-center ${isLongSiteUrl ? 'mt-4 text-3xl' : 'text-4xl'}">
+              <div>${siteUrl}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- right column -->
+        <div class="w-[550px] flex items-center">
+          <img src="${heroImageUrl}" class="h-full w-full rounded-md" style="object-fit: cover" />
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+export default templateHtml;

src/libs/api/open-graph/template-html.ts

@@ -1,5 +1,6 @@
 import { html } from 'satori-html';
 
+import { getRandomGradient } from '@/utils/gradients';
 import { limitString } from '@/utils/strings';
 
 export interface TemplateProps {
@@ -17,8 +18,10 @@ const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: Template
   // max 6 rows x 10-15 chars
   const limitedTitle = limitString(title, 70);
 
+  const randomGradient = getRandomGradient();
+
   return html`
-    <div class="flex p-8 h-full" style="background: linear-gradient(to right, #D1D5DB, #F3F4F6)">
+    <div class="flex p-8 h-full" style="${randomGradient}">
       <div class="flex w-full flex-row justify-between text-slate-900">
         <!-- left column -->
         <div class="w-[550px] flex flex-col justify-between mr-6">
@@ -32,7 +35,7 @@ const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: Template
               alt="Nemanja Mitic"
               width="120"
               height="120"
-              class="rounded-full mr-8"
+              class="rounded-full mr-8 border-2 border-gray-300"
             />
             <div class="flex items-center ${isLongSiteUrl ? 'mt-4 text-3xl' : 'text-4xl'}">
               <div>${siteUrl}</div>

src/utils/gradients.ts

@@ -0,0 +1,23 @@
+import { default as twColors } from 'tailwindcss/colors';
+
+import { getRandomElementFromArray as rnd } from '@/utils/strings';
+
+import type { DefaultColors } from 'tailwindcss/types/generated/colors';
+
+type ColorKeys = keyof DefaultColors;
+type ShadeKeys = keyof DefaultColors[ColorKeys];
+
+const colors = ['gray', 'indigo', 'yellow', 'blue', 'cyan', 'lime', 'sky', 'white'] as ColorKeys[];
+const shades = [50, 100, 200] as ShadeKeys[];
+const directions = ['to right', 'to bottom', '45deg'];
+
+// to support white
+const getRandomColor = () => {
+  const rndColor = rnd(colors);
+  return rndColor === 'white' ? rndColor : twColors[rndColor][rnd(shades)];
+};
+
+export const getRandomGradient = () =>
+  `background: linear-gradient(${rnd(directions)}, ${getRandomColor()}, ${getRandomColor()})`;
+
+export const grayGradient = `background: linear-gradient(to right, ${twColors.gray[100]}, ${twColors.gray[300]})`;

src/utils/strings.ts

@@ -8,6 +8,9 @@ export const getRandomLengthSubstring = (inputString: string, length: number, ma
 export const limitString = (str: string, maxLength: number) =>
   str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
 
+export const getRandomElementFromArray = <T>(arr: T[]): T =>
+  arr[Math.floor(Math.random() * arr.length)];
+
 export const trimHttpProtocol = (url: string) => {
   const trailingSlashRegex = /\/$/;
   const protocolRegex = /^(https?:\/\/)/i;