From 08db84ec004030dccb53ac9741f70cf155041899 Mon Sep 17 00:00:00 2001 From: Narbeh Shahnazarian Date: Tue, 7 Jan 2025 20:56:44 -0800 Subject: [PATCH 1/6] Updates search bar --- src/components/input/search-bar.tsx | 51 ++++++++++++++++++++--------- 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/src/components/input/search-bar.tsx b/src/components/input/search-bar.tsx index ba55954..9a5538b 100644 --- a/src/components/input/search-bar.tsx +++ b/src/components/input/search-bar.tsx @@ -131,7 +131,7 @@ const SearchBar = ({ { event.currentTarget.scrollIntoView(false); }} @@ -173,11 +182,12 @@ const SearchBar = ({ { @@ -206,11 +215,19 @@ const SearchBar = ({ ); }} background={ - index === activeSuggestion ? "darkgray" : "white" + index === activeSuggestion ? "blue.50" : "white" } - padding={1} + color={index === activeSuggestion ? "blue.700" : "gray.700"} + padding={3} + rounded="md" + cursor="pointer" + _hover={{ + background: "blue.50", + color: "blue.700" + }} + transition="all 0.2s" > - + {suggestion} @@ -219,8 +236,12 @@ const SearchBar = ({ {filteredSuggestions.length === 0 && ( <> - - + + {t("searchTermNotFoundInFilter")} From 3b223b3721300ec86926c90cc15e3ce9598175af Mon Sep 17 00:00:00 2001 From: Narbeh Shahnazarian Date: Tue, 7 Jan 2025 21:50:11 -0800 Subject: [PATCH 2/6] updates term details page --- public/locales/en/common.json | 9 + src/components/input/search-bar.tsx | 19 +- src/components/search/result-box.tsx | 42 +++- src/pages/search/term/[id].tsx | 340 ++++++++++++++++++++++----- 4 files changed, 335 insertions(+), 75 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 5514be9..891a602 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -14,7 +14,16 @@ "searchIconAriaLabel" : "Magnifying glass image", "searchInputAriaLabel" : "Search web3 terms here", "searchTermNotFoundInFilter" : "Term not found", + "copy" : "Copy", + "share" : "Share", + "moreLearningMaterials" : "More Learning Materials", + "definition" : "Definition", + "comingSoon" : "Coming soon! We're working on bringing you additional learning resources and related terms to enhance your understanding.", + "unavailableSearchResultDescription" : "We couldn't find this term in our glossary yet. Would you like to request it be added?", + "back" : "Back", + "searchForAnotherTerm" : "Search for Another Term", + "requestThisTerm" : "Request This Term", "searchResultContentSourceHeading" : "Content Source", "searchResultContentSourceDescription" : "The definition you see above is stored on the Arweave network which is a protocol for storing data permanently in a decentralized manner among network users who have storage to spare. As a result, this definition will live forever on the Arweave network.", "searchResultContentSourceTransactionLinkText" : "Click here to view the Arweave transaction for this definition", diff --git a/src/components/input/search-bar.tsx b/src/components/input/search-bar.tsx index 9a5538b..e690859 100644 --- a/src/components/input/search-bar.tsx +++ b/src/components/input/search-bar.tsx @@ -16,16 +16,16 @@ import Trie from "../../filter/trie"; import AutocompleteFilter from "../../filter/autocomplete"; const SearchBar = ({ - baseWidth, - smWidth, - mdWidth, - lgWidth, + baseWidth = "280px", + smWidth = "320px", + mdWidth = "400px", + lgWidth = "480px", filterItems, }: { - baseWidth: string; - smWidth: string; - mdWidth: string; - lgWidth: string; + baseWidth?: string; + smWidth?: string; + mdWidth?: string; + lgWidth?: string; filterItems: any[]; }): JSX.Element => { const [searchTerm, setSearchTerm] = useState(""); @@ -146,12 +146,14 @@ const SearchBar = ({ rounded="xl" shadow="sm" onChange={handleSearchTermChange} + borderColor="black" width={{ base: baseWidth, sm: smWidth, md: mdWidth, lg: lgWidth, }} + maxWidth="100%" type="search" id="search" placeholder="Search for a word i.e. web3" @@ -194,6 +196,7 @@ const SearchBar = ({ md: mdWidth, lg: lgWidth, }} + maxWidth="100%" > {filteredSuggestions.length > 0 && filteredSuggestions.map((suggestion, index) => { diff --git a/src/components/search/result-box.tsx b/src/components/search/result-box.tsx index 750b4a9..7191644 100644 --- a/src/components/search/result-box.tsx +++ b/src/components/search/result-box.tsx @@ -5,23 +5,45 @@ export const ResultBox = ({ definition, category, term }: any): JSX.Element => { <> - + {term} - - {category} + + {category} - + {definition} diff --git a/src/pages/search/term/[id].tsx b/src/pages/search/term/[id].tsx index 4d319e3..8d71c8c 100644 --- a/src/pages/search/term/[id].tsx +++ b/src/pages/search/term/[id].tsx @@ -1,15 +1,37 @@ import { GetStaticPaths, GetStaticProps } from "next"; -import { SimpleGrid, chakra } from "@chakra-ui/react"; -import { Result } from "../../../components/search/result"; -import { UnavailableResult } from "../../../components/search/unavailable-result"; +import { + Box, + Container, + Heading, + Text, + VStack, + HStack, + Badge, + Divider, + Icon, + useColorModeValue, + Button, + Flex, + Tooltip, + Image, + Link +} from "@chakra-ui/react"; +import { motion } from "framer-motion"; +import { FiBook, FiShare2, FiCopy, FiArrowLeft } from "react-icons/fi"; +import { ExternalLinkIcon } from "@chakra-ui/icons"; +import { useRouter } from "next/router"; +import { useTranslation } from "next-i18next"; import PageLayout from "../../../components/layout/page"; import SearchBar from "../../../components/input/search-bar"; import ApiError from "../../../components/search/api-error"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { termFilter } from "../../../filter/termConfig"; import { fetchGlossaryTerm } from "../../../backend/service/glosseta.service"; -import { useRouter } from "next/router"; import FallBack from "../../../components/loading/fallback"; +import styles from "../../../../styles/Home.module.css"; +import { VIEWBLOCK_URL } from "../../../utils/glosseta-constants"; + +const MotionBox = motion(Box); const SearchResults = ({ term, @@ -19,7 +41,12 @@ const SearchResults = ({ transactionId, isError, }: any): JSX.Element => { + const twitter_href = `https://twitter.com/intent/tweet?screen_name=Glossetadotcom&text=Please%20add%20${term}%20to%20the%20knowledge%20base`; + const router = useRouter(); + const { t } = useTranslation(); + const bgColor = useColorModeValue("white", "gray.800"); + const borderColor = useColorModeValue("gray.200", "gray.700"); if (router.isFallback) { return ; @@ -27,64 +54,263 @@ const SearchResults = ({ if (isError) { return ( - - - - - - - - + + + ); } + const handleCopy = () => { + navigator.clipboard.writeText(term); + // Add toast notification here + }; + + const handleShare = () => { + navigator + .share({ + title: term, + text: definition, + url: window.location.href, + }) + .catch(() => { + navigator.clipboard.writeText(window.location.href); + }); + }; + return ( - <> - - - - + + {isAvailable ? ( + + {/* Term Header Section */} + + + + + {category} + + + {term.toUpperCase()} + + + + + + + + + + + + + + {/* Definition Section */} + + + + + + {t("definition")} + + + + {definition} + + + + + {t("searchResultContentSourceTransactionLinkText")} + + + {t("opensInANewWindow")} + + + Permanent on Arweave + + + + + + + {t("moreLearningMaterials")} + + + + {t("comingSoon")} + + + + + ) : ( + - {isAvailable && ( - - )} - {!isAvailable && } - - - - + + + + {term.toUpperCase()} + + + {t("unavailableSearchResultDescription")} + + + + + + )} + + {/* Enhanced Search Section */} + + + + + + + + + {t("searchForAnotherTerm")} + + + + + + + + + + ); }; From 63edbecdb8035357290e03607ba3d07fea75a826 Mon Sep 17 00:00:00 2001 From: Narbeh Shahnazarian Date: Tue, 7 Jan 2025 22:16:04 -0800 Subject: [PATCH 3/6] updates the glossary page --- public/locales/en/common.json | 2 +- .../glossary/scroll-to-top-button.tsx | 25 +- src/pages/glossary/index.tsx | 273 +++++++++++++++--- 3 files changed, 249 insertions(+), 51 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 891a602..a554756 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -27,8 +27,8 @@ "searchResultContentSourceHeading" : "Content Source", "searchResultContentSourceDescription" : "The definition you see above is stored on the Arweave network which is a protocol for storing data permanently in a decentralized manner among network users who have storage to spare. As a result, this definition will live forever on the Arweave network.", "searchResultContentSourceTransactionLinkText" : "Click here to view the Arweave transaction for this definition", - "glossaryPageHeading" : "Glossary", + "glossaryPageDescription" : "Explore the comprehensive glossary of web3 terms, including definitions, explanations, and related concepts. Whether you're a beginner or an expert, our glossary provides a detailed overview of the terminology used in blockchain, NFTs, and cryptocurrency.", "somethingMissingHeading" : "Something missing?", "twitterTermRequestDescription" : "If there's a specific term you were looking for but didn't see above, please let us know and we'll get it added. Give us a shout on ", "glossaryTermFetchErrorHeading": "Error", diff --git a/src/components/glossary/scroll-to-top-button.tsx b/src/components/glossary/scroll-to-top-button.tsx index 65d0b4a..a073c07 100644 --- a/src/components/glossary/scroll-to-top-button.tsx +++ b/src/components/glossary/scroll-to-top-button.tsx @@ -26,16 +26,25 @@ export const ScrollToTopButton = ({ title="glossary-scroll-to-top-button" onClick={scrollToTheTop} position="fixed" - bottom="20px" - right="30px" + bottom="6" + right="6" zIndex="99" - backgroundColor="#A3A3A3" - fontSize="18px" - textColor="black" - cursor="pointer" - _hover={{ backgroundColor: "#BABABA" }} + colorScheme="blackAlpha" + size="lg" + rounded="full" + shadow="lg" + aria-label={t("scrollToTheTopButton")} + _hover={{ + transform: "translateY(-2px)", + shadow: "xl" + }} + _active={{ + transform: "translateY(0)", + shadow: "md" + }} + transition="all 0.2s" > - + {t("scrollToTheTopButton")} diff --git a/src/pages/glossary/index.tsx b/src/pages/glossary/index.tsx index eabd888..8a3037f 100644 --- a/src/pages/glossary/index.tsx +++ b/src/pages/glossary/index.tsx @@ -7,8 +7,12 @@ import { Heading, VStack, Container, + Box, + Text, + HStack, + Link, + Badge, } from "@chakra-ui/react"; -import { ResultBox } from "../../components/search/result-box"; import { NewTermRequest } from "../../components/glossary/new-term-request"; import { ScrollToTopButton } from "../../components/glossary/scroll-to-top-button"; import { useTranslation } from "react-i18next"; @@ -20,51 +24,236 @@ const AllTerms = ({ terms }: any): JSX.Element => { return ( <> - - + {/* Hero Section */} + - {t("glossaryPageHeading")} - - + {t("glossaryPageHeading")} + + + {/* Quick intro text */} + + {t("glossaryPageDescription")} + + + + {/* Alphabet Navigation */} + - - - {terms.length === 0 ? ( - - ) : ( - <> - {terms.map((termItem: any) => { - return ( - - ); - })} - + + + {Object.keys( + terms.reduce((acc: Record, term: any) => { + const firstLetter = term.term[0].toUpperCase(); + if (!acc[firstLetter]) { + acc[firstLetter] = []; + } + acc[firstLetter].push(term); + return acc; + }, {}) + ) + .sort() + .map((letter) => ( + + {letter} + + ))} + + + + {/* Terms Grid */} + + + + {terms.length === 0 ? ( + + ) : ( + <> + {/* Category filters */} + + + + + {/* Terms Grid */} + + {/* Group and sort terms alphabetically */} + {Object.entries( + terms.reduce((acc: Record, term: any) => { + const firstLetter = term.term[0].toUpperCase(); + if (!acc[firstLetter]) { + acc[firstLetter] = []; + } + acc[firstLetter].push(term); + return acc; + }, {}) + ) + .sort(([a], [b]) => a.localeCompare(b)) + .map(([letter, letterTerms]) => ( + + + {letter} + + + {(letterTerms as any[]).sort((a,b) => a.term.localeCompare(b.term)).map((termItem: any) => ( + + + + + {termItem.category.toUpperCase()} + + + {termItem.term.toUpperCase()} + + + {termItem.definition} + + + + + ))} + + + ))} + + + {/* Bottom Actions */} + - - )} - + + + + )} - + From 490d27f523c8945d26b427932e3d735fea0e09af Mon Sep 17 00:00:00 2001 From: Narbeh Shahnazarian Date: Tue, 7 Jan 2025 22:31:52 -0800 Subject: [PATCH 4/6] upadtes page layout component --- src/components/layout/page/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/layout/page/index.tsx b/src/components/layout/page/index.tsx index c2c11fe..beac365 100644 --- a/src/components/layout/page/index.tsx +++ b/src/components/layout/page/index.tsx @@ -8,13 +8,13 @@ const PageLayout = ({ children }: { children?: object }): JSX.Element => { <>