feat: new category for blogposts.

fezcode · fezcode · commit 127ed6c0081e · 2025-11-27T16:43:02.000+03:00
diff --git a/public/posts/posts.json b/public/posts/posts.json
@@ -12,7 +12,7 @@
       "lazy-loading",
       "craco"
     ],
-    "category": "dev",
+    "category": "feat",
     "filename": "reducing-react-app-size.txt",
     "authors": ["fezcode"],
     "image": "/images/defaults/visuals-2TS23o0-pUc-unsplash.jpg"
diff --git a/public/timeline/timeline.json b/public/timeline/timeline.json
@@ -1,4 +1,12 @@
 [
+  {
+    "date": "2025-11-27",
+    "title": "Visual Modes",
+    "description": "Implemented different visual modes that can be set in settings page or via Command Palette.",
+    "type": "feature",
+    "icon": "RocketLaunchIcon",
+    "link": "/#/settings"
+  },
   {
     "date": "2025-11-27",
     "title": "Bundle Size Optimization",
@@ -133,4 +141,4 @@
     "icon": "CodeIcon",
     "link": "/"
   }
-]
+]
diff --git a/src/components/PostItem.js b/src/components/PostItem.js
@@ -46,7 +46,9 @@ const PostItem = ({
             ? 'var(--color-dnd-badge)'
             : category === 'gist'
               ? 'var(--color-gist-badge)'
-              : 'var(--color-takes-badge)',
+              : category === 'feat'
+                ? 'var(--color-feat-badge)'
+                : 'var(--color-takes-badge)',
   };
 
   const postBackgroundColorClass =
@@ -58,7 +60,9 @@ const PostItem = ({
           ? 'bg-dnd-card-bg'
           : category === 'gist'
             ? 'bg-gist-card-bg'
-            : 'bg-takes-card-bg';
+            : category === 'feat'
+              ? 'bg-feat-card-bg'
+              : 'bg-takes-card-bg';
 
   const postHoverBackgroundColorClass =
     category === 'dev'
@@ -69,7 +73,9 @@ const PostItem = ({
           ? 'hover:bg-dnd-card-bg-hover'
           : category === 'gist'
             ? 'hover:bg-gist-card-bg-hover'
-            : 'hover:bg-takes-card-bg-hover';
+            : category === 'feat'
+              ? 'hover:bg-feat-card-bg-hover'
+              : 'hover:bg-takes-card-bg-hover';
 
   const postTitleHoverColorClass =
     category === 'dev'
@@ -80,7 +86,9 @@ const PostItem = ({
           ? 'group-hover:text-[var(--title-hover-dnd)]'
           : category === 'gist'
             ? 'group-hover:text-[var(--title-hover-gist)]'
-            : 'group-hover:text-[var(--title-hover-takes)]';
+            : category === 'feat'
+              ? 'group-hover:text-[var(--title-hover-feat)]'
+              : 'group-hover:text-[var(--title-hover-takes)]';
 
   const categoryBadgeFontColorStyle =
     category === 'gist' || category === 'gist' ? 'text-black' : 'text-white'
diff --git a/src/components/metadata-cards/PostMetadata.js b/src/components/metadata-cards/PostMetadata.js
@@ -31,7 +31,9 @@ const PostMetadata = ({
             ? 'var(--color-dnd-badge)'
             : metadata.category === 'gist'
               ? 'var(--color-gist-badge)'
-              : 'var(--color-takes-badge)',
+              : metadata.category === 'feat'
+                ? 'var(--color-feat-badge)'
+                : 'var(--color-takes-badge)',
   };
 
   const categoryBadgeFontColorStyle =
diff --git a/src/config/colors.js b/src/config/colors.js
@@ -18,6 +18,7 @@ module.exports = {
   food: '#F4A259',
   websites: '#00FF7F',
   tools: '#e0aaff',
+  feat: '#a855f7',
   'book-light': '#4dcdff',
   'movie-light': '#e84f6d',
   'game-light': '#00e6bf',
@@ -28,6 +29,7 @@ module.exports = {
   'food-light': '#FFC780',
   'websites-light': '#4dff99',
   'tools-light': '#F0DFFF',
+  'feat-light': '#d8b4fe',
   'newspaper-background': '#fdfdf5',
   'sidebar-highlight': '#FA8072', // Duplicated from article
   'sidebar-highlight-light': '#FFB6C1', // Duplicated from article-light
@@ -46,6 +48,8 @@ module.exports = {
   'dnd-card-bg-hover': 'var(--bg-dnd-card-hover)',
   'gist-card-bg': 'var(--bg-gist-card)',
   'gist-card-bg-hover': 'var(--bg-gist-card-hover)',
+  'feat-card-bg': 'var(--bg-feat-card)',
+  'feat-card-bg-hover': 'var(--bg-feat-card-hover)',
   'book-alpha-10': 'rgba(0, 191, 255, 0.1)',
   'book-alpha-50': 'rgba(0, 191, 255, 0.5)',
   'movie-alpha-10': 'rgba(220, 20, 60, 0.1)',
@@ -66,6 +70,8 @@ module.exports = {
   'websites-alpha-50': 'rgba(0, 255, 127, 0.5)',
   'tools-alpha-10': 'rgba(224, 170, 255, 0.1)',
   'tools-alpha-50': 'rgba(224, 170, 255, 0.5)',
+  'feat-alpha-10': 'rgba(168, 85, 247, 0.1)',
+  'feat-alpha-50': 'rgba(168, 85, 247, 0.5)',
 
   // Toast success colors
   'toast-background': 'rgba(72,59,87,0.8)',
diff --git a/src/index.css b/src/index.css
@@ -115,6 +115,12 @@ code {
   --bg-gist-card-hover: rgba(217, 119, 6, 0.2);
   --title-hover-gist: #fbbf24; /* amber-400 */
 
+  /*feat card*/
+  --color-feat-badge: #6b21a8; /* purple-800 */
+  --bg-feat-card: rgba(107, 33, 168, 0.175);
+  --bg-feat-card-hover: rgba(126, 34, 206, 0.275);
+  --title-hover-feat: #a855f7; /* purple-500 */
+
   /*fezccode colors*/
   --fzcdx-background: #ffffff;
   --fzcdx-text-primary: #2d2d2d;
diff --git a/src/pages/BlogPage.js b/src/pages/BlogPage.js
@@ -188,43 +188,47 @@ const BlogPage = () => {
             />
           </div>
           {/* Filter Buttons */}
-          <div className="mt-8 flex justify-center space-x-4">
-            <button
-              onClick={() => setActiveFilter('all')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'all' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              All
-            </button>
-            <button
-              onClick={() => setActiveFilter('dev')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'dev' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              Dev
-            </button>
-            <button
-              onClick={() => setActiveFilter('rant')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'rant' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              Rant
-            </button>
-            <button
-              onClick={() => setActiveFilter('series')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'series' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              Series
-            </button>
-            <button
-              onClick={() => setActiveFilter('gist')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'gist' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              Gist
-            </button>
-            <button
-              onClick={() => setActiveFilter('d&d')}
-              className={`px-4 py-2 rounded-full text-sm font-medium ${activeFilter === 'd&d' ? 'bg-primary-500 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'}`}
-            >
-              D&D
-            </button>
+          <div className="mt-8 flex flex-wrap justify-center gap-2">
+            {[
+              { id: 'all', label: 'All' },
+              { id: 'dev', label: 'Dev' },
+              { id: 'feat', label: 'Feat' },
+              { id: 'rant', label: 'Rant' },
+              { id: 'series', label: 'Series' },
+              { id: 'gist', label: 'Gist' },
+              { id: 'd&d', label: 'D&D' },
+            ].map((filter) => (
+              <button
+                key={filter.id}
+                onClick={() => setActiveFilter(filter.id)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 ${
+                  activeFilter === filter.id
+                    ? 'text-white shadow-md'
+                    : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white'
+                }`}
+                style={{
+                  backgroundColor:
+                    activeFilter === filter.id
+                      ? filter.id === 'all'
+                        ? '#4b5563' // gray-600 for All
+                        : filter.id === 'series'
+                          ? 'var(--color-series-badge)'
+                          : filter.id === 'd&d'
+                            ? 'var(--color-dnd-badge)'
+                            : filter.id === 'gist'
+                              ? 'var(--color-gist-badge)'
+                              : filter.id === 'feat'
+                                ? 'var(--color-feat-badge)'
+                                : filter.id === 'rant'
+                                  ? 'var(--color-takes-badge)'
+                                  : `var(--color-${filter.id}-badge)` // Dynamic for dev
+                      : undefined,
+                    color: activeFilter === filter.id && filter.id === 'gist' ? 'black' : undefined
+                }}
+              >
+                {filter.label}
+              </button>
+            ))}
           </div>
         </div>
         <div className="mt-16">

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,12 @@`
`1`	`1`	`[`
	`2`	`+ {`
	`3`	`+ "date": "2025-11-27",`
	`4`	`+ "title": "Visual Modes",`
	`5`	`+ "description": "Implemented different visual modes that can be set in settings page or via Command Palette.",`
	`6`	`+ "type": "feature",`
	`7`	`+ "icon": "RocketLaunchIcon",`
	`8`	`+ "link": "/#/settings"`
	`9`	`+ },`
`2`	`10`	`{`
`3`	`11`	`"date": "2025-11-27",`
`4`	`12`	`"title": "Bundle Size Optimization",`
`@@ -133,4 +141,4 @@`
`133`	`141`	`"icon": "CodeIcon",`
`134`	`142`	`"link": "/"`
`135`	`143`	`}`
`136`		`-]`
	`144`	`+]`