Merge branch 'main' of https://github.com/Blazity/hygraph-next-enterp…

…rise

README.md

@@ -1,8 +1,6 @@
-# Next enterprise media starter //final name goes here
+# Next news
 
-![Project intro image](./project-logo.png)
-
-Welcome to the _Next enterprise media starter_ //final name goes here, an open-source plug and play template and starter for you media apps or blogs! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! 🌍
+Welcome to **Next.js - Hygraph news starter**, an open-source plug and play template and starter for you media apps or blogs! It's build on top of [next-enterprise](https://github.com/Blazity/next-enterprise) so it comes packed with functionalities designed to assist you in creating an app that is not only high-performing and maintainable but also enjoyable to use.
 
 <br />
 <a href="https://discord.gg/fyWtyNKmfX" style="width: 100%; display: flex; justify-content: center;">
@@ -35,7 +33,7 @@ To get started with this boilerplate, follow these steps:
 
 ```bash
 ## Don't forget to ⭐ star and fork it first :)
-git clone https://github.com/<your_username)/hygraph-next-enterprise.git //final repo name goes here
+git clone https://github.com/<your_username)/next-news.git
 ```
 
 2. Install the dependencies:
@@ -47,22 +45,30 @@ yarn install --frozen-lockfile
 3. Provide required env variables:
 
 ```bash
-NEXT_PUBLIC_SITE_URL // url of your site, used for SEO and sitemaps
-NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL // hygraph's graphql content api url
-HYGRAPH_WEBOOK_SECRET // secret used for authenticating webhooks
+# url of your site, used for SEO and sitemaps
+NEXT_PUBLIC_SITE_URL="my-site.app"
+# hygraph's graphql content api url - you can find it in API Acess tab on Hygraph
+NEXT_PUBLIC_HYGRAPH_CONTENT_API_URL="https://region.hygraph.com/v2/projectId/environment"
+# secret used for authenticating webhooks (generate it yourself)
+HYGRAPH_WEBOOK_SECRET="my-secret-123"
 ```
 
 Search engine - take it from your algolia project's config
 ```bash
-NEXT_PUBLIC_ALGOLIA_API_ID
-NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY
+NEXT_PUBLIC_ALGOLIA_API_ID=""
+NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=""
 ```
 
 Analytics - used for counting views on your articles. Needed for 'Trending Articles' section
 ```bash
-GA_MEASUREMENT_ID: 
-GA_PROPERTY_ID: 
-GA_BASE64_SERVICE_ACCOUNT:
+GA_MEASUREMENT_ID=""
+GA_PROPERTY_ID=""
+# Base64 endoded service account containing:
+# {
+# "private_key: "private-key-value"
+# "client_email": "[email protected]"
+# }
+GA_BASE64_SERVICE_ACCOUNT=""
 ```
 
 4. Run the development server:
@@ -84,7 +90,7 @@ Easily deploy your Next.js app with [Vercel](https://vercel.com/new?utm_medium=d
 
 The following scripts are available in the `package.json`:
 
-- `dev`: Starts the development server with colorized output
+- `dev`: Starts the development server along with codegen watcher
 - `build`: Builds the app for production
 - `start`: Starts the production server
 - `lint`: Lints the code using ESLint
@@ -95,6 +101,7 @@ The following scripts are available in the `package.json`:
 - `storybook`: Starts the Storybook server
 - `build-storybook`: Builds the Storybook for deployment
 - `test`: Runs unit and integration tests
+- `codegen`: Runs codegen on your public content api url
 - `e2e:headless`: Runs end-to-end tests in headless mode
 - `e2e:ui`: Runs end-to-end tests with UI
 - `format`: Formats the code with Prettier

src/app/[lang]/category/[slug]/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@/components/ui/Skeleton/Skeleton"
+
+export default function Loading() {
+ return (
+ <div className="w-full">
+ <Skeleton className="min-h-[150px] w-full" />
+ </div>
+ )
+}

src/app/[lang]/layout.tsx

@@ -1,12 +1,12 @@
+import { notFound } from "next/navigation"
+import { unstable_setRequestLocale } from "next-intl/server"
 import { Footer } from "@/components/Footer/Footer"
 import { Navigation } from "@/components/Navigation/Navigation"
 import { env } from "@/env.mjs"
 import { i18n, type Locale } from "@/i18n/i18n"
 import { setTranslations } from "@/i18n/setTranslations"
 import { getNavigation } from "@/lib/client"
 import "@/styles/tailwind.css"
-import { unstable_setRequestLocale } from "next-intl/server"
-import { notFound } from "next/navigation"
 import { GoogleAnalytics } from "../GoogleAnalytics"
 import Providers from "../Providers"
 
@@ -41,7 +41,7 @@ export default async function Layout({ children, params }: { children: React.Rea
  if (!isValidLocale) notFound()
  unstable_setRequestLocale(locale)
  const translations = await setTranslations(locale)
- const { navigation, footer, logo } = await getNavigation(locale)
+ const { navigation, footer } = await getNavigation(locale)
 
  return (
  <html lang={locale}>
@@ -55,7 +55,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 logoUrl={logo?.url} footer={footer} />
+ <Footer footer={footer} />
  </body>
  </Providers>
  </html>

src/components/Footer/Footer.tsx

@@ -10,10 +10,9 @@ import { GetNavigationReturn } from "../Navigation/Navigation"
 
 type FooterProps = {
  footer: Pick<GetNavigationReturn, "footer">["footer"]
- logoUrl: string | undefined
 }
 
-export async function Footer({ footer, logoUrl }: FooterProps) {
+export async function Footer({ footer }: FooterProps) {
  const locale = useLocale()
 
  if (!footer?.contactSection) return null
@@ -68,14 +67,21 @@ export async function Footer({ footer, logoUrl }: FooterProps) {
  <div className="w-fit lg:w-auto">
  <DynamicLangSelect />
  </div>
- {logoUrl && (
+ {footer?.additionalLogo && (
  <Link
  hrefLang={locale}
  target="_blank"
  href={"https://blazity.com/"}
  className="flex max-h-[100px] w-[100px] lg:justify-end"
  >
- <Image src={logoUrl} width={300} height={300} alt="Blazity logo" className="w-full" quality={100} />
+ <Image
+ src={footer?.additionalLogo.url}
+ width={300}
+ height={300}
+ alt="Blazity logo"
+ className="w-full"
+ quality={100}
+ />
  </Link>
  )}
  <p className="text-sm">

src/lib/client.ts

@@ -99,14 +99,14 @@ export async function getHomepageMetadata(locale: Locale) {
 }
 
 export async function getNavigation(locale: Locale) {
- const { navigations, footers, asset } = await graphqlFetch({
+ const { navigations, footers } = await graphqlFetch({
  cache: "force-cache",
  document: getNavigationQuery,
  tags: ["NAVIGATION", "PAGE", "CATEGORY"],
  variables: { locale },
  })
 
- return { navigation: navigations[0] ?? null, footer: footers[0] ?? null, logo: asset ?? null }
+ return { navigation: navigations[0] ?? null, footer: footers[0] ?? null }
 }
 
 export async function getArticlesQuantity(locale: Locale) {

src/lib/queries/components.ts

@@ -21,13 +21,13 @@ export const getNavigationQuery = graphql(`
  url
  }
  }
- asset(where: { id: "clo74v3lz1yqp0bw1w7jsrrin" }) {
- url
- }
  footers(locales: $locales, first: 1) {
  logo {
  url
  }
+ additionalLogo {
+ url
+ }
  ownershipAndCredits
  companyName
  youtubeLink