feat: gist

fezcode · fezcode · commit bf8824a957ce · 2025-11-26T15:50:48.000+03:00
diff --git a/public/posts/posts.json b/public/posts/posts.json
@@ -12,7 +12,7 @@
       "layout",
       "tutorial"
     ],
-    "category": "dev",
+    "category": "gist",
     "filename": "mastering-tailwind-centering.txt",
     "authors": ["fezcode"],
     "image": "/images/defaults/sina-salehian-HqmTUJD73mM-unsplash.jpg"
diff --git a/src/components/PostItem.js b/src/components/PostItem.js
@@ -44,7 +44,9 @@ const PostItem = ({
           ? 'var(--color-series-badge)'
           : category === 'd&d'
             ? 'var(--color-dnd-badge)'
-            : 'var(--color-takes-badge)',
+            : category === 'gist'
+              ? 'var(--color-gist-badge)'
+              : 'var(--color-takes-badge)',
   };
   const postBackgroundColorClass =
     category === 'dev'
@@ -53,15 +55,19 @@ const PostItem = ({
         ? 'bg-series-card-bg'
         : category === 'd&d'
           ? 'bg-dnd-card-bg'
-          : 'bg-takes-card-bg';
+          : category === 'gist'
+            ? 'bg-gist-card-bg'
+            : 'bg-takes-card-bg';
   const postHoverBackgroundColorClass =
     category === 'dev'
       ? 'hover:bg-dev-card-bg-hover'
       : category === 'series'
         ? 'hover:bg-series-card-bg-hover'
         : category === 'd&d'
           ? 'hover:bg-dnd-card-bg-hover'
-          : 'hover:bg-takes-card-bg-hover';
+          : category === 'gist'
+            ? 'hover:bg-gist-card-bg-hover'
+            : 'hover:bg-takes-card-bg-hover';
 
   const postTitleHoverColorClass =
     category === 'dev'
@@ -70,7 +76,9 @@ const PostItem = ({
         ? 'group-hover:text-[var(--title-hover-series)]'
         : category === 'd&d'
           ? 'group-hover:text-[var(--title-hover-dnd)]'
-          : 'group-hover:text-[var(--title-hover-takes)]';
+          : category === 'gist'
+            ? 'group-hover:text-[var(--title-hover-gist)]'
+            : 'group-hover:text-[var(--title-hover-takes)]';
 
   const shouldAnimate =
     isAnimationEnabled &&
diff --git a/src/config/colors.js b/src/config/colors.js
@@ -44,6 +44,8 @@ module.exports = {
   'series-card-bg-hover': 'var(--bg-series-card-hover)',
   'dnd-card-bg': 'var(--bg-dnd-card)',
   '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)',
   'book-alpha-10': 'rgba(158, 197, 171, 0.1)',
   'book-alpha-50': 'rgba(158, 197, 171, 0.5)',
   'movie-alpha-10': 'rgba(199, 81, 70, 0.1)',
diff --git a/src/index.css b/src/index.css
@@ -108,6 +108,12 @@ code {
   --bg-dnd-card-hover: rgba(170, 68, 101, 0.2);
   --title-hover-dnd: #d48090;
 
+  /*gist card*/
+  --color-gist-badge: #d97706; /* amber-600 */
+  --bg-gist-card: rgba(217, 119, 6, 0.1);
+  --bg-gist-card-hover: rgba(217, 119, 6, 0.2);
+  --title-hover-gist: #fbbf24; /* amber-400 */
+
   /*fezccode colors*/
   --fzcdx-background: #ffffff;
   --fzcdx-text-primary: #2d2d2d;
diff --git a/src/pages/BlogPage.js b/src/pages/BlogPage.js
@@ -213,6 +213,12 @@ const BlogPage = () => {
             >
               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'}`}
