diff --git a/app/constituencies/[slug]/og.png/route.tsx b/app/constituencies/[slug]/og.png/route.tsx index c856ae9..ead6532 100644 --- a/app/constituencies/[slug]/og.png/route.tsx +++ b/app/constituencies/[slug]/og.png/route.tsx @@ -2,7 +2,6 @@ import { getConstituencyData, getConstituencySlugs, } from "@/utils/constituencyData"; -import { partyNameFromSlug } from "@/utils/Party"; import { ImageResponse, NextRequest } from "next/server"; import { promises as fs } from "fs"; @@ -52,91 +51,104 @@ export async function GET( */ const constituencyData: ConstituencyData = await getConstituencyData( params.slug, - false, ); const constituencyName = constituencyData.constituencyIdentifiers.name; - const partyName = partyNameFromSlug( - constituencyData.recommendation.partySlug, - ); - const partyColor = partyColorFromSlug( - constituencyData.recommendation.partySlug, - ); const rubikBoldFP = path.join( process.cwd(), "assets", "fonts", - "Rubik-ExtraBold.woff", + "Rubik-Bold.ttf", ); const baseImgFP = path.join( process.cwd(), "assets", - "share-base-image-crowd-with-logo.png", + "share-base-image-ge2024.jpeg", ); - const rubikBolderFontData = await fs.readFile(rubikBoldFP); - const baseImageData = (await fs.readFile(baseImgFP)).buffer; + const rubikBoldFontData = await fs.readFile(rubikBoldFP); + + //force the type to deal with TS errors caused by ImageResponse HTML processor + const baseImageData: string = (await fs.readFile(baseImgFP)) + .buffer as unknown as string; + + // Programatically calcuate the font size + // Between 8 char and 19 char it's single line and font is from + + let lineLen = constituencyName.length; + + if (lineLen > 19) { + const nameArr = constituencyName.split(/[ -]/); + const lineOne = []; + const lineTwo = []; + while (nameArr.length != 0) { + if (lineOne.join().length > lineTwo.join().length) { + lineTwo.push(nameArr.pop()); + } else { + lineOne.push(nameArr.shift()); + } + } + + if (lineTwo.join().length > lineOne.join().length) { + lineLen = lineTwo.join(" ").length; + } else { + lineLen = lineOne.join(" ").length; + } + } + + let fontSize = Math.floor(lineLen * -3 + 130); + + if (lineLen < 9) fontSize = 148; - console.log( - `CONSTITUENCY OPENGRAPH-IMAGE: Rendering image for ${params.slug}`, - ); return new ImageResponse( (
- {/* - // @ts-ignore*/} - - -
- {`Vote ${partyName} in ${constituencyName}`} -
+ />
- Find out your tactical vote now! +
+ {constituencyName} +
), @@ -146,35 +158,11 @@ export async function GET( fonts: [ { name: "Rubik", - data: rubikBolderFontData, + data: rubikBoldFontData, style: "normal", - weight: 800, + weight: 700, }, ], }, ); } - -// We can't use the normal partyColorFromSlug in /utils/Party.ts because -// ImageResponse doesn't have access to our CSS styles, so we need to -// hardcode specific color codes here. -const partyColorFromSlug = (slug: PartySlug): string => { - switch (slug) { - case "Con": - return "#0087dc"; - case "Lab": - return "#e4003b"; - case "LD": - return "#faa61a"; - case "Green": - return "#02a95b"; - case "SNP": - return "#fcec50"; - case "PC": - return "#005b54"; - case "Reform": - return "#12b6cf"; - default: - return "#e9ecef"; - } -}; diff --git a/app/constituencies/[slug]/page.tsx b/app/constituencies/[slug]/page.tsx index b278636..aa11b16 100644 --- a/app/constituencies/[slug]/page.tsx +++ b/app/constituencies/[slug]/page.tsx @@ -40,20 +40,17 @@ export async function generateMetadata({ }: { params: { slug: string }; }) { - console.log("Getting data for:", params.slug); - const constituencyData: ConstituencyData = await getConstituencyData( + const constituencyData: ConstituencyData = getConstituencyData( params.slug, ); const constituencyName = constituencyData.constituencyIdentifiers.name; - const partySlug = constituencyData.recommendation.partySlug; - const partyName = partyNameFromSlug(partySlug); return { title: `Stop The Toris in ${constituencyName}`, - description: `Vote ${partyName} in ${constituencyName} to Stop The Tories`, + description: `Vote tactically in ${constituencyName} to Stop The Tories`, openGraph: { title: "Stop The Tories .Vote", - description: `Vote ${partyName} in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, + description: `Vote tactically in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, url: "https://stopthetories.vote", siteName: "StopTheTories.Vote", locale: "en_GB", @@ -61,17 +58,17 @@ export async function generateMetadata({ images: [ { url: `/constituencies/${params.slug}/og.png`, - alt: `Vote ${partyName} in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, + alt: `Vote tactically in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, }, ], }, twitter: { card: "summary_large_image", title: "Stop The Tories .Vote", - description: `Vote ${partyName} in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, + description: `Vote tactically in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, images: { url: `/constituencies/${params.slug}/og.png`, - alt: `Vote ${partyName} in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, + alt: `Vote tactically in ${constituencyName} to Stop The Tories. Find out how you can vote tactically to Stop The Tories, and influence the next government.`, }, }, }; diff --git a/assets/fonts/Rubik-Bold.ttf b/assets/fonts/Rubik-Bold.ttf new file mode 100644 index 0000000..1a9693d Binary files /dev/null and b/assets/fonts/Rubik-Bold.ttf differ diff --git a/assets/share-base-image-ge2024.jpeg b/assets/share-base-image-ge2024.jpeg new file mode 100644 index 0000000..bf09de5 Binary files /dev/null and b/assets/share-base-image-ge2024.jpeg differ