Static Site Generation

assets/config/translations.js

@@ -223,6 +223,10 @@ const translation = {
     en: 'Search by box',
     pt: 'Pesquisar por área',
   },
+  narratives: {
+    en: 'Narratives',
+    pt: 'Narrativas',
+  },
 };
 
 export default translation;

components/AtlasController/index.js

@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 import useSWR from 'swr';
 import { useRouter } from 'next/router';
 import { flatten } from 'lodash';
 import { Atlas } from '@imaginerio/diachronic-atlas';
-import { Box, HStack, Checkbox, Text } from '@chakra-ui/react';
+import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
 
 import Legend from '../Legend';
 import Probe from '../Probe';
@@ -18,6 +18,7 @@ import mapStyle from '../../assets/style/style.json';
 import { useImages } from '../../providers/ImageContext';
 import useDebouncedEffect from '../../utils/useDebouncedEffect';
 import translation from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const fetcher = ssid => {
   if (ssid) {
@@ -53,6 +54,7 @@ const AtlasController = ({ width, height, mobile }) => {
   ] = useImages();
 
   const router = useRouter();
+  const { locale } = useLocale();
   useEffect(() => {
     const hash = router.asPath.split('#')[1];
     if (hash) {
@@ -95,7 +97,9 @@ const AtlasController = ({ width, height, mobile }) => {
       router.replace(`${router.basePath}#${selectedImage.ssid}`);
     } else {
       setViewCone(null);
-      router.replace(router.basePath);
+      if (router.basePath) {
+        router.replace(router.basePath);
+      }
     }
   }, [selectedImage]);
 
@@ -227,7 +231,7 @@ const AtlasController = ({ width, height, mobile }) => {
           cursor="pointer"
         >
           <Checkbox isChecked={searchMove} pointerEvents="none" />
-          <Text>{translation.searchMoves[router.locale]}</Text>
+          <Text>{translation.searchMoves[locale]}</Text>
         </HStack>
       )}
       <ViewControl

components/Breadcrumbs/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { Box, Text } from '@chakra-ui/react';
 import { ChevronRightIcon } from '@chakra-ui/icons';
+import { useLocale } from '../../hooks/useLocale';
 
 const Breadcrumbs = ({ collection, title }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   return (
     <Box>
       <Link href={`/${locale}/iconography`}>Iconography</Link>

components/Footer/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useRouter } from 'next/router';
-import { Container, Grid, Box, Heading, Text, Stack, Image, Link } from '@chakra-ui/react';
+import { Box, Container, Grid, Heading, Image, Link, Stack, Text } from '@chakra-ui/react';
 
 import pages from '../../assets/config/pages';
 import translations from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const ContactColumn = () => (
   <Box>
@@ -23,7 +23,7 @@ const ContactColumn = () => (
 );
 
 const NavigationColumn = () => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   return (
     <Box>
       <Heading size="md">Menu</Heading>
@@ -48,7 +48,7 @@ const NavigationColumn = () => {
 };
 
 const Footer = () => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   return (
     <Box as="section" backgroundColor="#F7F9FC" py={[5, 50]}>
       <Container>

components/Head/index.js

@@ -4,9 +4,11 @@ import NextHead from 'next/head';
 import { useRouter } from 'next/router';
 
 import translations from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const Head = ({ title }) => {
-  const { asPath, locale } = useRouter();
+  const { asPath } = useRouter();
+  const { locale } = useLocale();
   return (
     <NextHead>
       <meta charSet="UTF-8" />

components/Header/index.js

@@ -3,22 +3,25 @@ import { useRouter } from 'next/router';
 import {
   Container,
   Flex,
-  Spacer,
-  Stack,
   HStack,
-  Link,
   IconButton,
+  Link,
   Menu,
   MenuButton,
   MenuList,
+  Spacer,
+  Stack,
 } from '@chakra-ui/react';
 import { HamburgerIcon } from '@chakra-ui/icons';
 
 import pages from '../../assets/config/pages';
 import translations from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const HeaderLinks = () => {
-  const { locale, asPath } = useRouter();
+  const { asPath } = useRouter();
+  const { locale } = useLocale();
+
   return (
     <>
       <Link
@@ -40,8 +43,11 @@ const HeaderLinks = () => {
             {pages[locale][page].title}
           </Link>
         ))}
-      <Link variant="header" href="https://narratives.imaginerio.org">
-        Narratives
+      <Link variant="header" href="https://forum.imaginerio.org" target="_blank">
+        {translations.forum[locale]}
+      </Link>
+      <Link variant="header" href="https://narratives.imaginerio.org" target="_blank">
+        {translations.narratives[locale]}
       </Link>
       <Link
         variant="header"
@@ -58,7 +64,7 @@ const HeaderLinks = () => {
 };
 
 const Header = () => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   return (
     <Container maxW="6xl">
       <Flex h="90px" alignItems="center">

components/ImageController/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { FiXCircle, FiExternalLink } from 'react-icons/fi';
-import { Grid, Container, Box, Tooltip } from '@chakra-ui/react';
+import { FiExternalLink, FiXCircle } from 'react-icons/fi';
+import { Box, Container, Grid, Tooltip } from '@chakra-ui/react';
 
 import ImageSearch from '../ImageSearch';
 import ImageFilter from '../ImageFilter';
@@ -14,11 +13,12 @@ import ImageViewer from '../ImageViewer';
 import translations from '../../assets/config/translations';
 
 import { useImages } from '../../providers/ImageContext';
+import { useLocale } from '../../hooks/useLocale';
 
 const Mirador = dynamic(() => import('../Mirador'), { ssr: false });
 
 const ImageController = ({ imageWidth, height }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   const [{ selectedImage }, dispatch] = useImages();
 
   return (

components/ImageFilter/index.js

@@ -1,25 +1,27 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { FiFilter } from 'react-icons/fi';
 import {
-  Stack,
   Box,
-  Text,
-  IconButton,
   Heading,
-  Radio,
-  RadioGroup,
   HStack,
+  IconButton,
   Input,
+  Radio,
+  RadioGroup,
+  Stack,
+  Text,
   Tooltip,
 } from '@chakra-ui/react';
 
 import { useImages } from '../../providers/ImageContext';
 import translation from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const CollectionFilter = () => {
-  const { locale, query } = useRouter();
+  const { query } = useRouter();
+  const { locale } = useLocale();
   const [{ categories, collection }, dispatch] = useImages();
 
   useEffect(() => {
@@ -52,7 +54,7 @@ const CollectionFilter = () => {
 };
 
 const FilterMenu = ({ xPos }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   const [{ dates }, dispatch] = useImages();
   const [tempDates, setTempDates] = useState(dates);
   const [isError, setIsError] = useState(false);
@@ -122,7 +124,7 @@ FilterMenu.propTypes = {
 };
 
 const ImageFilter = () => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   const buttonRef = useRef(null);
   const [isOpen, setIsOpen] = useState();
   const [{ collection }] = useImages();

components/ImageGrid/index.js

@@ -1,28 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import Image from 'next/image';
 import {
   Box,
   Heading,
-  Text,
   Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
   PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
 } from '@chakra-ui/react';
 
 import { ImageLink, MetaLinks } from '../ImageList/RowComponents';
 import translation from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const FixedSizeGrid = dynamic(() => import('react-window').then(mod => mod.FixedSizeGrid), {
   ssr: false,
 });
 
 const ImageGrid = ({ width, height, activeImages }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
   const numColumns = Math.floor(width / 185);
   const gridWidth = (width - 40) / numColumns;
 
@@ -40,7 +39,16 @@ const ImageGrid = ({ width, height, activeImages }) => {
           <Popover trigger="hover">
             <PopoverTrigger>
               <Box pos="relative" w={`${gridWidth - 40}px`} h="150px" mx="20px" userSelect="none">
-                {thumbnail && <Image src={thumbnail} layout="fill" objectFit="contain" />}
+                {thumbnail && (
+                  <Box
+                    bgImage={`url(${thumbnail})`}
+                    bgSize="contain"
+                    w="full"
+                    h="full"
+                    bgPosition="center"
+                    bgRepeat="no-repeat"
+                  />
+                )}
               </Box>
             </PopoverTrigger>
             <PopoverContent>

components/ImageList/ImageRow.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Image from 'next/image';
-import { Container, Grid, Flex } from '@chakra-ui/react';
+import { Container, Flex, Grid, Image } from '@chakra-ui/react';
 
-import { ImageMeta, ImageTitle, ImageLink } from './RowComponents';
+import { ImageLink, ImageMeta, ImageTitle } from './RowComponents';
 
 const calcImageSize = ({ rawWidth, rawHeight, rowWidth, rowHeight }) => {
   let imgHeight = rowHeight;
@@ -55,13 +54,7 @@ const ImageRow = ({
           <Flex align="center" justify="flex-end">
             {thumbnail && (
               <ImageLink w={`${imgWidth}px`} h={`${imgHeight}px`} cursor="pointer" ssid={ssid}>
-                <Image
-                  src={thumbnail}
-                  height={imgHeight}
-                  width={imgWidth}
-                  layout="responsive"
-                  ssid={ssid}
-                />
+                <Image src={thumbnail} h={`${imgHeight}px`} w={`${imgWidth}px`} ssid={ssid} />
               </ImageLink>
             )}
           </Flex>

components/ImageList/ImageRowSmall.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useRouter } from 'next/router';
-import { Container, Box, Text } from '@chakra-ui/react';
+import { Box, Container, Text } from '@chakra-ui/react';
 
 import { ImageTitle, MetaLinks } from './RowComponents';
 import translation from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 const ImageRowSmall = ({ style, ssid, title, creator }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
 
   return (
     <div style={style}>

components/ImageList/RowComponents.js

@@ -8,6 +8,7 @@ import { Box, Heading, Text } from '@chakra-ui/react';
 
 import { useImages } from '../../providers/ImageContext';
 import translation from '../../assets/config/translations';
+import { useLocale } from '../../hooks/useLocale';
 
 export const MetaLinks = ({ source }) => {
   let links;
@@ -48,7 +49,7 @@ MetaLinks.propTypes = {
 };
 
 export const ImageMeta = ({ creator, date, source }) => {
-  const { locale } = useRouter();
+  const { locale } = useLocale();
 
   return (
     <Box>
@@ -106,11 +107,11 @@ ImageTitle.propTypes = {
 };
 
 export const ImageLink = ({ children, ssid, ...rest }) => {
-  const { asPath, locale } = useRouter();
+  const { asPath } = useRouter();
   const [{ useLinks, allImages }, dispatch] = useImages();
   if (useLinks)
     return (
-      <Link href={`/${locale}${asPath}/${ssid}`}>
+      <Link href={`${asPath}/${ssid}`}>
         <a style={{ width: '100%', height: '100%' }}>{children}</a>
       </Link>
     );