✨ Crawl OG image and pass to NFT mint page (#357)

* ✨ Crawl ogImage on first crawl * ⚡️ Pass og arweave id in qs
likecoin · Jun 5, 2023 · 85c984b · 85c984b
1 parent cc846fe
commit 85c984b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 34 deletions.
diff --git a/pages/nft/iscn/_iscnId.vue b/pages/nft/iscn/_iscnId.vue
@@ -670,19 +670,23 @@ export default class NFTTestMintPage extends Vue {
   async getOgImage() {
     try {
       this.isLoadingPreviewOG = true
-      if (this.iscnData.contentMetadata?.['@type'] === 'Photo') {
+      let arweaveID = this.$route.query.og_image_arweave_id as string;
+      if (!arweaveID && this.iscnData.contentMetadata?.['@type'] === 'Photo') {
         const arweaveURI = this.iscnData.contentFingerprints?.find((f: string) => f.startsWith('ar://'));
         if (arweaveURI) {
-          try {
-            const { data } = await this.$axios.get(arweaveURI.replace('ar://', 'https://arweave.net/'), { responseType: 'blob' })
-            this.ogImageBlob = data
-            this.defaultOgImageBlob = data
-            this.ogImageArweaveId = arweaveURI.replace('ar://', '')
-            this.isCustomOgimage = true;
-            logTrackerEvent(this, 'IscnMintNFT', 'GetOgImageExists', arweaveURI, 1);
-          } catch (err) {
-            console.error(err)
-          }
+          arweaveID = arweaveURI.replace('ar://', '');
+        }
+      }
+      if (arweaveID) {
+        try {
+          const { data } = await this.$axios.get(`https://arweave.net/${arweaveID}`, { responseType: 'blob' })
+          this.ogImageBlob = data
+          this.defaultOgImageBlob = data
+          this.ogImageArweaveId = arweaveID
+          this.isCustomOgimage = true;
+          logTrackerEvent(this, 'IscnMintNFT', 'GetOgImageExists', arweaveID, 1);
+        } catch (err) {
+          console.error(err)
         }
       }
       if (!this.ogImageBlob && !this.ogImageArweaveId) {

diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
@@ -191,6 +191,7 @@ export default class FetchIndex extends Vue {
   iscnData: any
   ipfsHash = ''
   arweaveId = ''
+  ogImageArweaveId = ''
   arweaveFeeInfo: any
   arweaveFeeTxHash = ''
   iscnId = this.$route.query.iscn_id as string || ''
@@ -316,6 +317,7 @@ export default class FetchIndex extends Vue {
       liker_id: _likerId,
       ...querys
     } = this.$route.query;
+    if (this.ogImageArweaveId) { querys.og_image_arweave_id = this.ogImageArweaveId }
     return querys;
     /* eslint-enable @typescript-eslint/no-unused-vars */
   }
@@ -582,11 +584,13 @@ export default class FetchIndex extends Vue {
             ? State.TO_REGISTER_ISCN
             : State.TO_UPLOAD_TO_ARWEAVE
         case State.TO_UPLOAD_TO_ARWEAVE:
-          if (!this.arweaveFeeTxHash) {
-            await this.sendArweaveFeeTx(this.arweaveFeeInfo)
+          if (!this.arweaveId) {
+            if (!this.arweaveFeeTxHash) {
+              await this.sendArweaveFeeTx(this.arweaveFeeInfo)
+            }
+            await this.submitToArweave()
+            this.state = State.TO_REGISTER_ISCN
           }
-          await this.submitToArweave()
-          this.state = State.TO_REGISTER_ISCN
         case State.TO_REGISTER_ISCN:
           await this.registerISCN()
         default:
@@ -629,7 +633,7 @@ export default class FetchIndex extends Vue {
   async checkArweaveIdExistsAndEstimateFee() {
     try {
       logTrackerEvent(this, 'NFTUrlMint', 'CheckArweaveIdExistsAndEstimateFee', this.url, 1);
-      const { address, arweaveId, LIKE, ipfsHash, memo } = await this.$axios.$post(
+      const { address, arweaveId, LIKE, ipfsHash, memo, list } = await this.$axios.$post(
         API_POST_ARWEAVE_ESTIMATE,
         this.formData,
         {
@@ -638,8 +642,14 @@ export default class FetchIndex extends Vue {
           },
         },
       )
-      if (arweaveId) { this.arweaveId = arweaveId }
-      this.ipfsHash = ipfsHash
+      if (arweaveId) {
+        this.arweaveId = arweaveId
+        if (list) {
+          const ogImageArweaveEntry = list.find((a: any) => a.key === 'image_og')
+          if (ogImageArweaveEntry) this.ogImageArweaveId = ogImageArweaveEntry.arweaveId;
+        }
+      }
+      if (ipfsHash) this.ipfsHash = ipfsHash
       this.arweaveFeeInfo = {
         to: address,
         amount: new BigNumber(LIKE),
@@ -684,9 +694,13 @@ export default class FetchIndex extends Vue {
           timeout: 90000,
         },
       )
-      const { arweaveId, txHash } = arweaveResult;
+      const { arweaveId, list, txHash } = arweaveResult;
       logTrackerEvent(this, 'NFTUrlMint', 'SubmitToArweaveSuccess', arweaveId, 1);
       this.arweaveId = arweaveId
+      if (list) {
+        const ogImageArweaveEntry = list.find((a: any) => a.key === 'image_og')
+        if (ogImageArweaveEntry) this.ogImageArweaveId = ogImageArweaveEntry.arweaveId;
+      }
       if (this.opener) {
         try {
           const message = JSON.stringify({

diff --git a/server/crawler/index.ts b/server/crawler/index.ts
@@ -312,6 +312,33 @@ export async function getCralwerData(url: string, wallet?: string) {
     const metas = $('meta')
     const promiseImg: any = []
 
+    Object.keys(metas).forEach((key: any) => {
+      const { name, property, content: value } = metas[key].attribs || {}
+      if (name === 'description' || property === 'og:description') {
+        description = description || value
+      } else if (name === 'keywords') {
+        keywords = keywords || value
+      } else if (name === 'author') {
+        author = author || value
+      } else if (property === 'og:image') {
+        ogImage = ogImage || value
+      } else if (name === 'msapplication-TileImage') {
+        tileImage = tileImage || value
+      }
+    })
+    ogImage = ogImage || tileImage
+    if (ogImage) {
+      promiseImg.push(
+        axios
+          .get(`${encodedURL(ogImage)}`, { responseType: 'arraybuffer' })
+          .then((element) => {
+            const newFileName = 'image_og'
+            return { element, key: newFileName }
+          })
+          .catch(() => {}),
+      )
+    }
+
     const img = $('img')
     img.each((i, e) => {
       const src = $(e).attr('src')
@@ -344,21 +371,6 @@ export async function getCralwerData(url: string, wallet?: string) {
         type: e.element.headers['content-type'],
       }))
 
-    Object.keys(metas).forEach((key: any) => {
-      const { name, property, content: value } = metas[key].attribs || {}
-      if (name === 'description' || property === 'og:description') {
-        description = description || value
-      } else if (name === 'keywords') {
-        keywords = keywords || value
-      } else if (name === 'author') {
-        author = author || value
-      } else if (property === 'og:image') {
-        ogImage = ogImage || value
-      } else if (name === 'msapplication-TileImage') {
-        tileImage = tileImage || value
-      }
-    })
-    ogImage = ogImage || tileImage
     body = $('body').html() || ''
     body = formatBody({ content: body, title, author, description, wallet })
   } catch (error) {