diff --git a/public/funders-logos/BMBFlogo_dia.png b/public/funders-logos/BMBFlogo_dia.png new file mode 100755 index 00000000..22c2dd67 Binary files /dev/null and b/public/funders-logos/BMBFlogo_dia.png differ diff --git a/public/funders-logos/EPSRlogo_dia.png b/public/funders-logos/EPSRlogo_dia.png new file mode 100644 index 00000000..e74ad73b Binary files /dev/null and b/public/funders-logos/EPSRlogo_dia.png differ diff --git a/public/funders-logos/ERClogo_dia.png b/public/funders-logos/ERClogo_dia.png new file mode 100755 index 00000000..3b9321b0 Binary files /dev/null and b/public/funders-logos/ERClogo_dia.png differ diff --git a/public/funders-logos/NWOlogo_dia.png b/public/funders-logos/NWOlogo_dia.png new file mode 100644 index 00000000..bfb2703d Binary files /dev/null and b/public/funders-logos/NWOlogo_dia.png differ diff --git a/public/funders-logos/UUlogo_dia.png b/public/funders-logos/UUlogo_dia.png index af457db2..96c3796d 100755 Binary files a/public/funders-logos/UUlogo_dia.png and b/public/funders-logos/UUlogo_dia.png differ diff --git a/public/homepage-animation_SH.gif b/public/homepage-animation_SH.gif index f3e2d978..2cc69fc2 100644 Binary files a/public/homepage-animation_SH.gif and b/public/homepage-animation_SH.gif differ diff --git a/public/parcels-assets/logo-horo_dia.svg b/public/parcels-assets/logo-horo_dia.svg new file mode 100644 index 00000000..9272f4f7 --- /dev/null +++ b/public/parcels-assets/logo-horo_dia.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Ocean + + + + + Parcels + + + + + diff --git a/public/parcels-assets/logo-no-text_dia.svg b/public/parcels-assets/logo-no-text_dia.svg new file mode 100644 index 00000000..4f5f0955 --- /dev/null +++ b/public/parcels-assets/logo-no-text_dia.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/projects/plasticparcelslogo_dia.png b/public/projects/plasticparcelslogo_dia.png new file mode 100644 index 00000000..97ab17d4 Binary files /dev/null and b/public/projects/plasticparcelslogo_dia.png differ diff --git a/public/projects/virtual_ship_logo_dia.png b/public/projects/virtual_ship_logo_dia.png new file mode 100644 index 00000000..d19bad63 Binary files /dev/null and b/public/projects/virtual_ship_logo_dia.png differ diff --git a/public/projects/virtualfleet_logo_dia.png b/public/projects/virtualfleet_logo_dia.png new file mode 100644 index 00000000..1175b632 Binary files /dev/null and b/public/projects/virtualfleet_logo_dia.png differ diff --git a/src/components/ColorModeImage.js b/src/components/ColorModeImage.js new file mode 100644 index 00000000..b0b8fd84 --- /dev/null +++ b/src/components/ColorModeImage.js @@ -0,0 +1,8 @@ +// So that we can easily use different images for light and dark mode +import { Image, useColorModeValue } from '@chakra-ui/react' + +export function ColorModeImage({ lightSrc, darkSrc, alt, ...props }) { + const src = useColorModeValue(lightSrc, darkSrc) + + return {alt} +} diff --git a/src/components/ColorModeToggle.js b/src/components/ColorModeToggle.js new file mode 100644 index 00000000..e130852e --- /dev/null +++ b/src/components/ColorModeToggle.js @@ -0,0 +1,20 @@ +import { IconButton, useColorMode } from '@chakra-ui/react' +import { SunIcon, MoonIcon } from '@chakra-ui/icons' + +export function ColorModeToggle() { + const { colorMode, toggleColorMode } = useColorMode() + + return ( + : } + onClick={toggleColorMode} + variant='ghost' + size='md' + position='fixed' + top={4} + right={4} + zIndex={1000} + /> + ) +} diff --git a/src/components/footer.js b/src/components/footer.js index c7e58933..3d23d29c 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -10,6 +10,7 @@ import { VStack, } from '@chakra-ui/react' +import { ColorModeImage } from '@/components/ColorModeImage' import { Image, Link } from '@/components/mdx' import { footerItems } from '@/data/footer-items' @@ -59,9 +60,10 @@ export const Footer = () => { > - {'parcels diff --git a/src/components/funders.js b/src/components/funders.js index f296ad35..b8f819f4 100644 --- a/src/components/funders.js +++ b/src/components/funders.js @@ -8,6 +8,7 @@ import { GridItem, Tooltip, } from '@chakra-ui/react' +import { ColorModeImage } from '@/components/ColorModeImage' import React from 'react' import { Funders as data } from '@/data/funders' @@ -47,7 +48,12 @@ export const Funders = () => { } pr={4} > - {funder.name} + ))} diff --git a/src/components/header.js b/src/components/header.js index c8d1f9cd..9446cb6b 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -14,6 +14,7 @@ import { useColorModeValue, useDisclosure, } from '@chakra-ui/react' +import { ColorModeImage } from '@/components/ColorModeImage' import React from 'react' export const Header = () => { @@ -74,9 +75,10 @@ export const Header = () => { alignItems={'center'} spacing={{ base: 2, sm: 4 }} > - {'parcels diff --git a/src/components/project-card.js b/src/components/project-card.js index 46912fbe..8bd4bc76 100644 --- a/src/components/project-card.js +++ b/src/components/project-card.js @@ -1,7 +1,15 @@ -import { Image, Link } from '@/components/mdx' +import { Link } from '@/components/mdx' import { Box, Card, CardBody, Stack, Text } from '@chakra-ui/react' +import { ColorModeImage } from '@/components/ColorModeImage' -export const ProjectCard = ({ name, description, repo, homepage, logo }) => { +export const ProjectCard = ({ + name, + description, + repo, + homepage, + logo_light, + logo_dark, +}) => { return ( { gap={0} > - {name} { + ) diff --git a/src/pages/blog/[id].js b/src/pages/blog/[id].js index 67120534..e8c3e512 100644 --- a/src/pages/blog/[id].js +++ b/src/pages/blog/[id].js @@ -10,6 +10,7 @@ import { VStack, Wrap, WrapItem, + useColorMode, } from '@chakra-ui/react' import { ArrowBackIcon } from '@chakra-ui/icons' @@ -45,7 +46,12 @@ export default function Post({ source, frontmatter, postId }) { {frontmatter.title} - + {formatDate(date)} ({distanceToNow(date)}) diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 6e8b741c..89828a96 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -11,6 +11,7 @@ import { Text, useColorModeValue, VStack, + useColorMode, } from '@chakra-ui/react' import { motion } from 'framer-motion' @@ -41,7 +42,13 @@ const SinglePost = ({ page }) => { {page.title} - + {formatDate(date)} ({distanceToNow(date)}) diff --git a/src/pages/cards/[id].js b/src/pages/cards/[id].js index 5f178631..240ea199 100644 --- a/src/pages/cards/[id].js +++ b/src/pages/cards/[id].js @@ -12,6 +12,7 @@ import { Text, VStack, } from '@chakra-ui/react' +import { ColorModeImage } from '@/components/ColorModeImage' import fs from 'fs' import matter from 'gray-matter' import path from 'path' @@ -28,11 +29,12 @@ const Card = ({ frontmatter, id }) => { Parcels / blog - Parcels logo diff --git a/src/theme.js b/src/theme.js index fea93a29..132bedc4 100644 --- a/src/theme.js +++ b/src/theme.js @@ -4,8 +4,8 @@ import '@fontsource-variable/inter' // color mode config const config = { - initialColorMode: 'light', - useSystemColorMode: false, + initialColorMode: 'system', + useSystemColorMode: true, } const fonts = {