Blog: unify label chips, footer; fix contrast

- Remove blog-specific footer. (See also: #2501, #2503)
- Fix markup that was invalidly reusing the same HTML ID for multiple
  elements.
- Use existing chips for blog categories instead of having separate
  styles for blog chips. This fixes some issues where the contrast of
  the blog category chips was not meeting WCAG contrast standards.
- Update yellow chip in light mode to meet WCAG AAA contrast standard.

@theme/components/Footer/BlogFooter.tsx

@@ -1,136 +0,0 @@
-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;
-}

blog/index.page.tsx

@@ -2,7 +2,6 @@ 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: {
@@ -95,12 +94,11 @@ export default function Index() {
                   {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
                 </h4>
                 <div className="pb-8">
-                  <p
+                  <div
-                    id={`${heroPost.category_id}-badge`}
+                    className={`d-inline-block mb-2 label blog-category-${heroPost.category_id}`}
-                    className="category-badge"
                   >
                     {translate(`${heroPost.category}`)}
-                  </p>
+                  </div>
                 </div>
                 <h4 className="mb-8 h2-sm font-weight-bold">
                   <a href={`/blog/${heroPost.link}`}>
@@ -206,12 +204,11 @@ export default function Index() {
                       id={`${card.category_id}`}
                       className="mb-4"
                     />
-                    <p
+                    <div
-                      id={`${card.category_id}-badge`}
+                      className={`d-inline-block label blog-category-${card.category_id}`}
-                      className="category-badge"
                     >
                       {translate(card.category)}
-                    </p>
+                    </div>
                   </div>
                   <div>
                     <p id="card-date" className="mb-0">
@@ -240,7 +237,6 @@ export default function Index() {
           </div>
         </section>
       </div>
-      <BlogFooter />
     </div>
   );
 }

styles/_blog.scss

@@ -40,66 +40,10 @@
     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"

styles/_status-labels.scss

@@ -214,10 +214,10 @@
 
     html.light & {
       background-color: $yellow-200;
-      color: $yellow-800;
+      color: $yellow-900;
       .badge-pill {
         color: $yellow-200;
-        background-color: $yellow-800;
+        background-color: $yellow-900;
       }
       &:hover {
         background-color: $yellow-300;
@@ -339,6 +339,7 @@
   &.label-payment-channel,
   &.label-use-infrastructure,
   &.label-use-security,
+  &.blog-category-development,
   &.chip-indigo {
     @include chip-indigo;
   }
@@ -348,6 +349,8 @@
   &.label-ブロックチェーン,
   &.label-non-fungible-tokens-nfts,
   &.label-use-nfts,
+  &.blog-category-release_notes,
+  &.blog-category-features,
   &.chip-green {
     @include chip-green;
   }
@@ -357,6 +360,7 @@
   &.label-コアサーバ,
   &.label-use-interoperability,
   &.label-use-web_monetization,
+  &.blog-category-gateway_bulletins,
   &.chip-purple  {
     @include chip-purple;
   }
@@ -367,6 +371,7 @@
   &.label-セキュリティ,
   &.label-use-gaming,
   &.label-use-defi,
+  &.blog-category-amendments,
   &.chip-yellow {
     @include chip-yellow;
   }
@@ -379,6 +384,7 @@
   &.label-トランザクション送信,
   &.label-use-developer_tooling,
   &.label-use-payments,
+  &.blog-category-developer_reflections,
   &.chip-blue {
     @include chip-blue;
   }
@@ -390,6 +396,7 @@
   &.label-開発,
   &.label-use-wallet,
   &.label-use-sustainability,
+  &.blog-category-advisories,
   &.chip-orange {
     @include chip-orange;
   }
@@ -402,6 +409,7 @@
   &.label-データ保持,
   &.label-use-exchanges,
   &.label-use-custody,
+  &.blog-category-security,
   &.chip-magenta {
     @include chip-magenta;
   }