Add video demo to website

Author: flusterIO

.github/FUNDING.yml

@@ -1,3 +1,2 @@
 github: [Uh-little-less-dum, igloo1505, FlusterIO]
-patreon: uhlittlelessdum
 custom: ["https://www.paypal.com/donate/?hosted_button_id=W22RTUJ2RPZDU", "https://fluster-one.vercel.app/sponsor"]

apps/fluster/src/App.tsx

@@ -3,10 +3,13 @@ import { useGlobalKeymap } from "#/keymap/state/hooks/use_global_keymap";
 import { getBrowserRouter } from "#/router/data/main_router_routes";
 import { RouterProvider } from "react-router";
 import { ResourceRoutes } from "#/router/data/app_routes";
-import mermaid from "mermaid";
+/* import mermaid from "mermaid"; */
 
 const App = (): ReactNode => {
-    mermaid.initialize({ startOnLoad: true });
+    /* mermaid.initialize({  */
+    /*     startOnLoad: true, */
+
+    /* }); */
     window.MathJax = {
         /* @ts-expect-error -- Not sure if this is working but I'm leaving it until all math is rendering properly. */
         "HTML-CSS": { linebreaks: { automatic: true } },

apps/fluster/src/features/mdx/data/parse/mdx_to_jsx.ts

@@ -83,10 +83,10 @@ const rehypePlugins = (): CompileOptions["rehypePlugins"] => {
         [
             rehypeMermaid,
             {
-                strategy: "img-svg",
+                output: "svg",
                 dark: darkMode,
                 colorScheme: darkMode ? "dark" : "light",
-                mermaidConfig,
+                // mermaidConfig,
             },
         ],
         /* [ */

apps/website/src/core/feature_data/mdxFeature.tsx

@@ -2,6 +2,8 @@
 import splitViewImg from "../../../public/assets/blog/screenshots/splitview.png";
 import { FeaturedContainerPropsRequired } from "#/features/landing_page/sections/feature_section/types";
 import Image from "next/image";
+import { buttonVariants } from "../shad/ui/button";
+import { staticContent } from "../static_content";
 
 export const mdxFeature: FeaturedContainerPropsRequired = {
     label: "Write in MDX",
@@ -16,6 +18,11 @@ export const mdxFeature: FeaturedContainerPropsRequired = {
                         "takes all of the simplicity of markdown and extends it to support React components directly in your notes. Plots, modals, whiteboards, and more are right at your fingertips, in a language that anyone can learn in a single day."
                     }
                 </div>
+                <div>
+                    <a className={buttonVariants()} href={staticContent.links.videoDemo}>
+                        Video Demo
+                    </a>
+                </div>
             </div>
         );
     },
@@ -24,16 +31,6 @@ export const mdxFeature: FeaturedContainerPropsRequired = {
             <Image
                 src={splitViewImg}
                 alt="Fluster mdx & code editor split view"
-                /* images={[ */
-                /*     { */
-                /*         src: mdxScreenshot, */
-                /*         alt: "MDX Code", */
-                /*     }, */
-                /*     { */
-                /*         src: mdxScreenshotOutput, */
-                /*         alt: "MDX Output", */
-                /*     }, */
-                /* ]} */
                 className={"w-full h-auto min-h-[40vh]"}
             />
         );