From 23d54a76c1b825063b21f01dcffbd5fa126262a7 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 22 Nov 2024 17:53:06 -0600 Subject: [PATCH] fix(templates): website template firefox logo fix and images fix on vercel (#9459) Fixes logo not showing up on firefox and images not loading properly when hosting with Vercel --- templates/website/next.config.js | 4 +++- templates/website/src/Header/Component.client.tsx | 2 +- .../src/app/(frontend)/posts/page/[pageNumber]/page.tsx | 8 +++++--- templates/website/src/components/Logo/Logo.tsx | 7 ++++--- templates/website/src/utilities/getURL.ts | 4 ++++ templates/with-vercel-website/next.config.js | 4 +++- .../with-vercel-website/src/Header/Component.client.tsx | 2 +- .../src/app/(frontend)/posts/page/[pageNumber]/page.tsx | 8 +++++--- .../with-vercel-website/src/components/Logo/Logo.tsx | 7 ++++--- templates/with-vercel-website/src/utilities/getURL.ts | 4 ++++ 10 files changed, 34 insertions(+), 16 deletions(-) diff --git a/templates/website/next.config.js b/templates/website/next.config.js index e8e6935f4..25f37e4f4 100644 --- a/templates/website/next.config.js +++ b/templates/website/next.config.js @@ -2,7 +2,9 @@ import { withPayload } from '@payloadcms/next/withPayload' import redirects from './redirects.js' -const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000' +const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL + ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` + : undefined || process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000' /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/templates/website/src/Header/Component.client.tsx b/templates/website/src/Header/Component.client.tsx index b8c4edbf8..52741b677 100644 --- a/templates/website/src/Header/Component.client.tsx +++ b/templates/website/src/Header/Component.client.tsx @@ -33,7 +33,7 @@ export const HeaderClient: React.FC = ({ header }) => {
- +
diff --git a/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx b/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx index 2aed49756..597c7ddf7 100644 --- a/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx +++ b/templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx @@ -54,7 +54,7 @@ export default async function Page({ params: paramsPromise }: Args) {
- {posts.totalPages > 1 && posts.page && ( + {posts?.page && posts?.totalPages > 1 && ( )}
@@ -81,8 +81,10 @@ export async function generateStaticParams() { const pages: { pageNumber: string }[] = [] - for (let i = 1; i <= posts.totalPages; i++) { - pages.push({ pageNumber: String(i) }) + if (posts.totalPages) { + for (let i = 1; i <= posts.totalPages; i++) { + pages.push({ pageNumber: String(i) }) + } } return pages diff --git a/templates/website/src/components/Logo/Logo.tsx b/templates/website/src/components/Logo/Logo.tsx index a067e9df0..3efa90451 100644 --- a/templates/website/src/components/Logo/Logo.tsx +++ b/templates/website/src/components/Logo/Logo.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx' import React from 'react' interface Props { @@ -7,7 +8,7 @@ interface Props { } export const Logo = (props: Props) => { - const { loading: loadingFromProps, priority: priorityFromProps } = props + const { loading: loadingFromProps, priority: priorityFromProps, className } = props const loading = loadingFromProps || 'lazy' const priority = priorityFromProps || 'low' @@ -17,11 +18,11 @@ export const Logo = (props: Props) => { Payload Logo ) diff --git a/templates/website/src/utilities/getURL.ts b/templates/website/src/utilities/getURL.ts index 66de9e3e4..c05c13ee7 100644 --- a/templates/website/src/utilities/getURL.ts +++ b/templates/website/src/utilities/getURL.ts @@ -23,5 +23,9 @@ export const getClientSideURL = () => { return `${protocol}//${domain}${port ? `:${port}` : ''}` } + if (process.env.VERCEL_PROJECT_PRODUCTION_URL) { + return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` + } + return process.env.NEXT_PUBLIC_SERVER_URL || '' } diff --git a/templates/with-vercel-website/next.config.js b/templates/with-vercel-website/next.config.js index e8e6935f4..25f37e4f4 100644 --- a/templates/with-vercel-website/next.config.js +++ b/templates/with-vercel-website/next.config.js @@ -2,7 +2,9 @@ import { withPayload } from '@payloadcms/next/withPayload' import redirects from './redirects.js' -const NEXT_PUBLIC_SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000' +const NEXT_PUBLIC_SERVER_URL = process.env.VERCEL_PROJECT_PRODUCTION_URL + ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` + : undefined || process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000' /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/templates/with-vercel-website/src/Header/Component.client.tsx b/templates/with-vercel-website/src/Header/Component.client.tsx index b8c4edbf8..52741b677 100644 --- a/templates/with-vercel-website/src/Header/Component.client.tsx +++ b/templates/with-vercel-website/src/Header/Component.client.tsx @@ -33,7 +33,7 @@ export const HeaderClient: React.FC = ({ header }) => {
- +
diff --git a/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx b/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx index 2aed49756..597c7ddf7 100644 --- a/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx +++ b/templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx @@ -54,7 +54,7 @@ export default async function Page({ params: paramsPromise }: Args) {
- {posts.totalPages > 1 && posts.page && ( + {posts?.page && posts?.totalPages > 1 && ( )}
@@ -81,8 +81,10 @@ export async function generateStaticParams() { const pages: { pageNumber: string }[] = [] - for (let i = 1; i <= posts.totalPages; i++) { - pages.push({ pageNumber: String(i) }) + if (posts.totalPages) { + for (let i = 1; i <= posts.totalPages; i++) { + pages.push({ pageNumber: String(i) }) + } } return pages diff --git a/templates/with-vercel-website/src/components/Logo/Logo.tsx b/templates/with-vercel-website/src/components/Logo/Logo.tsx index a067e9df0..3efa90451 100644 --- a/templates/with-vercel-website/src/components/Logo/Logo.tsx +++ b/templates/with-vercel-website/src/components/Logo/Logo.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx' import React from 'react' interface Props { @@ -7,7 +8,7 @@ interface Props { } export const Logo = (props: Props) => { - const { loading: loadingFromProps, priority: priorityFromProps } = props + const { loading: loadingFromProps, priority: priorityFromProps, className } = props const loading = loadingFromProps || 'lazy' const priority = priorityFromProps || 'low' @@ -17,11 +18,11 @@ export const Logo = (props: Props) => { Payload Logo ) diff --git a/templates/with-vercel-website/src/utilities/getURL.ts b/templates/with-vercel-website/src/utilities/getURL.ts index 66de9e3e4..c05c13ee7 100644 --- a/templates/with-vercel-website/src/utilities/getURL.ts +++ b/templates/with-vercel-website/src/utilities/getURL.ts @@ -23,5 +23,9 @@ export const getClientSideURL = () => { return `${protocol}//${domain}${port ? `:${port}` : ''}` } + if (process.env.VERCEL_PROJECT_PRODUCTION_URL) { + return `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` + } + return process.env.NEXT_PUBLIC_SERVER_URL || '' }