chore: improve navigation and blog

apps/website/src/components/layout/navigation.tsx

@@ -52,39 +52,48 @@ const Header = () => {
 
   return (
     <HStack flex="1" ps="4">
-      <Box>
-        {isDesktop && (
-          <SearchInput
-            placeholder="Search docs..."
-            size="sm"
-            borderRadius="md"
-            onFocus={onOpen}
-            rightElement={<Kbd fontSize="md">/</Kbd>}
-          />
-        )}
-        <GlobalSearch
-          isOpen={isOpen}
-          onClose={onClose}
-          onSelect={(value) => {
-            console.log(value)
-          }}
-        />
-      </Box>
-      <HStack spacing="2" flexShrink={0} flex="1" justifyContent="flex-end">
+      <HStack spacing="2" flexShrink={0} flex="1" justifyContent="flex-start">
         {headerNav.map(({ href, id, ...props }, i) => {
           return (
             <NavLink
               display={{ base: 'none', lg: 'block' }}
               href={href || `/#${id}`}
               key={i}
               isActive={
-                (id && activeId === id) ||
-                (href && !!router.asPath.match(new RegExp(href)))
+                !!(id && activeId === id) ||
+                !!(href && !!router.asPath.match(new RegExp(href)))
               }
               {...props}
             />
           )
         })}
+      </HStack>
+      <HStack>
+        <Box>
+          {isDesktop && (
+            <SearchInput
+              placeholder="Search docs..."
+              size="sm"
+              borderRadius="md"
+              onFocus={onOpen}
+              rightElement={<Kbd fontSize="md">/</Kbd>}
+            />
+          )}
+          <GlobalSearch
+            isOpen={isOpen}
+            onClose={onClose}
+            onSelect={(value) => {
+              console.log(value)
+            }}
+          />
+        </Box>
+
+        <NavLink
+          href="/pricing"
+          label="Buy Pro"
+          variant="primary"
+          fontSize="sm"
+        />
 
         <Tooltip label="Feedback &amp; Roadmap">
           <IconButton

apps/website/src/data/header-nav.tsx

@@ -19,13 +19,6 @@ const headerNav: NavLinkProps[] = [
     ...hideMobile,
   },
   { href: '/docs', label: 'Documentation', ...hideMobile },
-  {
-    href: '/pricing',
-    label: 'Buy Pro',
-    variant: 'solid',
-    colorScheme: 'primary',
-    fontSize: 'sm',
-  },
 ]
 
 export default headerNav

apps/website/src/docs/components/secondary-nav/secondary-nav.tsx

@@ -10,19 +10,20 @@ import {
   Stack,
   useBreakpointValue,
   Icon,
+  HStack,
 } from '@chakra-ui/react'
 import { useColorModeValue } from '@chakra-ui/system'
 import { ResponsiveMenu, ResponsiveMenuList } from '@saas-ui-pro/react'
 import Link from 'next/link'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
-import { FiChevronDown } from 'react-icons/fi'
+import { FiArrowLeft, FiChevronDown } from 'react-icons/fi'
 
 type SecondaryNavLinkProps = {
   href: string
   isActive?: boolean
   children: React.ReactNode
-  label?: string
+  label?: string | JSX.Element
 }
 
 const SecondaryNavLink = ({
@@ -52,7 +53,13 @@ const SecondaryNavLink = ({
   )
 }
 
-export const docsNav = [
+type Links = {
+  href: string
+  label: string | JSX.Element
+  match?: (asPath: string, href: string) => boolean
+}[]
+
+export const docsNav: Links = [
   {
     href: '/docs',
     label: 'Getting started',
@@ -93,12 +100,23 @@ export const docsNav = [
   },
 ]
 
-const blogLinks = [
+const blogLinks: Links = [
   {
     href: '/blog',
-    label: 'Blog',
-    match: (asPath: string, href: string) =>
-      href.startsWith('/blog') && asPath.startsWith('/blog'),
+    label: (
+      <HStack role="group" spacing="1">
+        <Icon
+          as={FiArrowLeft}
+          _groupHover={{
+            transform: 'translateX(-5px)',
+            transitionProperty: 'common',
+            transitionDuration: 'normal',
+          }}
+        />{' '}
+        <span>All articles</span>
+      </HStack>
+    ),
+    match: (asPath: string, href: string) => asPath === '/blog',
   },
 ]
 
@@ -109,7 +127,9 @@ export const SecondaryNav = (props) => {
 
   const links = isBlog ? blogLinks : docsNav
 
-  const activeItem = links.find((link) => link.match(router.asPath, link.href))
+  const activeItem = links.find((link) =>
+    link.match?.(router.asPath, link.href)
+  )
 
   return (
     <Box

apps/website/src/pages/api/og.tsx

@@ -6,7 +6,7 @@ export const config = {
 }
 
 const font = fetch(
-  new URL('../../../public/fonts/Inter-Regular.ttf', import.meta.url)
+  new URL('../../../public/fonts/Inter-SemiBold.ttf', import.meta.url)
 ).then((res) => res.arrayBuffer())
 // const fontBold = fetch(
 //   new URL('../../../public/fonts/Inter-SemiBold.ttf', import.meta.url)
@@ -105,6 +105,7 @@ export default async function handler(req: NextRequest) {
                 fontWeight: 700,
                 color: 'white',
                 marginBottom: 20,
+                fontSize: 56,
               }}
             >
               {title}

apps/website/src/pages/blog.tsx

@@ -1,102 +1,120 @@
-import { GetStaticPaths, GetStaticProps } from 'next'
+import { GetStaticProps } from 'next'
 import {
   Box,
   Heading,
   Text,
-  Stack,
   Container,
-  LinkBox,
-  LinkOverlay,
-  useColorModeValue,
-  Button,
-  Icon,
-  VStack,
   HStack,
   Image,
+  SimpleGrid,
+  Card,
+  AspectRatio,
+  CardBody,
+  Avatar,
 } from '@chakra-ui/react'
 
 import SEO from '@/components/seo'
 
 import { allBlogs } from '.contentlayer/generated'
 
-import Link, { ButtonLink } from '@/components/link'
+import Link from '@/components/link'
 import { compareDesc } from 'date-fns'
-import { FiArrowRight } from 'react-icons/fi'
+import {
+  StructuredList,
+  StructuredListCell,
+  StructuredListItem,
+} from '@saas-ui/react'
 
 const Post = (props) => {
-  const { title, description, slug, image, status } = props
+  const { title, description, slug, image, status, author, avatar, size } =
+    props
 
   return (
-    <LinkBox as="article" role="group">
-      <HStack alignItems="flex-start" spacing="8">
-        <Box
-          width="300px"
-          height="150px"
-          flexShrink="0"
-          overflow="hidden"
-          borderRadius="lg"
-        >
-          <Image src={image || `/api/og?title=${title}`} alt={title} />
-        </Box>
-        <Box pt="4">
-          <Heading size="md" mb="2">
-            <LinkOverlay
-              as={Link}
-              href={slug}
-              _hover={{ textDecoration: 'none' }}
-            >
-              {title}
-            </LinkOverlay>
-          </Heading>
-          <Text color={useColorModeValue('gray.500', 'gray.400')} mb="4">
-            {description}
+    <Card
+      as={Link}
+      href={slug}
+      rounded="xl"
+      overflow="hidden"
+      _hover={{ bg: 'gray.100' }}
+      _dark={{ bg: 'gray.800', _hover: { bg: 'gray.700' } }}
+      transitionProperty="common"
+      transitionDuration="normal"
+      position="relative"
+    >
+      <AspectRatio ratio={16 / 9} width="full">
+        <Image
+          src={image || `/api/og?title=${title}`}
+          alt={title}
+          width="100%"
+        />
+      </AspectRatio>
+
+      <CardBody
+        position="absolute"
+        bgGradient="linear(to-t, gray.900, transparent)"
+        bottom="0"
+        width="full"
+        pt="4"
+        px={size === 'sm' ? '4' : '6'}
+      >
+        <HStack>
+          <Avatar
+            size={size === 'sm' ? '2xs' : 'xs'}
+            name={author}
+            src={avatar}
+          />{' '}
+          <Text fontSize="sm" color="muted" display="none">
+            {author}
           </Text>
-          <ButtonLink
-            size="sm"
-            href={slug}
-            variant="outline"
-            _hover={{
-              bg: 'whiteAlpha.200',
-            }}
-            rightIcon={
-              <Icon
-                as={FiArrowRight}
-                sx={{
-                  transitionProperty: 'common',
-                  transitionDuration: 'normal',
-                  _groupHover: {
-                    transform: 'translate(5px)',
-                  },
-                }}
-              />
-            }
-          >
-            Continue reading
-          </ButtonLink>
-        </Box>
-      </HStack>
-    </LinkBox>
+        </HStack>
+        {image ? (
+          <Heading size="md" mt="2">
+            {title}
+          </Heading>
+        ) : null}
+      </CardBody>
+    </Card>
   )
 }
 
 const BlogPage = ({ blogs }) => {
+  const latest = blogs.slice(0, 2)
+  const recent = blogs.slice(2, 5)
+  const older = blogs.slice(5)
+
   return (
     <Box py={20}>
       <SEO
         title="Blog"
         description="A blog about UI development"
         titleTemplate="%s - Saas UI"
       />
-      <Container maxW="4xl">
-        <Heading size="2xl" as="h2" mb="12">
+      <Container maxW="container.lg">
+        <Heading size="xl" as="h2" mb="12">
           Blog
         </Heading>
 
-        <Stack spacing="12">
-          {blogs.map((blog, i) => {
+        <SimpleGrid columns={2} spacing={8} mb={8}>
+          {latest.map((blog, i) => {
             return <Post key={blog._id} {...blog} />
           })}
-        </Stack>
+        </SimpleGrid>
+
+        <SimpleGrid columns={3} spacing={8}>
+          {recent.map((blog, i) => {
+            return <Post key={blog._id} {...blog} size="sm" />
+          })}
+        </SimpleGrid>
+
+        <StructuredList>
+          {older.map((post, i) => {
+            return (
+              <StructuredListItem key={post.slug} href={post.slug}>
+                <StructuredListCell>{post.title}</StructuredListCell>
+              </StructuredListItem>
+            )
+          })}
+        </StructuredList>
       </Container>
     </Box>
   )