{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footer-columns", "title": "Footer Columns", "description": "A brand block beside labelled columns of navigation links, closed by a copyright rule.", "registryDependencies": [], "files": [ { "path": "payload-components/source/blocks/shared/safeUrls.ts", "content": "const approvedEmbedHosts = new Set([\n 'airtable.com',\n 'docs.google.com',\n 'form.typeform.com',\n 'lookerstudio.google.com',\n 'maps.google.com',\n 'player.vimeo.com',\n 'vimeo.com',\n 'www.airtable.com',\n 'www.google.com',\n 'www.youtube-nocookie.com',\n 'www.youtube.com',\n 'youtube-nocookie.com',\n 'youtube.com',\n])\n\nconst approvedEmbedHostSuffixes = [\n '.airtable.com',\n '.google.com',\n '.typeform.com',\n '.vimeo.com',\n '.youtube-nocookie.com',\n '.youtube.com',\n]\n\nconst embedUrlError = 'Use an approved HTTPS embed URL.'\nconst formActionError = 'Use a same-origin path, such as /api/newsletter.'\nconst sameOriginBase = 'https://payload-components.local'\n\nconst isApprovedEmbedHost = (hostname: string) => {\n const normalizedHost = hostname.toLowerCase()\n\n return (\n approvedEmbedHosts.has(normalizedHost) ||\n approvedEmbedHostSuffixes.some((suffix) => normalizedHost.endsWith(suffix))\n )\n}\n\nexport const getSafeEmbedUrl = (value: unknown) => {\n if (typeof value !== 'string') return undefined\n\n const trimmed = value.trim()\n\n if (!trimmed) return undefined\n\n try {\n const parsed = new URL(trimmed)\n\n if (parsed.protocol !== 'https:' || parsed.username || parsed.password) {\n return undefined\n }\n\n if (!isApprovedEmbedHost(parsed.hostname)) {\n return undefined\n }\n\n return parsed.toString()\n } catch {\n return undefined\n }\n}\n\nexport const validateEmbedUrl = (value: unknown) => getSafeEmbedUrl(value) ? true : embedUrlError\n\nexport const getSafeFormAction = (value: unknown) => {\n if (typeof value !== 'string') return undefined\n\n const trimmed = value.trim()\n\n if (!trimmed || !trimmed.startsWith('/') || trimmed.startsWith('//') || trimmed.includes('\\\\')) {\n return undefined\n }\n\n try {\n const parsed = new URL(trimmed, sameOriginBase)\n\n if (parsed.origin !== sameOriginBase) {\n return undefined\n }\n\n return `${parsed.pathname}${parsed.search}${parsed.hash}`\n } catch {\n return undefined\n }\n}\n\nexport const validateSameOriginFormAction = (value: unknown) => {\n if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) {\n return true\n }\n\n return getSafeFormAction(value) ? true : formActionError\n}\n", "type": "registry:file", "target": "~/src/blocks/shared/safeUrls.ts" }, { "path": "payload-components/source/blocks/shared/footerUrls.ts", "content": "import { getSafeFormAction } from './safeUrls'\n\nconst footerHrefError = 'Enter an HTTPS URL, a mailto:/tel: link, or a same-origin path such as /pricing.'\n\n/**\n * Resolve one footer link `href` to something safe to put on an anchor.\n *\n * Footers are almost entirely a link surface, and React does not sanitize `href`\n * — a stored `javascript:` or `data:` value would execute on click. Everything is\n * rejected here except the four shapes a real footer needs: a same-origin path,\n * an HTTPS URL, `mailto:`, and `tel:`. Both the admin `validate` and the render\n * path call through this, so a row written straight through the Local API (which\n * skips field validation) still cannot reach the DOM unchecked.\n */\nexport const getSafeFooterHref = (value: unknown) => {\n if (typeof value !== 'string') return undefined\n\n const trimmed = value.trim()\n\n if (!trimmed || /[\\r\\n\\t]/.test(trimmed)) return undefined\n\n const sameOriginPath = getSafeFormAction(trimmed)\n if (sameOriginPath) return sameOriginPath\n\n try {\n const parsed = new URL(trimmed)\n\n if (parsed.username || parsed.password) return undefined\n\n if (parsed.protocol === 'https:') return parsed.toString()\n\n if (parsed.protocol === 'mailto:' || parsed.protocol === 'tel:') {\n return parsed.toString()\n }\n\n return undefined\n } catch {\n return undefined\n }\n}\n\nexport const validateFooterHref = (value: unknown) =>\n getSafeFooterHref(value) ? true : footerHrefError\n", "type": "registry:file", "target": "~/src/blocks/shared/footerUrls.ts" }, { "path": "payload-components/source/blocks/shared/footerFields.ts", "content": "import type { Field } from 'payload'\n\nimport { validateFooterHref } from '@/blocks/shared/footerUrls'\n\n/**\n * Shared field core for the Footer component family.\n *\n * Every footer variant (footer-columns, footer-simple, footer-centered, …)\n * spreads `footerFields` first for the shared brand and copyright line, then\n * appends its own variant-specific shape — the grouped link columns, the flat\n * inline nav, or the centred stack with social links. Editing the shared brand\n * shape here updates every installed footer block at once, so the family never\n * drifts field-by-field across a repo.\n *\n * `brandLabel` is required even when a `logo` upload is set: it is the accessible\n * name for the home link, so an icon-only mark still announces itself to a screen\n * reader instead of reading as a bare image. When no logo is uploaded it also\n * renders as the visible text wordmark.\n *\n * `footerLinkFields` is the one-link shape reused by every variant. Its `href` is\n * validated with `validateFooterHref` in the admin and re-checked at render with\n * `getSafeFooterHref`, so an unexpected scheme cannot reach the DOM even if a row\n * was written straight through the Local API — see `@/blocks/shared/footerUrls`.\n *\n * Installed once per repo at `src/blocks/shared/footerFields.ts`; re-running\n * `payload-components add footer-*` never overwrites a copy you have already edited.\n */\nexport const footerFields: Field[] = [\n {\n name: 'logo',\n type: 'upload',\n relationTo: 'media',\n admin: {\n description: 'Brand mark shown in the footer. Falls back to Brand label when empty.',\n },\n },\n {\n name: 'brandLabel',\n type: 'text',\n required: true,\n admin: {\n description:\n 'Accessible name for the home link, and the visible wordmark when no logo is uploaded.',\n },\n },\n {\n name: 'copyright',\n type: 'text',\n required: true,\n },\n]\n\nexport const footerLinkFields: Field[] = [\n {\n name: 'label',\n type: 'text',\n required: true,\n },\n {\n name: 'href',\n type: 'text',\n required: true,\n validate: validateFooterHref,\n },\n]\n", "type": "registry:file", "target": "~/src/blocks/shared/footerFields.ts" }, { "path": "payload-components/source/blocks/FooterColumns/config.ts", "content": "import type { Block } from 'payload'\n\nimport { footerFields, footerLinkFields } from '@/blocks/shared/footerFields'\n\nexport const FooterColumns: Block = {\n slug: 'footerColumns',\n // Existing apps must migrate stored data before adopting this identifier:\n // https://www.payload-components.xyz/docs/registry#installed-source-and-migrations\n dbName: 'pc_foo_col',\n interfaceName: 'FooterColumnsBlock',\n fields: [\n // Shared footer core (logo, brandLabel, copyright). Variant-specific fields\n // follow; edit the shared shape in @/blocks/shared/footerFields.\n ...footerFields,\n {\n name: 'tagline',\n type: 'textarea',\n },\n {\n name: 'groups',\n type: 'array',\n required: true,\n minRows: 1,\n maxRows: 4,\n admin: {\n description: 'Each group becomes one labelled column of links.',\n initCollapsed: true,\n },\n fields: [\n {\n name: 'name',\n type: 'text',\n required: true,\n admin: {\n description: 'Column heading, and the accessible name for that group of links.',\n },\n },\n {\n name: 'links',\n type: 'array',\n required: true,\n minRows: 1,\n maxRows: 8,\n // Shared link shape — see @/blocks/shared/footerFields.\n fields: footerLinkFields,\n },\n ],\n },\n ],\n labels: {\n plural: 'Footer Columns Blocks',\n singular: 'Footer Columns',\n },\n}\n", "type": "registry:file", "target": "~/src/blocks/FooterColumns/config.ts" }, { "path": "payload-components/source/blocks/FooterColumns/Component.tsx", "content": "import React from 'react'\n\nimport type { FooterColumnsBlock as FooterColumnsBlockData } from '@/payload-types'\n\nimport { getSafeFooterHref } from '@/blocks/shared/footerUrls'\nimport { Media } from '@/components/Media'\nimport { cn } from '@/utilities/ui'\n\n// Layout adapted from tailark/blocks (MIT) — re-implemented as a Payload block.\n\ntype Props = FooterColumnsBlockData & {\n id?: string\n className?: string\n disableInnerContainer?: boolean\n}\n\nexport const FooterColumnsBlock: React.FC = ({\n brandLabel,\n className,\n copyright,\n disableInnerContainer,\n groups,\n id,\n logo,\n tagline,\n}) => {\n return (\n
\n
\n \n
\n
\n {logo ? (\n \n ) : (\n \n {brandLabel}\n \n )}\n\n {tagline ? (\n

{tagline}

\n ) : null}\n
\n\n {groups && groups.length > 0\n ? groups.map((group, index) => (\n \n {group.name}\n\n
    \n {group.links?.map((link, linkIndex) => {\n const href = getSafeFooterHref(link.href)\n\n if (!href) return null\n\n return (\n
  • \n \n {link.label}\n \n
    • \n )\n })}\n
\n \n ))\n : null}\n
\n\n

{copyright}

\n
\n \n
\n )\n}\n", "type": "registry:file", "target": "~/src/blocks/FooterColumns/Component.tsx" } ], "meta": { "payloadComponent": { "installCommand": "payload-components add footer-columns", "postInstall": [ "generate:types", "generate:importmap" ], "requiresPayloadComponentWrapper": true, "supportedTargets": [ "payload-website-starter", "payload-blocks-app" ] } }, "docs": "Payload Components installs this as a Payload CMS block for the Payload website starter shape.\n\nRecommended install:\n\n```bash\npnpm payload-components add footer-columns\n```\n\nDirect shadcn install URL:\n\n```bash\npnpm dlx shadcn@latest add https://www.payload-components.xyz/r/footer-columns.json\n```\n\nDirect shadcn installs only copy the block source files and shadcn UI dependencies. Use `payload-components add footer-columns` when you also want Payload layout registration, `RenderBlocks` wiring, `generate:types`, and `generate:importmap` handled for you.", "type": "registry:block" }