From 41ec812bee855db521426a63a57aa0c45aa0669c Mon Sep 17 00:00:00 2001 From: Adam Joseph Arling Date: Thu, 22 Feb 2024 09:17:52 -0600 Subject: [PATCH 1/2] Normalize page titles, meta description, and open-graph values across app Upgrade deps Normalize title, meta, and open graph values to be consistent and follow best practices Add a constants file to help organize head meta values Stop tracking .vscode directory --- .prettierrc.json | 0 .vscode/settings.json | 7 - components/layout.tsx | 18 +- lib/constants/head-meta.ts | 18 + lib/open-graph.test.ts | 6 +- lib/open-graph.ts | 22 +- package-lock.json | 2329 ++++++++++++++++++++++------------ pages/about.tsx | 7 +- pages/collections/[id].tsx | 6 +- pages/collections/index.tsx | 10 +- pages/contact.tsx | 7 +- pages/items/[id].tsx | 10 +- pages/search.tsx | 7 +- pages/shared/[id].tsx | 2 +- playwright-report/index.html | 62 + 15 files changed, 1624 insertions(+), 887 deletions(-) delete mode 100644 .prettierrc.json delete mode 100644 .vscode/settings.json create mode 100644 lib/constants/head-meta.ts create mode 100644 playwright-report/index.html diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index e69de29b..00000000 diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 5233bb24..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "editor.codeActionsOnSave": { - "source.fixAll": true, - "source.organizeImports": false - }, - "eslint.codeActionsOnSave.rules": null -} diff --git a/components/layout.tsx b/components/layout.tsx index 18bd1515..ee9f7e7c 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -2,31 +2,36 @@ import "swiper/css"; import "swiper/css/effect-fade"; import "swiper/css/navigation"; import "swiper/css/pagination"; + import Footer from "@/components/Footer/Footer"; import Head from "next/head"; import Header from "@/components/Header/Header"; import React from "react"; +import { defaultOpenGraphData } from "@/lib/open-graph"; import { styled } from "@/stitches.config"; -export const siteTitle = "Digital Collections v2"; - const MainStyled = styled("main", { minHeight: "300px", }); interface LayoutProps { children: React.ReactNode; + description?: string; header?: "default" | "hero"; title?: string; } const Layout: React.FC = ({ children, + description = defaultOpenGraphData["og:description"], header = "default", - title = "Digital Collections - Northwestern University Libraries", + title }) => { const [isLoaded, setIsLoaded] = React.useState(false); + const titleTagText = `${title ? `${title} - ` : ''}${defaultOpenGraphData["og:site_name"]}`; + const metaDescriptionContent = description; + React.useEffect(() => { setIsLoaded(true); }, []); @@ -37,15 +42,12 @@ const Layout: React.FC = ({ <> - - {title} + + {titleTagText}
{children}