add metadata & viewport to the config

Took 11 minutes

config.json.example

@@ -1,4 +1,27 @@
 {
+  "siteName": "Pulse App",
+  "metadata": {
+    "title": {
+      "default": "Pulse Docs",
+      "template": "Pulse Docs"
+    },
+    "description": "A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!",
+    "openGraph": {
+      "images": [
+        {
+          "url": "https://pulseapp.cc/media/logo.png",
+          "width": 128,
+          "height": 128
+        }
+      ]
+    },
+    "twitter": {
+      "card": "summary"
+    }
+  },
+  "viewport": {
+    "themeColor": "#A855F7"
+  },
   "contentSource": "{process}/docs",
   "socialLinks": [
     {

src/app/config.ts

@@ -2,5 +2,6 @@
  * The configuration for this app.
  */
 import config from "@/configJson";
+import { Config } from "@/types/config";
 
 export default config as Config;

src/app/layout.tsx

@@ -7,33 +7,13 @@ import Sidebar from "@/components/sidebar/sidebar";
 import Footer from "@/components/footer";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { getDocsContent } from "@/lib/mdx";
+import config from "@/config";
 
 /**
  * The metadata for this app.
  */
-export const metadata: Metadata = {
-    title: {
-        default: "Pulse Docs",
-        template: "%s • Pulse Docs",
-    },
-    description:
-        "A lightweight service monitoring solution for tracking the availability of whatever service your heart desires!",
-    openGraph: {
-        images: [
-            {
-                url: "https://pulseapp.cc/media/logo.png",
-                width: 128,
-                height: 128,
-            },
-        ],
-    },
-    twitter: {
-        card: "summary",
-    },
-};
-export const viewport: Viewport = {
-    themeColor: "#A855F7",
-};
+export const metadata: Metadata = config.metadata;
+export const viewport: Viewport = config.viewport;
 
 /**
  * The primary layout for this app.

src/app/types/config.ts

@@ -1,4 +1,21 @@
-type Config = {
+import type { Metadata, Viewport } from "next";
+
+export type Config = {
+    /**
+     * The name of this app.
+     */
+    siteName: string;
+
+    /**
+     * The metadata for this app.
+     */
+    metadata: Metadata;
+
+    /**
+     * The viewport for this app.
+     */
+    viewport: Viewport;
+
     /**
      * The source to get the content from.
      * This can either be a local source, or

src/components/footer.tsx

@@ -80,8 +80,8 @@ const Footer = (): ReactElement => (
 
             {/* Copyright */}
             <p className="absolute inset-x-0 bottom-3.5 flex text-sm text-center justify-center opacity-60">
-                Copyright &copy; {new Date().getFullYear()} Pulse App. All
-                rights reserved.
+                Copyright &copy; {new Date().getFullYear()} {config.siteName}.
+                All rights reserved.
             </p>
         </div>
 
@@ -104,12 +104,12 @@ const Branding = () => (
     >
         <Image
             src="/media/logo.png"
-            alt="Pulse App Logo"
+            alt={`${config.siteName} Logo`}
             width={40}
             height={40}
             draggable={false}
         />
-        <h1 className="text-xl font-bold">Pulse App</h1>
+        <h1 className="text-xl font-bold">{config.siteName}</h1>
     </Link>
 );
 

src/components/navbar/navbar.tsx

@@ -20,7 +20,7 @@ const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
                 <h1 className="text-lg font-semibold">docs.</h1>
                 <Image
                     src="/media/logo.png"
-                    alt="Pulse App Logo"
+                    alt={`${config.siteName} Logo`}
                     width={36}
                     height={36}
                     draggable={false}