feat: share image, metadata and icons that match the new site
The link preview used an old template with a blog description. The share image is now a screenshot of the real hero (scripts/render-share-image.mjs), served as Open Graph and Twitter image. Title and description come from one place and are used by the page, the previews and the structured data. Adds an apple touch icon and removes the old share-image template and its fonts. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -1,248 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface OGImageTemplateProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
label?: string;
|
||||
accentColor?: string;
|
||||
keyword?: string;
|
||||
}
|
||||
|
||||
export function OGImageTemplate({
|
||||
title,
|
||||
description,
|
||||
label,
|
||||
accentColor,
|
||||
keyword,
|
||||
}: OGImageTemplateProps) {
|
||||
const accent = accentColor || "#3b82f6";
|
||||
const slateDark = "#0f172a";
|
||||
const slateLight = "#64748b";
|
||||
|
||||
const containerStyle: React.CSSProperties = {
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#ffffff",
|
||||
padding: "80px",
|
||||
position: "relative",
|
||||
fontFamily: "Inter",
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={containerStyle}>
|
||||
{/* Background Grid Pattern */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundImage: `linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px)`,
|
||||
backgroundSize: "40px 40px",
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Accent geometric block (right side) */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "60px",
|
||||
right: "80px",
|
||||
width: "200px",
|
||||
height: "200px",
|
||||
borderRadius: "24px",
|
||||
border: `3px solid ${accent}`,
|
||||
opacity: 0.15,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
right: "120px",
|
||||
width: "160px",
|
||||
height: "160px",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: accent,
|
||||
opacity: 0.08,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
{/* Small accent circles */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "80px",
|
||||
right: "100px",
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: accent,
|
||||
opacity: 0.5,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "240px",
|
||||
right: "90px",
|
||||
width: "10px",
|
||||
height: "10px",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: accent,
|
||||
opacity: 0.3,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
zIndex: 10,
|
||||
maxWidth: "850px",
|
||||
}}
|
||||
>
|
||||
{/* Label / Category */}
|
||||
{label && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontWeight: 700,
|
||||
color: accent,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.2em",
|
||||
marginBottom: "24px",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: title.length > 40 ? "56px" : "72px",
|
||||
fontWeight: 700,
|
||||
color: slateDark,
|
||||
lineHeight: "1.1",
|
||||
marginBottom: "28px",
|
||||
display: "flex",
|
||||
letterSpacing: "-0.03em",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{description && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "26px",
|
||||
color: slateLight,
|
||||
lineHeight: "1.45",
|
||||
display: "flex",
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{description.length > 120
|
||||
? description.substring(0, 117) + "..."
|
||||
: description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Brand Footer */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "60px",
|
||||
left: "80px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "3px",
|
||||
backgroundColor: slateDark,
|
||||
borderRadius: "2px",
|
||||
marginRight: "16px",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
fontWeight: 700,
|
||||
color: slateDark,
|
||||
textTransform: "lowercase",
|
||||
letterSpacing: "0.05em",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
mintel.me
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keyword badge (bottom-right) */}
|
||||
{keyword && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "60px",
|
||||
right: "80px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "8px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "8px",
|
||||
height: "8px",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: accent,
|
||||
display: "flex",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontWeight: 700,
|
||||
color: "#94a3b8",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.15em",
|
||||
fontFamily: "ui-monospace, monospace",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
{keyword}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Accent Strip */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "5px",
|
||||
backgroundColor: accent,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,37 @@
|
||||
import { SITE_NAME, SITE_URL } from "@/src/content/site";
|
||||
import {
|
||||
OWNER,
|
||||
SITE_DESCRIPTION,
|
||||
SITE_NAME,
|
||||
SITE_URL,
|
||||
} from "@/src/content/site";
|
||||
|
||||
const STRUCTURED_DATA = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "ProfessionalService",
|
||||
name: SITE_NAME,
|
||||
url: SITE_URL,
|
||||
description:
|
||||
"Senior freelance developer for web apps, interfaces and websites: weekly capacity for product teams, making unreliable apps dependable, and websites built end to end.",
|
||||
founder: { "@type": "Person", name: SITE_NAME },
|
||||
description: SITE_DESCRIPTION,
|
||||
image: `${SITE_URL}/marc-mintel.png`,
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
streetAddress: OWNER.street,
|
||||
postalCode: OWNER.city.split(" ")[0],
|
||||
addressLocality: OWNER.city.split(" ").slice(1).join(" "),
|
||||
addressCountry: "DE",
|
||||
},
|
||||
founder: {
|
||||
"@type": "Person",
|
||||
name: SITE_NAME,
|
||||
jobTitle: "Freelance developer",
|
||||
url: SITE_URL,
|
||||
},
|
||||
knowsAbout: [
|
||||
"Web applications",
|
||||
"User interfaces",
|
||||
"Websites",
|
||||
"Process automation",
|
||||
"Web3 frontends",
|
||||
],
|
||||
} as const;
|
||||
|
||||
/** Serialized server-side from constants only; "<" is escaped to keep it inert inside a script tag. */
|
||||
|
||||
@@ -3,6 +3,12 @@ import { parseEmailParts, type EmailParts } from "@/src/domain/email";
|
||||
export const SITE_NAME = "Marc Mintel";
|
||||
export const SITE_URL = "https://mintel.me";
|
||||
|
||||
/** One wording for the browser title, search results and link previews. */
|
||||
export const SITE_TITLE =
|
||||
"Marc Mintel — Freelance developer for web apps and websites";
|
||||
export const SITE_DESCRIPTION =
|
||||
"Freelance developer with 15 years of experience. I build web apps, interfaces and websites, and automate processes between your systems.";
|
||||
|
||||
// The contact address, kept in parts on purpose: the complete address must never
|
||||
// appear as one string in the page source (see src/components/EmailLink.tsx).
|
||||
const parsedEmail = parseEmailParts({
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import { readFileSync } from "fs";
|
||||
import { join } from "path";
|
||||
|
||||
/**
|
||||
* Loads the Inter fonts for use in Satori (Next.js OG Image generation).
|
||||
* Since we are using runtime = 'nodejs', we can read them from the filesystem.
|
||||
*/
|
||||
export async function getOgFonts() {
|
||||
// Use relative path from process.cwd() which usually is the monorepo root or apps/web
|
||||
// We try both to be safe during different execution contexts (dev vs build vs runtime)
|
||||
const pathsToTry = [
|
||||
join(process.cwd(), "apps/web/public/fonts"),
|
||||
join(process.cwd(), "public/fonts"),
|
||||
];
|
||||
|
||||
let boldFontPath = "";
|
||||
let regularFontPath = "";
|
||||
|
||||
for (const basePath of pathsToTry) {
|
||||
const b = join(basePath, "Inter-Bold.woff");
|
||||
const r = join(basePath, "Inter-Regular.woff");
|
||||
try {
|
||||
if (readFileSync(b) && readFileSync(r)) {
|
||||
boldFontPath = b;
|
||||
regularFontPath = r;
|
||||
break;
|
||||
}
|
||||
} catch (_e) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (!boldFontPath || !regularFontPath) {
|
||||
console.error(
|
||||
`[OG] Could not find fonts in either ${pathsToTry.join(" or ")}`,
|
||||
);
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(
|
||||
`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`,
|
||||
);
|
||||
const boldFont = readFileSync(boldFontPath);
|
||||
const regularFont = readFileSync(regularFontPath);
|
||||
console.log(
|
||||
`[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
|
||||
);
|
||||
|
||||
return [
|
||||
{
|
||||
name: "Inter",
|
||||
data: boldFont,
|
||||
weight: 700 as const,
|
||||
style: "normal" as const,
|
||||
},
|
||||
{
|
||||
name: "Inter",
|
||||
data: regularFont,
|
||||
weight: 400 as const,
|
||||
style: "normal" as const,
|
||||
},
|
||||
];
|
||||
} catch (error) {
|
||||
console.error(`[OG] Failed to load fonts:`, error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Common configuration for OG images
|
||||
*/
|
||||
export const OG_IMAGE_SIZE = {
|
||||
width: 1200,
|
||||
height: 630,
|
||||
};
|
||||
Reference in New Issue
Block a user