From a4dfa51c1713cb5a1b2b097178f6c84c80caa707 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sat, 28 Sep 2024 00:13:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20code=20format?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/nft/url/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index e987b891..73502b18 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -644,8 +644,8 @@ export default class FetchIndex extends Vue {
       logTrackerEvent(this, 'NFTUrlMint', 'CrawlUrlData', this.url, 1);
       const { data } = await this.$axios.get(`/crawler/?url=${encodeURIComponent(this.encodedURL)}&wallet=${this.address}`)
       const { title, description, author, body, images = [] } = data;
-      let {keywords} = data;
-      if(isNewsPress) {
+      let { keywords } = data;
+      if (isNewsPress) {
         keywords = keywords ? `${keywords},NewsPress` : 'NewsPress';
       }
       if (!body) { throw new Error('CANNOT_CRAWL_THIS_URL') }

From a13c1ab1252c2079354b02c4d1cffeb828d8474a Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Sat, 28 Sep 2024 11:30:46 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Add=20client=20only=20for=20?=
 =?UTF-8?q?view=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/view/_iscnId/index.vue | 664 ++++++++++++++++++-----------------
 1 file changed, 333 insertions(+), 331 deletions(-)

diff --git a/pages/view/_iscnId/index.vue b/pages/view/_iscnId/index.vue
index 78f44abc..21d6c5a4 100644
--- a/pages/view/_iscnId/index.vue
+++ b/pages/view/_iscnId/index.vue
@@ -82,344 +82,140 @@
       'lg:px-0',
     ]"
   >
-    <IscnEditBar
-      class="ml-auto"
-      :is-iscn-owner="isIscnOwner"
-      :iscn-id="iscnId"
-      :is-show-mint-button="isShowMintButton"
-      :is-nft-book="isNFTBook"
-      :class-id="classId"
-      :likerland-nft-url="likerlandNftUrl"
-      :should-show-mint-button="isShowMintButton"
-      @click-edit="handleEdit"
-      @click-download="handleClickDownload"
-      @click-mint-book="clickMintNFTBook"
-    />
-    <div
-      :class="[
-        'flex',
-        'flex-nowrap',
-        'flex-col',
-        'items-start',
-        'lg:flex-row',
-        'gap-[32px]',
-        'w-full',
-      ]"
-    >
+    <ClientOnly>
+      <IscnEditBar
+        class="ml-auto"
+        :is-iscn-owner="isIscnOwner"
+        :iscn-id="iscnId"
+        :is-show-mint-button="isShowMintButton"
+        :is-nft-book="isNFTBook"
+        :class-id="classId"
+        :likerland-nft-url="likerlandNftUrl"
+        :should-show-mint-button="isShowMintButton"
+        @click-edit="handleEdit"
+        @click-download="handleClickDownload"
+        @click-mint-book="clickMintNFTBook"
+      />
       <div
         :class="[
-          'relative',
           'flex',
-          'lg:block',
+          'flex-nowrap',
           'flex-col',
-          'items-center',
+          'items-start',
+          'lg:flex-row',
+          'gap-[32px]',
           'w-full',
-          'max-w-full',
-          'lg:max-w-[280px]',
         ]"
       >
-        <NuxtLink
-          :to="localeLocation({
-            name: 'view-iscnId-card',
-            params: { iscnId: record.id },
-          })"
-        >
-          <IscnCard
-            :key="`${record.id}-portrait`"
-            :class="[
-              'hidden',
-              'lg:block',
-              'flex-shrink-0',
-              'w-[280px]',
-            ]"
-            :record="record"
-            orientation="portrait"
-            :is-animated="true"
-          />
-          <IscnCard
-            :key="`${record.id}-landscape`"
-            :class="[
-              'w-full',
-              'lg:absolute',
-              'lg:opacity-0',
-              'lg:pointer-events-none',
-            ]"
-            :record="record"
-            :is-animated="true"
-            orientation="landscape"
-          />
-        </NuxtLink>
-        <Button
-          v-if="showContentLinks && viewContentURL"
-          class="mx-auto mt-[16px]"
-          preset="outline"
-          :text="$t('NFTPortal.button.viewContent')"
-          @click="onClickViewContent"
-        >
-          <template #append>
-            <IconOpenInNew class="w-[12px]" />
-          </template>
-        </Button>
-        <MetadataCard
-          v-if="type ==='Image' || type === 'Photo'"
-          :img-src="imgSrc"
-          :filtered-exif="exifInfo"
+        <div
           :class="[
