Add under construction note to home page as well

Author: ebiggz

Diff for: src/app/page.mdx

@@ -15,6 +15,10 @@ export const sections = [
 
 <HeroPattern />
 
+<Note type="warning">
+  Much of this web site is still a work-in-progress, and we are working hard to try and get all of the documentation migrated here. In the meantime, our [Github Wiki](https://github.com/crowbartools/Firebot/wiki) contains a vast selection of <i>historical</i> documentation.
+</Note>
+
 # Firebot Documentation
 
 Firebot is a fully featured open-source bot that can help level up your streams. {{ className: 'lead' }}
@@ -28,16 +32,16 @@ Firebot is a fully featured open-source bot that can help level up your streams.
   </Button> */}
 </div>
 
-## Getting started {{ anchor: false }}
+{/* ## Getting started {{ anchor: false }} */}
 
-To get started, create a new application in your [developer settings](#), then read about how to make requests for the resources you need to access using our HTTP APIs or dedicated client SDKs. When your integration is ready to go live, publish it to our [integrations directory](#) to reach the Protocol community. {{ className: 'lead' }}
+{/* To get started, create a new application in your [developer settings](#), then read about how to make requests for the resources you need to access using our HTTP APIs or dedicated client SDKs. When your integration is ready to go live, publish it to our [integrations directory](#) to reach the Protocol community. {{ className: 'lead' }} */}
 
-<div className="not-prose">
+{/* <div className="not-prose">
   <Button href="/sdks" variant="text" arrow="right">
     <>Get your API key</>
   </Button>
-</div>
+</div> */}
 
-<Guides />
+{/* <Guides /> */}
 
-<Resources />
+{/* <Resources /> */}

Diff for: src/components/mdx.tsx

@@ -42,10 +42,36 @@ function InfoIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   )
 }
 
-export function Note({ children }: { children: React.ReactNode }) {
+export function Note({
+  children,
+  type,
+}: {
+  children: React.ReactNode
+  type?: 'success' | 'warning'
+}) {
+  const typeColors = {
+    success: {
+      container:
+        'border-emerald-500/20 bg-emerald-50/50 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:theme(colors.emerald.300)] dark:[--tw-prose-links:theme(colors.white)]',
+      icon: 'fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200',
+    },
+    warning: {
+      container:
+        'border-amber-500/20 bg-amber-50/50 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/5 dark:text-amber-200 dark:[--tw-prose-links-hover:theme(colors.amber.300)] dark:[--tw-prose-links:theme(colors.white)]',
+      icon: 'fill-amber-500 stroke-white dark:fill-amber-200/20 dark:stroke-amber-200',
+    },
+  }
+
+  const colors = typeColors[type ?? 'success']
+
   return (
-    <div className="my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 leading-6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:theme(colors.emerald.300)] dark:[--tw-prose-links:theme(colors.white)]">
-      <InfoIcon className="mt-1 h-4 w-4 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />
+    <div
+      className={clsx(
+        'my-6 flex gap-2.5 rounded-2xl border p-4 leading-6',
+        colors.container,
+      )}
+    >
+      <InfoIcon className={clsx('mt-1 h-4 w-4 flex-none', colors.icon)} />
       <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
         {children}
       </div>