(beta): November 2024 Elderberry 🍇🖤

components/codeChecker/CodeChecker.vue

@@ -279,8 +279,7 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries }
-    = await extractAssetsFromZip(file)
+  const { indexFile, sketchFile, p5File, entries } = await extractAssetsFromZip(file)
 
   if (!indexFile) {
     errorMessage.value = `Index file not found: Please make sure that “index.html” is in the root directory`
@@ -291,6 +290,12 @@ const onFileSelected = async (file: File) => {
     errorMessage.value = `Sketch file not found: ${config.sketchFile}`
     return
   }
+
+  if (!p5File) {
+    errorMessage.value = `p5 file not found: Please make sure that “p5.min.js” is in the root directory`
+    return
+  }
+
   const valid = validate(indexFile.content, sketchFile.content)
   if (!valid.isSuccess) {
     errorMessage.value = valid.error ?? 'Unknown error'

components/codeChecker/codechecker.config.js

@@ -1,6 +1,7 @@
 export default {
   iframeId: 'sketch-iframe',
   sketchFile: 'sketch.js',
+  p5File: 'p5.min.js',
   p5: 'p5',
   maxAllowedLoadTime: 3000, // in ms
   varaitionsOptions: [1, 3, 5, 10, 15, 20],

components/codeChecker/utils.ts

@@ -84,23 +84,29 @@ const calculateCommonPrefix = (filePaths: string[]): string => {
 const categorizeFiles = async (
   entries: { [key: string]: ZipEntry },
   commonPrefix: string,
-): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[] }> => {
+): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[], p5Files: FileEntry[] }> => {
   const htmlFiles: FileEntry[] = []
   const jsFiles: FileEntry[] = []
+  const p5Files: FileEntry[] = []
 
   for (const [path, file] of Object.entries(entries)) {
     const adjustedPath = path.replace(commonPrefix, '')
     const content = await file.text()
+    const isJsFile = path.endsWith('.js')
 
     if (path === 'index.html') {
       htmlFiles.push({ path: adjustedPath, content })
     }
-    else if (path.endsWith('.js') && !path.includes(config.p5)) {
+    // allows p5 libraries
+    else if (path.includes(config.p5) && isJsFile) {
+      p5Files.push({ path: adjustedPath, content })
+    }
+    else if (isJsFile) {
       jsFiles.push({ path: adjustedPath, content })
     }
   }
 
-  return { htmlFiles, jsFiles }
+  return { htmlFiles, jsFiles, p5Files }
 }
 
 // exported functions
@@ -130,6 +136,7 @@ export const extractAssetsFromZip = async (
 ): Promise<{
   indexFile: FileEntry
   sketchFile: FileEntry
+  p5File: FileEntry
   entries: { [key: string]: ZipEntry }
   jsFiles: FileEntry[]
 }> => {
@@ -138,14 +145,15 @@ export const extractAssetsFromZip = async (
 
   const commonPrefix = calculateCommonPrefix(filePaths)
 
-  const { htmlFiles, jsFiles } = await categorizeFiles(entries, commonPrefix)
-  const sketchFile = jsFiles.find(file =>
-    file.path.includes(config.sketchFile),
-  ) as FileEntry
+  const { htmlFiles, jsFiles, p5Files } = await categorizeFiles(entries, commonPrefix)
+
+  const sketchFile = jsFiles.find(file => file.path.includes(config.sketchFile)) as FileEntry
+  const p5File = p5Files.find(file => file.path.includes(config.p5File)) as FileEntry
 
   return {
     indexFile: htmlFiles[0],
     sketchFile,
+    p5File,
     entries,
     jsFiles,
   }

components/codeChecker/validate.ts

@@ -30,14 +30,16 @@ const constants = {
   localP5JsRegex: /<script.*src="(?!http)([^"]*p5[^"]*\.js)"/,
   titleTagRegex: /<title>(.*?)<\/title>/,
   kodaRendererRegex: /kodahash\/render\/completed/,
+  kodaRendererCalledRegex: /(?<!function\s)postMessageKoda\s*\(/,
   resizerRegex: /resizeCanvas\(/,
   disallowedTitle: 'KodaHash',
 }
 
 const validateCanvasCreation = (
   sketchFileContent: string,
 ): Result<RegExpExecArray> => {
-  const canvasMatch = constants.canvasRegex.exec(sketchFileContent)
+  // Create a new regex instance to avoid issues with lastIndex when using the global flag.
+  const canvasMatch = new RegExp(constants.canvasRegex).exec(sketchFileContent)
   if (!canvasMatch) {
     return { isSuccess: false, error: 'createCanvas function not found.' }
   }
@@ -141,7 +143,7 @@ const validateSketchContent = (
     canvasSize,
     localP5jsUsed: false, // This will be set based on HTML content checks
     validTitle: false, // This will be updated after HTML content checks
-    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent),
+    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent) && constants.kodaRendererCalledRegex.test(sketchFileContent),
     resizerUsed: constants.resizerRegex.test(sketchFileContent),
     usesHashParam: validateURLParamsUsage(sketchFileContent).isSuccess,
   }

components/collection/CollectionCard.vue

@@ -8,7 +8,7 @@
       :to="`/${urlPrefix}/collection/${collection.id}`"
     >
       <BasicImage
-        :src="image"
+        :src="banner"
         :alt="collection.name"
         :lazy="lazyLoading"
         sizes="300px md:350px"
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { NeoSkeleton } from '@kodadot1/brick'
-import type { TokenMetadata } from '@kodadot1/hyperdata'
+import type { CollectionMetadata } from '@kodadot1/hyperdata'
 import CollectionDetail from './CollectionDetail.vue'
 import type { CollectionWithMeta } from '@/types'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
@@ -55,17 +55,21 @@ const props = defineProps<{
 
 const isLoadingMeta = ref(false)
 const image = ref('')
+const banner = ref('')
 
 const { urlPrefix } = usePrefix()
 
 const getImageFromMetadata = async (collectionMetadata: string) => {
   isLoadingMeta.value = true
 
-  const metadata = (await processSingleMetadata(
-    collectionMetadata,
-  )) as TokenMetadata
+  const metadata = await processSingleMetadata<CollectionMetadata>(collectionMetadata)
+
+  const metadataImage = getCollectionImage(metadata) || ''
+  const metadataBanner = metadata.banner || metadataImage
+
+  image.value = sanitizeIpfsUrl(metadataImage)
+  banner.value = sanitizeIpfsUrl(metadataBanner)
 
-  image.value = sanitizeIpfsUrl(getCollectionImage(metadata) || '')
   isLoadingMeta.value = false
 }
 
@@ -76,9 +80,11 @@ onMounted(async () => {
 
   const meta = props.collection.meta
   const metaImage = meta ? getCollectionImage(meta) : undefined
+  const metaBanner = meta?.banner || metaImage
 
-  if (metaImage) {
+  if (metaImage && metaBanner) {
     image.value = sanitizeIpfsUrl(metaImage)
+    banner.value = sanitizeIpfsUrl(metaBanner)
   }
   else {
     getImageFromMetadata(props.collection.metadata)

components/collection/CollectionHeader.vue

@@ -7,6 +7,7 @@
     <section class="pt-5">
       <div class="container is-fluid">
         <CollectionInfo
+          ref="collectionInfo"
           :collection-id="collectionId"
           :collection="collection"
         />
@@ -21,12 +22,31 @@ import { useCollectionMinimal } from '@/components/collection/utils/useCollectio
 import CollectionInfo from '@/components/collection/CollectionInfo.vue'
 import CollectionBanner from '@/components/collection/CollectionHeader/CollectionBanner.vue'
 
+const collectionInfo = ref()
+
+const { toast } = useToast()
+const { $i18n } = useNuxtApp()
 const route = useRoute()
 const collectionId = computed(() => route.params.id.toString())
 
 const { collection, refetch } = useCollectionMinimal({
   collectionId,
 })
 
+useSubscriptionGraphql({
+  query: `
+    collectionEntity: collectionEntityById(id: "${collectionId.value}") {
+      max
+      metadata
+    }
+  `,
+  onChange: () => {
+    toast($i18n.t('edit.collection.updated'))
+    refetch()
+    collectionInfo.value?.refetch()
+  },
+  immediate: false,
+})
+
 watch(collectionId, () => refetch())
 </script>

components/collection/CollectionInfo.vue

@@ -169,7 +169,9 @@ const visibleDescription = computed(() => {
   )
 })
 
-const { stats } = useCollectionDetails({
+const { stats, refetch } = useCollectionDetails({
   collectionId: computed(() => props.collectionId),
 })
+
+defineExpose({ refetch })
 </script>