merge Develop into main

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>

components/AppProjects.vue

@@ -48,7 +48,54 @@ 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 -->
+      <!-- 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>

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[];
 }>();
 

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')"
   >

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);

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>

components/ui/Divider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
-  label: string;
-  horizontal: boolean;
+  label?: string;
+  horizontal?: boolean;
 }>();
 </script>
 

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),
     }));
 };

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,
     }));
 };

server/utils/calculateRate.ts

@@ -0,0 +1,2 @@
+export const calculateRate = (value: number, total: number) =>
+    +((value / total) * 100).toFixed(1);

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,18 +30,28 @@ export const useRepositoryStore = defineStore('repository', () => {
                     (lang) => lang.name === languageStore.selected
                 )
             );
+
+            // reset page on filter
+            page.value = 1;
         }
 
         // filter by topics
         if (topicStore.selected) {
             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,
+    };
 });