Fixed CSS not being loaded

2025-11-04 11:55:50 +00:00 · 2024-02-02 12:14:31 +00:00
parent 6921a6b524
commit 02c4d08ee3
7 changed files with 156 additions and 37 deletions
--- a/blog/index-old.md
+++ b/blog/index-old.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
@@ -1,5 +1,8 @@
 import * as React from "react";
+import { useState } from "react";
 import { useTranslate } from "@portal/hooks";
+import { usePageSharedData } from "@portal/hooks";
+const moment = require("moment");

 export const frontmatter = {
  seo: {
@@ -10,20 +13,85 @@ export const frontmatter = {

 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",
+};
+
+const blogs = [
+  {
+    title: "Introducing XRP Ledger version 2.0.1",
+    label: "Release Notes",
+    label_id: "release_notes",
+    date: "2024-01-09",
+    image: require("../static/img/events/Hackathons.png"),
+    link: "/blog/2024/rippled-2.0.1/",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra magna ac placerat vestibulum lectus mauris.",
+  },
+  {
+    title: "Introducing XRP Ledger version 2.0.0",
+    label: "Release Notes",
+    label_id: "release_notes",
+    date: "2024-01-09",
+    image: require("../static/img/events/Hackathons.png"),
+    link: "/blog/2024/rippled-2.0.0/",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra magna ac placerat vestibulum lectus mauris.",
+  },
+  {
+    title: "Developer Reflections: Web3Auth",
+    label: "Developer Reflections",
+    label_id: "developer_reflections",
+    date: "2024-01-23",
+    image: require("../static/img/events/Hackathons.png"),
+    link: "/blog/2024/web3auth/",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra magna ac placerat vestibulum lectus mauris.",
+  },
+];
+
 export default function Index() {
  const { translate } = useTranslate();
+  const defaultSelectedCategories = new Set(Object.keys(categories));
+
+  const [selectedCategories, setSelectedCategories] = useState(
+    defaultSelectedCategories
+  );
+  const [cards, setCards] = useState(blogs);
+
+  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.label_id)
+  );

  return (
-    <div className="landing">
-      <div>
+    <div className="landing page-blog">
+      <div className="mt-20">
        <div className="position-relative d-none-sm">
          <img
            alt="background purple waves"
-            src={require("../img/backgrounds/home-purple.svg")}
-            className="position-absolute mt-20"
+            src={require("../static/img/backgrounds/home-purple.svg")}
+            id="blog-purple"
          />
        </div>
-        <section className="py-26 text-center">
+        <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>
@@ -31,19 +99,19 @@ export default function Index() {
            </div>
          </div>
        </section>
-
        {/* Latest Blog Post */}
        <section className="container-new py-16">
          <div className="d-flex flex-column flex-lg-row align-items-lg-center mt-20">
-            <div className="mb-2">
+            {/* Banner Image */}
+            <div className="mb-2-sm">
              <img
                alt="default-alt-text"
                src={require("../static/img/blog/blog-hero.svg")}
-                className="w-100"
+                className="w-100 d-none-sm"
              />
            </div>
            {/* Text */}
-            <div className="col justify-content-center w-100 blog-hero-background">
+            <div className="col justify-content-center px-lg-5 w-100">
              <div className="d-flex flex-column">
                <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
                  <span
@@ -52,9 +120,9 @@ export default function Index() {
                      paddingBottom: "4px",
                    }}
                  >
-                    {translate("Jan")}
+                    {translate(`${moment(blogs[0].date).format("MMM")}`)}
                  </span>
-                  {translate(" 09 2024")}
+                  {translate(` ${moment(blogs[0].date).format("DD YYYY")}`)}
                </h4>
                <div className="pb-8">
                  <p
@@ -65,22 +133,18 @@ export default function Index() {
                      borderColor: "#32E685 !important",
                    }}
                  >
-                    {translate("Release Notes")}
+                    {translate(`${blogs[0].label}`)}
                  </p>
                </div>
                <h2 className="mb-8 h4 h2-sm font-weight-bold">
-                  {translate("Introducing XRP Ledger version 2.0.1")}
+                  {translate(`${blogs[0].title}`)}
                </h2>
              </div>
-              <p className="mb-4">
-                {translate(
-                  "Lorem ipsum dolor sit amet consectetur. Justo sed lectus integer elit amet nibh hac in. In vitae mauris lectus in fringilla. Lorem nulla urna eget ipsum. Potenti fames nec est tincidunt vel praesent. Et at velit id purus consequat ut. Nulla sed mi amet morbi amet. A scelerisque proin mi purus. Pellentesque morbi ipsum gravida iaculis mi. Pellentesque malesuada neque pharetra sed. Curabitur nibh facilisi ut ac varius ut duis. Pretium turpis maecenas elementu..."
-                )}
-              </p>
+              <p className="mb-4">{translate(`${blogs[0].description}`)}</p>
              <div className="d-lg-block">
                <a
                  className="btn btn-primary btn-arrow"
-                  href="blog/rippled-2.0.0/"
+                  href={`${blogs[0].link}`}
                >
                  {translate("Read More")}
                </a>
@@ -89,9 +153,65 @@ export default function Index() {
          </div>
        </section>

-        {/* Blogs and Filters */}
+        {/* Other Blog Posts*/}
        <section className="container-new py-26">
-          <p>SECTION</p>
+          <div className="row col-12 m-0 p-0 mt-4 pt-2">
+            {/* Filters  */}
+            <div className="p-3 category_sidebar">
+              <p className="mb-3 category-header">Filter by Category:</p>
+              <div className="d-flex flex-column p-3">
+                {Object.keys(categories).map((item) => (
+                  <div
+                    key={item}
+                    className="cat_checkbox 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}`}
+                    >
+                      {categories[item]}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            {/* Cards */}
+            <div className="row col row-cols-lg-2 m-0 p-0">
+              <div></div>
+              {filteredCards.map((card, i) => (
+                <a
+                  key={card.title + i}
+                  className={`event-card ${card.label_id}`}
+                  href={card.link}
+                  id={card.title + i}
+                >
+                  <div
+                    className="event-card-header"
+                    style={{
+                      background: `url(${card.image}) no-repeat`,
+                    }}
+                  >
+                    <div className="event-card-title">{card.title}</div>
+                  </div>
+                  <div className="event-card-body">
+                    <p>{card.description}</p>
+                  </div>
+                  <div className="mt-lg-auto event-card-footer d-flex flex-column">
+                    <span className="d-flex icon icon-date">{card.date}</span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
        </section>
      </div>
    </div>
--- a/blog/sidebars.yaml
+++ b/blog/sidebars.yaml
@@ -1,4 +1,5 @@
 - group: Blog
+  page: blog/index.page.tsx
  expanded: true
  items:
    - group: '2024'
--- 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/styles/_pages.scss
+++ b/styles/_pages.scss
@@ -637,6 +637,16 @@
  right: 0px;
 }

+// Blog page
+.page-blog {
+
+  #blog-purple {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+}
+
 // Events page
 .page-events {
  #event-hero-image {