celestiaorg · alex-beckett · Jan 20, 2025 · Jan 17, 2025 · Jan 20, 2025 · Jan 20, 2025
diff --git a/src/app/glossary/layout.js b/src/app/glossary/layout.js
@@ -3,18 +3,13 @@ import { getPostsMetadata } from "@/lib/getPostsMetadata";
 import GlossaryAccordion from "@/components/Accordion/GlossaryAccordion";
 
 export default async function GlossaryLayout({ children }) {
-  const glossaryPages = getPostsMetadata("glossary");
+	const glossaryPages = getPostsMetadata("glossary");
 
-  return (
-    <>
-      <TertiaryHero
-        title={"Glossary"}
-        blurbTitle={
-          "Explore our extensive glossary. Enhance your understanding of terminology."
-        }
-      />
-      <GlossaryAccordion glossaryData={glossaryPages} />
-      {children}
-    </>
-  );
+	return (
+		<>
+			<TertiaryHero title={"Glossary"} blurbTitle={"Explore our extensive glossary. Enhance your understanding of terminology."} />
+			<GlossaryAccordion glossaryData={glossaryPages} />
+			{children}
+		</>
+	);
 }
diff --git a/src/components/Accordion/GlossaryAccordion.js b/src/components/Accordion/GlossaryAccordion.js
@@ -10,6 +10,8 @@ import SearchInput from "@/macros/Forms/SearchInput";
 import Link from "next/link";
 import PrimaryButton from "@/macros/Buttons/PrimaryButton";
 import { usePathname } from "next/navigation";
+import Markdown from "markdown-to-jsx";
+import RichText from "@/macros/Copy/RichText";
 
 const GlossaryDirectory = ({ glossaryData }) => {
 	const router = useRouter();
@@ -130,9 +132,9 @@ const GlossaryDirectory = ({ glossaryData }) => {
 										<Heading tag={"h3"} size={"sm"} className={"text-left mb-4"}>
 											{term.title}
 										</Heading>
-										<Body size={"md"} className={`text-black-subtle`}>
-											{term.description}
-										</Body>
+										<RichText size={"md"} className={`text-black-subtle`}>
+											<Markdown>{term.content || term.description}</Markdown>
+										</RichText>
 									</div>
 								</div>
 							))}

diff --git a/src/content/glossary/data-availability-committee.md b/src/content/glossary/data-availability-committee.md
@@ -3,4 +3,4 @@ title: "Data availability committee"
 description: "A data availability committee (DAC) is a permissioned group of nodes responsible for providing data availability to a blockchain."
 ---
 
-A data availability committee (DAC) is a permissioned group of nodes responsible for providing data availability to a blockchain. DAC’s are an insecure source of data availability because they make an honest majority assumption and don’t have any stake to slash if a data withholding attack is attempted. Data availability committees are primarily used to provide a cheap and less secure source of data availability to L2s.
+A data availability committee (DAC) is a permissioned group of nodes responsible for providing data availability to a blockchain.DAC’s are an insecure source of data availability because they make an honest majority assumption and don’t have any stake to slash if a data withholding attack is attempted. Data availability committees are primarily used to provide a cheap and less secure source of data availability to L2s.
diff --git a/src/content/glossary/sovereign-rollup.md b/src/content/glossary/sovereign-rollup.md
@@ -1,5 +1,5 @@
 ---
-title: "RolSovereign rolluplup"
+title: "Sovereign rollup"
 description: "A type of rollup that does not use a settlement layer to determine its canonical chain and validity rules."
 ---
 
@@ -11,4 +11,4 @@ Sovereign rollups have three key benefits:
 2. No sharing of computation resources
 3. Ability to hard fork if something goes wrong
 
