feat: move header to layour, revalidate article page every minute

Blazity · Sep 11, 2023 · 4ba4b4a · 4ba4b4a
1 parent 6ac5e00
commit 4ba4b4a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/src/app/[lang]/article/[slug]/page.tsx b/src/app/[lang]/article/[slug]/page.tsx
@@ -6,7 +6,7 @@ type ArticlePageProps = { params: { lang: Locale; slug: string } }
 
 export async function generateMetadata({ params: { lang, slug } }: ArticlePageProps): Promise<Metadata | null> {
  const { getArticleSummary } = HygraphClient(lang)
- const { articles } = await getArticleSummary({ slug })
+ const { articles } = await getArticleSummary({ slug }, { next: { revalidate: 60 } })
  const article = articles[0]
 
  if (!article) return null

diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -1,12 +1,22 @@
+import { DynamicSearchDialog } from "components/Search/DynamicSearchDialog"
 import "../../styles/tailwind.css"
 import { GoogleAnalytics } from "./GoogleAnalytics"
+import { DynamicLangSelect } from "components/LangSelect/DynamicLangSelect"
+import type { Locale } from "i18n"
 
 export default function Layout({ children, params }: { children: React.ReactNode; params: { lang: string } }) {
+ const lang = params.lang as Locale
  return (
- <html lang={params.lang}>
+ <html lang={lang}>
  <GoogleAnalytics />
  <body>
- <main className="main mx-auto flex max-w-4xl flex-col items-center justify-start">{children}</main>
+ <main className="main mx-auto flex max-w-4xl flex-col items-center justify-start">
+ <nav className="flex w-full justify-end gap-4 p-4">
+ <DynamicSearchDialog lang={lang} />
+ <DynamicLangSelect lang={lang} />
+ </nav>
+ {children}
+ </main>
  </body>
  </html>
  )

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -22,10 +22,6 @@ export const metadata = {
 export default async function Web({ params: { lang } }: { params: { lang: Locale } }) {
  return (
  <>
- <section className="flex w-full justify-end gap-4 p-4">
- <DynamicSearchDialog lang={lang} />
- <DynamicLangSelect lang={lang} />
- </section>
  <section></section>
  </>
  )

diff --git a/src/components/Search/SearchDialog.tsx b/src/components/Search/SearchDialog.tsx
@@ -9,6 +9,7 @@ import { Locale } from "i18n"
 import type { Hit } from "instantsearch.js"
 import debounce from "lodash/debounce"
 import { Search } from "lucide-react"
+import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { ChangeEvent, ReactNode, useMemo, useState } from "react"
 import {
@@ -67,8 +68,9 @@ type ArticleHit = Hit<{ title: string; content: string; objectID: string; slug:
 
 function Hit({ hit, lang }: { hit: ArticleHit; lang: Locale }) {
  return (
- <a
+ <Link
  href={`/${lang}/article/${hit.slug}`}
+ prefetch={false}
  className="ring-offset-background focus-visible:ring-ring inline-flex w-full rounded-md transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
  >
  <article className="flex cursor-pointer flex-col rounded-md px-4 py-2">
@@ -88,7 +90,7 @@ function Hit({ hit, lang }: { hit: ArticleHit; lang: Locale }) {
  }}
  />
  </article>
- </a>
+ </Link>
  )
 }