fix: content matching

Author: farnabaz

package.json

@@ -55,7 +55,7 @@
     "@iconify-json/simple-icons": "^1.2.57",
     "@nuxt/content": "^3.8.0",
     "@nuxt/eslint-config": "^1.10.0",
-    "@nuxt/kit": "^4.2.0",
+    "@nuxt/kit": "^4.2.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/ui": "^4.1.0",
     "@octokit/types": "^15.0.1",
@@ -86,7 +86,7 @@
     "remark-mdc": "3.8.1",
     "@nuxtjs/mdc": "https://pkg.pr.new/@nuxtjs/mdc@cb6a227"
   },
-  "packageManager": "pnpm@10.20.0",
+  "packageManager": "pnpm@10.21.0",
   "keywords": [
     "nuxt",
     "content",

playground/docus/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "docus": "^5.2.1",
     "better-sqlite3": "^12.4.1",
-    "nuxt": "latest",
+    "nuxt": "^4.2.1",
     "@nuxt/content": "latest",
     "@nuxt/ui": "4.1.0",
     "nuxt-studio": "workspace:*"

pnpm-lock.yaml

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { ContentFileExtension, type DatabasePageItem, type DraftItem, DraftStatus, type DatabaseItem } from '../../types'
 import type { PropType } from 'vue'
-import { generateContentFromDocument, generateDocumentFromContent, isEqual, pickReservedKeysFromDocument } from '../../utils/content'
+import { generateContentFromDocument, isEqual, pickReservedKeysFromDocument } from '../../utils/content'
 import { setupSuggestion } from '../../utils/monaco'
 import { useStudio } from '../../composables/useStudio'
 import { useMonaco } from '../../composables/useMonaco'
@@ -67,7 +67,7 @@ const { editor, setContent: setEditorContent } = useMonaco(editorRef, {
 
     content.value = newContent
 
-    generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
+    host.document.generateDocumentFromContent(document.value!.id, content.value).then((doc) => {
       localStatus.value = DraftStatus.Updated
 
       document.value = {

src/app/src/components/content/ContentEditorCode.vue

@@ -46,7 +46,7 @@ export function useDraftBase<T extends DatabaseItem | MediaItem>(
       draftItem.original = original
     }
 
-    const conflict = await checkConflict(draftItem)
+    const conflict = await checkConflict(host, draftItem)
     if (conflict) {
       draftItem.conflict = conflict
     }

src/app/src/composables/useDraftBase.ts

@@ -1,2 +1,2 @@
-export { generateContentFromDocument, generateDocumentFromContent, removeReservedKeysFromDocument } from './utils/content'
+export { generateContentFromDocument, removeReservedKeysFromDocument } from './utils/content'
 export { VirtualMediaCollectionName } from './utils/media'

src/app/src/shared.ts

@@ -47,6 +47,8 @@ export interface StudioHost {
     create: (fsPath: string, content: string) => Promise<DatabaseItem>
     delete: (fsPath: string) => Promise<void>
     detectActives: () => Array<{ fsPath: string, title: string }>
+    isEqual: (content: string, document: DatabaseItem) => Promise<boolean>
+    generateDocumentFromContent: (id: string, content: string) => Promise<DatabaseItem>
   }
   media: {
     get: (fsPath: string) => Promise<MediaItem>

src/app/src/types/index.ts

@@ -1,22 +1,16 @@
 // import type { ParsedContentFile } from '@nuxt/content'
-import { parseMarkdown, stringifyMarkdown } from '@nuxtjs/mdc/runtime'
-import { parseFrontMatter, stringifyFrontMatter } from 'remark-mdc'
+import { stringifyMarkdown } from '@nuxtjs/mdc/runtime'
+import { stringifyFrontMatter } from 'remark-mdc'
 import type { MDCElement, MDCRoot } from '@nuxtjs/mdc'
 import { type DatabasePageItem, type DatabaseItem, ContentFileExtension } from '../types'
 import { omit, pick } from './object'
-import { compressTree, decompressTree } from '@nuxt/content/runtime'
+import { decompressTree } from '@nuxt/content/runtime'
 import { visit } from 'unist-util-visit'
 import type { Node } from 'unist'
-import type { MarkdownRoot } from '@nuxt/content'
-import { destr } from 'destr'
 import { getFileExtension } from './file'
 
 const reservedKeys = ['id', 'fsPath', 'stem', 'extension', '__hash__', 'path', 'body', 'meta', 'rawbody']
 
-export function generateStemFromId(id: string) {
-  return id.split('/').slice(1).join('/').split('.').slice(0, -1).join('.')
-}
-
 export function pickReservedKeysFromDocument(document: DatabaseItem) {
   return pick(document, reservedKeys)
 }
@@ -69,102 +63,6 @@ export function isEqual(content1: string | null, content2: string | null): boole
   return false
 }
 
-export async function generateDocumentFromContent(id: string, content: string): Promise<DatabaseItem | null> {
-  const [_id, _hash] = id.split('#')
-  const extension = getFileExtension(id)
-
-  if (extension === ContentFileExtension.Markdown) {
-    return await generateDocumentFromMarkdownContent(id, content)
-  }
-
-  if (extension === ContentFileExtension.YAML || extension === ContentFileExtension.YML) {
-    return await generateDocumentFromYAMLContent(id, content)
-  }
-
-  if (extension === ContentFileExtension.JSON) {
-    return await generateDocumentFromJSONContent(id, content)
-  }
-
-  return null
-}
-
-export async function generateDocumentFromYAMLContent(id: string, content: string): Promise<DatabaseItem> {
-  const { data } = parseFrontMatter(`---\n${content}\n---`)
-
-  // Keep array contents under `body` key
-  let parsed = data
-  if (Array.isArray(data)) {
-    console.warn(`YAML array is not supported in ${id}, moving the array into the \`body\` key`)
-    parsed = { body: data }
-  }
-
-  return {
-    id,
-    extension: getFileExtension(id),
-    stem: generateStemFromId(id),
-    meta: {},
-    ...parsed,
-    body: parsed.body || parsed,
-  } as never as DatabaseItem
-}
-
-export async function generateDocumentFromJSONContent(id: string, content: string): Promise<DatabaseItem> {
-  let parsed: Record<string, unknown> = destr(content)
-
-  // Keep array contents under `body` key
-  if (Array.isArray(parsed)) {
-    console.warn(`JSON array is not supported in ${id}, moving the array into the \`body\` key`)
-    parsed = {
-      body: parsed,
-    }
-  }
-
-  // fsPath will be overridden by host
-  return {
-    id,
-    extension: ContentFileExtension.JSON,
-    stem: generateStemFromId(id),
-    meta: {},
-    ...parsed,
-    body: parsed.body || parsed,
-  } as never as DatabaseItem
-}
-
-export async function generateDocumentFromMarkdownContent(id: string, content: string): Promise<DatabaseItem> {
-  const document = await parseMarkdown(content, {
-    remark: {
-      plugins: {
-        'remark-mdc': {
-          options: {
-            autoUnwrap: true,
-          },
-        },
-      },
-    },
-  })
-
-  // Remove nofollow from links
-  visit(document.body, (node: Node) => (node as MDCElement).type === 'element' && (node as MDCElement).tag === 'a', (node: Node) => {
-    if ((node as MDCElement).props?.rel?.join(' ') === 'nofollow') {
-      Reflect.deleteProperty((node as MDCElement).props!, 'rel')
-    }
-  })
-
-  const body = document.body.type === 'root' ? compressTree(document.body) : document.body as never as MarkdownRoot
-
-  return {
-    id,
-    meta: {},
-    extension: ContentFileExtension.Markdown,
-    stem: generateStemFromId(id),
-    body: {
-      ...body,
-      toc: document.toc,
-    },
-    ...document.data,
-  } as never as DatabaseItem
-}
-
 export async function generateContentFromDocument(document: DatabaseItem): Promise<string | null> {
   const [id, _hash] = document.id.split('#')
   const extension = getFileExtension(id)

src/app/src/utils/content.ts

@@ -1,12 +1,12 @@
-import type { DatabaseItem, MediaItem, DatabasePageItem, DraftItem, BaseItem, ContentConflict } from '../types'
+import type { DatabaseItem, MediaItem, DatabasePageItem, DraftItem, BaseItem, ContentConflict, StudioHost } from '../types'
 import { DraftStatus, ContentFileExtension } from '../types'
 import { isEqual } from './database'
 import { studioFlags } from '../composables/useStudio'
-import { generateContentFromDocument, generateDocumentFromContent } from './content'
+import { generateContentFromDocument } from './content'
 import { fromBase64ToUTF8 } from '../utils/string'
 import { isMediaFile } from './file'
 
-export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaItem>): Promise<ContentConflict | undefined> {
+export async function checkConflict(host: StudioHost, draftItem: DraftItem<DatabaseItem | MediaItem>): Promise<ContentConflict | undefined> {
   if (isMediaFile(draftItem.fsPath) || draftItem.fsPath.endsWith('.gitkeep')) {
     return
   }
@@ -27,14 +27,13 @@ export async function checkConflict(draftItem: DraftItem<DatabaseItem | MediaIte
     return
   }
 
-  const localContent = await generateContentFromDocument(draftItem.original as DatabaseItem) as string
   const githubContent = fromBase64ToUTF8(draftItem.githubFile.content)
-  const githubDocument = await generateDocumentFromContent(draftItem.modified!.id!, githubContent) as DatabaseItem
 
-  if (isEqual(draftItem.original as DatabasePageItem, githubDocument as DatabasePageItem)) {
+  if (await host.document.isEqual(githubContent, draftItem.original! as DatabaseItem)) {
     return
   }
 
+  const localContent = await generateContentFromDocument(draftItem.original as DatabaseItem) as string
   if (localContent.trim() === githubContent.trim()) {
     return
   }

src/app/src/utils/draft.ts

@@ -3,16 +3,16 @@ import { ensure } from './utils/ensure'
 import type { CollectionInfo, CollectionItemBase, CollectionSource, DatabaseAdapter } from '@nuxt/content'
 import type { ContentDatabaseAdapter } from '../types/content'
 import { getCollectionByFilePath, generateIdFromFsPath, generateRecordDeletion, generateRecordInsert, generateFsPathFromId, getCollectionById } from './utils/collection'
-import { createCollectionDocument, normalizeDocument } from './utils/document'
+import { createCollectionDocument, isDocumentMatchContent, normalizeDocument } from './utils/document'
 import { kebabCase } from 'scule'
 import type { StudioHost, StudioUser, DatabaseItem, MediaItem, Repository } from 'nuxt-studio/app'
 import type { RouteLocationNormalized, Router } from 'vue-router'
-import { generateDocumentFromContent } from 'nuxt-studio/app/utils'
 // @ts-expect-error queryCollection is not defined in .nuxt/imports.d.ts
 import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections } from '#imports'
 import { collections } from '#content/preview'
 import { publicAssetsStorage } from '#build/studio-public-assets'
 import { useHostMeta } from './composables/useMeta'
+import { generateDocumentFromContent } from './utils/document'
 import { generateIdFromFsPath as generateMediaIdFromFsPath } from './utils/media'
 import { getCollectionSourceById } from './utils/source'
 
@@ -273,6 +273,8 @@ export function useStudioHost(user: StudioUser, repository: Repository): StudioH
           }
         })
       },
+      isEqual: async (content: string, document: DatabaseItem) => isDocumentMatchContent(content, document),
+      generateDocumentFromContent: async (id: string, content: string) => generateDocumentFromContent(id, content) as Promise<DatabaseItem>,
     },
 
     media: {