feat: add prettier (#15)

.github/workflows/tests.yml

@@ -0,0 +1,70 @@
+name: Tests
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
+
+      # TODO: enable again
+      # - name: Typecheck
+      #   run: pnpm run typecheck
+
+  check-format:
+    name: Check format
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: true
+
+      - name: Check format
+        run: pnpm check-format

.gitpod.yml

@@ -23,7 +23,7 @@ tasks:
       nvm use default
     command: |
       pnpm start
-      
+
   - name: Run API
     before: |
       gp sync-await setup

.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+dist
+coverage/
+.pnpm-store/

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+  endOfLine: 'lf',
+};

components/TextInput.vue

@@ -13,6 +13,6 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (event: "update:model-value", value: string): void;
+  (event: 'update:model-value', value: string): void;
 }>();
 </script>

composables/github.ts

@@ -1,8 +1,8 @@
-export const useGithubCookie = () => useCookie("gh_token");
+export const useGithubCookie = () => useCookie('gh_token');
 
 export const githubFetch = (url: string, fetchOptions: any = {}) => {
   return $fetch(url, {
-    baseURL: "https://api.github.com",
+    baseURL: 'https://api.github.com',
     ...fetchOptions,
     headers: {
       Authorization: `token ${useGithubCookie().value}`,
@@ -13,23 +13,21 @@ export const githubFetch = (url: string, fetchOptions: any = {}) => {
 
 export const fetchGithubUser = async () => {
   const cookie = useGithubCookie();
-  const user = useState("gh_user");
+  const user = useState('gh_user');
   if (cookie.value && !user.value) {
-    user.value = await githubFetch("/user");
+    user.value = await githubFetch('/user');
   }
   return user;
 };
 
 export const githubLogin = () => {
   if (process.client) {
     const { github } = useRuntimeConfig().public;
-    window.location.replace(
-      `https://github.com/login/oauth/authorize?client_id=${github.clientId}&scope=public_repo`
-    );
+    window.location.replace(`https://github.com/login/oauth/authorize?client_id=${github.clientId}&scope=public_repo`);
   }
 };
 
 export const githubLogout = async () => {
   useGithubCookie().value = null;
-  useState("gh_user").value = null;
+  useState('gh_user').value = null;
 };

layouts/default.vue

@@ -1,29 +1,21 @@
 <template>
   <div class="flex flex-col h-screen w-screen text-gray-200 bg-gray-700">
-    <header
-      class="flex w-full h-16 border-gray-700 bg-gray-900 border-b p-4 items-center"
-    >
+    <header class="flex w-full h-16 border-gray-700 bg-gray-900 border-b p-4 items-center">
       <a class="text-xl flex gap-2 items-center" href="/">
         <img src="/icon.svg" alt="CodeCaptain logo" class="w-10 -rotate-45" />
         codecaptain.ai</a
       >
       <div class="ml-auto flex gap-4 items-center">
         <template v-if="user">
-          <img
-            :src="user.avatar_url"
-            alt="User profile icon"
-            class="w-8 h-auto rounded-full"
-          />
+          <img :src="user.avatar_url" alt="User profile icon" class="w-8 h-auto rounded-full" />
           <button
             class="border rounded px-2 py-1 flex items-center justify-center gap-1 hover:bg-black hover:text-white"
             @click="logout"
           >
             Logout
           </button>
         </template>
-        <Button v-else @click="login">
-          <Icon name="fa-brands:github" /> Login with GitHub
-        </Button>
+        <Button v-else @click="login"> <Icon name="fa-brands:github" /> Login with GitHub </Button>
       </div>
     </header>
 
@@ -46,7 +38,7 @@ const user = await fetchGithubUser();
 
 <style>
 * {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
   box-sizing: border-box;
   margin: 0;
   padding: 0;

nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ["@nuxtjs/tailwindcss", "nuxt-icon"],
+  modules: ['@nuxtjs/tailwindcss', 'nuxt-icon'],
   runtimeConfig: {
     public: {
       github: {
@@ -11,20 +11,20 @@ export default defineNuxtConfig({
       clientSecret: process.env.NUXT_GITHUB_CLIENT_SECRET,
     },
     api: {
-      url: process.env.NUXT_API_URL || "http://localhost:8000",
+      url: process.env.NUXT_API_URL || 'http://localhost:8000',
     },
-    data_path: process.env.DATA_PATH || "data",
+    data_path: process.env.DATA_PATH || 'data',
   },
   ignore: [
-    "**/*.stories.{js,ts,jsx,tsx}",
-    "**/*.{spec,test}.{js,ts,jsx,tsx}",
-    "**/*.d.ts",
-    ".output",
-    ".git",
-    ".cache",
-    "/<rootDir>/.nuxt/analyze",
-    "/<rootDir>/.nuxt",
-    "**/-*.*",
-    "/<rootDir>/data",
+    '**/*.stories.{js,ts,jsx,tsx}',
+    '**/*.{spec,test}.{js,ts,jsx,tsx}',
+    '**/*.d.ts',
+    '.output',
+    '.git',
+    '.cache',
+    '/<rootDir>/.nuxt/analyze',
+    '/<rootDir>/.nuxt',
+    '**/-*.*',
+    '/<rootDir>/data',
   ],
 });

package.json

@@ -7,13 +7,17 @@
     "start": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "check-format": "prettier --check .",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^0.7.4",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@types/node": "^18",
-    "nuxt": "^3.6.1"
+    "nuxt": "^3.6.5",
+    "prettier": "^3.0.1",
+    "typescript": "^5.1.6"
   },
   "dependencies": {
     "nuxt-icon": "^0.4.1",

pages/index.vue

@@ -1,33 +1,19 @@
 <template>
   <div class="m-auto flex flex-col justify-center items-center">
-    <span class="text-2xl font-bold mb-4"
-      >Hey 👋, I will help you understanding your own code 😜</span
-    >
+    <span class="text-2xl font-bold mb-4">Hey 👋, I will help you understanding your own code 😜</span>
 
     <div class="flex flex-wrap gap-4 justify-center mt-4 min-h-fit max-w-4xl">
       <template v-if="repositories">
-        <Card
-          v-for="repo in repositories.filter((r) => r.active)"
-          :key="repo.id"
-          :href="`/repos/${repo.id}/chat`"
-        >
-          <div
-            class="flex flex-col items-center p-2 gap-2 w-64 h-full justify-between"
-          >
-            <span class="font-bold text-gray-300 text-xl">{{
-              repo.full_name
-            }}</span>
+        <Card v-for="repo in repositories.filter((r) => r.active)" :key="repo.id" :href="`/repos/${repo.id}/chat`">
+          <div class="flex flex-col items-center p-2 gap-2 w-64 h-full justify-between">
+            <span class="font-bold text-gray-300 text-xl">{{ repo.full_name }}</span>
             <Button class="flex justify-center items-center">Open</Button>
           </div>
         </Card>
 
         <Card href="/repos/add">
-          <div
-            class="flex flex-col items-center justify-between p-2 h-full gap-2 w-64"
-          >
-            <span class="font-bold text-gray-300 text-xl"
-              >Add a repository</span
-            >
+          <div class="flex flex-col items-center justify-between p-2 h-full gap-2 w-64">
+            <span class="font-bold text-gray-300 text-xl">Add a repository</span>
             <Button class="flex justify-center items-center">+ Add</Button>
           </div>
         </Card>
@@ -40,10 +26,10 @@
 const githubCookie = useGithubCookie();
 
 const repositories = ref(
-  await $fetch("/api/repos/list", {
+  await $fetch('/api/repos/list', {
     headers: {
       gh_token: githubCookie.value!,
     },
-  })
+  }),
 );
 </script>

pages/repos/[repo_id]/chat.vue

@@ -9,9 +9,7 @@
       <Button @click="reIndex">re-index</Button>
     </div>
 
-    <div
-      class="flex-1 flex w-full max-w-4xl flex-col p-4 gap-4 items-center overflow-y-auto"
-    >
+    <div class="flex-1 flex w-full max-w-4xl flex-col p-4 gap-4 items-center overflow-y-auto">
       <!-- Chat history section -->
       <div
         v-for="message in chatHistory"
@@ -79,23 +77,21 @@
 </template>
 
 <script lang="ts" setup>
-import VueMarkdown from "vue-markdown-render";
+import VueMarkdown from 'vue-markdown-render';
 
-const chatHistory = ref([
-  { id: 2, sender: "assistant", text: "Hi there! How can I assist you?" },
-]);
-const inputText = ref("");
+const chatHistory = ref([{ id: 2, sender: 'assistant', text: 'Hi there! How can I assist you?' }]);
+const inputText = ref('');
 const githubCookie = useGithubCookie();
 const thinking = ref(false);
 const route = useRoute();
 const repoId = route.params.repo_id;
 
-const { data: repo } = await useAsyncData("repo", () =>
+const { data: repo } = await useAsyncData('repo', () =>
   $fetch(`/api/repos/${repoId}`, {
     headers: {
       gh_token: githubCookie.value!,
     },
-  })
+  }),
 );
 
 async function sendMessage() {
@@ -104,22 +100,22 @@ async function sendMessage() {
   }
 
   const message = inputText.value;
-  if (message === "") {
+  if (message === '') {
     return;
   }
 
   chatHistory.value.push({
     id: Date.now(),
-    sender: "user",
+    sender: 'user',
     text: message,
   });
-  inputText.value = "";
+  inputText.value = '';
 
   thinking.value = true;
 
   try {
     const res: { answer: string } = await $fetch(`/api/repos/${repoId}/chat`, {
-      method: "POST",
+      method: 'POST',
       body: JSON.stringify({
         message,
       }),
@@ -130,7 +126,7 @@ async function sendMessage() {
 
     chatHistory.value.push({
       id: Date.now(),
-      sender: "assistant",
+      sender: 'assistant',
       text: res.answer,
     });
 
@@ -140,7 +136,7 @@ async function sendMessage() {
 
     chatHistory.value.push({
       id: Date.now(),
-      sender: "error",
+      sender: 'error',
       text: (error as Error).message,
     });
   }
@@ -154,7 +150,7 @@ async function reIndex() {
   try {
     await $fetch(`/api/repos/${repoId}/clone`, {
       key: `cloneRepo-${repoId}`,
-      method: "POST",
+      method: 'POST',
       headers: {
         gh_token: githubCookie.value!,
       },