3D is working, added AR, optimized price chart bundle, markdown enabled for collections

CONTRIBUTING.md

@@ -39,6 +39,10 @@ During writing this, usual structure is per label on issue is
 
 You can [check recent labels](https://github.com/kodadot/nft-gallery/labels) 
 
+## Hiring process
+
+After you've completed few PRs, which we're merged to the upstream, you will be eglible to join our closer team. We are happy to give you **one-two long-term tasks** to see how good is your talent on complicated, complex and more difficult issue. Process behind is to see if we click together as part of team in long-run. We are curious on your character, acting and helping out others if they have issue. From this phase we can guarantee you payroll, that we will private discuss based on your location, skillset, past experience and code quality delivered.
+
 # Learn more about contributing: 
 
 ## Types of contributions 📝

package.json

@@ -4,12 +4,13 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "netlify-lambda build src-functions && vue-cli-service build",
+    "build": "netlify-lambda build src-functions && vue-cli-service build --report",
     "lint": "vue-cli-service lint",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
     "lambda": "netlify-lambda serve src-functions",
     "start": "vue-cli-service serve",
-    "sitemap": "vue-cli-service sitemap"
+    "sitemap": "vue-cli-service sitemap",
+    "build:report": "vue-cli-service build --report"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -20,7 +21,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
-    "@google/model-viewer": "^1.7.2",
+    "@google/model-viewer": "^1.8.0",
     "@polkadot/extension-dapp": "^0.40.3",
     "@polkadot/types": "6.0.5",
     "@polkadot/types-known": "6.0.5",
@@ -36,15 +37,14 @@
     "@vue-polkadot/vue-settings": "^0.0.19",
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
-    "buefy": "^0.9.8",
-    "echarts": "^5.1.2",
+    "buefy": "^0.9.10",
+    "echarts": "^5.2.1",
     "emoji-unicode": "^2.0.1",
     "file-saver": "^2.0.5",
     "freezeframe": "^5.0.2",
     "graphql": "^15.5.0",
     "idb-keyval": "^5.0.6",
     "lazysizes": "^5.3.2",
-    "markdown-it-vue": "^1.1.6",
     "mingo": "^4.1.2",
     "register-service-worker": "^1.7.2",
     "setimmediate": "^1.0.5",
@@ -57,6 +57,7 @@
     "vue-cli-plugin-sitemap": "^2.3.0",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.24.4",
+    "vue-markdown-render": "^1.1.3",
     "vue-meta": "^2.4.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.1",
@@ -69,6 +70,7 @@
     "@babel/helper-regex": "^7.10.5",
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@intlify/vue-i18n-loader": "^1.0.0",
+    "@types/markdown-it": "^12.2.1",
     "@types/webpack": "^4.4.0",
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-pwa": "^4.5.11",

src/components/rmrk/Gallery/CollectionItem.vue

@@ -37,9 +37,7 @@
 
     <div class="columns is-centered">
       <div class="column is-8 has-text-centered">
-        <p class="content">
-          {{ description }}
-        </p>
+        <VueMarkdown :source="description" />
       </div>
     </div>
 
@@ -62,6 +60,7 @@ const components = {
   CollectionActivity: () => import('@/components/rmrk/Gallery/CollectionActivity.vue'),
   Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
   ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
+  VueMarkdown: () => import('vue-markdown-render')
 };
 @Component<CollectionItem>({
   metaInfo() {

src/components/rmrk/Gallery/GalleryItem.vue

@@ -25,6 +25,7 @@
                     src-fallback="/placeholder.svg'"
                     alt="KodaDot NFT minted multimedia"
                     ratio="1by1"
+                    @error="onImageError"
                   ></b-image>
                   <img class="fullscreen-image" :src="meta.image || '/placeholder.svg'" alt="KodaDot NFT minted multimedia">
                   <b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
@@ -55,9 +56,7 @@
 
           <div v-if="meta.description" class="block">
             <p class="label">{{ $t('legend')}}</p>
-            <p v-if="!isLoading" class="subtitle is-size-5">
-              {{ meta.description }}
-            </p>
+            <VueMarkdown v-if="!isLoading" class="is-size-5" :source="meta.description" />
             <b-skeleton :count="3" size="is-large" :active="isLoading"></b-skeleton>
           </div>
 
@@ -118,8 +117,6 @@
 
 <script lang="ts" >
 import { Component, Vue } from 'vue-property-decorator';
-// import MarkdownItVueLight from 'markdown-it-vue';
-import 'markdown-it-vue/dist/markdown-it-vue-light.css'
 import { NFT, NFTMetadata, Emote } from '../service/scheme';
 import { sanitizeIpfsUrl, resolveMedia, isIpfsUrl, sanitizeArweaveUrl, getSanitizer } from '../utils';
 import { emptyObject } from '@/utils/empty';
@@ -130,6 +127,7 @@ import { notificationTypes, showNotification } from '@/utils/notification';
 // import/ Sharing from '@/components/rmrk/Gallery/Item/Sharing.vue';
 // import Facts from '@/components/rmrk/Gallery/Item/Facts.vue';
 // import Name from '@/components/rmrk/Gallery/Item/Name.vue';
+// import VueMarkdown from 'vue-markdown-render'
 
 import isShareMode from '@/utils/isShareMode';
 import nftById from '@/queries/nftById.graphql';
@@ -171,7 +169,8 @@ import { exist } from './Search/exist';
     MediaResolver: () => import('../Media/MediaResolver.vue'),
     // PackSaver: () => import('../Pack/PackSaver.vue'),
     BaseCommentSection: () => import('@/components/subsocial/BaseCommentSection.vue'),
-    IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue')
+    IndexerGuard: () => import('@/components/shared/wrapper/IndexerGuard.vue'),
+    VueMarkdown: () => import('vue-markdown-render')
   }
 })
 export default class GalleryItem extends Vue {
@@ -243,7 +242,7 @@ export default class GalleryItem extends Vue {
       this.meta = {
         ...meta,
         image: imageSanitizer(meta.image),
-        animation_url: sanitizeIpfsUrl(meta.animation_url || '', 'pinata')
+        animation_url: sanitizeIpfsUrl(meta.animation_url || meta.image, 'pinata')
       }
 
       // console.log(this.meta)

src/components/rmrk/Gallery/PriceChart.vue

@@ -10,7 +10,19 @@
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 
-import * as ECharts from 'echarts';
+import * as ECharts from 'echarts/core';
+import { GridComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { TooltipComponent } from 'echarts/components';
+
+ECharts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TooltipComponent]);
+
+// type EChartsOption = ECharts.ComposeOption<
+//   GridComponentOption | LineSeriesOption
+// >;
+
 
 const components = {
 	// chart: () => ECharts,

src/components/rmrk/Media/ModelMedia.vue

@@ -5,8 +5,13 @@
       :src="src"
       auto-rotate
       camera-controls
+      ar
+      ar-modes="webxr scene-viewer quick-look"
       shadow-intensity="1"
     >
+    <button slot="ar-button" id="ar-button">
+      Activate AR
+    </button>
     </model-viewer>
   </div>
 </template>

src/components/shared/ReadOnlyBalanceInput.vue

@@ -15,19 +15,12 @@
 
 <script lang="ts" >
 import { Component, Prop, Emit, Mixins } from 'vue-property-decorator';
-import Balance from '@/params/components/Balance.vue';
 import { units as defaultUnits } from '@/params/constants';
 import { Unit } from '@/params/types';
 import { Debounce } from 'vue-debounce-decorator';
 import ChainMixin from '@/utils/mixins/chainMixin';
 
-const components = { Balance };
-
-type BalanceType = {
-  balance: number;
-};
-
-@Component({ components })
+@Component
 export default class ReadOnlyBalanceInput extends Mixins(ChainMixin) {
   @Prop({ type: [Number, String], default: 0 }) value!: number;
   protected units: Unit[] = defaultUnits;

src/components/transfer/DonationButton.vue

@@ -12,15 +12,15 @@
 
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop } from 'vue-property-decorator';
 @Component({})
 export default class DonationButton extends Vue {
   @Prop() public address!: string;
 
   public goToTransfer() {
     this.$router.push({
       name: 'transfer',
-      query: { target: this.address, usdamount: '10', donation: 'true' },
+      query: { target: this.address, usdamount: '10', donation: 'true' }
     });
   }
 }
@@ -32,4 +32,4 @@ export default class DonationButton extends Vue {
 .donation-btn {
   margin-bottom: 1.5rem;
 }
-</style>
+</style>

src/shims-vue.d.ts

@@ -3,5 +3,3 @@ declare module '*.vue' {
   export default Vue;
 }
 
-declare module 'markdown-it';
-declare module 'markdown-it-vue';

src/views/Profile.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="profile-wrapper container">
-    <div class="columns is-align-items-center">
+    <div class="is-flex is-align-items-center container-mobile">
       <div class="column">
         <div class="columns is-align-items-center">
-          <div class="column title">
+          <div class="column title column-mobile">
             <b-icon pack="fas" icon="ghost"></b-icon>
             <a
               :href="`https://kusama.subscan.io/account/${id}`"
@@ -13,8 +13,10 @@
               <Identity ref="identity" :address="id" inline emit @change="handleIdentity" />
             </a>
           </div>
+          <div class="column-mobile">
             <DonationButton :address="id" />
-          <div class="column">
+          </div>
+          <div class="column column-mobile">
             <OnChainProperty
               v-bind:email="email"
               v-bind:twitter="twitter"
@@ -25,7 +27,7 @@
           </div>
         </div>
       </div>
-      <div class="column is-2 mb-5">
+      <div class="column is-2 mb-5 share-mobile ">
         <Sharing
           v-if="!sharingVisible"
           label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
@@ -358,4 +360,20 @@ export default class Profile extends Vue {
   flex-grow: 0;
   flex-basis: auto;
 }
+
+@media only screen and (max-width: 768px) {
+  .column-mobile {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .container-mobile {
+    flex-direction: column;
+  }
+
+  .share-mobile {
+    width: 100%;
+  }
+}
 </style>