-            'mt-[16px]',
-            'sm:mt-0',
-            'lg:mt-[16px]',
-            'sm:ml-[16px]',
-            'lg:ml-0',
+            'relative',
+            'flex',
+            'lg:block',
+            'flex-col',
+            'items-center',
+            'w-full',
+            'max-w-full',
+            'lg:max-w-[280px]',
           ]"
-        />
-      </div>
-      <div class="w-full">
-        <InfoCard :label-text="type" :timestamp="recordData.recordTimestamp">
-          <template #icon>
-            <ISCNTypeIcon :type="type" />
-          </template>
-          <FormField
-            v-if="name"
-            :label="$t('iscn.meta.name')"
-            content-type="strong"
-            class="mb-[12px]"
-          >
-            {{ name }}
-          </FormField>
-          <FormField
-            v-if="metadata.description"
-            :label="$t('iscn.meta.description')"
-            class="mb-[12px]"
-          >
-            {{ metadata.description }}
-          </FormField>
-          <FormField
-            v-if="iscnOwner"
-            :label="$t('iscn.meta.owner')"
-            class="mb-[12px]"
+        >
+          <NuxtLink
+            :to="localeLocation({
+              name: 'view-iscnId-card',
+              params: { iscnId: record.id },
+            })"
           >
-            <Link
+            <IscnCard
+              :key="`${record.id}-portrait`"
               :class="[
-                'text-[14px]',
-                'break-all',
-                'cursor-pointer',
+                'hidden',
+                'lg:block',
+                'flex-shrink-0',
+                'w-[280px]',
               ]"
-              :to="localeLocation({ name: 'search-keyword', query: { owner: iscnOwner } })">
-              {{ iscnOwner }}
-            </Link>
-          </FormField>
-          <Divider class="my-[12px]" />
-          <FormField
-            v-if="iscnId"
-            :label="$t('iscn.meta.id.copy')"
-            class="mb-[12px]"
-          >
-            <Button
-              size="mini"
-              preset="tertiary"
-              tag="div"
-              text-preset="h6"
-              type="button"
-              content-class="font-medium ml-[-4px]"
-              prepend-class="font-bold"
-              :text="iscnId"
-              @click="handleCopyIscnId"
-            />
-          </FormField>
-          <FormField
-            v-if="showContentLinks"
-            :label="$t('iscn.meta.content.fingerprints')"
-            class="mb-[12px]"
-          >
-            <ContentFingerprintLink
-              v-for="item in recordData.contentFingerprints"
-              :key="item.key"
-              :item="item"
-              class="mb-[8px] break-all text-[14px]"
-            />
-          </FormField>
-          <Divider class="my-[12px]" />
-          <FormField
-            v-if="keywords.length"
-            :label="$t('iscn.meta.tags.title')"
-            class="mb-[12px]"
-          >
-            <Keyword
-              v-for="item in keywords"
-              :key="item.key"
-              :keyword="item"
-              class="mr-[8px] mb-[4px]"
-            />
-          </FormField>
-        </InfoCard>
-        <InfoCard :label-text="$t('iscn.meta.metadata.title')">
-          <template #icon>
-            <IconMetadata />
-          </template>
-          <FormField
-            :label="$t('iscn.meta.stakeholders')"
-            class="mb-[12px]"
-            content-classes="flex flex-row flex-wrap items-center gap-[8px]"
-          >
-            <Button
-              v-for="(stakeholder, index) in stakeholders"
-              :key="stakeholder.key"
-              size="mini"
-              preset="secondary"
-              tag="div"
-              text-preset="h6"
-              type="button"
-              :text="getStakeholderDisplayName(index) | ellipsis"
-              @click="showStakeholder(index)"
+              :record="record"
+              orientation="portrait"
+              :is-animated="true"
             />
-          </FormField>
-          <FormField
-            v-if="version"
-            :label="$t('iscn.meta.version')"
-            class="mb-[12px]"
-          >
-            {{ version }}
-          </FormField>
-          <FormField
-            v-if="metadata.url"
-            :label="$t('iscn.meta.url')"
-            class="mb-[12px]"
-          >
-            <Link
-              :class="[
-                'text-[14px]',
-                'break-all',
-              ]"
-              :href="metadata.url"
-              ugc="true"
-            >
-              {{ metadata.url }}
-            </Link>
-          </FormField>
-          <FormField
-            v-if="metadata.usageInfo"
-            :label="$t('iscn.meta.usage.info')"
-            class="mb-[12px]"
-          >
-            <Link
-              v-if="isUsageInfoUrl"
+            <IscnCard
+              :key="`${record.id}-landscape`"
               :class="[
-                'text-[14px]',
-                'break-all',
+                'w-full',
+                'lg:absolute',
+                'lg:opacity-0',
+                'lg:pointer-events-none',
               ]"
