chore: improve tutorial page design

zkSync-Community-Hub · May 22, 2024 · dae77d3 · dae77d3
1 parent cd2d933
commit dae77d3
Show file tree

Hide file tree

Showing 23 changed files with 59 additions and 76 deletions.
diff --git a/content/tutorials/daily-spend-limit-account/_dir.yml b/content/tutorials/daily-spend-limit-account/_dir.yml
@@ -23,4 +23,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
diff --git a/content/tutorials/dapp-nft-paymaster/_dir.yml b/content/tutorials/dapp-nft-paymaster/_dir.yml
@@ -23,4 +23,3 @@ tools:
   - zksync-ethers
   - Hardhat
   - react
-related_tutorials:
diff --git a/content/tutorials/erc20-paymaster/_dir.yml b/content/tutorials/erc20-paymaster/_dir.yml
@@ -24,5 +24,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/frontend-paymaster/_dir.yml b/content/tutorials/frontend-paymaster/_dir.yml
@@ -21,5 +21,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-dipdup-indexer/_dir.yml b/content/tutorials/guide-dipdup-indexer/_dir.yml
@@ -19,5 +19,3 @@ updated: 2024-05-09
 tools:
   - DipDup
   - Python
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-subquery/_dir.yml b/content/tutorials/guide-subquery/_dir.yml
@@ -19,5 +19,3 @@ updated: 2024-05-09
 tools:
   - SubQuery
   - GraphQL
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-the-graph/_dir.yml b/content/tutorials/guide-the-graph/_dir.yml
@@ -19,5 +19,3 @@ updated: 2024-05-09
 tools:
   - theGraph
   - GraphQL
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-viem/_dir.yml b/content/tutorials/guide-viem/_dir.yml
@@ -19,5 +19,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - viem
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-wagmi/_dir.yml b/content/tutorials/guide-wagmi/_dir.yml
@@ -18,5 +18,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - wagmi
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-walletconnect/_dir.yml b/content/tutorials/guide-walletconnect/_dir.yml
@@ -16,5 +16,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - walletconnect
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/guide-web3js/_dir.yml b/content/tutorials/guide-web3js/_dir.yml
@@ -17,5 +17,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - web3.js
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-deploy-contract/_dir.yml b/content/tutorials/how-to-deploy-contract/_dir.yml
@@ -20,5 +20,3 @@ updated: 2024-05-09
 tools:
   - hardhat-zksync-deploy
   - hardhat-zksync-ethers
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-deposit-erc20/_dir.yml b/content/tutorials/how-to-deposit-erc20/_dir.yml
@@ -16,5 +16,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - zksync-ethers
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-deposit-eth/_dir.yml b/content/tutorials/how-to-deposit-eth/_dir.yml
@@ -16,5 +16,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - zksync-ethers
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-send-l2-l1-message/_dir.yml b/content/tutorials/how-to-send-l2-l1-message/_dir.yml
@@ -18,5 +18,5 @@ updated: 2024-05-09
 tools:
   - zksync-ethers
   - zksync-contracts
-related_tutorials:
+
   - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-test-contracts/_dir.yml b/content/tutorials/how-to-test-contracts/_dir.yml
@@ -17,5 +17,3 @@ updated: 2024-05-09
 tools:
   - zksync-ethers
   - era-test-node
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-verify-contracts/_dir.yml b/content/tutorials/how-to-verify-contracts/_dir.yml
@@ -18,5 +18,5 @@ updated: 2024-05-09
 tools:
   - hardhat-zksync-deploy
   - hardhat-zksync-verify
-related_tutorials:
+
   - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-withdraw-erc20/_dir.yml b/content/tutorials/how-to-withdraw-erc20/_dir.yml
