From 84879da8d47536084af60062901b88eee77400f1 Mon Sep 17 00:00:00 2001 From: nemanjam Date: Sat, 13 Jul 2024 11:33:28 +0200 Subject: [PATCH] responsive og html template, siteUrl and title --- src/libs/api/open-graph/template-html.ts | 61 ++++++++++++++---------- src/utils/strings.ts | 4 ++ 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/libs/api/open-graph/template-html.ts b/src/libs/api/open-graph/template-html.ts index e19ffb9..4f8d7f3 100644 --- a/src/libs/api/open-graph/template-html.ts +++ b/src/libs/api/open-graph/template-html.ts @@ -1,5 +1,7 @@ import { html } from 'satori-html'; +import { limitString } from '@/utils/strings'; + export interface TemplateProps { title: string; heroImageUrl: string; @@ -7,35 +9,44 @@ export interface TemplateProps { siteUrl: string; } -const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: TemplateProps) => html` -
-
- -
- -
${title}
- - -
- Nemanja Mitic -
-
${siteUrl}
+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); + + return html` +
+
+ +
+ +
${limitedTitle}
+ + +
+ Nemanja Mitic +
+
${siteUrl}
+
-
- -
- + +
+ +
-
-`; + `; +}; export default templateHtml; diff --git a/src/utils/strings.ts b/src/utils/strings.ts index 7e3a522..ff367b5 100644 --- a/src/utils/strings.ts +++ b/src/utils/strings.ts @@ -4,6 +4,10 @@ export const getRandomInt = (max: number, min = 0) => export const getRandomLengthSubstring = (inputString: string, length: number, margin = 0) => inputString.substring(0, length + getRandomInt(margin)); +/** for satori og template */ +export const limitString = (str: string, maxLength: number) => + str.length > maxLength ? str.slice(0, maxLength) + '...' : str; + export const trimHttpProtocol = (url: string) => { const trailingSlashRegex = /\/$/; const protocolRegex = /^(https?:\/\/)/i;