add a config

Took 52 minutes

.gitignore

@@ -6,7 +6,7 @@ node_modules
 .env*.local
 next-env.d.ts
 .sentryclirc
-.env
+config.json
 sw.*
 workbox-*
 swe-worker-*

config.json.example

@@ -0,0 +1,26 @@
+{
+  "contentSource": "{process}/docs",
+  "socialLinks": [
+    {
+      "name": "GitHub",
+      "tooltip": "View our Github",
+      "logo": "./github.svg",
+      "href": "https://github.com/PulseAppCC",
+      "navbar": true
+    },
+    {
+      "name": "Discord",
+      "tooltip": "Join our Discord",
+      "logo": "./discord.svg",
+      "href": "https://discord.pulseapp.cc",
+      "navbar": true
+    },
+    {
+      "name": "Email",
+      "tooltip": "Email us",
+      "logo": "Mail",
+      "href": "mailto:support@pulseapp.cc",
+      "navbar": false
+    }
+  ]
+}

src/app/config.ts

@@ -0,0 +1,6 @@
+/**
+ * The configuration for this app.
+ */
+import config from "@/configJson";
+
+export default config as Config;

src/app/types/config.ts

@@ -0,0 +1,42 @@
+type Config = {
+    /**
+     * The source to get the content from.
+     * This can either be a local source, or
+     * a remote Git repository.
+     */
+    contentSource: string;
+
+    /**
+     * Social links for this app.
+     */
+    socialLinks: SocialLink[];
+};
+
+type SocialLink = {
+    /**
+     * The name of this social link.
+     */
+    name: string;
+
+    /**
+     * The tooltip for this social link.
+     */
+    tooltip: string;
+
+    /**
+     * The logo for this social link.
+     * This can either be an image URL, or
+     * the name of an icon from <a href="https://lucide.dev/icons">Lucide Icons</a>
+     */
+    logo: string;
+
+    /**
+     * The href for this social link.
+     */
+    href: string;
+
+    /**
+     * Whether to show this social link in the navbar.
+     */
+    navbar: boolean;
+};

src/components/footer.tsx

@@ -5,8 +5,9 @@ import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
-import { ExternalLink, Mail } from "lucide-react";
+import { ExternalLink } from "lucide-react";
 import SocialLink from "@/components/social-link";
+import config from "@/config";
 
 const links = {
     Resources: [
@@ -55,27 +56,13 @@ const Footer = (): ReactElement => (
 
                     {/* Socials */}
                     <div className="pl-1 flex gap-2.5 items-center z-50">
-                        <SocialLink
+                        {config.socialLinks.map((link: SocialLink) => (
-                            className="w-5 h-5"
+                            <SocialLink
-                            name="GitHub"
+                                key={link.name}
-                            tooltip="View our Github"
+                                className="w-5 h-5"
-                            logo="github.svg"
+                                {...link}
-                            href="https://github.com/PulseAppCC"
+                            />
-                        />
+                        ))}
-                        <SocialLink
-                            className="w-5 h-5"
-                            name="Discord"
-                            tooltip="Join our Discord"
-                            logo="discord.svg"
-                            href="https://discord.pulseapp.cc"
-                        />
-                        <SocialLink
-                            className="w-5 h-5"
-                            name="Email"
-                            tooltip="Email us"
-                            logo={<Mail className="opacity-95 w-full h-full" />}
-                            href="mailto:support@pulseapp.cc"
-                        />
                     </div>
                 </div>
 

src/components/navbar/navbar.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
 import Sidebar from "@/components/sidebar/sidebar";
 import SocialLink from "@/components/social-link";
+import config from "@/config";
 
 const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
     <nav className="fixed left-0 inset-x-0 bg-white/95 dark:bg-white/[0.007] backdrop-saturate-100 backdrop-blur-xl border-b z-50">
@@ -35,18 +36,11 @@ const Navbar = ({ pages }: { pages: DocsContentMetadata[] }): ReactElement => (
 
                 {/* Social */}
                 <div className="flex gap-5 items-center">
-                    <SocialLink
+                    {config.socialLinks
-                        name="GitHub"
+                        .filter((link: SocialLink) => link.navbar)
-                        tooltip="View our Github"
+                        .map((link: SocialLink) => (
-                        logo="github.svg"
+                            <SocialLink key={link.name} {...link} />
-                        href="https://github.com/PulseAppCC"
+                        ))}
-                    />
-                    <SocialLink
-                        name="Discord"
-                        tooltip="Join our Discord"
-                        logo="discord.svg"
-                        href="https://discord.pulseapp.cc"
-                    />
                 </div>
 
                 {/* Mobile Sidebar */}

src/components/social-link.tsx

@@ -1,15 +1,12 @@
-import { ReactElement } from "react";
 import SimpleTooltip from "@/components/simple-tooltip";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import Icon from "@/components/ui/icon";
+import { icons } from "lucide-react";
 
-type SocialLinkProps = {
+type SocialLinkProps = SocialLink & {
     className?: string | undefined;
-    name: string;
-    tooltip: string;
-    logo: string | ReactElement;
-    href: string;
 };
 
 const SocialLink = ({
@@ -29,15 +26,18 @@ const SocialLink = ({
             target="_blank"
             draggable={false}
         >
-            {typeof logo === "string" ? (
+            {logo.startsWith("./") ? (
                 <Image
-                    src={`/media/${logo}`}
+                    src={`/media/${logo.substring(2)}`}
                     alt={`${name}'s Logo`}
                     fill
                     draggable={false}
                 />
             ) : (
-                logo
+                <Icon
+                    className="opacity-95 w-full h-full"
+                    name={logo as keyof typeof icons}
+                />
             )}
         </Link>
     </SimpleTooltip>

src/components/ui/icon.tsx

@@ -0,0 +1,10 @@
+import { icons, LucideProps } from "lucide-react";
+
+interface IconProps extends LucideProps {
+    name: keyof typeof icons;
+}
+
+export default function Icon({ name, color, size, ...props }: IconProps) {
+    const LucideIcon = icons[name];
+    return <LucideIcon color={color} size={size} {...props} />;
+}

src/lib/mdx.ts

@@ -1,6 +1,7 @@
 import * as fs from "node:fs";
 import { Stats } from "node:fs";
 import path from "node:path";
+import config from "@/config";
 
 /**
  * The regex to match for metadata.
@@ -10,7 +11,9 @@ const METADATA_REGEX: RegExp = /---\s*([\s\S]*?)\s*---/;
 /**
  * The directory docs are stored in.
  */
-const DOCS_DIR: string = path.join(process.cwd(), "docs");
+const DOCS_DIR: string = path.join(
+    config.contentSource.replace("{process}", process.cwd())
+);
 
 /**
  * Get the content to

tsconfig.json

@@ -24,6 +24,15 @@
     "paths": {
       "@/*": [
         "./src/*"
+      ],
+      "@/config": [
+        "./src/app/config.ts"
+      ],
+      "@/types/*": [
+        "./src/app/types/*"
+      ],
+      "@/configJson": [
+        "./config.json"
       ]
     },
     "target": "ES2017"