merge Develop into master

.env.example

@@ -0,0 +1,10 @@
+# social-link handles
+USER_GITHUB=
+USER_REDDIT=
+USER_LINKEDIN=
+USER_TWITTER=
+USER_INSTAGRAM=
+
+# github api
+GITHUB_API_TOKEN=
+GITHUB_API_USERNAME=

.github/workflows/build-deploy.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |
           npm ci
-          npm run build
+          npm run generate
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4.2.2

.gitignore

@@ -1,5 +1,25 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+server/mocks
+
+# Node dependencies
 node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
 .DS_Store
-dist
-dist-ssr
-*.local
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -50,11 +50,11 @@ You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager
 4. Set your social link handles in .env file.
     ```sh
     # social-link handles
-    VITE_USER_GITHUB=
-    VITE_USER_REDDIT=
-    VITE_USER_LINKEDIN=
-    VITE_USER_TWITTER=
-    VITE_USER_INSTAGRAM=
+    USER_GITHUB=
+    USER_REDDIT=
+    USER_LINKEDIN=
+    USER_TWITTER=
+    USER_INSTAGRAM=
     ```
 5. Setup your GitHub profile settings to show in header section.
     ```sh
@@ -125,11 +125,10 @@ The workflow will build the project using npm and output the result to the `dist
 
 ## References
 
