fixes

Author: yashovardhan

src/components/DiscourseComment/index.jsx

@@ -5,11 +5,11 @@ export default function DiscourseComment(props) {
   const { postUrl } = props
   useEffect(() => {
     const url = window.location.href
-    if (!url.includes('https://web3auth.io/')) {
+    if (!url.includes('https://metamask.io/')) {
       return
     } else {
       window.DiscourseEmbed = {
-        discourseUrl: 'https://web3auth.io/community/',
+        discourseUrl: 'https://builder.metamask.io/',
         discourseEmbedUrl: postUrl,
       }
 

src/components/PregenerateWallet/index.tsx

@@ -33,7 +33,7 @@ export default function LookupAPIPage() {
 
   const [formData, setFormData] = useState({
     verifier: 'w3a-google-demo',
-    verifierId: 'devrel@web3auth.io',
+    verifierId: 'devrel@metamask.io',
     web3AuthNetwork: 'sapphire_mainnet',
     clientId:
       'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ',

src/components/PregenrateSmartAccount/index.tsx

@@ -37,7 +37,7 @@ export default function LookupSCWAPIPage() {
 
   const [formData, setFormData] = useState({
     verifier: 'w3a-google-demo',
-    verifierId: 'devrel@web3auth.io',
+    verifierId: 'devrel@metamask.io',
     web3AuthNetwork: 'sapphire_mainnet',
     clientId:
       'BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ',

src/components/SEO/index.tsx

@@ -67,15 +67,15 @@ export default function SEO(props) {
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="@MetaMask" />
       <meta name="twitter:creator" content="@MetaMask" />
-      {/* {title ? <meta name="twitter:title" content={title} /> : <meta name="twitter:title" content="Documentation | Web3Auth" />}
+      {title ? <meta name="twitter:title" content={title} /> : <meta name="twitter:title" content="Documentation | MetaMask" />}
       {description ? (
         <meta name="twitter:description" content={description} />
       ) : (
         <meta
           name="twitter:description"
-          content="Web3Auth is simple, non-custodial auth infrastructure that enables Web3 wallets and applications to provide seamless user logins for both mainstream and native Web3 users."
+          content="MetaMask is the leading self-custodial wallet. Build with the world's leading self-custodial crypto wallet through MetaMask developer documentation."
         />
-      )} */}
+      )}
       {image ? (
         <meta name="twitter:image" content={image} />
       ) : (

src/components/GuidesPage/CustomSelect.module.css renamed to src/components/TutorialsPage/CustomSelect.module.css

@@ -4,7 +4,7 @@ import Badge from '@site/src/components/Badge'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import styles from './GuideCard.module.css'
 
-interface GuideCardProps {
+interface TutorialCardProps {
   title: string
   description: string
   link: string
@@ -17,7 +17,7 @@ interface GuideCardProps {
   activeTags?: string[]
 }
 
-export default function GuideCard({
+export default function TutorialCard({
   title,
   description,
   link,
@@ -28,7 +28,7 @@ export default function GuideCard({
   type,
   searchInput = '',
   activeTags = [],
-}: GuideCardProps) {
+}: TutorialCardProps) {
   const { siteConfig } = useDocusaurusContext()
   const { baseUrl } = siteConfig
 

src/components/GuidesPage/CustomSelect.tsx renamed to src/components/TutorialsPage/CustomSelect.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import Badge from '@site/src/components/Badge'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import styles from './TutorialCard.module.css'
+
+interface TutorialCardProps {
+  title: string
+  description: string
+  link: string
+  image?: string
+  tags?: string[]
+  author?: string
+  date?: string
+  type?: string
+  searchInput?: string
+  activeTags?: string[]
+}
+
+export default function TutorialCard({
+  title,
+  description,
+  link,
+  image,
+  tags = [],
+  author,
+  date,
+  type,
+  searchInput = '',
+  activeTags = [],
+}: TutorialCardProps) {
+  const { siteConfig } = useDocusaurusContext()
+  const { baseUrl } = siteConfig
+
+  function highlightSearchText(text: string) {
+    if (!searchInput.trim()) {
+      return text
+    }
+
+    const searchTerms = searchInput.trim().split(/\s+/)
+    const regex = new RegExp(`(${searchTerms.join('|')})`, 'gi')
+
+    // Use replace to find matches and build result
+    let lastIndex = 0
+    const elements: React.ReactNode[] = []
+    let match
+
+    // Reset regex lastIndex to avoid stateful issues
+    regex.lastIndex = 0
+
+    while ((match = regex.exec(text)) !== null) {
+      // Add text before the match
+      if (match.index > lastIndex) {
+        elements.push(text.slice(lastIndex, match.index))
+      }
+
+      // Add the highlighted match
+      elements.push(<mark key={match.index}>{match[0]}</mark>)
+
+      lastIndex = match.index + match[0].length
+
+      // Prevent infinite loop with zero-length matches
+      if (match.index === regex.lastIndex) {
+        regex.lastIndex++
+      }
+    }
+
+    // Add remaining text after last match
+    if (lastIndex < text.length) {
+      elements.push(text.slice(lastIndex))
+    }
+
+    return <span>{elements}</span>
+  }
+
+  return (
+    <article className={styles.card}>
+      <Link to={link} className={styles.cardLink}>
+        {image && (
+          <div className={styles.imageContainer}>
+            <img src={baseUrl + image} alt={title} className={styles.image} />
+          </div>
+        )}
+
+        <div className={styles.content}>
+          <h3 className={styles.title}>{highlightSearchText(title)}</h3>
+          <p className={styles.description}>{highlightSearchText(description)}</p>
+        </div>
+      </Link>
+
+      {tags.length > 0 && (
+        <div className={styles.tagsContainer}>
+          {tags.map(tag => (
+            <Badge
+              key={tag}
+              label={tag.toLowerCase()}
+              variant={activeTags.includes(tag) ? 'success' : 'default'}
+            />
+          ))}
+        </div>
+      )}
+
+      {(author || date) && (
+        <div className={styles.meta}>{author && date && `${author} | ${date}`}</div>
+      )}
+    </article>
+  )
+}

src/components/GuidesPage/GuideCard.tsx renamed to src/components/TutorialsPage/GuideCard.tsx

@@ -5,20 +5,20 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
-import { GuidesInterface, platformMap, productMap } from '../../utils/guides-map'
+import { TutorialsInterface, platformMap, productMap } from '../../utils/tutorials-map'
 
 import { useState, useEffect } from 'react'
 import SEO from '@site/src/components/SEO'
 import Hero from '@site/src/components/Hero/Hero'
 import Input from '@site/src/components/Input'
-import GuideCard from './GuideCard'
+import TutorialCard from './TutorialCard'
 import CustomSelect, { OptionType } from './CustomSelect'
 import styles from './styles.module.css'
 
-export default function Guides({ content = {} }: GuidesInterface) {
+export default function Tutorials({ content = {} }: TutorialsInterface) {
   const safeContent = content || {}
 
-  const completeGuides = Object.entries(safeContent)
+  const completeTutorials = Object.entries(safeContent)
     .map(([key, value]) => {
       return { ...value, link: `/tutorials/${key}` }
     })
@@ -37,16 +37,16 @@ export default function Guides({ content = {} }: GuidesInterface) {
   const [platformFilter, setPlatformFilter] = useState<string[]>([])
   const [selectedProducts, setSelectedProducts] = useState<OptionType[]>([])
   const [selectedPlatforms, setSelectedPlatforms] = useState<OptionType[]>([])
-  const [filteredGuides, setFilteredGuides] = useState(completeGuides)
+  const [filteredTutorials, setFilteredTutorials] = useState(completeTutorials)
   const { siteConfig } = useDocusaurusContext()
   const { baseUrl } = siteConfig
 
   // Apply tag filters first
   useEffect(() => {
-    let filtered = completeGuides
+    let filtered = completeTutorials
 
     if (productFilter.length > 0 || platformFilter.length > 0) {
-      filtered = completeGuides.filter(item => {
+      filtered = completeTutorials.filter(item => {
         if (!item || !item.tags || !Array.isArray(item.tags)) return false
 
         const prodFil =
@@ -58,8 +58,8 @@ export default function Guides({ content = {} }: GuidesInterface) {
       })
     }
 
-    setFilteredGuides(filtered)
-  }, [productFilter, platformFilter, completeGuides])
+    setFilteredTutorials(filtered)
+  }, [productFilter, platformFilter, completeTutorials])
 
   const onChangeProduct = (selectedOptions: OptionType[]) => {
     const filterValue = selectedOptions ? selectedOptions.map(item => item.value) : []
@@ -120,8 +120,8 @@ export default function Guides({ content = {} }: GuidesInterface) {
     setSearchInput(input)
   }
 
-  // Filter the already filtered guides based on search
-  const displayedGuides = filteredGuides.filter(item => {
+  // Filter the already filtered tutorials based on search
+  const displayedTutorials = filteredTutorials.filter(item => {
     if (!item) return false // Skip null items
     if (!searchInput.trim()) return true
 
@@ -136,15 +136,15 @@ export default function Guides({ content = {} }: GuidesInterface) {
     )
   })
 
-  // No transformation needed - we'll render GuideCard directly
+  // No transformation needed - we'll render TutorialCard directly
 
   return (
     <Layout title="Tutorials">
       <SEO
         title="Tutorials"
         description="Tutorials to integrate, customize, and build with MetaMask developer tools."
         image={`${baseUrl}img/tutorialsog.jpg`}
-        slug="/guides"
+        slug="/tutorials"
       />
 
       <Hero
@@ -180,10 +180,10 @@ export default function Guides({ content = {} }: GuidesInterface) {
           </div>
         </div>
 
-        {displayedGuides.length > 0 ? (
+        {displayedTutorials.length > 0 ? (
           <div className={styles.cardsGrid}>
-            {displayedGuides.map((item: any) => (
-              <GuideCard
+            {displayedTutorials.map((item: any) => (
+              <TutorialCard
                 key={item.link}
                 title={item.title}
                 description={item.description || ''}