feat: set custom footer via config file

components/Footer.tsx

@@ -1,31 +1,13 @@
-import { Divider, Text } from '@mantine/core'
+import { Divider } from '@mantine/core'
+import { pageConfig } from '@/uptime.config'
 
 export default function Footer() {
+  const defaultFooter = '<p style="text-align: center; font-size: 12px; margin-top: 10px;"> Open-source monitoring and status page powered by <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">Uptimeflare</a>, made with ❤ by <a href="https://github.com/lyc8503" target="_blank">lyc8503</a>. </p>'
+
   return (
     <>
       <Divider mt="lg" />
-      <Text
+      <div dangerouslySetInnerHTML={{ __html: pageConfig.customFooter ?? defaultFooter }} />
-        size="xs"
-        mt="xs"
-        mb="xs"
-        style={{
-          textAlign: 'center',
-        }}
-      >
-        Open-source monitoring and status page powered by{' '}
-        <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
-          Uptimeflare
-        </a>{' '}
-        and{' '}
-        <a href="https://www.cloudflare.com/" target="_blank">
-          Cloudflare
-        </a>
-        , made with ❤ by{' '}
-        <a href="https://github.com/lyc8503" target="_blank">
-          lyc8503
-        </a>
-        .
-      </Text>
     </>
   )
 }

types/config.ts

@@ -8,6 +8,7 @@ export type PageConfig = {
   maintenances?: {
     upcomingColor?: string
   }
+  customFooter?: string
 }
 
 export type MaintenanceConfig = {

uptime.config.full.ts

@@ -24,6 +24,8 @@ const pageConfig: PageConfig = {
     // Active alerts will always use the color specified in the MaintenanceConfig
     upcomingColor: 'gray',
   },
+  // [OPTIONAL] Custom footer html
+  // customFooter: '',
 }
 
 const workerConfig: WorkerConfig = {