From 9f21ce3fcc523a74b157eb19c9f447aa1a7b9c6c Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Mon, 5 Aug 2024 16:15:45 -0700
Subject: [PATCH] Add titles to all <a> tags to improve SEO

---
 site/docs/pages/index.mdx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
index 2dfbf614fe..83e9ce8e25 100644
--- a/site/docs/pages/index.mdx
+++ b/site/docs/pages/index.mdx
@@ -99,7 +99,7 @@ bun add @coinbase/onchainkit
 :::
 
     </div>
-      <a href="/getting-started" className="font-sans border rounded-xl border-solid border-indigo-400 text-indigo-400 px-4 py-3 font-bold mt-4">
+      <a href="/getting-started" title="View OnchainKit docs" className="font-sans border rounded-xl border-solid border-indigo-400 text-indigo-400 px-4 py-3 font-bold mt-4">
         View docs
       </a>
     </div>
@@ -118,7 +118,7 @@ bun add @coinbase/onchainkit
 
 <section className="w-[1225px] max-w-full pt-[56px] px-1 md:px-0">
   <main id="identity" className="flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#identity">
+    <a href="#identity" title="Identity Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Identity</h3>
     </a>
   </main>
@@ -126,7 +126,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Display ENS [avatars](/identity/avatar), Attestation [badges](/identity/badge), ENS [names](/identity/name) and account [addresses](/identity/address).
     </p>
-    <a href="/identity/identity" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    <a href="/identity/identity" title="Start with Identity Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Identity
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -166,7 +166,7 @@ bun add @coinbase/onchainkit
 
   </aside>
   <main id="wallet" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#wallet">
+    <a href="#wallet" title="Wallet Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Wallet</h3>
     </a>
   </main>
@@ -174,7 +174,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Create or connect your wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
     </p>
-    <a href="/wallet/wallet" className="mx-auto md:m-0  flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    <a href="/wallet/wallet" title="Start with Wallet Component" className="mx-auto md:m-0  flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Wallet
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -231,7 +231,7 @@ bun add @coinbase/onchainkit
 
 
   <main id="tokens" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#tokens">
+    <a href="#tokens" title="Tokens Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Tokens</h3>
     </a>
   </main>
