refactor server side code

.gitignore

@@ -5,7 +5,7 @@
 .nitro
 .cache
 dist
-server/mocks
+server/cache
 
 # Node dependencies
 node_modules

package.json

@@ -8,7 +8,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "mock": "node ./server/mocker.js"
+    "cache": "bun ./server/utils/cache-builder"
   },
   "author": "Evren Ceyhan",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@types/node": "^20.9.0",
     "bootstrap-icons": "^1.11.1",
+    "bun-types": "^1.0.15",
     "daisyui": "^4.0.3",
     "nuxt": "^3.8.2",
     "pinia": "^2.1.7",

server/api/languages.ts

@@ -1,4 +1,4 @@
-import { Language, Repo } from '../types/repo';
+import type { Language, Repo } from '../types/repo';
 
 export default defineEventHandler(async (event) => {
     // try to get cached data
@@ -8,7 +8,7 @@ export default defineEventHandler(async (event) => {
     if (cache.value) return cache.value;
 
     // fetch fresh data
-    const repos = await $fetch('/api/repos');
+    const repos = await $fetch<Repo[]>('/api/repos');
     const languages = collectLanguages(repos);
 
     // save fresh data to cache

server/api/profile.ts

@@ -1,5 +1,5 @@
 import { API_USERNAME } from '../constants/github';
-import { Profile } from '../types/profile';
+import type { Profile } from '../types/profile';
 
 export default defineEventHandler(async (event) => {
     // try to get cached data

server/api/repos.ts

@@ -1,6 +1,6 @@
 import { API_USERNAME } from '../constants/github';
 import { COLORS } from '../constants/language';
-import { Language, Repo } from '../types/repo';
+import type { Language, Repo } from '../types/repo';
 
 export default defineEventHandler(async (event) => {
     // try to get cached data

server/api/social-links.ts

@@ -1,5 +1,5 @@
 import { LINKS } from '../constants/social';
-import { SocialLink } from '../types/social';
+import type { SocialLink } from '../types/social';
 
 export default defineEventHandler((event) => {
     return LINKS.filter(havingId).map(normalizeUrl);

server/api/topics.ts

@@ -1,5 +1,5 @@
 import { CATEGORIES } from '../constants/topic';
-import { Repo, Topic } from '../types/repo';
+import type { Repo, Topic } from '../types/repo';
 
 export default defineEventHandler(async (event) => {
     // try to get cached data
@@ -9,7 +9,7 @@ export default defineEventHandler(async (event) => {
     if (cache.value) return cache.value;
 
     // fetch fresh data
-    const repos = await $fetch('/api/repos');
+    const repos = await $fetch<Repo[]>('/api/repos');
     const topics = collectTopics(repos);
 
     // save fresh data to cache

server/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "../.nuxt/tsconfig.server.json"
+    "extends": "../.nuxt/tsconfig.server.json",
+    "compilerOptions": {
+        "types": ["bun-types"]
+    }
 }

server/types/social.ts

@@ -1,5 +1,5 @@
-export type SocialLink = {
+export interface SocialLink {
     id?: string;
     url: string;
     icon: string;
-};
+}

server/utils/cache-builder.ts

@@ -0,0 +1,56 @@
+import { existsSync, mkdirSync, rmSync } from 'fs';
+import { API_HEADERS, API_URL, API_USERNAME } from '../constants/github';
+
+/**
+ * This is a server side script to cache data.
+ * It's only used to generate mock data for the DEV environment!
+ *
+ * Github has a rate limit of 60 requests per hour for unauthenticated requests,
+ * so we need to use a personal access token to increase the limit to 5000 requests per hour.
+ */
+
+const DIR = import.meta.dir;
+const CACHE_DIR = `${DIR}/../cache`;
+
+async function fetchApi<T>(path: string, query: any = {}): Promise<T> {
+    // create url object
+    const url = new URL(API_URL + path);
+
+    // add query params
+    Object.entries(query).forEach(([key, value]) => {
+        url.searchParams.append(key, value as any);
+    });
+
+    return (await fetch(url, { headers: API_HEADERS })).json() as any;
+}
+
+function writeToCacheFile(path: string, data: any): void {
+    const filename = `${CACHE_DIR}/${path}.json`;
+    const jsonData = JSON.stringify(data, null, 4);
+
+    console.log(`Writing to cache file: ${path}.json`);
+    Bun.write(filename, jsonData);
+}
+
+// Create cache directory if it doesn't exist
+existsSync(CACHE_DIR) || mkdirSync(CACHE_DIR);
+
+// Purge existing cache directory
+rmSync(`${CACHE_DIR}/*`, { force: true });
+
+// Fetch and cache user profile
+const profile = await fetchApi<any>(`/users/${API_USERNAME}`);
+writeToCacheFile('profile', profile);
+
+// Fetch and cache repositories
+const repos = await fetchApi<any[]>(`/users/${API_USERNAME}/repos`, {
+    per_page: 100,
+    sort: 'updated',
+});
+writeToCacheFile('repos', repos);
+
+// Fetch and cache languages for each repository
+repos.forEach(({ name }) => {
+    const data = fetchApi(`/repos/${API_USERNAME}/${name}/languages`);
+    writeToCacheFile(`${name}-languages`, data);
+});

tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+import daisyui from 'daisyui';
+
+export default {
+    content: [],
+    theme: {
+        extend: {},
+    },
+    plugins: [daisyui],
+    daisyui: {
+        themes: ['night'],
+        darkTheme: 'night',
+    },
+} satisfies Config;