From ad89204d47494d379655432f1124e93e7f8d23fa Mon Sep 17 00:00:00 2001
From: George Leung <phiSgr@users.noreply.github.com>
Date: Sat, 21 Sep 2024 12:07:19 -0700
Subject: [PATCH] Change node type in docs (#1766)

---
 .../src/components/language-wrappers.tsx      | 19 ++++++++++++++-----
 .../src/pages/data-models/model-data.mdx      |  6 ++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/framework-docs/src/components/language-wrappers.tsx b/apps/framework-docs/src/components/language-wrappers.tsx
index a747a4b67..4175c3541 100644
--- a/apps/framework-docs/src/components/language-wrappers.tsx
+++ b/apps/framework-docs/src/components/language-wrappers.tsx
@@ -4,22 +4,31 @@ import { cn } from "@514labs/design-system-components/utils";
 
 interface LanguageProps {
   children: ReactNode;
+  NodeType?: "div" | "span";
 }
 
-export const TypeScript: React.FC<LanguageProps> = ({ children }) => {
+export const TypeScript: React.FC<LanguageProps> = ({
+  children,
+  NodeType = "div",
+}) => {
   const { language } = useLanguage();
   return (
-    <div className={cn(language === "typescript" ? "" : "hidden")}>
+    <NodeType className={cn(language === "typescript" ? "" : "hidden")}>
       {children}
-    </div>
+    </NodeType>
   );
   //return language === "typescript" ? <>{children}</> : null;
 };
 
-export const Python: React.FC<LanguageProps> = ({ children }) => {
+export const Python: React.FC<LanguageProps> = ({
+  children,
+  NodeType = "div",
+}) => {
   const { language } = useLanguage();
   return (
-    <div className={cn(language === "python" ? "" : "hidden")}>{children}</div>
+    <NodeType className={cn(language === "python" ? "" : "hidden")}>
+      {children}
+    </NodeType>
   );
   //return language === "python" ? <>{children}</> : null;
 };
diff --git a/apps/framework-docs/src/pages/data-models/model-data.mdx b/apps/framework-docs/src/pages/data-models/model-data.mdx
index 6c550e7b0..1bf043d75 100644
--- a/apps/framework-docs/src/pages/data-models/model-data.mdx
+++ b/apps/framework-docs/src/pages/data-models/model-data.mdx
@@ -16,9 +16,11 @@ The schema defines the names and data types of the properties in your Data Model
 ### `Key<T>`
 </TypeScript>
 
-<Python>### `Key[T: (str, int)] = T`</Python>
+<Python>
+### `Key[T: (str, int)] = T`
+</Python>
 
-The <TypeScript>`Key<T>`</TypeScript><Python>`Key[T: (str, int)] = T`</Python> type is specific to Moose and is used to define a primary key for your Data Model. If your Data Model requires a composite key, you can apply the `Key` type to multiple columns.
+The <TypeScript NodeType={"span"}>`Key<T>`</TypeScript><Python NodeType={"span"}>`Key[T: (str, int)] = T`</Python> type is specific to Moose and is used to define a primary key for your Data Model. If your Data Model requires a composite key, you can apply the `Key` type to multiple columns.
 
 When provisioning the OLAP storage table, the `Key` type will be used to define the primary key. The meaning of a primary key depends on the database you are using. For instance, in Clickhouse, it will define the [primary key](https://clickhouse.com/docs/en/engines/table-engines/mergetree-family/mergetree#primary-keys-and-indexes-in-queries) of the table.