add opengraph info

Author: YasInvolved

app/layout.tsx

@@ -27,7 +27,15 @@ const futuraPT = localFont({
 })
 
 export const metadata: Metadata = {
-  title: "DevSH Graphics Programming Sp. Z.O.O",
+  title: "DevSH Graphics Programming",
+  description: "The website of DevSH Graphics Programming",
+  metadataBase: new URL("http://localhost:3000"),
+  openGraph: {
+    type: "website",
+    title: "DevSH Graphics Programming",
+    description: "The website of DevSH Graphics Programming",
+    siteName: "DevSH Graphics Programming"
+  }
 };
 
 export const viewport: Viewport = {

app/opengraph-image.tsx

@@ -0,0 +1,49 @@
+import { ImageResponse } from "next/og";
+import { readFile } from "fs/promises";
+import { join } from "path";
+
+export const alt = "About DevSH";
+export const size = {
+    width: 256,
+    height: 235
+}
+
+export default async function OgImage() {
+    const futurapt = await readFile(
+        join(process.cwd(), 'app', 'fonts', 'FuturaPT', 'FuturaCyrillicMedium.ttf')
+    );
+
+    const logoData = await readFile(
+        join(process.cwd(), 'public', 'logo.png')
+    );
+
+    const logoSrc = `data:image/png;base64,${logoData.toString('base64')}`
+
+    return new ImageResponse(
+        (
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyItems: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+                background: '#000',
+                color: '#fff'
+            }}>
+                <img src={logoSrc} alt="DevSH Logo"/>
+            </div>
+        ),
+        {
+            ...size,
+            fonts: [
+                {
+                    name: 'FuturaPT',
+                    data: futurapt,
+                    style: 'normal',
+                    weight: 400
+                }
+            ]
+        }
+    )
+}

app/page.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import VulkanisedGallery from "./components/VulkanisedGallery";
 
 export default function Home() {
@@ -6,6 +7,7 @@ export default function Home() {
       <h1>Website Under Construction</h1>
       <h3>Check out our Vulkanised videos below</h3>
       <VulkanisedGallery/>
+      <h3>And <Link href="https://youtube.com/watch?v=L0i_cO1iSEM&t=9343" className="text-teal-300 hover:underline" target="_blank" rel="noopener noreferer">MINE GameDev video</Link></h3>
     </div>
   );
 }