Simplify view component and add image sizes for fill items

app/api/revalidate/views/events/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "../invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views:stanford_event');
+}

app/api/revalidate/views/invalidate-views.tsx

@@ -0,0 +1,12 @@
+import {NextRequest, NextResponse} from "next/server";
+import {revalidateTag} from "next/cache";
+
+export const InvalidateViews = (request: NextRequest, tags: string | string[]) => {
+  const secret = request.nextUrl.searchParams.get('secret');
+  if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) {
+    return NextResponse.json({message: 'Invalid token'}, {status: 403});
+  }
+  if (typeof tags === 'string') tags = [tags];
+  tags.forEach(tag => revalidateTag(tag));
+  return NextResponse.json({revalidated: true, tags});
+}

app/api/revalidate/views/news/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "../invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views:stanford_news');
+}

app/api/revalidate/views/pages/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "../invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views:stanford_page');
+}

app/api/revalidate/views/people/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "../invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views:stanford_person');
+}

app/api/revalidate/views/publications/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "../invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views:stanford_publication');
+}

app/api/revalidate/views/route.tsx

@@ -0,0 +1,7 @@
+import {NextRequest} from "next/server";
+import {InvalidateViews} from "./invalidate-views";
+
+// Invalidate all view tags.
+export const GET = async (request: NextRequest) => {
+  return InvalidateViews(request, 'views');
+}

app/sitemap.tsx

@@ -1,39 +1,10 @@
 import {MetadataRoute} from "next";
