make explore page gallery selects powered by sanity (#2399)

* make explore page gallery selects powered by sanity * remove log * add see all link
gallery-so · Apr 5, 2024 · fbd84d2 · fbd84d2
1 parent 1bf6f18
commit fbd84d2
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 38 deletions.
diff --git a/apps/web/pages/explore.tsx b/apps/web/pages/explore.tsx
@@ -4,9 +4,15 @@ import { HomeNavbar } from '~/contexts/globalLayout/GlobalNavbar/HomeNavbar/Home
 import { StandardSidebar } from '~/contexts/globalLayout/GlobalSidebar/StandardSidebar';
 import { exploreQuery } from '~/generated/exploreQuery.graphql';
 import GalleryRoute from '~/scenes/_Router/GalleryRoute';
+import { CmsTypes } from '~/scenes/ContentPages/cms_types';
 import ExplorePage from '~/scenes/Home/ExploreHomePage';
+import { fetchSanityContent } from '~/utils/sanity';
 
-export default function Explore() {
+type Props = {
+  gallerySelectsContent: CmsTypes.ExplorePageGallerySelectsList;
+};
+
+export default function Explore({ gallerySelectsContent }: Props) {
   const query = useLazyLoadQuery<exploreQuery>(
     graphql`
       query exploreQuery {
@@ -21,7 +27,7 @@ export default function Explore() {
     <GalleryRoute
       navbar={<HomeNavbar queryRef={query} />}
       sidebar={<StandardSidebar queryRef={query} />}
-      element={<ExplorePage />}
+      element={<ExplorePage gallerySelectsContent={gallerySelectsContent} />}
     />
   );
 }
@@ -57,7 +63,23 @@ export default function Explore() {
  *   7) transition ends
  */
 export const getServerSideProps = async () => {
+  const content = await fetchSanityContent(`*[_type == "explorePageGallerySelectsList"]{
+    "articleList": articleList[]->{
+      coverImage{
+        asset->{
+          url
+        },
+        alt
+      },
+      title,
+      previewText,
+      articleUrl
+    }
+  }`);
+
   return {
-    props: {},
+    props: {
+      gallerySelectsContent: content[0],
+    },
   };
 };
diff --git a/apps/web/src/components/Explore/Explore.tsx b/apps/web/src/components/Explore/Explore.tsx
@@ -1,14 +1,20 @@
 import { Suspense } from 'react';
 import styled from 'styled-components';
 
+import { CmsTypes } from '~/scenes/ContentPages/cms_types';
+
 import { VStack } from '../core/Spacer/Stack';
 import FeaturedUsers, { FeaturedUsersLoadingSkeleton } from './FeaturedUsers';
 import GallerySelects from './GallerySelects';
 
-export default function Explore() {
+type Props = {
+  gallerySelectsContent: CmsTypes.ExplorePageGallerySelectsList;
+};
+
+export default function Explore({ gallerySelectsContent }: Props) {
   return (
     <StyledExplorePage gap={48}>
-      <GallerySelects />
+      <GallerySelects gallerySelectsContent={gallerySelectsContent} />
       <Suspense fallback={<FeaturedUsersLoadingSkeleton />}>
         <FeaturedUsers />
       </Suspense>

diff --git a/apps/web/src/components/Explore/GallerySelects.tsx b/apps/web/src/components/Explore/GallerySelects.tsx
@@ -1,46 +1,41 @@
+import { useMemo } from 'react';
 import colors from 'shared/theme/colors';
 import styled from 'styled-components';
 
+import { useIsMobileWindowWidth } from '~/hooks/useWindowSize';
 import ArrowUpRightIcon from '~/icons/ArrowUpRightIcon';
+import { CmsTypes } from '~/scenes/ContentPages/cms_types';
 
 import breakpoints from '../core/breakpoints';
 import GalleryLink from '../core/GalleryLink/GalleryLink';
 import { HStack, VStack } from '../core/Spacer/Stack';
 import { BaseM, TitleDiatypeL, TitleM } from '../core/Text/Text';
 
-const ELLE_ARTICLE_URL = 'https://gallery.mirror.xyz/bcWLpLKxVVJCOvzRHY7F-XAD5PO-3T-Ahc9pZzAhX6k';
-function Article() {
+function Article({ article }: { article: CmsTypes.ExplorePageGallerySelectsArticle }) {
   return (
     <StyledArticle
       eventElementId="Explore Page Article"
       eventName="Clicked Explore Page Article"
-      href={ELLE_ARTICLE_URL}
+      properties={{ articleTitle: article.title, articleUrl: article.articleUrl }}
+      href={article.articleUrl}
       target="_blank"
       rel="noreferrer"
     >
       <StyledArticleContent>
-        <StyledArticleImage src="https://images.mirror-media.xyz/publication-images/BIYb97ZD_2ZiEm5UcQUJn.png?height=2284&width=4568" />
+        <StyledArticleImage src={article.coverImage.asset.url} />
         <StyledArticleText justify="space-between" gap={24}>
           <VStack gap={12}>
             <TitleM>
-              <strong>Elle's Ode to Internet Subcultures </strong>
+              <strong>{article.title}</strong>
             </TitleM>
-            <StyledArticleDescription>
-              Elle’s on-chain creative journey began in 2021 when she started minting NFTs on the
-              Fantom network. She combines her interest in alternative/niche, net-native currency
-              and cypherpunk principles with her multiple creative skills. Her work, characterized
-              by pixel art and a very specific color palette, reflects her thoughtful engagement
-              with many of the web subcultures facets. In this chat, she shares about her
-              background, her experiences on Gallery, and how such a move can emphasize the value of
-              on-chain art. ⌒ ﾟ( -⩊- )ﾟ⌒
-            </StyledArticleDescription>
+            <StyledArticleDescription>{article.previewText}</StyledArticleDescription>
+            <ArticleLinkButton>
+              <HStack gap={4} align="center" justify="center">
+                <BaseM color={colors.white}>View Article</BaseM>
+                <ArrowUpRightIcon />
+              </HStack>
+            </ArticleLinkButton>
           </VStack>
-          <ArticleLinkButton>
-            <HStack gap={4} align="center" justify="center">
-              <BaseM color={colors.white}>View Article</BaseM>
-              <ArrowUpRightIcon />
-            </HStack>
-          </ArticleLinkButton>
         </StyledArticleText>
       </StyledArticleContent>
     </StyledArticle>
@@ -50,11 +45,17 @@ function Article() {
 const StyledArticle = styled(GalleryLink)`
   width: 100%;
   text-decoration: none;
+
+  @media only screen and ${breakpoints.desktop} {
+    max-height: 302px;
+  }
 `;
 
 const StyledArticleContent = styled(VStack)`
   border-radius: 8px;
   gap: 24px 16px;
+  height: 100%;
+  box-sizing: content-box;
 
   @media only screen and ${breakpoints.tablet} {
     background-color: ${colors.offWhite};
@@ -72,10 +73,22 @@ const StyledArticleImage = styled.img`
   @media only screen and ${breakpoints.tablet} {
     width: 50%;
   }
+  ratio: 1;
 `;
 
 const StyledArticleDescription = styled(BaseM)`
   color: ${colors.shadow};
+
+  @media only screen and ${breakpoints.tablet} {
+    max-height: 180px;
+    display: -webkit-box;
+    overflow: hidden;
+
+    -webkit-box-orient: vertical;
+    line-clamp: 9;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 9;
+  }
 `;
 
 const ArticleLinkButton = styled.div`
@@ -90,16 +103,44 @@ const ArticleLinkButton = styled.div`
   }
 `;
 
-export default function GallerySelects() {
+type Props = {
+  gallerySelectsContent: CmsTypes.ExplorePageGallerySelectsList;
+};
+
+export default function GallerySelects({ gallerySelectsContent }: Props) {
+  const articlesToShow = useMemo(() => {
+    return gallerySelectsContent.articleList.slice(0, 2);
+  }, [gallerySelectsContent.articleList]);
+  const isMobile = useIsMobileWindowWidth();
   return (
     <StyledTrendingSection gap={12}>
-      <VStack gap={4}>
-        <Title>Gallery Selects</Title>
-        <TitleDiatypeL color={colors.metal}>
-          Conversations with artists and collectors
-        </TitleDiatypeL>
-      </VStack>
-      <Article />
+      <HStack justify="space-between" align="flex-end">
+        <VStack gap={4}>
+          <Title>Gallery Selects</Title>
+          <TitleDiatypeL color={colors.metal}>
+            Conversations with artists and collectors
+          </TitleDiatypeL>
+        </VStack>
+        {!isMobile && (
+          <GalleryLink
+            href="https://gallery.mirror.xyz"
+            eventElementId="Explore Page Gallery Selects See All Button"
+            eventName="Clicked Explore Page Gallery Selects See All Button"
+          >
+            <HStack gap={4} align="center">
+              <BaseM color={colors.shadow}>
+                <strong>See all</strong>
+              </BaseM>
+              <ArrowUpRightIcon color={colors.shadow} />
+            </HStack>
+          </GalleryLink>
+        )}
+      </HStack>
+      <ArticleContainer>
+        {articlesToShow.map((article) => (
+          <Article key={article.title} article={article} />
+        ))}
+      </ArticleContainer>
     </StyledTrendingSection>
   );
 }
@@ -111,3 +152,12 @@ const StyledTrendingSection = styled(VStack)`
 const Title = styled(TitleDiatypeL)`
   font-size: 24px;
 `;
+
+const ArticleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  @media only screen and ${breakpoints.desktop} {
+    flex-direction: row;
+  }
+`;
diff --git a/apps/web/src/icons/ArrowUpRightIcon.tsx b/apps/web/src/icons/ArrowUpRightIcon.tsx
@@ -1,8 +1,9 @@
-export default function ArrowUpRightIcon() {
+export default function ArrowUpRightIcon({ color }: { color?: string }) {
+  const stroke = color || '#FEFEFE';
   return (
     <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M6.5 3.33331H13.1667V9.99998" stroke="#FEFEFE" strokeMiterlimit="10" />
-      <path d="M13.1667 3.33331L4.5 12" stroke="#FEFEFE" strokeMiterlimit="10" />
+      <path d="M6.5 3.33331H13.1667V9.99998" stroke={stroke} strokeMiterlimit="10" />
+      <path d="M13.1667 3.33331L4.5 12" stroke={stroke} strokeMiterlimit="10" />
     </svg>
   );
 }
diff --git a/apps/web/src/scenes/ContentPages/cms_types.ts b/apps/web/src/scenes/ContentPages/cms_types.ts
@@ -93,4 +93,19 @@ export namespace CmsTypes {
     featuredProfiles: FeaturedProfile[];
     testimonials: Testimonial[];
   }
+
+  export interface ExplorePageGallerySelectsArticle {
+    _id: string;
+    _type: 'explorePageGallerySelectsArticle';
+    coverImage: Image;
+    title: string;
+    previewText: string;
+    articleUrl: string;
+  }
+
+  export interface ExplorePageGallerySelectsList {
+    _id: string;
+    _type: 'explorePageGallerySelectsList';
+    articleList: ExplorePageGallerySelectsArticle[];
+  }
 }
diff --git a/apps/web/src/scenes/Home/ExploreHomePage.tsx b/apps/web/src/scenes/Home/ExploreHomePage.tsx
@@ -5,7 +5,13 @@ import breakpoints, { pageGutter } from '~/components/core/breakpoints';
 import Explore from '~/components/Explore/Explore';
 import { useGlobalNavbarHeight } from '~/contexts/globalLayout/GlobalNavbar/useGlobalNavbarHeight';
 
-export default function ExploreHomePage() {
+import { CmsTypes } from '../ContentPages/cms_types';
+
+type Props = {
+  gallerySelectsContent: CmsTypes.ExplorePageGallerySelectsList;
+};
+
+export default function ExploreHomePage({ gallerySelectsContent }: Props) {
   const navbarHeight = useGlobalNavbarHeight();
 
   return (
@@ -14,7 +20,7 @@ export default function ExploreHomePage() {
         <title>Gallery | Explore</title>
       </Head>
       <StyledPage navbarHeight={navbarHeight}>
-        <Explore />
+        <Explore gallerySelectsContent={gallerySelectsContent} />
       </StyledPage>
     </>
   );