Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize homepage components #199

Merged
merged 3 commits into from
Jan 16, 2025
Merged

Optimize homepage components #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
149b0b7
Optimize homepage components
scott-klaytn Jan 2, 2025
5bd3a1e
Remove unnecessary changes
scott-klaytn Jan 2, 2025
e16ddb2
Remove dynamically constructed values inside Translation components
scott-klaytn Jan 2, 2025
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
140 changes: 61 additions & 79 deletions src/components/Homepage/HomepageFavorites.tsx
View file
Open in desktop
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
Open in desktop
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
Loading