footer configuration

Took 8 minutes

config.json.example

@@ -45,5 +45,44 @@
       "href": "mailto:support@pulseapp.cc",
       "navbar": false
     }
-  ]
+  ],
+  "footer": {
+    "homeUrl": "https://pulseapp.cc",
+    "links": {
+      "Resources": [
+        {
+          "name": "Support",
+          "href": "https://support.pulseapp.cc"
+        },
+        {
+          "name": "Jobs",
+          "href": "https://jobs.pulseapp.cc"
+        },
+        {
+          "name": "Developers",
+          "shortName": "Devs",
+          "href": "https://dev.pulseapp.cc",
+          "external": true
+        },
+        {
+          "name": "System Status",
+          "shortName": "Status",
+          "href": "https://status.pulseapp.cc",
+          "external": true
+        }
+      ],
+      "Legal": [
+        {
+          "name": "Terms & Conditions",
+          "shortName": "Terms",
+          "href": "/legal/terms"
+        },
+        {
+          "name": "Privacy Policy",
+          "shortName": "Privacy",
+          "href": "/legal/privacy"
+        }
+      ]
+    }
+  }
 }

src/app/types/config.ts

@@ -27,6 +27,23 @@ export type Config = {
      * Social links for this app.
      */
     socialLinks: SocialLinkType[];
+
+    /**
+     * Configuration for the footer.
+     */
+    footer: {
+        /**
+         * The URL to link to when the branding is clicked.
+         */
+        homeUrl: string;
+
+        /**
+         * Links for the footer.
+         */
+        links: {
+            [category: string]: FooterLink[];
+        };
+    };
 };
 
 export type SocialLinkType = {
@@ -57,3 +74,26 @@ export type SocialLinkType = {
      */
     navbar: boolean;
 };
+
+export type FooterLink = {
+    /**
+     * The name of this link.
+     */
+    name: string;
+
+    /**
+     * The href for this link.
+     */
+    href: string;
+
+    /**
+     * The optional name to show
+     * when the screen size is small.
+     */
+    shortName?: string;
+
+    /**
+     * Is this an external link?
+     */
+    external?: boolean;
+};

src/components/footer.tsx

@@ -10,43 +10,6 @@ import SocialLink from "@/components/social-link";
 import config from "@/config";
 import { SocialLinkType } from "@/types/config";
 
-const links = {
-    Resources: [
-        {
-            name: "Support",
-            href: "https://support.pulseapp.cc",
-        },
-        {
-            name: "Jobs",
-            href: "https://jobs.pulseapp.cc",
-        },
-        {
-            name: "Developers",
-            shortName: "Devs",
-            href: "https://dev.pulseapp.cc",
-            external: true,
-        },
-        {
-            name: "System Status",
-            shortName: "Status",
-            href: "https://status.pulseapp.cc",
-            external: true,
-        },
-    ],
-    Legal: [
-        {
-            name: "Terms & Conditions",
-            shortName: "Terms",
-            href: "/legal/terms",
-        },
-        {
-            name: "Privacy Policy",
-            shortName: "Privacy",
-            href: "/legal/privacy",
-        },
-    ],
-};
-
 const Footer = (): ReactElement => (
     <footer className="relative mt-3 h-[19.5rem] md:h-[17rem] flex justify-center border-t border-zinc-700/75 overflow-hidden select-none">
         <div className="w-full md:max-w-[65rem]">
@@ -69,13 +32,15 @@ const Footer = (): ReactElement => (
 
                 {/* Links */}
                 <div className="flex gap-7 md:gap-12 transition-all transform-gpu">
-                    {Object.entries(links).map(([title, links]) => (
+                    {Object.entries(config.footer.links).map(
-                        <LinkCategory key={title} title={title}>
+                        ([title, links]) => (
-                            {links.map((link) => (
+                            <LinkCategory key={title} title={title}>
-                                <FooterLink key={link.name} {...link} />
+                                {links.map((link) => (
-                            ))}
+                                    <FooterLink key={link.name} {...link} />
-                        </LinkCategory>
+                                ))}
-                    ))}
+                            </LinkCategory>
+                        )
+                    )}
                 </div>
             </div>
 
@@ -100,7 +65,7 @@ const Footer = (): ReactElement => (
 const Branding = () => (
     <Link
         className="flex gap-3 items-center hover:opacity-75 transition-all transform-gpu"
-        href="https://pulseapp.cc"
+        href={config.footer.homeUrl}
         draggable={false}
     >
         <Image