Skip to content

Commit

Permalink
Merge pull request #199 from scott-klaytn/optimize-homepage
Browse files Browse the repository at this point in the history 
Optimize homepage components
  • Loading branch information
@scott-klaytn
scott-klaytn authored Jan 16, 2025
2 parents 7e553bb + e16ddb2 commit aa32590
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 109 deletions.
140 changes: 61 additions & 79 deletions src/components/Homepage/HomepageFavorites.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,7 @@ import styled from 'styled-components';
import { useColorMode } from '@docusaurus/theme-common';
import Translate from '@docusaurus/Translate';

const TRANSLATIONS = {
gettingStarted: {
title: (
<Translate id="homepage.favorites.gettingStarted.title" description="Title for Getting Started guide">
Getting Started
</Translate>
),
description: (
<Translate id="homepage.favorites.gettingStarted.description" description="Description for Getting Started guide">
Deploy your first smart contract using Hardhat.
</Translate>
),
},
metamask: {
title: (
<Translate id="homepage.favorites.metamask.title" description="Title for MetaMask guide">
MetaMask Guide
</Translate>
),
description: (
<Translate id="homepage.favorites.metamask.description" description="Description for MetaMask guide">
Connect MetaMask to Kaia.
</Translate>
),
},
snapshot: {
title: (
<Translate id="homepage.favorites.snapshot.title" description="Title for Node Snapshot guide">
Node Snapshot Guide
</Translate>
),
description: (
<Translate id="homepage.favorites.snapshot.description" description="Description for Node Snapshot guide">
Use Chaindata Snapshots.
</Translate>
),
},
rpc: {
title: (
<Translate id="homepage.favorites.rpc.title" description="Title for Public JSON RPC Endpoints">
Public JSON RPC Endpoints
</Translate>
),
description: (
<Translate id="homepage.favorites.rpc.description" description="Description for Public JSON RPC Endpoints">
Build and test your products without running your own node.
</Translate>
),
},
wallets: {
title: (
<Translate id="homepage.favorites.wallets.title" description="Title for Wallets section">
Wallets
</Translate>
),
description: (
<Translate id="homepage.favorites.wallets.description" description="Description for Wallets section">
Integrate and secure digital assets seamlessly.
</Translate>
),
},
indexers: {
title: (
<Translate id="homepage.favorites.indexers.title" description="Title for Indexers section">
Indexers
</Translate>
),
description: (
<Translate id="homepage.favorites.indexers.description" description="Description for Indexers section">
Query and index blockchain data for efficient dApp performance.
</Translate>
),
},
};

type FavoriteType = keyof typeof TRANSLATIONS;
type FavoriteType = 'gettingStarted' | 'metamask' | 'snapshot' | 'rpc' | 'wallets' | 'indexers';

