Added slideshow component

app/page.tsx

@@ -1,7 +1,7 @@
 import Rows from "@components/paragraphs/rows/rows";
 import {notFound} from "next/navigation";
-import {getEntityFromPath} from "@lib/gql/gql-queries";
-import {NodeStanfordPage, NodeUnion} from "@lib/gql/__generated__/drupal.d";
+import {getConfigPage, getEntityFromPath} from "@lib/gql/gql-queries";
+import {NodeStanfordPage, NodeUnion, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
 import {isPreviewMode} from "@lib/drupal/utils";
 import {Metadata} from "next";
 import {getNodeMetadata} from "./[...slug]/metadata";
@@ -32,8 +32,12 @@ const Home = async () => {
 }
 
 export const generateMetadata = async (): Promise<Metadata> => {
+  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>("StanfordBasicSiteSetting")
   const {entity} = await getEntityFromPath<NodeUnion>("/")
-  return entity ? getNodeMetadata(entity) : {};
+  const metadata = entity ? getNodeMetadata(entity) : {};
+  metadata.title = siteSettingsConfig?.suSiteName || metadata.title;
+  if (metadata.openGraph?.title) metadata.openGraph.title = siteSettingsConfig?.suSiteName || metadata.openGraph.title;
+  return metadata;
 }
 
 export default Home;

package.json

@@ -16,11 +16,11 @@
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.3",
     "@js-temporal/polyfill": "^0.4.4",
-    "@mui/base": "^5.0.0-beta.41",
+    "@mui/base": "^5.0.0-beta.42",
     "@next/third-parties": "^14.1.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.12.4",
-    "@types/react": "^18.2.74",
+    "@types/node": "^20.12.6",
+    "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "algoliasearch": "^4.23.2",
     "autoprefixer": "^10.4.19",
@@ -35,7 +35,7 @@
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
-    "next": "^14.2.0-canary.58",
+    "next": "^14.2.0-canary.63",
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.38",
     "qs": "^6.12.0",
@@ -44,6 +44,7 @@
     "react-focus-lock": "^2.11.2",
     "react-instantsearch": "^7.7.1",
     "react-instantsearch-nextjs": "^0.2.0",
+    "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.3",
     "tailwind-merge": "^2.2.2",
@@ -58,21 +59,22 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@next/bundle-analyzer": "^14.1.4",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/nextjs": "^8.0.5",
-    "@storybook/react": "^8.0.5",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/nextjs": "^8.0.6",
+    "@storybook/react": "^8.0.6",
     "@storybook/testing-library": "^0.2.2",
+    "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
     "encoding": "^0.1.13",
     "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^3.1.0",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.0.5",
+    "storybook": "^8.0.6",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

src/components/elements/slideshow.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {HTMLAttributes, JSX} from "react";
+import Slider, {CustomArrowProps, Settings} from "react-slick";
+import {ArrowLeftIcon, ArrowRightIcon} from "@heroicons/react/16/solid";
+import {twMerge} from "tailwind-merge";
+import {clsx} from "clsx";
+
+
+const NextArrow = ({className, onClick}: CustomArrowProps) => {
+  const slickDisabled = !!(className && className?.indexOf("slick-disabled") > 0);
+  return (
+    <button
+      className="absolute top-1/3 right-1 z-50"
+      onClick={onClick}
+      aria-label="Next"
+      disabled={slickDisabled}
+    >
+      <ArrowRightIcon className={twMerge(clsx("w-50 text-black-true bg-teal rounded-full p-10", {"text-black-50": slickDisabled}))}/>
+    </button>
+  );
+};
+
+const PrevArrow = ({className, onClick}: CustomArrowProps) => {
+  const slickDisabled = !!(className && className?.indexOf("slick-disabled") > 0);
+  return (
+    <button
+      className="absolute top-1/3 left-1 z-50"
+      onClick={onClick}
+      aria-label="Previous"
+      disabled={slickDisabled}
+    >
+      <ArrowLeftIcon className={twMerge(clsx("w-50 text-black-true bg-teal rounded-full p-10", {"text-black-50": slickDisabled}))}/>
+    </button>
+  );
+};
+
+type SlideshowProps = HTMLAttributes<HTMLDivElement> & {
+  children: JSX.Element | JSX.Element[];
+  slideshowProps?: Omit<Settings, "children">;
+}
+
+const Slideshow = ({children, slideshowProps, ...props}: SlideshowProps) => {
+  const settings: Settings = {
+    autoplay: false,
+    centerMode: false,
+    className: "overflow-hidden pb-8 [&_.slick-slide]:float-left [&_.slick-slide]:px-5",
+    dots: false,
+    infinite: false,
+    initialSlide: 0,
+    nextArrow: <NextArrow/>,
+    prevArrow: <PrevArrow/>,
+    slidesToScroll: 1,
+    slidesToShow: 3,
+    speed: 500,
+    responsive: [
+      {
+        breakpoint: 992,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          centerMode: false,
+        },
+      },
+    ],
+    ...slideshowProps,
+  };
+  return (
+    <div {...props} className={twMerge("relative w-full", props.className)}>
+      <Slider {...settings}>
+        {children}
+      </Slider>
+    </div>
+  );
+};
+
+export default Slideshow;