merge develop changes

README.md

@@ -1,7 +1,7 @@
 <!-- AUTOMATION BADGES -->
 
 [![CodeQL](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/github-code-scanning/codeql)
-[![Build and Deploy](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/build-deploy.yml/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/build-deploy.yml)
+[![Build and Deploy](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/deploy.yml/badge.svg)](https://github.com/webceyhan/webceyhan.github.io/actions/workflows/deploy.yml)
 
 <!-- LOGO (OPTIONAL) -->
 
@@ -26,7 +26,7 @@ Feel free to use it as your own landing page if you like.
 
 ## Requirements
 
-You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager first.
+You need to install the [Bun](https://bun.sh/) first.
 
 > Recommended IDE:
 > [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
@@ -44,9 +44,9 @@ You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager
     ```sh
     cd webceyhan.github.io
     ```
-3. Install NPM packages.
+3. Install packages.
     ```sh
-    npm install
+    bun install
     ```
 4. Set your social link handles in .env file.
     ```sh
@@ -74,9 +74,9 @@ You need to install the [Node.js](https://nodejs.dev/) and `npm` package manager
 You can use following commands to do various task with the project.
 
 ```sh
-npm run dev             # start development server
-npm run build           # build for production
-npm run preview         # preview built application
+bun run dev             # start development server
+bun run build           # build for production
+bun run preview         # preview built application
 ```
 
 > Take a look at the other scripts in [`package.json`](./package.json)
@@ -90,7 +90,7 @@ npm run preview         # preview built application
 Start the development server to watch changes while you code.
 
 ```sh
-npm run dev
+bun run dev
 ```
 
 <br>
@@ -101,13 +101,13 @@ npm run dev
 Build the application for production.
 
 ```sh
-npm run build
+bun run build
 ```
 
 You can also preview the application after building it.
 
 ```sh
-npm run preview
+bun run preview
 ```
 
 <br>
@@ -117,9 +117,9 @@ npm run preview
 
 A GitHub Action will automatically deploy the project to GitHub Pages on every push.
 
-The workflow will build the project using npm and output the result to the `dist` folder which will be then pushed to the `gh-pages` branch.
+The workflow will build the project using bun and output the result to the `dist` folder which will be then pushed to the `gh-pages` branch.
 
-> See the details in [.github/workflows/build-and-deploy.yml](./.github/workflows/build-and-deploy.yml)
+> See the details in [.github/workflows/deploy.yml](./.github/workflows/deploy.yml)
 
 <br>
 <!-- REFERENCES ////////////////////////////////////////////////////////// -->

components/footer/SocialNav.vue

@@ -3,9 +3,11 @@
 import Link from "@/components/ui/Link.vue";
 import type { SocialLink } from "~/server/types/social";
 
-defineProps<{
+interface Props {
   links: SocialLink[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/project/LanguageFilterNav.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Language } from "~/server/types/repo";
 
+interface Props {
+  modelValue: string | null;
+  languages: Language[];
+}
+
 const emit = defineEmits(["update:modelValue"]);
 
-const props = defineProps<{
-  modelValue: string | null;
-  languages:  Language[];
-}>();
+const props = defineProps<Props>();
 
 const onToggle = (name: string) => {
   const active = props.modelValue === name;

components/project/LanguageList.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { Language } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   languages: Language[];
-}>();
+}
+
+defineProps<Props>();
 
 // filter significant languages that has rate >= 1
 const filterSignificant = (languages: Language[]) => {

components/project/Repository.vue

@@ -2,9 +2,11 @@
 import Link from "@/components/ui/Link.vue";
 import type { Repo } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   repo: Repo;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/project/RepositoryList.client.vue → components/project/RepositoryList.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { Repo } from "~/server/types/repo";
 
-defineProps<{
+interface Props {
   repos: Repo[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/project/TopicFilterNav.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Topic } from "~/server/types/repo";
 
-const emit = defineEmits(["update:modelValue"]);
-
-const props = defineProps<{
+interface Props {
   modelValue: string | null;
   topics: Topic[];
-}>();
+}
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps<Props>();
 
 const onToggle = (topic: string) => {
   const active = props.modelValue === topic;

components/project/TopicList.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   topics?: string[];
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Avatar.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   url: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Badge.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
-
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   outlined?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Button.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
 
-defineEmits(["click"]);
-
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   outline?: boolean;
@@ -12,7 +10,11 @@ defineProps<{
   small?: boolean;
   tiny?: boolean;
   micro?: boolean;
-}>();
+}
+
+defineEmits(["click"]);
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Card.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   title?: string;
   imageAside?: boolean;
   imageOverlay?: boolean;
   compact?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Collapse.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { AccordionInjection } from "~/types/ui";
 
-const props = defineProps<{
+interface Props {
   title: string;
   open?: boolean;
-}>();
+}
+
+const props = defineProps<Props>();
 
 const open = ref(props.open);
 

components/ui/Countdown.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   value: number;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Divider.vue

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

components/ui/Heading.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   large?: boolean;
   //   medium: boolean; // default
   small?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Icon.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   name: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Link.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Variant } from "~/types/ui";
 
-defineProps<{
+interface Props {
   label?: string;
   variant?: Variant;
   active?: boolean;
   hover?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Loader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   spinner?: boolean;
   dots?: boolean;
   ring?: boolean;
@@ -9,7 +9,9 @@ defineProps<{
   small?: boolean;
   // medium: boolean
   large?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/ProgressBar.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Item } from "~/types/ui";
 
-defineProps<{
+interface Props {
   items: Item[];
   small?: boolean;
   //   medium: boolean; // default
   large?: boolean;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

components/ui/Stat.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-defineProps<{
+interface Props {
   label?: string;
   value?: string | number;
   desc?: string;
   icon?: string;
-}>();
+}
+
+defineProps<Props>();
 </script>
 
 <template>

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+    ssr: false,
     devtools: { enabled: true },
     modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
     css: ['~/assets/css/main.css', 'bootstrap-icons/font/bootstrap-icons.css'],