-              ugc="true"
-              :href="metadata.usageInfo"
-            >
-              {{ metadata.usageInfo }}
-            </Link>
-            <div v-else>
-              {{ metadata.usageInfo }}
-            </div>
-          </FormField>
+              :record="record"
+              :is-animated="true"
+              orientation="landscape"
+            />
+          </NuxtLink>
           <Button
-            class="w-min"
+            v-if="showContentLinks && viewContentURL"
+            class="mx-auto mt-[16px]"
             preset="outline"
-            tag="a"
-            text-preset="h5"
-            type="button"
-            content-class="font-medium ml-[-4px]"
-            prepend-class="font-bold"
-            :href="rawDataURL"
+            :text="$t('NFTPortal.button.viewContent')"
+            @click="onClickViewContent"
           >
-            <template #prepend>
-              <IconInfo />
+            <template #append>
+              <IconOpenInNew class="w-[12px]" />
             </template>
-            {{ $t('iscn.meta.rawData') }}
           </Button>
-        </InfoCard>
-        <!-- Dialog -->
-        <Dialog
-          v-model="isOpenAuthorDialog"
-          :has-padding="false"
-          preset="custom"
-        >
-          <Card class="flex flex-col w-[616px]">
-            <Label
-              class="w-min mb-[16px]"
-              :text="$t('iscn.meta.stakeholders')"
-              tag="div"
-              preset="p5"
-              valign="middle"
-              content-class="font-semibold whitespace-nowrap text-like-green"
-              prepend-class="text-like-green"
+          <MetadataCard
+            v-if="type ==='Image' || type === 'Photo'"
+            :img-src="imgSrc"
+            :filtered-exif="exifInfo"
+            :class="[
+              'mt-[16px]',
+              'sm:mt-0',
+              'lg:mt-[16px]',
+              'sm:ml-[16px]',
+              'lg:ml-0',
+            ]"
+          />
+        </div>
+        <div class="w-full">
+          <InfoCard :label-text="type" :timestamp="recordData.recordTimestamp">
+            <template #icon>
+              <ISCNTypeIcon :type="type" />
+            </template>
+            <FormField
+              v-if="name"
+              :label="$t('iscn.meta.name')"
+              content-type="strong"
+              class="mb-[12px]"
             >
-              <template #prepend>
-                <IconMetadata />
-              </template>
-            </Label>
-            <!-- name -->
-            <div class="flex flex-row items-center justify-between flex-nowrap">
-              <FormField
-                v-if="stakeholderInfo.authorName"
-                content-type="strong"
-                :label="$t('iscn.meta.creator.name')"
-                class="w-[50%] my-[12px]"
-              >
-                <Link
-                  :class="'text-[16px] cursor-pointer'"
-                  :to="localeLocation({ name: 'search-keyword', query: { stakeholder_name: stakeholderInfo.authorName }})"
-                >
-                  {{ stakeholderInfo.authorName }}
-                </Link>
-              </FormField>
-              <FormField
-                v-if="stakeholderInfo.likerId"
-                :label="$t('iscn.meta.stakeholders.likerId')"
-                class="w-[50%] my-[12px] cursor-pointer"
-              >
-                <Link :to="localeLocation({ name: 'search-keyword', query: { stakeholder_id: stakeholderInfo.likerId } })">{{
-                  stakeholderInfo.likerId
-                }}</Link>
-              </FormField>
-            </div>
+              {{ name }}
+            </FormField>
             <FormField
-              v-if="stakeholderInfo.authorDescription"
-              :label="$t('iscn.meta.stakeholders.description')"
-              class="w-[50%] my-[12px]"
+              v-if="metadata.description"
+              :label="$t('iscn.meta.description')"
+              class="mb-[12px]"
             >
-              <Label
-                :text="stakeholderInfo.authorDescription"
-                tag="div"
-                preset="p5"
-              />
+              {{ metadata.description }}
             </FormField>
-            <Divider
-              v-if="stakeholderInfo.authorUrls.length"
-              class="my-[12px]"
-            />
-            <!-- url -->
             <FormField
-              v-if="stakeholderInfo.authorUrls.length"
-              :label="$t('iscn.meta.stakeholders.url')"
+              v-if="iscnOwner"
+              :label="$t('iscn.meta.owner')"
+              class="mb-[12px]"
             >
               <Link
