feat: category refresh

CONTRIBUTING.md

@@ -61,6 +61,15 @@ author: "John Doe"
     - Must have the same name.
     - This name should be specified in the frontmatter's `cover` property.
 - **category:** The `category` property should be a string having all the categories for the blog post separated by a comma. For e.g. if we want a post that is visible in the _Featured_ and _Sessions_ tabs, the value would be `featured, sessions`.
+    - Category has the following filters:
+      - **Authentication & Identity**
+      - **Security & Compliance**
+      - **Developer Guides & Tutorials**
+      - **Product Updates & Announcements**
+      - **Company News & Events**
+      - **Case Studies & Customer Stories**
+      - **Industry Insights & Trends**
+
 - **author:** Name of the author of this post.
 
 #### Content for the post

content/what-is-credential-stuffing/index.md

@@ -3,7 +3,7 @@ title: "What is Credential Stuffing?"
 description: "Most people are familiar with brute force attacks, where attackers attempt to guess passwords using characters at random paired with common password suggestions, but what is Credential Stuffing? In this we will go over this type of attack and how you can safeguard against it."
 date: "2024-02-13"
 cover: "what-is-credential-stuffing.png"
-category: "programming"
+category: "Authentication"
 author: "Joel Coutinho"
 ---
 

gatsby-node.js

@@ -1,5 +1,5 @@
 const { createFilePath } = require(`gatsby-source-filesystem`)
-
+const { categories } = require(`./src/blog-categories`)
 const webflowPosts = require("./src/blog-details")
 const getBlogCardString = require("./src/getBlogCardString")
 
@@ -49,16 +49,18 @@ exports.createPages = async ({ actions, graphql }) => {
 
 
   const postsAsHTMLString = {
-    all: "",
-    sessions: "",
-    featured: "",
-    programming: ""
+    All: "",
+    Authentication: "",
+    Security: "",
+    Tutorials: "",
+    Announcements: "",
+    News: "",
   }
 
-  const allFilters = ["all", "sessions", "featured", "programming"]
+  const allFilters = [categories.ALL, categories.ANNOUNCEMENTS, categories.AUTHENTICATION, categories.NEWS, categories.SECURITY, categories.SECURITY, categories.TUTORIALS]
   allFilters.forEach((filter) => {
     postsAsHTMLString[filter] = sortedPosts.filter((post) => {
-      if (filter === "all") {
+      if (filter === categories.ALL) {
         return true;
       }
 

src/blog-categories.js

@@ -0,0 +1,13 @@
+
+
+const categories = {
+    ALL: "All",
+    AUTHENTICATION: "Authentication",
+    SECURITY: "Security",
+    TUTORIALS: "Tutorials",
+    ANNOUNCEMENTS: "Announcements",
+    NEWS: "News",
+}
+module.exports = {
+    categories
+}

src/templates/blog-home.js

@@ -1,9 +1,10 @@
 import * as React from "react"
 
 import "../styles/blog.css"
+import { categories } from "../blog-categories";
 
 const BlogHomeTemplate = (props) => {
-  const [selectedCategory, setSelectedCategory] = React.useState("all");
+  const [selectedCategory, setSelectedCategory] = React.useState(categories.ALL);
   const [classToHideList, setClassToHideList] = React.useState("visible");
 
   React.useEffect(() => {
@@ -31,31 +32,46 @@ const BlogHomeTemplate = (props) => {
         <div className="blog-categories">
           <button
             id="tab-1-id"
-            className={`blog-categories__category ${selectedCategory === "all" && "selected"}`}
-            onClick={() => updateCategory("all")}
-            >
+            className={`blog-categories__category ${selectedCategory === categories.ALL && "selected"}`}
+            onClick={() => updateCategory(categories.ALL)}
+          >
             All
           </button>
           <button
             id="tab-2-id"
-            className={`blog-categories__category ${selectedCategory === "sessions" && "selected"}`}
-            onClick={() => updateCategory("sessions")}
-            >
-            Sessions
+            className={`blog-categories__category ${selectedCategory === categories.ANNOUNCEMENTS && "selected"}`}
+            onClick={() => {updateCategory(categories.ANNOUNCEMENTS)}}
+          >
+            Announcements
           </button>
           <button
             id="tab-3-id"
-            className={`blog-categories__category ${selectedCategory === "featured" && "selected"}`}
-            onClick={() => updateCategory("featured")}
-            >
-            Featured
+            className={`blog-categories__category ${selectedCategory === categories.AUTHENTICATION && "selected"}`}
+            onre
+            onClick={() => updateCategory(categories.AUTHENTICATION)}
+          >
+            Authentication
           </button>
           <button
             id="tab-4-id"
-            className={`blog-categories__category ${selectedCategory === "programming" && "selected"}`}
-            onClick={() => updateCategory("programming")}
+            className={`blog-categories__category ${selectedCategory === categories.TUTORIALS && "selected"}`}
+            onClick={() => updateCategory(categories.TUTORIALS)}
+          >
+            Tutorials
+          </button>
+          <button
+            id="tab-5-id"
+            className={`blog-categories__category ${selectedCategory === categories.SECURITY && "selected"}`}
+            onClick={() => updateCategory(categories.SECURITY)}
+          >
+            Security
+          </button>
+          <button
+            id="tab-6-id"
+            className={`blog-categories__category ${selectedCategory === categories.NEWS && "selected"}`}
+            onClick={() => updateCategory(categories.NEWS)}
           >
-            Programming
+            News
           </button>
         </div>
       </div>

static/blog-seo/sitemapconfig.json

@@ -344,7 +344,8 @@
     },
     {
         "location": "https://supertokens.com/blog/cloud-based-authentication"
-    }
+    },
+    {
         "location": "https://supertokens.com/blog/2fa-services"
     },
     {