#145 - Dynamically generate badge-number (#146)

* make badge number dynamic

* remove the TODO comment

* fix open-positions design-bug

src/components/AppStyles.vue

@@ -21,6 +21,7 @@
     --danger_2: #faebeb;
     --text_0: #363636;
     --text_1: #707070;
+    --text_2: #939393;
     --general_0: #dbdbdb;
     --general_1: #ededed;
     --general_1_opacity_6: rgba(237,237,237,0.6);

src/components/Navigation.vue

@@ -30,18 +30,25 @@ import { onMounted, ref } from 'vue'
 import { isNavigationOpen, closeNavigation } from '../store.ts';
 import { useStore } from '@nanostores/vue';
 import { resolvePath } from '@/utils/helpers.js'
-const $isNavigationOpen = useStore(isNavigationOpen);
 
+// local-state
+const $isNavigationOpen = useStore(isNavigationOpen);
 let menuList = ref([])
 
+// NOTE: await Astro.glob(...) is only available within *.astro file.
+//       So using Vite's import.meta.glob() instead here.
+//       (reference: https://vitejs.dev/guide/features.html#glob-import)
+const activeJobPostNames = Object.keys(import.meta.glob('../jobs/*.md'))
+  .map((filepath) => filepath.split('/').pop())
+  .filter(fileName => !fileName.startsWith('_'))
+
 onMounted(() => {
   menuList.value = [
     {  name: 'Home', id: 'homeLink', path: '/' },
     { name: 'About us', id: 'aboutUsLink', path: '/about-us' },
     { name: 'Blog', id: 'blogLink', path: '/blog' },
     { name: 'FAQS', id: 'blogLink', path: '/faq' },
-    // TODO: figure out how to calculate this badge number based on the number of files in the jobs folder
-    { name: 'Hiring', id: 'hiringLink', path: '/hiring', badge: 3 },
+    { name: 'Hiring', id: 'hiringLink', path: '/hiring', badge: activeJobPostNames.length },
     { name: 'Donate', id: 'donateLink', path: '/donate' }
   ].filter(Boolean)
 })

src/layouts/JobPost.astro

@@ -31,10 +31,10 @@ const currentPath = path[path.length - 2];
     <section class="container c-container-top">
       <h2 class="is-title-2 c-container-title">Open Positions</h2>
       <div class="c-job-links">
-        {jobs.map((job) => (
+        {jobs.map((job: any) => (
           <a href={resolvePath("/hiring"+job.frontmatter.permalink)} class={currentPath === job.frontmatter.permalink.replaceAll("/", "") ? "active-link" : ""}>
-            {job.frontmatter.title}
-            <span>{job.frontmatter.type}</span>
+            <span class="c-job-title">{job.frontmatter.title}</span>
+            <span class="c-job-type">{job.frontmatter.type}</span>
           </a>
         ))}
       </div>
@@ -127,21 +127,21 @@ const currentPath = path[path.length - 2];
     flex-wrap: wrap;
 
     @include phone {
-      flex-wrap: wrap-reverse;
-      white-space: pre-wrap;
-      text-align: left;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+      justify-content: flex-start;
     }
 
-    span {
-      color: #939393;
+    .c-job-type {
+      color: $text_2;
     }
 
     &.active-link {
       background: $primary_0;
-      color: #fff;
+      color: $background_0;
 
-      span {
-        color: #fff;
+      .c-job-type {
+        color: inherit;
       }
     }
   }

src/styles/_colors.scss

@@ -10,6 +10,7 @@ $general_2: var(--general_2);
 
 $text_0: var(--text_0);
 $text_1: var(--text_1);
+$text_2: var(--text_2);
 
 $primary_0: var(--primary_0);
 $primary_0_1: var(--primary_0_1);