fix: github image save

composables/useData.ts

@@ -149,6 +149,7 @@ export const useData = defineStore('data', () => {
   function useProject() {
     const project = ref<Partial<Project>>()
     const projectImage = ref<File>()
+    const isPublishing = ref(false)
 
     function setProject(id: string) {
       project.value = getProjectById(id, { shallow: false }) as Project
@@ -170,18 +171,25 @@ export const useData = defineStore('data', () => {
     }
 
     async function publishProject() {
+      isPublishing.value = true
       try {
         const imageArrayBuffer = await projectImage.value?.arrayBuffer()
         let imageBuffer: Buffer | undefined
-        if (imageArrayBuffer)
+        let base64Image: string | undefined
+
+        if (imageArrayBuffer) {
           imageBuffer = Buffer.from(imageArrayBuffer)
+          const base64String = imageBuffer.toString('base64')
+          base64Image = base64String
+        }
+
         await $fetch(`/api/data`, {
           method: 'POST',
           body: {
             project: project.value,
             image: {
               type: projectImage.value?.type,
-              data: imageBuffer?.toString('base64'),
+              data: base64Image,
             },
           },
         })
@@ -189,10 +197,14 @@ export const useData = defineStore('data', () => {
       catch (e) {
         console.error(e)
       }
+      finally {
+        isPublishing.value = false
+      }
     }
 
     return {
       project,
+      isPublishing,
       setProject,
       clearProject,
       saveProject,

package.json

@@ -19,6 +19,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@iconify-json/heroicons-outline": "^1.2.0",
     "@iconify-json/heroicons-solid": "^1.2.0",
+    "@iconify-json/eos-icons": "^1.1.10",
     "@nuxt/devtools": "^1.4.1",
     "@nuxt/eslint": "0.5.5",
     "@nuxt/image": "^1.8.0",

pages/project/[id]/edit.vue

@@ -14,7 +14,7 @@ definePageMeta({
 })
 
 const { useProject, projects } = useData()
-const { saveProject, setProject, project, publishProject, saveProjectImage } = useProject()
+const { saveProject, setProject, project, publishProject, saveProjectImage, isPublishing } = useProject()
 
 const route = useRoute()
 await until(projects).toMatch(p => p?.length > 0)
@@ -323,9 +323,19 @@ function next() {
           w-full
           lg="w-fit"
           inverted-color
-          @click="publishProject()"
+          @click="isPublishing ? () => null : publishProject()"
         >
-          <span px-24px>PUBLISH</span>
+          <UnoIcon
+            v-if="isPublishing"
+            w-108px
+            i-eos-icons-loading
+            text-black
+            text-18px
+          />
+          <span
+            v-else
+            px-24px
+          >PUBLISH</span>
         </Button>
       </div>
     </div>

pages/project/create.vue

@@ -76,7 +76,7 @@ function useProjectName() {
 const { isEditing, name, toggleEdit } = useProjectName()
 
 const { useProject } = useData()
-const { saveProject, publishProject, saveProjectImage } = useProject()
+const { saveProject, publishProject, saveProjectImage, isPublishing } = useProject()
 
 function save() {
   saveProject({
@@ -309,9 +309,19 @@ function next() {
           w-full
           lg="w-fit"
           inverted-color
-          @click="publishProject()"
+          @click="isPublishing ? () => null : publishProject()"
         >
-          <span px-24px>PUBLISH</span>
+          <UnoIcon
+            v-if="isPublishing"
+            w-108px
+            i-eos-icons-loading
+            text-black
+            text-18px
+          />
+          <span
+            v-else
+            px-24px
+          >PUBLISH</span>
         </Button>
       </div>
     </div>

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@iconify-json/eos-icons':
+        specifier: ^1.1.10
+        version: 1.2.0
       '@iconify-json/heroicons-outline':
         specifier: ^1.2.0
         version: 1.2.0
@@ -1100,6 +1103,9 @@ packages:
     resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/eos-icons@1.2.0':
+    resolution: {integrity: sha512-grdfoS20Z4gWAzNPza7ytguNBWeTOkx4Y6aZHs149t2Z6AhW7zG3VWkkq6M+YuL2G8ugHnBw7ZxgazZ6oiMnIQ==}
+
   '@iconify-json/heroicons-outline@1.2.0':
     resolution: {integrity: sha512-Qy1sRmQYqih6xRxwCtnX0hXJ4252t83C0CnNWAP3gF0fH0Qmp9RY66LMB0moYGxQxUhsTFIl2nNceSVSBUo8Tg==}
 
@@ -6576,6 +6582,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.0': {}
 
+  '@iconify-json/eos-icons@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/heroicons-outline@1.2.0':
     dependencies:
       '@iconify/types': 2.0.0

server/api/data.post.ts

@@ -19,7 +19,7 @@ export default defineEventHandler(async (event) => {
   const owner = 'develit-io'
   const repo = 'test-repo'
   const baseBranch = 'main'
-  const newBranchName = `${id}-project-update`
+  const newBranchName = `${id}-project-update-${Date.now()}`
   const commitMessage = `${body.project.id ? `Updating the project: ${body.project.name}` : `Initiating the creation of project: ${body.project.name}`}`
 
   const files = [
@@ -55,7 +55,7 @@ export default defineEventHandler(async (event) => {
     })
   }
 
-  async function commitChangesToNewBranch(owner: string, repo: string, newBranch: string, message: string, files: { path: string, content: string }[]) {
+  async function commitChangesToNewBranch(owner: string, repo: string, newBranch: string, message: string, files: { path: string, content: string, encoding: string }[]) {
     const { data: latestCommit } = await octokit.rest.repos.getCommit({
       owner,
       repo,
@@ -68,18 +68,26 @@ export default defineEventHandler(async (event) => {
       tree_sha: latestCommit.commit.tree.sha,
     })
 
-    const tree = files.map(file => ({
-      path: file.path,
-      mode: '100644' as const,
-      type: 'blob' as const,
-      content: file.content,
+    const blobs = await Promise.all(files.map(async (file) => {
+      const { data: blob } = await octokit.rest.git.createBlob({
+        owner,
+        repo,
+        content: file.content,
+        encoding: file.encoding,
+      })
+      return {
+        path: file.path,
+        mode: '100644' as const,
+        type: 'blob' as const,
+        sha: blob.sha,
+      }
     }))
 
     const { data: newTree } = await octokit.rest.git.createTree({
       owner,
       repo,
       base_tree: baseTree.sha,
-      tree,
+      tree: blobs,
     })
 
     const { data: newCommit } = await octokit.rest.git.createCommit({