From b30cde9c0f4e77092ba67cf9fe89e0c15d25c3a5 Mon Sep 17 00:00:00 2001 From: Steve Persch Date: Tue, 17 May 2022 16:33:50 -0500 Subject: [PATCH 1/4] delete recipes --- pages/recipes/[...slug].js | 196 ------------------------------------- pages/recipes/index.js | 144 --------------------------- 2 files changed, 340 deletions(-) delete mode 100644 pages/recipes/[...slug].js delete mode 100644 pages/recipes/index.js diff --git a/pages/recipes/[...slug].js b/pages/recipes/[...slug].js deleted file mode 100644 index 39c6f7b..0000000 --- a/pages/recipes/[...slug].js +++ /dev/null @@ -1,196 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import { NextSeo } from "next-seo"; -import { isMultiLanguage } from "../../lib/isMultiLanguage"; -import { DrupalState } from "@pantheon-systems/drupal-kit"; -import Layout from "../../components/layout"; - -import { DRUPAL_URL, IMAGE_URL } from "../../lib/constants.js"; - -export default function Recipe({ recipe, hrefLang }) { - const imgSrc = recipe.field_media_image?.field_media_image?.uri?.url || ""; - - return ( - - -
-
-

{recipe.title}

-
- - Recipes → - - - {recipe.field_recipe_category[0].name} - -
-
- {imgSrc ? ( -
- {recipe.title} -
- ) : null} - -
-
-

Ingredients

-
    - {recipe.field_ingredients?.map((ingredient, i) => { - if (ingredient.startsWith("For")) { - return ( -
  • - {ingredient} -
    • - ); - } else { - return
  • {ingredient}
    • ; - } - })} -
-
-
-

Directions

-
-
-
-
- - ); -} - -export async function getStaticPaths(context) { - const { locales } = context; - const multiLanguage = isMultiLanguage(context.locales); - // TODO - locale increases the complexity enough here that creating a usePaths - // hook would be a good idea. - // Get paths for each locale. - const pathsByLocale = locales.map(async (locale) => { - const store = new DrupalState({ - apiBase: DRUPAL_URL, - defaultLocale: multiLanguage ? locale : "", - }); - - const recipes = await store.getObject({ - objectName: "node--recipe", - query: ` - { - id - path { - alias - } - } - `, - }); - - return recipes.map((recipe) => { - const match = recipe.path.alias.match(/^\/recipes\/(.*)$/); - const slug = match[1]; - - return { params: { slug: [slug] }, locale: locale }; - }); - }); - - // Resolve all promises returned as part of pathsByLocale. - const paths = await Promise.all(pathsByLocale).then((values) => { - // Flatten the array of arrays into a single array. - return [].concat(...values); - }); - - return { - paths, - fallback: false, - }; -} - -export async function getStaticProps(context) { - const { locales, locale } = context; - const multiLanguage = isMultiLanguage(locales); - - const store = new DrupalState({ - apiBase: DRUPAL_URL, - defaultLocale: multiLanguage ? locale : "", - }); - store.params.addInclude([ - "field_media_image.field_media_image", - "field_recipe_category", - ]); - const slug = `/recipes/${context.params.slug[0]}`; - try { - const recipe = await store.getObjectByPath({ - objectName: "node--recipe", - path: `${multiLanguage ? locale : ""}${slug}`, - query: `{ - id - title - field_ingredients - field_recipe_instruction - field_summary - field_media_image - field_recipe_category { - name - } - path { - alias - } - }`, - }); - - if (!recipe) { - throw new Error( - "No recipe returned. Make sure the objectName and store.params are valid!: ", - error - ); - } - - const origin = process.env.NEXT_PUBLIC_FRONTEND_URL; - // Load all the paths for the current recipe. - const paths = locales.map(async (locale) => { - const storeByLocales = new DrupalState({ - apiBase: DRUPAL_URL, - defaultLocale: multiLanguage ? locale : "", - }); - const { path } = await storeByLocales.getObject({ - objectName: "node--recipe", - id: recipe.id, - }); - return path; - }); - - // Resolve all promises returned as part of paths - // and prepare hrefLang. - const hrefLang = await Promise.all(paths).then((values) => { - return values.map((value) => { - return { - hrefLang: value.langcode, - href: origin + "/" + value.langcode + value.alias, - }; - }); - }); - - return { - props: { - recipe, - hrefLang, - revalidate: 60, - }, - }; - } catch (error) { - console.error("Unable to fetch recipe: ", error); - return { - props: {}, - }; - } -} diff --git a/pages/recipes/index.js b/pages/recipes/index.js deleted file mode 100644 index 96fbc7e..0000000 --- a/pages/recipes/index.js +++ /dev/null @@ -1,144 +0,0 @@ -import Image from "next/image"; -import Link from "next/link"; -import { NextSeo } from "next-seo"; -import { DrupalState } from "@pantheon-systems/drupal-kit"; -import { isMultiLanguage } from "../../lib/isMultiLanguage"; -import Layout from "../../components/layout"; -import { DRUPAL_URL, IMAGE_URL } from "../../lib/constants.js"; - -export default function Recipes({ recipes, hrefLang }) { - function RecipesList() { - return ( -
- {recipes ? ( -
- {recipes?.map( - ({ - id, - title, - field_media_image, - field_recipe_category, - path, - }) => { - const imgSrc = - field_media_image?.field_media_image?.uri?.url || ""; - return ( - - -
-
- {imgSrc !== "" ? ( - { - ) : ( -
- Pantheon Logo -
- )} -
-

- {title} → -

- - {field_recipe_category[0].name} - -
- - - ); - } - )} -
- ) : ( -

No recipes found 🏜

- )} -
- ); - } - return ( - - -
-

Recipes

-
- - - ); -} - -export async function getStaticProps(context) { - const origin = process.env.NEXT_PUBLIC_FRONTEND_URL; - const { locales, locale } = context; - const multiLanguage = isMultiLanguage(locales); - - const hrefLang = locales.map((locale) => { - return { - hrefLang: locale, - href: origin + "/" + locale, - }; - }); - - const store = new DrupalState({ - apiBase: DRUPAL_URL, - defaultLocale: multiLanguage ? locale : "", - }); - - store.params.addInclude([ - "field_media_image.field_media_image", - "field_recipe_category", - ]); - - try { - const recipes = await store.getObject({ - objectName: "node--recipe", - query: `{ - id - title - field_media_image - field_recipe_category - path - }`, - }); - - if (!recipes) { - throw new Error( - "No recipes returned. Make sure the objectName and store.params are valid!: ", - error - ); - } - - return { - props: { - recipes, - hrefLang, - }, - revalidate: 60, - }; - } catch (error) { - console.error("Unable to fetch recipes: ", error); - return { - props: {}, - }; - } -} From 3668a5eefeeaa2d2e06b6605f1756b9daddd63f9 Mon Sep 17 00:00:00 2001 From: Steve Persch Date: Tue, 17 May 2022 22:05:02 -0500 Subject: [PATCH 2/4] server-side render of articles page --- pages/articles/[...slug].js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pages/articles/[...slug].js b/pages/articles/[...slug].js index 94cecdb..ed9a725 100644 --- a/pages/articles/[...slug].js +++ b/pages/articles/[...slug].js @@ -47,7 +47,7 @@ export default function Home({ article, hrefLang }) { ); } -export async function getStaticPaths(context) { +export async function getServerSidePaths(context) { const multiLanguage = isMultiLanguage(context.locales); // TODO - locale increases the complexity enough here that creating a usePaths // hook would be a good idea. @@ -92,7 +92,7 @@ export async function getStaticPaths(context) { }; } -export async function getStaticProps(context) { +export async function getServerSideProps(context) { const multiLanguage = isMultiLanguage(context.locales); // TODO - determine apiBase from environment variables const store = new DrupalState({ @@ -184,6 +184,11 @@ export async function getStaticProps(context) { }); }); + context.res.setHeader( + 'Cache-Control', + 'public, s-maxage=10, stale-while-revalidate=6000' + ); + return { props: { article, From 3db2eb71dd5e97ded180fae6b91f42fa9494a935 Mon Sep 17 00:00:00 2001 From: Steve Persch Date: Wed, 18 May 2022 07:08:03 -0500 Subject: [PATCH 3/4] low revalidate number for article pages --- pages/articles/[...slug].js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pages/articles/[...slug].js b/pages/articles/[...slug].js index ed9a725..5640c68 100644 --- a/pages/articles/[...slug].js +++ b/pages/articles/[...slug].js @@ -193,7 +193,8 @@ export async function getServerSideProps(context) { props: { article, hrefLang, - revalidate: 60, + // I'm not sure if this property does anything for SSR. + revalidate: 5, }, }; } From fd520733ed1b6ab10d5fabf28c0535163916822b Mon Sep 17 00:00:00 2001 From: Steve Persch's alt <102996065+stevector-streaming@users.noreply.github.com> Date: Wed, 18 May 2022 07:13:45 -0500 Subject: [PATCH 4/4] Update [...slug].js --- pages/articles/[...slug].js | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/articles/[...slug].js b/pages/articles/[...slug].js index 5640c68..563eab8 100644 --- a/pages/articles/[...slug].js +++ b/pages/articles/[...slug].js @@ -193,6 +193,7 @@ export async function getServerSideProps(context) { props: { article, hrefLang, + // // I'm not sure if this property does anything for SSR. revalidate: 5, },