Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BugFix] Fixes layout shifting issues #71

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[BugFix] Fixes layout shifting issues #71

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b29bdb4
Fix font flashing bug by pre-loading font
jcalcaben Apr 22, 2023
3180037
Fix layout shift caused by useBreakpointValue() hook
jcalcaben Apr 22, 2023
cf7afc5
Run prettier and remove unused dependency
jcalcaben May 16, 2023
bcaffe2
Run prettier on _app.tsx
jcalcaben May 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 48 additions & 53 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Image from 'next/image'
import Image from "next/image";
import {
Box,
Container,
Expand All @@ -7,37 +7,32 @@ import {
Link as ChakraLink,
Text,
useColorModeValue,
useBreakpointValue,
Heading,
} from '@chakra-ui/react'
import { ReactNode } from 'react'
import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from 'react-icons/fa'
import { Link, LinkProps } from './link'
} from "@chakra-ui/react";
import { ReactNode } from "react";
import { FaGithub, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
import { Link, LinkProps } from "./link";

export const Footer = () => (
<Box
bg={useColorModeValue('gray.50', 'gray.900')}
color={useColorModeValue('gray.700', 'gray.200')}
bg={useColorModeValue("gray.50", "gray.900")}
color={useColorModeValue("gray.700", "gray.200")}
>
<Container
as={Stack}
maxW={'6xl'}
py={useBreakpointValue({ base: 4, md: 10 })}
>
<Container as={Stack} maxW={"6xl"} py={[4, 10]}>
<SimpleGrid
templateColumns={{ base: '1fr 1fr', md: '2fr 1fr 1fr' }}
templateRows={{ base: '1fr 1fr', md: '1fr' }}
templateColumns={{ base: "1fr 1fr", md: "2fr 1fr 1fr" }}
templateRows={{ base: "1fr 1fr", md: "1fr" }}
spacing={8}
>
<Stack order={useBreakpointValue({ base: 1, md: 2 })}>
<Stack order={[1, 2]}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not super familiar with this hook, could you give a little bit of context for why you opted to not use useBreakpointValue? I'm sure it's totally valid, I'm just not sure what the trade-offs are.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From their docs:

All style props accept arrays as values for mobile-first responsive styles. This is the recommended method.

https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax

If I understand the docs for the useBreakpointValue(), this hook is more useful when the calculated values are dynamic instead of static.

Also, how common is it to use custom react hooks inline instead of inside the function body? I've personally never seen it in other projects and code samples, but I've also never worked with the chakra library.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, it's a little strange. This seems quite a bit more manageable.

I just approved the deployment but it looks like the build is still failing. I'll try to figure out why. I was thinking that once it builds, we may want to check how the site is looking on mobile now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I think you might've bumped the version of React but didn't re-run yarn install, so the yarn.lock is out of sync.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did a yarn install and there are no changes to push up

<Heading as="h2">More Info</Heading>
{FOOTER_ITEMS_MORE_INFO.map((link) => (
<Link href={link.href} key={link.key}>
<Text ml={2}>{link.label}</Text>
</Link>
))}
</Stack>
<Stack order={useBreakpointValue({ base: 2, md: 3 })}>
<Stack order={[2, 3]}>
<Heading as="h2">Support</Heading>
{FOOTER_ITEMS_SUPPORT.map((link) => (
<ChakraLink
Expand All @@ -52,22 +47,22 @@ export const Footer = () => (
</Stack>
<Stack
spacing={6}
gridColumn={{ base: '1 / -1', md: '1' }}
order={useBreakpointValue({ base: 3, md: 1 })}
gridColumn={{ base: "1 / -1", md: "1" }}
order={[3, 1]}
>
<Box alignSelf="center">
<Image
alt="Open Austin's logo; a five-pointed star in orange and black"
priority
src={'/assets/logo.svg'}
src={"/assets/logo.svg"}
width={60}
height={60}
/>
</Box>
<Text fontSize={'sm'} alignSelf="center">
<Text fontSize={"sm"} alignSelf="center">
© 2022 Open Austin. All rights reserved
</Text>
<Stack direction={'row'} spacing={6} justifyContent="center">
<Stack direction={"row"} spacing={6} justifyContent="center">
{SOCIAL_ITEMS.map((link) => (
<ChakraLink
href={link.href}
Expand All @@ -85,60 +80,60 @@ export const Footer = () => (
</SimpleGrid>
</Container>
</Box>
)
);

type FooterItems = LinkProps & {
key: string
label: string
icon?: ReactNode
}
key: string;
label: string;
icon?: ReactNode;
};

const FOOTER_ITEMS_MORE_INFO: ReadonlyArray<FooterItems> = [
{ href: 'about', label: 'About', key: 'About' },
{ href: 'portfolio', label: 'Portfolio', key: 'Portfolio' },
{ href: "about", label: "About", key: "About" },
{ href: "portfolio", label: "Portfolio", key: "Portfolio" },
{
href: 'mailto:[email protected]',
label: 'Contact us',
key: 'Contact-Us',
href: "mailto:[email protected]",
label: "Contact us",
key: "Contact-Us",
},
]
];

const FOOTER_ITEMS_SUPPORT: ReadonlyArray<FooterItems> = [
{
href: 'https://opencollective.com/open-austin',
label: 'Open Collective',
key: 'oc',
href: "https://opencollective.com/open-austin",
label: "Open Collective",
key: "oc",
},
{
href: 'https://github.com/sponsors/open-austin',
label: 'GitHub Sponsor',
key: 'github',
href: "https://github.com/sponsors/open-austin",
label: "GitHub Sponsor",
key: "github",
},
]
];

const SOCIAL_ITEMS: ReadonlyArray<FooterItems> = [
{
label: 'Twitter',
href: 'https://twitter.com/openaustin',
label: "Twitter",
href: "https://twitter.com/openaustin",
icon: <FaTwitter />,
key: 'twitter',
key: "twitter",
},
{
label: 'Youtube',
href: 'https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w',
label: "Youtube",
href: "https://www.youtube.com/channel/UCSDcLeHsq8k-WLaJaRQHh4w",
icon: <FaYoutube />,
key: 'youtube',
key: "youtube",
},
{
label: 'LinkedIn',
href: 'https://www.linkedin.com/company/open-austin/about/',
label: "LinkedIn",
href: "https://www.linkedin.com/company/open-austin/about/",
icon: <FaLinkedin />,
key: 'linkedin',
key: "linkedin",
},
{
label: 'GitHub',
href: 'https://github.com/open-austin',
label: "GitHub",
href: "https://github.com/open-austin",
icon: <FaGithub />,
key: 'github',
key: "github",
},
]
];
51 changes: 27 additions & 24 deletions components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,55 @@
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import React from "react";
import Image from "next/image";
import Link from "next/link";
import {
Box,
Button,
Stack,
Flex,
Text,
VStack,
useBreakpointValue,
Heading,
} from '@chakra-ui/react'
} from "@chakra-ui/react";

const Hero = () => (
<Flex minH={'calc(100vh - 335px)'} pos="relative">
<Flex minH={"calc(100vh - 335px)"} pos="relative">
<Image
priority
alt="Gathering of volunteers at an Open Austin event"
src={'/assets/code-across-2015-pano.png'}
src={"/assets/code-across-2015-pano.png"}
layout="fill"
objectFit="cover"
quality={80}
/>
<VStack
w={'full'}
w={"full"}
zIndex={1}
justify={'center'}
bgGradient={'linear(to-r, blackAlpha.600, transparent)'}
justify={"center"}
bgGradient={"linear(to-r, blackAlpha.600, transparent)"}
>
<Box
boxShadow="2xl"
maxW={useBreakpointValue({ base: 'full', md: 600 })}
p={useBreakpointValue({ base: 4, md: 12 })}
maxW={["full", 600]}
p={[4, 12]}
rounded="md"
bgColor={'blackAlpha.300'}
bgColor={"blackAlpha.300"}
>
<Heading
as="h1"
color={'orange.300'}
color={"orange.300"}
textAlign="center"
fontSize={useBreakpointValue({ base: '6xl', md: '7xl' })}
fontSize={["6xl", "7xl"]}
fontWeight={900}
>
Open Austin
</Heading>
<Text
color={'gray.200'}
color={"gray.200"}
align="center"
fontWeight={500}
lineHeight={1.2}
p={4}
fontSize={useBreakpointValue({ base: 'xl', md: 'lg' })}
fontSize={["xl", "lg"]}
>
Open Austin addresses local social and civic challenges through
creative uses of technology. We foster relationships between
Expand All @@ -59,26 +58,30 @@ const Hero = () => (

<Heading
as="h2"
color={'gray.100'}
color={"gray.100"}
textAlign="center"
fontSize={useBreakpointValue({ base: '3xl', md: '5xl' })}
fontSize={["3xl", "5xl"]}
fontWeight={700}
pb={4}
>
All are welcome!
</Heading>

<Stack direction={'row'} align={'flex-end'} justifyContent="center">
<Stack direction={"row"} align={"flex-end"} justifyContent="center">
<Link href="about" passHref>
<Button variant="primary" as="a">About</Button>
<Button variant="primary" as="a">
About
</Button>
</Link>
<Link href="portfolio" passHref>
<Button variant="primary" as="a">Projects</Button>
<Button variant="primary" as="a">
Projects
</Button>
</Link>
</Stack>
</Box>
</VStack>
</Flex>
)
);

export default Hero
export default Hero;
15 changes: 14 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,17 @@ module.exports = {
reactStrictMode: true,
// exportPathMap: () => {}
swcMinify: true,
}
webpack: (config) => {
config.module = {
...config.module,
rules: [
...config.module.rules,
{
test: /\.(woff|woff2)$/,
type: 'asset/resource'
},
],
};
return config;
},
};
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,17 @@
"@vercel/analytics": "^0.1.6",
"framer-motion": "^6",
"next": "12.3.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "4.7.1",
"react": "18.2.0"
"react-icons": "4.7.1"
},
"devDependencies": {
"@types/node": "18.7.2",
"@types/react": "18.0.17",
"@types/react-dom": "18.0.6",
"eslint": "8.24.0",
"eslint-config-next": "12.3.1",
"typescript": "4.9.4"
"typescript": "4.9.4",
"url-loader": "^4.1.1"
jcalcaben marked this conversation as resolved.
Show resolved Hide resolved
}
}
29 changes: 19 additions & 10 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
// Importing fonts (there's probably a better way to do this...)
import '@fontsource/crimson-text'

