Update Navigation for Blog site

@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;
+}

@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",
+    },
+  ];
+}

blog/index.page.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useState } from "react";
 import { useTranslate, usePageSharedData } from "@portal/hooks";
 import moment from "moment";
+import { BlogFooter } from "@theme/components/Footer/BlogFooter";
 
 export const frontmatter = {
   seo: {
@@ -123,8 +124,8 @@ export default function Index() {
 
         {/* Other Blog Posts*/}
         <section className="container-new py-26">
-          <div className="row col-12 m-0 p-0 mt-4 pt-2">
-            <div className="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
+          <div className="row w-100 mx-auto px-2">
+            <div className="row-cols-lg-2 m-0 p-0 mt-2 d-none d-lg-block">
               {/* Filters Desktop*/}
               <div className="p-3 category_sidebar">
                 <p className="mb-3 category-header">Filter by Category:</p>
@@ -155,27 +156,27 @@ export default function Index() {
               </div>
             </div>
             {/* Cards */}
-            <div className="right row col row-cols-lg-2 m-0 p-0">
+            <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} col-sm pb-5 px-lg-4`}
+                  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="w-100 mb-4"
+                      className="mb-4"
                     />
                     <p
                       id={`${card.category_id}-badge`}
-                      className="category-badge mb-5"
+                      className="category-badge"
                     >
                       {translate(card.category)}
                     </p>
                   </div>
-                  <div className="mb-4">
+                  <div>
                     <p id="card-date" className="mb-0">
                       {moment(translate(card.date)).format("MMM DD, YYYY")}
                     </p>
@@ -198,6 +199,7 @@ export default function Index() {
           </div>
         </section>
       </div>
+      <BlogFooter />
     </div>
   );
 }

styles/_blog.scss

@@ -103,6 +103,8 @@
       {
       ##{$category} {
         content: url("../img/blog/#{$category}.png");
+        max-width:100%;
+        width:100%;
       }
     }
   }

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;