@@ -240,7 +240,7 @@ bun add @coinbase/onchainkit
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Search [Tokens](/token/types#token) using [getTokens](/token/get-tokens) and display them with [TokenSearch](/token/token-search), [TokenChip](/token/token-chip), and [TokenRow](/token/token-row).
     </p>
-    <a href="/token/token-chip" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    <a href="/token/token-chip" title="Start with Tokens Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Tokens
     </a>
     <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -287,7 +287,7 @@ setFilteredTokens(filteredTokens);
 
 
   <main id="swap" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#swap">
+    <a href="#swap" title="Swap Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Swap</h3>
     </a>
   </main>
@@ -295,7 +295,7 @@ setFilteredTokens(filteredTokens);
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Swap [Tokens](/token/types#token) using the [Swap](/swap/swap) components.
     </p>
-    <a href="/swap/swap" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    <a href="/swap/swap" title="Start with Swap Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Swap
     </a>
     <div className="flex grow flex-col items-center md:flex-row pt-[44px] md:pt-[20px]">
@@ -361,7 +361,7 @@ setFilteredTokens(filteredTokens);
   </aside>
 
 <main id="transaction" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-  <a href="#transaction">
+  <a href="#transaction" title="Transaction Component details">
     <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Transaction</h3>
   </a>
 </main>
@@ -369,7 +369,7 @@ setFilteredTokens(filteredTokens);
   <p className="text-base md:text-base pb-[24px] md:text-left text-center">
     Trigger onchain operations and sponsor them with [Paymaster](https://www.coinbase.com/developer-platform/products/paymaster).
   </p>
-  <a href="/transaction/transaction" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+  <a href="/transaction/transaction" title="Start with Transaction Component" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
     Start with Transaction
   </a>
   <div className="flex grow md:flex-row pt-[44px] flex-col">
@@ -441,7 +441,7 @@ setFilteredTokens(filteredTokens);
 </aside>
 
   <main id="frame" className="pt-[56px] flex flex-col gap-4 md:flex-row md:text-left text-center">
-    <a href="#frame">
+    <a href="#frame" title="Frame Component details">
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Frame</h3>
     </a>
   </main>
@@ -449,7 +449,7 @@ setFilteredTokens(filteredTokens);
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Test, build, and ship your Farcaster frames with [FrameMetadata](/frame/frame-metadata).
     </p>
-    <a href="/frame/frame-metadata" className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
+    <a href="/frame/frame-metadata" title="Start with Frame Component"  className="mx-auto md:m-0 flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[210px]">
       Start with Frame
     </a>
     <div className="flex grow flex-col items-center md:flex-row pt-[44px]">
@@ -558,7 +558,7 @@ setFilteredTokens(filteredTokens);
           <p className="leading-7 text-xl text-gray-400 px-0 py-6 max-w-[500px] md:text-left text-center">
             Build your onchain apps with ready-to-use React components and Typescript utilities.
           </p>
-          <a href="/getting-started" className="alternate-button mx-auto md:mx-0 flex justify-center items-center bg-indigo-600 text-[white] font-bold leading-6 px-4 py-3 rounded-xl w-[180px]">
+          <a href="/getting-started" title="Get started with OnchainKit" className="alternate-button mx-auto md:mx-0 flex justify-center items-center bg-indigo-600 text-[white] font-bold leading-6 px-4 py-3 rounded-xl w-[180px]">
             Get started
           </a>
         </div>
@@ -571,22 +571,22 @@ setFilteredTokens(filteredTokens);
           <li>[Figma](https://www.figma.com/community/file/1370194397345450683/onchainkit)</li>
         </ul>
         <ul className="social-icons-list flex space-x-[28px]">
-          <a href="https://github.com/coinbase/onchainkit" target="_blank">
+          <a href="https://github.com/coinbase/onchainkit" title="View OnchainKit Github" target="_blank">
             <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fillRule="evenodd" clipRule="evenodd" d="M10.0719 0.19519C4.83504 0.19519 0.601562 4.45988 0.601562 9.73589C0.601562 13.9533 3.3141 17.5232 7.07711 18.7867C7.54758 18.8817 7.71991 18.5814 7.71991 18.3289C7.71991 18.1077 7.70441 17.3495 7.70441 16.5596C5.06999 17.1283 4.5214 15.4223 4.5214 15.4223C4.09803 14.3166 3.47073 14.0324 3.47073 14.0324C2.60849 13.4479 3.53354 13.4479 3.53354 13.4479C4.48999 13.5111 4.99187 14.4272 4.99187 14.4272C5.83841 15.8803 7.20253 15.4698 7.75132 15.217C7.82963 14.6009 8.08067 14.1745 8.34721 13.9376C6.24608 13.7164 4.03541 12.8951 4.03541 9.23033C4.03541 8.1878 4.41148 7.33487 5.00738 6.67151C4.91336 6.43463 4.58401 5.45511 5.10159 4.1441C5.10159 4.1441 5.90122 3.89132 7.70421 5.12343C8.47614 4.91459 9.27221 4.80835 10.0719 4.80745C10.8715 4.80745 11.6867 4.91814 12.4394 5.12343C14.2426 3.89132 15.0422 4.1441 15.0422 4.1441C15.5598 5.45511 15.2302 6.43463 15.1362 6.67151C15.7478 7.33487 16.1084 8.1878 16.1084 9.23033C16.1084 12.8951 13.8977 13.7005 11.7809 13.9376C12.1259 14.2377 12.4237 14.8062 12.4237 15.7066C12.4237 16.9861 12.4082 18.0129 12.4082 18.3287C12.4082 18.5814 12.5807 18.8817 13.051 18.7869C16.814 17.523 19.5265 13.9533 19.5265 9.73589C19.542 4.45988 15.293 0.19519 10.0719 0.19519Z" fill="#F9FAFB"/>
             </svg>
           </a>
-          <a href="https://discord.gg/8gW3h6w5" target="_blank">
+          <a href="https://discord.gg/8gW3h6w5" title="View OnchainKit discord" target="_blank">
             <svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M16.0995 1.52957C14.8561 0.960314 13.5435 0.556465 12.1951 0.328339C12.0106 0.658176 11.8437 0.997534 11.695 1.34499C10.2587 1.12857 8.79818 1.12857 7.36193 1.34499C7.21317 0.99757 7.04622 0.658216 6.86179 0.328339C5.51258 0.558391 4.19908 0.963199 2.95444 1.53255C0.483511 5.18834 -0.18632 8.75333 0.148595 12.2677C1.59564 13.3368 3.21529 14.1499 4.93714 14.6717C5.32485 14.1502 5.66793 13.597 5.96273 13.0179C5.4028 12.8088 4.86237 12.5508 4.34769 12.2469C4.48315 12.1486 4.61562 12.0474 4.74364 11.9492C6.24123 12.6534 7.87577 13.0186 9.5307 13.0186C11.1856 13.0186 12.8202 12.6534 14.3178 11.9492C14.4473 12.0548 14.5797 12.1561 14.7137 12.2469C14.198 12.5513 13.6566 12.8098 13.0957 13.0194C13.3901 13.5982 13.7332 14.151 14.1213 14.6717C15.8446 14.152 17.4655 13.3393 18.9128 12.2692C19.3058 8.19365 18.2415 4.6614 16.0995 1.52957ZM6.38696 10.1064C5.45366 10.1064 4.68261 9.25942 4.68261 8.21746C4.68261 7.1755 5.42686 6.32109 6.38398 6.32109C7.34109 6.32109 8.10619 7.1755 8.08981 8.21746C8.07344 9.25942 7.33812 10.1064 6.38696 10.1064ZM12.6744 10.1064C11.7396 10.1064 10.9716 9.25942 10.9716 8.21746C10.9716 7.1755 11.7158 6.32109 12.6744 6.32109C13.633 6.32109 14.3922 7.1755 14.3758 8.21746C14.3594 9.25942 13.6256 10.1064 12.6744 10.1064Z" fill="#F9FAFB"/>
             </svg>
           </a>
-          <a href="https://x.com/Onchainkit" target="_blank">
+          <a href="https://x.com/Onchainkit" title="View OnchainKit twitter page" target="_blank">
             <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M17.5224 4.63938C17.534 4.80622 17.534 4.97306 17.534 5.14144C17.534 10.2719 13.6282 16.1889 6.48649 16.1889V16.1858C4.37679 16.1889 2.31092 15.5846 0.534897 14.4452C0.841664 14.4821 1.14997 14.5005 1.45904 14.5013C3.20739 14.5028 4.90575 13.9162 6.28121 12.836C4.61974 12.8045 3.16279 11.7212 2.65382 10.1397C3.23583 10.2519 3.83553 10.2289 4.40678 10.0728C2.59539 9.70681 1.2922 8.11531 1.2922 6.26702V6.21781C1.83193 6.51843 2.43624 6.68527 3.05439 6.70372C1.34833 5.56353 0.822443 3.29391 1.85269 1.51943C3.82399 3.94512 6.73252 5.41976 9.85478 5.57583C9.54186 4.22729 9.96933 2.81416 10.9781 1.86618C12.5419 0.396155 15.0014 0.471501 16.4714 2.03455C17.341 1.8631 18.1744 1.54403 18.9371 1.09196C18.6472 1.99073 18.0406 2.75419 17.2303 3.23933C17.9999 3.1486 18.7518 2.94255 19.4599 2.6281C18.9386 3.40924 18.282 4.08966 17.5224 4.63938Z" fill="#F9FAFB"/>
             </svg>
           </a>  
-          <a href="https://warpcast.com/~/channel/onchainkit" target="_blank">
+          <a href="https://warpcast.com/~/channel/onchainkit" title="View OnchainKit Warpcast page" target="_blank">
             <img src="/assets/warpcast-logo.png" />
           </a>
         </ul>