Merge pull request #77 from GuiBibeau/chore/page-meta-and-form

chore: fix og image issue

packages/akeru-frontend/.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#lock files
+package-lock.json

packages/akeru-frontend/app/layout.tsx

@@ -13,19 +13,40 @@ const montserrat = Montserrat({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://akeru.ai"),
+  title: {
+    default: "AkeruAI",
+    template: "%s | Akeru AI",
+  },
+  description: "The best API to setup your AI Project",
+  openGraph: {
+    title: "AKeru AI",
+    description: "The best API to setup your AI Project",
+    url: "https://akeru.ai",
+    siteName: "Akeru AI",
+    locale: "en_US",
+    type: "website",
+  },
   robots: {
     index: true,
     follow: true,
-    "max-snippet": -1,
-    "max-video-preview": -1,
-    "max-image-preview": "large",
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
   },
-
-  keywords: "Open source AI, Decentralized AI, AI, Assistant AI",
   twitter: {
+    title: "Akeru AI",
     card: "summary_large_image",
   },
-  metadataBase: new URL("https://akeru.ai"),
+  verification: {
+    google: "google",
+    yandex: "yandex",
+    yahoo: "yahoo",
+  },
 };
 
 export default function RootLayout({
@@ -42,6 +63,7 @@ export default function RootLayout({
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/groove.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta property="og:image" content="https://akeru.ai/ogimage" />
         <title>Akeru</title>
         <meta name="description" content="AI for you" />
       </head>

packages/akeru-frontend/app/ogimage/route.tsx

@@ -0,0 +1,59 @@
+import { ImageResponse } from "next/og";
+import { NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = req.nextUrl;
+  const postTitle = searchParams.get("title");
+  const font = fetch(
+    new URL("../../public/fonts/kaisei-tokumin-bold.ttf", import.meta.url)
+  ).then((res) => res.arrayBuffer());
+  const fontData = await font;
+
+  return new ImageResponse(
+    (
+      <div style={{ backgroundColor: "black" }}>
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            justifyContent: "center",
+            backgroundImage: "url(https://akeru.ai/og-bg.png)",
+          }}
+        >
+          <div
+            style={{
+              marginLeft: 190,
+              marginRight: 190,
+              display: "flex",
+              fontSize: 130,
+              fontFamily: "Kaisei Tokumin",
+              letterSpacing: "-0.05em",
+              fontStyle: "normal",
+              color: "white",
+              lineHeight: "120px",
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {postTitle}
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      width: 1920,
+      height: 1080,
+      fonts: [
+        {
+          name: "Kaisei Tokumin",
+          data: fontData,
+          style: "normal",
+        },
+      ],
+    }
+  );
+}

packages/akeru-frontend/app/page.tsx

@@ -3,20 +3,9 @@ import HomeCard from "./components/ui/home-card/home-card";
 import HeroSection from "./components/sections/hero-section";
 import FormSection from "./components/sections/form-section";
 
-export const metadata: Metadata = {
-  title: "Akeru AI - Home",
+export const metadata = {
+  title: "AkeruAI - HOME",
   description: "The best API to setup your AI Project",
-  openGraph: {
-    url: "/",
-    type: "website",
-    locale: "en_US",
-    images: "/layout/og-image.png",
-    title: "Akeru AI - Home",
-    siteName: "The best API to setup your AI Project",
-  },
-  alternates: {
-    canonical: "/",
-  },
 };
 
 export default function Home() {

packages/akeru-frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@vercel/og": "^0.6.2",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18"