-For more information on sovereign rollups, view the blog post [Rollups as sovereign chains](https://blog.celestia.org/sovereign-rollup-chains/).
+For more information on sovereign rollups, view the blog post [Rollups as sovereign chains](https://blog.celestia.org/sovereign-rollup-chains/).
diff --git a/src/lib/getPostsMetadata.js b/src/lib/getPostsMetadata.js
@@ -2,53 +2,55 @@ import fs from "fs";
 import matter from "gray-matter";
 
 export const getPostsMetadata = (basePath) => {
-  const directory = `src/content/${basePath}/`;
-
-  // Check if the directory exists
-  if (!fs.existsSync(directory)) {
-    console.error(`Directory not found: ${directory}`);
-    return [];
-  }
-
-  const files = fs.readdirSync(directory);
-  const markdownPosts = files.filter((file) => file.endsWith(".md"));
-
-  const posts = markdownPosts.map((filename) => {
-    const fullPath = `${directory}${filename}`;
-    const fileContents = fs.readFileSync(fullPath, "utf8");
-    const matterResukts = matter(fileContents);
-
-    return {
-      title: matterResukts.data.title,
-      description: matterResukts.data.description,
-      slug: filename.replace(/\.md$/, ""),
-    };
-  });
-
-  return posts;
+	const directory = `src/content/${basePath}/`;
+
+	// Check if the directory exists
+	if (!fs.existsSync(directory)) {
+		console.error(`Directory not found: ${directory}`);
+		return [];
+	}
+
+	const files = fs.readdirSync(directory);
+	const markdownPosts = files.filter((file) => file.endsWith(".md"));
+
+	const posts = markdownPosts.map((filename) => {
+		const fullPath = `${directory}${filename}`;
+		const fileContents = fs.readFileSync(fullPath, "utf8");
+		const matterResults = matter(fileContents);
+
+		return {
+			title: matterResults.data.title,
+			description: matterResults.data.description,
+			content: matterResults.content,
+			slug: filename.replace(/\.md$/, ""),
+		};
+	});
+
+	return posts;
 };
 
 export const getPostMetadata = (basePath, fileName) => {
-  const filePath = `src/content/${basePath}/${fileName}`;
-
-  // Check if the file exists
-  if (!fs.existsSync(filePath)) {
-    console.error(`File not found: ${filePath}`);
-    return null;
-  }
-
-  // Check if the file is a markdown file
-  if (!fileName.endsWith(".md")) {
-    console.error(`File is not a markdown file: ${filePath}`);
-    return null;
-  }
-
-  const fileContents = fs.readFileSync(filePath, "utf8");
-  const matterResults = matter(fileContents);
-
-  return {
-    title: matterResults.data.title,
-    description: matterResults.data.description,
-    slug: fileName.replace(/\.md$/, ""),
-  };
+	const filePath = `src/content/${basePath}/${fileName}`;
+
+	// Check if the file exists
+	if (!fs.existsSync(filePath)) {
+		console.error(`File not found: ${filePath}`);
+		return null;
+	}
+
+	// Check if the file is a markdown file
+	if (!fileName.endsWith(".md")) {
+		console.error(`File is not a markdown file: ${filePath}`);
+		return null;
+	}
+
+	const fileContents = fs.readFileSync(filePath, "utf8");
+	const matterResults = matter(fileContents);
+
+	return {
+		title: matterResults.data.title,
+		description: matterResults.data.description,
+		content: matterResults.content,
+		slug: fileName.replace(/\.md$/, ""),
+	};
 };
diff --git a/src/macros/Copy/Body.js b/src/macros/Copy/Body.js
@@ -1,17 +1,13 @@
 const Body = ({ children, className, tag = "p", size = "md" }) => {
-  const Tag = tag;
-  const sizeClasses = {
-    xs: "text-xs leading-[1.2857]",
-    sm: "text-sm leading-[1.2857]",
-    md: "text-[1.0625rem] leading-[1.647]",
-    lg: "text-[1.0625rem] leading-[2rem] lg:text-2xl lg:leading-[2rem]",
-  };
+	const Tag = tag;
+	const sizeClasses = {
+		xs: "text-xs leading-[1.2857]",
+		sm: "text-sm leading-[1.2857]",
+		md: "text-[1.0625rem] leading-[1.647]",
+		lg: "text-[1.0625rem] leading-[2rem] lg:text-2xl lg:leading-[2rem]",
+	};
 
-  return (
-    <Tag className={`text-pretty ${sizeClasses[size]} ${className}`}>
-      {children}
-    </Tag>
-  );
+	return <Tag className={`text-pretty ${sizeClasses[size]} ${className}`}>{children}</Tag>;
 };
 
 export default Body;
diff --git a/src/macros/Copy/RichText.js b/src/macros/Copy/RichText.js
@@ -0,0 +1,43 @@
+const RichText = ({ children, className = "", size = "md" }) => {
+	const sizeClasses = {
+		xs: "text-xs [&_p]:leading-[1.2857]",
+		sm: "text-sm [&_p]:leading-[1.2857]",
+		md: "text-[1.0625rem] [&_p]:leading-[1.647]",
+		lg: "text-[1.0625rem] [&_p]:leading-[2rem] lg:text-2xl lg:[&_p]:leading-[2rem]",
+	};
+
+	return (
+		<div
+			className={`
+        ${sizeClasses[size]}
+        ${className}
+        text-pretty
+        [&_p]:mb-4 [&_p:last-child]:mb-0
+        [&_a]:text-[#7b2bf9] [&_a]:underline [&_a]:underline-offset-4 [&_a]:decoration-1 hover:[&_a]:text-[#995DF9] hover:[&_a]:decoration-2 [&_a]:transition-all
+        [&_strong]:font-bold
+        [&_em]:italic
+        [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-4
+        [&_ol]:list-decimal [&_ol]:ml-6 [&_ol]:mb-4
+        [&_li]:mb-2 [&_li:last-child]:mb-0
+        [&_h1]:text-4xl [&_h1]:font-bold [&_h1]:mb-6 [&_h1]:mt-8
+        [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:mb-5 [&_h2]:mt-7
+        [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:mb-4 [&_h3]:mt-6
+        [&_h4]:text-xl [&_h4]:font-bold [&_h4]:mb-4 [&_h4]:mt-6
+        [&_h5]:text-lg [&_h5]:font-bold [&_h5]:mb-3 [&_h5]:mt-5
+        [&_h6]:text-base [&_h6]:font-bold [&_h6]:mb-3 [&_h6]:mt-5
+        [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:my-6
+        [&_hr]:my-8 [&_hr]:border-t [&_hr]:border-gray-300
+        [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded
+        [&_pre]:bg-gray-100 [&_pre]:p-4 [&_pre]:rounded [&_pre]:mb-4
+        [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded [&_img]:my-4
+        [&_table]:w-full [&_table]:mb-4 [&_table]:border-collapse
+        [&_th]:border [&_th]:border-gray-300 [&_th]:p-2 [&_th]:bg-gray-50
+        [&_td]:border [&_td]:border-gray-300 [&_td]:p-2
+      `}
+		>
+			{children}
+		</div>
+	);
+};
+
+export default RichText;