Fetch blog post data from md file frontmatter

2025-11-10 06:45:49 +00:00 · 2024-02-05 13:22:27 +00:00
parent 02c4d08ee3
commit a4ac70ce43
8 changed files with 522 additions and 103 deletions
--- 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 allBlogPosts = Array.from(contentProvider.fsFilesList.values());
+
+        const markdownFiles = allBlogPosts.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 || "none",
+            category_id: category ? category.toLowerCase().replace(/ /g, "_") : "none",
+            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.page.tsx
+++ b/blog/index.page.tsx
@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
-import { useTranslate } from "@portal/hooks";
-import { usePageSharedData } from "@portal/hooks";
-const moment = require("moment");
+import { useTranslate, usePageSharedData } from "@portal/hooks";
+import moment from "moment";

 export const frontmatter = {
  seo: {
@@ -23,49 +22,22 @@ const categories = {
  gateway_bulletins: "Gateway Bulletins",
  features: "Features",
  security: "Security",
+  none: "Other",
 };

-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 { blogPosts } = usePageSharedData<any>('blog-posts');
+  for (const blog of blogPosts) {
+    console.log(blog)
+  }
+
  const defaultSelectedCategories = new Set(Object.keys(categories));

  const [selectedCategories, setSelectedCategories] = useState(
    defaultSelectedCategories
  );
-  const [cards, setCards] = useState(blogs);
+  const [cards, setCards] = useState(blogPosts);

  const toggleCategory = (category) => {
    const newSelectedCategories = new Set(selectedCategories);
@@ -78,11 +50,11 @@ export default function Index() {
  };

  const filteredCards = cards.filter((card) =>
-    selectedCategories.has(card.label_id)
+    selectedCategories.has(card.category_id)
  );

  return (
-    <div className="landing page-blog">
+    <div className="landing dev-blog">
      <div className="mt-20">
        <div className="position-relative d-none-sm">
          <img
@@ -120,9 +92,9 @@ export default function Index() {
                      paddingBottom: "4px",
                    }}
                  >
-                    {translate(`${moment(blogs[0].date).format("MMM")}`)}
+                    {translate(`${moment(blogPosts[0].date).format("MMM")}`)}
                  </span>
-                  {translate(` ${moment(blogs[0].date).format("DD YYYY")}`)}
+                  {translate(` ${moment(blogPosts[0].date).format("DD YYYY")}`)}
                </h4>
                <div className="pb-8">
                  <p
@@ -133,18 +105,18 @@ export default function Index() {
                      borderColor: "#32E685 !important",
                    }}
                  >
-                    {translate(`${blogs[0].label}`)}
+                    {translate(`${blogPosts[0].category}`)}
                  </p>
                </div>
                <h2 className="mb-8 h4 h2-sm font-weight-bold">
-                  {translate(`${blogs[0].title}`)}
+                  {translate(`${blogPosts[0].title}`)}
                </h2>
              </div>
-              <p className="mb-4">{translate(`${blogs[0].description}`)}</p>
+              <p className="mb-4">{translate(`${blogPosts[0].description}`)}</p>
              <div className="d-lg-block">
                <a
                  className="btn btn-primary btn-arrow"
-                  href={`${blogs[0].link}`}
+                  href={`${blogPosts[0].link}`}
                >
                  {translate("Read More")}
                </a>
@@ -190,23 +162,23 @@ export default function Index() {
              {filteredCards.map((card, i) => (
                <a
                  key={card.title + i}
-                  className={`event-card ${card.label_id}`}
+                  className={`event-card ${card.category_id}`}
                  href={card.link}
                  id={card.title + i}
                >
                  <div
                    className="event-card-header"
                    style={{
-                      background: `url(${card.image}) no-repeat`,
+                      background: require("../static/img/events/Hackathons.png"),
                    }}
                  >
-                    <div className="event-card-title">{card.title}</div>
+                    <div className="event-card-title">{translate(card.title)}</div>
                  </div>
                  <div className="event-card-body">
-                    <p>{card.description}</p>
+                    <p>{translate(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>
+                    <span className="d-flex icon icon-date">{translate(card.date.toString())}</span>
                  </div>
                </a>
              ))}
--- 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
@@ -21,6 +21,7 @@
    "@xrplf/isomorphic": "^1.0.0-beta.1",
    "axios": "^1.6.2",
    "clsx": "^2.0.0",
+    "gray-matter": "^4.0.3",
    "lottie-react": "^2.4.0",
    "moment": "^2.29.4",
    "react": "^18.2.0",
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
--- a/styles/_blog.scss
+++ b/styles/_blog.scss
@@ -11,4 +11,222 @@
      text-decoration: none;
    }
  }
+
+  #blog-purple {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  .category_sidebar {
+    position: sticky;
+    top: 10px;
+  }
+  
+  .category-checkbox {
+    display: flex;
+    align-items: center;
+  }
+
+  .category-checkbox label {
+    font-weight: normal;
+    font-size: 14px;
+    margin: 0;
+    padding-left: 26px;
+  }
+
+  .category-header {
+    font-weight: bold;
+    color: $gray-300;
+  }
+
+  .event-hero {
+    color: $gray-100;
+
+    p {
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 32px;
+    }
+  }
+
+  .event-save-date {
+    color: $white;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  .event-small-gray {
+    color: $gray-200;
+  }
+
+  .event-card {
+    max-width: 311px;
+    margin: 32px auto;
+    transition: all 0.35s ease-out;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-clip: border-box;
+
+    background-color: $card-bg;
+    box-shadow: 0px 5px 40px $black;
+
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 8px;
+
+    font-size: 16px;
+    line-height: 24px;
+    color: $gray-200;
+
+    .event-card-header {
+      position: relative;
+      height: 176px;
+      background-size: contain !important;
+      width: 100%;
+      border-radius: 8px 8px 0 0;
+    }
+
+    .event-card-title {
+      position: absolute;
+      bottom: 32px;
+      padding: 0 32px;
+      color: $gray-100;
+
+      font-weight: bold;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .event-card-body {
+      padding: 32px;
+    }
+
+    .event-card-footer {
+      padding: 0 32px 32px;
+    }
+
+    .event-card-footer .icon::before {
+      height: 24px;
+      width: 24px;
+      content: "";
+      margin-right: 8px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    .icon-date::before {
+      background: url(../img/events/event-date.svg);
+    }
+
+    .icon-location::before {
+      background: url(../img/events/event-location.svg);
+    }
+  }
+
+  //end event card
+
+  @media (min-width: 992px) {
+    .event-card {
+      max-width: 347px;
+      margin: 32px;
+    }
+
+    .event-card-header {
+      height: 197px !important;
+    }
+  }
+
+  a.event-card:hover {
+    transform: translateY(-16px);
+    text-decoration: none;
+  }
+
+  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/events/event-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/events/event-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/_pages.scss
+++ b/styles/_pages.scss
@@ -637,16 +637,6 @@
  right: 0px;
 }

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