From 03c0493378d31fb3d34080c31e96b04560fc93c8 Mon Sep 17 00:00:00 2001
From: Flavio Adamo <flavioadamo.adams@gmail.com>
Date: Wed, 13 Sep 2023 16:54:47 +0200
Subject: [PATCH 01/15] Removed / from all endpoint except auth

---
 backend/apivault/settings.py | 10 ++++++----
 backend/apivault/urls.py     |  7 +++----
 backend/interaction/urls.py  |  4 ++--
 backend/vault/urls.py        | 20 ++++++++++----------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/backend/apivault/settings.py b/backend/apivault/settings.py
index 6d9d7ac..8523d4f 100644
--- a/backend/apivault/settings.py
+++ b/backend/apivault/settings.py
@@ -20,7 +20,8 @@
 environ.Env.read_env()
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
-BASE_DIR = Path(__file__).resolve().parent.parent
+BASE_DIR = Path(__file__).resolve(strict=True).parent.parent
+
 MEDIA_ROOT = ''
 MEDIA_URL = ''
 
@@ -31,7 +32,7 @@
 SECRET_KEY = 'django-insecure-pnadu&92%d==xohx_27-z%is=nb7c&s!ph7#1r$i0d#oxttgh5'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = True
 
 
 ALLOWED_HOSTS = ['*']
@@ -205,8 +206,9 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.1/howto/static-files/
 
-STATIC_URL = 'static/'
-STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+STATIC_URL = '/static/'
+
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
 
 
diff --git a/backend/apivault/urls.py b/backend/apivault/urls.py
index e99f163..c0ea56c 100644
--- a/backend/apivault/urls.py
+++ b/backend/apivault/urls.py
@@ -1,5 +1,5 @@
 """apivault URL Configuration"""
-from drf_spectacular.views import SpectacularSwaggerView
+from drf_spectacular.views import SpectacularAPIView, SpectacularSwaggerView
 from django.conf.urls.static import static
 from django.contrib import admin
 from django.conf import settings
@@ -16,7 +16,6 @@
     path('api/interaction', include('interaction.urls')),
 
     #documentation
+    path('api/schema/', SpectacularAPIView.as_view(), name='schema'),
     path('api/schema/swagger-ui/', SpectacularSwaggerView.as_view(url_name='schema'), name='swagger-ui'),
-]
-
-urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
\ No newline at end of file
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
diff --git a/backend/interaction/urls.py b/backend/interaction/urls.py
index 53eb6fd..f10d78a 100644
--- a/backend/interaction/urls.py
+++ b/backend/interaction/urls.py
@@ -2,6 +2,6 @@
 from .api import LikeAPIView, FeedbackView
 
 urlpatterns = [
-   path('/like/<int:api_id>/', LikeAPIView.as_view(), name='like-api'),
-   path('/feedback/', FeedbackView.as_view(), name='feedback')
+   path('/like/<int:api_id>', LikeAPIView.as_view(), name='like-api'),
+   path('/feedback', FeedbackView.as_view(), name='feedback')
 ]
diff --git a/backend/vault/urls.py b/backend/vault/urls.py
index 26a0ced..fd15304 100644
--- a/backend/vault/urls.py
+++ b/backend/vault/urls.py
@@ -14,18 +14,18 @@
 )
 
 urlpatterns = [
-   path('detail/<int:pk>/', APIDetailView.as_view(), name='api_detail'),
+   path('detail/<int:pk>', APIDetailView.as_view(), name='api_detail'),
 
    path('search', APISearchView.as_view(), name='api_search'),
-   path('random/', RandomAPIListView.as_view()),
-   path('create/', APICreateView.as_view()),
-   path('count/', APICountView.as_view()),
-   path('all/', APIListView.as_view()),
+   path('random', RandomAPIListView.as_view()),
+   path('create', APICreateView.as_view()),
+   path('count', APICountView.as_view()),
+   path('all', APIListView.as_view()),
 
-   path('my_api/', MyApiView.as_view()),
-   path('pending/my_api/', MyPendingApiView.as_view()),
+   path('my_api', MyApiView.as_view()),
+   path('pending/my_api', MyPendingApiView.as_view()),
    
-   path('category/<str:category_name>/', CategoryAPIListView.as_view()),
-   path('categories/trending/', TrendingCategoriesView.as_view()),
-   path('categories/', AllCategoryAPIListView.as_view()),
+   path('category/<str:category_name>', CategoryAPIListView.as_view()),
+   path('categories/trending', TrendingCategoriesView.as_view()),
+   path('categories', AllCategoryAPIListView.as_view()),
 ]
\ No newline at end of file

From b7bd813e62bebe0bc6301c13c512aeabf68639c0 Mon Sep 17 00:00:00 2001
From: gdjohn4s <giovanni@exifly.it>
Date: Fri, 15 Sep 2023 15:24:54 +0200
Subject: [PATCH 02/15] added h1 title on contributors page

---
 frontend/pages/contributors.vue       |  2 ++
 frontend/services/ApivaultServices.ts | 28 +++++++++++++--------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/pages/contributors.vue b/frontend/pages/contributors.vue
index 5be29a6..2f5fd77 100644
--- a/frontend/pages/contributors.vue
+++ b/frontend/pages/contributors.vue
@@ -1,6 +1,8 @@
 <template>
   <NuxtLayout :name="layouts" title="WONDERFUL PEOPLE">
     <template #cardAreaContent>
+      <h1 class="text-wrapper">WONDERFUL PEOPLE</h1>
+      <hr />
       <div class="row align-content-center">
         <LoadingEffect v-if="isLoading" />
         <div
