diff --git a/components/markets/MarketsList.tsx b/components/markets/MarketsList.tsx index d7a87f84d..7d713bc7f 100644 --- a/components/markets/MarketsList.tsx +++ b/components/markets/MarketsList.tsx @@ -19,8 +19,6 @@ import { Topics } from "components/front-page/Topics"; export type MarketsListProps = { className?: string; - cmsTopics: CmsTopicHeader[]; - cmsTopicPlaceholders: string[]; }; const useChangeQuery = ( @@ -59,11 +57,7 @@ const useChangeQuery = ( }, [withLiquidityOnly]); }; -const MarketsList = ({ - className = "", - cmsTopics, - cmsTopicPlaceholders, -}: MarketsListProps) => { +const MarketsList = ({ className = "" }: MarketsListProps) => { const [filters, setFilters] = useState(); const [orderBy, setOrderBy] = useState(); const [withLiquidityOnly, setWithLiquidityOnly] = useState(); @@ -104,12 +98,6 @@ const MarketsList = ({ data-testid="marketsList" id={"market-list"} > - {process.env.NEXT_PUBLIC_SHOW_TOPICS === "true" && ( -
- -
- )} - { +export const OgHead = ({ title, description, image }: OgProps) => { + description ??= defaultDescription; + return ( - {props.title && ( + {title && ( <> - {props.title} - - + {title} + + )} <> - + - {props.image && ( + {image && ( <> - + )} diff --git a/pages/markets/index.tsx b/pages/markets/index.tsx index 4aa32462a..d993f69e5 100644 --- a/pages/markets/index.tsx +++ b/pages/markets/index.tsx @@ -8,33 +8,20 @@ import { CmsTopicHeader, getCmsTopicHeaders } from "lib/cms/topics"; import { getPlaiceholders } from "lib/util/getPlaiceHolders"; const MarketsPage: NextPage = ({ - cmsTopics, cmsTopicPlaceholders, }: { - cmsTopics: CmsTopicHeader[]; cmsTopicPlaceholders: string[]; }) => { - return ( - - ); + return ; }; export async function getStaticProps() { const queryClient = new QueryClient(); - const [cmsMarketMetaData, cmsTopics] = await Promise.all([ + const [cmsMarketMetaData] = await Promise.all([ getCmsMarketMetadataForAllMarkets(), - getCmsTopicHeaders(), ]); - const cmsTopicPlaceholders = await getPlaiceholders( - cmsTopics.map((topic) => topic.thumbnail ?? ""), - { size: 16 }, - ).then((plh) => plh.map((c) => c.base64) ?? []); - for (const marketCmsData of cmsMarketMetaData) { if (marketCmsData.marketId) { queryClient.setQueryData( @@ -47,8 +34,6 @@ export async function getStaticProps() { return { props: { dehydratedState: dehydrate(queryClient), - cmsTopics, - cmsTopicPlaceholders, }, revalidate: environment === "production" diff --git a/pages/topics/[topic].tsx b/pages/topics/[topic].tsx index a67d26e77..03b998875 100644 --- a/pages/topics/[topic].tsx +++ b/pages/topics/[topic].tsx @@ -1,7 +1,8 @@ -import { PortableText } from "@portabletext/react"; +import { PortableText, toPlainText } from "@portabletext/react"; import { FullMarketFragment } from "@zeitgeistpm/indexer"; import { ZeitgeistIpfs, create } from "@zeitgeistpm/sdk"; import MarketCard from "components/markets/market-card"; +import { OgHead } from "components/meta/OgHead"; import { sanityImageBuilder } from "lib/cms/sanity"; import { CmsTopicFull, @@ -74,6 +75,10 @@ const TopicPage: NextPage<{ return (
+ {banner && (
- - + +
- - + +
- {restMarkets.map((market) => ( - + {restMarkets.map(({ market, stats }) => ( + ))}
- {markets.map((market) => ( - + {markets.map(({ market, stats }) => ( + ))}
) : ( <>
- {markets.map((market) => ( - + {markets.map(({ market, stats }) => ( + ))}