Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/DiscourseComment/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/PregenerateWallet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/components/PregenrateSmartAccount/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions src/components/SEO/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -17,7 +17,7 @@ interface GuideCardProps {
activeTags?: string[]
}

export default function GuideCard({
export default function TutorialCard({
title,
description,
link,
Expand All @@ -28,7 +28,7 @@ export default function GuideCard({
type,
searchInput = '',
activeTags = [],
}: GuideCardProps) {
}: TutorialCardProps) {
const { siteConfig } = useDocusaurusContext()
const { baseUrl } = siteConfig

Expand Down
108 changes: 108 additions & 0 deletions src/components/TutorialsPage/TutorialCard.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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}` }
})
Expand All @@ -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 =
Expand All @@ -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) : []
Expand Down Expand Up @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -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 || ''}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
background: var(--ifm-background-surface-color);
z-index: 100;
animation: fade-in 0.3s ease-out;
overflow: hidden;
}

/* Dark mode: Use darker background for better contrast with cards */
Expand All @@ -14,10 +15,12 @@ html[data-theme='dark'] .overlayContainer {

.overlayContent {
width: 100%;
height: 100%;
padding: 2rem;
overflow-y: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

/* Tablet and up */
Expand Down Expand Up @@ -539,4 +542,30 @@ html[data-theme='dark'] .cardDescription {
font-size: 1.4rem;
justify-content: flex-start;
}
}

/* Mobile specific scrolling improvements */
@media (width <=768px) {
.overlayContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}

.overlayContent {
height: 100vh;
padding: 1rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

.cardsWrapper {
margin-bottom: 4rem;
}
}
2 changes: 1 addition & 1 deletion src/pages/quickstart/builder/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const getFrameworkKey = (product: string, framework: string): string => {

const builder: IntegrationBuilder = {
// Name of the integration builder
displayName: 'Web3Auth',
displayName: 'MetaMask',
// Options that will be displayed in the UI for selection
options: {
product: {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/docusaurus-plugin-tutorials/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ module.exports = (context, options) => ({
addRoute({
path: '/tutorials',
exact: true,
component: '@site/src/components/GuidesPage',
component: '@site/src/components/TutorialsPage',
modules: { content: contentHub },
})
},
Expand Down
2 changes: 1 addition & 1 deletion src/theme/MDXPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function MDXPage(props: ComponentProps<typeof OriginalMDXPage>) {
wrapperClassName,
communityPortalTopicId,
} = frontMatter
const url = `https://web3auth.io${permalink}`
const url = `https://metamask.io${permalink}`
const facebookLink = `https://www.facebook.com/sharer/sharer.php?${url}`
const twitterLink = `http://twitter.com/share?text=Checkout ${title} published by @Web3Auth&url=${url}`

Expand Down
Loading
Loading