From 85c984b0f16782ea99c3c178760e3eaeb22ab602 Mon Sep 17 00:00:00 2001 From: William Chong <6198816+williamchong@users.noreply.github.com> Date: Mon, 5 Jun 2023 17:51:17 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Crawl=20OG=20image=20and=20pass=20t?= =?UTF-8?q?o=20NFT=20mint=20page=20(#357)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Crawl ogImage on first crawl * ⚡️ Pass og arweave id in qs --- pages/nft/iscn/_iscnId.vue | 26 +++++++++++++---------- pages/nft/url/index.vue | 30 +++++++++++++++++++-------- server/crawler/index.ts | 42 ++++++++++++++++++++++++-------------- 3 files changed, 64 insertions(+), 34 deletions(-) diff --git a/pages/nft/iscn/_iscnId.vue b/pages/nft/iscn/_iscnId.vue index c9f1886c..1fc09c96 100644 --- 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 index 69b92c08..84e68919 100644 --- 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 index 2e9e4934..f605d841 100644 --- 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) {