Compare commits

...
2 Commits
Author SHA1 Message Date
radoslaw.smolinski 610ab6fdf5 1.4.3 2026-09-28 14:54:30 +02:00
radoslaw.smolinski 81275c0395 Added css asset for sitemap 2026-09-28 14:54:21 +02:00
4 changed files with 278 additions and 122 deletions
+76
View File
@@ -0,0 +1,76 @@
/*
* Starter stylesheet for a sitemap served via buildSitemapXml({ cssUrl }).
* Uses type="text/css" on XML (W3C "Associating Style Sheets with XML") — NOT
* XSLT, so no browser deprecation warning. Selectors are the XML tag names.
*
* Copy to your project's /public/sitemap.css and adjust colors/spacing to taste.
* Crawlers ignore this; it only affects the human-readable browser view.
*/
urlset {
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #090d16;
color: #f1f5f9;
padding: 2rem 1.5rem;
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
/* Each URL entry as a card. */
url {
display: block;
background: #111827;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
}
/* The URL itself. */
loc {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: #f97316;
margin-bottom: 0.5rem;
word-break: break-all;
}
/* Metadata line: lastmod / changefreq / priority, each with a label. */
lastmod,
changefreq,
priority {
display: inline-block;
font-size: 0.8rem;
color: #94a3b8;
margin-right: 1.5rem;
}
lastmod::before {
content: 'Ostatnia modyfikacja: ';
color: #64748b;
}
changefreq::before {
content: 'Częstotliwość: ';
color: #64748b;
}
priority::before {
content: 'Priorytet: ';
color: #64748b;
}
/* hreflang alternates as small pills. */
link {
display: inline-block;
font-size: 0.75rem;
background: #1e293b;
color: #38bdf8;
border: 1px solid #334155;
padding: 0.15rem 0.45rem;
border-radius: 4px;
margin: 0.4rem 0.35rem 0 0;
}
+125 -121
View File
@@ -19,14 +19,14 @@ admina i bez importMap się nie wyrenderują.
```ts ```ts
ipalKit({ ipalKit({
seo: { seo: {
collections: ['pages', 'posts'], // które kolekcje dostają meta collections: ['pages', 'posts'], // które kolekcje dostają meta
// generateTitle: ({ doc }) => `${doc.title}`, // opcjonalne // generateTitle: ({ doc }) => `${doc.title}`, // opcjonalne
// generateDescription: ({ doc }) => doc.excerpt ?? '', // generateDescription: ({ doc }) => doc.excerpt ?? '',
// fields: [...], // extra pola w grupie SEO // fields: [...], // extra pola w grupie SEO
// autoFill: { title: 'title', description: 'excerpt' }, // mapowanie auto-fill // autoFill: { title: 'title', description: 'excerpt' }, // mapowanie auto-fill
// autoFill: false, // wyłącz auto-fill // autoFill: false, // wyłącz auto-fill
}, },
}) })
``` ```
@@ -89,16 +89,16 @@ import { createPageMetadata } from '@intecion/ipal-kit'
import { i18nConfig } from '@/i18n.config' import { i18nConfig } from '@/i18n.config'
const pageMetadata = createPageMetadata({ const pageMetadata = createPageMetadata({
config: i18nConfig, config: i18nConfig,
baseUrl: process.env.NEXT_PUBLIC_SERVER_URL, baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
// collection: 'pages', // domyślne // collection: 'pages', // domyślne
// settingsSlug: 'site-settings', // domyślne // settingsSlug: 'site-settings', // domyślne
// siteNameField: 'siteName', // domyślne // siteNameField: 'siteName', // domyślne
}) })
export async function generateMetadata({ params }): Promise<Metadata> { export async function generateMetadata({ params }): Promise<Metadata> {
const { locale, slug } = await params const { locale, slug } = await params
return pageMetadata({ payload: await getPayload({ config }), locale, slug }) return pageMetadata({ payload: await getPayload({ config }), locale, slug })
} }
``` ```
@@ -121,43 +121,43 @@ global. Klient dostarcza resolvery.
import { createMetadataGenerator } from '@intecion/ipal-kit' import { createMetadataGenerator } from '@intecion/ipal-kit'
const generate = createMetadataGenerator({ const generate = createMetadataGenerator({
config: i18nConfig, config: i18nConfig,
baseUrl: process.env.NEXT_PUBLIC_SERVER_URL, baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
homeSlug: 'homepage', homeSlug: 'homepage',
resolveDocument: async ({ payload, params, locale }) => { resolveDocument: async ({ payload, params, locale }) => {
const slug = (params.slug as string[])?.join('/') const slug = (params.slug as string[])?.join('/')
// meta MUSI przyjść w konkretnym locale (stringi), a slug jako mapa // meta MUSI przyjść w konkretnym locale (stringi), a slug jako mapa
// locale→wartość (hreflang) — to dwa różne odczyty. // locale→wartość (hreflang) — to dwa różne odczyty.
const found = await payload.find({ const found = await payload.find({
collection: 'posts', collection: 'posts',
where: { slug: { equals: slug } }, where: { slug: { equals: slug } },
locale, locale,
depth: 1, depth: 1,
limit: 1, limit: 1,
}) })
const doc = found.docs[0] const doc = found.docs[0]
if (!doc) return null if (!doc) return null
const allLocales = await payload.findByID({ const allLocales = await payload.findByID({
collection: 'posts', collection: 'posts',
id: doc.id, id: doc.id,
locale: 'all', locale: 'all',
depth: 0, depth: 0,
}) })
return { ...doc, slug: allLocales.slug } return { ...doc, slug: allLocales.slug }
}, },
resolveSiteName: async ({ payload, locale }) => resolveSiteName: async ({ payload, locale }) =>
(await getSiteSettings(payload, { locale })).siteName ?? null, (await getSiteSettings(payload, { locale })).siteName ?? null,
resolveImageUrl: async ({ doc }) => doc.meta?.image?.url ?? null, resolveImageUrl: async ({ doc }) => doc.meta?.image?.url ?? null,
}) })
export async function generateMetadata({ params }) { export async function generateMetadata({ params }) {
const { locale, slug } = await params const { locale, slug } = await params
return generate({ payload: await getPayload({ config }), params: { slug }, locale }) return generate({ payload: await getPayload({ config }), params: { slug }, locale })
} }
``` ```
@@ -176,16 +176,16 @@ Gdy chcesz pełną kontrolę:
import { buildMetadata, getLocalizedSlugs } from '@intecion/ipal-kit' import { buildMetadata, getLocalizedSlugs } from '@intecion/ipal-kit'
return buildMetadata({ return buildMetadata({
meta: doc.meta, // z plugin-seo meta: doc.meta, // z plugin-seo
siteName: settings.siteName, siteName: settings.siteName,
imageUrl: '/og.png', imageUrl: '/og.png',
locale: 'pl', locale: 'pl',
slugs: getLocalizedSlugs({ slugField: docAllLocales.slug, config }), slugs: getLocalizedSlugs({ slugField: docAllLocales.slug, config }),
config, config,
baseUrl: 'https://example.com', baseUrl: 'https://example.com',
separator: ' – ', // opcjonalne separator: ' – ', // opcjonalne
order: 'site-first', // opcjonalne order: 'site-first', // opcjonalne
homeSlug: 'homepage', homeSlug: 'homepage',
}) })
// → { title, description, openGraph, alternates: { canonical, languages } } // → { title, description, openGraph, alternates: { canonical, languages } }
``` ```
@@ -232,10 +232,10 @@ nie rozjedzie się z tym, co strony serwują. Handlery są gotowe w
```ts ```ts
// src/lib/content.ts // src/lib/content.ts
export const { /* ... */, sitemap, robots } = createContentHelpers({ export const { /* ... */, sitemap, robots } = createContentHelpers({
config, config,
content: contentConfig, content: contentConfig,
i18n: i18nConfig, // wymagane dla sitemap (hreflang) i18n: i18nConfig, // wymagane dla sitemap (hreflang)
baseUrl: process.env.NEXT_PUBLIC_SERVER_URL, baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
}) })
``` ```
@@ -278,7 +278,7 @@ Niskopoziomowo (własna trasa zamiast handlera z fabryki):
import { buildSitemapEntries, buildRobots } from '@intecion/ipal-kit' import { buildSitemapEntries, buildRobots } from '@intecion/ipal-kit'
const entries = await buildSitemapEntries({ const entries = await buildSitemapEntries({
payload, config: i18nConfig, baseUrl, content: contentConfig, payload, config: i18nConfig, baseUrl, content: contentConfig,
}) })
``` ```
@@ -321,9 +321,9 @@ import { buildIconsMetadata } from '@intecion/ipal-kit'
import { getSettings } from '@/lib/payload' import { getSettings } from '@/lib/payload'
export async function generateMetadata({ params }): Promise<Metadata> { export async function generateMetadata({ params }): Promise<Metadata> {
const { locale } = await params const { locale } = await params
const settings = await getSettings(locale) const settings = await getSettings(locale)
return buildIconsMetadata(settings.favicon) // z pola favicon (panel) return buildIconsMetadata(settings.favicon) // z pola favicon (panel)
} }
``` ```
@@ -346,16 +346,16 @@ wynikach, logo w knowledge panel.
import { buildOrganizationJsonLd } from '@intecion/ipal-kit' import { buildOrganizationJsonLd } from '@intecion/ipal-kit'
const jsonLd = buildOrganizationJsonLd({ const jsonLd = buildOrganizationJsonLd({
name: settings.siteName, name: settings.siteName,
url: process.env.NEXT_PUBLIC_SERVER_URL!, url: process.env.NEXT_PUBLIC_SERVER_URL!,
logo: settings.logo, logo: settings.logo,
sameAs: settings.socialLinks, // opcjonalne: profile społecznościowe sameAs: settings.socialLinks, // opcjonalne: profile społecznościowe
}) })
// w JSX layoutu: // w JSX layoutu:
<script <script
type="application/ld+json" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/> />
``` ```
@@ -403,42 +403,42 @@ import { i18nConfig } from '@/i18n.config'
import type { SiteSetting } from '@/payload-types' import type { SiteSetting } from '@/payload-types'
export default async function manifest(): Promise<MetadataRoute.Manifest> { export default async function manifest(): Promise<MetadataRoute.Manifest> {
const payload = await getCachedPayload() const payload = await getCachedPayload()
const settings = await getSiteSettings<SiteSetting>(payload, { const settings = await getSiteSettings<SiteSetting>(payload, {
locale: i18nConfig.defaultLocale as never, locale: i18nConfig.defaultLocale as never,
}) })
const siteName = settings?.siteName?.trim() const siteName = settings?.siteName?.trim()
// Ikona z panelu (favicon → logo). Dla PNG podaj KONKRETNY rozmiar z media // Ikona z panelu (favicon → logo). Dla PNG podaj KONKRETNY rozmiar z media
// (nie 'any' — 'any' jest tylko dla SVG). Bez ikony → pomiń pole icons. // (nie 'any' — 'any' jest tylko dla SVG). Bez ikony → pomiń pole icons.
const icon = settings?.favicon ?? settings?.logo const icon = settings?.favicon ?? settings?.logo
const iconEntry = const iconEntry =
typeof icon === 'object' && icon?.url typeof icon === 'object' && icon?.url
? (() => { ? (() => {
const isSvg = icon.mimeType === 'image/svg+xml' || icon.url.endsWith('.svg') const isSvg = icon.mimeType === 'image/svg+xml' || icon.url.endsWith('.svg')
const size = const size =
typeof icon.width === 'number' && typeof icon.height === 'number' typeof icon.width === 'number' && typeof icon.height === 'number'
? `${Math.min(icon.width, icon.height)}x${Math.min(icon.width, icon.height)}` ? `${Math.min(icon.width, icon.height)}x${Math.min(icon.width, icon.height)}`
: '512x512' : '512x512'
return { return {
src: icon.url, src: icon.url,
type: icon.mimeType ?? 'image/png', type: icon.mimeType ?? 'image/png',
sizes: isSvg ? 'any' : size, // 'any' tylko dla SVG sizes: isSvg ? 'any' : size, // 'any' tylko dla SVG
} }
})() })()
: undefined : undefined
// Buduj TYLKO z tego, co jest. Brak pola → nie ma go w manifeście (zamiast // Buduj TYLKO z tego, co jest. Brak pola → nie ma go w manifeście (zamiast
// zaszytego fallbacku). start_url z configu, nie zaszyte '/pl'. // zaszytego fallbacku). start_url z configu, nie zaszyte '/pl'.
return { return {
...(siteName ? { name: siteName, short_name: siteName } : {}), ...(siteName ? { name: siteName, short_name: siteName } : {}),
start_url: `/${i18nConfig.defaultLocale}`, start_url: `/${i18nConfig.defaultLocale}`,
display: 'standalone', display: 'standalone',
...(iconEntry ? { icons: [iconEntry] } : {}), ...(iconEntry ? { icons: [iconEntry] } : {}),
// theme_color / background_color / description — TYLKO jeśli dodasz pola w // theme_color / background_color / description — TYLKO jeśli dodasz pola w
// panelu i je odczytasz. NIE zaszywaj '#0e1e24' ani opisu klienta. // panelu i je odczytasz. NIE zaszywaj '#0e1e24' ani opisu klienta.
} }
} }
``` ```
@@ -522,16 +522,16 @@ zanim strona wygeneruje metadane. To pcha metadata do body. NIE deklaruj `<head>
```tsx ```tsx
// ŹLE — jawny <head> zamyka head za wcześnie // ŹLE — jawny <head> zamyka head za wcześnie
<html lang={locale}> <html lang={locale}>
<head><MediaPreconnect /></head> <head><MediaPreconnect /></head>
<body>{children}</body> <body>{children}</body>
</html> </html>
// DOBRZE — MediaPreconnect w body, React 19 hoistuje link do head // DOBRZE — MediaPreconnect w body, React 19 hoistuje link do head
<html lang={locale}> <html lang={locale}>
<body> <body>
<MediaPreconnect /> <MediaPreconnect />
{children} {children}
</body> </body>
</html> </html>
``` ```
@@ -546,8 +546,8 @@ z jakiegoś powodu nie może być ISR):
```ts ```ts
// next.config.ts // next.config.ts
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
htmlLimitedBots: htmlLimitedBots:
/Googlebot|Google-InspectionTool|Storebot-Google|Bingbot|Yandex|DuckDuckBot|Baiduspider|Screaming Frog|AhrefsBot|SemrushBot/i, /Googlebot|Google-InspectionTool|Storebot-Google|Bingbot|Yandex|DuckDuckBot|Baiduspider|Screaming Frog|AhrefsBot|SemrushBot/i,
} }
``` ```
@@ -652,10 +652,10 @@ searchbox (pole wyszukiwania pod wynikiem marki). RAZ w root layout:
```tsx ```tsx
import { buildWebSiteJsonLd } from '@intecion/ipal-kit' import { buildWebSiteJsonLd } from '@intecion/ipal-kit'
const jsonLd = buildWebSiteJsonLd({ const jsonLd = buildWebSiteJsonLd({
name: settings.siteName, name: settings.siteName,
url: baseUrl, url: baseUrl,
// TYLKO jeśli masz działającą stronę wyszukiwania: // TYLKO jeśli masz działającą stronę wyszukiwania:
search: { target: `${baseUrl}/szukaj?q={search_term_string}` }, search: { target: `${baseUrl}/szukaj?q={search_term_string}` },
}) })
``` ```
Pomiń `search`, jeśli nie ma realnej wyszukiwarki — SearchAction wskazujący na Pomiń `search`, jeśli nie ma realnej wyszukiwarki — SearchAction wskazujący na
@@ -666,9 +666,9 @@ Detailing) + Google rozumie hierarchię. PER STRONA, z pozycji strony:
```tsx ```tsx
import { buildBreadcrumbJsonLd } from '@intecion/ipal-kit' import { buildBreadcrumbJsonLd } from '@intecion/ipal-kit'
const jsonLd = buildBreadcrumbJsonLd([ const jsonLd = buildBreadcrumbJsonLd([
{ name: 'Strona główna', url: `${base}/pl` }, { name: 'Strona główna', url: `${base}/pl` },
{ name: 'Usługi', url: `${base}/pl/uslugi` }, { name: 'Usługi', url: `${base}/pl/uslugi` },
{ name: 'Detailing', url: `${base}/pl/uslugi/detailing` }, { name: 'Detailing', url: `${base}/pl/uslugi/detailing` },
]) ])
``` ```
Okruszki buduj z RZECZYWISTEJ pozycji strony (resolveRoute / ścieżka URL), NIE z Okruszki buduj z RZECZYWISTEJ pozycji strony (resolveRoute / ścieżka URL), NIE z
@@ -679,7 +679,7 @@ samych pozycji co menu w headerze:
```tsx ```tsx
import { buildSiteNavigationJsonLd } from '@intecion/ipal-kit' import { buildSiteNavigationJsonLd } from '@intecion/ipal-kit'
const jsonLd = buildSiteNavigationJsonLd( const jsonLd = buildSiteNavigationJsonLd(
navItems.map(i => ({ name: i.label, url: `${base}${i.href}` })) navItems.map(i => ({ name: i.label, url: `${base}${i.href}` }))
) )
``` ```
Dane z tego samego źródła co widoczne menu — nie osobna zaszyta lista. Dane z tego samego źródła co widoczne menu — nie osobna zaszyta lista.
@@ -929,7 +929,11 @@ const xml = buildSitemapXml(entries, { cssUrl: '/sitemap.css' })
### Starter CSS (public/sitemap.css) ### Starter CSS (public/sitemap.css)
Skopiuj do `public/sitemap.css` w projekcie, dostosuj do designu. Selektory to Plugin dostarcza gotowy plik — skopiuj do projektu:
```bash
cp node_modules/@intecion/ipal-kit/dist/modules/seo/assets/sitemap.css public/sitemap.css
```
Albo skopiuj poniższy starter i dostosuj do designu. Selektory to
bezpośrednio nazwy tagów XML: bezpośrednio nazwy tagów XML:
```css ```css
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@intecion/ipal-kit", "name": "@intecion/ipal-kit",
"version": "1.4.2", "version": "1.4.3",
"description": "Intecion Payload Advanced Library — a Payload CMS 3 plugin: i18n, SEO, forms, consent, analytics, blog/archives.", "description": "Intecion Payload Advanced Library — a Payload CMS 3 plugin: i18n, SEO, forms, consent, analytics, blog/archives.",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
+76
View File
@@ -0,0 +1,76 @@
/*
* Starter stylesheet for a sitemap served via buildSitemapXml({ cssUrl }).
* Uses type="text/css" on XML (W3C "Associating Style Sheets with XML") — NOT
* XSLT, so no browser deprecation warning. Selectors are the XML tag names.
*
* Copy to your project's /public/sitemap.css and adjust colors/spacing to taste.
* Crawlers ignore this; it only affects the human-readable browser view.
*/
urlset {
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #090d16;
color: #f1f5f9;
padding: 2rem 1.5rem;
max-width: 1200px;
margin: 0 auto;
line-height: 1.5;
}
/* Each URL entry as a card. */
url {
display: block;
background: #111827;
border: 1px solid #1e293b;
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
}
/* The URL itself. */
loc {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: #f97316;
margin-bottom: 0.5rem;
word-break: break-all;
}
/* Metadata line: lastmod / changefreq / priority, each with a label. */
lastmod,
changefreq,
priority {
display: inline-block;
font-size: 0.8rem;
color: #94a3b8;
margin-right: 1.5rem;
}
lastmod::before {
content: 'Ostatnia modyfikacja: ';
color: #64748b;
}
changefreq::before {
content: 'Częstotliwość: ';
color: #64748b;
}
priority::before {
content: 'Priorytet: ';
color: #64748b;
}
/* hreflang alternates as small pills. */
link {
display: inline-block;
font-size: 0.75rem;
background: #1e293b;
color: #38bdf8;
border: 1px solid #334155;
padding: 0.15rem 0.45rem;
border-radius: 4px;
margin: 0.4rem 0.35rem 0 0;
}