Skip to content

Commit

Permalink
add view blog post page
Browse files Browse the repository at this point in the history
  • Loading branch information
@sajadevo
sajadevo committed Feb 8, 2025
1 parent 6d76597 commit 017fff4
Show file tree
Hide file tree
Showing 4 changed files with 349 additions and 15 deletions.
268 changes: 268 additions & 0 deletions app/api/og/blog/route.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
/* eslint-disable @next/next/no-img-element */
import { ImageResponse } from "next/og";

async function loadGoogleFont(font: string, text: string) {
const url = `https://fonts.googleapis.com/css2?family=${font}:wght@600&text=${encodeURIComponent(text)}`;
const css = await (await fetch(url)).text();
const resource = css.match(
/src: url\((.+)\) format\('(opentype|truetype)'\)/,
);

if (resource) {
const response = await fetch(resource[1]);
if (response.status == 200) {
return await response.arrayBuffer();
}
}

throw new Error("failed to load font data");
}

export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);

const title = searchParams.get("title");

return new ImageResponse(
(
<div tw="dark flex flex-col justify-between w-full h-full p-28 bg-[#f8f8f8]">
<div tw="bg-[#e7e7e7] absolute z-50 top-12 h-px w-[200%] flex" />
<div tw="bg-[#e7e7e7] absolute z-50 bottom-12 h-px w-[200%] flex" />
<div tw="bg-[#e7e7e7] absolute z-50 left-12 h-[200%] w-px flex" />
<div tw="bg-[#e7e7e7] absolute z-50 right-12 h-[200%] w-px flex" />

<div tw="flex w-[13px] h-[13px] border border-[#e7e7e7] bg-[#f8f8f8] z-50 rounded absolute left-[41.5px] top-[41.5px]" />
<div tw="flex w-[13px] h-[13px] border border-[#e7e7e7] bg-[#f8f8f8] z-50 rounded absolute right-[42px] top-[41.5px]" />
<div tw="flex w-[13px] h-[13px] border border-[#e7e7e7] bg-[#f8f8f8] z-50 rounded absolute left-[41.5px] bottom-[42px]" />
<div tw="flex w-[13px] h-[13px] border border-[#e7e7e7] bg-[#f8f8f8] z-50 rounded absolute right-[42px] bottom-[42px]" />

<div tw="flex w-20 h-20 rounded-full p-2 border-[#e7e7e7] border">
<svg
viewBox="0 0 90 90"
fill="none"
xmlns="http://www.w3.org/2000/svg"
// @ts-ignore
tw="w-full h-full rounded-full"
>
<g clipPath="url(#clip0_183_37)">
<mask
id="mask0_183_37"
style={{ maskType: "luminance" }}
maskUnits="userSpaceOnUse"
x={0}
y={0}
width={90}
height={90}
>
<path d="M0 0H90V90H0V0Z" fill="white" />
</mask>
<g mask="url(#mask0_183_37)">
<path d="M0 0H90V90H0V0Z" fill="#F8F8F8" />
<path
d="M71.6146 41.1992H64.5791"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.3838 70.2677L31.4999 76.5436C31.5093 76.5625 31.5206 76.5804 31.5338 76.5969L35.7364 81.882C35.7933 81.9536 35.8798 81.9953 35.9712 81.9953H38.8918C38.9785 81.9953 39.0609 82.0328 39.1179 82.0982L40.9208 84.1664C41.0794 84.3484 41.3771 84.278 41.4374 84.0442L42.1548 81.2643C42.189 81.1318 42.3085 81.0393 42.4453 81.0393H45.7795C45.7976 81.0393 45.816 81.0376 45.8337 81.0343C53.816 79.5707 56.7491 74.9359 56.9718 72.8789C56.9735 72.8628 56.9737 72.8474 56.9726 72.8312L56.6803 68.2317C56.6724 68.1081 56.7415 67.9932 56.8516 67.9364C60.3265 66.1418 61.952 59.9236 63.0335 56.7183C63.0391 56.7015 63.043 56.6857 63.0456 56.6682C63.433 54.0889 64.29 48.4313 64.6499 46.2267C65.0023 44.0681 65.1556 41.7905 65.0229 40.9565C65.0166 40.917 65.0169 40.8773 65.0252 40.8381L65.7269 37.5298C65.7394 37.4708 65.7339 37.4094 65.711 37.3536L65.0529 35.7499C65.0268 35.6863 65.0234 35.6157 65.0431 35.5498L65.7708 33.1241C65.7792 33.0962 65.7835 33.0671 65.7835 33.0379V29.8698V24.5131C65.7835 24.4087 65.7292 24.3118 65.6401 24.2572L59.5353 20.5196C59.5039 20.5004 59.4692 20.4871 59.433 20.4804L49.053 18.5695C49.0286 18.565 49.0038 18.5635 48.979 18.5651L40.2811 19.1361C40.2376 19.1389 40.1953 19.1512 40.1571 19.172L36.2487 21.3035C36.0993 21.385 36.0476 21.5742 36.1346 21.7204L39.6465 27.6148C39.7165 27.7323 39.6981 27.8823 39.6018 27.9795L32.9445 34.6975C32.9097 34.7326 32.8668 34.7586 32.8195 34.7731L25.664 36.9711C25.6017 36.9902 25.547 37.0289 25.5105 37.083C25.2098 37.5293 24.6354 38.5917 24.3467 39.8909C23.9613 41.6254 25.5032 44.709 26.4669 46.9575C27.1773 48.6153 28.8518 49.1636 29.7804 49.2562C29.9112 49.2692 30.0239 49.3511 30.0542 49.4789C30.9267 53.1697 29.7704 65.0224 28.9728 69.0213C28.9658 69.0567 28.9528 69.0877 28.9337 69.1183L28.3981 69.9753C28.3429 70.0637 28.3374 70.1744 28.3838 70.2677Z"
fill="#F8F8F8"
/>
<path
opacity="0.2"
d="M43.1323 70.3034L34.9795 58.5195C37.0355 60.2872 42.192 63.8051 45.8278 66.2289C49.4636 68.6528 54.5534 69.0021 56.6815 68.6054L44.1675 76.1156C43.4406 76.5519 42.5346 75.9425 42.6647 75.1047L43.2981 71.0257C43.3374 70.7726 43.278 70.514 43.1323 70.3034Z"
fill="#010101"
/>
<path
d="M60.1039 43.1916C60.1039 40.0106 61.6763 37.5293 65.1994 37.5293C70.0495 37.5293 71.143 39.5901 70.7469 42.4196C70.3507 45.2492 68.8296 48.7142 64.7651 48.7142C63.0813 48.7142 61.7819 48.2662 60.9057 47.1267M60.1039 43.1916C60.6065 46.8202 61.6233 48.0935 60.563 49.6479C59.4888 51.2227 56.373 50.7541 54.9316 50.6033M60.1039 43.1916L59.4909 40.6057"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M44.07 42.7423C42.9638 43.3856 42.8041 45.1745 43.7133 46.738C44.6224 48.3014 46.2562 49.0473 47.3624 48.404C48.8141 47.5599 49.4187 46.1672 48.5095 44.6038C47.6003 43.0403 45.1762 42.0991 44.07 42.7423Z"
fill="#FED1D0"
/>
<path
d="M55.3323 40.6274C55.0716 43.8831 53.321 47.1828 49.2566 47.1828C46.557 47.1828 43.5723 44.9243 43.5723 41.7433C43.5723 37.3967 44.8858 35.7109 49.2566 35.7109C53.6274 35.7109 55.5637 37.7376 55.3323 40.6274Z"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M55.3125 39.201C56.554 38.3372 59.5403 37.3047 60.6815 39.5459"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M43.9334 38.365L35.416 37.9863"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M34.4488 57.3635L33.0527 39.873H35.5669C35.4999 41.5655 35.2653 45.6443 36.0697 48.4198C36.7771 50.8601 40.0987 52.7035 41.9956 53.5118C42.4016 53.6848 42.6676 54.0915 42.6548 54.5326C42.38 64.0084 47.1438 64.3261 48.0262 64.4732C48.9313 64.624 51.6565 63.9563 54.4722 64.0066C56.7247 64.0468 58.7627 65.0624 59.5002 65.5652C59.0644 66.3027 57.3582 67.9485 54.0197 68.6323C50.6811 69.3161 46.8296 67.3418 45.3212 66.2692L35.7249 59.5867C34.9884 59.0739 34.5202 58.2582 34.4488 57.3635Z"
fill="#010101"
fillOpacity="0.1"
/>
<path
d="M27.651 36.1477C30.2648 35.8173 32.5009 38.3328 33.2922 39.6319L34.8905 39.8386C34.8905 38.514 35.3133 37.9503 35.8185 33.7892C36.1024 31.451 39.3716 28.6439 40.7459 28.2584C40.2766 27.8227 38.9962 26.3981 37.6286 24.1858C36.2609 21.9734 37.757 20.9578 38.5447 20.5891C41.7224 20.9913 43.0196 19.7846 43.271 19.131C46.0364 21.293 46.8298 22.1243 50.8522 21.0684C54.8746 20.0125 53.3159 20.1982 58.9975 23.8184C64.6791 27.4385 63.5308 24.706 64.7878 25.3094C65.7934 25.7921 65.8105 27.0451 65.9365 28.2185C66.0289 29.0787 66.071 31.3971 65.5007 33.7892C67.0709 31.8121 67.7399 29.6001 67.8782 28.7413C69.2581 27.3614 70.2453 25.7421 70.6797 24.5506C70.7752 24.2887 70.7301 24.0005 70.5833 23.7636L69.2549 21.6214C71.5879 16.3923 67.3443 13.0068 64.9309 11.9677C64.8471 12.4873 64.7878 13.6984 64.7878 13.6984C60.9163 13.6482 60.1037 9.60497 56.9863 9.25263C53.8689 8.90028 51.2544 7.84517 46.4778 7.0407C42.6565 6.39711 37.5448 8.48205 35.4665 9.60497L32.5 8.95149C32.4868 10.2433 32.0413 11.3723 31.3769 12.332C31.0549 12.7971 29.0707 11.6492 29.0707 11.6492C28.8439 11.8477 29.4848 14.3101 29.0707 14.6046C28.0937 15.2994 27.651 15.8925 26.8977 16.4505L27.651 17.8507C27.189 18.2863 26.2349 19.6505 26.1142 21.6214C25.9935 23.5924 27.0884 27.5046 27.651 29.2144V36.1477Z"
fill="#010101"
/>
<path
d="M27.6511 36.1477C30.2649 35.8173 32.501 38.3328 33.2923 39.6319L34.8906 39.8386C34.8906 38.514 35.3134 37.9503 35.8186 33.7892C36.1025 31.451 39.3717 28.6439 40.746 28.2584C40.2767 27.8227 38.9963 26.3981 37.6287 24.1858C36.261 21.9734 37.7571 20.9578 38.5448 20.5891C41.7225 20.9913 43.0197 19.7846 43.2711 19.131C46.0365 21.293 46.8299 22.1243 50.8523 21.0684C54.8747 20.0125 53.316 20.1982 58.9976 23.8184C64.6792 27.4385 63.5309 24.706 64.7879 25.3094C65.7935 25.7921 65.8106 27.0451 65.9366 28.2185C66.029 29.0787 66.0711 31.3971 65.5008 33.7892C67.071 31.8121 67.74 29.6001 67.8783 28.7413C69.2582 27.3614 70.2454 25.7421 70.6798 24.5506C70.7753 24.2887 70.7302 24.0005 70.5833 23.7636L69.255 21.6214C71.588 16.3923 67.3444 13.0068 64.931 11.9677C64.8472 12.4873 64.7879 13.6984 64.7879 13.6984C60.9164 13.6482 60.1038 9.60497 56.9864 9.25263C53.869 8.90028 51.2545 7.84517 46.4779 7.0407C42.6566 6.39711 37.5449 8.48205 35.4666 9.60497L32.5001 8.95149C32.4869 10.2433 32.0414 11.3723 31.377 12.332C31.055 12.7971 29.0708 11.6492 29.0708 11.6492C28.844 11.8477 29.4849 14.3101 29.0708 14.6046C28.0938 15.2994 27.6511 15.8925 26.8978 16.4505L27.6511 17.8507C27.1891 18.2863 26.235 19.6505 26.1143 21.6214C25.9936 23.5924 27.0885 27.5046 27.6511 29.2144V36.1477ZM27.6511 36.1477C26.1334 36.3336 23.3992 37.9725 24.6057 42.0351C26.1138 47.1134 26.8185 48.3704 29.1314 48.9737C31.4442 49.5771 32.1102 49.376 32.6007 48.9737"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.9697 40.6372L29.8722 45.2635"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M30.7659 42.0947L28.0078 43.3182"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M29.8364 49.2754C30.1719 50.7499 30.7279 60.6529 29.2373 69.7436"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M65.5339 37.5098L64.9307 35.498"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M43.0586 64.7605C46.9301 67.6767 50.2268 68.984 53.9475 68.6321C57.6682 68.2801 58.6239 66.6711 61.2385 61.2911C63.853 55.9112 63.252 55.73 64.0062 52.0592C64.6095 49.1226 64.9015 47.155 64.9684 45.8146L64.842 42.9688"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M51.1032 55.1156L50.1656 54.9121C49.9263 54.8602 49.6847 54.9891 49.5946 55.2168L49.5872 55.2354C49.5009 55.4537 49.5774 55.702 49.77 55.8361C50.7897 56.5462 52.2451 57.6411 53.0229 58.2314C53.3736 58.4975 53.8008 58.6423 54.2409 58.6423H56.6024C56.979 58.6423 57.3479 58.536 57.6667 58.3357L59.4662 57.2046C60.0385 56.8449 60.0965 56.0328 59.5811 55.5955L58.3617 54.5608C58.1057 54.3435 57.7459 54.2969 57.4429 54.4417C56.9438 54.6802 56.36 54.6617 55.877 54.392L55.565 54.2177C55.3335 54.0885 55.0601 54.0564 54.805 54.1286L51.3455 55.1081C51.2666 55.1304 51.1834 55.133 51.1032 55.1156Z"
fill="#FED1D0"
/>
<path
d="M48.8262 54.3712C49.4224 53.8062 50.2149 53.5098 51.0334 53.4417C52.6466 53.3075 53.5804 52.9214 54.7933 52.5408C55.047 52.4612 55.3221 52.4918 55.5552 52.6197L56.747 53.2738L57.4979 52.9357C57.8145 52.7931 58.1823 52.8249 58.4697 53.0198L60.7437 54.5618C60.9898 54.7286 61.1802 54.9654 61.2904 55.2416"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.2"
d="M56.4211 59.0078H54.0778C53.8448 59.0078 53.7007 59.2619 53.8203 59.4618L54.6403 60.8325C54.7372 60.9946 54.958 61.0278 55.0984 60.9015L56.6218 59.5308C56.8262 59.3469 56.6961 59.0078 56.4211 59.0078Z"
fill="#010101"
/>
<path
d="M56.7285 68.4238V73.0349"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M56.8902 69.6895C59.7567 72.0779 63.782 76.7007 58.4315 85.9578C55.866 85.2148 50.0116 84.1101 45.6379 81.0528M45.6379 81.0528C48.7515 80.5574 55.361 78.176 56.8901 72.6134M45.6379 81.0528L42.1877 80.7344L41.3584 84.2764"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M29.5084 66.2871C29.2669 66.4247 28.9732 66.6307 28.6453 66.9083M28.6453 66.9083C27.0755 68.2374 25.3193 70.9421 24.1604 75.8949L22.1582 82.7749L26.1372 83.9685C29.375 84.7647 32.4808 84.5997 35.8247 81.7335M28.6453 66.9083C28.5069 75.0056 33.3739 80.1656 35.8247 81.7335M35.8247 81.7335H38.4787C39.8587 82.9012 43.0434 86.1071 44.7419 89.589"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M44.5051 85.4615C45.1795 85.4615 45.7261 84.9148 45.7261 84.2405C45.7261 83.5662 45.1795 83.0195 44.5051 83.0195C43.8308 83.0195 43.2842 83.5662 43.2842 84.2405C43.2842 84.9148 43.8308 85.4615 44.5051 85.4615Z"
fill="#010101"
/>
<path
d="M24.0157 75.4141C16.1599 77.9974 1.30928 82.6099 -0.898438 83.1196M61.0783 76.1258C68.7038 79.8943 84.9477 87.503 90.3829 89.1166"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M34.2236 83.3105C35.4214 83.6158 38.1958 85.5591 39.7119 90.8906"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M61.0986 35.9668C62.7398 35.9671 65.6335 36.6225 66.0157 37.5723"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M53.5789 34.5686L50.0121 33.8535H47.3831C46.8276 33.8535 43.9715 34.222 43.1777 35.2425"
stroke="#010101"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M50.7908 38.4104C50.7908 37.4203 50.163 36.6177 49.3886 36.6177C48.6141 36.6177 47.9863 37.4203 47.9863 38.4104C47.9863 39.4005 48.6141 40.2031 49.3886 40.2031C50.163 40.2031 50.7908 39.4005 50.7908 38.4104Z"
fill="#010101"
/>
<path
d="M64.4412 40.2033C64.4412 39.2132 63.846 38.4106 63.1117 38.4106C62.3775 38.4106 61.7822 39.2132 61.7822 40.2033C61.7822 41.1934 62.3775 41.996 63.1117 41.996C63.846 41.996 64.4412 41.1934 64.4412 40.2033Z"
fill="#010101"
/>
</g>
</g>
<defs>
<clipPath id="clip0_183_37">
<rect width={90} height={90} fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div tw="text-6xl max-w-4xl leading-snug font-semibold text-[#010101]">
{title}
</div>
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: "Geist",
weight: 600,
data: await loadGoogleFont("Geist", title || ""),
style: "normal",
},
],
},
);
} catch (error: unknown) {
return new Response("Failed to generate OG image.", { status: 500 });
}
}
Loading

0 comments on commit 017fff4

Please sign in to comment.