tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(templates): website template firefox logo fix and images fix on vercel (#9459)

Browse Source 
Fixes logo not showing up on firefox and images not loading properly
when hosting with Vercel
This commit is contained in:
Paul
2024-11-22 17:53:06 -06:00
committed by GitHub
parent f155e00f00
commit 23d54a76c1
10 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/website/next.config.js
View File

@@ -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 = {

2
templates/website/src/Header/Component.client.tsx
View File

@@ -33,7 +33,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
<header className="container relative z-20 " {...(theme ? { 'data-theme': theme } : {})}>
<div className="py-8 border-b border-border flex justify-between">
<Link href="/">
<Logo loading="eager" priority="high" />
<Logo loading="eager" priority="high" className="invert dark:invert-0" />
</Link>
<HeaderNav header={header} />
</div>

8
templates/website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx
View File

@@ -54,7 +54,7 @@ export default async function Page({ params: paramsPromise }: Args) {
<CollectionArchive posts={posts.docs} />
<div className="container">
{posts.totalPages > 1 && posts.page && (
{posts?.page && posts?.totalPages > 1 && (
<Pagination page={posts.page} totalPages={posts.totalPages} />
)}
</div>
@@ -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

7
templates/website/src/components/Logo/Logo.tsx
View File

@@ -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) => {
<img
alt="Payload Logo"
width={193}
height={43}
height={34}
loading={loading}
fetchPriority={priority}
decoding="async"
className="max-w-[9.375rem] invert dark:invert-0 w-full"
className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
/>
)

4
templates/website/src/utilities/getURL.ts
View File

@@ -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 || ''
}

4
templates/with-vercel-website/next.config.js
View File

@@ -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 = {

2
templates/with-vercel-website/src/Header/Component.client.tsx
View File

@@ -33,7 +33,7 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ header }) => {
<header className="container relative z-20 " {...(theme ? { 'data-theme': theme } : {})}>
<div className="py-8 border-b border-border flex justify-between">
<Link href="/">
<Logo loading="eager" priority="high" />
<Logo loading="eager" priority="high" className="invert dark:invert-0" />
</Link>
<HeaderNav header={header} />
</div>

8
templates/with-vercel-website/src/app/(frontend)/posts/page/[pageNumber]/page.tsx
View File

@@ -54,7 +54,7 @@ export default async function Page({ params: paramsPromise }: Args) {
<CollectionArchive posts={posts.docs} />
<div className="container">
{posts.totalPages > 1 && posts.page && (
{posts?.page && posts?.totalPages > 1 && (
<Pagination page={posts.page} totalPages={posts.totalPages} />
)}
</div>
@@ -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

7
templates/with-vercel-website/src/components/Logo/Logo.tsx
View File

@@ -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) => {
<img
alt="Payload Logo"
width={193}
height={43}
height={34}
loading={loading}
fetchPriority={priority}
decoding="async"
className="max-w-[9.375rem] invert dark:invert-0 w-full"
className={clsx('max-w-[9.375rem] w-full h-[34px]', className)}
src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-logo-light.svg"
/>
)

4
templates/with-vercel-website/src/utilities/getURL.ts
View File

@@ -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 || ''
}