Merge pull request #2388 from maria-robobug/blog-site

Blog site
2025-11-04 20:05:50 +00:00 · 2024-02-13 18:03:24 +00:00
parent ea75a66ab0 ba7d3c204e
commit f96cd212ce
28 changed files with 1428 additions and 90 deletions
--- a/@theme/components/Footer/BlogFooter.tsx
+++ b/@theme/components/Footer/BlogFooter.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+import { useLocation } from 'react-router-dom'; 
+
+export function BlogFooter(props) {
+    const themeConfig = useThemeConfig();
+    const { pathname } = useLocation();
+    const { translate } = useTranslate();
+
+    // Provide different footer links for the Blog site.
+    if (pathname.includes("blog")) {
+      themeConfig.footer.items = [
+        {
+          label: translate("Learn"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "about/index.page.tsx",
+              label: translate("Overview"),
+              link: "/about/",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Uses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "about/history.page.tsx",
+              label: translate("History"),
+              link: "/about/history",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Impact"),
+              link: "/about/impact",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Carbon Calculator"),
+              link: "/about/impact",
+            },
+          ],
+        },
+        {
+          label: translate("Explore"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/introduction/crypto-wallets.md",
+              label: translate("Wallets"),
+              link: "/docs/introduction/crypto-wallets",
+            },
+            {
+              type: "link",
+              fsPath: "about/xrp.page.tsx",
+              label: translate("Exchanges"),
+              link: "/about/xrp",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Businesses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("Ledger Explorer"),
+              link: "https://livenet.xrpl.org/",
+            },
+          ],
+        },
+        {
+          label: translate("Build"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/tutorials/index.md",
+              label: translate("Get Started"),
+              link: "/docs/tutorials",
+            },
+            {
+              type: "link",
+              fsPath: "/docs/index.page.tsx",
+              label: translate("Docs"),
+              link: "/docs/",
+            },
+            {
+              type: "link",
+              fsPath: "/resources/dev-tools/index.page.tsx",
+              label: translate("Dev Tools"),
+              link: "/resources/dev-tools/",
+            },
+            {
+              type: "link",
+              fsPath: "/blog/index.page.tsx",
+              label: translate("Dev Blog"),
+              link: "/blog/",
+            },
+          ],
+        },
+        {
+          label: translate("Contribute"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/resources/contribute-code/index.md",
+              label: translate("How to Contribute"),
+              link: "/resources/contribute-code",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("XRPL on Github"),
+              link: "https://github.com/XRPLF/xrpl-dev-portal",
+              external: true,
+            },
+          ],
+        },
+      ];
+    }
+
+    // NOTE: We don't render anything because we only want to change the footer data, 
+    // but the design should remain the same.
+    return null;
+}
--- a/@theme/components/Navbar/Navbar.tsx
+++ b/@theme/components/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { LanguagePicker } from '@theme/i18n/LanguagePicker';
-import { useI18n } from '@portal/hooks';
+import { useI18n, useTranslate } from '@portal/hooks';

 import { slugify } from '../../helpers';

@@ -10,6 +10,8 @@ import { Link } from '@portal/Link';
 import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';
 import { Search } from '@theme/components/Search/Search';

+import { useLocation } from 'react-router-dom'; 
+
 // @ts-ignore
 // import navbar from '../../../top-nav.yaml';

@@ -44,6 +46,31 @@ export function Navbar(props) {
    }
  });

+ const { pathname } = useLocation();
+ const blogNavs = getBlogNavigationConfig();
+
+ const blogNavItems = [];
+ for (const blogNav of blogNavs) {
+   if (blogNav.type === "group") {
+     blogNavItems.push(
+       <NavDropdown
+         key={blogNav.index}
+         label={blogNav.label}
+         items={blogNav.items}
+         pathPrefix={pathPrefix}
+       />
+     );
+   } else {
+     blogNavItems.push(
+       <NavItem key={blogNav.index}>
+         <Link to={blogNav.link} className="nav-link">
+           {blogNav.label}
+         </Link>
+       </NavItem>
+     );
+   }
+ }
+
  React.useEffect(() => {
    // Turns out jQuery is necessary for firing events on Bootstrap v4
    // dropdowns. These events set classes so that the search bar and other
@@ -78,36 +105,73 @@ export function Navbar(props) {
  };
  },[]);