-                v-for="url in stakeholderInfo.authorUrls"
-                :key="url"
-                :href="url"
-                class="break-all"
-                :ugc="true"
-                >{{ url }}</Link
-              >
+                :class="[
+                  'text-[14px]',
+                  'break-all',
+                  'cursor-pointer',
+                ]"
+                :to="localeLocation({ name: 'search-keyword', query: { owner: iscnOwner } })">
+                {{ iscnOwner }}
+              </Link>
             </FormField>
-            <Divider
-              v-if="stakeholderInfo.authorWalletAddresses.length"
-              class="my-[12px]"
-            />
-            <!-- wallet address -->
+            <Divider class="my-[12px]" />
             <FormField
-              v-if="stakeholderInfo.authorWalletAddresses.length"
-              :label="$t('iscn.meta.stakeholders.wallet')"
-              content-classes="flex flex-row"
+              v-if="iscnId"
+              :label="$t('iscn.meta.id.copy')"
+              class="mb-[12px]"
             >
               <Button
-                v-for="wallet in stakeholderInfo.authorWalletAddresses"
-                :key="wallet.address"
-                class="mr-[8px] mb-[4px]"
                 size="mini"
                 preset="tertiary"
                 tag="div"
@@ -427,33 +223,239 @@
                 type="button"
                 content-class="font-medium ml-[-4px]"
                 prepend-class="font-bold"
-                @click="handleCopyAddress(wallet.address, wallet.type)"
+                :text="iscnId"
+                @click="handleCopyIscnId"
+              />
+            </FormField>
+            <FormField
+              v-if="showContentLinks"
+              :label="$t('iscn.meta.content.fingerprints')"
+              class="mb-[12px]"
+            >
+              <ContentFingerprintLink
+                v-for="item in recordData.contentFingerprints"
+                :key="item.key"
+                :item="item"
+                class="mb-[8px] break-all text-[14px]"
+              />
+            </FormField>
+            <Divider class="my-[12px]" />
+            <FormField
+              v-if="keywords.length"
+              :label="$t('iscn.meta.tags.title')"
+              class="mb-[12px]"
+            >
+              <Keyword
+                v-for="item in keywords"
+                :key="item.key"
+                :keyword="item"
+                class="mr-[8px] mb-[4px]"
+              />
+            </FormField>
+          </InfoCard>
+          <InfoCard :label-text="$t('iscn.meta.metadata.title')">
+            <template #icon>
+              <IconMetadata />
+            </template>
+            <FormField
+              :label="$t('iscn.meta.stakeholders')"
+              class="mb-[12px]"
+              content-classes="flex flex-row flex-wrap items-center gap-[8px]"
+            >
+              <Button
+                v-for="(stakeholder, index) in stakeholders"
+                :key="stakeholder.key"
+                size="mini"
+                preset="secondary"
+                tag="div"
+                text-preset="h6"
+                type="button"
+                :text="getStakeholderDisplayName(index) | ellipsis"
+                @click="showStakeholder(index)"
+              />
+            </FormField>
+            <FormField
+              v-if="version"
+              :label="$t('iscn.meta.version')"
+              class="mb-[12px]"
+            >
+              {{ version }}
+            </FormField>
+            <FormField
+              v-if="metadata.url"
+              :label="$t('iscn.meta.url')"
+              class="mb-[12px]"
+            >
+              <Link
+                :class="[
+                  'text-[14px]',
+                  'break-all',
+                ]"
+                :href="metadata.url"
+                ugc="true"
               >
-                <IconCoin
-                  class="mr-[4px]"
-                  :type="wallet.type"
-                />
-                {{
-                  (wallet.type === 'cosmos' || wallet.type === 'like')
-                    ? wallet.address.replace(/(did:|:)/g, '')
-                    : wallet.address.split(`did:${wallet.type}:`).join('') | ellipsis
-                }}
-              </Button>
+                {{ metadata.url }}
+              </Link>
             </FormField>