interface Favorite {
type: FavoriteType;
Expand Down Expand Up @@ -195,15 +120,72 @@ const ViewMoreLink = styled(Link)`

const FavoriteContent = ({ favorite }: { favorite: Favorite }) => {
const { colorMode } = useColorMode();
const translation = TRANSLATIONS[favorite.type];

return (
<FavoriteItem to={favorite.link} themeMode={colorMode}>
<FavoriteTitle themeMode={colorMode}>
{translation.title}
{favorite.type === 'gettingStarted' && (
<Translate id="homepage.favorites.gettingStarted.title" description="Title for Getting Started guide">
Getting Started
</Translate>
)}
{favorite.type === 'metamask' && (
<Translate id="homepage.favorites.metamask.title" description="Title for MetaMask guide">
MetaMask Guide
</Translate>
)}
{favorite.type === 'snapshot' && (
<Translate id="homepage.favorites.snapshot.title" description="Title for Node Snapshot guide">
Node Snapshot Guide
</Translate>
)}
{favorite.type === 'rpc' && (
<Translate id="homepage.favorites.rpc.title" description="Title for RPC Endpoints">
Public JSON RPC Endpoints
</Translate>
)}
{favorite.type === 'wallets' && (
<Translate id="homepage.favorites.wallets.title" description="Title for Wallets section">
Wallets
</Translate>
)}
{favorite.type === 'indexers' && (
<Translate id="homepage.favorites.indexers.title" description="Title for Indexers section">
Indexers
</Translate>
)}
</FavoriteTitle>
<FavoriteDescription themeMode={colorMode}>
{translation.description}
{favorite.type === 'gettingStarted' && (
<Translate id="homepage.favorites.gettingStarted.description" description="Description for Getting Started guide">
Deploy your first smart contract using Hardhat.
</Translate>
)}
{favorite.type === 'metamask' && (
<Translate id="homepage.favorites.metamask.description" description="Description for MetaMask guide">
Connect MetaMask to Kaia.
</Translate>
)}
{favorite.type === 'snapshot' && (
<Translate id="homepage.favorites.snapshot.description" description="Description for Node Snapshot guide">
Use Chaindata Snapshots.
</Translate>
)}
{favorite.type === 'rpc' && (
<Translate id="homepage.favorites.rpc.description" description="Description for RPC Endpoints">
Build and test your products without running your own node.
</Translate>
)}
{favorite.type === 'wallets' && (
<Translate id="homepage.favorites.wallets.description" description="Description for Wallets section">
Integrate and secure digital assets seamlessly.
</Translate>
)}
{favorite.type === 'indexers' && (
<Translate id="homepage.favorites.indexers.description" description="Description for Indexers section">
Query and index blockchain data for efficient dApp performance.
</Translate>
)}
</FavoriteDescription>
</FavoriteItem>
);
Expand Down
54 changes: 24 additions & 30 deletions src/components/Homepage/HomepageSDK.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,10 @@ import { useColorMode } from '@docusaurus/theme-common';
import Translate from '@docusaurus/Translate';

const TRANSLATIONS = {
ethersjs: {
name: (
<Translate id="homepage.sdk.ethersjs.name" description="Name of the Ethers.js Extension SDK">
Ethers.js Extension
</Translate>
),
},
web3js: {
name: (
<Translate id="homepage.sdk.web3js.name" description="Name of the Web3.js Extension SDK">
Web3.js Extension
</Translate>
),
},
web3j: {
name: (
<Translate id="homepage.sdk.web3j.name" description="Name of the Web3j Extension SDK">
Web3j Extension
</Translate>
),
},
web3py: {
name: (
<Translate id="homepage.sdk.web3py.name" description="Name of the Web3.py Extension SDK">
Web3.py Extension
</Translate>
),
},
ethersjs: 'Ethers.js Extension',
web3js: 'Web3.js Extension',
web3j: 'Web3j Extension',
web3py: 'Web3.py Extension',
};

type SDKType = keyof typeof TRANSLATIONS;
Expand Down Expand Up @@ -145,13 +121,31 @@ const StyledLink = styled(Link)`

const SDK = ({ sdk }: { sdk: SDKData }) => {
const { colorMode } = useColorMode();
const translation = TRANSLATIONS[sdk.type];

return (
<SDKLink to={sdk.to} themeMode={colorMode}>
<SDKIcon src={sdk.icon} alt={sdk.type} />
<SDKName>
{translation.name}
{sdk.type === 'ethersjs' && (
<Translate id="homepage.sdk.ethersjs.name" description="Name of the Ethers.js Extension SDK">
Ethers.js Extension
</Translate>
)}
{sdk.type === 'web3js' && (
<Translate id="homepage.sdk.web3js.name" description="Name of the Web3.js Extension SDK">
Web3.js Extension
</Translate>
)}
{sdk.type === 'web3j' && (
<Translate id="homepage.sdk.web3j.name" description="Name of the Web3j Extension SDK">
Web3j Extension
</Translate>
)}
{sdk.type === 'web3py' && (
<Translate id="homepage.sdk.web3py.name" description="Name of the Web3.py Extension SDK">
Web3.py Extension
</Translate>
)}
</SDKName>
</SDKLink>
);
Expand Down

0 comments on commit aa32590

Please sign in to comment.