diff --git a/frontend/services/ApivaultServices.ts b/frontend/services/ApivaultServices.ts
index 4bd3880..d75b742 100644
--- a/frontend/services/ApivaultServices.ts
+++ b/frontend/services/ApivaultServices.ts
@@ -16,23 +16,23 @@ class ApivaultService {
   }
 
   allApis(): Promise<APIType[]> {
-    return this.axiosInstance.get(`${this.baseUrl}/all/`).then(res => res.data);
+    return this.axiosInstance.get(`${this.baseUrl}/all`).then(res => res.data);
   }
 
   apiCategoryData(category: string | string[], authToken: string, orderBy: string): Promise<APIType[]> {
-    if (authToken === "" || !authToken) return this.axiosInstance.get(`${this.baseUrl}/category/${category}/?order=${orderBy}`).then(res => res.data);
+    if (authToken === "" || !authToken) return this.axiosInstance.get(`${this.baseUrl}/category/${category}?order=${orderBy}`).then(res => res.data);
     let headers = {
         'Authorization': `Bearer ${authToken}` 
     }
-    return this.axiosInstance.get(`${this.baseUrl}/category/${category}/?order=${orderBy}`, { headers: headers }).then(res => res.data);
+    return this.axiosInstance.get(`${this.baseUrl}/category/${category}?order=${orderBy}`, { headers: headers }).then(res => res.data);
   }
 
   randomApis(authToken: string): Promise<APIType[]> {
-    if (authToken === "" || !authToken) return this.axiosInstance.get(`${this.baseUrl}/random/`).then(res => res.data)
+    if (authToken === "" || !authToken) return this.axiosInstance.get(`${this.baseUrl}/random`).then(res => res.data)
     let headers = {
       'Authorization': `Bearer ${authToken}` 
     }
-    return this.axiosInstance.get(`${this.baseUrl}/random/`, { headers: headers }).then(res => res.data)
+    return this.axiosInstance.get(`${this.baseUrl}/random`, { headers: headers }).then(res => res.data)
   }
 
   async search(query: String, authToken: String): Promise<APIType[]> {
@@ -42,16 +42,16 @@ class ApivaultService {
   }
 
   countApis(): Promise<number> {
-    return this.axiosInstance.get(`${this.baseUrl}/count/`).then(res => res.data.api_count)
+    return this.axiosInstance.get(`${this.baseUrl}/count`).then(res => res.data.api_count)
   }
 
   getTrendingCategories(): Promise<TrendingCategory[]> {
-    return this.axiosInstance.get(`${this.baseUrl}/categories/trending/`).then(res => res.data);
+    return this.axiosInstance.get(`${this.baseUrl}/categories/trending`).then(res => res.data);
   }
 
   /* Not auth layer */
   async categories(): Promise<Category[]> {
-    return this.axiosInstance.get(`${this.baseUrl}/categories/`).then(res => res.data);
+    return this.axiosInstance.get(`${this.baseUrl}/categories`).then(res => res.data);
   }
 
   /* Authentication Layer */
@@ -64,7 +64,7 @@ class ApivaultService {
         'Authorization': `Bearer ${authToken}`
     };
 
-      return await this.axiosInstance.post(`${this.baseUrl}/interaction/like/${apiId}/`, {}, { headers: headers }).then(res => {
+      return await this.axiosInstance.post(`${this.baseUrl}/interaction/like/${apiId}`, {}, { headers: headers }).then(res => {
         return res.status
       }).catch(err => err.response.status);
   }
@@ -74,7 +74,7 @@ class ApivaultService {
         'Authorization': `Bearer ${authToken}`
     };
 
-      return await this.axiosInstance.delete(`${this.baseUrl}/interaction/like/${apiId}/`, { headers: headers }).then(res => {
+      return await this.axiosInstance.delete(`${this.baseUrl}/interaction/like/${apiId}`, { headers: headers }).then(res => {
         return res.status
       }).catch(err => err.response.status);
   }
@@ -84,7 +84,7 @@ class ApivaultService {
       'Authorization': `Bearer ${authToken}`
     }
 
-    return await this.axiosInstance.get(`${this.baseUrl}/pending/my_api/`, { headers: headers })
+    return await this.axiosInstance.get(`${this.baseUrl}/pending/my_api`, { headers: headers })
     .then(res => {
         return res.data
       }).catch(er => console.error(er));
@@ -94,7 +94,7 @@ class ApivaultService {
     const headers = {
       'Authorization': `Bearer ${authToken}`
     }
-    return await this.axiosInstance.get(`${this.baseUrl}/my_api/`, { headers: headers }).then(res => res.data);
+    return await this.axiosInstance.get(`${this.baseUrl}/my_api`, { headers: headers }).then(res => res.data);
   }
 
   async submitApi(authToken: string, name: string, auth: string, category: number, cors: boolean, description: string, https: boolean, url: string): Promise<Number> {
@@ -112,7 +112,7 @@ class ApivaultService {
       url: url
     }
 
-    return await this.axiosInstance.post(`${this.baseUrl}/create/`, data, { headers: headers })
+    return await this.axiosInstance.post(`${this.baseUrl}/create`, data, { headers: headers })
       .then(res => {
         return res.status
       }).catch(err => err.response.status);
@@ -136,7 +136,7 @@ class ApivaultService {
       message: message
     }
 
-    return await this.axiosInstance.post(`${this.baseUrl}/interaction/feedback/`, body, { headers: headers })
+    return await this.axiosInstance.post(`${this.baseUrl}/interaction/feedback`, body, { headers: headers })
     .then(res => res.data.status)
     .catch(er => er.data.status);
   }

From 0a598202979593a178bbfe6ffca9efe4d58c6849 Mon Sep 17 00:00:00 2001
From: Vaibhav Lohar <webster@Vaibhavs-MacBook-Pro.local>
Date: Wed, 20 Sep 2023 17:17:41 +0530
Subject: [PATCH 03/15] Added support for controlling DEBUG flag from env

---
 .env.dev                     | 3 ++-
 backend/apivault/settings.py | 2 +-
 backend/docker-compose.yml   | 2 +-
 docker-compose.dev.yml       | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/.env.dev b/.env.dev
index e339b6f..988db25 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,2 +1,3 @@
 COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml
-COMPOSE_PROJECT_NAME=apivault
\ No newline at end of file
+COMPOSE_PROJECT_NAME=apivault
+DEBUG=true
\ No newline at end of file
diff --git a/backend/apivault/settings.py b/backend/apivault/settings.py
index 8523d4f..1ba442e 100644
--- a/backend/apivault/settings.py
+++ b/backend/apivault/settings.py
@@ -32,7 +32,7 @@
 SECRET_KEY = 'django-insecure-pnadu&92%d==xohx_27-z%is=nb7c&s!ph7#1r$i0d#oxttgh5'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+DEBUG = env('DEBUG')
 
 
 ALLOWED_HOSTS = ['*']
diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml
index 8e1946a..010691d 100644
--- a/backend/docker-compose.yml
+++ b/backend/docker-compose.yml
@@ -34,7 +34,7 @@ services:
       - DB_USER=apivault
       - DB_PASSWORD=apivault
       - DB_PORT=5432
-      - DEBUG=true
+      - DEBUG=${DEBUG}
     depends_on:
       - db_postgis_apivault
     volumes:
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 55bb29c..ccd1258 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -34,7 +34,7 @@ services:
       - DB_USER=apivault
       - DB_PASSWORD=apivault
       - DB_PORT=5432
-      - DEBUG=true
+      - DEBUG=${DEBUG}
     command: sh -c "python3 backend/docker/command/start_server.py"
     networks:
       apivault-network:

From 6df53e648794106bce780d869c6db1b0ccd1f192 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 27 Sep 2023 23:08:00 +0000
Subject: [PATCH 04/15] Bump cryptography from 41.0.3 to 41.0.4

Bumps [cryptography](https://github.com/pyca/cryptography) from 41.0.3 to 41.0.4.
- [Changelog](https://github.com/pyca/cryptography/blob/main/CHANGELOG.rst)
- [Commits](https://github.com/pyca/cryptography/compare/41.0.3...41.0.4)

---
updated-dependencies:
- dependency-name: cryptography
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 backend/requirements.txt | 2 +-
 requirements.txt         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/requirements.txt b/backend/requirements.txt
index c8db569..0fb7247 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -9,7 +9,7 @@ charset-normalizer==3.1.0
 click==8.1.3
 click-plugins==1.1.1
 cligj==0.7.2
-cryptography==41.0.3
+cryptography==41.0.4
 dbus-python==1.2.16
 defusedxml==0.7.1
 distro-info===0.23ubuntu1
diff --git a/requirements.txt b/requirements.txt
index 2f6871e..a0d8bbd 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -9,7 +9,7 @@ charset-normalizer==3.1.0
 click==8.1.3
 click-plugins==1.1.1
 cligj==0.7.2
-cryptography==41.0.3
+cryptography==41.0.4
 dbus-python==1.2.16
 defusedxml==0.7.1
 distro-info===0.23ubuntu1

From ef8e52a2450c5f35237034b2686d6749880e3c23 Mon Sep 17 00:00:00 2001
From: Domenico Tenace <domenicotenace99@gmail.com>
Date: Fri, 13 Oct 2023 10:21:47 +0200
Subject: [PATCH 05/15] fix: gap on modal "submit your API"

---
 frontend/components/generics/Modal.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/components/generics/Modal.vue b/frontend/components/generics/Modal.vue
index f1a8e37..de4c003 100644
--- a/frontend/components/generics/Modal.vue
+++ b/frontend/components/generics/Modal.vue
@@ -7,7 +7,7 @@
     aria-hidden="true"
   >
     <div class="modal-dialog modal-dialog-centered">
-      <div class="custom-border-radius glass-card modal-content">
+      <div class="custom-border-radius glass-card modal-content w-auto">
         <div class="py-0 custom-border modal-header">
           <h1
             v-if="!successSubmit"
@@ -37,10 +37,7 @@
             <AnimationSuccessCheckmark />
           </div>
           <form v-else>
-            <div
-              class="input-group mb-3"
-              style="justify-content: space-between"
-            >
+            <div class="input-group mb-3 gap-3">
               <div class="mobile-wrapper-section align-items-center">
                 <label for="recipient-name" class="text-wrapper col-form-label"
                   >Name:</label
@@ -51,7 +48,7 @@
                   placeholder="Your API name"
                   class="inverted-input-box text-wrapper form-control"
                   id="recipient-name"
-                  style="margin-right: 6rem"
+                  style="margin-right: 1rem"
                 />
               </div>
               <div class="mobile-wrapper-section align-items-center">

From a5909118a11e5db2e5932143db5d681a84815042 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 13 Oct 2023 08:46:46 +0000
Subject: [PATCH 06/15] Bump postcss from 8.4.23 to 8.4.31 in /frontend

Bumps [postcss](https://github.com/postcss/postcss) from 8.4.23 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.23...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 frontend/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a84d3ea..02a0ef1 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4641,9 +4641,9 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@^8.1.10, postcss@^8.4.23:
-  version "8.4.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
-  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"

From fee1de3254d6f89b36f12e890d8a2b4e34960640 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 13 Oct 2023 17:10:40 +0000
Subject: [PATCH 07/15] Bump urllib3 from 1.26.5 to 1.26.17

Bumps [urllib3](https://github.com/urllib3/urllib3) from 1.26.5 to 1.26.17.
- [Release notes](https://github.com/urllib3/urllib3/releases)
- [Changelog](https://github.com/urllib3/urllib3/blob/main/CHANGES.rst)
- [Commits](https://github.com/urllib3/urllib3/compare/1.26.5...1.26.17)

---
updated-dependencies:
- dependency-name: urllib3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 backend/requirements.txt | 2 +-
 requirements.txt         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/requirements.txt b/backend/requirements.txt
index c8db569..55772e0 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -67,5 +67,5 @@ sqlparse==0.4.4
 typing-extensions==4.6.3
 unattended-upgrades==0.1
 uritemplate==4.1.1
-urllib3==1.26.5
+urllib3==1.26.17
 zipp==3.16.2
diff --git a/requirements.txt b/requirements.txt
index 2f6871e..b66878e 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -67,5 +67,5 @@ sqlparse==0.4.4
 typing-extensions==4.6.3
 unattended-upgrades==0.1
 uritemplate==4.1.1
-urllib3==1.26.5
+urllib3==1.26.17
 zipp==3.16.2

From 206a378611dcee6856fde5248e408951569160d9 Mon Sep 17 00:00:00 2001
From: cyril <38669260+cyrilbois@users.noreply.github.com>
Date: Sat, 16 Mar 2024 12:36:14 +0100
Subject: [PATCH 08/15] Add fake test data and python linter to API_LIST

---
 API_LIST.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/API_LIST.md b/API_LIST.md
index fcfe80e..2e1016a 100644
--- a/API_LIST.md
+++ b/API_LIST.md
@@ -1240,6 +1240,7 @@
 | [Judge0 CE](https://ce.judge0.com/) | Online code execution system | apiKey | True | unknown |
 | [KONTESTS](https://kontests.net/api) | For upcoming and ongoing competitive coding contests |  | True | unknown |
 | [Mintlify](https://docs.mintlify.com) | For programmatically generating documentation for code | apiKey | True | yes |
+| [Pythonium](https://pythonium.net/linter) | Python code validation |  | True | no |
 
 # Science & Math
 
@@ -1447,6 +1448,7 @@
 | [Randommer](https://randommer.io/randommer-api) | Random data generator | apiKey | True | yes |
 | [RandomUser](https://randomuser.me) | Generates and list user data |  | True | unknown |
 | [RoboHash](https://robohash.org/) | Generate random robot/alien avatars |  | True | unknown |
+| [Softwium](https://softwium.com/fake-api/) | APIs collection to get fake data |  | True | no |
 | [Spanish random names](https://random-names-api.herokuapp.com/public) | Generate spanish names (with gender) randomly |  | True | unknown |
 | [Spanish random words](https://palabras-aleatorias-public-api.herokuapp.com) | Generate spanish words randomly |  | True | unknown |
 | [This Person Does not Exist](https://thispersondoesnotexist.com) | Generates real-life faces of people who do not exist |  | True | unknown |

From 8d6a94899083b35b4a8268c86e2642df35435133 Mon Sep 17 00:00:00 2001
From: flavioadamo <flavioadamo.dev@gmail.com>
Date: Wed, 31 Jul 2024 18:43:10 +0200
Subject: [PATCH 09/15] fix: Add CSRF_TRUSTED_ORIGINS

---
 backend/apivault/settings.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/backend/apivault/settings.py b/backend/apivault/settings.py
index 1ba442e..e91f679 100644
--- a/backend/apivault/settings.py
+++ b/backend/apivault/settings.py
@@ -226,3 +226,6 @@
 AUTHENTICATION_BACKENDS = (
     'django.contrib.auth.backends.ModelBackend',
 )
+
+CSRF_TRUSTED_ORIGINS = ['https://*.apivault.dev', 'http://localhost']
+

From 77e04a9f63501fdf6b6632231dd51848f1de525a Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:39:24 +0200
Subject: [PATCH 10/15] feat(git): added staticfiles into gitignore

---
 frontend/.gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 9e65000..3296cae 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -25,6 +25,9 @@ dist-ssr
 env
 .env
 
+# Static files
+backend/staticfiles/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

From a7f43195199d31ac11e11c6361083715e10cd24a Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:39:33 +0200
Subject: [PATCH 11/15] feat(prettier): added prettier rules

---
 frontend/.prettierrc | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 frontend/.prettierrc

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..3c9a31e
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": false,
+    "singleQuote": true
+}
\ No newline at end of file

From b794dc3b7935cea7257db235f611414bed62af04 Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:39:52 +0200
Subject: [PATCH 12/15] fix(code): refactored using new code rules

---
 frontend/nuxt.config.ts | 183 +++++++++++++++++++++++-----------------
 1 file changed, 106 insertions(+), 77 deletions(-)

diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index f4af2a3..9492da3 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,82 +1,111 @@
-import { resolve } from "path";
-import { categoriesProperties } from "./utils/categoryMapping";
+import { resolve } from 'path'
+import { categoriesProperties } from './utils/categoryMapping'
 
 export default defineNuxtConfig({
-  components: true,
-  alias: {
-    '@': resolve(__dirname, "/")
-  },
-  routeRules: {
-    '/': { prerender: true },
-  },
-  plugins: [
-    '@/plugins/fontawesome',
-  ],
-  modules: [
-    'nuxt-simple-sitemap',
-    'nuxt-vue3-google-signin',
-    [
-      '@nuxtjs/robots', 
-      { configPath: '~/config/robots.config' }
-    ]
-  ],
-  googleSignIn: {
-    clientId: import.meta.env.VITE_CLIENT_ID || "GOOGLE_CLIENT_ID",
-  },
-  sitemap: {
-    siteUrl: 'https://apivault.dev',
-    urls: async () => {
-      return categoriesProperties.map(category => ({
-        loc: `/categories/${category.name.replace('\&', '\&amp;')}`,
-        lastmod: new Date(),
-        changefreq: 'daily',
-        priority: 0.2,
-      }))
+    components: true,
+    alias: {
+        '@': resolve(__dirname, '/'),
     },
-    defaults: {
-      changefreq: 'daily',
-      priority: 0.5,
-      lastmod: new Date()
-    }
-  },
-  app: {
-    pageTransition: {
-      name: "page",
-      mode: "out-in",
+    routeRules: {
+        '/': { prerender: true },
+    },
+    plugins: ['@/plugins/fontawesome'],
+    modules: [
+        'nuxt-simple-sitemap',
+        'nuxt-vue3-google-signin',
+        ['@nuxtjs/robots', { configPath: '~/config/robots.config' }],
+    ],
+    googleSignIn: {
+        clientId: import.meta.env.VITE_CLIENT_ID || 'GOOGLE_CLIENT_ID',
+    },
+    sitemap: {
+        siteUrl: 'https://apivault.dev',
+        urls: async () => {
+            return categoriesProperties.map((category) => ({
+                loc: `/categories/${category.name.replace('&', '&amp;')}`,
+                lastmod: new Date(),
+                changefreq: 'daily',
+                priority: 0.2,
+            }))
+        },
+        defaults: {
+            changefreq: 'daily',
+            priority: 0.5,
+            lastmod: new Date(),
+        },
+    },
+    app: {
+        pageTransition: {
+            name: 'page',
+            mode: 'out-in',
+        },
+        head: {
+            htmlAttrs: {
+                lang: 'en',
+            },
+            title: 'Apivault - A free API list for developers',
+            meta: [
+                {
+                    name: 'keywords',
+                    content:
+                        'free api, free api list, apivault, free apis for projects, open-source, public APIs, free apis for learning, free apis to use',
+                },
+                {
+                    name: 'description',
+                    content:
+                        'ApiVault - The largest collection of free and public APIs, categorized for easy search.',
+                },
+                { name: 'author', content: 'exifly' },
+                {
+                    name: 'twitter:title',
+                    content: 'A free API database list for developers',
+                },
+                {
+                    name: 'twitter:description',
+                    content:
+                        'ApiVault - The largest collection of free public APIs, categorized for easy search.',
+                },
+                { name: 'twitter:url', content: 'https://apivault.dev/' },
+                { name: 'twitter:card', content: 'summary_large_image' },
+                { name: 'twitter:site', content: 'apivault' },
+                {
+                    name: 'twitter:keywords',
+                    content:
+                        'free api, free api list, apivault, free apis for projects, open-source, public APIs, free apis for learning, free apis to use',
+                },
+                {
+                    name: 'twitter:image',
+                    content:
+                        'https://raw.githubusercontent.com/Exifly/ApiVault/main/assets/Hero.png',
+                },
+                {
+                    property: 'og:title',
+                    content: 'A free API database list for developers',
+                },
+                {
+                    property: 'og:description',
+                    content:
+                        'ApiVault - The largest collection of free public APIs, categorized for easy search.',
+                },
+                { property: 'og:site_name', content: 'APIVault' },
+                { property: 'og:url', content: 'https://apivault.dev/' },
+                {
+                    property: 'og:image',
+                    content:
+                        'https://raw.githubusercontent.com/Exifly/ApiVault/main/assets/Hero.png',
+                },
+                { property: 'og:type', content: 'website' },
+            ],
+        },
+    },
+    css: [
+        '~/assets/styles/bootstrap.scss',
+        '~/assets/styles/main.css',
+        '~/assets/styles/normalize.css',
+        '~/assets/styles/animations.scss',
+        '@fortawesome/fontawesome-svg-core/styles.css',
+    ],
+    build: {
+        transpile: ['@fortawesome/vue-fontawesome'],
     },
-    head: {
-      htmlAttrs: {
-        lang: 'en',
-      },
-      title: "Apivault - A free API list for developers",
-      meta: [
-        { name: "keywords", content: "free api, free api list, apivault, free apis for projects, open-source, public APIs, free apis for learning, free apis to use" },
-        { name: "description", content: "ApiVault - The largest collection of free and public APIs, categorized for easy search." },
-        { name: "author", content: "exifly"},
-        { name: "twitter:title", content: "A free API database list for developers"},
-        { name: "twitter:description", content: "ApiVault - The largest collection of free public APIs, categorized for easy search."},
-        { name: "twitter:url", content: "https://apivault.dev/"},
-        { name: "twitter:card", content: "summary_large_image"},
-        { name: "twitter:site", content: "apivault"},
-        { name: "twitter:keywords", content: "free api, free api list, apivault, free apis for projects, open-source, public APIs, free apis for learning, free apis to use"},
-        { name: "twitter:image", content: "https://raw.githubusercontent.com/Exifly/ApiVault/main/assets/Hero.png"},
-        { property: "og:title", content: "A free API database list for developers"},
-        { property: "og:description", content: "ApiVault - The largest collection of free public APIs, categorized for easy search."},
-        { property: "og:site_name", content: "APIVault"},
-        { property: "og:url", content: "https://apivault.dev/"},
-        { property: "og:image", content: "https://raw.githubusercontent.com/Exifly/ApiVault/main/assets/Hero.png" },
-        { property: "og:type", content: "website"}
-      ]
-    }
-  },
-  css: [
-    '~/assets/styles/bootstrap.scss',
-    '~/assets/styles/main.css', 
-    '~/assets/styles/normalize.css',
-    '~/assets/styles/animations.scss',
-    '@fortawesome/fontawesome-svg-core/styles.css'
-  ],
-  build: {
-    transpile: ['@fortawesome/vue-fontawesome']
-  },
 })

From 835d9ebfc7d0733a040cdf0b90eb48f5209e8d76 Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:40:07 +0200
Subject: [PATCH 13/15] feat(app): changed app version

---
 frontend/components/Footer.vue | 192 ++++++++++++++++-----------------
 frontend/package.json          |   2 +-
 2 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/frontend/components/Footer.vue b/frontend/components/Footer.vue
index f347196..6e4b429 100644
--- a/frontend/components/Footer.vue
+++ b/frontend/components/Footer.vue
@@ -1,125 +1,125 @@
 <template>
-  <footer
-    class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4"
-  >
-    <p class="col-md-4 mb-0 text-wrapper-no-hover">
-      &copy; 2023 Exifly
-      <br />
-      Coded by those
-      <NuxtLink
-        class="text-wrapper-authors"
-        style="text-decoration: none; font-weight: 600"
-        to="/contributors"
-      >
-        wonderful people
-      </NuxtLink>
-    </p>
-
-    <NuxtLink
-      to="/"
-      class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
+    <footer
+        class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4"
     >
-      <img :src="logoMode" alt="" width="30" height="30" />
-    </NuxtLink>
+        <p class="col-md-4 mb-0 text-wrapper-no-hover">
+            2024 &copy; Exifly
+            <br />
+            Coded by those
+            <NuxtLink
+                class="text-wrapper-authors"
+                style="text-decoration: none; font-weight: 600"
+                to="/contributors"
+            >
+                wonderful people
+            </NuxtLink>
+        </p>
 
-    <ul class="nav col-md-4 justify-content-end">
-      <li class="nav-item">
-        <a
-          id="emailSupport"
-          title="Send us an Email"
-          tabindex="3"
-          href="mailto:info@exifly.it"
-          class="nav-link px-2 text-wrapper"
-          target="_blank"
-          >{{ packageJson.version }}</a
-        >
-      </li>
-      <li class="nav-item">
-        <a
-          id="githubRepository"
-          title="Check out our github repository"
-          tabindex="4"
-          href="https://github.com/Exifly/ApiVault"
-          class="nav-link px-2 text-wrapper"
-          target="_blank"
-          ><font-awesome-icon :icon="['fab', 'github']"
-        /></a>
-      </li>
-      <li class="nav-item">
-        <a
-          title="Send us an Email"
-          tabindex="5"
-          href="mailto:info@exifly.it"
-          class="nav-link px-2 text-wrapper"
-          target="_blank"
-          >Contact</a
-        >
-      </li>
-      <li class="nav-item">
-        <a
-          title="Sponsor APIVault"
-          tabindex="6"
-          href="https://ko-fi.com/apivault"
-          class="nav-link px-2 text-wrapper"
-          target="_blank"
-          >Sponsor</a
-        >
-      </li>
-      <li class="nav-item">
         <NuxtLink
-          title="Apivault Cookie Policy"
-          tabindex="7"
-          to="/cookie-policy"
-          class="nav-link px-2 text-wrapper"
-          >Cookie Policy</NuxtLink
+            to="/"
+            class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"
         >
-      </li>
-      <li class="nav-item">
-        <NuxtLink
-          title="Apivault Privacy Policy"
-          tabindex="8"
-          to="/privacy-policy"
-          class="nav-link px-2 text-wrapper"
-          >Privacy Policy</NuxtLink
-        >
-      </li>
-    </ul>
-  </footer>
+            <img :src="logoMode" alt="" width="30" height="30" />
+        </NuxtLink>
+
+        <ul class="nav col-md-4 justify-content-end">
+            <li class="nav-item">
+                <a
+                    id="emailSupport"
+                    title="Send us an Email"
+                    tabindex="3"
+                    href="mailto:info@exifly.it"
+                    class="nav-link px-2 text-wrapper"
+                    target="_blank"
+                    >{{ packageJson.version }}</a
+                >
+            </li>
+            <li class="nav-item">
+                <a
+                    id="githubRepository"
+                    title="Check out our github repository"
+                    tabindex="4"
+                    href="https://github.com/Exifly/ApiVault"
+                    class="nav-link px-2 text-wrapper"
+                    target="_blank"
+                    ><font-awesome-icon :icon="['fab', 'github']"
+                /></a>
+            </li>
+            <li class="nav-item">
+                <a
+                    title="Send us an Email"
+                    tabindex="5"
+                    href="mailto:info@exifly.it"
+                    class="nav-link px-2 text-wrapper"
+                    target="_blank"
+                    >Contact</a
+                >
+            </li>
+            <li class="nav-item">
+                <a
+                    title="Sponsor APIVault"
+                    tabindex="6"
+                    href="https://ko-fi.com/apivault"
+                    class="nav-link px-2 text-wrapper"
+                    target="_blank"
+                    >Sponsor</a
+                >
+            </li>
+            <li class="nav-item">
+                <NuxtLink
+                    title="Apivault Cookie Policy"
+                    tabindex="7"
+                    to="/cookie-policy"
+                    class="nav-link px-2 text-wrapper"
+                    >Cookie Policy</NuxtLink
+                >
+            </li>
+            <li class="nav-item">
+                <NuxtLink
+                    title="Apivault Privacy Policy"
+                    tabindex="8"
+                    to="/privacy-policy"
+                    class="nav-link px-2 text-wrapper"
+                    >Privacy Policy</NuxtLink
+                >
+            </li>
+        </ul>
+    </footer>
 </template>
 
 <script setup lang="ts">
-import packageJson from "../package.json";
+import packageJson from '../package.json'
 
-const theme = useState("APIVaultTheme", () =>
-  process.client ? localStorage.getItem("APIVaultTheme")! : "dark"
-);
+const theme = useState('APIVaultTheme', () =>
+    process.client ? localStorage.getItem('APIVaultTheme')! : 'dark'
+)
 
 const logoMode = computed(() => {
-  if (theme!.value === "dark" || theme.value === null) {
-    return "/img/apivault-dark-nobg.png";
-  }
-  return "/img/apivault-light-nobg.png";
-});
+    if (theme!.value === 'dark' || theme.value === null) {
+        return '/img/apivault-dark-nobg.png'
+    }
+    return '/img/apivault-light-nobg.png'
+})
 </script>
 
 <style scoped>
 .text-wrapper {
-  color: var(--text-color);
+    color: var(--text-color);
 }
 
 .text-wrapper:hover {
-  color: var(--text-color-hover);
+    color: var(--text-color-hover);
 }
 
 .text-wrapper-no-hover {
-  color: var(--text-color);
+    color: var(--text-color);
 }
 
 .text-wrapper-authors {
-  color: rgb(3, 155, 178);
+    color: rgb(3, 155, 178);
 }
 
 .text-wrapper-authors:hover {
-  color: rgb(0, 201, 232);
+    color: rgb(0, 201, 232);
 }
 </style>
diff --git a/frontend/package.json b/frontend/package.json
index bae9d38..07d8090 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-app",
-  "version": "2.2.1",
+  "version": "2.2.4",
   "private": true,
   "scripts": {
     "build": "nuxt build",

From 08b3f4a2740c38f0640500ccbce5f66cbbbffa95 Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:40:31 +0200
Subject: [PATCH 14/15] feat(badge): created new badge for Codeishot

---
 frontend/components/badges/CodeishotBadge.vue | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 frontend/components/badges/CodeishotBadge.vue

diff --git a/frontend/components/badges/CodeishotBadge.vue b/frontend/components/badges/CodeishotBadge.vue
new file mode 100644
index 0000000..5576a00
--- /dev/null
+++ b/frontend/components/badges/CodeishotBadge.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="codeishot__container">
+        <a
+            class="codeishot_link_container"
+            href="https://codeishot.com"
+            target="_blank"
+        >
+            <div class="codeishot__logo_container">
+                <span class="codeishot_left_logo">C0DE</span>
+                <span class="codeishot_right_logo">ISH0T</span>
+                <font-awesome-icon
+                    class="codeishot__link_icon"
+                    :icon="['fas', 'arrow-up-right-from-square']"
+                />
+            </div>
+            <span class="codeishot__btn">
+                <span class="codeishot__btn_text"
+                    >Paste, store and share your code</span
+                >
+            </span></a
+        >
+    </div>
+</template>
+
+<style scoped>
+/* Border
+#434c57
+Primary
+#1c242e
+Secondary
+#313a46 */
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+a:hover {
+    color: white;
+    text-decoration: none;
+}
+
+.codeishot__container {
+    display: flex;
+    width: 100%;
+}
+
+.codeishot_link_container {
+    border: 1px solid #434c57;
+    border-radius: 8px;
+    background: #1c242e;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    heigth: 54px;
+    gap: 6px;
+    width: 100%;
+    padding: 10px;
+}
+.codeishot__btn {
+    text-align: left;
+    appearance: none;
+    display: flex;
+    padding-left: 2px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+.codeishot__link_icon {
+    align-self: center;
+    margin-left: auto;
+    color: rgb(200, 200, 200);
+}
+.codeishot__btn_text {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace;
+    font-size: 14px;
+}
+.codeishot__logo_container {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: 3px;
+}
+
+.codeishot_left_logo {
+    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+        monospace;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.5rem;
+}
+
+.codeishot_right_logo {
+    border-radius: 0.375rem;
+    background-image: linear-gradient(
+        to bottom left,
+        #0d9488,
+        #0891b2,
+        #2563eb
+    );
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #ffffff;
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+</style>

From 5c805535a9acbb651ff2e78bf7cb61350d1f59f3 Mon Sep 17 00:00:00 2001
From: Giovanni D'Andrea <giovanni@exifly.it>
Date: Fri, 6 Sep 2024 15:40:51 +0200
Subject: [PATCH 15/15] fead(sidebar): added the new badge and formatted the
 code

---
 frontend/components/Sidebar.vue | 365 +++++++++++++++++---------------
 1 file changed, 192 insertions(+), 173 deletions(-)

diff --git a/frontend/components/Sidebar.vue b/frontend/components/Sidebar.vue
index 4f84ff4..9c96f9d 100644
--- a/frontend/components/Sidebar.vue
+++ b/frontend/components/Sidebar.vue
@@ -1,231 +1,250 @@
 <template>
-  <div class="custom-props mobile-first border-right" id="sidebar-wrapper">
-    <div class="scrollbox">
-      <div class="sidebar-heading ms-4">MENU</div>
-      <ul class="list-unstyled ps-0 text-black mx-4" role="tablist">
-        <li class="mt-2 category-custom" role="tab">
-          <ProductHuntBadge />
-        </li>
-        <li class="sidebar-text-wrapper mt-2 category-custom" role="tab">
-          <NuxtLink
-            class="flex items-center gap-2 px-2"
-            to="/"
-            title="Go back to the Homepage"
-          >
-            <font-awesome-icon
-              class=""
-              width="12"
-              height="12"
-              icon="fa-solid fa-house"
-            />Home</NuxtLink
-          >
-        </li>
-        <li class="sidebar-text-wrapper mt-2 category-custom" role="tab">
-          <a
-            class="flex items-center gap-2 px-2"
-            title="Checkout our github repository"
-            style="text-decoration: none"
-            href="https://github.com/Exifly/ApiVault"
-            target="_blank"
-          >
-            <font-awesome-icon
-              class=""
-              width="12"
-              height="12"
-              :icon="['fas', 'star']"
-            />{{ stargazers }} Stars
-          </a>
-        </li>
-        <li class="sidebar-text-wrapper mt-2 category-custom" role="tab">
-          <a
-            class="flex items-center gap-2 px-2"
-            title="Checkout our github repository"
-            style="text-decoration: none"
-            href="https://github.com/Exifly/ApiVault"
-            target="_blank"
-          >
-            <font-awesome-icon
-              class=""
-              width="12"
-              height="12"
-              :icon="['fab', 'github']"
-            />Repository</a
-          >
-        </li>
-        <li class="sidebar-text-wrapper mt-2 category-custom" role="tab">
-          <a
-            class="flex items-center gap-2 px-2"
-            title="Sponsor APIVault"
-            style="text-decoration: none"
-            href="https://ko-fi.com/apivault"
-          >
-            <font-awesome-icon
-              class=""
-              width="12"
-              height="12"
-              icon="fa-solid fa-hand-holding-dollar"
-            />Sponsor</a
-          >
-        </li>
-        <li class="sidebar-text-wrapper mt-2 category-custom" role="tab">
-          <NuxtLink
-            class="flex items-center gap-2 px-2"
-            title="Our contributors"
-            style="text-decoration: none"
-            to="/contributors"
-          >
-            <font-awesome-icon
-              class=""
-              width="12"
-              height="12"
-              icon="fa-solid fa-users"
-            />Contributors</NuxtLink
-          >
-        </li>
-      </ul>
-      <div class="sidebar-heading ms-4">CATEGORIES</div>
-      <div class="list-group list-group-flush">
-        <ul class="list-unstyled ps-0 text-black mx-4" role="tablist">
-          <li
-            class="sidebar-text-wrapper mt-2 category-custom"
-            role="tab"
-            v-for="category in categoriesAttributes"
-            :key="category.name"
-          >
-            <NuxtLink
-              class="flex items-center gap-2 px-2"
-              :title="`${category.name} API List`"
-              :to="`/categories/${category.name}`"
-            >
-              <font-awesome-icon
-                class=""
-                width="12"
-                height="12"
-                :icon="category.icon"
-              />{{ category.name }}</NuxtLink
-            >
-          </li>
-          <hr />
-          <li class="sidebar-heading" role="tab">INFO</li>
-          <li
-            class="sidebar-text-wrapper sidebar-info-text mt-2 category-custom"
-            role="tab"
-          >
-            API Fetched: <b>{{ api.count }}</b>
-          </li>
-          <li
-            class="sidebar-text-wrapper sidebar-info-text mt-2 category-custom"
-            role="tab"
-          >
-            N. Categories: <b>{{ categoriesAttributes.length }}</b>
-          </li>
-        </ul>
-      </div>
+    <div class="custom-props mobile-first border-right" id="sidebar-wrapper">
+        <div class="scrollbox">
+            <div class="sidebar-heading ms-4">MENU</div>
+            <ul class="list-unstyled ps-0 text-black mx-4" role="tablist">
+                <li
+                    class="sidebar-text-wrapper mt-2 category-custom"
+                    role="tab"
+                >
+                    <NuxtLink
+                        class="flex items-center gap-2 px-2"
+                        to="/"
+                        title="Go back to the Homepage"
+                    >
+                        <font-awesome-icon
+                            class=""
+                            width="12"
+                            height="12"
+                            icon="fa-solid fa-house"
+                        />Home</NuxtLink
+                    >
+                </li>
+                <li
+                    class="sidebar-text-wrapper mt-2 category-custom"
+                    role="tab"
+                >
+                    <a
+                        class="flex items-center gap-2 px-2"
+                        title="Checkout our github repository"
+                        style="text-decoration: none"
+                        href="https://github.com/Exifly/ApiVault"
+                        target="_blank"
+                    >
+                        <font-awesome-icon
+                            class=""
+                            width="12"
+                            height="12"
+                            :icon="['fas', 'star']"
+                        />{{ stargazers }} Stars
+                    </a>
+                </li>
+                <li
+                    class="sidebar-text-wrapper mt-2 category-custom"
+                    role="tab"
+                >
+                    <a
+                        class="flex items-center gap-2 px-2"
+                        title="Checkout our github repository"
+                        style="text-decoration: none"
+                        href="https://github.com/Exifly/ApiVault"
+                        target="_blank"
+                    >
+                        <font-awesome-icon
+                            class=""
+                            width="12"
+                            height="12"
+                            :icon="['fab', 'github']"
+                        />Repository</a
+                    >
+                </li>
+                <li
+                    class="sidebar-text-wrapper mt-2 category-custom"
+                    role="tab"
+                >
+                    <a
+                        class="flex items-center gap-2 px-2"
+                        title="Sponsor APIVault"
+                        style="text-decoration: none"
+                        href="https://ko-fi.com/apivault"
+                    >
+                        <font-awesome-icon
+                            class=""
+                            width="12"
+                            height="12"
+                            icon="fa-solid fa-hand-holding-dollar"
+                        />Sponsor</a
+                    >
+                </li>
+                <li
+                    class="sidebar-text-wrapper mt-2 category-custom"
+                    role="tab"
+                >
+                    <NuxtLink
+                        class="flex items-center gap-2 px-2"
+                        title="Our contributors"
+                        style="text-decoration: none"
+                        to="/contributors"
+                    >
+                        <font-awesome-icon
+                            class=""
+                            width="12"
+                            height="12"
+                            icon="fa-solid fa-users"
+                        />Contributors</NuxtLink
+                    >
+                </li>
+            </ul>
+            <div class="sidebar-heading ms-4">FEATURED</div>
+            <ul class="list-unstyled ps-0 text-black mx-4" role="tablist">
+                <li class="mt-2 category-custom" role="tab">
+                    <CodeishotBadge />
+                </li>
+            </ul>
+            <div class="sidebar-heading ms-4">CATEGORIES</div>
+            <div class="list-group list-group-flush">
+                <ul class="list-unstyled ps-0 text-black mx-4" role="tablist">
+                    <li
+                        class="sidebar-text-wrapper mt-2 category-custom"
+                        role="tab"
+                        v-for="category in categoriesAttributes"
+                        :key="category.name"
+                    >
+                        <NuxtLink
+                            class="flex items-center gap-2 px-2"
+                            :title="`${category.name} API List`"
+                            :to="`/categories/${category.name}`"
+                        >
+                            <font-awesome-icon
+                                class=""
+                                width="12"
+                                height="12"
+                                :icon="category.icon"
+                            />{{ category.name }}</NuxtLink
+                        >
+                    </li>
+                    <hr />
+                    <li class="sidebar-heading" role="tab">INFO</li>
+                    <li
+                        class="sidebar-text-wrapper sidebar-info-text mt-2 category-custom"
+                        role="tab"
+                    >
+                        API Fetched: <b>{{ api.count }}</b>
+                    </li>
+                    <li
+                        class="sidebar-text-wrapper sidebar-info-text mt-2 category-custom"
+                        role="tab"
+                    >
+                        N. Categories: <b>{{ categoriesAttributes.length }}</b>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, ref } from "vue";
 import { categoriesProperties } from "~/utils/categoryMapping";
 import ApivaultServices from "~/services/ApivaultServices";
 import GithubServices from "~/services/GithubServices";
+import CodeishotBadge from "~/components/badges/CodeishotBadge.vue";
 
 const stargazers = ref();
 const categoriesAttributes = categoriesProperties;
 const api = reactive({
-  count: 0,
+    count: 0,
 });
 
 onMounted(async () => {
-  api.count = await ApivaultServices.countApis();
-  stargazers.value = await GithubServices.repoStars().catch((er) => 0);
+    api.count = await ApivaultServices.countApis();
+    stargazers.value = await GithubServices.repoStars().catch((er) => 0);
 });
 </script>
 
 <style scoped>
 ::-webkit-scrollbar {
-  width: 0px;
+    width: 0px;
 }
 .scrollbox {
-  overflow: scroll;
-  height: 89vh;
+    overflow: scroll;
+    height: 89vh;
 }
 .custom-props {
-  background-color: var(--bg-color);
-  position: fixed;
-  margin-top: 3.4rem;
-  height: 100vh;
-  width: 20vw;
-  font-size: 15px;
+    background-color: var(--bg-color);
+    position: fixed;
+    margin-top: 3.4rem;
+    height: 100vh;
+    width: 20vw;
+    font-size: 15px;
 }
 
 .category-custom:hover {
-  color: rgb(166, 166, 166);
+    color: rgb(166, 166, 166);
 }
 
 .sidebar-text-wrapper {
-  color: var(--text-color) !important;
-  text-decoration: none;
+    color: var(--text-color) !important;
+    text-decoration: none;
 }
 
 .sidebar-info-text {
-  padding: 0.4rem 0.2rem;
+    padding: 0.4rem 0.2rem;
 }
 .sidebar-text-wrapper a {
-  color: var(--text-color-sidebar) !important;
-  text-decoration: none;
-  padding: 0.4rem 0.2rem;
+    color: var(--text-color-sidebar) !important;
+    text-decoration: none;
+    padding: 0.4rem 0.2rem;
 }
 
 .sidebar-text-wrapper:hover {
-  color: var(--text-color-hover) !important;
-  background-color: var(--bg-card-glass-hover);
-  cursor: pointer;
-  border-radius: 5px;
+    color: var(--text-color-hover) !important;
+    background-color: var(--bg-card-glass-hover);
+    cursor: pointer;
+    border-radius: 5px;
 }
 
 .sidebar-heading {
-  color: var(--text-color-hover);
-  font-size: 18px;
-  font-weight: 600;
+    color: var(--text-color-hover);
+    font-size: 18px;
+    font-weight: 600;
 }
 
 .router-link-active {
-  background-color: var(--bg-card-glass-hover);
-  border-radius: 5px;
+    background-color: var(--bg-card-glass-hover);
+    border-radius: 5px;
 }
 
 .search-bar {
-  margin-top: 5vh;
-  margin-bottom: 5vh;
+    margin-top: 5vh;
+    margin-bottom: 5vh;
 }
 
 @media (min-width: 1581px) and (min-width: 1800px) {
-  .custom-props {
-    background-color: var(--bg-color);
-    position: fixed;
-    margin-left: 1vw;
-    height: 100vh;
-    width: 11vw;
-    font-size: 14px;
-  }
+    .custom-props {
+        background-color: var(--bg-color);
+        position: fixed;
+        margin-left: 1vw;
+        height: 100vh;
+        width: 11vw;
+        font-size: 14px;
+    }
 }
 
 @media only screen and (max-width: 600px) {
-  .mobile-first {
-    display: none;
-  }
+    .mobile-first {
+        display: none;
+    }
 }
 
 @media only screen and (min-width: 1581px) {
-  .custom-props {
-    background-color: var(--bg-color);
-    position: fixed;
-    margin-left: 8vw;
-    height: 100vh;
-    width: 16vw;
-    font-size: 14px;
-  }
+    .custom-props {
+        background-color: var(--bg-color);
+        position: fixed;
+        margin-left: 8vw;
+        height: 100vh;
+        width: 16vw;
+        font-size: 14px;
+    }
 }
 </style>