feat: move github file retrieval logic to API call

Signed-off-by: tylerslaton <[email protected]>

lib/decode.ts

@@ -0,0 +1,9 @@
+export const base64Decode = (base64: string): string => {
+    const text = atob(base64);
+    const bytes = new Uint8Array(text.length);
+    for (let i = 0; i < text.length; i++) {
+        bytes[i] = text.charCodeAt(i);
+    }
+    const decoder = new TextDecoder('utf-8');
+    return decoder.decode(bytes);  
+}

nuxt.config.ts

@@ -9,9 +9,6 @@ export default defineNuxtConfig({
     },
   },
   runtimeConfig: {
-    // todo: the github call has to be moved to the server side
-    public: {
-      githubToken: '', // NUXT_PUBLIC_GITHUB_TOKEN
-    },
+    githubToken: '', // NUXT_PUBLIC_GITHUB_TOKEN
   },
 })

pages/[...slug].vue

@@ -5,46 +5,52 @@
     <div class="mt-8">
       <h2 class="text-2xl font-bold">tool.gpt</h2>
       <div class="overflow-auto max-h-96">
-        <pre class="bg-gray-200 p-4 mb-4 text-sm whitespace-pre-wrap">{{ toolFileData }}</pre>
+        <Markdown :markdown="toolData" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { fetchGithubFile } from '@/lib/github'; // Import the fetchGithubFile function
+import { base64Decode } from '@/lib/decode';
 
-const route = useRoute();
-const router = useRouter();
-
-const path = route.path.replace(/^\//, ''); // Strip the leading slash
-
-const githubUrl = computed(() => {
-  const githubRepoRegex = /^(https?:\/\/)?(www\.)?github\.com\/[\w-]+\/[\w-]+$/;
-
-  if (githubRepoRegex.test(path)) {
-    return path;
-  }
-  return null;
-});
-
-const toolFileData = ref('');
+const toolData = ref('');
 const readmeData = ref('');
+const githubUrl = ref('');
 
 onMounted(async () => {
-  routeIfInvalid();
+  loadData();
+});
 
-  const [owner, repo] = path.split('/').slice(-2);
-  toolFileData.value = await fetchGithubFile(owner, repo, 'tool.gpt');
-  readmeData.value = await fetchGithubFile(owner, repo, 'README.md');
+onBeforeMount(async () => {
+  loadData();
 });
 
-const routeIfInvalid = () => {
-  if (!githubUrl.value) {
+async function loadData() {
+  const route = useRoute();
+  const router = useRouter();
+
+  const path = route.path.replace(/^\//, '');
+  const validRepo = /^(https?:\/\/)?(www\.)?github\.com\/[\w-]+\/[\w-]+$/.test(path);
+
+  if (!validRepo) {
     router.push({ path: '/404', query: { isInvalid: 'true' } });
   }
-}
+  githubUrl.value = path;
 
-</script>~/lib/github
+  const [owner, repo] = path.split('/').slice(-2);
+  try {
+    const [toolResponse, readmeResponse] = await Promise.all([
+      useFetch(`/api/github?owner=${owner}&repo=${repo}&path=tool.gpt`),
+      useFetch(`/api/github?owner=${owner}&repo=${repo}&path=README.md`),
+    ]);
+
+    toolData.value = base64Decode(toolResponse.data.value ?? '');
+    readmeData.value = base64Decode(readmeResponse.data.value ?? '');
+  } catch (error) {
+    throw error;
+  }
+}
+</script>

server/api/github.get.ts

@@ -0,0 +1,31 @@
+import { Octokit } from '@octokit/core';
+
+export default defineEventHandler(async (event) => {
+    const query = getQuery(event);
+    const { owner, repo, path } = query;
+    const octokit = new Octokit({
+        auth: useRuntimeConfig().githubToken,
+    });
+
+    try {
+        const response = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
+            owner: owner?.toString() ?? '',
+            repo: repo?.toString() ?? '',
+            path: path?.toString() ?? '',
+            headers: {
+                'X-GitHub-Api-Version': '2022-11-28'
+            }
+        });
+
+        if (!response.data.content) {
+            throw createError({
+                statusCode: 404,
+                statusMessage: `file not found`,
+            });
+        }
+
+        return response.data.content;
+    } catch (error) {
+        throw error;
+    }
+});