From 25c7c070efc52fd11d0173a25182cf485cfaaa83 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:19:57 +0300
Subject: [PATCH 1/9] package updated

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index e818dd3..5264a6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "vue3-particles": "^2.12.0"
       },
       "devDependencies": {
-        "@nuxt/devtools": "*",
+        "@nuxt/devtools": "latest",
         "@nuxtjs/tailwindcss": "^6.8.0",
         "@types/node": "^20.5.3",
         "daisyui": "^3.5.1",

From 89d64be4614b6aea340c2352c5b12227b4a29423 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:33:08 +0300
Subject: [PATCH 2/9] profile bio titles moved to backend

---
 components/AppHeader.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index bba8b2e..7b62fdd 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -6,11 +6,7 @@ const showLogo = ref(true);
 
 const { data: profile } = await useFetch("/api/profile");
 
-const titles = computed(() => [
-  profile.value?.bio,
-  "Open Source Contributor",
-  "Web3 & Blockchain Enthusiast",
-]);
+const titles = computed(() => profile.value?.bio.split(","));
 </script>
 
 <template>

From 06d90f9f5191d440bf06be87413a78b9a1d68644 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:35:28 +0300
Subject: [PATCH 3/9] bugfix: modelValue must be optional

---
 components/project/LanguageFilterNav.vue | 2 +-
 components/project/TopicFilterNav.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project/LanguageFilterNav.vue b/components/project/LanguageFilterNav.vue
index cf8d19f..6abab43 100644
--- a/components/project/LanguageFilterNav.vue
+++ b/components/project/LanguageFilterNav.vue
@@ -4,7 +4,7 @@ import { Language } from "server/types/repo";
 const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
-  modelValue: string | null;
+  modelValue?: string;
   languages:  Language[];
 }>();
 
diff --git a/components/project/TopicFilterNav.vue b/components/project/TopicFilterNav.vue
index 15b407b..ee7b002 100644
--- a/components/project/TopicFilterNav.vue
+++ b/components/project/TopicFilterNav.vue
@@ -4,7 +4,7 @@ import { Topic } from "server/types/repo";
 const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
-  modelValue: string;
+  modelValue?: string;
   topics: Topic[];
 }>();
 

From 653de12645de2a22c9a6b50e829d807fb89695c5 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:38:45 +0300
Subject: [PATCH 4/9] bugfix: divider props must be optional

---
 components/ui/Divider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ui/Divider.vue b/components/ui/Divider.vue
index 4095d0d..67f9932 100644
--- a/components/ui/Divider.vue
+++ b/components/ui/Divider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
-  label: string;
-  horizontal: boolean;
+  label?: string;
+  horizontal?: boolean;
 }>();
 </script>
 

From f7bf520ed0478b1465bb518f7a2fad80d19ee7ca Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:42:21 +0300
Subject: [PATCH 5/9] filter nav modelValue reverted back to nullable

---
 components/project/LanguageFilterNav.vue | 2 +-
 components/project/TopicFilterNav.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project/LanguageFilterNav.vue b/components/project/LanguageFilterNav.vue
index 6abab43..cf8d19f 100644
--- a/components/project/LanguageFilterNav.vue
+++ b/components/project/LanguageFilterNav.vue
@@ -4,7 +4,7 @@ import { Language } from "server/types/repo";
 const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
-  modelValue?: string;
+  modelValue: string | null;
   languages:  Language[];
 }>();
 
diff --git a/components/project/TopicFilterNav.vue b/components/project/TopicFilterNav.vue
index ee7b002..a36ddb5 100644
--- a/components/project/TopicFilterNav.vue
+++ b/components/project/TopicFilterNav.vue
@@ -4,7 +4,7 @@ import { Topic } from "server/types/repo";
 const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps<{
-  modelValue?: string;
+  modelValue: string | null;
   topics: Topic[];
 }>();
 

From 39abe67f9bcf80c3911e6e7079324db6630ed116 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 00:44:35 +0300
Subject: [PATCH 6/9] collapse open prop must be optional

---
 components/ui/Collapse.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/Collapse.vue b/components/ui/Collapse.vue