--   [Node.js](https://nodejs.dev/)
--   [Vite](https://vitejs.dev/)
 -   [Vue.js](https://vuejs.org/)
--   [Tailwind CSS](https://tailwindcss.com/)
+-   [Nuxt.js](https://nuxtjs.org/)
 -   [DaisyUI](https://daisyui.com/)
+-   [Tailwind CSS](https://tailwindcss.com/)
 -   [Bootstrap Icons](https://icons.getbootstrap.com/)
 -   [GitHub REST API](https://docs.github.com/en/rest)
 -   [GitHub Actions](https://docs.github.com/en/actions)

app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="space-y-10">
+    <AppHeader />
+    <AppParticles />
+    <AppProjects />
+    <AppFooter />
+  </div>
+</template>

src/sections/AppFooter.vue → components/AppFooter.vue

@@ -1,8 +1,7 @@
-<script setup>
-import { useSocial } from "@/store/social";
-import SocialNav from "./partials/SocialNav.vue";
-
-const { links } = useSocial();
+<script setup lang="ts">
+const { data: links } = await useFetch("/api/social-links", {
+  default: () => [],
+});
 </script>
 
 <template>

src/sections/AppHeader.vue → components/AppHeader.vue

@@ -1,33 +1,26 @@
-<script setup>
-import { computed, ref } from "vue";
-import { storeToRefs } from "pinia";
+<script setup lang="ts">
+// @ts-ignore
 import VueWriter from "vue-writer";
-import { timestamp } from "@/utils";
-import { useProfileStore } from "@/store/profile";
-import Loader from "@/components/Loader.vue";
-import Avatar from "@/components/Avatar.vue";
-import CoverUrl from "@/assets/bg-header.jpg";
-import StatGroup from "@/components/StatGroup.vue";
-import Stat from "@/components/Stat.vue";
 
 const showLogo = ref(true);
 
-const profileStore = useProfileStore();
-const { profile, loading } = storeToRefs(profileStore);
+const { data: profile } = await useFetch("/api/profile");
 
-const titles = computed(() => {
-  return [profile.value.bio, "Open Source Contributor", "Web3 & Blockchain Enthusiast"];
-});
+const titles = computed(() => [
+  profile.value?.bio,
+  "Open Source Contributor",
+  "Web3 & Blockchain Enthusiast",
+]);
 </script>
 
 <template>
   <header
     class="hero min-h-screen overflow-hidden bg-bottom"
-    :style="{ backgroundImage: `url(${CoverUrl})` }"
+    style="background-image: url(/img/bg-header.jpg)"
   >
     <!-- <div class="hero-overlay bg-opacity-60"></div> -->
     <div class="hero-content flex-col text-center md:text-left text-neutral-content">
-      <Loader v-if="loading" ring class="w-52" />
+      <Loader v-if="!profile" class="w-52" ring />
 
       <template v-else>
         <div class="flex flex-col md:flex-row items-center">
@@ -42,7 +35,7 @@ const titles = computed(() => {
               {{ profile.name }}
             </h1>
 
-            <p class="text-xl lg:text-3xl">
+            <div class="text-xl lg:text-3xl">
               <!-- profession -->
               <VueWriter
                 :array="titles"
@@ -59,11 +52,11 @@ const titles = computed(() => {
               <img
                 v-if="showLogo"
                 class="w-36 h-auto inline-block"
-                src="@/assets/company-logo.png"
+                src="/img/company-logo.png"
                 @error="showLogo = false"
               />
               <span v-else class="text-nowrap">{{ profile.company }}</span>
-            </p>
+            </div>
           </div>
         </div>
 
@@ -77,3 +70,4 @@ const titles = computed(() => {
     </div>
   </header>
 </template>
+composables/profile

src/sections/AppParticles.vue → components/AppParticles.client.vue

@@ -1,14 +1,11 @@
-<script setup>
-import { ParticlesComponent } from "vue3-particles";
+<script setup lang="ts">
 import { loadSlim } from "tsparticles-slim";
 
-const particlesInit = async (engine) => {
+const particlesInit = async (engine: any) => {
   await loadSlim(engine);
 };
 
-const particlesLoaded = async (container) => {
-  // console.log("Particles container loaded", container);
-};
+const particlesLoaded = async (container: any) => {};
 
 const options = {
   // background: {
@@ -87,7 +84,7 @@ const options = {
 </script>
 
 <template>
-  <ParticlesComponent
+  <vue-particles
     id="tsparticles"
     :particlesInit="particlesInit"
     :particlesLoaded="particlesLoaded"

src/sections/AppProjects.vue → components/AppProjects.vue

@@ -1,18 +1,7 @@
-<script setup>
+<script setup lang="ts">
 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 topicStore = useTopicStore();
 const languageStore = useLanguageStore();

src/sections/partials/SocialNav.vue → components/footer/SocialNav.vue

@@ -1,10 +1,11 @@
-<script setup>
-import Link from "@/components/Link.vue";
-import Icon from "@/components/Icon.vue";
+<script setup lang="ts">
+// todo: this must be override default NuxtLink in config files
+import Link from "@/components/ui/Link.vue";
+import { SocialLink } from "@/server/types/social";
 
-defineProps({
-  links: Array,
-});
+defineProps<{
+  links: SocialLink[];
+}>();
 </script>
 
 <template>

src/sections/partials/LanguageFilterNav.vue → components/project/LanguageFilterNav.vue

@@ -1,17 +1,14 @@
-<script setup>
-import Heading from "@/components/Heading.vue";
-import Button from "@/components/Button.vue";
-import Icon from "@/components/Icon.vue";
-import ProgressBar from "@/components/ProgressBar.vue";
+<script setup lang="ts">
+import { Language } from "server/types/repo";
 
 const emit = defineEmits(["update:modelValue"]);
 
-const props = defineProps({
-  modelValue: String,
-  languages: Array,
-});
+const props = defineProps<{
+  modelValue: string | null;
+  languages:  Language[];
+}>();
 
-const onToggle = (name) => {
+const onToggle = (name: string) => {
   const active = props.modelValue === name;
   emit("update:modelValue", active ? null : name);
 };
@@ -21,7 +18,7 @@ const onToggle = (name) => {
   <div class="space-y-2">
     <Heading small> Languages </Heading>
 
-    <progress-bar :items="languages" />
+    <ProgressBar :items="(languages as any[])" />
 
     <nav class="flex flex-wrap gap-1">
       <Button

src/sections/partials/LanguageList.vue → components/project/LanguageList.vue

@@ -1,12 +1,12 @@
-<script setup>
-import Icon from "@/components/Icon.vue";
+<script setup lang="ts">
+import { Language } from "server/types/repo";
 
-defineProps({
-  languages: Array,
-});
+defineProps<{
+  languages: Language[];
+}>();
 
 // filter significant languages that has rate >= 1
-const filterSignificant = (languages) => {
+const filterSignificant = (languages: Language[]) => {
   const filtered = languages.filter((lang) => lang.rate >= 1);
   return filtered.sort((a, b) => b.rate - a.rate);
 };

src/sections/partials/Repository.vue → components/project/Repository.vue

@@ -1,16 +1,10 @@
-<script setup>
-import { timestamp } from "@/utils";
-import Card from "@/components/Card.vue";
-import Icon from "@/components/Icon.vue";
-import Link from "@/components/Link.vue";
-import Badge from "@/components/Badge.vue";
-import ProgressBar from "@/components/ProgressBar.vue";
-import LanguageList from "./LanguageList.vue";
-import TopicList from "./TopicList.vue";
+<script setup lang="ts">
+import Link from "@/components/ui/Link.vue";
+import { Repo } from "server/types/repo";
 
-defineProps({
-  repo: Object,
-});
+defineProps<{
+  repo: Repo;
+}>();
 </script>
 
 <template>
@@ -72,7 +66,9 @@ defineProps({
         ]"
       >
         <TopicList :topics="repo.topics" class="max-sm:hidden" />
-        <ProgressBar :items="repo.languages" small />
+
+        <ProgressBar :items="(repo.languages as any[])" small />
+
         <LanguageList :languages="repo.languages" />
       </div>
     </div>

src/sections/partials/RepositoryList.vue → components/project/RepositoryList.client.vue

@@ -1,13 +1,13 @@
-<script setup>
-import Repository from "./Repository.vue";
+<script setup lang="ts">
+import { Repo } from "server/types/repo";
 
-defineProps({
-  repos: Array,
-});
+defineProps<{
+  repos: Repo[];
+}>();
 </script>
 
 <template>
-  <transition-group
+  <TransitionGroup
     tag="div"
     class="w-full flex flex-col gap-y-4"
     enter-active-class="transform-gpu"
@@ -23,5 +23,5 @@ defineProps({
       :repo="repo"
       class="transition-all duration-300"
     />
-  </transition-group>
+  </TransitionGroup>
 </template>

src/sections/partials/TopicFilterNav.vue → components/project/TopicFilterNav.vue

@@ -1,14 +1,14 @@
-<script setup>
-import Button from "@/components/Button.vue";
+<script setup lang="ts">
+import { Topic } from "server/types/repo";
 
 const emit = defineEmits(["update:modelValue"]);
 
-const props = defineProps({
-  modelValue: String,
-  topics: Array,
-});
+const props = defineProps<{
+  modelValue: string;
+  topics: Topic[];
+}>();
 
-const onToggle = (topic) => {
+const onToggle = (topic: string) => {
   const active = props.modelValue === topic;
   emit("update:modelValue", active ? null : topic);
 };