From eae4199303b6f21cfc03cdcd3fd9ccc173aec3c5 Mon Sep 17 00:00:00 2001 From: Pagebakers Date: Thu, 9 Nov 2023 10:36:12 +0100 Subject: [PATCH] chore: improve navigation and blog --- .../src/components/layout/navigation.tsx | 51 +++--- apps/website/src/data/header-nav.tsx | 7 - .../secondary-nav/secondary-nav.tsx | 36 ++++- apps/website/src/pages/api/og.tsx | 3 +- apps/website/src/pages/blog.tsx | 146 ++++++++++-------- apps/website/src/styles/theme.ts | 21 +-- apps/website/src/styles/typography.ts | 51 ++++++ 7 files changed, 195 insertions(+), 120 deletions(-) create mode 100644 apps/website/src/styles/typography.ts diff --git a/apps/website/src/components/layout/navigation.tsx b/apps/website/src/components/layout/navigation.tsx index f2136759c..135df64fa 100644 --- a/apps/website/src/components/layout/navigation.tsx +++ b/apps/website/src/components/layout/navigation.tsx @@ -52,25 +52,7 @@ const Header = () => { return ( - - {isDesktop && ( - /} - /> - )} - { - console.log(value) - }} - /> - - + {headerNav.map(({ href, id, ...props }, i) => { return ( { 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} /> ) })} + + + + {isDesktop && ( + /} + /> + )} + { + console.log(value) + }} + /> + + + 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: ( + + {' '} + All articles + + ), + 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 ( 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} diff --git a/apps/website/src/pages/blog.tsx b/apps/website/src/pages/blog.tsx index 060f459ba..2551d5526 100644 --- a/apps/website/src/pages/blog.tsx +++ b/apps/website/src/pages/blog.tsx @@ -1,85 +1,87 @@ -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 ( - - - - {title} - - - - - {title} - - - - {description} + + + {title} + + + + + {' '} + + {author} - - } - > - Continue reading - - - - + + {image ? ( + + {title} + + ) : null} + + ) } const BlogPage = ({ blogs }) => { + const latest = blogs.slice(0, 2) + const recent = blogs.slice(2, 5) + const older = blogs.slice(5) + return ( { description="A blog about UI development" titleTemplate="%s - Saas UI" /> - - + + Blog - - {blogs.map((blog, i) => { + + {latest.map((blog, i) => { return })} - + + + + {recent.map((blog, i) => { + return + })} + + + + {older.map((post, i) => { + return ( + + {post.title} + + ) + })} + ) diff --git a/apps/website/src/styles/theme.ts b/apps/website/src/styles/theme.ts index ebb74cc4a..0ac0e898a 100644 --- a/apps/website/src/styles/theme.ts +++ b/apps/website/src/styles/theme.ts @@ -14,6 +14,7 @@ import Section from './components/section' import SectionTitle from './components/section-title' import colors from './colors' +import { textStyles, fontSizes } from './typography' import mdx from './mdx' @@ -33,25 +34,6 @@ const styles = { }), } -const textStyles = { - pageTitle: { - fontSize: { base: '2xl', sm: '3xl', md: '5xl', lg: '6xl' }, - fontWeight: 'extrabold', - lineHeight: '1.2', - letterSpacing: '-2%', - }, - h2: { - fontSize: ['36px', '48px'], - fontWeight: '900', - lineHeight: '110%', - letterSpacing: '-1%', - }, - subtitle: { - fontSize: { base: 'sm', sm: 'sm', md: '2xl' }, - fontWeight: 'normal', - }, -} - const breakpoints = { sm: '30em', md: '48em', @@ -93,6 +75,7 @@ const theme = extendTheme( }, styles, textStyles, + fontSizes, fonts: { ...baseTheme.fonts, body: 'InterVariable, sans-serif', diff --git a/apps/website/src/styles/typography.ts b/apps/website/src/styles/typography.ts new file mode 100644 index 000000000..07225237b --- /dev/null +++ b/apps/website/src/styles/typography.ts @@ -0,0 +1,51 @@ +export const fonts = { + heading: '"Inter Variable", InterVariable, Inter, sans-serif', + body: '"Inter Variable", InterVariable, Inter, sans-serif', +} + +export const fontSizes = { + xs: '0.75rem', + sm: '0.8125rem', + md: '0.875rem', + lg: '1rem', + xl: '1.125rem', + '2xl': '1.25rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '3.75rem', + '7xl': '4.5rem', + '8xl': '6rem', + '9xl': '8rem', +} + +export const textStyles = { + pageTitle: { + fontSize: { base: '2xl', sm: '3xl', md: '5xl', lg: '6xl' }, + fontWeight: 'extrabold', + lineHeight: '1.2', + letterSpacing: '-2%', + }, + h1: { + fontSize: ['4xl', null, '6xl'], + fontWeight: 'extrabold', + lineHeight: '1.2', + letterSpacing: '-2%', + }, + h2: { + fontSize: ['36px', '48px'], + fontWeight: 'bold', + lineHeight: '110%', + letterSpacing: '-1%', + }, + h3: { + fontSize: ['lg', 'xl'], + fontWeight: 'semibold', + lineHeight: '110%', + letterSpacing: '-1%', + }, + subtitle: { + fontSize: { base: 'sm', sm: 'sm', md: '2xl' }, + fontWeight: 'normal', + }, +}