From 6c2b6ff247ebee2ebf3911fc748ada04760885f2 Mon Sep 17 00:00:00 2001
From: JuanPabloDiaz <juanchodis@hotmail.com>
Date: Mon, 12 Feb 2024 10:34:25 -0500
Subject: [PATCH] Add CSS games subcategory under Frontend category

---
 components/TopBar/CategoryDescriptions.ts |  2 ++
 database/data.ts                          |  3 ++-
 database/frontend/css-games.json          | 30 +++++++++++++++++++++++
 database/index.ts                         |  1 +
 public/sitemap.xml                        |  5 ++++
 5 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 database/frontend/css-games.json

diff --git a/components/TopBar/CategoryDescriptions.ts b/components/TopBar/CategoryDescriptions.ts
index 851871ddd..ea6cb2d77 100644
--- a/components/TopBar/CategoryDescriptions.ts
+++ b/components/TopBar/CategoryDescriptions.ts
@@ -12,6 +12,8 @@ const categoryDescriptions: CategoryDescriptions = {
     'Colors mean the aspects of the appearance of objects and light sources that may be described in terms of hue, lightness, and saturation',
   'design-inspiration':
     'The right kind of inspiration will always help you come up with creative and unique ideas for your projects but sometimes you need some help getting inspired. Luckily, there are a TON of great resources for design inspiration.',
+  'css-games':
+    'CSS games are a fun way to learn and practice CSS. They are a great way to learn new CSS properties and techniques, and they can help you improve your skills in a fun and interactive way.',
   fonts:
     'A font is a graphical representation of text that may include a different typeface, point size, weight, color, or design. Fonts are text characters of different types and sizes. They help designers convey interface content intuitively and guide web or mobile app users to interact with the interface smoothly. The term “font” actually refers to a set of graphics that correspond to some or all of the Unicode glyphs',
   icons:
diff --git a/database/data.ts b/database/data.ts
index 8504e3676..4a51d64da 100644
--- a/database/data.ts
+++ b/database/data.ts
@@ -14,6 +14,7 @@ export const sidebarData: ISidebar[] = [
       { name: 'images', url: '/images', resources: DB.images },
       { name: 'fonts', url: '/fonts', resources: DB.fonts },
       { name: 'colors', url: '/colors', resources: DB.colors },
+      { name: 'css games', url: '/css-games', resources: DB.cssGames },
       { name: 'react', url: '/react', resources: DB.react },
       {
         name: 'illustrations',
@@ -325,7 +326,7 @@ export const sidebarData: ISidebar[] = [
     subcategory: [
       { name: 'Platforms', url: '/cp-platforms', resources: DB.cpPlatforms },
       { name: 'Tutorials', url: '/cp-tutorials', resources: DB.cpTutorials },
-      { name: 'Helpers', url: '/cp-helpers', resources: DB.cpHelpers }
+      { name: 'Helpers', url: '/cp-helpers', resources: DB.cpHelpers },
     ],
   },
   {
diff --git a/database/frontend/css-games.json b/database/frontend/css-games.json
new file mode 100644
index 000000000..7596c0711
--- /dev/null
+++ b/database/frontend/css-games.json
@@ -0,0 +1,30 @@
+[
+  {
+    "name": "Coding Fantasy",
+    "description": "An innovative platform that transforms the process of learning code into an engaging and enjoyable experience.",
+    "url": "https://codingfantasy.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Css Grid Garden",
+    "description": "An interactive game designed to help you learn CSS grid layout. In this delightful game, you’ll cultivate a virtual carrot garden using CSS code.",
+    "url": "https://cssgridgarden.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Flexbox Froggy",
+    "description": "An engaging game designed to help you master CSS flexbox. In this delightful challenge, your mission is to guide Froggy and friends to their lilypads by writing CSS code.",
+    "url": "https://flexboxfroggy.com/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  },
+  {
+    "name": "Flukeout",
+    "description": "An interactive game intertwining CSS learning with culinary creativity. As you advance, face CSS selector challenges. Your mission? Articulate precise CSS code for delectable outcomes.",
+    "url": "https://flukeout.github.io/",
+    "category": "frontend",
+    "subcategory": "css-games"
+  }
+]
diff --git a/database/index.ts b/database/index.ts
index e0340d2ca..36b2a6c35 100644
--- a/database/index.ts
+++ b/database/index.ts
@@ -3,6 +3,7 @@ export { default as accessibility } from './frontend/accessibility.json'
 export { default as angular } from './frontend/angular.json'
 export { default as animations } from './frontend/animations.json'
 export { default as colors } from './frontend/colors.json'
+export { default as cssGames } from './frontend/css-games.json'
 export { default as designInspirations } from './frontend/design-inspirations.json'
 export { default as fonts } from './frontend/fonts.json'
 export { default as icons } from './frontend/icons.json'
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 7560106be..7ece13808 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -24,6 +24,11 @@
         <lastmod>2023-06-28T21:40:52+00:00</lastmod>
         <priority>0.8</priority>
     </url>
+    <url>
+        <loc>https://www.linkshub.dev/css-games</loc>
+        <lastmod>2023-06-28T21:40:52+00:00</lastmod>
+        <priority>0.8</priority>
+    </url>
     <url>
         <loc>https://www.linkshub.dev/design-inspiration</loc>
         <lastmod>2023-06-28T21:40:52+00:00</lastmod>