@@ -16,5 +16,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - zksync-ethers
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/how-to-withdraw-eth/_dir.yml b/content/tutorials/how-to-withdraw-eth/_dir.yml
@@ -16,5 +16,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - zksync-ethers
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/content/tutorials/native-aa-multisig/_dir.yml b/content/tutorials/native-aa-multisig/_dir.yml
@@ -22,5 +22,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -13,7 +13,17 @@ export default defineNuxtConfig({
   },
   content: {
     navigation: {
-      fields: ['authors', 'tags', 'summary', 'updated', 'tools', 'featured', 'description'],
+      fields: [
+        'authors',
+        'tags',
+        'summary',
+        'updated',
+        'tools',
+        'featured',
+        'description',
+        'github_repo',
+        'what_you_will_learn',
+      ],
     },
   },
   routeRules: {

diff --git a/pages/index.vue b/pages/index.vue
@@ -33,6 +33,7 @@ useSeoMeta({
           size: 'xl',
         },
       ]"
+      :ui="{ description: 'backdrop-blur bg-background/65' }"
     >
       <template #headline>
         <NuxtImg
@@ -52,14 +53,14 @@ useSeoMeta({
           :ui="{ body: { base: 'justify-between' } }"
         >
           <div class="mt-auto">
+            <AuthorsList :authors="guide.authors" />
             <UBadge
               :label="guide.tags.join(', ')"
               color="blue"
               size="sm"
               variant="subtle"
               class="mb-2 mr-2"
             />
-            <AuthorsList :authors="guide.authors" />
           </div>
         </ULandingCard>
       </UPageGrid>

diff --git a/pages/tutorials/[...slug].vue b/pages/tutorials/[...slug].vue
@@ -15,7 +15,6 @@ const metadata = computed(() => {
     .find((item) => item._path === '/tutorials')
     ?.children?.find((item) => item._path === `/tutorials/${route.params.slug[0]}`);
 });
-
 const isIndex = ref(route.params.slug.length < 2);
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
@@ -120,22 +119,25 @@ const communityLinks = [
             <p>
               {{ metadata.description }}
             </p>
-            <h3 class="mt-4 text-xl font-semibold">What you'll learn:</h3>
-            <ul
-              role="list"
-              class="list-inside list-disc"
-            >
-              <li
-                v-for="item in metadata.what_you_will_learn"
-                :key="item"
+            <template v-if="metadata.what_you_will_learn">
+              <h3 class="mt-4 text-xl font-semibold">What you'll learn:</h3>
+              <ul
+                role="list"
+                class="mt-2 list-inside list-disc space-y-1"
               >
-                {{ item }}
-              </li>
-            </ul>
+                <li
+                  v-for="item in metadata.what_you_will_learn"
+                  :key="item"
+                >
+                  {{ item }}
+                </li>
+              </ul>
+            </template>
           </div>
 
           <div class="col-span-3">
             <UButton
+              v-if="metadata.github_repo"
               icon="i-simple-icons-github"
               size="sm"
               color="white"
@@ -145,35 +147,39 @@ const communityLinks = [
               :to="metadata.github_repo"
               :trailing="false"
             />
-            <h3 class="my-2 text-xl font-semibold">Last Updated:</h3>
-            <p>{{ lastUpdated }}</p>
-            <h3 class="my-2 text-xl font-semibold">Tools:</h3>
-            <ul
-              role="list"
-              class="list-inside list-disc"
-            >
-              <li
-                v-for="item in metadata.tools"
-                :key="item"
+            <template v-if="metadata.tools">
+              <h3 class="my-2 text-lg font-semibold">Tools:</h3>
+              <ul
+                role="list"
+                class="list-inside list-none"
               >
-                {{ item }}
-              </li>
-            </ul>
-            <h3 class="my-2 text-xl font-semibold">Tags:</h3>
-            <div class="flex flex-wrap">
-              <UBadge
-                v-for="tag in metadata.tags"
-                :key="tag"
-                :label="tag"
-                color="blue"
-                size="sm"
-                variant="subtle"
-                class="mb-2 mr-2"
-              />
-            </div>
+                <li
+                  v-for="item in metadata.tools"
+                  :key="item"
+                >
+                  - {{ item }}
+                </li>
+              </ul>
+            </template>
+            <template v-if="metadata.tags">
+              <div class="mt-4 flex flex-wrap">
+                <UBadge
+                  v-for="tag in metadata.tags"
+                  :key="tag"
+                  :label="tag"
+                  color="blue"
+                  size="sm"
+                  variant="subtle"
+                  class="mb-2 mr-2"
+                />
+              </div>
+            </template>
+            <template v-if="metadata.updated">
+              <strong class="text-md my-2">Last Updated: </strong>{{ lastUpdated }}
+            </template>
           </div>
         </div>
-        <UDivider icon="i-zksync-logo" />
+        <UDivider icon="i-zksync-zksync-logo" />
       </UPage>
 
       <UPage>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,3 @@ tools: @@
       - zksync-ethers
       - Hardhat
       - react
-    related_tutorials: