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