Skip to content

Commit

Permalink
Add OG Images
Browse files Browse the repository at this point in the history
  • Loading branch information
@noobnooc
noobnooc committed Mar 18, 2024
1 parent aeb672e commit e1f87c0
Show file tree
Hide file tree
Showing 11 changed files with 657 additions and 121 deletions.
31 changes: 7 additions & 24 deletions app/[lang]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,25 +45,6 @@ export async function generateMetadata({
};
}

const bottomNavItems = [
{
name: "主观世界",
link: "https://subnooc.com",
},
{
name: "趣物",
link: "https://quwu.io",
},
{
name: "AssisChat",
link: "https://assischat.com",
},
{
name: "Lofyee",
link: "https://lofyee.com",
},
];

export default async function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
Expand Down Expand Up @@ -130,11 +111,13 @@ export default async function RootLayout({
<div className="mx-auto flex w-full max-w-screen-lg flex-col justify-between gap-4 px-4 py-10 sm:flex-row">
<nav className="opacity-80">
<ul className="flex gap-4">
{bottomNavItems.map((item) => (
<li key={item.name}>
<a href={item.link}>{item.name}</a>
</li>
))}
{dictionary.works
.filter((work) => work.primary)
.map((item) => (
<li key={item.name}>
<a href={item.link}>{item.name}</a>
</li>
))}
</ul>
</nav>
<p className="opacity-60">© 2023 Nooc</p>
Expand Down
144 changes: 144 additions & 0 deletions app/[lang]/opengraph-image.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import { Language, getDictionary } from "@/dictionaries";
import { ImageResponse } from "next/og";

export const runtime = "edge";

export const alt = "Nooc's Homepage";
export const size = {
width: 1200,
height: 630,
};

export const contentType = "image/png";

// Image generation
export default async function OGImage({
params,
}: {
params: {
lang: Language;
};
}) {
const SHS = fetch(new URL("../../public/SHS.otf", import.meta.url)).then(
(res) => res.arrayBuffer(),
);

const dictionary = await getDictionary(params.lang);

return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="256"
height="256"
viewBox="0 0 256 256"
fill="none"
style={{
borderRadius: 64,
}}
xmlns="http://www.w3.org/2000/svg"
>
<rect width="256" height="256" fill="url(#paint0_linear_302_30)" />
<g filter="url(#filter0_i_302_30)">
<path
d="M127.68 34.5601C179.109 34.5601 220.8 76.2513 220.8 127.68C220.8 153.437 210.342 176.752 193.441 193.61L127.36 127.53L61.5996 193.29C44.8861 176.458 34.56 153.275 34.56 127.68C34.56 76.2513 76.2512 34.5601 127.68 34.5601Z"
fill="#FFCF43"
/>
</g>
<defs>
<filter
id="filter0_i_302_30"
x="34.56"
y="34.5601"
width="186.24"
height="159.05"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="37.5" />
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
/>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.968627 0 0 0 0 0.815686 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_302_30"
/>
</filter>
<linearGradient
id="paint0_linear_302_30"
x1="128"
y1="0"
x2="128"
y2="256"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3B82F6" stop-opacity="0.65" />
<stop offset="1" stop-color="#3B82F6" stop-opacity="0.85" />
</linearGradient>
</defs>
</svg>
<div
style={{
fontSize: 64,
marginTop: 64,
}}
>
{dictionary.meta.websiteName}
</div>
<div
style={{
fontSize: 48,
opacity: 0.5,
marginTop: 16,
}}
>
{dictionary.meta.motto}
</div>
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported opengraph-image
// size config to also set the ImageResponse's width and height.
...size,
fonts: [
{
name: "SHS",
data: await SHS,
},
],
},
);
}
28 changes: 0 additions & 28 deletions app/[lang]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,34 +183,6 @@ export default async function Home({
</Card>
))}
</div>

