From 9463f20a3a94ff8cfab7352904478c86da29cc0b Mon Sep 17 00:00:00 2001 From: RadekSabacky Date: Tue, 4 Mar 2025 19:18:42 +0100 Subject: [PATCH] + basepath + redirect to basepath + blog icons refactor + icons refactor --- explorer-v2/next.config.ts | 18 ++++- .../src/components/blogs/BlogArticleCards.tsx | 3 +- .../components/footer/NewsLetterSignUp.tsx | 5 +- .../src/components/footer/SocialIcon.tsx | 30 +++----- .../src/components/header/navigationIcons.ts | 7 +- .../src/components/icons/ArrowUpRight.tsx | 4 +- explorer-v2/src/components/icons/Chevron.tsx | 3 +- explorer-v2/src/components/icons/CopyFile.tsx | 4 +- explorer-v2/src/components/icons/Cross.tsx | 3 +- explorer-v2/src/components/icons/Elips.tsx | 4 +- explorer-v2/src/components/icons/Gateway.tsx | 3 +- explorer-v2/src/components/icons/NymLogo.tsx | 3 +- explorer-v2/src/components/icons/Token.tsx | 4 +- .../src/data/Welcome-to-explorer-2.json | 2 +- explorer-v2/src/data/buy-nym.json | 2 +- explorer-v2/src/data/operate-a-node.json | 2 +- explorer-v2/src/data/staking-guide.json | 2 +- explorer-v2/src/utils/getIconByName.tsx | 69 +++++++++++++++++++ 18 files changed, 126 insertions(+), 42 deletions(-) create mode 100644 explorer-v2/src/utils/getIconByName.tsx diff --git a/explorer-v2/next.config.ts b/explorer-v2/next.config.ts index e9ffa3083a..9c0e03fea6 100644 --- a/explorer-v2/next.config.ts +++ b/explorer-v2/next.config.ts @@ -1,7 +1,23 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + reactStrictMode: true, + + basePath: "/explorer", + assetPrefix: "/explorer", + trailingSlash: false, + + async redirects() { + return [ + // Change the basePath to /explorer + { + source: "/", + destination: "/explorer", + basePath: false, + permanent: true, + }, + ] + } }; export default nextConfig; diff --git a/explorer-v2/src/components/blogs/BlogArticleCards.tsx b/explorer-v2/src/components/blogs/BlogArticleCards.tsx index 783da83c0e..cb2506a0e4 100644 --- a/explorer-v2/src/components/blogs/BlogArticleCards.tsx +++ b/explorer-v2/src/components/blogs/BlogArticleCards.tsx @@ -3,6 +3,7 @@ import path from "node:path"; import Grid from "@mui/material/Grid2"; import ExplorerHeroCard from "../cards/ExplorerHeroCard"; import type { BlogArticleWithLink } from "./types"; +import { icons, IconName } from "@/utils/getIconByName"; // TODO: Articles should be sorted by date @@ -73,7 +74,7 @@ const BlogArticlesCards = async ({ label={blogArticle.label} title={blogArticle.title} description={blogArticle.description} - icon={blogArticle.icon} + icon={icons[blogArticle.icon as IconName]?.src} link={blogArticle.link || ""} sx={{ height: "100%" }} /> diff --git a/explorer-v2/src/components/footer/NewsLetterSignUp.tsx b/explorer-v2/src/components/footer/NewsLetterSignUp.tsx index 0d2eb275b6..0f1fdffb08 100644 --- a/explorer-v2/src/components/footer/NewsLetterSignUp.tsx +++ b/explorer-v2/src/components/footer/NewsLetterSignUp.tsx @@ -1,8 +1,7 @@ "use client"; // Types -import Arrow from "../../../public/icons/arrow.svg"; - +import { icons } from "@/utils/getIconByName"; // MUI Components import { Box, Button, Input } from "@mui/material"; import Image from "next/image"; @@ -57,7 +56,7 @@ export const NewsletterSignUp = () => { }, }} > - {"arrow + {"arrow ); diff --git a/explorer-v2/src/components/footer/SocialIcon.tsx b/explorer-v2/src/components/footer/SocialIcon.tsx index 20f3836513..5678edda0f 100644 --- a/explorer-v2/src/components/footer/SocialIcon.tsx +++ b/explorer-v2/src/components/footer/SocialIcon.tsx @@ -1,29 +1,21 @@ "use client"; import Image from "next/image"; -import Discord from "../../../public/icons/discord.svg"; -import GitHub from "../../../public/icons/github.svg"; -// Icons -import Telegram from "../../../public/icons/telegram.svg"; -import X from "../../../public/icons/twitter.svg"; -import YouTube from "../../../public/icons/youtube.svg"; -import YouTubeInverted from "../../../public/icons/youtubeInverted.svg"; - -export const icons: { [key: string]: React.ComponentType } = { - telegram: Telegram, - youtube: YouTube, - discord: Discord, - github: GitHub, - twitter: X, -}; +import { icons } from "@/utils/getIconByName"; // import { useMainContext } from "@/context"; export const SocialIcon = ({ channel }: { channel: string }): JSX.Element => { // const { mode } = useMainContext(); const modeType = "light"; - const iconSrc = - modeType === "light" && channel.toLowerCase() === "youtube" - ? YouTubeInverted - : icons[channel.toLowerCase()]; + // ✅ Normalize channel name & apply theme logic + const normalizedChannel = channel.toLowerCase(); + const iconName = + modeType === "light" && normalizedChannel === "youtube" + ? "youTubeInverted" + : (normalizedChannel as keyof typeof icons); + + // ✅ Get the icon source dynamically + const iconSrc = icons[iconName]?.src || "/icons/default-icon.svg"; + return {channel}; }; diff --git a/explorer-v2/src/components/header/navigationIcons.ts b/explorer-v2/src/components/header/navigationIcons.ts index d9b9ea5fe4..75ac777ffa 100644 --- a/explorer-v2/src/components/header/navigationIcons.ts +++ b/explorer-v2/src/components/header/navigationIcons.ts @@ -1,7 +1,6 @@ -import Document from "@/public/icons/document.svg"; -import Download from "@/public/icons/download.svg"; +import { icons } from "@/utils/getIconByName"; export const NavigationIcons = { - article: Document, - download: Download, + article: icons.document, + download: icons.download, }; diff --git a/explorer-v2/src/components/icons/ArrowUpRight.tsx b/explorer-v2/src/components/icons/ArrowUpRight.tsx index 785c9c0175..e74a08625e 100644 --- a/explorer-v2/src/components/icons/ArrowUpRight.tsx +++ b/explorer-v2/src/components/icons/ArrowUpRight.tsx @@ -1,8 +1,10 @@ import Image from "next/image"; +import { icons } from "@/utils/getIconByName"; + const ArrowUpRight = () => ( Arrow Up Right { return ( Chevron Menu ( Copyfile ( - cross + cross ); export default Cross; diff --git a/explorer-v2/src/components/icons/Elips.tsx b/explorer-v2/src/components/icons/Elips.tsx index fbdc7e5415..9b72319729 100644 --- a/explorer-v2/src/components/icons/Elips.tsx +++ b/explorer-v2/src/components/icons/Elips.tsx @@ -1,6 +1,6 @@ import Image from "next/image"; -import * as React from "react"; +import { icons } from "@/utils/getIconByName"; export const Elips = () => ( - Elips + Elips ); diff --git a/explorer-v2/src/components/icons/Gateway.tsx b/explorer-v2/src/components/icons/Gateway.tsx index 87baa460fb..c2f9594d18 100644 --- a/explorer-v2/src/components/icons/Gateway.tsx +++ b/explorer-v2/src/components/icons/Gateway.tsx @@ -1,8 +1,9 @@ import Image from "next/image"; +import { icons } from "@/utils/getIconByName"; const Gateway = () => { return ( - Chevron Menu + Chevron Menu ); }; diff --git a/explorer-v2/src/components/icons/NymLogo.tsx b/explorer-v2/src/components/icons/NymLogo.tsx index 8e0945f8d5..1461799c75 100644 --- a/explorer-v2/src/components/icons/NymLogo.tsx +++ b/explorer-v2/src/components/icons/NymLogo.tsx @@ -1,8 +1,9 @@ import Image from "next/image"; +import { icons } from "@/utils/getIconByName"; const NymLogo = () => { return ( - Nym Logo + Nym Logo ); }; export default NymLogo; diff --git a/explorer-v2/src/components/icons/Token.tsx b/explorer-v2/src/components/icons/Token.tsx index e147ec8ae6..3cd0475ef0 100644 --- a/explorer-v2/src/components/icons/Token.tsx +++ b/explorer-v2/src/components/icons/Token.tsx @@ -1,6 +1,6 @@ import Image from "next/image"; -import * as React from "react"; +import { icons } from "@/utils/getIconByName"; export const Token = () => { - return Token; + return Token; }; diff --git a/explorer-v2/src/data/Welcome-to-explorer-2.json b/explorer-v2/src/data/Welcome-to-explorer-2.json index d757397859..842847e643 100644 --- a/explorer-v2/src/data/Welcome-to-explorer-2.json +++ b/explorer-v2/src/data/Welcome-to-explorer-2.json @@ -8,7 +8,7 @@ "date": "Mon Jan 20 2025 10:26:09 GMT+0000 (Greenwich Mean Time)", "readingTime": 5 }, - "icon": "/icons/explorer-card.svg", + "icon": "explorerCard", "image": "/images/Network.webp", "overview": { "content": [ diff --git a/explorer-v2/src/data/buy-nym.json b/explorer-v2/src/data/buy-nym.json index 55d6bc60a6..721ee1f19f 100644 --- a/explorer-v2/src/data/buy-nym.json +++ b/explorer-v2/src/data/buy-nym.json @@ -8,7 +8,7 @@ "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)", "readingTime": 5 }, - "icon": "/icons/gateway.svg", + "icon": "gateway", "image": "/images/placeholder.webp", "overview": { "content": [ diff --git a/explorer-v2/src/data/operate-a-node.json b/explorer-v2/src/data/operate-a-node.json index b4f71a5af5..25dc8e9ac7 100644 --- a/explorer-v2/src/data/operate-a-node.json +++ b/explorer-v2/src/data/operate-a-node.json @@ -8,7 +8,7 @@ "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)", "readingTime": 5 }, - "icon": "/icons/gateway.svg", + "icon": "gateway", "image": "/images/placeholder.webp", "overview": { "content": [ diff --git a/explorer-v2/src/data/staking-guide.json b/explorer-v2/src/data/staking-guide.json index d64bb06cae..9e36a48433 100644 --- a/explorer-v2/src/data/staking-guide.json +++ b/explorer-v2/src/data/staking-guide.json @@ -8,7 +8,7 @@ "date": "Mon Jan 05 2025 10:26:09 GMT+0000 (Greenwich Mean Time)", "readingTime": 5 }, - "icon": "/icons/stake-card.svg", + "icon": "stakeCard", "image": "/images/stake-article.webp", "overview": { "content": [ diff --git a/explorer-v2/src/utils/getIconByName.tsx b/explorer-v2/src/utils/getIconByName.tsx new file mode 100644 index 0000000000..17d4f87225 --- /dev/null +++ b/explorer-v2/src/utils/getIconByName.tsx @@ -0,0 +1,69 @@ +import type { StaticImageData } from "next/image"; + +import nymLogo from "@/../public/icons/nym-logo.svg"; +import token from "@/../public/icons/token.svg"; +import gateway from "@/../public/icons/gateway.svg"; +import elips from "@/../public/icons/elips.svg"; +import cross from "@/../public/icons/cross.svg"; +import copyFile from "@/../public/icons/copy-file.svg"; +import chevronMenu from "@/../public/icons/chevronMenu.svg" +import document from "@/../public/icons/document.svg" +import download from "@/../public/icons/download.svg" +import discord from "@/../public/icons/discord.svg" +import github from "@/../public/icons/github.svg" +import telegram from "@/../public/icons/telegram.svg" +import twitter from "@/../public/icons/twitter.svg" +import youtube from "@/../public/icons/youtube.svg" +import youTubeInverted from "@/../public/icons/youtubeInverted.svg" +import arrowUpRight from "@/../public/icons/arrow-up-right.svg" +import arrow from "@/../public/icons/arrow-up-right.svg" +import explorerCard from "@/../public/icons/explorer-card.svg" +import stakeCard from "@/../public/icons/stake-card.svg" + +export type IconName = + | "nymLogo" + | "token" + | "gateway" + | "elips" + | "cross" + | "copyFile" + | "chevronMenu" + | "document" + | "download" + | "discord" + | "github" + | "telegram" + | "twitter" + | "youtube" + | "youTubeInverted" + | "arrowUpRight" + | "arrow" + | "stakeCard" + | "explorerCard" + +export type Icons = { + [key in IconName]: StaticImageData; +}; + +export const icons: Icons = { + nymLogo, + token, + gateway, + elips, + cross, + copyFile, + chevronMenu, + document, + download, + discord, + github, + telegram, + twitter, + youtube, + youTubeInverted, + arrowUpRight, + arrow, + stakeCard, + explorerCard + +};