Itsacoyote quick fixes

app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/types';
+
 provideHeadlessUseId(() => useId());
 const { seo } = useAppConfig();
 
@@ -31,13 +33,18 @@ useSeoMeta({
 });
 
 defineOgImageComponent('OgImageZK');
+
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
+  default: () => [],
+  server: false,
+});
 </script>
 
 <template>
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent />
+    <HeaderComponent :search="true" />
 
     <UMain>
       <NuxtLayout>
@@ -47,6 +54,13 @@ defineOgImageComponent('OgImageZK');
 
     <FooterComponent />
 
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation || []"
+      />
+    </ClientOnly>
+
     <UNotifications />
   </div>
 </template>

content/tutorials/cross-chain-governance/_dir.yml

@@ -1,8 +1,10 @@
 title: Cross-chain governance
+featured: true
 authors:
   - name: MatterLabs
     url: https://matter-labs.io
-    avatar: https://avatars.githubusercontent.com/u/42489169?s=200&v=4
+    avatar:
+      src: https://avatars.githubusercontent.com/u/42489169?s=200&v=4
 github_repo: https://github.com/zkSync-Community-Hub
 tags:
   - smart contracts

content/tutorials/daily-spend-limit-account/_dir.yml

@@ -1,4 +1,5 @@
 title: Native spend limit smart account
+featured: true
 authors:
   - name: porco-rosso
     url: https://linktr.ee/porcorossoj
@@ -22,4 +23,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:

content/tutorials/dapp-nft-paymaster/_dir.yml

@@ -23,4 +23,3 @@ tools:
   - zksync-ethers
   - Hardhat
   - react
-related_tutorials:

content/tutorials/erc20-paymaster/_dir.yml

@@ -1,4 +1,5 @@
 title: Build an ERC20 custom paymaster
+featured: true
 authors:
   - name: MatterLabs
     url: https://matter-labs.io
@@ -23,5 +24,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial

content/tutorials/frontend-paymaster/_dir.yml

@@ -21,5 +21,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial

content/tutorials/guide-dipdup-indexer/_dir.yml

@@ -1,4 +1,5 @@
 title: Create an indexer with DipDup
+featured: true
 authors:
   - name: DipDup
     url: https://dipdup.io
@@ -18,5 +19,3 @@ updated: 2024-05-09
 tools:
   - DipDup
   - Python
-related_tutorials:
-  - /tutorials/another-tutorial

content/tutorials/guide-subquery/_dir.yml

@@ -19,5 +19,3 @@ updated: 2024-05-09
 tools:
   - SubQuery
   - GraphQL
-related_tutorials:
-  - /tutorials/another-tutorial

content/tutorials/guide-the-graph/_dir.yml

@@ -19,5 +19,3 @@ updated: 2024-05-09
 tools:
   - theGraph
   - GraphQL
-related_tutorials:
-  - /tutorials/another-tutorial

content/tutorials/guide-viem/_dir.yml

@@ -1,4 +1,5 @@
 title: Using viem with zkSync
+featured: true
 authors:
   - name: MatterLabs
     url: https://matter-labs.io
@@ -18,5 +19,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - viem
-related_tutorials:
-  - /tutorials/another-tutorial

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

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

content/tutorials/guide-web3js/_dir.yml

@@ -1,4 +1,5 @@
 title: Using web3.js to interact with zkSync
+featured: true
 authors:
   - name: ChainSafe
     url: https://web3js.org/
@@ -16,5 +17,3 @@ what_you_will_learn:
 updated: 2024-05-09
 tools:
   - web3.js
-related_tutorials:
-  - /tutorials/another-tutorial

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

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

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

content/tutorials/how-to-send-l2-l1-message/_dir.yml

@@ -18,5 +18,3 @@ updated: 2024-05-09
 tools:
   - zksync-ethers
   - zksync-contracts
-related_tutorials:
-  - /tutorials/another-tutorial

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

content/tutorials/how-to-verify-contracts/_dir.yml

@@ -18,5 +18,3 @@ updated: 2024-05-09
 tools:
   - hardhat-zksync-deploy
   - hardhat-zksync-verify
-related_tutorials:
-  - /tutorials/another-tutorial

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

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

content/tutorials/native-aa-multisig/_dir.yml

@@ -22,5 +22,3 @@ tools:
   - zksync-cli
   - zksync-ethers
   - Hardhat
-related_tutorials:
-  - /tutorials/another-tutorial

error.vue

@@ -31,7 +31,7 @@ provide('navigation', navigation);
 
 <template>
   <div>
-    <HeaderComponent :links="[]" />
+    <HeaderComponent :search="true" />
 
     <UMain>
       <UContainer>

nuxt.config.ts

@@ -13,7 +13,20 @@ 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: {
+    '/api/search.json': { prerender: true },
+  },
 });

pages/index.vue

@@ -8,7 +8,7 @@ const navigation = inject<Ref<NavItem[]>>('navigation');
 const guides = computed(() => {
   const tutorialPath = navigation?.value.find((item) => item._path === '/tutorials') ?? { children: [] };
 
-  return tutorialPath.children;
+  return tutorialPath.children?.filter((tutorial) => tutorial.featured);
 });
 
 useSeoMeta({
@@ -33,6 +33,7 @@ useSeoMeta({
           size: 'xl',
         },
       ]"
+      :ui="{ description: 'backdrop-blur bg-background/65' }"
     >
       <template #headline>
         <NuxtImg
@@ -43,37 +44,25 @@ useSeoMeta({
       </template>
 
       <UPageGrid>
-        <SiteLink
+        <ULandingCard
           v-for="(guide, index) of guides"
           :key="index"
           :to="guide._path"
-          class="hover:border-zkPurple-300 rounded-lg border-2 border-transparent transition-colors duration-200 ease-in-out"
+          :title="guide.title"
+          :description="guide.summary"
+          :ui="{ body: { base: 'justify-between' } }"
         >
-          <UCard>
-            <span class="mb-4 inline-block text-lg font-semibold">
-              {{ guide.title }}
-            </span>
-
-            <p>{{ guide.summary }}</p>
-
-            <AuthorsList
-              class="my-4"
-              :authors="guide.authors"
+          <div class="mt-auto">
+            <AuthorsList :authors="guide.authors" />
+            <UBadge
+              :label="guide.tags.join(', ')"
+              color="blue"
+              size="sm"
+              variant="subtle"
+              class="mb-2 mr-2"
             />
-
-            <div class="mt-4">
-              <UBadge
-                v-for="tag in guide.tags"
-                :key="tag"
-                :label="tag"
-                color="blue"
-                size="sm"
-                variant="subtle"
-                class="mb-2 mr-2"
-              />
-            </div>
-          </UCard>
-        </SiteLink>
+          </div>
+        </ULandingCard>
       </UPageGrid>
     </ULandingSection>
   </div>