Add ESLint deprecation linting

.eslintrc.json

@@ -1,7 +1,14 @@
 {
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
   "extends": [
     "next/core-web-vitals",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:deprecation/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "off",

.storybook/main.ts

@@ -1,8 +1,6 @@
-// @ts-nocheck
+import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 import type {StorybookConfig} from "@storybook/nextjs";
 
-const path = require("path");
-
 const config: StorybookConfig = {
   framework: {
     name: "@storybook/nextjs",
@@ -38,8 +36,7 @@ const config: StorybookConfig = {
     autodocs: "tag",
   },
   webpackFinal: async (config) => {
-    config.resolve.alias['@components'] = path.resolve(__dirname, '../src/components')
-    config.resolve.alias['@lib'] = path.resolve(__dirname, '../src/lib')
+    if (config.resolve) config.resolve.plugins = [new TsconfigPathsPlugin()];
     return config
   },
 };

.storybook/stories/paragraphs/Banner.stories.tsx

@@ -1,12 +1,11 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import BannerParagraphDisplay from "@components/paragraphs/stanford-banner/banner-paragraph-display";
 import {ComponentProps} from "react";
-import {getStoryBookImage} from "../storybook-entities";
 
 type ComponentStoryProps = ComponentProps<typeof BannerParagraphDisplay> & {
   linkUrl?: string
   linkTitle?: string
-  mediaChoice?: string
+  imageUrl?: string
 }
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
@@ -15,10 +14,6 @@ const meta: Meta<ComponentStoryProps> = {
   component: BannerParagraphDisplay,
   tags: ['autodocs'],
   argTypes: {
-    mediaChoice: {
-      options: ["image", "none"],
-      control: {type: "select"}
-    }
   }
 };
 
@@ -27,12 +22,7 @@ type Story = StoryObj<ComponentStoryProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Banner: Story = {
-  render: ({linkUrl, linkTitle, mediaChoice, ...args}) => {
-    const image = getStoryBookImage();
-    args.media = mediaChoice === 'image' ? {
-      imageUrl: image.mediaImage.url,
-      imageAlt: image.mediaImage.alt
-    } : undefined;
+  render: ({linkUrl, linkTitle, imageUrl, ...args}) => {
     args.link = {
       url: linkUrl,
       title: linkTitle,
@@ -41,7 +31,7 @@ export const Banner: Story = {
     return <BannerParagraphDisplay {...args}/>
   },
   args: {
-    mediaChoice: "image",
+    imageUrl: "image",
     header: "header",
     supHeader: "supHeader",
     body: "body",

.storybook/stories/paragraphs/Card.stories.tsx

@@ -35,13 +35,13 @@ export const Card: Story = {
   render: ({mediaChoice, ...args}) => {
     if (mediaChoice === 'image') {
       const image = getStoryBookImage();
-      args.media = {
-        imageUrl: image.mediaImage.url,
-        imageAlt: image.mediaImage.alt,
+      args.image = {
+        url: image.mediaImage.url,
+        alt: image.mediaImage.alt,
       }
     }
     if (mediaChoice === 'video') {
-      args.media = {videoUrl: getStoryBookVideo().mediaOembedVideo};
+      args.videoUrl = getStoryBookVideo().mediaOembedVideo;
     }
     args.link = {
       url: args.linkUrl,

app/api/draft/route.tsx

@@ -1,6 +1,5 @@
 import {draftMode} from 'next/headers'
 import {redirect} from 'next/navigation'
-import {getEntityFromPath} from "@lib/gql/fetcher";
 import {NextRequest, NextResponse} from "next/server";
 
 export const revalidate = 0;
@@ -20,13 +19,6 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({message: 'Invalid slug path'}, {status: 401})
   }
 
-  const routeInfo = await getEntityFromPath(slug, true)
-
-  // If the slug doesn't exist prevent disable draft mode and return
-  if (!routeInfo?.entity) {
-    return NextResponse.json({message: 'Invalid slug'}, {status: 401})
-  }
-
   draftMode().enable()
 
   // Redirect to the path from the fetched post

app/layout.tsx

@@ -4,12 +4,12 @@ import PageHeader from "@components/global/page-header";
 import PageFooter from "@components/global/page-footer";
 import Editori11y from "@components/tools/editorially";
 import Script from "next/script";
-import GoogleAnalytics from "@components/tools/google-analytics";
 import {isDraftMode} from "@lib/drupal/utils";
 import BackToTop from "@components/elements/back-to-top";
 import Link from "@components/elements/link";
 import {getConfigPage} from "@lib/gql/fetcher";
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal";
+import {GoogleAnalytics} from "@next/third-parties/google";
 
 export const metadata = {
   // Update the metadataBase to the production domain.
@@ -32,7 +32,7 @@ const RootLayout = async ({children, modal}: { children: React.ReactNode, modal:
     {(!draftMode && siteSettingsConfig?.suGoogleAnalytics) &&
       <>
         <Script async src="//siteimproveanalytics.com/js/siteanalyze_80352.js"/>
-        <GoogleAnalytics gaMeasurementId={siteSettingsConfig?.suGoogleAnalytics}/>
+        <GoogleAnalytics gaId={siteSettingsConfig?.suGoogleAnalytics}/>
       </>
     }
     <body>

next.config.js

@@ -19,6 +19,11 @@ const nextConfig = {
       },
     ],
   },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    }
+  },
   async rewrites() {
     return {
       beforeFiles: [
@@ -44,25 +49,7 @@ const nextConfig = {
         ],
       },
     ];
-  },
-  async redirects() {
-    const devRedirects = [];
-    if (process.env.NODE_ENV === 'development') {
-      devRedirects.push({
-        source: '/style-guide',
-        destination: 'http://localhost:6006',
-        permanent: false,
-      });
-    }
-    return [
-      {
-        source: '/home',
-        destination: '/',
-        permanent: true,
-      },
-      ...devRedirects,
-    ];
-  },
+  }
 };
 
 module.exports = nextConfig;

package.json

@@ -16,10 +16,11 @@
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.1",
     "@mui/base": "^5.0.0-beta.33",
+    "@next/third-parties": "^14.1.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@uidotdev/usehooks": "^2.4.1",
     "algoliasearch": "^4.22.1",
     "autoprefixer": "^10.4.17",
@@ -36,8 +37,7 @@
     "html-react-parser": "^5.1.2",
     "next": "^14.1.0",
     "next-drupal": "^1.6.0",
-    "nextjs-google-analytics": "^2.3.3",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -52,10 +52,10 @@
     "usehooks-ts": "^2.13.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.1",
+    "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/near-operation-file-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "^4.1.0",
+    "@graphql-codegen/typescript-operations": "^4.1.2",
     "@next/bundle-analyzer": "^14.1.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -67,6 +67,7 @@
     "@storybook/testing-library": "^0.2.2",
     "concurrently": "^8.2.2",
     "encoding": "^0.1.13",
+    "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
     "storybook": "^7.6.13",

src/components/elements/ombed.tsx

@@ -2,19 +2,18 @@
 
 import {SignalIcon} from "@heroicons/react/20/solid";
 import Embed from "react-tiny-oembed";
-import {HtmlHTMLAttributes, useRef} from "react";
+import {HtmlHTMLAttributes} from "react";
 import {useIntersectionObserver} from "usehooks-ts";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   url: string
 }
 
 const Oembed = ({url, ...props}: Props) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const entry = useIntersectionObserver(ref, {freezeOnceVisible: true});
+  const {isIntersecting, ref} = useIntersectionObserver({freezeOnceVisible: true})
   return (
     <div {...props} ref={ref} className="relative aspect-[16/9] w-full">
-      {!!entry?.isIntersecting && <Embed url={url} LoadingFallbackElement={<Loading/>}/>}
+      {isIntersecting && <Embed url={url} LoadingFallbackElement={<Loading/>}/>}
     </div>
   )
 }

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

@@ -6,22 +6,19 @@ import {H2} from "@components/elements/headers";
 import {Maybe, Link as LinkType} from "@lib/gql/__generated__/drupal";
 
 type Props = {
-  media?: {
-    imageUrl: string
-    imageAlt?: Maybe<string>
-    placeholder?: Maybe<string>
-    loading?: 'lazy' | 'eager'
-  }
+  imageUrl?: Maybe<string>
+  imageAlt?: Maybe<string>
+  imageLoading?: 'lazy' | 'eager'
+
   header?: Maybe<string>
   supHeader?: Maybe<string>
   body?: Maybe<string>
   link?: Maybe<LinkType>
 }
 
-const BannerParagraphDisplay = ({media, header, supHeader, body, link}: Props) => {
+const BannerParagraphDisplay = ({imageUrl, imageAlt, imageLoading, header, supHeader, body, link}: Props) => {
   const hasCard = header || link || body || supHeader
 
-  const {imageUrl, imageAlt} = media ?? {};
   return (
     <div className="@container md:min-h-[400px] mb-20">
       <div
@@ -31,7 +28,7 @@ const BannerParagraphDisplay = ({media, header, supHeader, body, link}: Props) =
             className="object-cover"
             src={imageUrl}
             alt={imageAlt || ""}
-            loading={media?.loading || 'lazy'}
+            loading={imageLoading || 'lazy'}
             fill
             sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />

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

@@ -8,14 +8,12 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
-  const image = paragraph.suBannerImage?.mediaImage
-  const imageUrl = image?.url
-  const imageAlt = image?.alt || '';
-
   return (
     <div {...props}>
       <BannerParagraphDisplay
-        media={imageUrl ? {imageUrl, imageAlt, loading: eagerLoadImage ? 'eager' : 'lazy'} : undefined}
+        imageUrl={paragraph.suBannerImage?.mediaImage.url}
+        imageAlt={paragraph.suBannerImage?.mediaImage.alt}
+        imageLoading={eagerLoadImage ? 'eager':'lazy'}
         header={paragraph.suBannerHeader}
         supHeader={paragraph.suBannerSupHeader}
         body={paragraph.suBannerBody?.processed}

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

@@ -7,11 +7,11 @@ import Button from "@components/elements/button";
 import {Maybe} from "@lib/gql/__generated__/drupal";
 
 type Props = {
-  media?: {
-    imageUrl?: Maybe<string>
-    imageAlt?: Maybe<string>
-    videoUrl?: Maybe<string>
+  image?: {
+    url?: Maybe<string>
+    alt?: Maybe<string>
   }
+  videoUrl?: Maybe<string>
   header?: Maybe<string>
   supHeader?: Maybe<string>
   body?: Maybe<string>
@@ -22,17 +22,17 @@ type Props = {
   }
 }
 
-const CardParagraphDisplay = ({media, header, supHeader, body, link}: Props) => {
-  const {imageUrl, imageAlt, videoUrl} = media ?? {};
+const CardParagraphDisplay = ({image, videoUrl, header, supHeader, body, link}: Props) => {
+
   return (
     <div
       className="centered lg:max-w-[980px] w-full shadow-lg border border-black-10">
-      {imageUrl &&
+      {image?.url &&
         <div className="relative aspect-[16/9] w-full">
           <Image
             className="object-cover object-center"
-            src={imageUrl}
-            alt={imageAlt || ""}
+            src={image.url}
+            alt={image.alt || ""}
             fill
             sizes={'(max-width: 768px) 100vw, (max-width: 900px) 50vw, (max-width: 1700px) 33vw, 500px'}
           />

src/components/paragraphs/stanford-card/card-paragraph.tsx

@@ -8,7 +8,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const CardParagraph = ({paragraph, ...props}: Props) => {
-  const behaviors = getParagraphBehaviors(paragraph);
+  const behaviors = getParagraphBehaviors(paragraph)
 
   let imageUrl: string | undefined,
     imageAlt: string | undefined,
@@ -26,7 +26,8 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
   return (
     <div {...props}>
       <CardParagraphDisplay
-        media={imageUrl || videoUrl ? {imageUrl, imageAlt, videoUrl} : undefined}
+        image={{url: imageUrl, alt: imageAlt}}
+        videoUrl={videoUrl}
         header={paragraph.suCardHeader}
         supHeader={paragraph.suCardSuperHeader}
         body={paragraph.suCardBody?.processed}