parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

openGraph image creator added

Browse Source
This commit is contained in:
parsa aghaei 2024-10-19 15:19:20 +03:30
parent bd1dbe42f9
commit 56a97b1ae5
6 changed files with 53 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/(routes)/(website)/layout.tsx
View File

@ -13,7 +13,8 @@ export const metadata: Metadata = {
template: "%s | parsa aghayi",
default: "parsa aghayi",
},
description: "parsa aghayi personal website",
description: "parsa aghayi's personal website",
images: ["/og-image?text=parsa aghayi's personal website"],
},
};

4
src/app/(routes)/(website)/page.tsx
View File

@ -13,9 +13,9 @@ export const metadata: Metadata = {
description:
"Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;)",
openGraph: {
title: "parsa aghayi's personal website openGraph title",
title: "parsa aghayi's personal website",
description:
"Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;) openGraph description",
"Hi, I am parsa aghayi. Frontend & Backend Developer and here is my personal website to know me and contact me if you want! ;)",
images: ["/images/profile.png"],
},
};

6
src/app/(routes)/blog/categories/page.tsx
View File

@ -13,6 +13,12 @@ export const metadata: Metadata = {
title: "All Categories List",
description:
"Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.",
openGraph: {
title: "All Categories List",
description:
"Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.",
images: ["/og-image?text=All Categories List"],
},
};
export default async function Categories({ searchParams }: categoryPropsType) {

9
src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
View File

@ -15,6 +15,7 @@ export const metadata: Metadata = {
openGraph: {
title: "",
description: "",
images: ["/og-image?text=filtered posts"],
},
};
@ -37,6 +38,9 @@ export default async function FilteredPosts({
? (metadata.openGraph.description =
"New Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.")
: "";
metadata.openGraph
? (metadata.openGraph.images = ["/og-image?text=All New Posts List"])
: [];
break;
case "popular":
filteredPostApiUrl = "/posts?sort_field=views&sort_direction=desc";
@ -50,6 +54,11 @@ export default async function FilteredPosts({
? (metadata.openGraph.description =
"Popular Browse through our collection of categories to find posts on your favorite topics. Whether you`re looking for insightful articles, how-tos, or the latest trends, our categories make it easy to discover content tailored to your interests.")
: "";
metadata.openGraph
? (metadata.openGraph.images = [
"/og-image?text=All Popular Posts List",
])
: [];
break;
default:
// code block

2
src/app/(routes)/blog/layout.tsx
View File

@ -14,7 +14,7 @@ export const metadata: Metadata = {
default: "parsa aghayi's blog",
},
description: "parsa aghayi personal blog",
images: ["/images/favicons/blog-icon.png"],
images: ["/og-image?text=parsa aghayi's personal blog"],
},
};

33
src/app/(routes)/og-image/route.tsx Normal file
View File

@ -0,0 +1,33 @@
import { ImageResponse } from "next/og";
export const runtime = "edge";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const text = searchParams.get("text") || "Hello world!";
return new ImageResponse(
(
<div
style={{
fontSize: 128,
background: "rgb(110 100 260)",
color: "white",
width: "100%",
height: "100%",
display: "flex",
textAlign: "center",
alignItems: "center",
justifyContent: "center",
textTransform: "capitalize",
}}
>
{text}
</div>
),
{
width: 1200,
height: 1200,
},
);
}