From 2013aa396692448b4abcbe636e753cec4c2de5f9 Mon Sep 17 00:00:00 2001
From: tarjelavik <Tarje.Lavik@ub.uib.no>
Date: Mon, 13 Sep 2021 13:00:06 +0200
Subject: [PATCH] Fix paths to static assets
---
web/components/Image/index.js | 36 +++++++++++++++++++++++++++
web/components/Layout/Footer.js | 5 ++--
web/components/Sections/PageHeader.js | 2 +-
web/next.config.js | 19 ++++----------
4 files changed, 45 insertions(+), 17 deletions(-)
create mode 100644 web/components/Image/index.js
diff --git a/web/components/Image/index.js b/web/components/Image/index.js
new file mode 100644
index 0000000..f8482df
--- /dev/null
+++ b/web/components/Image/index.js
@@ -0,0 +1,36 @@
+import { Box, chakra } from '@chakra-ui/react'
+import NextImage from 'next/image'
+
+const CoverImg = chakra(NextImage, {
+ shouldForwardProp: (prop) =>
+ ['width', 'height', 'src', 'alt', 'quality', 'placeholder', 'blurDataURL', 'loader '].includes(
+ prop,
+ ),
+})
+
+const myLoader = ({ src, width, quality }) => {
+ return `${src}?w=${width}&q=${quality}`
+}
+
+export const Image = (props) => {
+ const { src, alt, ...rest } = props
+ return (
+ <Box pos="relative" cursor="pointer" className="group" {...rest}>
+ <CoverImg
+ w="auto"
+ h="auto"
+ loader={myLoader}
+ width={600}
+ quality={50}
+ height={384}
+ placeholder="blur"
+ src={src}
+ alt={alt}
+ transition="all 0.2s"
+ _groupHover={{
+ transform: 'scale(1.05)',
+ }}
+ />
+ </Box>
+ )
+}
diff --git a/web/components/Layout/Footer.js b/web/components/Layout/Footer.js
index 06b1610..e1d8f3e 100644
--- a/web/components/Layout/Footer.js
+++ b/web/components/Layout/Footer.js
@@ -1,10 +1,11 @@
-import { Button, Container, Flex, Image, useColorMode, useColorModeValue } from '@chakra-ui/react'
+import { Button, Container, Flex, useColorMode, useColorModeValue } from '@chakra-ui/react'
// import ActiveLink from '../Link/ActiveLink'
import { MoonIcon, SunIcon } from '@chakra-ui/icons'
import RenderSections from '../Sections/RenderSection'
import License from '../License'
import React from 'react'
import Publisher from '../Publisher'
+import Image from '../Image'
/* const MenuItem = ({ children }) => (
<Text
@@ -45,7 +46,7 @@ export default function Footer(props) {
</Button>
</Flex>
- <Image src="/img/taakeheimen-footer.svg" alt="" />
+ <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-footer.svg`} alt="" />
<Container maxW="4xl" p="0" sx={{ perspective: '492px' }}>
{/* <Flex pb="0">
diff --git a/web/components/Sections/PageHeader.js b/web/components/Sections/PageHeader.js
index 9e8a7ec..2a44bb4 100644
--- a/web/components/Sections/PageHeader.js
+++ b/web/components/Sections/PageHeader.js
@@ -13,7 +13,7 @@ export default function PageHeader(props) {
pb="16"
mb="8"
maxW="xl"
- backgroundImage="url('/img/taakeheimen-border.svg')"
+ backgroundImage={`url('${process.env.NEXT_PUBLIC_BASE_PATH}/img/taakeheimen-border.svg')`}
backgroundPosition="bottom"
backgroundRepeat="no-repeat"
>
diff --git a/web/next.config.js b/web/next.config.js
index c2f5d54..f2177e0 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -2,18 +2,9 @@ module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
- use: ["@svgr/webpack"],
- });
+ use: ['@svgr/webpack'],
+ })
return config
- }
- /* basePath: '/exhibition',
- async redirects() {
- return [
- {
- source: '/exhibition',
- destination: '/exhibition/chk',
- permanent: true,
- },
- ]
- }, */
-}
\ No newline at end of file
+ },
+ basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+}
--
GitLab