Bump next

the-kwisatz-haderach · Nov 25, 2023 · 8c343fc · 8c343fc · vercel · Nov 25, 2023
1 parent 76f5de4
commit 8c343fc
Show file tree

Hide file tree

Showing 19 changed files with 1,111 additions and 194 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 
 /crawl-results
 
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+certificates
diff --git a/components/AppreciationIndicator/AppreciationIndicator.tsx b/components/AppreciationIndicator/AppreciationIndicator.tsx
@@ -44,7 +44,7 @@ function AppreciationIndicator({
           },
         }}
       >
-        <Image src={src} layout="fill" />
+        <Image alt="" src={src} fill sizes="100vw" />
       </Button>
       <Text
         hidden={appreciations < 1}

diff --git a/components/EmptyState/EmptyState.tsx b/components/EmptyState/EmptyState.tsx
@@ -27,7 +27,7 @@ const getIcon = (icon: Props['icon']) => {
             opacity: 0.2,
           }}
         >
-          <Image src="/images/no-results.png" width={200} height={200} />
+          <Image alt="" src="/images/no-results.png" width={200} height={200} />
         </div>
       )
     default:

diff --git a/components/Forms/ContactForm/ContactForm.tsx b/components/Forms/ContactForm/ContactForm.tsx
@@ -279,7 +279,16 @@ export default function ContactForm(): ReactElement {
                   >
                     <Flex alignItems="center" gap={2} width="100%">
                       {selectedImage && (
-                        <Image src={selectedImage} width={20} height={20} />
+                        <Image
+                          alt=""
+                          src={selectedImage}
+                          style={{
+                            width: 20,
+                            height: 20,
+                          }}
+                          width={20}
+                          height={20}
+                        />
                       )}
                       <Text
                         fontWeight="normal"
@@ -320,7 +329,16 @@ export default function ContactForm(): ReactElement {
                           alignItems="center"
                           gap={4}
                         >
-                          <Image src={imgSrc} width={30} height={30} />
+                          <Image
+                            alt=""
+                            src={imgSrc}
+                            width={30}
+                            height={30}
+                            style={{
+                              width: 30,
+                              height: 30,
+                            }}
+                          />
                           <span>{label}</span>
                         </MenuItem>
                       )

diff --git a/components/MainNavigation/MainNavigation.tsx b/components/MainNavigation/MainNavigation.tsx
@@ -59,15 +59,19 @@ export default function MainNavigation({
           px={4}
         >
           <TranslatedLink href={homeLink.href} passHref>
-            <Box
-              title={homeLink.label}
-              as="a"
-              position="relative"
-              width="100px"
-              height="30px"
-            >
-              {logoSrc && <Image src={logoSrc} alt="logo" layout="fill" />}
-            </Box>
+            {logoSrc && (
+              <Image
+                title={homeLink.label}
+                src={logoSrc}
+                alt="logo"
+                style={{
+                  width: 100,
+                  height: 30,
+                }}
+                width={100}
+                height={30}
+              />
+            )}
           </TranslatedLink>
           <HStack
             alignItems="center"

diff --git a/components/Obituary/components/ObituaryImage.tsx b/components/Obituary/components/ObituaryImage.tsx
@@ -21,12 +21,15 @@ export const ObituaryImage = ({ img }: Props) => {
   return (
     <NextImage
       src={src}
-      alt={typeof img === 'string' ? undefined : img?.alt}
-      objectFit="cover"
-      layout="fill"
+      alt={typeof img === 'string' ? '' : img?.alt}
+      style={{
+        objectFit: 'cover',
+      }}
+      fill
       placeholder="blur"
       blurDataURL="/images/placeholder-person.png"
       onError={() => setSrc('/images/placeholder-obit-image.jpeg')}
+      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
     />
   )
 }
diff --git a/components/Obituary/components/ObituaryLarge.tsx b/components/Obituary/components/ObituaryLarge.tsx
@@ -71,8 +71,18 @@ export const ObituaryLarge: ObituaryRenderer = ({
           >
             {t(type)}
           </Text>
-          <Flex gap={16} width="100%" justifyContent="center">
-            <VStack alignItems="center" justifyContent="center" spacing={3}>
+          <Flex
+            gap={16}
+            width="100%"
+            justifyContent="center"
+            alignItems="flex-start"
+          >
+            <VStack
+              alignItems="center"
+              justifyContent="center"
+              spacing={3}
+              flex={1}
+            >
               <Box
                 flexShrink={0}
                 position="relative"
@@ -123,7 +133,12 @@ export const ObituaryLarge: ObituaryRenderer = ({
               </HStack>
             </VStack>
             {isMultiObituary(props) && (
-              <VStack alignItems="center" justifyContent="center" spacing={3}>
+              <VStack
+                alignItems="center"
+                justifyContent="center"
+                spacing={3}
+                flex={1}
+              >
                 <Box
                   flexShrink={0}
                   position="relative"
@@ -193,12 +208,15 @@ export const ObituaryLarge: ObituaryRenderer = ({
             </Text>
           )}
           {symbol_image.filename && (
-            <Box width="80px" height="100px" pos="relative" mt="1rem">
+            <Box width="100px" height="100px" pos="relative" mt="1rem">
               <Image
                 alt={symbol_image?.alt || ''}
                 src={symbol_image.filename}
-                layout="fill"
-                objectFit="cover"
+                sizes="100vw"
+                fill
+                style={{
+                  objectFit: 'cover',
+                }}
               />
             </Box>
           )}

diff --git a/components/StoryBlok/Teaser/Teaser.tsx b/components/StoryBlok/Teaser/Teaser.tsx
@@ -17,7 +17,7 @@ export default function Teaser({
             alt={image.alt}
             title={image.title}
             src={image.filename}
-            layout="fill"
+            fill
           />
         </div>
       )}

diff --git a/components/TranslatedLink/TranslatedLink.tsx b/components/TranslatedLink/TranslatedLink.tsx
@@ -20,7 +20,7 @@ export const TranslatedLink: React.FC<LinkProps> = ({
   // Set `as` prop to change displayed URL in browser
   const as = translatedPath ? `${localePath}${translatedPath}` : undefined
   return (
-    <Link {...linkProps} href={as || href} as={as} passHref>
+    <Link {...linkProps} href={as || href} as={as} passHref legacyBehavior>
       {children}
     </Link>
   )

diff --git a/lib/storyblok/client.ts b/lib/storyblok/client.ts
@@ -0,0 +1,12 @@
+import { STORYBLOK_TOKEN } from 'lib/constants'
+import StoryblokClient from 'storyblok-js-client'
+
+const Storyblok = new StoryblokClient({
+  accessToken: STORYBLOK_TOKEN,
+  cache: {
+    clear: 'auto',
+    type: 'memory',
+  },
+})
+
+export default Storyblok
diff --git a/next.config.js b/next.config.js
@@ -32,6 +32,17 @@ module.exports = (phase, { defaultConfig }) => {
       )
     },
     images: {
+      remotePatterns: [
+        {
+          hostname: 'picsum.photos',
+        },
+        {
+          hostname: 'www.osmrtnica.ba',
+        },
+        {
+          hostname: 'a.storyblok.com',
+        },
+      ],
       domains: ['picsum.photos', 'a.storyblok.com', 'www.osmrtnica.ba'],
     },
   }

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "eslint '**/*.{ts,js,tsx,jsx}'",
@@ -29,17 +29,18 @@
     "@vercel/kv": "^0.2.3",
     "clsx": "^2.0.0",
     "dotenv": "^8.2.0",
+    "eslint-config-next": "^14.0.3",
     "formidable": "^3.5.1",
     "framer-motion": "4.1.17",
     "html-react-parser": "^5.0.6",
     "lodash": "^4.17.21",
     "mongodb": "^3.6.8",
-    "next": "12.2.0",
+    "next": "^14.0.3",
     "next-connect": "0.11.0",
     "next-i18next": "^10.1.0",
     "nodemailer": "^6.6.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.5.3",
     "react-select": "^4.3.0",
     "sharp": "^0.32.6",

diff --git a/pages/[category]/[id].tsx b/pages/[category]/[id].tsx
@@ -1,7 +1,8 @@
 import { Box, Container } from '@chakra-ui/react'
-import { getStoryblokApi } from '@storyblok/react'
+import { getStoryblokApi, useStoryblokState } from '@storyblok/react'
 import { ObituaryContainer } from 'components/Obituary'
 import { parseObituaryStory } from 'lib/domain/parseObituaryStory'
+import { Story } from 'lib/storyblok/types'
 import { ObjectID } from 'mongodb'
 import { GetServerSideProps } from 'next'
 import { useTranslation } from 'next-i18next'
@@ -16,11 +17,17 @@ import { IObituary } from '../../lib/domain/types'
 const capitalize = (str = '') => str?.[0]?.toLocaleUpperCase() + str.slice(1)
 
 interface Props {
-  obituary: IObituary
+  story?: Story<IObituary>
+  obituary?: IObituary
 }
 
-export default function Obituary({ obituary }: Props): ReactElement {
+export default function Obituary({
+  story: initialStory,
+  obituary: initialObituary,
+}: Props): ReactElement {
+  const story = useStoryblokState(initialStory)
   const { t } = useTranslation()
+  const obituary = initialObituary || parseObituaryStory(story)
   const {
     firstname,
     name_misc,
@@ -61,7 +68,11 @@ export default function Obituary({ obituary }: Props): ReactElement {
           px={[4, 6, 10]}
           py={[6, 8, 14]}
         >
-          <ObituaryContainer {...obituary} Renderer={ObituaryLarge} />
+          <ObituaryContainer
+            _id={initialObituary?._id}
+            {...obituary}
+            Renderer={ObituaryLarge}
+          />
         </Container>
       </Box>
     </div>
@@ -87,7 +98,7 @@ export const getServerSideProps: GetServerSideProps<
       return {
         props: {
           ...(await serverSideTranslations(locale, ['common'])),
-          obituary: parseObituaryStory(story.data.story),
+          story: story?.data?.story,
         },
       }
     }

diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
@@ -17,14 +17,22 @@ import { useScrollToTop } from 'hooks/useScrollToTop'
 import { REVALIDATE_TIME_SECONDS, STORYBLOK_VERSION } from 'lib/constants'
 import { dehydrate, QueryClient } from '@tanstack/react-query'
 import { connectToDb } from 'db'
-import { getStoryblokApi, StoryblokComponent } from '@storyblok/react'
+import {
+  getStoryblokApi,
+  StoryblokComponent,
+  useStoryblokState,
+} from '@storyblok/react'
 
 interface Props {
   story: PageStory
   category: string
 }
 
-export default function Obituaries({ story, category }: Props): ReactElement {
+export default function Obituaries({
+  story: initialStory,
+  category,
+}: Props): ReactElement {
+  const story = useStoryblokState(initialStory)
   const { t } = useTranslation()
   const router = useRouter()
   const [ref, scrollToTop] = useScrollToTop<HTMLDivElement>()

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -19,7 +19,7 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { STORYBLOK_TOKEN, STORYBLOK_VERSION } from 'lib/constants'
+import { STORYBLOK_VERSION } from 'lib/constants'
 import { apiPlugin, getStoryblokApi, storyblokInit } from '@storyblok/react'
 import { components } from 'components/StoryBlok'
 

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -14,13 +14,18 @@ import {
 import useAppContext from 'contexts/AppContext'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { REVALIDATE_TIME_SECONDS, STORYBLOK_VERSION } from 'lib/constants'
-import { getStoryblokApi, StoryblokComponent } from '@storyblok/react'
+import {
+  getStoryblokApi,
+  StoryblokComponent,
+  useStoryblokState,
+} from '@storyblok/react'
 
 interface Props {
   story: PageStory
 }
 
-export default function Contact({ story }: Props): ReactElement {
+export default function Contact({ story: initialStory }: Props): ReactElement {
+  const story = useStoryblokState(initialStory)
   const { t } = useTranslation()
   const {
     ingress,

diff --git a/pages/privacy-policy.tsx b/pages/privacy-policy.tsx
@@ -1,4 +1,8 @@
-import { getStoryblokApi, StoryblokComponent } from '@storyblok/react'
+import {
+  getStoryblokApi,
+  StoryblokComponent,
+  useStoryblokState,
+} from '@storyblok/react'
 import { STORYBLOK_VERSION } from 'lib/constants'
 import { GetStaticProps } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -9,7 +13,10 @@ interface Props {
   story: PageStory
 }
 
-export default function PrivacyPolicy({ story }: Props): ReactElement {
+export default function PrivacyPolicy({
+  story: initialStory,
+}: Props): ReactElement {
+  const story = useStoryblokState(initialStory)
   return <StoryblokComponent blok={story.content} />
 }
 

diff --git a/pages/services.tsx b/pages/services.tsx
@@ -3,13 +3,18 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { GetStaticProps } from 'next'
 import { PageStory } from '../lib/storyblok/types'
 import { REVALIDATE_TIME_SECONDS, STORYBLOK_VERSION } from 'lib/constants'
-import { getStoryblokApi, StoryblokComponent } from '@storyblok/react'
+import {
+  getStoryblokApi,
+  StoryblokComponent,
+  useStoryblokState,
+} from '@storyblok/react'
 
 interface Props {
   story: PageStory
 }
 
-export default function Services({ story }: Props): ReactElement {
+export default function Services({ story: initialStory }: Props): ReactElement {
+  const story = useStoryblokState(initialStory)
   return <StoryblokComponent blok={story.content} />
 }