index 62e9dad..824ef6e 100644
--- a/components/ui/Collapse.vue
+++ b/components/ui/Collapse.vue
@@ -3,7 +3,7 @@ import { AccordionInjection } from "types/ui";
 
 const props = defineProps<{
   title: string;
-  open: boolean;
+  open?: boolean;
 }>();
 
 const open = ref(props.open);

From a53dc0ef599e50e15edbc463908e2d97ccc09c19 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 01:40:32 +0300
Subject: [PATCH 7/9] rate calculation converted to util

---
 server/api/languages.ts       | 2 +-
 server/api/repos.ts           | 2 +-
 server/utils/calculateRate.ts | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 server/utils/calculateRate.ts

diff --git a/server/api/languages.ts b/server/api/languages.ts
index 8e247e0..3e1c9a0 100644
--- a/server/api/languages.ts
+++ b/server/api/languages.ts
@@ -36,6 +36,6 @@ const collectLanguages = (repos: Repo[]): Language[] => {
     // add rate to each language
     return Object.values(list).map((language) => ({
         ...language,
-        rate: (language.lines / lineSum) * 100,
+        rate: calculateRate(language.lines, lineSum),
     }));
 };
diff --git a/server/api/repos.ts b/server/api/repos.ts
index e0b2b0d..6dbfdc0 100644
--- a/server/api/repos.ts
+++ b/server/api/repos.ts
@@ -60,7 +60,7 @@ const normalizeLanguages = (data: LanguageData): Language[] => {
     return entries.map(([name, lines]) => ({
         name,
         lines,
-        rate: ((lines / lineSum) * 100).toFixed(1) as any,
+        rate: calculateRate(lines, lineSum),
         color: COLORS[name] ?? null,
     }));
 };
diff --git a/server/utils/calculateRate.ts b/server/utils/calculateRate.ts
new file mode 100644
index 0000000..f55bd45
--- /dev/null
+++ b/server/utils/calculateRate.ts
@@ -0,0 +1,2 @@
+export const calculateRate = (value: number, total: number) =>
+    +((value / total) * 100).toFixed(1);

From 303664ead84fe9ca049b2961e0705297a7d55578 Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 16:51:57 +0300
Subject: [PATCH 8/9] paging added

---
 components/AppProjects.vue  | 44 +++++++++++++++++++++++++++++++++++++
 components/ui/Button.vue    |  2 ++
 components/ui/Countdown.vue | 11 ++++++++++
 store/repository.ts         | 34 ++++++++++++++++++++++++++--
 4 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/Countdown.vue

diff --git a/components/AppProjects.vue b/components/AppProjects.vue
index 61f2ea1..d7f5e72 100644
--- a/components/AppProjects.vue
+++ b/components/AppProjects.vue
@@ -48,7 +48,51 @@ const repositoryStore = useRepositoryStore();
         </Accordion>
       </template>
 
+      <!-- paging / filtering info -->
+      <div
+        class="flex flex-wrap justify-center items-center opacity-50 text-sm mb-4 gap-2"
+      >
+        <!-- paging info -->
+        <div class="max-sm:w-full text-center">
+          Showing
+          <Countdown :value="repositoryStore.repositories.length" /> of
+          <Countdown :value="repositoryStore.total" />
+          projects
+          <span v-if="repositoryStore.hasFilter">with</span>
+        </div>
+
+        <!-- filtering info -->
+        <Button
+          v-if="languageStore.selected"
+          @click="languageStore.selected = null"
+          outline
+          micro
+        >
+          {{ languageStore.selected }} <Icon name="x-circle-fill" />
+        </Button>
+
+        <Button
+          v-if="topicStore.selected"
+          @click="topicStore.selected = null"
+          outline
+          micro
+        >
+          {{ topicStore.selected }} <Icon name="x-circle-fill" />
+        </Button>
+      </div>
+
       <RepositoryList :repos="repositoryStore.repositories" />
+
+      <!-- load more -->
+      <Button
+        v-if="repositoryStore.hasMore"
+        @click="repositoryStore.loadMore()"
+        variant="primary"
+        class="w-full my-4 mx-auto"
+        outline
+      >
+        <Icon name="caret-down" /> Load More
+      </Button>
     </Drawer>
   </main>
 </template>
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index bf4669b..41fb91b 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -11,6 +11,7 @@ defineProps<{
   large?: boolean;
   small?: boolean;
   tiny?: boolean;
+  micro?: boolean;
 }>();
 </script>
 
