Merge pull request #79 from Blazity/links

feat: add blazity links/homepage revalidation
Blazity · Oct 30, 2023 · 70830af · 70830af
2 parents ec7d1b0 + afcc27e
commit 70830af
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 62 deletions.
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation"
 import { NextIntlClientProvider } from "next-intl"
 import { unstable_setRequestLocale } from "next-intl/server"
 import { Footer } from "@/components/Footer/Footer"
@@ -8,7 +9,6 @@ import "@/styles/tailwind.css"
 import { getNavigation } from "@/lib/client"
 import { GoogleAnalytics } from "../GoogleAnalytics"
 import Providers from "../Providers"
-import { notFound } from "next/navigation"
 
 export async function generateMetadata({ params }: { params: { lang: Locale } }) {
  const locale = params.lang ?? i18n.defaultLocale
@@ -41,7 +41,7 @@ export default async function Layout({ children, params }: { children: React.Rea
  if (!isValidLocale) notFound()
  unstable_setRequestLocale(locale)
 
- const { navigation, footer } = await getNavigation(locale)
+ const { navigation, footer, logo } = await getNavigation(locale)
 
  return (
  <html lang={locale}>
@@ -57,7 +57,7 @@ export default async function Layout({ children, params }: { children: React.Rea
  </div>
 
  <main className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col px-4 pb-16">{children}</main>
- <Footer footer={footer} />
+ <Footer logoUrl={logo?.url} footer={footer} />
  </body>
  </Providers>
  </html>

diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -30,7 +30,13 @@ export default async function Web({ params }: { params: { lang: Locale } }) {
  <>
  {homepage.marketStock?.data && <StockDisplay quotes={homepage.marketStock?.data} />}
 
- {homepage.heroArticle && <HeroArticleCard article={hygraphArticleToCardProps(homepage.heroArticle)} asLink />}
+ {homepage.heroArticle && (
+ <HeroArticleCard
+ article={hygraphArticleToCardProps(homepage.heroArticle)}
+ asLink
+ additionalLink="https://blazity.com/"
+ />
+ )}
  <TrendingArticles title={homepage.trendingSectionTitle ?? "Trending articles"} />
  {homepage.highlightedArticles && (
  <HighlightedArticles

diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
@@ -81,7 +81,7 @@ export function ArticleCard({
  alt={imageAlt ?? "lack of description"}
  width={780}
  height={264}
- sizes="(max-width: 640px) 82px, 320px, (max-width: 1024px) 82px ,480px, 780px"
+ sizes="(max-width: 640px) 82px, 320px, 480px, (max-width: 1024px) 82px ,480px, 780px"
  className={cn(
  "h-[82px] min-h-[82px] w-full rounded-xl object-cover text-center brightness-90 md:h-[264px] md:min-h-[264px] md:rounded-none",
  isMain && "h-[264px] min-h-[264px] rounded-none"

diff --git a/src/components/ArticleCard/ArticleMinifiedCard.tsx b/src/components/ArticleCard/ArticleMinifiedCard.tsx
@@ -26,7 +26,6 @@ export function ArticleMinifiedCard({
  alt={imageAlt ?? "lack of description"}
  width={82}
  height={82}
- sizes="(max-width: 640px) 82px, 320px, (max-width: 1024px) 82px ,480px, 780px"
  className=" min-h-[82px] rounded-xl object-cover text-center brightness-90"
  />
  )}

diff --git a/src/components/ArticleCard/ArticlePublishDetails.tsx b/src/components/ArticleCard/ArticlePublishDetails.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image"
+import Link from "next/link"
 import { useLocale } from "@/i18n/i18n"
 import { cn } from "@/utils/cn"
 import { formatDate } from "@/utils/formatDate"
@@ -8,13 +9,15 @@ type ArticlePublishDetailsProps = {
  author: string
  publicationDate: string | null | Date
  imageUrl?: string
+ link?: string | undefined
  variant?: "dark" | "light"
 }
 
 export function ArticlePublishDetails({
  author,
  publicationDate,
  imageUrl,
+ link,
  variant = "dark",
  className = "",
 }: ArticlePublishDetailsProps) {
@@ -31,6 +34,14 @@ export function ArticlePublishDetails({
  >
  {publicationDate && (
  <>
+ {link && (
+ <>
+ <Link hrefLang={locale} className="z-[22] text-[#FF782C] underline" target="_blank" href={link}>
+ blazity.com
+ </Link>
+ <p>|</p>
+ </>
+ )}
  <p>{formatDate(publicationDate, locale)}</p>
  <p>|</p>
  </>

diff --git a/src/components/ArticleCard/HeroArticleCard.tsx b/src/components/ArticleCard/HeroArticleCard.tsx
@@ -1,6 +1,5 @@
 import Image from "next/image"
 import Link from "next/link"
-import { ReactNode } from "react"
 import { useLocale } from "@/i18n/i18n"
 import { ArticlePublishDetails } from "./ArticlePublishDetails"
 import { Tag } from "./Buttons/Tag"
@@ -19,68 +18,57 @@ type HeroArticleCardProps = {
  slug: string
  }
  asLink?: boolean
-}
-
-type HeroWrapperProps = {
- link?: boolean
- children: ReactNode
- linkProps: {
- hrefLang: string
- href: string
- }
-}
-
-function HeroWrapper({ link, linkProps, children }: HeroWrapperProps) {
- if (link) return <Link {...linkProps}>{children}</Link>
-
- return <>{children}</>
+ additionalLink?: string
 }
 
 export function HeroArticleCard({
  article: { imageUrl, imageAlt, title, publicationDate, author, tags, slug },
  asLink = true,
+ additionalLink,
 }: HeroArticleCardProps) {
  const locale = useLocale()
 
  return (
- <HeroWrapper link={asLink} linkProps={{ href: `/${locale}/article/${slug}`, hrefLang: locale }}>
- <article className=" w-full overflow-hidden rounded-xl text-white">
- <div className="relative h-[320px] bg-slate-900">
- {imageUrl && (
- <Image
- src={imageUrl}
- alt={imageAlt ?? "lack of description"}
- width={1200}
- height={320}
- sizes="(max-width: 640px) 320px, (max-width: 1024px) 480px, (max-width: 1200px) 780px, 1200px"
- className="h-full max-h-[320px] object-cover text-center brightness-[60%]"
- priority
- />
+ <div className=" relative w-full overflow-hidden rounded-xl text-white">
+ <div className="relative h-[320px] bg-slate-900">
+ {imageUrl && (
+ <Image
+ src={imageUrl}
+ alt={imageAlt ?? "lack of description"}
+ width={1200}
+ height={320}
+ sizes="(max-width: 640px) 320px, (max-width: 1024px) 480px, (max-width: 1200px) 780px, 1200px"
+ className="h-full max-h-[320px] object-cover text-center brightness-90"
+ priority
+ />
+ )}
+ <div className="absolute inset-0 z-20 flex w-full flex-col items-start justify-between p-6 ">
+ {asLink && (
+ <Link href={`/${locale}/article/${slug}`} className="absolute inset-0 z-[z-21]" hrefLang={locale} />
  )}
- <div className="absolute inset-0 z-20 flex w-full flex-col items-start justify-between p-6 ">
- <div className="flex w-full justify-between">
- <div className="flex flex-wrap gap-2">
- {tags.map((tag) => {
- return <Tag key={tag}>{tag}</Tag>
- })}
- </div>
- </div>
- <div className="flex flex-col justify-around gap-5">
- <h2
- className=" text-[1.8rem] font-bold leading-7 tracking-[1px] md:leading-10"
- style={{ textShadow: "0px 1px 4px rgba(26, 26, 27, 1)" }}
- >
- {title}
- </h2>
- <ArticlePublishDetails
- imageUrl={author.imageUrl}
- author={author.name}
- publicationDate={publicationDate}
- />
+ <div className="flex w-full justify-between">
+ <div className="flex flex-wrap gap-2">
+ {tags.map((tag) => {
+ return <Tag key={tag}>{tag}</Tag>
+ })}
  </div>
  </div>
+ <div className="flex flex-col justify-around gap-5">
+ <h2
+ className=" text-[1.8rem] font-bold leading-7 tracking-[1px] md:leading-10"
+ style={{ textShadow: "0px 1px 4px rgba(26, 26, 27, 1)" }}
+ >
+ {title}
+ </h2>
+ <ArticlePublishDetails
+ link={additionalLink}
+ imageUrl={author.imageUrl}
+ author={author.name}
+ publicationDate={publicationDate}
+ />
+ </div>
  </div>
- </article>
- </HeroWrapper>
+ </div>
+ </div>
  )
 }
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -8,9 +8,10 @@ import { GetNavigationReturn } from "../Navigation/Navigation"
 
 type FooterProps = {
  footer: Pick<GetNavigationReturn, "footer">["footer"]
+ logoUrl: string | undefined
 }
 
-export async function Footer({ footer }: FooterProps) {
+export async function Footer({ footer, logoUrl }: FooterProps) {
  const locale = useLocale()
 
  if (!footer?.contactSection) return null
@@ -61,12 +62,22 @@ export async function Footer({ footer }: FooterProps) {
  })}
  </ul>
  </nav>
- <div className="flex flex-col justify-between gap-10 lg:items-end lg:gap-0">
+ <div className="flex flex-col justify-between gap-10 lg:items-end lg:gap-3">
  <div className="w-1/3">
  <NextIntlClientProvider locale={locale}>
  <DynamicLangSelect />
  </NextIntlClientProvider>
  </div>
+ {logoUrl && (
+ <Link
+ hrefLang={locale}
+ target="_blank"
+ href={"https://blazity.com/"}
+ className="flex max-h-[100px] w-full max-w-full lg:justify-end "
+ >
+ <Image src={logoUrl} width={100} height={100} alt="Blazity logo" className="w-1/3" />
+ </Link>
+ )}
  <p className="text-sm">
  © {new Date().getFullYear()} {companyName} {footer?.ownershipAndCredits}
  </p>

diff --git a/src/components/LangSelect/LangSelect.tsx b/src/components/LangSelect/LangSelect.tsx
@@ -24,7 +24,7 @@ function LangSelect() {
  <SelectGroup>
  {i18n.locales.map((locale) => {
  return (
- <SelectItem key={locale} value={locale}>
+ <SelectItem className="cursor-pointer" key={locale} value={locale}>
  {locale}
  </SelectItem>
  )

diff --git a/src/lib/client.ts b/src/lib/client.ts
@@ -74,6 +74,7 @@ export async function getHomepage(locale: Locale) {
  document: getHomepageQuery,
  tags: ["HOMEPAGE", "CATEGORY", "ARTICLE"],
  variables: { locale },
+ revalidate: 60 * 60 * 6, // 6h
  })
  return { ...homepages[0], marketStock }
 }
@@ -89,14 +90,14 @@ export async function getHomepageMetadata(locale: Locale) {
 }
 
 export async function getNavigation(locale: Locale) {
- const { navigations, footers } = await graphqlFetch({
+ const { navigations, footers, asset } = await graphqlFetch({
  cache: "force-cache",
  document: getNavigationQuery,
  tags: ["NAVIGATION", "PAGE", "CATEGORY"],
  variables: { locale },
  })
 
- return { navigation: navigations[0] ?? null, footer: footers[0] ?? null }
+ return { navigation: navigations[0] ?? null, footer: footers[0] ?? null, logo: asset ?? null }
 }
 
 export async function getArticlesQuantity(locale: Locale) {

diff --git a/src/lib/queries/components.ts b/src/lib/queries/components.ts
@@ -21,6 +21,9 @@ export const getNavigationQuery = graphql(`
  url
  }
  }
+ asset(where: { id: "clo74v3lz1yqp0bw1w7jsrrin" }) {
+ url
+ }
  footers(locales: $locales, first: 1) {
  logo {
  url