Merge pull request #596 from chris-saburo/452-tutorial-link

Add link tutorials

Author: yangwao

src/components/Navbar.vue

@@ -63,6 +63,11 @@
             {{ $t('Settings') }}
           </b-navbar-item>
       </b-navbar-dropdown>
+      <b-navbar-item
+        tag='router-link'
+        :to="{ name: 'tutorials'}">
+        {{ $t('Tutorial') }}
+      </b-navbar-item>
     </template>
     <template v-slot:end>
       <LocaleChanger />

src/components/landing/Tutorials.vue

@@ -12,30 +12,36 @@
                   </span>
                 </h2>
                 <div class="is-flex-inline is-align-items-start is-flex-direction-column">
-                  <router-link :to="{name: 'createAccount'}">
+                  <!-- <router-link :to="{name: 'createAccount'}"> -->
+                  <a target="_blank" href="https://www.youtube.com/watch?v=iG8iQrONnYo">
                     <b-button
                       type="is-primary"
                       class="mb-6"
                     >
-                      1. Create polkadot js account
+                      {{ $t("tutorial.create") }}
                     </b-button>
-                  </router-link>
-                  <router-link :to="{name: 'createAccount'}">
+                  </a>
+                  <!-- </router-link> -->
+                  <!-- <router-link :to="{name: 'createAccount'}"> -->
+                  <a target="_blank" href="https://www.youtube.com/watch?v=cYaZWDzU1Yc">
                     <b-button
                       type="is-primary"
                       class="mb-6"
                     >
-                      2. Get KSM
+                      {{ $t("tutorial.ksm") }}
                     </b-button>
-                  </router-link>
-                  <router-link :to="{name: 'createAccount'}">
+                  </a>
+                  <!-- </router-link> -->
+                  <!-- <router-link :to="{name: 'createAccount'}"> -->
+                  <a target="_blank" href="https://www.youtube.com/watch?v=pPsbQyJRGVQ">
                     <b-button
                       type="is-primary"
                       class="mb-6"
                     >
-                      3. Minting
+                      {{ $t("tutorial.mint") }}
                     </b-button>
-                  </router-link>
+                  </a>
+                  <!-- </router-link> -->
                 </div>
               </div>
             </div>
@@ -46,13 +52,10 @@
   </div>
 </template>
 <script lang="ts" >
-import { Component, Vue } from 'vue-property-decorator';
-
+import { Component, Vue } from "vue-property-decorator";
 
 @Component<Tutorials>({
-  components: {}
+	components: {},
 })
-export default class Tutorials extends Vue {
-
-}
+export default class Tutorials extends Vue {}
 </script>

src/locales/en.json

@@ -27,20 +27,13 @@
   "computed id": "Computed id",
   "content": "Content",
   "create collection": "Create Collection",
-  "Owner address of minted art":
-    "Owner address of minted art",
-  "Name you want to show in gallery view":
-    "Name you want to show in gallery view",
-  "Symbol you want to trade it under":
-    "Symbol you want to trade it under",
-  "Describe your collection, it will show under collection view":
-    "Describe your collection, it will show under collection view",
-  "Add collection cover which will show up at collection view":
-    "Add collection cover which will show up at collection view",
-  "Select collection where do you want mint your token":
-    "Select collection where do you want mint your token",
-  "Maximum NFTs in collection":
-    "Maximum NFTs in collection",
+  "Owner address of minted art": "Owner address of minted art",
+  "Name you want to show in gallery view": "Name you want to show in gallery view",
+  "Symbol you want to trade it under": "Symbol you want to trade it under",
+  "Describe your collection, it will show under collection view": "Describe your collection, it will show under collection view",
+  "Add collection cover which will show up at collection view": "Add collection cover which will show up at collection view",
+  "Select collection where do you want mint your token": "Select collection where do you want mint your token",
+  "Maximum NFTs in collection": "Maximum NFTs in collection",
   "Account": "Account",
   "Name": "Name",
   "Symbol": "Symbol (Short name)",
@@ -52,8 +45,7 @@
   "Transferable is by default": "Transferable is by default",
   "Serial Number": "Serial Number",
   "Name of your token": "Name of your token",
-  "Instance_tooltip":
-    "Instance is like the identifier of an NFT, like a marketplace ticker. It's a \"short computer-friendly name\"",
+  "Instance_tooltip": "Instance is like the identifier of an NFT, like a marketplace ticker. It's a \"short computer-friendly name\"",
   "Upload will upload your image of the NFT": "Upload will upload your image of the NFT",
   "Click to add image": "Click to add image",
   "Add Animated File": "Add Animated File",
@@ -172,7 +164,7 @@
     "uploadYes": "Upload NFT image to Arweave",
     "uploadNo": "Do not use Arweave"
   },
-  "termOfService" : {
+  "termOfService": {
     "accept": "I confirm that I hold full copyright ownership of the submitted digital asset (or have sufficient permission by the owner to use the asset)"
   },
   "profile": {
@@ -190,5 +182,10 @@
     "collectors": "Collectors",
     "score": "Score",
     "empty": "Empty"
+  },
+  "tutorial": {
+    "create": "1. Create polkadot js account",
+    "ksm": "2. Get KSM",
+    "mint": "3. Minting"
   }
-}
+}