-
-const xml2js = require('xml2js');
-
-type DrupalSitemapItem = {
-  loc: string[];
-  lastmod?: string[];
-}
-
-type DrupalSitemap = {
-  urlset: {
-    url: DrupalSitemapItem[];
-  }
-}
+import {getAllDrupalPaths} from "@lib/drupal/get-paths";
 
 const Sitemap = async (): Promise<MetadataRoute.Sitemap> => {
-  const xmlParser = new xml2js.Parser();
-
+  const allPaths = await getAllDrupalPaths();
   const urls: MetadataRoute.Sitemap = [];
-
-  try {
-    const drupalSitemap: DrupalSitemapItem[] = await fetch(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL + '/sitemap.xml', {next: {revalidate: 60}})
-      .then(response => response.text())
-      .then<DrupalSitemap>(result => xmlParser.parseStringPromise(result))
-      .then(sitemap => sitemap['urlset'].url);
-
-    const publicDomain = process.env.NEXT_PUBLIC_DOMAIN ?? '';
-    drupalSitemap?.map(item => {
-      urls.push({
-        url: item.loc[0].replace(/http[s]?:\/\/.*?\//g, publicDomain + `/`),
-        lastModified: item.lastmod?.[0],
-      })
-    })
-  } catch (e) {
-    console.error('Sitemap.xml error: ', e);
-  }
+  allPaths.get('node')?.map(path => urls.push({url: `/${path}`}))
   return urls
 }
 export default Sitemap;

next.config.js

@@ -1,9 +1,7 @@
 const drupalUrl = new URL(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL);
 
 const nextConfig = {
-  experimental: {
-    serverActions: true
-  },
+  experimental: {},
   typescript: {
     // Disable build errors since dev dependencies aren't loaded on prod. Rely on GitHub actions to throw any errors.
     ignoreBuildErrors: process.env.CI !== 'true',

package.json

@@ -15,58 +15,57 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.1",
-    "@mui/base": "^5.0.0-beta.29",
+    "@mui/base": "^5.0.0-beta.32",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.46",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@uidotdev/usehooks": "^2.4.1",
-    "autoprefixer": "^10.4.16",
-    "axios": "^1.6.3",
-    "clsx": "^2.0.0",
-    "decanter": "^7.1.2",
+    "autoprefixer": "^10.4.17",
+    "axios": "^1.6.5",
+    "clsx": "^2.1.0",
+    "decanter": "^7.2.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.4.0",
-    "html-react-parser": "^5.0.11",
-    "next": "^13.5.6",
+    "html-react-parser": "^5.1.1",
+    "next": "^14.0.5-canary.65",
     "next-drupal": "^1.6.0",
     "nextjs-google-analytics": "^2.3.3",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-focus-lock": "^2.9.6",
     "react-tiny-oembed": "^1.1.0",
-    "sharp": "^0.33.1",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "usehooks-ts": "^2.9.1",
-    "xml2js": "^0.6.2"
+    "usehooks-ts": "^2.9.4"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/cli": "^5.0.1",
     "@graphql-codegen/typescript-graphql-request": "^6.1.0",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@graphql-codegen/typescript-operations": "^4.1.0",
     "@next/bundle-analyzer": "^14.0.4",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-essentials": "^7.6.9",
+    "@storybook/addon-interactions": "^7.6.9",
+    "@storybook/addon-links": "^7.6.9",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/nextjs": "^7.6.6",
-    "@storybook/react": "^7.6.6",
+    "@storybook/blocks": "^7.6.9",
+    "@storybook/nextjs": "^7.6.9",
+    "@storybook/react": "^7.6.9",
     "@storybook/testing-library": "^0.2.2",
     "concurrently": "^8.2.2",
     "encoding": "^0.1.13",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
-    "storybook": "^7.6.6"
+    "storybook": "^7.6.9"
   },
   "packageManager": "[email protected]"
 }

src/components/elements/wysiwyg.tsx

@@ -252,8 +252,9 @@ const WysiwygImage = ({src, alt, height, width, className = ''}: {
       <Image
         className="object-cover object-center"
         src={src.trim()}
-        alt={alt ? alt.trim() : ""}
-        fill={true}
+        alt={alt?.trim() || ""}
+        fill
+        sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 1500px'}
       />
     </div>
   )

src/components/nodes/cards/stanford-news/stanford-news-card.tsx

@@ -13,7 +13,6 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
   const image = getMediaFromEntityField<ImageType>(node.suNewsFeaturedMedia)
   const imageUrl = image?.url;
-  const imageAlt = image?.alt || '';
 
   const topics: TermUnion[] = node.suNewsTopics ? node.suNewsTopics.slice(0, 3) : [];
   const Heading = headingLevel === 'h3' ? H3 : H2;
@@ -23,10 +22,11 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
       {imageUrl &&
         <div className="relative aspect-[16/9] w-full">
           <Image
+            className="object-cover"
             src={imageUrl}
-            alt={imageAlt}
+            alt={image?.alt || ''}
             fill
-            className="object-cover"
+            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />
         </div>
       }

src/components/nodes/cards/stanford-page/stanford-page-card.tsx

@@ -14,7 +14,6 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
   const image = getMediaFromEntityField<ImageType>(node.suPageImage) || getMediaFromEntityField<ImageType>(node.suPageBanner?.__typename === 'ParagraphStanfordBanner' ? node.suPageBanner?.suBannerImage : undefined);
 
   const imageUrl = image?.url
-  const imageAlt = image?.alt || '';
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
@@ -23,10 +22,11 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
         <div
           className="relative aspect-[16/9] w-full">
           <Image
+            className="object-cover"
             src={imageUrl}
-            alt={imageAlt}
+            alt={image?.alt || ''}
             fill
-            className="object-cover"
+            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />
         </div>
       }

src/components/nodes/cards/stanford-person/stanford-person-card.tsx

@@ -19,10 +19,11 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
       {imageUrl &&
         <div className="relative aspect-[1/1] mx-auto mb-20 w-3/5">
           <Image
+            className="rounded-full object-cover"
             src={imageUrl}
             alt=""
             fill
-            className="rounded-full object-cover"
+            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />
         </div>
       }

src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx

@@ -13,7 +13,6 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
   const image = getMediaFromEntityField<ImageType>(node.suNewsFeaturedMedia)
   const imageUrl = image?.url;
-  const imageAlt = image?.alt || '';
 
   const publishDate = node.suNewsPublishingDate && new Date(node.suNewsPublishingDate.time);
 
@@ -53,10 +52,11 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
         {imageUrl &&
           <div className="order-1 @3xl:order-2 relative aspect-[16/9] @3xl:w-1/4 mb-10 @3xl:mb-0 shrink-0">
             <Image
+              className="object-cover"
               src={imageUrl}
-              alt={imageAlt}
+              alt={image?.alt || ''}
               fill
-              className="object-cover"
+              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />
           </div>
         }

src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx

@@ -14,7 +14,6 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
   const image = getMediaFromEntityField<ImageType>(node.suPageImage) || getMediaFromEntityField<ImageType>(node.suPageBanner?.__typename === 'ParagraphStanfordBanner' ? node.suPageBanner?.suBannerImage : undefined);
 
   const imageUrl = image?.url
-  const imageAlt = image?.alt || '';
 
   const Heading = headingLevel === 'h3' ? H3 : H2;
   return (
@@ -36,10 +35,11 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
           <div
             className="order-1 @4xl:order-2 relative aspect-[16/9] h-fit w-full @4xl:w-1/4 shrink-0">
             <Image
+              className="object-cover"
               src={imageUrl}
-              alt={imageAlt}
+              alt={image?.alt || ''}
               fill
-              className="object-cover"
+              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />
           </div>
         }

src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx

@@ -19,10 +19,11 @@ const StanfordPersonListItem = ({node, headingLevel, ...props}: Props) => {
       {imageUrl &&
         <div className="relative aspect-[1/1] w-full mx-auto mb-20">
           <Image
+            className="rounded-full object-cover"
             src={imageUrl}
             alt=""
             fill
-            className="rounded-full object-cover"
+            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />
         </div>
       }

src/components/nodes/pages/stanford-event/stanford-event-page.tsx

@@ -140,9 +140,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
 
 
       {node.suEventComponents &&
-        <div>
-          <Rows components={node.suEventComponents}/>
-        </div>
+        <Rows components={node.suEventComponents}/>
       }
 
       {node.suEventSchedule &&

src/components/nodes/pages/stanford-news/stanford-news-page.tsx

@@ -68,11 +68,12 @@ const StanfordNewsPage = ({node, ...props}: Props) => {
         <figure className="mb-32">
           <div className="relative w-full aspect-[16/9]">
             <Image
+              className="object-cover"
               src={bannerImageUrl}
               alt={bannerImageAlt}
-              fill
-              className="object-cover"
               loading="eager"
+              fill
+              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />
           </div>
           {node.suNewsBannerMediaCaption &&

src/components/nodes/pages/stanford-person/stanford-person-page.tsx

@@ -25,11 +25,12 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
         {imageUrl &&
           <div className="relative aspect-[1/1] w-[250px] shrink-0 mx-auto lg:mx-0">
             <Image
+              className="rounded-full"
               src={imageUrl}
               alt=""
-              fill
-              className="rounded-full"
               loading="eager"
+              fill
+              sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
             />
           </div>
         }

src/components/paragraphs/stanford-banner/banner-paragraph-display.tsx

@@ -28,11 +28,12 @@ const BannerParagraphDisplay = ({media, header, supHeader, body, link}: Props) =
         className="aspect-[16/9] @6xl:aspect-auto relative @6xl:absolute w-full @6xl:h-full bg-cool-grey">
         {imageUrl &&
           <Image
-            src={imageUrl}
-            alt={imageAlt ?? ""}
-            fill
             className="object-cover"
+            src={imageUrl}
+            alt={imageAlt || ""}
             loading={media?.loading || 'lazy'}
+            fill
+            sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />
         }
       </div>