@@ -28,6 +29,7 @@ defineProps<{
       'btn-lg': large,
       'btn-sm': small,
       'btn-xs': tiny,
+      'btn-xs !h-5 !min-h-min': micro,
     }"
     @click="$emit('click')"
   >
diff --git a/components/ui/Countdown.vue b/components/ui/Countdown.vue
new file mode 100644
index 0000000..61df25e
--- /dev/null
+++ b/components/ui/Countdown.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  value: number;
+}>();
+</script>
+
+<template>
+  <span class="countdown font-mono">
+    <span :style="{ '--value': value }" />
+  </span>
+</template>
diff --git a/store/repository.ts b/store/repository.ts
index 6acbc64..b6f88fd 100644
--- a/store/repository.ts
+++ b/store/repository.ts
@@ -10,8 +10,17 @@ export const useRepositoryStore = defineStore('repository', () => {
     const topicStore = useTopicStore();
     const languageStore = useLanguageStore();
 
+    // pagination states
+    const page = ref(1);
+    const perPage = ref(5);
+    const total = computed(() => filteredRepositories.value.length);
+    const hasMore = computed(() => total.value > page.value * perPage.value);
+    const hasFilter = computed(
+        () => !!languageStore.selected || !!topicStore.selected
+    );
+
     // getters
-    const repositories = computed(() => {
+    const filteredRepositories = computed(() => {
         let repos = _repositories.value;
 
         // filter by language
@@ -21,6 +30,9 @@ export const useRepositoryStore = defineStore('repository', () => {
                     (lang) => lang.name === languageStore.selected
                 )
             );
+
+            // reset page on filter
+            page.value = 1;
         }
 
         // filter by topics
@@ -28,11 +40,18 @@ export const useRepositoryStore = defineStore('repository', () => {
             repos = repos.filter((repo) =>
                 repo.topics.includes(topicStore.selected as any)
             );
+
+            // reset page on filter
+            page.value = 1;
         }
 
         return repos;
     });
 
+    const repositories = computed(() =>
+        filteredRepositories.value.slice(0, page.value * perPage.value)
+    );
+
     //  actions
     async function load() {
         loading.value = true;
@@ -41,9 +60,20 @@ export const useRepositoryStore = defineStore('repository', () => {
         loading.value = false;
     }
 
+    function loadMore() {
+        page.value++;
+    }
+
     // init
     load();
 
     // public api
-    return { load, loading, repositories };
+    return {
+        loadMore,
+        loading,
+        repositories,
+        hasFilter,
+        hasMore,
+        total,
+    };
 });

From 0b296a257e1bae53b57bd1046ad8a5d88a4b1c0a Mon Sep 17 00:00:00 2001
From: Evren Ceyhan <evren@ceyhan.io>
Date: Wed, 23 Aug 2023 17:10:17 +0300
Subject: [PATCH 9/9] bugfix: hydration error fiexd

---
 components/AppProjects.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/AppProjects.vue b/components/AppProjects.vue
index d7f5e72..16c4240 100644
--- a/components/AppProjects.vue
+++ b/components/AppProjects.vue
@@ -84,15 +84,18 @@ const repositoryStore = useRepositoryStore();
       <RepositoryList :repos="repositoryStore.repositories" />
 
       <!-- load more -->
-      <Button
-        v-if="repositoryStore.hasMore"
-        @click="repositoryStore.loadMore()"
-        variant="primary"
-        class="w-full my-4 mx-auto"
-        outline
-      >
-        <Icon name="caret-down" /> Load More
-      </Button>
+      <!-- bugfix: hydration mismatch can be avoided by wrapping this in a client-only tag -->
+      <client-only>
+        <Button
+          v-if="repositoryStore.hasMore"
+          @click="repositoryStore.loadMore()"
+          variant="primary"
+          class="w-full my-4 mx-auto"
+          outline
+        >
+          <Icon name="caret-down" /> Load More
+        </Button>
+      </client-only>
     </Drawer>
   </main>
 </template>