fix: allow external links in docs (#101)

closes #87

website/app/docs/concepts/plugins/page.mdx

@@ -59,11 +59,11 @@ def create_flow(service_spec, deployment_spec, flow_uuid, text_to_replace):
     deployment_spec['template']['metadata']['labels']['app'] = deployment_spec['template']['metadata']['labels']['app'].replace(text_to_replace, REPLACED)
     deployment_spec['selector']['matchLabels']['app'] = deployment_spec['selector']['matchLabels']['app'].replace(text_to_replace, REPLACED)
     deployment_spec['template']['spec']['containers'][0]['name'] = deployment_spec['template']['spec']['containers'][0]['name'].replace(text_to_replace, REPLACED)
-    
+
     config_map = {
         "original_text": text_to_replace
     }
-    
+
     return {
         "deployment_spec": deployment_spec,
         "config_map": config_map

website/app/docs/getting-started/demo/page.mdx

@@ -10,18 +10,18 @@ In this guide, you'll:
 ## Prerequisites
 
 Before you start, make sure you have the following installed:
-- <a href="https://docs.docker.com/get-docker/" target="_blank" rel="noopener noreferrer">Docker</a>
-- <a href="https://minikube.sigs.k8s.io/docs/start/" target="_blank" rel="noopener noreferrer">Minikube</a>
-- <a href="https://kubernetes.io/docs/tasks/tools/install-kubectl/" target="_blank" rel="noopener noreferrer">Kubectl</a>
-- <a href="https://istio.io/latest/docs/setup/getting-started/" target="_blank" rel="noopener noreferrer">Istio</a>
+- [Docker](https://docs.docker.com/get-docker/)
+- [Minikube](https://minikube.sigs.k8s.io/docs/start/)
+- [Kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/)
+- [Istio](https://istio.io/latest/docs/setup/getting-started/)
 
 You'll need to run Minikube with Istio enabled. To do this, run the following:
 
 ```bash
-minikube start --driver=docker --cpus=10 --memory 8192 --disk-size 32g;
-minikube addons enable ingress;
-minikube addons enable metrics-server;
-istioctl install --set profile=default -y;
+minikube start --driver=docker --cpus=10 --memory 8192 --disk-size 32g
+minikube addons enable ingress
+minikube addons enable metrics-server
+istioctl install --set profile=default -y
 ```
 
 ## Step 1: Install Kardinal
@@ -86,7 +86,7 @@ kardinal dashboard
 and click on the "Traffic configuration" sidebar item.
 
 ### Step 5: Clean up your development flow
-    
+
 When you're done with your development flow, you can delete it by running:
 ```bash
 kardinal flow delete <flow_id>
@@ -97,4 +97,4 @@ The `flow_id` is in the output of the `kardinal flow create` command, but if you
 kardinal flow ls
 ```
 
-Once you've deleted the flow, you can verify that the resources have been cleaned up by going to the dashboard again.
+Once you've deleted the flow, you can verify that the resources have been cleaned up by going to the dashboard again.

website/mdx-components.tsx

@@ -1,10 +1,11 @@
-// import { Code } from "bright";
 import { Code } from "bright";
 import type { MDXComponents } from "mdx/types";
 import { IBM_Plex_Mono } from "next/font/google";
 import Image from "next/image";
 import Link from "next/link";
 
+import { titleBar } from "./lib/bright-extensions";
+
 const fontMono = IBM_Plex_Mono({
   subsets: ["latin"],
   display: "swap",
@@ -15,9 +16,17 @@ const fontMono = IBM_Plex_Mono({
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
-    a: (props) => (
-      <Link {...props} href={props.href ? `/docs/${props.href}` : "/docs"} />
-    ),
+    a: (props) => {
+      const isExternal = props.href?.startsWith("http");
+      return (
+        <Link
+          {...props}
+          href={isExternal ? props.href || "" : `/docs/${props.href}`}
+          target={isExternal ? "_blank" : undefined}
+          rel={isExternal ? "noopener noreferrer" : undefined}
+        />
+      );
+    },
     img: (props) => {
       if (props.src?.includes(".mp4")) {
         return (
@@ -52,6 +61,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
           }}
           theme={"github-dark"}
           className={fontMono.className}
+          extensions={[titleBar]}
         />
       );
     },