<Label className="mt-4">{dictionary.labels.friends}</Label>
<div className="grid grid-cols-2 gap-4 sm:gap-8 sm:col-span-2 sm:grid-cols-3">
{shuffleArray(dictionary.friendComments)
.slice(0, 6)
.map((comment) => (
<Card
key={comment.name}
className={twMerge(
"flex aspect-square flex-col justify-between sm:aspect-video",
`bg-${comment.color}-300/10 dark:bg-${comment.color}-400/10`,
)}
link={comment.link}
>
<div className="flex justify-between gap-2">
<Title className={`text-${comment.color}-500`}>
{comment.name}
</Title>
<Image
className="h-8 w-8 rounded-full sm:h-12 sm:w-12"
src={comment.avatar}
alt={comment.name}
/>
</div>
<Subtitle className="mt-4 text-sm">{comment.comment}</Subtitle>
</Card>
))}
</div>
</main>
);
}
145 changes: 145 additions & 0 deletions app/[lang]/posts/[...slug]/opengraph-image.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import { Language, getDictionary } from "@/dictionaries";
import { ImageResponse } from "next/og";

export const runtime = "edge";

export const alt = "Nooc's Post";
export const size = {
width: 1200,
height: 630,
};

export const contentType = "image/png";

// Image generation
export default async function OGImage({
params,
}: {
params: {
lang: Language;
};
}) {
const SHS = fetch(
new URL("../../../../public/SHS.otf", import.meta.url),
).then((res) => res.arrayBuffer());

const dictionary = await getDictionary(params.lang);

return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
padding: 64,
}}
>
<svg
width="256"
height="256"
viewBox="0 0 256 256"
fill="none"
style={{
borderRadius: 64,
alignSelf: "center",
}}
xmlns="http://www.w3.org/2000/svg"
>
<rect width="256" height="256" fill="url(#paint0_linear_302_30)" />
<g filter="url(#filter0_i_302_30)">
<path
d="M127.68 34.5601C179.109 34.5601 220.8 76.2513 220.8 127.68C220.8 153.437 210.342 176.752 193.441 193.61L127.36 127.53L61.5996 193.29C44.8861 176.458 34.56 153.275 34.56 127.68C34.56 76.2513 76.2512 34.5601 127.68 34.5601Z"
fill="#FFCF43"
/>
</g>
<defs>
<filter
id="filter0_i_302_30"
x="34.56"
y="34.5601"
width="186.24"
height="159.05"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="37.5" />
<feComposite
in2="hardAlpha"
operator="arithmetic"
k2="-1"
k3="1"
/>
<feColorMatrix
type="matrix"
values="0 0 0 0 1 0 0 0 0 0.968627 0 0 0 0 0.815686 0 0 0 1 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect1_innerShadow_302_30"
/>
</filter>
<linearGradient
id="paint0_linear_302_30"
x1="128"
y1="0"
x2="128"
y2="256"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3B82F6" stop-opacity="0.65" />
<stop offset="1" stop-color="#3B82F6" stop-opacity="0.85" />
</linearGradient>
</defs>
</svg>
<div
style={{
fontSize: 64,
marginTop: 64,
}}
>
{dictionary.meta.websiteName}
</div>
<div
style={{
fontSize: 48,
opacity: 0.5,
marginTop: 16,
}}
>
{dictionary.meta.motto}
</div>
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported opengraph-image
// size config to also set the ImageResponse's width and height.
...size,
fonts: [
{
name: "SHS",
data: await SHS,
},
],
},
);
}
1 change: 1 addition & 0 deletions app/[lang]/posts/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export default async function PostPage({
"prose-h1:text-xl",
"prose-h2:text-lg",
"prose-blockquote:font-normal",
"prose-pre:border prose-pre:rounded-xl",
"before:prose-p:content-none after:prose-p:content-none",
)}
dangerouslySetInnerHTML={{ __html: post.content }}
Expand Down
Loading

0 comments on commit e1f87c0

Please sign in to comment.