feat: add "Share on X" button (#141)

Adds a component button and some tweets to prompt users to share their
accomplishments on X

---------

Co-authored-by: Antonio <tonioufa@gmail.com>

Author: sarahschwartz

components/content/TwitterButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <UButton
+    icon="i-lucide-rocket"
+    size="md"
+    variant="outline"
+    :to="url"
+    target="_blank"
+  >
+    Share on X
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ text: string }>();
+
+const url = `https://x.com/intent/tweet?text=${encodeURIComponent(props.text)}`;
+</script>

content/tutorials/build-a-zk-game/40.building-the-frontend.md

@@ -258,3 +258,5 @@ Once completed, you can open the "High Scores" window to view your new high scor
 
 Ready to build more ZK games?
 You can replace the `game_lib` with any other deterministic game written in Rust!
+
+::twitter-button{text="Just made my first ZK game with @zkSyncDevs"}

content/tutorials/cross-chain-governance/30.cross-chain-transactions.md

@@ -119,3 +119,5 @@ Now, let's call the `increment` method on Layer 2 from Layer 1.
   [documentation](https://docs.zksync.io/zksync-era/sdk/js/ethers).
 - To learn more about the ZKsync hardhat plugins, check out their
   [documentation](https://docs.zksync.io/zksync-era/tooling/hardhat/guides/getting-started).
+
+::twitter-button{text="Just built a crosschain governance contract on @zkSyncDevs"}

content/tutorials/custom-zk-chain/10.index.md

@@ -370,4 +370,6 @@ bun deploy-erc20
 
 Nice - you just deployed a contract to your own local ZKsync Chain!
 
+::twitter-button{text="I ran my own local @zkSyncDevs chain using zkstack CLI"}
+
 Next, let's take a look at customizing a chain.

content/tutorials/custom-zk-chain/20.customizing-your-chain.md

@@ -434,3 +434,5 @@ To restart the docker containers for your ecosystem and run your custom ZKsync C
 1. Initialize the ecosystem with `zkstack ecosystem init --dev`.
 1. Start the chain server with `zkstack server`.
 1. Bridge ERC20 tokens from the L1 to L2.
+
+::twitter-button{text="I made a custom local @zkSyncDevs chain using zkstack CLI"}

content/tutorials/daily-spend-limit-account/10.index.md

@@ -540,3 +540,5 @@ Let's test the `SpendLimit` contract works to make it refuse ETH transfers that
 
 Written by [porco-rosso](https://linktr.ee/porcorossoj) for the GitCoin bounty.
 Updated by Matter Labs.
+
+::twitter-button{text="Deployed my first smart contract account with a daily spending limit on @zkSyncDevs"}

content/tutorials/erc20-paymaster/10.index.md

@@ -348,3 +348,5 @@ As a workaround, try including a specific `gasLimit` value in the transaction.
   [documentation](https://sdk.zksync.io/js/ethers).
 - To learn more about the ZKsync hardhat plugins, check out their
   [documentation](https://docs.zksync.io/build/tooling/hardhat/getting-started).
+
+::twitter-button{text="Just built a paymaster that lets users pay gas with ERC20 tokens on @zkSyncDevs"}

content/tutorials/frontend-paymaster/10.index.md

@@ -437,3 +437,5 @@ Now you should be able to update the greeting message with ETH or any of the ava
 :test-action{actionId="confirm-transaction-2"}
 :test-action{actionId="wait-for-transaction-2"}
 :test-action{actionId="check-for-new-greeting-2"}
+
+::twitter-button{text="Just built a Vue frontend that uses a paymaster on @zkSyncDevs"}

content/tutorials/native-aa-multisig/10.index.md

@@ -483,3 +483,5 @@ so it has enough funds to pay for the transaction fees.
   [documentation](https://sdk.zksync.io/js/ethers).
 - To learn more about the ZKsync hardhat plugins, check out their
   [documentation](https://docs.zksync.io/build/tooling/hardhat/getting-started).
+
+::twitter-button{text="Just built a native multisig smart contract acccount on @zkSyncDevs"}

content/tutorials/paymaster-foundry-guide/30.interacting-cast-paymaster.md

@@ -108,3 +108,5 @@ cast balance 0xd9498989Fada9e78798F696B17Ab6B3b5Fe65FDF --rpc-url anvil-zksync |
 
 🚀 **Build on This** → Now that you’ve successfully deployed and interacted with a Gasless Paymaster,
 consider extending its logic to include **custom validation rules, user whitelisting, or sponsorship models** for transactions!
+
+::twitter-button{text="Just deployed a gasless paymaster contract with Foundry on @zkSyncDevs"}