-  return (
-    <>
-      {/* <AlertBanner
+  // Render a different top nav for the Blog site.
+  if (pathname.includes("blog")) {
+    return (
+      <>
+        {/* <AlertBanner
        show={alertBanner.show}
        message={alertBanner.message}
        button={alertBanner.button}
        link={alertBanner.link}
      /> */}
-      <NavWrapper>
-        <LogoBlock to={href} img={logo} alt={altText} />
-        <NavControls>
-          <MobileMenuIcon />
-        </NavControls>
-        <TopNavCollapsible>
-          <NavItems>
-            {navItems}
-            <div id="topnav-search" className="nav-item search">
-              <Search className="topnav-search" />
-            </div>
-            <div id="topnav-language" className="nav-item">
-              <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
-            </div>
-            <div id="topnav-theme" className="nav-item">
-              <StyledColorModeSwitcher />
-            </div>
-          </NavItems>
-        </TopNavCollapsible>
-      </NavWrapper>
-    </>
-  );
+        <NavWrapper>
+          <LogoBlock to={href} img={logo} alt={altText} />
+          <NavControls>
+            <MobileMenuIcon />
+          </NavControls>
+          <TopNavCollapsible>
+            <NavItems>
+              {blogNavItems}
+              <div id="topnav-search" className="nav-item search">
+                <Search className="topnav-search" />
+              </div>
+              <div id="topnav-button" className="nav-item">
+                <GetStartedButton />
+              </div>
+              <div id="topnav-language" className="nav-item">
+                <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+              </div>
+              <div id="topnav-theme" className="nav-item">
+                <StyledColorModeSwitcher />
+              </div>
+            </NavItems>
+          </TopNavCollapsible>
+        </NavWrapper>
+      </>
+    );
+  } else {
+    return (
+      <>
+        {/* <AlertBanner
+        show={alertBanner.show}
+        message={alertBanner.message}
+        button={alertBanner.button}
+        link={alertBanner.link}
+      /> */}
+        <NavWrapper>
+          <LogoBlock to={href} img={logo} alt={altText} />
+          <NavControls>
+            <MobileMenuIcon />
+          </NavControls>
+          <TopNavCollapsible>
+            <NavItems>
+              {navItems}
+              <div id="topnav-search" className="nav-item search">
+                <Search className="topnav-search" />
+              </div>
+              <div id="topnav-language" className="nav-item">
+                <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+              </div>
+              <div id="topnav-theme" className="nav-item">
+                <StyledColorModeSwitcher />
+              </div>
+            </NavItems>
+          </TopNavCollapsible>
+        </NavWrapper>
+      </>
+    );
+  }
 }

 const StyledColorModeSwitcher = styled(ColorModeSwitcher)`
@@ -260,6 +324,16 @@ export function MobileMenuIcon() {
  );
 }

+export function GetStartedButton() {
+  const { translate } = useTranslate();
+
+  return (
+    <a className="btn btn-primary" href={"/docs/tutorials"} style={{ height: "38px", paddingTop: "11px"}}>
+      {translate("Get Started")}
+    </a>
+  );
+}
+
 export function NavItems(props) {
  return (
    <ul className="nav navbar-nav" id="topnav-pages">
@@ -339,3 +413,131 @@ export class ThemeToggle extends React.Component {
    this.auto_update_theme();
  }
 }
+
+function getBlogNavigationConfig() {
+  const { translate } = useTranslate();
+
+  return [
+    {
+      index: "0",
+      label: translate("Learn"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("XRP Ledger"),
+          items: [
+            {
+              type: "link",
+              fsPath: "about/index.page.tsx",
+              label: translate("Overview"),
+              link: "/about/",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Uses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "about/history.page.tsx",
+              label: translate("History"),
+              link: "/about/history",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Impact"),
+              link: "/about/impact",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Carbon Calculator"),
+              link: "/about/impact",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "1",
+      label: translate("Explore"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("Explore the XRP Ledger"),
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/introduction/crypto-wallets.md",
+              label: translate("Wallets"),
+              link: "/docs/introduction/crypto-wallets",
+            },
+            {
+              type: "link",
+              fsPath: "about/xrp.page.tsx",
+              label: translate("Exchanges"),
+              link: "/about/xrp",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Businesses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("Ledger Explorer"),
+              link: "https://livenet.xrpl.org/",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "2",
+      label: translate("Build"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("Build with XRPL"),
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/index.page.tsx",
+              label: translate("Docs"),
+              link: "/docs/",
+            },
+            {
+              type: "link",
+              fsPath: "/resources/dev-tools/index.page.tsx",
+              label: translate("Dev Tools"),
+              link: "/resources/dev-tools/",
+            },
+            {
+              type: "link",
+              fsPath: "/blog/index.page.tsx",
+              label: translate("Dev Blog"),
+              link: "/blog/",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "3",
+      type: "link",
+      fsPath: "community/index.page.tsx",
+      label: translate("Contribute"),
+      link: "/community",
+    },
+  ];
+}
--- a/@theme/plugin.js
+++ b/@theme/plugin.js
@@ -1,9 +1,11 @@
 import { indexPages } from './plugins/index-pages.js';
 import { codeSamples } from './plugins/code-samples.js';
+import { blogPosts } from './plugins/blog-posts.js';

 export default function customPlugin() {
  const indexPagesInst = indexPages();
  const codeSamplesInst = codeSamples();
+  const blogPostsInst = blogPosts();



@@ -12,10 +14,12 @@ export default function customPlugin() {
    processContent: async (content, actions) => {
      await indexPagesInst.processContent?.(content, actions);
      await codeSamplesInst.processContent?.(content, actions);
+      await blogPostsInst.processContent?.(content, actions);
    },
    afterRoutesCreated: async (content, actions) => {
      await indexPagesInst.afterRoutesCreated?.(content, actions);
      await codeSamplesInst.afterRoutesCreated?.(content, actions);
+      await blogPostsInst.afterRoutesCreated?.(content, actions);
    },
  };

--- a/@theme/plugins/blog-posts.js
+++ b/@theme/plugins/blog-posts.js
@@ -0,0 +1,130 @@
+// @ts-check
+
+import { getInnerText } from '@redocly/realm/dist/shared/markdoc.js';
+
+import { dirname, relative, join as joinPath } from 'path';
+import markdoc from '@markdoc/markdoc';
+import moment from "moment";
+
+export function blogPosts() {
+  /** @type {import("@redocly/realm/dist/server/plugins/types").PluginInstance } */
+  const instance = {
+    processContent: async (contentProvider, actions) => {
+      try {
+        const posts = [];
+        const allBlogFiles = Array.from(contentProvider.fsFilesList.values());
+
+        const markdownFiles = allBlogFiles.filter(file => file.match(/blog[\/\\]([^\\\/]*)[\/\\].*\.md$/));
+
+        for (const relativePath of markdownFiles) {
+          const record = contentProvider.loadContent(relativePath, 'frontmatter');
+          const ast = markdoc.parse(record.content);
+
+          const dirPath = dirname(relativePath);
+          const title = extractFirstHeading(ast) || '';
+          const category = extractCategory(record.parsed.data.labels);
+          const year = `${relativePath.split("/")[1]}`
+
+          posts.push({
+            path: dirPath,
+            author: record.parsed.data.author || "",
+            title: title || toTitleCase(dirname(dirPath)),
+            description: getInnerText([ast.children[1]]).replace(title, '').trim(),
+            year: year,
+            date: record.parsed.data.date
+                    ? moment(record.parsed.data.date).format("YYYY-MM-DD")
+                    : moment(year).format("YYYY-MM-DD"),
+            category: category || "General",
+            category_id: category ? category.toLowerCase().replace(/ /g, "_") : "general",
+            link: `${relativePath.replace('blog/', '').replace(".md", "")}`,
+          });
+        }
+
+        const sortedPosts = sortBlogPostsByDate(posts)
+
+        actions.createSharedData('blog-posts', { blogPosts: sortedPosts });
+        actions.addRouteSharedData('/blog/', 'blog-posts', 'blog-posts');
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  };
+  return instance;
+}
+
+function extractCategory(labelsFrontmatter) {
+  const categories = [];
+  for (const i in labelsFrontmatter) {
+    if (labelsFrontmatter[i].includes("Release")) {
+      labelsFrontmatter[i] = "Release Notes"
+    }
+    categories.push(labelsFrontmatter[i]);
+  }
+  // We only need the first category from the frontmatter.
+  return categories[0];
+}
+
+function sortBlogPostsByDate(posts) {
+  const sortedItems = posts.sort((a, b) => {
+    let dateA = new Date(a.date);
+    let dateB = new Date(b.date);
+
+    // Sort in descending order
+    return dateB.getTime() - dateA.getTime();
+  });
+  return sortedItems;
+}
+
+const WORDS_TO_CAPS = ['xrp'];
+
+function toTitleCase(s) {
+  const words = s.split(/_|[^\w']/);
+  return words
+    .filter(word => word)
+    .map(word => (WORDS_TO_CAPS.includes(word) ? word.toUpperCase() : word.charAt(0).toUpperCase() + word.slice(1)))
+    .join(' ')
+    .replace("'S", "'s")
+    .replace(' A ', ' a ');
+}
+
+function unique(array) {
+  return Array.from(new Set(array));
+}
+
+function extractFirstHeading(ast) {
+  let heading;
+
+  visit(ast, node => {
+    if (!isNode(node)) {
+      return;
+    }
+
+    if (node.type === 'heading') {
+      heading = getInnerText([node]);
+      return EXIT;
+    }
+  });
+
+  return heading;
+}
+
+function isNode(value) {
+  return !!(value?.$$mdtype === 'Node');
+}
+
+const EXIT = Symbol('Exit visitor');
+function visit(node, visitor) {
+  if (!node) return;
+
+  const res = visitor(node);
+  if (res === EXIT) return res;
+
+  for (const child of node.children) {
+    if (!child || typeof child === 'string') {
+      continue;
+    }
+    const res = visit(child, visitor);
+    if (res === EXIT) return res;
+  }
+}
+
--- a/blog/index.md
+++ b/blog/index.md
@@ -1,11 +0,0 @@
---
-metadata:
-  indexPage: true
-seo:
-    description: Browse the XRP Ledger Community Blog.
---
-# XRP Ledger Community Blog
-
-The main purpose of the XRP Ledger Community Blog is to share information about releases, advisories, amendments, security, development, and develper reflections.
-
-{% child-pages /%}
--- a/blog/index.page.tsx
+++ b/blog/index.page.tsx
@@ -0,0 +1,241 @@
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { useTranslate, usePageSharedData } from "@portal/hooks";
+import moment from "moment";
+import { BlogFooter } from "@theme/components/Footer/BlogFooter";
+
+export const frontmatter = {
+  seo: {
+    title: "XRP Ledger Community Blog",
+    description: "Browse the XRP Ledger Community Blog.",
+  },
+};
+
+const target = { prefix: "" }; // TODO: fixme
+
+const categories = {
+  general: "General",
+  release_notes: "Release Notes",
+  advisories: "Advisories",
+  amendments: "Amendments",
+  development: "Development",
+  developer_reflections: "Developer Reflections",
+  gateway_bulletins: "Gateway Bulletins",
+  features: "Features",
+  security: "Security",
+};
+
+export default function Index() {
+  const { translate } = useTranslate();
+  const { blogPosts } = usePageSharedData<any>("blog-posts");
+
+  const heroPost = blogPosts[0];
+  const otherPosts = blogPosts.slice(1);
+
+  const defaultSelectedCategories = new Set(Object.keys(categories));
+
+  const [selectedCategories, setSelectedCategories] = useState(
+    defaultSelectedCategories
+  );
+
+  const [cards, setCards] = useState(otherPosts);
+
+  const toggleCategory = (category) => {
+    const newSelectedCategories = new Set(selectedCategories);
+    if (newSelectedCategories.has(category)) {
+      newSelectedCategories.delete(category);
+    } else {
+      newSelectedCategories.add(category);
+    }
+    setSelectedCategories(newSelectedCategories);
+  };
+
+  const filteredCards = cards.filter((card) =>
+    selectedCategories.has(card.category_id)
+  );
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="landing dev-blog">
+      <div className="justify-content-center align-items-lg-center">
+        <div className="position-relative d-none-sm">
+          <img
+            alt="background purple waves"
+            src={require("../static/img/backgrounds/home-purple.svg")}
+            id="blog-purple"
+          />
+        </div>
+        <section className="py-lg-5 text-center mt-lg-5">
+          <div className="mx-auto text-center col-lg-5">
+            <div className="d-flex flex-column">
+              <h6 className="eyebrow mb-3">{translate("XRPL Community")}</h6>
+              <h1 className="mb-3">{translate("XRPL Blog")}</h1>
+            </div>
+          </div>
+        </section>
+
+        {/* Banner */}
+        <section className="container-new">
+          <div className="row justify-content-center align-items-lg-center">
+            {/* Banner Image */}
+            <div className="image-container">
+              <img
+                alt="default-alt-text"
+                src={require("../static/img/blog/blog-hero.svg")}
+                className="w-100"
+              />
+            </div>
+            {/* Text */}
+            <div className="col">
+              <div className="text-bg">
+                <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
+                  <span className="post-date pb-2">
+                    {translate(`${moment(heroPost.date).format("MMM")}`)}
+                  </span>
+                  {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
+                </h4>
+                <div className="pb-8">
+                  <p
+                    id={`${heroPost.category_id}-badge`}
+                    className="category-badge"
+                  >
+                    {translate(`${heroPost.category}`)}
+                  </p>
+                </div>
+                <h4 className="mb-8 h2-sm font-weight-bold">
+                  {translate(`${heroPost.title}`)}
+                </h4>
+                <p className="mb-4">{translate(`${heroPost.description}`)}</p>
+                <div className="d-lg-block">
+                  <a
+                    className="btn btn-primary btn-arrow"
+                    href={`${heroPost.link}`}
+                  >
+                    {translate("Read More")}
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Other Blog Posts*/}
+        <section className="container-new py-26">
+          <div className="row w-100 mx-auto px-2">
+            <div className="row-cols-lg-2 m-0 p-0 mt-2">
+              {/* Filters Desktop*/}
+              <div className="p-3 category_sidebar d-none d-lg-block">
+                <p className="mb-2 category-header">Filter by Category:</p>
+                <div className="d-flex flex-column p-3">
+                  {Object.keys(categories).map((item) => (
+                    <div key={item} className="category-checkbox pb-2">
+                      <input
+                        className={`blog-filter input_${item}`}
+                        type="checkbox"
+                        name="categories"
+                        id={`input_${item}`}
+                        defaultValue={`${item}`}
+                        onChange={() => toggleCategory(item)}
+                        defaultChecked
+                      />
+                      <label
+                        className="font-weight-bold"
+                        htmlFor={`input_${item}`}
+                      >
+                        {translate(categories[item])}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {/* End Desktop Filters */}
+              {/* Filters Mobile */}
+              <div className="col d-flex flex-column p-0 d-lg-none mb-4">
+                <p className="mb-2 category-header">Filter by:</p>
+                <div className="dropdown">
+                  <button
+                    className="dropdown-btn"
+                    onClick={() => setOpen((open) => !open)}
+                  >
+                    Category
+                    <img alt="dropdown arrow" />
+                  </button>
+                  {open && (
+                    <div
+                      className="dropdown-content d-flex flex-column mt-2"
+                      aria-labelledby="blog-dropdown-button"
+                    >
+                      {Object.keys(categories).map((item, i) => (
+                        <div key={item + i} className="category-checkbox pl-2 pb-2">
+                          <input
+                            className={`blog-filter input_${item}`}
+                            type="checkbox"
+                            name="categories"
+                            id={`input_${item}`}
+                            defaultValue={`${item}`}
+                            onChange={() => toggleCategory(item)}
+                            defaultChecked
+                          />
+                          <label
+                            className="font-weight-bold"
+                            htmlFor={`input_${item}`}
+                          >
+                            {translate(categories[item])}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+              {/* End Filters Mobile */}
+            </div>
+            {/* Cards */}
+            <div className="row col row-cols-lg-2 m-0 p-0">
+              {filteredCards.map((card, i) => (
+                <div
+                  key={card.title + i}
+                  className={`${card.category_id} pb-5 px-lg-4`}
+                  id={card.title + i}
+                >
+                  <div className="mb-4" id="category-list">
+                    <img
+                      alt="default-alt-text"
+                      id={`${card.category_id}`}
+                      className="mb-4"
+                    />
+                    <p
+                      id={`${card.category_id}-badge`}
+                      className="category-badge"
+                    >
+                      {translate(card.category)}
+                    </p>
+                  </div>
+                  <div>
+                    <p id="card-date" className="mb-0">
+                      {moment(translate(card.date)).format("MMM DD, YYYY")}
+                    </p>
+                    <h5 className="mb-2-sm h3-sm">{translate(card.title)}</h5>
+                  </div>
+                  <div className="d-lg-block">
+                    <p className="line-clamp">{translate(card.description)}</p>
+                  </div>
+                  <div className="d-lg-block">
+                    <a
+                      className="btn btn-primary btn-arrow"
+                      href={`${card.link}`}
+                    >
+                      {translate("Read More")}
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+      <BlogFooter />
+    </div>
+  );
+}
--- a/blog/sidebars.yaml
+++ b/blog/sidebars.yaml
@@ -1,5 +1,5 @@
 - group: Blog
-  page: index.md
+  page: blog/index.page.tsx
  expanded: true
  items:
    - group: '2024'
--- a/package-lock.json
+++ b/package-lock.json
@@ -1293,6 +1293,16 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/@jest/reporters/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
    "node_modules/@jest/reporters/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1327,6 +1337,26 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "peer": true
    },
+    "node_modules/@jest/reporters/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/@jest/reporters/node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -1336,6 +1366,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/@jest/reporters/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/@jest/reporters/node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4974,26 +5016,6 @@
      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
      "optional": true
    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "peer": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -5005,28 +5027,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/globals": {
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6161,6 +6161,16 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/jest-config/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
    "node_modules/jest-config/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6195,6 +6205,26 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "peer": true
    },
+    "node_modules/jest-config/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/jest-config/node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6204,6 +6234,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/jest-config/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/jest-config/node_modules/strip-json-comments": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -6943,6 +6985,16 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/jest-runtime/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
    "node_modules/jest-runtime/node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6977,6 +7029,26 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "peer": true
    },
+    "node_modules/jest-runtime/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/jest-runtime/node_modules/has-flag": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6986,6 +7058,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/jest-runtime/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/jest-runtime/node_modules/strip-bom": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -10248,6 +10332,26 @@
        "concat-map": "0.0.1"
      }
    },
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "peer": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/test-exclude/node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
  "type": "module",
  "description": "The XRP Ledger Dev Portal is the authoritative source for XRP Ledger documentation, including the `rippled` server, client libraries, and other open-source XRP Ledger software.",
  "scripts": {
-    "build-css": "sass --load-path styles/scss styles/xrpl.scss ./content/static/css/devportal2024-v1.css --style compressed --no-source-map",
-    "build-css-watch": "sass --watch --load-path styles/scss styles/xrpl.scss ./content/static/css/devportal2024-v1.css --style compressed --no-source-map",
+    "build-css": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map",
+    "build-css-watch": "sass --watch --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map",
    "start": "realm develop"
  },
  "keywords": [],
--- a/redocly.yaml
+++ b/redocly.yaml
@@ -90,8 +90,7 @@ theme:
          - label: XRPL Jobs
            href: https://jobs.xrpl.org/
            external: true
-          - label: XRPL Community Blog
-            page: blog/index.md
+          - page: blog/index.page.tsx
          - label: XRPL Grants
            href: https://xrplgrants.org/
            external: true
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
--- a/static/img/blog/advisories.png
+++ b/static/img/blog/advisories.png
--- a/static/img/blog/amendments.png
+++ b/static/img/blog/amendments.png
--- a/static/img/blog/blog-check-light-mode.svg
+++ b/static/img/blog/blog-check-light-mode.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1663_35630)">
+<path d="M12 5.75L7 10.75L4 7.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1663_35630">
+<rect width="16" height="16" fill="black"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/img/blog/blog-check.svg
+++ b/static/img/blog/blog-check.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1663_35630)">
+<path d="M12 5.75L7 10.75L4 7.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1663_35630">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/static/img/blog/blog-hero.svg
+++ b/static/img/blog/blog-hero.svg
@@ -0,0 +1,144 @@
+<svg width="468" height="308" viewBox="0 0 468 308" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_172_65)">
+        <path
+            d="M18 37C18 25.9543 26.9543 17 38 17H430C441.046 17 450 25.9543 450 37V269C450 280.046 441.046 289 430 289H38C26.9543 289 18 280.046 18 269V37Z"
+            fill="url(#paint0_linear_172_65)" />
+    </g>
+    <path
+        d="M34.0001 53C34.0001 41.9543 42.9544 33 54.0001 33L414 33C425.046 33 434 41.9543 434 53V253C434 264.046 425.046 273 414 273H54.0001C42.9544 273 34.0001 264.046 34.0001 253L34.0001 53Z"
+        fill="url(#paint1_linear_172_65)" />
+    <path
+        d="M147.355 135.33C147.355 133.931 148.337 133.364 149.548 134.064L155.425 137.457L155.425 226.34L149.548 222.947C148.337 222.248 147.355 220.547 147.355 219.149L147.355 135.33Z"
+        fill="#181818" />
+    <rect width="151.692" height="10.9195" rx="2.53178" transform="matrix(0.866025 -0.5 0.866025 0.5 146 134.963)"
+        fill="#454549" />
+    <g filter="url(#filter1_d_172_65)">
+        <rect width="150.89" height="88.3608" rx="2" transform="matrix(0.866025 -0.5 2.20305e-08 1 155.411 139.45)"
+            fill="#232325" />
+        <rect width="100.728" height="8.83369" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 193.333 143.867)" fill="#454549" />
+        <circle cx="13.5004" cy="13.5004" r="13.5004" transform="matrix(0.866025 -0.5 2.20305e-08 1 163.563 144.124)"
+            fill="#7919FF" />
+        <rect width="100.728" height="8.83369" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 162.415 188.035)" fill="#454549" />
+        <rect width="100.728" height="8.83369" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 162.415 202.39)" fill="#454549" />
+        <circle cx="13.5004" cy="13.5004" r="13.5004" transform="matrix(0.866025 -0.5 2.20305e-08 1 256.272 130.578)"
+            fill="#2DCF78" />
+        <path
+            d="M262.539 146.219C262.473 144.601 263.523 142.544 264.872 141.648L267.325 140.02C268.675 139.125 269.833 139.716 269.899 141.334"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M267.362 133.197C268.262 133.657 268.328 135.275 267.509 136.801C266.689 138.327 265.343 139.296 264.503 138.796C263.664 138.295 263.539 136.791 264.295 135.232C265.05 133.673 266.464 132.811 267.362 133.197"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M270.975 136.842L272.816 135.621C273.858 134.929 274.695 135.356 274.746 136.607" stroke="white"
+            stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M272.78 130.13C273.424 130.458 273.472 131.635 272.885 132.704C272.299 133.773 271.321 134.498 270.739 134.129C270.157 133.76 270.047 132.623 270.633 131.554C271.158 130.526 272.14 129.875 272.78 130.13"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <path
+        d="M168.106 149.472C168.106 148.074 169.087 147.507 170.298 148.206L176.637 151.865L176.637 245.821L170.298 242.161C169.087 241.462 168.106 239.762 168.106 238.363L168.106 149.472Z"
+        fill="#181818" />
+    <rect width="160.348" height="11.5426" rx="2.53178" transform="matrix(0.866025 -0.5 0.866025 0.5 166.673 149.228)"
+        fill="#454549" />
+    <g filter="url(#filter2_d_172_65)">
+        <rect width="159.5" height="93.403" rx="2" transform="matrix(0.866025 -0.5 2.20305e-08 1 176.622 153.972)"
+            fill="#232325" />
+        <rect width="106.476" height="9.33777" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 216.707 144.634)" fill="#454549" />
+        <rect width="106.476" height="9.33777" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 216.707 158.641)" fill="#454549" />
+        <circle cx="14.2708" cy="14.2708" r="14.2708" transform="matrix(0.866025 -0.5 2.20305e-08 1 185.238 158.913)"
+            fill="#7919FF" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M191.862 175.447C191.792 173.736 192.902 171.562 194.329 170.615L196.922 168.894C198.348 167.948 199.573 168.573 199.643 170.283"
+            fill="#7919FF" />
+        <path
+            d="M191.862 175.447C191.792 173.736 192.902 171.562 194.329 170.615L196.922 168.894C198.348 167.948 199.573 168.573 199.643 170.283"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M196.96 161.682C197.912 162.168 197.982 163.878 197.116 165.492C196.25 167.105 194.826 168.129 193.939 167.6C193.052 167.071 192.92 165.481 193.718 163.833C194.517 162.185 196.011 161.273 196.96 161.682"
+            fill="#7919FF" />
+        <path
+            d="M196.96 161.682C197.912 162.168 197.982 163.878 197.116 165.492C196.25 167.105 194.826 168.129 193.939 167.6C193.052 167.071 192.92 165.481 193.718 163.833C194.517 162.185 196.011 161.273 196.96 161.682"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M200.78 165.535L202.725 164.244C203.828 163.513 204.712 163.964 204.766 165.286" fill="#7919FF" />
+        <path d="M200.78 165.535L202.725 164.244C203.828 163.513 204.712 163.964 204.766 165.286" stroke="white"
+            stroke-linecap="round" stroke-linejoin="round" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M202.688 158.44C203.368 158.787 203.419 160.031 202.799 161.161C202.179 162.291 201.145 163.057 200.53 162.667C199.915 162.277 199.799 161.076 200.419 159.946C200.974 158.859 202.011 158.17 202.688 158.44"
+            fill="#7919FF" />
+        <path
+            d="M202.688 158.44C203.368 158.787 203.419 160.031 202.799 161.161C202.179 162.291 201.145 163.057 200.53 162.667C199.915 162.277 199.799 161.076 200.419 159.946C200.974 158.859 202.011 158.17 202.688 158.44"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <rect width="106.476" height="9.33777" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 184.025 205.33)" fill="#454549" />
+        <rect width="106.476" height="9.33777" rx="2.71323"
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 184.025 220.504)" fill="#454549" />
+        <circle cx="14.2708" cy="14.2708" r="14.2708" transform="matrix(0.866025 -0.5 2.20305e-08 1 283.238 144.594)"
+            fill="#2DCF78" />
+        <path
+            d="M289.862 161.127C289.792 159.417 290.902 157.243 292.329 156.296L294.922 154.575C296.349 153.628 297.573 154.253 297.643 155.964"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M294.96 147.362C295.913 147.848 295.982 149.559 295.116 151.172C294.25 152.785 292.826 153.81 291.939 153.28C291.052 152.751 290.92 151.162 291.719 149.514C292.517 147.866 294.011 146.954 294.96 147.362"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M298.781 151.216L300.726 149.925C301.828 149.193 302.712 149.645 302.766 150.966" stroke="white"
+            stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M300.688 144.12C301.368 144.467 301.419 145.711 300.799 146.841C300.18 147.971 299.145 148.737 298.53 148.347C297.915 147.957 297.799 146.756 298.419 145.626C298.974 144.539 300.011 143.851 300.688 144.12"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <defs>
+        <filter id="filter0_d_172_65" x="0" y="0" width="468" height="308" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="1" />
+            <feGaussianBlur stdDeviation="9" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0.5 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <filter id="filter1_d_172_65" x="127.748" y="39.8007" width="186.003" height="219.134"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="3.4601" />
+            <feGaussianBlur stdDeviation="13.832" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <filter id="filter2_d_172_65" x="148.958" y="50.0175" width="193.459" height="228.481"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="3.4601" />
+            <feGaussianBlur stdDeviation="13.832" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_172_65" x1="-50.0276" y1="342.55" x2="490.123" y2="230.057"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FEFF01" />
+            <stop offset="0.352722" stop-color="#FF2D9A" />
+            <stop offset="0.635235" stop-color="#E24CFF" />
+            <stop offset="1" stop-color="#9A52FF" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_172_65" x1="34.0001" y1="206.488" x2="458.715" y2="100.387"
+            gradientUnits="userSpaceOnUse">
+            <stop offset="0.048982" />
+            <stop offset="0.998963" stop-color="#343437" />
+        </linearGradient>
+    </defs>
+</svg>
--- a/static/img/blog/developer_reflections.png
+++ b/static/img/blog/developer_reflections.png
--- a/static/img/blog/development.png
+++ b/static/img/blog/development.png
--- a/static/img/blog/features.png
+++ b/static/img/blog/features.png
--- a/static/img/blog/gateway_bulletin.png
+++ b/static/img/blog/gateway_bulletin.png
--- a/static/img/blog/general.png
+++ b/static/img/blog/general.png
--- a/static/img/blog/release_notes.png
+++ b/static/img/blog/release_notes.png
--- a/static/img/blog/security.png
+++ b/static/img/blog/security.png
--- a/static/img/icons/chevron-arrow-down.svg
+++ b/static/img/icons/chevron-arrow-down.svg
@@ -0,0 +1,5 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M5.46875 6.53125L1.21875 2.28125C0.90625 1.96875 0.90625 1.5 1.21875 1.21875L1.90625 0.5C2.21875 0.21875 2.6875 0.21875 2.96875 0.5L5.96875 3.53125L9 0.5C9.28125 0.21875 9.75 0.21875 10.0625 0.5L10.75 1.21875C11.0625 1.5 11.0625 1.96875 10.75 2.28125L6.5 6.53125C6.21875 6.8125 5.75 6.8125 5.46875 6.53125Z"
+        fill="white" />
+</svg>
--- a/static/img/icons/lightmode/chevron-arrow-down.svg
+++ b/static/img/icons/lightmode/chevron-arrow-down.svg
@@ -0,0 +1,5 @@
+<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M5.46875 6.53125L1.21875 2.28125C0.90625 1.96875 0.90625 1.5 1.21875 1.21875L1.90625 0.5C2.21875 0.21875 2.6875 0.21875 2.96875 0.5L5.96875 3.53125L9 0.5C9.28125 0.21875 9.75 0.21875 10.0625 0.5L10.75 1.21875C11.0625 1.5 11.0625 1.96875 10.75 2.28125L6.5 6.53125C6.21875 6.8125 5.75 6.8125 5.46875 6.53125Z"
+        fill="black" />
+</svg>
--- a/styles/_blog.scss
+++ b/styles/_blog.scss
@@ -1,14 +1,258 @@
 // These styles are used by the dev-blog pages, which are in another repo.

 .dev-blog {
-  .labels-wrap {
+  .image-container {
+    transform: translateY(15%);
+    z-index: 1;
+  }
+
+  .text-bg {
+    background-color: $gray-800;
+    padding: 60px 40px;
+    width: 100%;
+    border-radius: 30px;
+  }
+
+  @media (min-width: 992px) {
+    .image-container {
+      transform: translateX(15%);
+    }
+
+    .text-bg {
+      padding: 50px 60px;
+    }
+  }
+
+  .line-clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  #blog-purple {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  #card-date {
+    color: $gray-400;
+  }
+
+  .category-badge {
+    max-width: 180px;
+    border-radius: 30px;
+    border: solid 2px;
+    padding: 1px;
+    text-align: center;
+    word-wrap: break-word;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .post-date {
+    text-decoration: overline solid #32E685 10%;
+  }
+
+  #general-badge {
+    background-color: #343437;
+    color: #FFFFFF;
+  }
+
+  #release_notes-badge {
+    background-color: #145C35;
+    color: #32E685;
+  }
+
+  #advisories-badge {
+    background-color: #4C1A00;
+    color: #FF6719;
+  }
+
+  #amendments-badge {
+    background-color: #4B4C00;
+    color: #FAFF19;
+  }
+
+  #development-badge {
+    background-color: #20004C;
+    color: #7919FF;
+  }
+
+  #developer_reflections-badge {
+    background-color: #002E4C;
+    color: #19A3FF;
+  }
+
+  #gateway_bulletins-badge {
+    background-color: #40004C;
+    color: #D919FF;
+  }
+
+  #features-badge {
+    background-color: #145C35;
+    color: #32E685;
+  }
+
+  #security-badge {
+    background-color: #4C0026;
+    color: #FF198B;
+  }
+
+  #category-list {
+    @each $category in "general", "developer_reflections", "amendments",
+    "advisories", "release_notes", "development", "gateway_bulletins", "features", "security"
+
+      {
+      ##{$category} {
+        content: url("../img/blog/#{$category}.png");
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .category_sidebar {
+    position: sticky;
+    top: 10px;
+  }
+
+  .category-checkbox {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropdown {
+    position: relative;
    display: inline-block;
  }

-  a.badge-primary {
-    text-decoration: none;
-    &:hover {
-      text-decoration: none;
+  .dropdown-btn {
+    color: $white;
+    background-color: $gray-800;
+    border-color: $gray-800;
+    border-style: solid;
+    border-radius: 4px;
+    padding: 8px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    text-align: start;
+    padding-right: 10px;
+
+    img {
+      content: url("../img/icons/chevron-arrow-down.svg");
+      width: 10px;
+      height: 13px;
+      padding: 8px;
    }
  }
+
+  .dropdown-content {
+    display: flex;
+    align-items: start;
+    background-color: $gray-800;
+    padding: 16px 8px;
+    width: 254px;
+    height: auto;
+    border-radius: 4px;
+  }
+
+  .category-checkbox label {
+    font-weight: normal;
+    font-size: 14px;
+    margin: 0;
+    padding-left: 26px;
+  }
+
+  .category-header {
+    font-weight: normal;
+    width: 200px;
+    color: $gray-100;
+  }
+
+  label {
+    margin: 0;
+    padding-left: 8px;
+    color: $white;
+  }
+
+  .blog-filter h6 {
+    font-size: 16px;
+  }
+
+  .blog-filter[type="checkbox"]::before {
+    position: relative;
+    display: block;
+    width: 20px;
+    height: 20px;
+
+    content: "";
+    background: $gray-900;
+
+    border-radius: 4px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $gray-400;
+  }
+
+  .blog-filter[type="checkbox"]::after {
+    position: relative;
+    display: block;
+
+    top: -20px;
+    width: 20px;
+    height: 20px;
+
+    content: "";
+
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 4px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $gray-400;
+  }
+
+  .blog-filter[type="checkbox"]:checked::before {
+    background: $gray-900;
+    border: none;
+    border-radius: 0;
+  }
+
+  .blog-filter[type="checkbox"]:checked::after {
+    background-image: url(../img/blog/blog-check.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: $blue-purple-500;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $blue-purple-500;
+    border-radius: 4px;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):checked:hover::after {
+    background-image: url(../img/blog/blog-check.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $blue-purple-600;
+    border-radius: 4px;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::before {
+    background: $gray-900;
+    border: none;
+    border-radius: 0;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::after {
+    background: $gray-900;
+    border: none;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $blue-purple-600;
+    border-radius: 4px;
+  }
 }
--- a/styles/_top-nav.scss
+++ b/styles/_top-nav.scss
@@ -318,6 +318,10 @@ $nav-height: 80px;
        margin-left: 3.5rem;
        margin-right: 0.5rem;
      }
+      #topnav-button {
+        margin-left: 0.2rem;
+        margin-right: 1rem;
+      }
    }
  } // End desktop styles

@@ -379,6 +383,12 @@ $nav-height: 80px;
        background-color: $gray-900;
        padding: 1rem;
      }
+
+      #topnav-button {
+        background-color: $gray-900;
+        padding: 1rem 1.5rem;
+      }
+
      #topnav-search {
        background-color: $gray-900;

--- a/styles/light/_light-theme.scss
+++ b/styles/light/_light-theme.scss
@@ -404,6 +404,10 @@ article a.button,
    }
  }

+  #topnav-button {
+    background-color: $gray-200;
+  }
+
  // Top nav mobile
  @include media-breakpoint-down(md) {
    .navbar-toggler {
@@ -1234,3 +1238,104 @@ main article .card-grid {
      $gray-100 -2px -2px 3px, $gray-100 -2px -2px 4px;
  }
 }
+
+.dev-blog {
+  .text-bg {
+    background-color: $white;
+  }
+
+  #card-date {
+    color: $gray-600;
+  }
+
+  .category-header {
+    color: $gray-900;
+  }
+
+  label {
+    color: $gray-700;
+  }
+
+  .blog-filter[type="checkbox"]::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:checked::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):checked:hover::after {
+    background-image: url(../img/blog/blog-check-light-mode.svg);
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::before {
+    background: $gray-100;
+  }
+
+  .blog-filter[type="checkbox"]:not(:disabled):hover::after {
+    background: $gray-100;
+  }
+
+  .post-date {
+    text-decoration: overline solid #145C35 10%;
+  }
+
+  #general-badge {
+    background-color: #FFFFFF;
+    color: #343437; 
+  }
+
+  #release_notes-badge {
+    background-color: #32E685;
+    color: #145C35; 
+  }
+
+  #advisories-badge {
+    background-color: #FF6719;
+    color: #4C1A00;
+  }
+
+  #amendments-badge {
+    background-color: #FAFF19;
+    color: #4B4C00; 
+  }
+
+  #development-badge {
+    background-color: #7919FF;
+    color: #20004C;
+  }
+
+  #developer_reflections-badge {
+    background-color: #19A3FF;
+    color: #002E4C;
+  }
+
+  #gateway_bulletins-badge {
+    background-color: #D919FF;
+    color: #40004C;
+  }
+
+  #features-badge {
+    background-color: #32E685;
+    color: #145C35;
+  }
+
+  #security-badge {
+    background-color: #FF198B;
+    color: #4C0026;
+  }
+
+  .dropdown-btn {
+    color: $gray-900;
+    background-color: $gray-200;
+    border-color: $gray-200;
+
+    img {
+      content: url("../img/icons/lightmode/chevron-arrow-down.svg");
+    }
+  }
+
+  .dropdown-content {
+    background-color: $gray-200;
+  }
+}