Fix blog

starknet-io · Jan 18, 2024 · 907df26 · 907df26
1 parent efd8da1
commit 907df26
Show file tree

Hide file tree

Showing 22 changed files with 156 additions and 36 deletions.
diff --git a/workspaces/cms-config/src/collections/categories.ts b/workspaces/cms-config/src/collections/categories.ts
@@ -50,5 +50,25 @@ export const categoriesCollectionConfig = {
       display_fields: ["title"],
       options_length: 300
     },
+    {
+      name: 'default_filter',
+      label: 'Default filter',
+      widget: 'select',
+      options: [
+        {
+          label: 'Article',
+          value: 'article'
+        },
+        {
+          label: 'Video',
+          value: 'video'
+        },
+        {
+          label: 'Audio',
+          value: 'audio'
+        }
+      ],
+      required: false
+    }
   ],
 } satisfies CmsCollection;
diff --git a/workspaces/cms-config/src/collections/posts.ts b/workspaces/cms-config/src/collections/posts.ts
@@ -144,13 +144,22 @@ export const postsCollectionConfig = {
     },
     {
       name: "short_desc",
-      label: "Seo Description",
+      label: "Short Description",
       widget: "text",
     },
     {
       name: "post_desc",
-      label: "Post Description",
+      label: "Intro one liner",
+      widget: "text",
+      required: false,
+    },
+    {
+      name: "seo_desc",
+      label: "Seo Description",
+      hint: "If left empty, the short description will be used",
       widget: "text",
+      crowdin: true,
+      required: false,
     },
     {
       required: false,

diff --git a/workspaces/cms-config/src/main.ts b/workspaces/cms-config/src/main.ts
@@ -14,7 +14,9 @@ export const CMSConfig = {
     branch: "dev",
     base_url: "https://netlify-cms-auth.haim-6b2.workers.dev",
     preview_context: "Vercel – starknet-website",
+    local_backend: true,
   },
+  local_backend: true,
   publish_mode: "editorial_workflow",
   show_preview_links: true,
   media_folder: "public/assets",

diff --git a/workspaces/cms-data/src/categories.ts b/workspaces/cms-data/src/categories.ts
@@ -6,6 +6,7 @@ export interface Category {
   readonly slug: string;
   readonly parentCategory?: string;
   readonly name: string;
+  readonly default_filter?: string;
   readonly show_custom_featured_post?: boolean;
   readonly custom_featured_post?: string;
 }

diff --git a/workspaces/cms-data/src/posts.ts b/workspaces/cms-data/src/posts.ts
@@ -20,6 +20,7 @@ export interface Post extends Meta {
   readonly topic: string[];
   readonly short_desc: string;
   readonly post_desc: string;
+  readonly seo_desc: string;
   readonly post_type: string;
   readonly post_date: string;
   readonly toc: boolean;

diff --git a/workspaces/cms-scripts/src/data.ts b/workspaces/cms-scripts/src/data.ts
@@ -27,6 +27,7 @@ export interface Post extends Meta {
   readonly topic: string[];
   readonly short_desc: string;
   readonly post_desc: string;
+  readonly seo_desc: string;
   readonly post_type: string;
   readonly post_date: string;
   readonly published_date: string;
@@ -122,6 +123,10 @@ export async function fileToPost(
     timeToConsume = `${formatDuration(
       data.video?.data?.contentDetails?.duration || ""
     )} ${data.video?.data?.contentDetails?.duration ? "watch" : ""}`;
+  } else if (data.post_type === "audio") {
+    timeToConsume = `${formatDuration(
+      data.video?.data?.contentDetails?.duration || ""
+    )} ${data.video?.data?.contentDetails?.duration ? "listen" : ""}`;
   } else {
     timeToConsume = `${calculateReadingTime(fullText)} read`;
   }
@@ -133,6 +138,7 @@ export async function fileToPost(
     category: data.category,
     post_type: data.post_type,
     post_date: data.post_date,
+    seo_desc: data.seo_desc,
     published_date: data.published_date,
     toc: data.toc,
     video: data.video,

diff --git a/workspaces/website/src/blocks/MarkdownBlock.tsx b/workspaces/website/src/blocks/MarkdownBlock.tsx
@@ -77,7 +77,7 @@ export function MarkdownBlock({ body }: Props): JSX.Element {
           ul: (props) => <UnorderedList pl={1} mb={4} {...props} />,
           ol: (props) => <OrderedList mb={4} pl={1} {...props} />,
           li: (props) => <ListItem lineHeight="32px" {...props} />,
-          img: (props) => <Img my="40px" borderRadius="8px" {...props} />,
+          img: (props) => <Img my="40px" borderRadius="8px" _dark={{ background: 'white' }} {...props} />,
           a: (props) => <Link variant="standard" {...props} />,
           pre: (props) => {
             // @ts-ignore
@@ -97,7 +97,22 @@ export function MarkdownBlock({ body }: Props): JSX.Element {
             }else {
               return <pre {...props}>{props.children}</pre>
             }
-          }
+          },
+          table: (props) => (
+            <Box 
+              overflowX={'auto'}
+              _dark={{ 
+                th: {
+                  borderColor: 'fg-default'
+                },
+                td: {
+                  borderColor: 'fg-default'
+                }
+              }}
+            >
+              <table  {...props}>{props.children}</table>
+            </Box>
+          ),
         }}
       >
         {body}

diff --git a/workspaces/website/src/components/Blog/BlogCard.tsx b/workspaces/website/src/components/Blog/BlogCard.tsx
@@ -98,15 +98,35 @@ export const BlogCard = ({ isFeatured, onClickPlay, post, topics, ...rest }: Pro
             placeItems={'center'}
             overflow={"hidden"}
           >
+            {isMobile && <Image
+              url={post.image}
+              width={'100%'}
+              aspectRatio={16/9}
+              position={'absolute'}
+              sx={{
+                img: {
+                  aspectRatio: 16/9,
+                  filter: 'blur(6px)',
+                  objectFit: 'cover !important',
+                  transform: 'scale(1.05)',
+                  transition: 'transform 0.4s ease-in-out',
+                  width: '100%',
+                  minWidth: '100%',
+                  zIndex: -1
+                }
+              }}  
+            />}
+
             <Image
               url={post.image}
               height={'100%'}
               width={{
                 base: 'unset',
                 md: '100%'
               }}
+              zIndex={1}
             >
-              {(post.post_type === 'video' || post.post_type == 'audio') && (
+              {(post.post_type === 'video' || post.post_type === 'audio') && (
                 <Grid
                   placeItems={'center'}
                   position={'absolute'}
@@ -127,7 +147,7 @@ export const BlogCard = ({ isFeatured, onClickPlay, post, topics, ...rest }: Pro
           </Grid>
         )}
 
-        {post.post_type === 'video' && showVideo && (
+        {post.post_type !== 'article' && showVideo && (
           <Box>
             <YoutubePlayer
               opts={{
@@ -170,7 +190,7 @@ export const BlogCard = ({ isFeatured, onClickPlay, post, topics, ...rest }: Pro
           )}
 
           <Content
-            excerpt={post.post_desc ?? ""}
+            excerpt={post.short_desc ?? ""}
             noTopics={topicNames.length === 0}
             title={post.title}
           />

diff --git a/workspaces/website/src/components/Blog/BlogSection.tsx b/workspaces/website/src/components/Blog/BlogSection.tsx
@@ -2,7 +2,7 @@
  * Module dependencies
  */
 
-import { Box, Grid, Icon, useBreakpointValue } from "@chakra-ui/react";
+import { Box, Grid, Icon } from "@chakra-ui/react";
 import { Button } from "@ui/Button";
 import { Heading } from "@ui/Typography/Heading";
 import { useHits } from "react-instantsearch-hooks-web";
@@ -32,11 +32,26 @@ export type Props = {
 export const BlogSection = (props: Props) => {
   const { hideEmptySection, title, topics, url } = props;
   const { hits } = useHits<BlogHit>();
-  const isMobile = useBreakpointValue({ base: true, md: false })
+  const { videos, articles } = useMemo(() => {
+    const videos = hits.filter(({ post_type }) => post_type === 'video' || post_type === 'audio')
+    const articles = hits.filter(({ post_type }) => post_type === 'article')
+    return { videos, articles }
+  }, [hits])
+
   const posts = useMemo(() => {
-    const sectionSize = (hits.some(({ post_type }) => post_type !== 'video' && post_type !== 'audio') || isMobile) ? 3 : 2
-    const paddedHits = hits.concat(Array(sectionSize).fill(undefined))
-    return paddedHits.slice(0, sectionSize)
+    if (articles.length >= 3) {
+      return articles.slice(0, 3);
+    }
+
+    if (videos.length >= 2) {
+      return videos.slice(0, 2);
+    }
+
+    if (articles.length > 0) {
+      return articles.concat(Array(3 - articles.length).fill(undefined))
+    }
+
+    return videos.concat(Array(2 - videos.length).fill(undefined))
   }, [hits])
 
   return (
@@ -89,11 +104,11 @@ export const BlogSection = (props: Props) => {
                 gridTemplateColumns={`repeat(${posts.length}, 1fr)`}
                 minWidth={'600px'}
               >
-                {posts.map((hit, index) => {
+                {posts.map((hit) => {
                   if(hit) {
                     return (
                       <BlogCard
-                        key={index}
+                        key={hit.id}
                         post={hit}
                         topics={topics}
                       />

diff --git a/workspaces/website/src/components/Blog/CategoryList.tsx b/workspaces/website/src/components/Blog/CategoryList.tsx
@@ -67,7 +67,9 @@ export const CategoryList = ({ categories, params }: Props) => {
                 if (currentCat.slug === params.category) return;
                 setOpenCategory(category.slug);
 
-                navigate(`/${params.locale}/content/category/${currentCat.slug}`)
+                navigate(`/${params.locale}/content/category/${currentCat.slug}${
+                  currentCat.default_filter ? `?postType=${currentCat.default_filter}` : ''
+                }`)
               }}
               openCategory={openCategory}
               setOpenCategory={setOpenCategory}

diff --git a/workspaces/website/src/components/Blog/FeaturedSection/Carousel/index.tsx b/workspaces/website/src/components/Blog/FeaturedSection/Carousel/index.tsx
@@ -107,10 +107,7 @@ export const Carousel: React.FunctionComponent<CarouselProps> = ({
         })}
       </motion.div>
 
-      <Box position={'relative'} marginLeft={{
-        base: '-24px',
-        sm: 'auto'
-      }}>
+      <Box position={'relative'}>
         {!isMobile && (
           <Flex
             gap={'12px'}

diff --git a/workspaces/website/src/components/Blog/FeaturedSection/index.tsx b/workspaces/website/src/components/Blog/FeaturedSection/index.tsx
@@ -99,7 +99,7 @@ const FeaturedSectionContent = ({ topics }: Pick<Props,'topics'>) => {
       }}
       overflowX={{
         base: 'visible',
-        md: 'hidden'
+        sm: 'hidden'
       }}
       position={'relative'}
       sx={!isMobile ? {

diff --git a/workspaces/website/src/components/Blog/Filters/Button.tsx b/workspaces/website/src/components/Blog/Filters/Button.tsx
@@ -54,6 +54,7 @@ export const FilterButton = ({ categories, params, topics, ...props}: Props) =>
       width={'100%'}
       transition={'transform 0.6s cubic-bezier(.08,.52,.52,1)'}
       transform={scrollDirection === 'up' ? 'translateY(200px)' : 'translateY(0)'}
+      zIndex={10}
     >
       <FilterDrawer
         topics={topics}

diff --git a/workspaces/website/src/components/Blog/Filters/Drawer.tsx b/workspaces/website/src/components/Blog/Filters/Drawer.tsx
@@ -126,6 +126,10 @@ export const FilterDrawer = ({ categories, params, topics, ...props }: Props) =>
                           if (currentCat.slug === params.category) return;
 
                           setCurrentCategory(currentCat.slug);
+
+                          if(currentCat.default_filter) {
+                            setCurrentPostType(currentCat.default_filter);
+                          }
                         }}
                         openCategory={openCategory}
                         setOpenCategory={setOpenCategory}

diff --git a/workspaces/website/src/components/Blog/InfinitePostsSection.tsx b/workspaces/website/src/components/Blog/InfinitePostsSection.tsx
@@ -49,7 +49,7 @@ export const InfinitePostsSection = (props: Props) => {
             lg: '600px'
           }}
         >
-          {hits.map((hit, index) => (
+          {hits.map((hit) => (
             <BlogCard
               key={hit.id}
               post={hit}

diff --git a/workspaces/website/src/components/Blog/TopicsList.tsx b/workspaces/website/src/components/Blog/TopicsList.tsx
@@ -141,8 +141,8 @@ export const TopicList = (props: Props) => {
           '&::-webkit-scrollbar': {
             display: 'none'
           },
-          '-ms-overflow-style': 'none',
-          'scrollbar-width': 'none',
+          msOverflowStyle: 'none',
+          scrollbarWidth: 'none',
         }}
       >
         {topics.map((topic, index) => (

diff --git a/workspaces/website/src/components/Button/ButtonStyles.ts b/workspaces/website/src/components/Button/ButtonStyles.ts
@@ -771,11 +771,12 @@ const categoryVertical = defineStyle({
   borderRadius: 0,
   fontWeight: "medium",
   fontSize: "14px",
-  lineHeight: "14px",
-  padding: "26px 12px",
+  lineHeight: "20px",
+  padding: "15px 12px",
   color: "tabs-fg",
   borderLeftWidth: "1px",
   borderColor: "tabs-border-bg",
+  height: 'max-content',
 
   bg: "tabs-bg",
   _hover: {

diff --git a/workspaces/website/src/pages/(components)/TableOfContents/TableOfContents.tsx b/workspaces/website/src/pages/(components)/TableOfContents/TableOfContents.tsx
@@ -77,7 +77,7 @@ export function TableOfContents(props: Props) {
       </Heading>
       {props.headings.map((h, i) => (
         <Toc.Item key={i} isActive={`toc-${slugify(h.title)}` === activeId} pl={`${h.level * 16}px`}>
-          <a href={`#toc-${slugify(h.title)}`}>{h.title}</a>
+          <a style={{ lineHeight: '1.7em' }} href={`#toc-${slugify(h.title)}`}>{h.title}</a>
         </Toc.Item>
       ))}
     </Toc.Root>

diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx
@@ -324,14 +324,14 @@ export function PostPage(props: Props): JSX.Element {
         indexName={`web_posts_${env?.ALGOLIA_INDEX}`}
       >
         <Configure
-          hitsPerPage={4}
+          hitsPerPage={5}
           facetsRefinements={{
-            category: postCategories.map((c) => c.id).slice(0,1),
+            topic: post.topic[0] ? [post.topic[0]] : [],
             locale: [locale]
           }}
         />
 
-        <RelatedSection topics={topics}/>
+        <RelatedSection post={post} topics={topics}/>
       </InstantSearch>
     </Container>
   )
@@ -341,8 +341,9 @@ export function PostPage(props: Props): JSX.Element {
  * `RelatedSection` component.
  */
 
-function RelatedSection({ topics }: Pick<Props,'topics'>) {
+function RelatedSection({ post, topics }: Pick<Props,'post' | 'topics'>) {
   const { hits } = useHits<BlogHit>();
+  const normalizedHits = hits.filter((hit) => hit.id !== post.id).slice(0,4);
 
   return (
     <Grid
@@ -352,7 +353,7 @@ function RelatedSection({ topics }: Pick<Props,'topics'>) {
       maxWidth={'100%'}
       overflowX={'auto'}
     >
-      {hits.map((hit, index) => (
+      {normalizedHits.map((hit, index) => (
         <BlogCard
           key={index}
           post={hit}

diff --git a/workspaces/website/src/pages/content/@slug/index.page.server.tsx b/workspaces/website/src/pages/content/@slug/index.page.server.tsx
@@ -45,7 +45,7 @@ export async function onBeforeRender(pageContext: PageContextServer) {
       pageProps,
       documentProps: {
         title: post.seoTitle ?? post.title,
-        description: post.short_desc,
+        description: post.seo_desc ?? post.short_desc,
         image: `${import.meta.env.VITE_SITE_URL}${post.image}`,
       } satisfies DocumentProps,
     },

diff --git a/workspaces/website/src/pages/content/PostsPage.tsx b/workspaces/website/src/pages/content/PostsPage.tsx
@@ -153,7 +153,7 @@ export function PostsPage({
                 indexName={`web_posts_${env.ALGOLIA_INDEX}`}
               >
                 <Configure
-                  hitsPerPage={3}
+                  hitsPerPage={6}
                   facetsRefinements={{
                     category: [category.id],
                     locale: [params.locale]