-          </Card>
-        </Dialog>
-        <Snackbar
-          v-model="isOpenCopiedAlert"
-          :text="$t('iscn.meta.stakeholders.wallet.copied')"
-          preset="success"
-          :timeout="2000"
-        >
-          <template #prepend>
-            <IconDone />
-          </template>
-        </Snackbar>
+            <FormField
+              v-if="metadata.usageInfo"
+              :label="$t('iscn.meta.usage.info')"
+              class="mb-[12px]"
+            >
+              <Link
+                v-if="isUsageInfoUrl"
+                :class="[
+                  'text-[14px]',
+                  'break-all',
+                ]"
+                ugc="true"
+                :href="metadata.usageInfo"
+              >
+                {{ metadata.usageInfo }}
+              </Link>
+              <div v-else>
+                {{ metadata.usageInfo }}
+              </div>
+            </FormField>
+            <Button
+              class="w-min"
+              preset="outline"
+              tag="a"
+              text-preset="h5"
+              type="button"
+              content-class="font-medium ml-[-4px]"
+              prepend-class="font-bold"
+              :href="rawDataURL"
+            >
+              <template #prepend>
+                <IconInfo />
+              </template>
+              {{ $t('iscn.meta.rawData') }}
+            </Button>
+          </InfoCard>
+          <!-- Dialog -->
+          <Dialog
+            v-model="isOpenAuthorDialog"
+            :has-padding="false"
+            preset="custom"
+          >
+            <Card class="flex flex-col w-[616px]">
+              <Label
+                class="w-min mb-[16px]"
+                :text="$t('iscn.meta.stakeholders')"
+                tag="div"
+                preset="p5"
+                valign="middle"
+                content-class="font-semibold whitespace-nowrap text-like-green"
+                prepend-class="text-like-green"
+              >
+                <template #prepend>
+                  <IconMetadata />
+                </template>
+              </Label>
+              <!-- name -->
+              <div class="flex flex-row items-center justify-between flex-nowrap">
+                <FormField
+                  v-if="stakeholderInfo.authorName"
+                  content-type="strong"
+                  :label="$t('iscn.meta.creator.name')"
+                  class="w-[50%] my-[12px]"
+                >
+                  <Link
+                    :class="'text-[16px] cursor-pointer'"
+                    :to="localeLocation({ name: 'search-keyword', query: { stakeholder_name: stakeholderInfo.authorName }})"
+                  >
+                    {{ stakeholderInfo.authorName }}
+                  </Link>
+                </FormField>
+                <FormField
+                  v-if="stakeholderInfo.likerId"
+                  :label="$t('iscn.meta.stakeholders.likerId')"
+                  class="w-[50%] my-[12px] cursor-pointer"
+                >
+                  <Link :to="localeLocation({ name: 'search-keyword', query: { stakeholder_id: stakeholderInfo.likerId } })">{{
+                    stakeholderInfo.likerId
+                  }}</Link>
+                </FormField>
+              </div>
+              <FormField
+                v-if="stakeholderInfo.authorDescription"
+                :label="$t('iscn.meta.stakeholders.description')"
+                class="w-[50%] my-[12px]"
+              >
+                <Label
+                  :text="stakeholderInfo.authorDescription"
+                  tag="div"
+                  preset="p5"
+                />
+              </FormField>
+              <Divider
+                v-if="stakeholderInfo.authorUrls.length"
+                class="my-[12px]"
+              />
+              <!-- url -->
+              <FormField
+                v-if="stakeholderInfo.authorUrls.length"
+                :label="$t('iscn.meta.stakeholders.url')"
+              >
+                <Link
+                  v-for="url in stakeholderInfo.authorUrls"
+                  :key="url"
+                  :href="url"
+                  class="break-all"
+                  :ugc="true"
+                  >{{ url }}</Link
+                >
+              </FormField>
+              <Divider
+                v-if="stakeholderInfo.authorWalletAddresses.length"
+                class="my-[12px]"
+              />
+              <!-- wallet address -->
+              <FormField
+                v-if="stakeholderInfo.authorWalletAddresses.length"
+                :label="$t('iscn.meta.stakeholders.wallet')"
+                content-classes="flex flex-row"
+              >
+                <Button
+                  v-for="wallet in stakeholderInfo.authorWalletAddresses"
+                  :key="wallet.address"
+                  class="mr-[8px] mb-[4px]"
+                  size="mini"
+                  preset="tertiary"
+                  tag="div"
+                  text-preset="h6"
+                  type="button"
+                  content-class="font-medium ml-[-4px]"
+                  prepend-class="font-bold"
+                  @click="handleCopyAddress(wallet.address, wallet.type)"
+                >
+                  <IconCoin
+                    class="mr-[4px]"
+                    :type="wallet.type"
+                  />
+                  {{
+                    (wallet.type === 'cosmos' || wallet.type === 'like')
+                      ? wallet.address.replace(/(did:|:)/g, '')
+                      : wallet.address.split(`did:${wallet.type}:`).join('') | ellipsis
+                  }}
+                </Button>
+              </FormField>
+            </Card>
+          </Dialog>
+          <Snackbar
+            v-model="isOpenCopiedAlert"
+            :text="$t('iscn.meta.stakeholders.wallet.copied')"
+            preset="success"
+            :timeout="2000"
+          >
+            <template #prepend>
+              <IconDone />
+            </template>
+          </Snackbar>
+        </div>
       </div>
-    </div>
+    </ClientOnly>
   </Page>
 </template>