Fixed metatags on digital project pages

package.json

@@ -19,9 +19,9 @@
     "@mui/base": "5.0.0-beta.68",
     "@next/third-parties": "15.1.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^22.10.5",
-    "@types/react": "^19.0.4",
-    "@types/react-dom": "19.0.2",
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "19.0.3",
     "algoliasearch": "5.19.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
@@ -32,15 +32,15 @@
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.2.2",
-    "next": "^15.2.0-canary.2",
+    "next": "^15.2.0-canary.12",
     "plaiceholder": "^3.0.0",
-    "postcss": "^8.4.49",
-    "qs": "^6.13.1",
+    "postcss": "^8.5.1",
+    "qs": "^6.14.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-focus-lock": "^2.13.5",
-    "react-instantsearch": "^7.13.10",
-    "react-instantsearch-nextjs": "^0.3.21",
+    "react-instantsearch": "^7.15.0",
+    "react-instantsearch-nextjs": "^0.4.1",
     "react-slick": "^0.30.3",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.5",
@@ -56,29 +56,29 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.4.0",
     "@next/bundle-analyzer": "15.1.4",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/nextjs": "^8.4.7",
-    "@storybook/react": "^8.4.7",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/nextjs": "^8.5.0",
+    "@storybook/react": "^8.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.1.2",
     "encoding": "^0.1.13",
-    "eslint": "9.17.0",
+    "eslint": "9.18.0",
     "eslint-config-next": "15.1.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
     "eslint-plugin-storybook": "^0.11.2",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.10",
     "react-docgen": "^7.1.0",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.0",
     "storybook-addon-module-mock": "^1.3.4",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript-eslint": "8.19.1"
+    "typescript-eslint": "8.20.0"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/elements/tabs.tsx

@@ -12,7 +12,7 @@ import {UseTabsParameters} from "@mui/base/useTabs/useTabs.types"
 import {UseTabsListParameters} from "@mui/base/useTabsList/useTabsList.types"
 import {UseTabPanelParameters} from "@mui/base/useTabPanel/useTabPanel.types"
 import {useRouter, useSearchParams} from "next/navigation"
-import {useScreen} from "usehooks-ts"
+import {useIsClient, useScreen} from "usehooks-ts"
 
 // View the API for all the tab components here: https://mui.com/base-ui/react-tabs/hooks-api/.
 type TabsProps = HTMLAttributes<HTMLDivElement> & {
@@ -145,9 +145,17 @@ type TabPanelProps = UseTabPanelParameters & {
 
 export const TabPanel = ({panelProps, className, children}: TabPanelProps) => {
   const rootRef = useRef<HTMLDivElement>(null)
-  const {getRootProps} = useTabPanel({rootRef})
+  const {getRootProps, hidden} = useTabPanel({rootRef})
+  const isClient = useIsClient()
+
   return (
-    <section {...getRootProps()} {...panelProps} role="tabpanel" className={className}>
+    <section
+      {...getRootProps()}
+      {...panelProps}
+      role="tabpanel"
+      className={className}
+      hidden={isClient ? hidden : false}
+    >
       {children}
     </section>
   )

src/components/nodes/pages/sup-book/digital-project-page/digital-project-page.tsx

@@ -9,6 +9,7 @@ import BookAwards from "@components/nodes/pages/sup-book/book-awards"
 import BookPageImage from "@components/nodes/pages/sup-book/book-page-image"
 import Button from "@components/elements/button"
 import ExcerptButton from "@components/elements/excerpt-button"
+import NodePageMetadata from "@components/nodes/pages/node-page-metadata"
 
 type Props = HTMLAttributes<HTMLElement> & {
   node: NodeSupBook
@@ -34,6 +35,14 @@ const DigitalProjectPage = async ({node, ...props}: Props) => {
 
   return (
     <article {...props} className="centered">
+      <NodePageMetadata metatags={node.metatag} pageTitle={node.title} backupDescription={node.supBookSubtitle}>
+        {node.supBookAuthors?.map(author => (
+          <>
+            <meta property="book:author:profile:first_name" content={author.given || undefined} />
+            <meta property="book:author:profile:last_name" content={author.family || undefined} />
+          </>
+        ))}
+      </NodePageMetadata>
       <div className="mb-20 flex flex-col md:rs-mt-4 md:flex-row md:gap-32 lg:gap-[7.6rem]">
         <div className="relative left-1/2 flex w-screen -translate-x-1/2 flex-col justify-center bg-fog-light px-20 md:hidden">
           <div className="flex flex-row gap-24">