Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,4 @@ dist-ssr
*.sw?

.env
.vercel
61 changes: 61 additions & 0 deletions api/og/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck

import type { VercelRequest } from '@vercel/node';
import { ImageResponse } from '@vercel/og';
import { getEnvOrThrow, htmlDocBuilder } from './util';

export const config = {
runtime: 'edge'
};

const metaTags = {
site: `<meta name="twitter:site" content="@afor_digital" />`,
creator: `<meta name="twitter:creator" content="@afor_digital" />`,
url: `<meta property="og:url" content="https://${getEnvOrThrow('VERCEL_PROJECT_PRODUCTION_URL')}" />`,
title: `<meta property="og:title" content="Hackafor 2024 - Ticket" />`,
image: ({ url }) => `<meta name="og:image" content="${url}" />`,
description: `<meta property="og:description" content="Mensaje troncho" />`,
twitter_card: `<meta name="twitter:card" content="summary_large_image" />`,
twitter_domain: `<meta property="twitter:domain" content="https://${getEnvOrThrow('VERCEL_PROJECT_PRODUCTION_URL')}" />`,
twitter_url: ({ ticketId }) =>
`<meta property="twitter:url" content="https://${getEnvOrThrow('VERCEL_PROJECT_PRODUCTION_URL')}/api/og?id=${ticketId}" />`,
twitter_title: `<meta name="twitter:title" content="Hackafor 2024 - Ticket" />`,
twitter_description: `<meta name="twitter:description" content="Mensaje troncho" />`,
twitter_image: ({ url }) => `<meta name="twitter:image" content="${url}" />`
};

export default function handler(request: VercelRequest) {
console.log('here!!!!!!')
const searchParams = new URL(request.url!).searchParams;
const ticketId = searchParams.get('id');
if (!ticketId) {
//TODO: display nice error html
return new ImageResponse(<>Visit with &quot;?id={'<tu_ticket_id>'}&quot;</>, {
width: 1200,
height: 630
});
}

const urlToImage = `https://zokfnpputuhdqcjsnatq.supabase.co/storage/v1/object/public/hackafor2/public/ticket-${ticketId}.png`;

return new Response(
htmlDocBuilder(
Object.keys(metaTags)
.map((key) => {
if (typeof metaTags[key] === 'function') {
return metaTags[key]({ url: urlToImage, ticketId });
}
return metaTags[key];
})
.join('\n'),
'https://hackafor-2.vercel.app'
), // todo: replace via env variable
{
status: 200,
headers: {
'Content-Type': 'text/html'
}
}
);
}
24 changes: 24 additions & 0 deletions api/og/util.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export function htmlDocBuilder(tags: string, destination: string) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
${tags}
<meta http-equiv="refresh" content="5;url=${destination}">
<title>Redirecting...</title>
</head>
<body>
<h1>Redirecting in 5 seconds...</h1>
</body>
</html>`;
}

export function getEnvOrThrow(key: string): string {
console.log({ env: process.env });
if(!process.env[key]) {
throw new Error(`Missing env variable: ${key}`);
}
return process.env[key]!;
}
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@
"@supabase/auth-ui-shared": "^0.1.8",
"@supabase/supabase-js": "^2.41.1",
"@unocss/reset": "^0.56.5",
"@vercel/node": "^3.0.25",
"@vercel/og": "^0.6.2",
"atropos": "^2.0.2",
"clsx": "^2.1.0",
"dotenv": "^16.4.5",
"express": "^4.19.2",
"html-to-image": "^1.11.11",
"lodash.throttle": "^4.1.1",
Expand Down Expand Up @@ -59,6 +62,7 @@
"lint-staged": "^15.2.0",
"typescript": "^5.3.2",
"unocss": "^0.56.5",
"vite": "^4.4.5"
"vite": "^4.4.5",
"vite-plugin-vercel": "^5.0.2"
}
}
Loading