feat: add filtering (#97)

- adds filtering to the page showing all of the tutorials
- updates to the tags to clean up the filters

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

@@ -7,8 +7,7 @@ authors:
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
-  - L1-L2
-  - tutorial
+  - cross-chain
 summary: Build and deploy a smart contract in L1 and send transactions that update the state of a contract in ZKsync.
 description:
   In this tutorial we'll deploy a simple smart contract in ZKsync. Then we'll deploy another smart contract in L1 and

content/tutorials/custom-zk-chain/_dir.yml

@@ -7,8 +7,6 @@ authors:
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - elastic chain
-  - zk chain
-  - tutorial
 summary: Create, customize, and run your first ZK chain locally.
 description:
   In this tutorial, you will get familiar with the ZK Inception CLI. You will create a local Elastic Chain ecosystem and

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

@@ -8,7 +8,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - account abstraction
   - smart contracts
-  - tutorial
 summary: Build a native smart contract account that has a daily spend limit.
 description:
   This tutorial will guide you through the process of building a smart contract account that has a daily spend limit.

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

@@ -8,8 +8,7 @@ tags:
   - paymaster
   - frontend
   - next.js
-  - tutorial
-  - ERC721
+  - erc721
 summary: Build a frontend that allows users to interact smart contracts with zero transaction fees wif they hold an NFT.
 description:
   This tutorial will guide you through the process of building a frontend that interacts with smart contracts on ZKsync.

content/tutorials/erc20-paymaster/_dir.yml

@@ -9,7 +9,7 @@ tags:
   - account abstraction
   - paymaster
   - smart contracts
-  - tutorial
+  - erc20
 summary: Build a paymaster that accepts any ERC20 token in exchange for transaction fees.
 description:
   This tutorial will guide you through the process of building a paymaster that accepts a fixed amount of any ERC20

content/tutorials/foundry-era-test-node/_dir.yml

@@ -10,7 +10,6 @@ tags:
   - foundry
   - cast
   - uniswap
-  - tutorial
 summary: Set up a local ZKsync Era environment and perform token swaps using Foundry.
 description: |
   In this tutorial, you will set up a local ZKsync Era environment using era_test_node, leverage Foundry's cast tool to interact with contracts, and perform token swaps on Uniswap. You will learn how to check balances, deposit ETH for WETH, transfer WETH, and swap tokens using Uniswap's Swap Router.

content/tutorials/frontend-paymaster/_dir.yml

@@ -8,7 +8,6 @@ tags:
   - paymaster
   - frontend
   - vue.js
-  - tutorial
 summary: Build a frontend that allows users to interact smart contracts paying fees with ERC20 tokens on ZKsync.
 description:
   This tutorial will guide you through the process of building a frontend that interacts with smart contracts on ZKsync.

content/tutorials/guide-subquery/_dir.yml

@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/subquery
 tags:
   - guide
-  - SubQuery
+  - subquery
 summary: This page will guide you through the steps to index smart contract events using SubQuery.
 description:
   This guide outlines the process of indexing all transfers and approval events from the Wrapped ETH on ZKsync Era

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

@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/graphprotocol
 tags:
   - guide
-  - theGraph
+  - the graph
 summary: This page will guide you through the steps to index smart contract data using theGraph.
 description:
   This guide outlines the process of indexing all transfers and approval events from the Wrapped ETH on ZKsync Era

content/tutorials/guide-walletconnect/_dir.yml

@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/matter-labs
 tags:
   - guide
-  - WalletConnect
+  - walletconnect
 summary: Learn how to use WalletConnect to create React apps that interact with contracts on ZKsync.
 description:
   This guide outlines how to use WalletConnect and Web3Modal to create React apps that interact with contracts on ZKsync

content/tutorials/guide-web3js/_dir.yml

@@ -7,7 +7,7 @@ authors:
 github_repo: https://github.com/ChainSafe
 tags:
   - guide
-  - Web3.js
+  - web3.js
 summary:
   This guide will teach you how to set up and use Web3.js to interact with ZKsync, leveraging the ZKsync Web3.js plugin.
 description:

content/tutorials/how-to-deposit-erc20/_dir.yml

@@ -8,6 +8,7 @@ tags:
   - hardhat
   - how-to
   - erc20
+  - cross-chain
 summary: Learn how to deposit ERC20 tokens ZKsync.
 description: This how-to guide explains how to create a script that deposits any ERC20 token to ZKsync.
 what_you_will_learn:

content/tutorials/how-to-deposit-eth/_dir.yml

@@ -7,7 +7,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - hardhat
   - how-to
-  - Ether
 summary: Learn how to deposit Ether to ZKsync.
 description: This how-to guide explains how to create a script that deposits Ether to ZKsync.
 what_you_will_learn:

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

@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
   - how-to
-  - L2-L1 communication
+  - cross-chain
 summary: Learn how to send a transaction from Ethereum that to ZKsync
 description:
   This how-to guide explains how to send a transaction from Ethereum that interacts with a contract deployed on ZKsync.

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

@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
   - how-to
-  - L2-L1 communication
+  - cross-chain
 summary: Learn how to send a message from ZKsync to Ethereum L1.
 description: This how-to guide explains how to send an arbitrary message from ZKsync to Ethereum L1.
 what_you_will_learn:

content/tutorials/how-to-withdraw-eth/_dir.yml

@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - hardhat
   - how-to
-  - Ether
+  - cross-chain
 summary: Learn how to withdraw Ether from ZKsync.
 description: This how-to guide explains how to create a script that withdraws Ether from ZKsync.
 what_you_will_learn:

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

@@ -7,7 +7,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - account abstraction
   - smart contracts
-  - tutorial
 summary: Build a native smart contract account that requires multiple signatures.
 description:
   This tutorial will guide you through the process of building a smart contract account that requires two ECDSA

content/tutorials/permissionless-paymaster/_dir.yml

@@ -7,9 +7,7 @@ authors:
 github_repo: https://github.com/ondefy/permissionless-multisigner-paymaster
 tags:
   - paymaster
-  - gas sponsorship
-  - tutorial
-  - eip-712
+  - account abstraction
 summary:
   Integrate Zyfi's signature based permissionless multi-signer paymaster in your Dapp to sponsor gas funds for your
   users.

content/tutorials/signing-transactions-with-webauthn/_dir.yml

@@ -6,8 +6,11 @@ authors:
     avatar: https://avatars.githubusercontent.com/u/58856580?v=4
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
-  - webauthn
   - account abstraction
+  - paymaster
+  - smart contracts
+  - frontend
+  - next.js
 summary: Learn how to use WebAuthn to sign transactions for smart accounts.
 description: In this tutorial, you will learn how to use WebAuthn to sign transactions for smart accounts.
 what_you_will_learn:

pages/tutorials/index.vue

@@ -1,12 +1,42 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/types';
 
-const navigation = inject<Ref<NavItem[]>>('navigation');
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
 
-const guides = computed(() => {
-  const tutorialPath = navigation?.value.find((item) => item._path === '/tutorials') ?? { children: [] };
+interface Guide {
+  title: string;
+  description: string;
+  _path: string;
+  tags: string[];
+  authors: Array<{ name: string; url: string; avatar: string }>;
+}
 
-  return tutorialPath.children;
+const guides = computed<Guide[]>(() => {
+  const tutorialPath = navigation.value.find((item) => item._path === '/tutorials');
+  return tutorialPath?.children || [];
+});
+
+const allTags = computed(() => {
+  return guides.value.reduce<string[]>((acc, guide) => {
+    return acc.concat(guide.tags || []);
+  }, []);
+});
+
+const uniqueTags = computed(() => [...new Set(allTags.value)]);
+
+const activeTag = ref(uniqueTags.value[0] || '');
+const isExpanded = ref(false);
+const defaultCount = 6;
+
+const visibleTags = computed(() => {
+  return isExpanded.value ? uniqueTags.value : uniqueTags.value.slice(0, defaultCount);
+});
+
+const showToggleButton = computed(() => uniqueTags.value.length > defaultCount);
+
+const filteredGuides = computed(() => {
+  if (!activeTag.value) return guides.value;
+  return guides.value.filter((guide) => guide.tags?.includes(activeTag.value));
 });
 </script>
 
@@ -20,9 +50,32 @@ const guides = computed(() => {
           icon="i-zkicon-zksync"
         />
 
+        <div class="mb-4 mt-4 flex flex-wrap gap-1">
+          <UBadge
+            v-for="tag in visibleTags"
+            :key="tag"
+            :label="tag"
+            color="blue"
+            size="sm"
+            :variant="activeTag === tag ? 'solid' : 'subtle'"
+            class="cursor-pointer p-2"
+            @click="activeTag = tag === activeTag ? '' : tag"
+          />
+
+          <UButton
+            v-if="showToggleButton"
+            size="xs"
+            variant="ghost"
+            :ui="{ rounded: 'rounded' }"
+            @click="isExpanded = !isExpanded"
+          >
+            {{ isExpanded ? 'Show Less' : 'Show More' }}
+          </UButton>
+        </div>
+
         <ULandingCard
-          v-for="(guide, index) of guides"
-          :key="index"
+          v-for="guide in filteredGuides"
+          :key="guide._path"
           :title="guide.title"
           :to="guide._path"
           class="mb-4"

tests/configs/signing-txns-with-webauthn.ts

@@ -108,7 +108,8 @@ const frontendPart1Steps: IStepConfig = {
   'init-next-app': {
     action: 'runCommand',
     commandFolder: 'tests-output/zksync-webauthn',
-    preCommand: '<COMMAND> --ts --eslint --src-dir --use-npm --no-app --no-tailwind --import-alias "@/*" frontend',
+    preCommand:
+      '<COMMAND> frontend --ts --no-eslint --no-tailwind --src-dir --import-alias "@/*" --use-npm --skip-git --no-app --yes',
   },
   'wait-for-nextjs-init': {
     action: 'wait',