diff --git a/README.md b/README.md index 03cb988..7896929 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ![LaunchPad](./LaunchPad.jpg) -Welcome aboard **LaunchPad**, the official Strapi demo application, where we launch your content into the stratosphere at the speed of *"we-can't-even-measure-it!"*. +Welcome aboard **LaunchPad**, the official Strapi demo application, where we launch your content into the stratosphere at the speed of _"we-can't-even-measure-it!"_. This repository contains the following: - A Strapi project with content-types and data already onboard @@ -17,14 +17,16 @@ Strap yourself in! You can get started with this project on your local machine b Before you take off, make sure you have the right env variables loaded for each part (rocket science at its best): Strapi (example in `./strapi/.env.example`): - - `STRAPI_ADMIN_CLIENT_URL=` - - `STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=` + +- `STRAPI_ADMIN_CLIENT_URL=` +- `STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=` - Create a `./strapi/.env` file with these variables Next.js (example in `./next/.env.sample`): - - `NEXT_PUBLIC_API_URL=` (mandatory) - - `PREVIEW_SECRET=` + +- `NEXT_PUBLIC_API_URL=` (mandatory) +- `PREVIEW_SECRET=` - Create a `./next/.env` file with these variables @@ -91,10 +93,9 @@ This installs dependencies, builds your project, and starts your server. You’r [Data transfer](https://strapi.io/blog/importing-exporting-and-transferring-data-with-the-strapi-cli) Streams your data from one Strapi instance to another Strapi instance.
[Review Worfklows](https://docs.strapi.io/user-docs/settings/review-workflows) Create and manage any desired review stages for your content, enabling your team to collaborate in the content creation flow from draft to publication.
- ## Resources -[Docs](https://docs.strapi.io) • [Demo](https://strapi.io/demo) • [Forum](https://forum.strapi.io/) • [Discord](https://discord.strapi.io) • [Youtube](https://www.youtube.com/c/Strapi/featured) • [Strapi Design System](https://design-system.strapi.io/) • [Marketplace](https://market.strapi.io/) • [Clou Free Trial](https://cloud.strapi.io) +[Docs](https://docs.strapi.io) • [Demo](https://strapi.io/demo) • [Forum](https://forum.strapi.io/) • [Discord](https://discord.strapi.io) • [Youtube](https://www.youtube.com/c/Strapi/featured) • [Strapi Design System](https://design-system.strapi.io/) • [Marketplace](https://market.strapi.io/) • [Clou Free Trial](https://cloud.strapi.io) ## Todo @@ -109,4 +110,4 @@ This installs dependencies, builds your project, and starts your server. You’r - The Strapi application contains a postinstall script that will regenerate an uuid for the project in order to get some anonymous usage information concerning this demo. You can disable it by removing the uuid inside the `./strapi/packages.json` file. -- The Strapi application contains a patch for the @strapi/admin package. It is only necessary for the hosted demos since we automatically create the Super Admin users for them when they request this demo on our website. \ No newline at end of file +- The Strapi application contains a patch for the @strapi/admin package. It is only necessary for the hosted demos since we automatically create the Super Admin users for them when they request this demo on our website. diff --git a/next/.env.sample b/next/.env.example similarity index 63% rename from next/.env.sample rename to next/.env.example index 62310fb..145d2d4 100644 --- a/next/.env.sample +++ b/next/.env.example @@ -1,5 +1,5 @@ WEBSITE_URL=http://localhost:3000 # Add the correct ENV var for this onto your hosting platform, point it to your production website. PORT=3000 -NEXT_PUBLIC_API_URL=url-of-strapi -PREVIEW_SECRET=the-same-random-token-as-for-strapi \ No newline at end of file +NEXT_PUBLIC_API_URL=http://localhost:1337 +PREVIEW_SECRET=tobemodified \ No newline at end of file diff --git a/next/app/[locale]/(marketing)/[slug]/page.tsx b/next/app/[locale]/(marketing)/[slug]/page.tsx index 6d6abc5..07eb41b 100644 --- a/next/app/[locale]/(marketing)/[slug]/page.tsx +++ b/next/app/[locale]/(marketing)/[slug]/page.tsx @@ -1,8 +1,8 @@ -import { Metadata } from 'next'; +import { Metadata } from "next"; -import PageContent from '@/lib/shared/PageContent'; -import fetchContentType from '@/lib/strapi/fetchContentType'; -import { generateMetadataObject } from '@/lib/shared/metadata'; +import PageContent from "@/lib/shared/PageContent"; +import fetchContentType from "@/lib/strapi/fetchContentType"; +import { generateMetadataObject } from "@/lib/shared/metadata"; export async function generateMetadata({ params, @@ -10,8 +10,14 @@ export async function generateMetadata({ params: { locale: string; slug: string }; }): Promise { const pageData = await fetchContentType( - 'pages', - `filters[slug][$eq]=${params.slug}&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, + "pages", + { + filters: { + slug: params.slug, + locale: params.locale, + }, + populate: "seo.metaImage", + }, true ); @@ -20,14 +26,21 @@ export async function generateMetadata({ return metadata; } -export default async function Page({ params }: { params: { locale: string, slug: string } }) { +export default async function Page({ + params, +}: { + params: { locale: string; slug: string }; +}) { const pageData = await fetchContentType( - 'pages', - `filters[slug][$eq]=${params.slug}&filters[locale][$eq]=${params.locale}`, + "pages", + { + filters: { + slug: params.slug, + locale: params.locale, + }, + }, true ); - return ( - - ); -} \ No newline at end of file + return ; +} diff --git a/next/app/[locale]/(marketing)/blog/[slug]/page.tsx b/next/app/[locale]/(marketing)/blog/[slug]/page.tsx index 7de4e32..c02b3e7 100644 --- a/next/app/[locale]/(marketing)/blog/[slug]/page.tsx +++ b/next/app/[locale]/(marketing)/blog/[slug]/page.tsx @@ -1,25 +1,49 @@ -import { Metadata } from 'next'; +import { Metadata } from "next"; import { BlogLayout } from "@/components/blog-layout"; import fetchContentType from "@/lib/strapi/fetchContentType"; -import { BlocksRenderer } from '@strapi/blocks-react-renderer'; +import { BlocksRenderer } from "@strapi/blocks-react-renderer"; -import { generateMetadataObject } from '@/lib/shared/metadata'; +import { generateMetadataObject } from "@/lib/shared/metadata"; export async function generateMetadata({ params, }: { - params: { locale: string, slug: string }; + params: { locale: string; slug: string }; }): Promise { - const pageData = await fetchContentType("articles", `filters[slug]=${params?.slug}&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, true) + const pageData = await fetchContentType( + "articles", + { + filters: { + slug: params.slug, + locale: params.locale, + }, + populate: "seo.metaImage", + }, + true + ); const seo = pageData?.seo; const metadata = generateMetadataObject(seo); return metadata; } -export default async function singleArticlePage({ params }: { params: { slug: string, locale: string } }) { - const article = await fetchContentType("articles", `filters[slug]=${params?.slug}&filters[locale][$eq]=${params.locale}`, true) +export default async function singleArticlePage({ + params, +}: { + params: { slug: string; locale: string }; +}) { + const article = await fetchContentType( + "articles", + // `filters[slug]=${params?.slug}&filters[locale][$eq]=${params.locale}`, + { + filters: { + slug: params.slug, + locale: params.locale, + }, + }, + true + ); if (!article) { return
Blog not found
; @@ -30,4 +54,4 @@ export default async function singleArticlePage({ params }: { params: { slug: st ); -} \ No newline at end of file +} diff --git a/next/app/[locale]/(marketing)/blog/page.tsx b/next/app/[locale]/(marketing)/blog/page.tsx index ab49e97..bd021bd 100644 --- a/next/app/[locale]/(marketing)/blog/page.tsx +++ b/next/app/[locale]/(marketing)/blog/page.tsx @@ -9,28 +9,38 @@ import { BlogPostRows } from "@/components/blog-post-rows"; import { AmbientColor } from "@/components/decorations/ambient-color"; import fetchContentType from "@/lib/strapi/fetchContentType"; import { Article } from "@/types/types"; -import { generateMetadataObject } from '@/lib/shared/metadata'; - +import { generateMetadataObject } from "@/lib/shared/metadata"; export async function generateMetadata({ params, }: { params: { locale: string }; }): Promise { - const pageData = await fetchContentType('blog-page', `filters[locale]=${params.locale}&populate=seo.metaImage`, true) + const pageData = await fetchContentType( + "blog-page", + { + filters: { locale: params.locale }, + populate: "seo.metaImage", + }, + true + ); const seo = pageData?.seo; const metadata = generateMetadataObject(seo); return metadata; } -export default async function Blog({ - params, -}: { - params: { locale: string }; -}) { - const blogPage = await fetchContentType('blog-page', `filters[locale]=${params.locale}`, true) - const articles = await fetchContentType('articles', `filters[locale]=${params.locale}`) +export default async function Blog({ params }: { params: { locale: string } }) { + const blogPage = await fetchContentType( + "blog-page", + { + filters: { locale: params.locale }, + }, + true + ); + const articles = await fetchContentType("articles", { + filters: { locale: params.locale }, + }); return (
@@ -49,7 +59,11 @@ export default async function Blog({
{articles.data.slice(0, 1).map((article: Article) => ( - + ))} diff --git a/next/app/[locale]/(marketing)/page.tsx b/next/app/[locale]/(marketing)/page.tsx index 695e258..e25f2e6 100644 --- a/next/app/[locale]/(marketing)/page.tsx +++ b/next/app/[locale]/(marketing)/page.tsx @@ -1,8 +1,8 @@ -import { Metadata } from 'next'; +import { Metadata } from "next"; -import PageContent from '@/lib/shared/PageContent'; -import fetchContentType from '@/lib/strapi/fetchContentType'; -import { generateMetadataObject } from '@/lib/shared/metadata'; +import PageContent from "@/lib/shared/PageContent"; +import fetchContentType from "@/lib/strapi/fetchContentType"; +import { generateMetadataObject } from "@/lib/shared/metadata"; export async function generateMetadata({ params, @@ -10,8 +10,14 @@ export async function generateMetadata({ params: { locale: string }; }): Promise { const pageData = await fetchContentType( - 'pages', - `filters[slug][$eq]=homepage&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, + "pages", + { + filters: { + slug: "homepage", + locale: params.locale, + }, + populate: "seo.metaImage", + }, true ); @@ -20,10 +26,19 @@ export async function generateMetadata({ return metadata; } -export default async function HomePage({ params }: { params: { locale: string } }) { +export default async function HomePage({ + params, +}: { + params: { locale: string }; +}) { const pageData = await fetchContentType( - 'pages', - `filters[slug][$eq]=homepage&filters[locale][$eq]=${params.locale}`, + "pages", + { + filters: { + slug: "homepage", + locale: params.locale, + }, + }, true ); diff --git a/next/app/[locale]/(marketing)/products/[slug]/page.tsx b/next/app/[locale]/(marketing)/products/[slug]/page.tsx index ee1cf65..842cd6b 100644 --- a/next/app/[locale]/(marketing)/products/[slug]/page.tsx +++ b/next/app/[locale]/(marketing)/products/[slug]/page.tsx @@ -3,17 +3,24 @@ import { redirect } from "next/navigation"; import { Container } from "@/components/container"; import { AmbientColor } from "@/components/decorations/ambient-color"; import { SingleProduct } from "@/components/products/single-product"; -import DynamicZoneManager from '@/components/dynamic-zone/manager' -import { generateMetadataObject } from '@/lib/shared/metadata'; +import DynamicZoneManager from "@/components/dynamic-zone/manager"; +import { generateMetadataObject } from "@/lib/shared/metadata"; import fetchContentType from "@/lib/strapi/fetchContentType"; export async function generateMetadata({ params, }: { - params: { locale: string, slug: string }; + params: { locale: string; slug: string }; }): Promise { - const pageData = await fetchContentType("products", `filters[slug]=${params?.slug}&populate=seo.metaImage`, true) + const pageData = await fetchContentType( + "products", + { + filters: { slug: params.slug }, + populate: "seo.metaImage", + }, + true + ); const seo = pageData?.seo; const metadata = generateMetadataObject(seo); @@ -23,9 +30,15 @@ export async function generateMetadata({ export default async function SingleProductPage({ params, }: { - params: { slug: string, locale: string }; + params: { slug: string; locale: string }; }) { - const product = await fetchContentType("products", `filters[slug]=${params?.slug}`, true) + const product = await fetchContentType( + "products", + { + filters: { slug: params.slug }, + }, + true + ); if (!product) { redirect("/products"); @@ -36,7 +49,12 @@ export default async function SingleProductPage({ - {product?.dynamic_zone && ()} + {product?.dynamic_zone && ( + + )} ); diff --git a/next/app/[locale]/(marketing)/products/page.tsx b/next/app/[locale]/(marketing)/products/page.tsx index 5d74ad4..c928a9a 100644 --- a/next/app/[locale]/(marketing)/products/page.tsx +++ b/next/app/[locale]/(marketing)/products/page.tsx @@ -1,4 +1,4 @@ -import { Metadata } from 'next'; +import { Metadata } from "next"; import { AmbientColor } from "@/components/decorations/ambient-color"; import { Container } from "@/components/container"; @@ -9,14 +9,23 @@ import { ProductItems } from "@/components/products/product-items"; import { Subheading } from "@/components/elements/subheading"; import { IconShoppingCartUp } from "@tabler/icons-react"; import fetchContentType from "@/lib/strapi/fetchContentType"; -import { generateMetadataObject } from '@/lib/shared/metadata'; +import { generateMetadataObject } from "@/lib/shared/metadata"; export async function generateMetadata({ params, }: { params: { locale: string }; }): Promise { - const pageData = await fetchContentType("product-page", `filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, true) + const pageData = await fetchContentType( + "product-page", + { + filters: { + locale: params.locale, + }, + populate: "seo.metaImage", + }, + true + ); const seo = pageData?.seo; const metadata = generateMetadataObject(seo); @@ -29,10 +38,20 @@ export default async function Products({ params: { locale: string }; }) { // Fetch the product-page and products data - const productPage = await fetchContentType('product-page', `filters[locale]=${params.locale}`, true); - const products = await fetchContentType('products', ``); + const productPage = await fetchContentType( + "product-page", + { + filters: { + locale: params.locale, + }, + }, + true + ); + const products = await fetchContentType("products"); - const featured = products?.data.filter((product: { featured: boolean }) => product.featured); + const featured = products?.data.filter( + (product: { featured: boolean }) => product.featured + ); return (
diff --git a/next/app/[locale]/layout.tsx b/next/app/[locale]/layout.tsx index f5d3447..69355f5 100644 --- a/next/app/[locale]/layout.tsx +++ b/next/app/[locale]/layout.tsx @@ -1,64 +1,72 @@ -import React from 'react' +import React from "react"; -import { Metadata } from 'next'; -import { Inter } from 'next/font/google'; -import { generateMetadataObject } from '@/lib/shared/metadata'; +import { Metadata } from "next"; +import { Inter } from "next/font/google"; +import { generateMetadataObject } from "@/lib/shared/metadata"; -import { Footer } from '@/components/footer'; -import { Navbar } from '@/components/navbar'; -import { CartProvider } from '@/context/cart-context'; -import { cn } from '@/lib/utils'; -import { ViewTransitions } from 'next-view-transitions'; -import fetchContentType from '@/lib/strapi/fetchContentType'; +import { Footer } from "@/components/footer"; +import { Navbar } from "@/components/navbar"; +import { CartProvider } from "@/context/cart-context"; +import { cn } from "@/lib/utils"; +import { ViewTransitions } from "next-view-transitions"; +import fetchContentType from "@/lib/strapi/fetchContentType"; const inter = Inter({ - subsets: ["latin"], - display: "swap", - weight: ["400", "500", "600", "700", "800", "900"], + subsets: ["latin"], + display: "swap", + weight: ["400", "500", "600", "700", "800", "900"], }); // Default Global SEO for pages without them export async function generateMetadata({ - params, + params, }: { - params: { locale: string; slug: string }; + params: { locale: string; slug: string }; }): Promise { - const pageData = await fetchContentType( - 'global', - `&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, - true - ); + const pageData = await fetchContentType( + "global", + { + filters: { locale: params.locale }, + populate: "seo.metaImage", + }, + true + ); - const seo = pageData?.seo; - const metadata = generateMetadataObject(seo); - return metadata; + const seo = pageData?.seo; + const metadata = generateMetadataObject(seo); + return metadata; } export default async function LocaleLayout({ - children, - params: { locale } + children, + params: { locale }, }: { - children: React.ReactNode; - params: { locale: string }; + children: React.ReactNode; + params: { locale: string }; }) { - - const pageData = await fetchContentType('global', `filters[locale][$eq]=${locale}`, true); - return ( - - - - - - {children} -