import "@fontsource/crimson-text";
import crimsonTextLatin from "@fontsource/crimson-text/files/crimson-text-latin-400-normal.woff2";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think Next recommends using their @next/Font component for this:

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

Error: `@next/font` is only available in Next.js 13 and newer.

Project is currently using 12.3.1

Since it's a major version bump, I hesitate to include it in this PR since it would require regression testing.

Copy link
Contributor

@newswim newswim May 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right! I think this is what prompted the creation of #47

In that case, I think what you have here is a good approach 👍


// Setup for Chakra and Next environments
import { ChakraProvider } from '@chakra-ui/react'
import { Analytics } from '@vercel/analytics/react'
import { ChakraProvider } from "@chakra-ui/react";
import { Analytics } from "@vercel/analytics/react";

import { type AppProps } from 'next/app'
import Head from 'next/head'
import { type AppProps } from "next/app";
import Head from "next/head";

import { theme } from '../lib/theme'
import { Header } from '../components/header'
import { Footer } from '../components/footer'
import { theme } from "../lib/theme";
import { Header } from "../components/header";
import { Footer } from "../components/footer";
jcalcaben marked this conversation as resolved.
Show resolved Hide resolved

function MyApp({ Component, pageProps }: AppProps) {
return (
Expand All @@ -22,13 +24,20 @@ function MyApp({ Component, pageProps }: AppProps) {
content="Open Austin is a volunteer citizen brigade advocating for open government, open data, and civic application development since 2009."
/>
<link rel="icon" href="/favicon.ico" />
<link
rel="preload"
href={crimsonTextLatin}
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
<Header />
<Analytics />
<Component {...pageProps} />
<Footer />
</ChakraProvider>
)
);
}

export default MyApp
export default MyApp;
Loading