Develop

package.json

@@ -19,6 +19,7 @@
   "homepage": "https://github.com/webceyhan/webceyhan.github.io#readme",
   "dependencies": {
     "bootstrap-icons": "^1.10.5",
+    "pinia": "^2.1.6",
     "tsparticles-slim": "^2.12.0",
     "vue": "^3.2.47",
     "vue-writer": "^1.2.0",

src/components/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { provide, ref } from "vue";
+
+const panels = ref([]);
+
+function collapseAll() {
+  panels.value.forEach((panel) => {
+    panel.open = false;
+  });
+}
+
+provide("accordion", { panels, collapseAll });
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

src/components/Avatar.vue

@@ -6,7 +6,10 @@ defineProps({
 
 <template>
   <div class="avatar">
-    <div class="ring-8 ring-primary/20 ring-offset-base-100 ring-offset-2 rounded-full">
+    <!-- bugfix: !aspect-auto added to the div to avoid the image being stretched on the first render -->
+    <div
+      class="ring-8 ring-primary/20 ring-offset-base-100 ring-offset-2 rounded-full !aspect-auto"
+    >
       <img :src="url" alt="avatar" />
     </div>
   </div>

src/components/Collapse.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { inject, ref } from "vue";
+
+const props = defineProps({
+  title: String,
+  open: Boolean,
+});
+
+const open = ref(props.open);
+
+const { panels, collapseAll } = inject("accordion");
+panels.value.push({ open });
+
+function toggle() {
+  collapseAll();
+  open.value = true;
+}
+</script>
+
+<template>
+  <details
+    :open="open"
+    class="collapse collapse-arrow"
+    :class="{ 'bg-base-300/50': open }"
+    @click.prevent="toggle()"
+  >
+    <summary
+      class="collapse-title hover:bg-base-100/50"
+    >
+      {{ title }}
+    </summary>
+
+    <div class="collapse-content p-2">
+      <slot />
+    </div>
+  </details>
+</template>

src/components/Drawer.vue

@@ -38,7 +38,7 @@ const toggle = () => {
 
       <aside
         :class="[
-          'w-80 lg:w-96 h-full overflow-scroll p-4 lg:p-0 lg:mr-8 space-y-8',
+          'w-80 h-full max-lg:overflow-y-scroll p-4 lg:p-0 lg:mr-8 space-y-8',
           'bg-base-300 text-base-content lg:bg-opacity-50',
         ]"
       >

src/main.js

@@ -1,7 +1,10 @@
 import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import App from './App.vue';
 
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import './style.css';
 
-createApp(App).mount('#app');
+createApp(App)
+    .use(createPinia())
+    .mount('#app');

src/sections/AppHeader.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { computed, ref } from "vue";
+import { storeToRefs } from "pinia";
 import VueWriter from "vue-writer";
 import { timestamp } from "@/utils";
-import { useProfile } from "@/store/profile";
+import { useProfileStore } from "@/store/profile";
 import Loader from "@/components/Loader.vue";
 import Avatar from "@/components/Avatar.vue";
 import CoverUrl from "@/assets/bg-header.jpg";
@@ -11,7 +12,8 @@ import Stat from "@/components/Stat.vue";
 
 const showLogo = ref(true);
 
-const { profile, loading } = useProfile();
+const profileStore = useProfileStore();
+const { profile, loading } = storeToRefs(profileStore);
 
 const titles = computed(() => {
   return [profile.value.bio, "Open Source Contributor", "Web3 & Blockchain Enthusiast"];

src/sections/AppProjects.vue

@@ -1,35 +1,33 @@
 <script setup>
-import { useRepository } from "@/store/repository";
+import { useTopicStore } from "@/store/topic";
+import { useLanguageStore } from "@/store/language";
+import { useRepositoryStore } from "@/store/repository";
 import Loader from "@/components/Loader.vue";
 import Heading from "@/components/Heading.vue";
 import Divider from "@/components/Divider.vue";
 import Drawer from "../components/Drawer.vue";
 import Button from "@/components/Button.vue";
 import Icon from "@/components/Icon.vue";
+import Collapse from "@/components/Collapse.vue";
+import Accordion from "@/components/Accordion.vue";
 import TopicFilterNav from "./partials/TopicFilterNav.vue";
 import LanguageFilterNav from "./partials/LanguageFilterNav.vue";
 import RepositoryList from "./partials/RepositoryList.vue";
 
-const {
-  loading,
-  topics,
-  languages,
-  repositories,
-  selectedTopic,
-  selectedLanguage,
-} = useRepository();
+const topicStore = useTopicStore();
+const languageStore = useLanguageStore();
+const repositoryStore = useRepositoryStore();
 </script>
 
 <template>
   <main class="container mx-auto px-3">
     <Heading class="max-md:text-center" large>
-      <Icon name="github" class="mr-2" />
-      Projects
+      <Icon name="github" class="mr-2" /> Projects
     </Heading>
 
     <Divider />
 
-    <Loader v-if="loading" bars large />
+    <Loader v-if="repositoryStore.loading" bars large />
 
     <Drawer v-else>
       <template #trigger="{ toggle }">
@@ -44,11 +42,24 @@ const {
       </template>
 
       <template #sidebar>
-        <LanguageFilterNav :languages="languages" v-model="selectedLanguage" />
-        <TopicFilterNav :topics="topics" v-model="selectedTopic" />
+        <LanguageFilterNav
+          :languages="languageStore.languages"
+          v-model="languageStore.selected"
+        />
+
+        <Accordion class="w-full">
+          <Collapse
+            v-for="({ category, topics }, i) in topicStore.topicsByCategory"
+            :key="i"
+            :title="category"
+            class="border-t border-neutral"
+          >
+            <TopicFilterNav :topics="topics" v-model="topicStore.selected" />
+          </Collapse>
+        </Accordion>
       </template>
 
-      <RepositoryList :repos="repositories" />
+      <RepositoryList :repos="repositoryStore.repositories" />
     </Drawer>
   </main>
 </template>

src/sections/partials/LanguageFilterNav.vue

@@ -30,7 +30,7 @@ const onToggle = (name) => {
         :active="name === modelValue"
         @click="onToggle(name)"
         class="border-neutral-content/20"
-        variant="ghost"
+        outline
         small
       >
         <Icon class="me-1" name="box" :style="{ color }" />

src/sections/partials/TopicFilterNav.vue

@@ -1,5 +1,4 @@
 <script setup>
-import Heading from "@/components/Heading.vue";
 import Button from "@/components/Button.vue";
 
 const emit = defineEmits(["update:modelValue"]);
@@ -16,21 +15,17 @@ const onToggle = (topic) => {
 </script>
 
 <template>
-  <div class="space-y-2">
-    <Heading small> Topics </Heading>
-
-    <nav class="flex flex-wrap gap-1">
-      <Button
-        v-for="(topic, i) in topics"
-        :key="i"
-        :label="topic"
-        :active="topic === modelValue"
-        @click="onToggle(topic)"
-        variant="primary"
-        class="border-neutral-content/20 rounded-full lowercase"
-        outline
-        small
-      />
-    </nav>
-  </div>
+  <nav class="flex flex-wrap gap-1">
+    <Button
+      v-for="({ name }, i) in topics"
+      :key="i"
+      :label="name"
+      :active="name === modelValue"
+      @click="onToggle(name)"
+      variant="primary"
+      class="border-neutral-content/20 rounded-full lowercase"
+      outline
+      small
+    />
+  </nav>
 </template>

src/store/language.js

@@ -0,0 +1,53 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { sortByRate } from '@/utils';
+import { getRepositories } from '@/api/github';
+
+export const useLanguageStore = defineStore('language', () => {
+    // state
+    const languages = ref([]);
+    const loading = ref(false);
+    const selected = ref(null);
+
+    // actions
+    async function load() {
+        loading.value = true;
+        languages.value = await getLanguages();
+        loading.value = false;
+    }
+
+    // init
+    load();
+
+    // public api
+    return { load, languages, selected };
+});
+
+// HELPERS /////////////////////////////////////////////////////////////////////////////////////////
+
+const getLanguages = async () => {
+    const repos = await getRepositories();
+    const languages = collectLanguages(repos);
+    return sortByRate(languages);
+};
+
+const collectLanguages = (repos) => {
+    let lineSum = 0;
+
+    // populate key-based unique list
+    const list = repos.reduce((acc, repo) => {
+        repo.languages.forEach(({ name, lines, color }) => {
+            acc[name] = acc[name] ?? { name, lines, color };
+            acc[name].lines += lines;
+            lineSum += lines;
+        });
+
+        return acc;
+    }, {});
+
+    // add rate to each language
+    return Object.values(list).map((language) => ({
+        ...language,
+        rate: (language.lines / lineSum) * 100,
+    }));
+};