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' 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} */ /** @type {import('next').NextConfig} */
const 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 } : {})}> <header className="container relative z-20 " {...(theme ? { 'data-theme': theme } : {})}>
<div className="py-8 border-b border-border flex justify-between"> <div className="py-8 border-b border-border flex justify-between">
<Link href="/"> <Link href="/">
<Logo loading="eager" priority="high" /> <Logo loading="eager" priority="high" className="invert dark:invert-0" />
</Link> </Link>
<HeaderNav header={header} /> <HeaderNav header={header} />
</div> </div>

4
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} /> <CollectionArchive posts={posts.docs} />
<div className="container"> <div className="container">
{posts.totalPages > 1 && posts.page && ( {posts?.page && posts?.totalPages > 1 && (
<Pagination page={posts.page} totalPages={posts.totalPages} /> <Pagination page={posts.page} totalPages={posts.totalPages} />
)} )}
</div> </div>
@@ -81,9 +81,11 @@ export async function generateStaticParams() {
const pages: { pageNumber: string }[] = [] const pages: { pageNumber: string }[] = []
if (posts.totalPages) {
for (let i = 1; i <= posts.totalPages; i++) { for (let i = 1; i <= posts.totalPages; i++) {
pages.push({ pageNumber: String(i) }) pages.push({ pageNumber: String(i) })
} }
}
return pages return pages
} }

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

@@ -1,3 +1,4 @@
import clsx from 'clsx'
import React from 'react' import React from 'react'
interface Props { interface Props {
@@ -7,7 +8,7 @@ interface Props {
} }
export const Logo = (props: Props) => { export const Logo = (props: Props) => {
const { loading: loadingFromProps, priority: priorityFromProps } = props const { loading: loadingFromProps, priority: priorityFromProps, className } = props
const loading = loadingFromProps || 'lazy' const loading = loadingFromProps || 'lazy'
const priority = priorityFromProps || 'low' const priority = priorityFromProps || 'low'
@@ -17,11 +18,11 @@ export const Logo = (props: Props) => {
<img <img
alt="Payload Logo" alt="Payload Logo"
width={193} width={193}
height={43} height={34}
loading={loading} loading={loading}
fetchPriority={priority} fetchPriority={priority}
decoding="async" 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" 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}` : ''}` 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 || '' 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' 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} */ /** @type {import('next').NextConfig} */
const 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 } : {})}> <header className="container relative z-20 " {...(theme ? { 'data-theme': theme } : {})}>
<div className="py-8 border-b border-border flex justify-between"> <div className="py-8 border-b border-border flex justify-between">
<Link href="/"> <Link href="/">
<Logo loading="eager" priority="high" /> <Logo loading="eager" priority="high" className="invert dark:invert-0" />
</Link> </Link>
<HeaderNav header={header} /> <HeaderNav header={header} />
</div> </div>

4
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} /> <CollectionArchive posts={posts.docs} />
<div className="container"> <div className="container">
{posts.totalPages > 1 && posts.page && ( {posts?.page && posts?.totalPages > 1 && (
<Pagination page={posts.page} totalPages={posts.totalPages} /> <Pagination page={posts.page} totalPages={posts.totalPages} />
)} )}
</div> </div>
@@ -81,9 +81,11 @@ export async function generateStaticParams() {
const pages: { pageNumber: string }[] = [] const pages: { pageNumber: string }[] = []
if (posts.totalPages) {
for (let i = 1; i <= posts.totalPages; i++) { for (let i = 1; i <= posts.totalPages; i++) {
pages.push({ pageNumber: String(i) }) pages.push({ pageNumber: String(i) })
} }
}
return pages 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' import React from 'react'
interface Props { interface Props {
@@ -7,7 +8,7 @@ interface Props {
} }
export const Logo = (props: Props) => { export const Logo = (props: Props) => {
const { loading: loadingFromProps, priority: priorityFromProps } = props const { loading: loadingFromProps, priority: priorityFromProps, className } = props
const loading = loadingFromProps || 'lazy' const loading = loadingFromProps || 'lazy'
const priority = priorityFromProps || 'low' const priority = priorityFromProps || 'low'
@@ -17,11 +18,11 @@ export const Logo = (props: Props) => {
<img <img
alt="Payload Logo" alt="Payload Logo"
width={193} width={193}
height={43} height={34}
loading={loading} loading={loading}
fetchPriority={priority} fetchPriority={priority}
decoding="async" 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" 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}` : ''}` 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 || '' return process.env.NEXT_PUBLIC_SERVER_URL || ''
} }