This repository has been archived by the owner on Jul 21, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Begin conversion to Chakra and Gatsby 3
- Loading branch information
Showing
13 changed files
with
11,581 additions
and
10,038 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "typescript.tsdk": "node_modules/typescript/lib", | ||
| "prettier.prettierPath": "./node_modules/prettier/" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| import { | ||
| Box, | ||
| chakra, | ||
| ChakraProvider, | ||
| CloseButton, | ||
| extendTheme, | ||
| Flex, | ||
| HStack, | ||
| IconButton, | ||
| Link, | ||
| PortalManager, | ||
| useColorModeValue, | ||
| useDisclosure, | ||
| VStack, | ||
| } from "@chakra-ui/react" | ||
| import { Link as GatsbyLink } from "gatsby" | ||
| import React from "react" | ||
| import { AiOutlineMenu } from "react-icons/ai" | ||
| import Footer from "./Footer" | ||
|
|
||
| export function Layout({ | ||
| children, | ||
| }: { | ||
| children: JSX.Element[] | JSX.Element | string | string[] | ||
| }) { | ||
| const theme = extendTheme({ | ||
| config: { | ||
| initialColorMode: "light", | ||
| }, | ||
| colors: { | ||
| brand: { | ||
| "50": "#f1f9f7", | ||
| "100": "#e1f8ee", | ||
| "200": "#bdf3d6", | ||
| "300": "#86e9b6", | ||
| "400": "#35d783", | ||
| "500": "#12bf53", | ||
| "600": "#0fa43a", | ||
| "700": "#148535", | ||
| "800": "#16703f", | ||
| "900": "#14522b", | ||
| }, | ||
| }, | ||
| fonts: { | ||
| heading: "Lato,Helvetica Neue,Arial,Helvetica,sans-serif", | ||
| }, | ||
| layerStyles: { | ||
| header: { | ||
| color: "#ffffff", | ||
| _hover: { | ||
| color: "#ffffff", | ||
| }, | ||
| }, | ||
| }, | ||
| components: { | ||
| Link: { | ||
| variants: { | ||
| header: { | ||
| color: "#ffffff", | ||
| _hover: { | ||
| color: "#ffffff", | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| a: { | ||
| variants: { | ||
| header: { | ||
| color: "#ffffff", | ||
| _hover: { | ||
| color: "#ffffff", | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
| const headerBg = useColorModeValue("brand.800", "brand.800") | ||
| const mobileNav = useDisclosure() | ||
|
|
||
| return ( | ||
| <ChakraProvider theme={theme}> | ||
| <PortalManager> | ||
| <chakra.header | ||
| bg={headerBg} | ||
| layerStyle="header" | ||
| w="full" | ||
| px={{ base: 2, sm: 4 }} | ||
| py={4} | ||
| shadow="md" | ||
| > | ||
| <Flex alignItems="center" justifyContent="space-between" mx="auto"> | ||
| <Flex> | ||
| <chakra.a | ||
| _hover={{ color: "white" }} | ||
| href="/" | ||
| title="Clowdr Home Page" | ||
| display="flex" | ||
| alignItems="center" | ||
| > | ||
| <chakra.h1 fontSize="3xl" fontWeight="400"> | ||
| Clowdr | ||
| </chakra.h1> | ||
| </chakra.a> | ||
| </Flex> | ||
| <HStack display="flex" alignItems="center" spacing={1}> | ||
| <HStack | ||
| spacing={6} | ||
| mr={4} | ||
| fontSize="large" | ||
| color="brand.500" | ||
| display={{ base: "none", md: "inline-flex" }} | ||
| > | ||
| <Link as={GatsbyLink} to="/features" variant="header"> | ||
| Features | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/pricing" variant="header"> | ||
| Pricing | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/about" variant="header"> | ||
| About | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/jobs" variant="header"> | ||
| Jobs | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/feedback" variant="header"> | ||
| Feedback | ||
| </Link> | ||
| </HStack> | ||
| <Box display={{ base: "inline-flex", md: "none" }}> | ||
| <IconButton | ||
| display={{ base: "flex", md: "none" }} | ||
| aria-label="Open menu" | ||
| fontSize="20px" | ||
| color={useColorModeValue("gray.800", "inherit")} | ||
| variant="ghost" | ||
| icon={<AiOutlineMenu />} | ||
| onClick={mobileNav.onOpen} | ||
| /> | ||
|
|
||
| <VStack | ||
| pos="absolute" | ||
| top={0} | ||
| left={0} | ||
| right={0} | ||
| display={mobileNav.isOpen ? "flex" : "none"} | ||
| flexDirection="column" | ||
| p={2} | ||
| pb={4} | ||
| m={2} | ||
| bg={headerBg} | ||
| spacing={3} | ||
| rounded="sm" | ||
| shadow="sm" | ||
| textAlign="center" | ||
| > | ||
| <CloseButton aria-label="Close menu" onClick={mobileNav.onClose} /> | ||
|
|
||
| <Link as={GatsbyLink} to="/features" w="full"> | ||
| Features | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/pricing" w="full"> | ||
| Pricing | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/about" w="full"> | ||
| About | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/jobs" w="full"> | ||
| Jobs | ||
| </Link> | ||
| <Link as={GatsbyLink} to="/feedback" w="full"> | ||
| Feedback | ||
| </Link> | ||
| </VStack> | ||
| </Box> | ||
| </HStack> | ||
| </Flex> | ||
| </chakra.header> | ||
| <Box>{children}</Box> | ||
| <Footer /> | ||
| </PortalManager> | ||
| </ChakraProvider> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,20 @@ | ||
| import { Box, Heading } from "@chakra-ui/react" | ||
| import React from "react" | ||
| import { Helmet } from "react-helmet" | ||
| import { Container, Header } from "semantic-ui-react" | ||
| import "semantic-ui-css/semantic.min.css" | ||
| import ResponsiveContainer from "../components/ResponsiveContainer" | ||
| import { Helmet } from "react-helmet-async" | ||
| import { Layout } from "../components/Layout" | ||
|
|
||
| export default function About() { | ||
| export default function PageNotFound() { | ||
| return ( | ||
| <ResponsiveContainer> | ||
| <Layout> | ||
| <Helmet> | ||
| <meta charSet="utf-8" /> | ||
| <title> | ||
| Page not found | Clowdr - Virtual conferences that bring people together | ||
| emissions | ||
| </title> | ||
| <title>Page not found | Clowdr - Virtual conferences that bring people together</title> | ||
| </Helmet> | ||
| <Container text style={{ padding: "4em 0" }}> | ||
| <Header | ||
| as="h2" | ||
| style={{ fontSize: "2em", padding: "1em 0" }} | ||
| textAlign="center" | ||
| > | ||
| <Box text p={4}> | ||
| <Heading as="h2" textAlign="center"> | ||
| Sorry, we couldn't find that page. | ||
| </Header> | ||
| </Container> | ||
| </ResponsiveContainer> | ||
| </Heading> | ||
| </Box> | ||
| </Layout> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.