feat: open graph validator (#110)

apps/dashboard/package.json

@@ -26,6 +26,7 @@
     "@vercel/speed-insights": "^1.0.10",
     "clsx": "^2.1.1",
     "fuse.js": "^7.0.0",
+    "htmlparser2": "^9.1.0",
     "next": "15.0.3",
     "next-themes": "^0.3.0",
     "oslo": "^1.2.1",

apps/dashboard/src/app/(splash)/login/page.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import Link from "next/link";
 import { GitHubIcon } from "../../../components/icons/GitHubIcon";
 import { GoogleIcon } from "../../../components/icons/GoogleIcon";
@@ -13,7 +13,9 @@ export default function Page() {
   return (
     <Flex align="center" direction="column" gap="6" justify="center" mx="9">
       <Flex align="center" direction="column" gap="2">
-        <Text size="5">Sign in</Text>
+        <Heading as="h1" size="5" weight="regular">
+          Sign in
+        </Heading>
         <Text align="center" as="p" size="2">
           Create an account to export your images to URLs <br /> and make them
           available in all your devices.

apps/dashboard/src/app/(splash)/templates/page.tsx

@@ -2,7 +2,7 @@ import { TemplatesSplash } from "../../../components/Splash/TemplatesSplash";
 
 export const metadata = {
   title: "Templates - OG Studio",
-  description: "Pre-made Open Graph image templates.",
+  description: "Free, pre-made Open Graph image templates.",
 };
 
 export const dynamic = "force-static";

apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx

@@ -0,0 +1,13 @@
+import { type Metadata } from "next";
+import { OpenGraphImageChecker } from "../../../../components/Splash/Tools/OpenGraphImageChecker";
+
+export const dynamic = "force-static";
+
+export const metadata: Metadata = {
+  title: "Open Graph Image Checker - OG Studio",
+  description: "Free tool to check Open Graph meta tags of any website.",
+};
+
+export default function Page() {
+  return <OpenGraphImageChecker />;
+}

apps/dashboard/src/app/layout.tsx

@@ -2,14 +2,16 @@ import { Inter } from "next/font/google";
 import { Toaster } from "sonner";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
+import { type Metadata } from "next";
 import { Providers } from "../components/Providers";
 import "./globals.css";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "OG Studio",
   description:
     "Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.",
   openGraph: {
+    siteName: "OG Studio",
     images:
       "https://github.com/QuiiBz/ogstudio/blob/main/assets/builder.jpeg?raw=true",
   },

apps/dashboard/src/app/sitemap.ts

@@ -41,5 +41,11 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "monthly",
       priority: 0.5,
     },
+    {
+      url: "https://ogstudio.app/tools/open-graph-image-checker",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
   ];
 }

apps/dashboard/src/components/ExportModal/Download.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading } from "@radix-ui/themes";
 import { useState } from "react";
 import { flushSync } from "react-dom";
 import { PngIcon } from "../icons/PngIcon";
@@ -57,7 +57,9 @@ export function Download({ dynamicTexts }: DownloadProps) {
 
   return (
     <Flex direction="column" gap="4">
-      <Text size="5">Download</Text>
+      <Heading as="h2" size="5" weight="regular">
+        Download
+      </Heading>
       <Flex gap="2" mt="2">
         <Button
           color="green"

apps/dashboard/src/components/ExportModal/ExportURL.tsx

@@ -2,13 +2,13 @@ import type { ReactNode } from "react";
 import { startTransition, useState } from "react";
 import Link from "next/link";
 import {
-  Text,
   Flex,
   Dialog,
   SegmentedControl,
   Code,
   Tooltip,
   IconButton,
+  Heading,
 } from "@radix-ui/themes";
 import { toast } from "sonner";
 import { useUser } from "../../lib/hooks/useUser";
@@ -78,7 +78,9 @@ export function ExportURL({ exportedKey, dynamicTexts }: ExportURLProps) {
   return (
     <Flex direction="column" gap="4" maxWidth="60%">
       <Flex align="center" justify="between">
-        <Text size="5">Export to URL</Text>
+        <Heading as="h2" size="5" weight="regular">
+          Export to URL
+        </Heading>
         <Flex align="center" gap="4">
           <Tooltip content="Copy">
             <IconButton color="gray" onClick={copy} size="2" variant="ghost">

apps/dashboard/src/components/ExportModal/Preview.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text, TextField } from "@radix-ui/themes";
+import { Flex, Heading, Text, TextField } from "@radix-ui/themes";
 import { startTransition } from "react";
 import { OgImage } from "../OgImage";
 import { useElementsStore } from "../../stores/elementsStore";
@@ -15,7 +15,9 @@ export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
 
   return (
     <Flex direction="column" gap="4">
-      <Text size="5">Live Preview</Text>
+      <Heading as="h2" size="5" weight="regular">
+        Live preview
+      </Heading>
       <Flex gap="6" justify="between" align="start" minHeight="353px">
         <Flex direction="column" gap="2">
           <PreviewControls />