feat: commit media files to github

Author: farnabaz

playground/docus/nuxt.config.ts

@@ -16,5 +16,13 @@ export default defineNuxtConfig({
       api: 'http://localhost:3000',
     },
   },
+  contentStudio: {
+    repository: {
+      owner: 'nuxt-content',
+      repo: 'studio',
+      branch: 'edit-preview',
+      rootDir: 'playground/docus',
+    },
+  },
   compatibilityDate: '2025-08-26',
 })

src/app/src/components/panel/base/PanelBaseBodyEditor.vue

@@ -8,6 +8,11 @@ defineProps({
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const { context } = useStudio()
@@ -17,9 +22,11 @@ const { context } = useStudio()
   <PanelContentEditor
     v-if="context.feature.value === StudioFeature.Content"
     :draft-item="draftItem"
+    :read-only="readOnly"
   />
   <PanelMediaEditor
     v-else
     :draft-item="draftItem"
+    :read-only="readOnly"
   />
 </template>

src/app/src/components/panel/base/PanelBaseFooter.vue

@@ -6,15 +6,30 @@ const { ui, host } = useStudio()
 
 const uiConfig = ui.config
 const user = host.user.get()
+const repositoryUrl = computed(() => {
+  switch (host.repository.provider) {
+    case 'github':
+      return `https://github.com/${host.repository.owner}/${host.repository.repo}/tree/${host.repository.branch}`
+    default:
+      return ''
+  }
+})
 
 const userMenuItems = computed(() => [
-  {
+[{
+    label: 'Open Repository',
+    icon: 'i-lucide-github',
+    onClick: () => {
+      window.open(repositoryUrl.value, '_blank')
+    },
+  }],
+  [{
     label: 'Sign out',
     icon: 'i-lucide-log-out',
     onClick: () => {
       alert('TODO: delete cookie manually')
     },
-  },
+  }]
 ])
 </script>
 

src/app/src/components/panel/base/PanelBaseHeader.vue

@@ -3,7 +3,7 @@ import { useStudio } from '../../../composables/useStudio'
 import { StudioFeature } from '../../../types'
 import { ROOT_ITEM } from '../../../utils/tree'
 
-const { ui, context, documentTree, mediaTree } = useStudio()
+const { ui, git, context, documentTree, mediaTree, draftDocuments, draftMedias } = useStudio()
 
 const features = [{
   label: 'Content',
@@ -28,6 +28,16 @@ const features = [{
     ui.openPanel(StudioFeature.Media)
   },
 }]
+
+async function publishFiles() {
+  const files = await Promise.all([
+    draftDocuments.generateRawFiles(),
+    draftMedias.generateRawFiles(),
+  ]).then(([documents, medias]) => ([...documents, ...medias]))
+
+  const message = window.prompt('Enter a commit message')
+  await git.commitFiles(files, message || 'Publish files')
+}
 </script>
 
 <template>
@@ -46,6 +56,7 @@ const features = [{
         color="primary"
         variant="solid"
         size="sm"
+        @click="publishFiles"
       />
       <!-- <USeparator
         orientation="vertical"

src/app/src/components/panel/content/editor/PanelContentEditor.vue

@@ -10,6 +10,11 @@ const props = defineProps({
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const { draftDocuments } = useStudio()
@@ -38,6 +43,10 @@ const document = computed<DatabasePageItem>({
     return result
   },
   set(value) {
+    if (props.readOnly) {
+      return
+    }
+
     draftDocuments.update(props.draftItem.id, {
       ...toRaw(document.value as DatabasePageItem),
       ...toRaw(value),
@@ -51,6 +60,7 @@ const document = computed<DatabasePageItem>({
     <PanelContentEditorCode
       v-model="document"
       :draft-item="draftItem"
+      :read-only="readOnly"
     />
   </div>
   <!-- <MDCEditorAST v-model="document" /> -->

src/app/src/components/panel/content/editor/PanelContentEditorCode.vue

@@ -10,6 +10,11 @@ const props = defineProps({
     type: Object as PropType<DraftItem>,
     required: true,
   },
+  readOnly: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const document = defineModel<DatabasePageItem>()
@@ -37,8 +42,21 @@ onMounted(async () => {
   const monaco = await setupMonaco()
 
   // create a Monaco editor instance
-  editor.value = monaco.createEditor(editorRef.value)
+  editor.value = monaco.createEditor(editorRef.value, {
+    readOnly: props.readOnly,
+    scrollbar: props.readOnly
+      ? {
+          vertical: 'hidden',
+          horizontal: 'hidden',
+          handleMouseWheel: false,
+        }
+      : undefined,
+  })
   editor.value.onDidChangeModelContent(() => {
+    if (props.readOnly) {
+      return
+    }
+
     // Do not trigger model updates if the document id has changed
     if (currentDocumentId.value !== document.value?.id) {
       return

src/app/src/composables/useDraftDocuments.ts

@@ -1,17 +1,18 @@
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
 import { ref } from 'vue'
-import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem } from '../types'
+import type { DatabaseItem, DraftItem, StudioHost, GithubFile, DatabasePageItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { generateContentFromDocument } from '../utils/content'
 import { getDraftStatus, findDescendantsFromId } from '../utils/draft'
 import { createSharedComposable } from '@vueuse/core'
 import { useHooks } from './useHooks'
+import { joinURL } from 'ufo'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    dbName: 'nuxt-content-studio-document',
+    dbName: 'content-studio-document',
     storeName: 'drafts',
   }),
 })
@@ -40,7 +41,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     }
 
     const fsPath = host.document.getFileSystemPath(document.id)
-    const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+    const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
 
     const item: DraftItem<DatabaseItem> = {
       id: document.id,
@@ -118,7 +119,7 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
       }
       else {
       // TODO: check if gh file has been updated
-        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+        const githubFile = await git.fetchFile(joinURL('content', fsPath), { cached: true }) as GithubFile
 
         deleteDraftItem = {
           id,
@@ -236,6 +237,21 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     select(draftItem)
   }
 
+  async function generateRawFiles(): Promise<RawFile[]> {
+    const files = [] as RawFile[]
+    for (const draftItem of list.value) {
+      if (draftItem.status === DraftStatus.Deleted) {
+        files.push({ path: joinURL('content', draftItem.fsPath), content: null, status: draftItem.status, encoding: 'utf-8' })
+        continue
+      }
+
+      const content = await generateContentFromDocument(draftItem.modified!)
+      files.push({ path: joinURL('content', draftItem.fsPath), content: content!, status: draftItem.status, encoding: 'utf-8' })
+    }
+
+    return files
+  }
+
   return {
     get,
     create,
@@ -248,5 +264,6 @@ export const useDraftDocuments = createSharedComposable((host: StudioHost, git:
     current,
     select,
     selectById,
+    generateRawFiles,
   }
 })

src/app/src/composables/useDraftMedias.ts

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import { createStorage } from 'unstorage'
 import indexedDbDriver from 'unstorage/drivers/indexedb'
 import { joinURL, withLeadingSlash } from 'ufo'
-import type { DraftItem, StudioHost, GithubFile, MediaItem } from '../types'
+import type { DraftItem, StudioHost, GithubFile, MediaItem, RawFile } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { useGit } from './useGit'
 import { getDraftStatus } from '../utils/draft'
@@ -11,7 +11,7 @@ import { useHooks } from './useHooks'
 
 const storage = createStorage({
   driver: indexedDbDriver({
-    dbName: 'nuxt-content-studio-media',
+    dbName: 'content-studio-media',
     storeName: 'drafts',
   }),
 })
@@ -34,7 +34,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     }
 
     const fsPath = host.media.getFileSystemPath(media.id)
-    const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+    const githubFile = await git.fetchFile(joinURL('public', fsPath), { cached: true }) as GithubFile
 
     const item: DraftItem = {
       id: media.id,
@@ -95,7 +95,7 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
       }
       else {
       // Fetch github file before creating draft to detect non deployed changes
-        const githubFile = await git.fetchFile(fsPath, { cached: true }) as GithubFile
+        const githubFile = await git.fetchFile(joinURL('public', fsPath), { cached: true }) as GithubFile
         const original = await host.media.get(id)
 
         const deleteItem: DraftItem = {
@@ -258,6 +258,21 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     })
   }
 
+  async function generateRawFiles(): Promise<RawFile[]> {
+    const files = [] as RawFile[]
+    for (const draftItem of list.value) {
+      if (draftItem.status === DraftStatus.Deleted) {
+        files.push({ path: joinURL('public', draftItem.fsPath), content: null, status: draftItem.status, encoding: 'base64' })
+        continue
+      }
+
+      const content = (await draftItem.modified?.raw as string).replace(/^data:\w+\/\w+;base64,/, '')
+      files.push({ path: joinURL('public', draftItem.fsPath), content, status: draftItem.status, encoding: 'base64' })
+    }
+
+    return files
+  }
+
   return {
     get,
     create,
@@ -271,5 +286,6 @@ export const useDraftMedias = createSharedComposable((host: StudioHost, git: Ret
     select,
     selectById,
     upload,
+    generateRawFiles,
   }
 })