The source code for our eny.social landing page, which is mirrored in a different repository as part of the CI setup. eny.social
social-network eny local-first
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(metadata): use static image for opengraph and twitter

+23 -94
+23 -1
app/layout.tsx
··· 1 1 import type { Metadata } from "next"; 2 - import { siteDescription, siteTitle } from "@/lib/site"; 2 + import { siteDescription, siteName, siteTitle } from "@/lib/site"; 3 3 import { Instrument_Serif, Instrument_Sans } from "next/font/google"; 4 4 import { Analytics } from "@vercel/analytics/next"; 5 5 import { SpeedInsights } from "@vercel/speed-insights/next"; ··· 27 27 : `https://${process.env.VERCEL_URL}` 28 28 : "http://localhost:3000"); 29 29 30 + const ogImage = "/opengraph.png"; 31 + 30 32 export const metadata: Metadata = { 31 33 metadataBase: new URL(siteUrl), 32 34 title: siteTitle, 33 35 description: siteDescription, 36 + openGraph: { 37 + type: "website", 38 + siteName, 39 + title: siteTitle, 40 + description: siteDescription, 41 + images: [ 42 + { 43 + url: ogImage, 44 + width: 1200, 45 + height: 630, 46 + alt: siteTitle, 47 + }, 48 + ], 49 + }, 50 + twitter: { 51 + card: "summary_large_image", 52 + title: siteTitle, 53 + description: siteDescription, 54 + images: [{ url: ogImage, alt: siteTitle }], 55 + }, 34 56 }; 35 57 36 58 export default function RootLayout({
-6
app/opengraph-image.tsx
··· 1 - export { 2 - default, 3 - alt, 4 - size, 5 - contentType, 6 - } from "../lib/social-share-image";
-6
app/twitter-image.tsx
··· 1 - export { 2 - default, 3 - alt, 4 - size, 5 - contentType, 6 - } from "../lib/social-share-image";
-81
lib/social-share-image.tsx
··· 1 - import { ImageResponse } from "next/og"; 2 - import { siteDescription, siteName, siteTagline, siteTitle } from "@/lib/site"; 3 - 4 - export const alt = siteTitle; 5 - 6 - export const size = { 7 - width: 1200, 8 - height: 630, 9 - }; 10 - 11 - export const contentType = "image/png"; 12 - 13 - export default async function Image() { 14 - return new ImageResponse( 15 - ( 16 - <div 17 - style={{ 18 - height: "100%", 19 - width: "100%", 20 - display: "flex", 21 - flexDirection: "column", 22 - alignItems: "flex-start", 23 - justifyContent: "center", 24 - padding: "72px 80px", 25 - background: 26 - "linear-gradient(135deg, #fef9f4 0%, #fbd1a2 42%, #7dcfb6 100%)", 27 - fontFamily: 28 - 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', 29 - }} 30 - > 31 - <div 32 - style={{ 33 - display: "flex", 34 - flexDirection: "column", 35 - alignItems: "flex-start", 36 - }} 37 - > 38 - <span 39 - style={{ 40 - fontSize: 56, 41 - fontWeight: 700, 42 - letterSpacing: -2, 43 - color: "#231f1c", 44 - lineHeight: 1.1, 45 - }} 46 - > 47 - {siteName} 48 - </span> 49 - <span 50 - style={{ 51 - marginTop: 24, 52 - fontSize: 36, 53 - fontWeight: 600, 54 - letterSpacing: -1, 55 - color: "#1d4e89", 56 - maxWidth: 900, 57 - lineHeight: 1.25, 58 - }} 59 - > 60 - {siteTagline} 61 - </span> 62 - <span 63 - style={{ 64 - marginTop: 32, 65 - fontSize: 22, 66 - fontWeight: 500, 67 - color: "#231f1c", 68 - opacity: 0.88, 69 - lineHeight: 1.4, 70 - }} 71 - > 72 - {siteDescription} 73 - </span> 74 - </div> 75 - </div> 76 - ), 77 - { 78 - ...size, 79 - } 80 - ); 81 - }
public/opengraph.png

This is a binary file and will not be displayed.