@goodfellow-cms/registry 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -71,7 +71,7 @@ A block is a `registry:block` item with `meta.goodfellow`:
71
71
 
72
72
  ### Packages
73
73
 
74
- The admin panel can't install npm packages, so every site includes the same set and blocks can use only those. Besides `react`, `@goodfellow-cms/react` and `@puckeditor/core`, which every site has, they are `class-variance-authority`, `clsx`, `cn`, `embla-carousel-react`, `lucide-react`, `radix-ui`, `tailwind-merge` and `tw-animate-css`. An item whose `dependencies` name anything else can't be added. To suggest a package for the list, open an issue.
74
+ The admin panel can't install npm packages, so every site includes the same set and blocks can use only those. Besides `react`, `@goodfellow-cms/core`, `@goodfellow-cms/react` and `@puckeditor/core`, which every site has, they are `class-variance-authority`, `clsx`, `cn`, `embla-carousel-react`, `lucide-react`, `radix-ui`, `tailwind-merge` and `tw-animate-css`. An item whose `dependencies` name anything else can't be added. To suggest a package for the list, open an issue.
75
75
 
76
76
  ### Writing the blocks
77
77
 
@@ -79,6 +79,7 @@ Registry blocks follow the same rules as any Goodfellow block (see [AGENTS.md](h
79
79
 
80
80
  - Every block has a `className` prop (`className: classNameField`), applied to its outermost element and combined with `cx()` from `@goodfellow-cms/react`, last.
81
81
  - Use the theme's classes (`bg-primary`, `text-muted-foreground`, `rounded-lg`), which shadcn's components use too, so blocks follow the site's colors and fonts.
82
+ - **Give it words to be found by** in the editor's block search, besides its label: `export default withKeywords(block, ["faq", "questions"])` from `@goodfellow-cms/react`, lowercase. It can wrap `withParts()`, or the other way round.
82
83
  - **Name the block's parts**, so a site's theme can restyle them: `const part = useParts()` at the start of `render`, then `className={part("gf-my-block-title", "text-xl font-bold", className)}` on each part (the block's own classes, then anything an editor chose, `className` last), and declare them with what owners call them: `export default withParts(block, { "gf-my-block-title": "Title" })`. Start every name with `gf-` and the item's name, so they never clash with another block's, and never rename or remove one once it's published, since themes refer to them. Client Components get their parts' classes as plain props from the block, as `shadcn-faq` does.
83
84
  - Render links and images with `SiteLink` and `SiteImage` from `@goodfellow-cms/react`, and image fields with `mediaField()`. To style a link as a button, give `SiteLink` the classes from shadcn's `buttonVariants()`.
84
85
  - Labels and options are for non-technical people: "Space above and below", not "padding-y".
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@goodfellow-cms/registry",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "Goodfellow's block registry: blocks built with shadcn/ui, which sites install from the admin panel.",
5
5
  "keywords": [
6
6
  "goodfellow",
@@ -28,8 +28,8 @@
28
28
  "./package.json": "./package.json"
29
29
  },
30
30
  "devDependencies": {
31
- "@goodfellow-cms/core": "0.6.0",
32
- "@goodfellow-cms/react": "0.6.0",
31
+ "@goodfellow-cms/core": "0.7.0",
32
+ "@goodfellow-cms/react": "0.7.0",
33
33
  "@puckeditor/core": "0.23.0",
34
34
  "@types/react": "^19.2.0",
35
35
  "@types/react-dom": "^19.2.0",
@@ -24,7 +24,7 @@
24
24
  "meta": {
25
25
  "goodfellow": {
26
26
  "category": "Advanced",
27
- "version": "0.6.0"
27
+ "version": "0.7.0"
28
28
  }
29
29
  },
30
30
  "dependencies": []
@@ -0,0 +1,21 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "feed-list",
4
+ "type": "registry:block",
5
+ "title": "News feed",
6
+ "description": "The latest items of another site's RSS or Atom feed, read when the site is built: titles linking to them, with optional dates.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/feed-list/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import { addDays, changesOn, todayIn } from \"@goodfellow-cms/core\";\nimport { classNameField, SiteLink, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface FeedItem {\n title: string;\n link: string;\n date: string;\n}\n\nexport interface FeedListProps {\n heading: string;\n feed: string;\n limit: number;\n showDates: boolean;\n moreLabel: string;\n moreHref: string;\n emptyText: string;\n className: string;\n /** Read from the feed when the site is built. */\n items?: FeedItem[];\n}\n\n/** How long a build reuses a feed it has read. */\nconst FEED_CACHE_MS = 600_000;\nconst FEED_LIMIT = 5_242_880;\nconst feedCache = new Map<string, { at: number; text: Promise<string> }>();\n\n/** Fetches an RSS or Atom feed from an `https://` address, once every few minutes. */\nasync function fetchFeed(address: string): Promise<string> {\n const url = address.trim();\n if (!/^https?:\\/\\//i.test(url)) throw new Error(\"The feed's address must start with https://.\");\n const cached = feedCache.get(url);\n if (cached && Date.now() - cached.at < FEED_CACHE_MS) return cached.text;\n const text = (async () => {\n const response = await fetch(url, {\n headers: { accept: \"application/rss+xml, application/atom+xml, application/xml, text/xml\" },\n signal: AbortSignal.timeout(20_000),\n });\n if (!response.ok) throw new Error(`The feed's address answered ${response.status}.`);\n const body = await response.text();\n if (body.length > FEED_LIMIT) throw new Error(\"The feed is too large to read.\");\n return body;\n })();\n feedCache.set(url, { at: Date.now(), text });\n text.catch(() => feedCache.delete(url));\n return text;\n}\n\nconst entities: Record<string, string> = { amp: \"&\", lt: \"<\", gt: \">\", quot: '\"', apos: \"'\", nbsp: \" \" };\n\n/** A tag's text, without CDATA markers, tags or entities. */\nfunction decode(text: string): string {\n return text\n .replace(/<!\\[CDATA\\[([\\s\\S]*?)\\]\\]>/g, \"$1\")\n .replace(/<[^>]*>/g, \"\")\n .replace(/&#x([0-9a-f]+);/gi, (_, hex) => String.fromCodePoint(Number.parseInt(hex, 16)))\n .replace(/&#(\\d+);/g, (_, code) => String.fromCodePoint(Number(code)))\n .replace(/&([a-z]+);/gi, (match, name) => entities[name.toLowerCase()] ?? match)\n .trim();\n}\n\nfunction tag(xml: string, name: string): string {\n const match = xml.match(new RegExp(`<${name}(?:\\\\s[^>]*)?>([\\\\s\\\\S]*?)</${name}>`, \"i\"));\n return decode(match?.[1] ?? \"\");\n}\n\n/** An Atom entry's link: its `alternate` one, or the first. */\nfunction atomLink(xml: string): string {\n const links = [...xml.matchAll(/<link\\b([^>]*)\\/?>/gi)].map((match) => match[1] ?? \"\");\n const chosen = links.find((attrs) => !/rel=[\"'](?!alternate)/i.test(attrs)) ?? links[0] ?? \"\";\n return chosen.match(/href=[\"']([^\"']+)[\"']/i)?.[1] ?? \"\";\n}\n\n/** The titles, links and dates of an RSS or Atom feed's items. Their text and descriptions are left out. */\nexport function readFeedItems(xml: string): FeedItem[] {\n const rss = [...xml.matchAll(/<item\\b[^>]*>([\\s\\S]*?)<\\/item>/gi)].map(([, item = \"\"]) => ({\n title: tag(item, \"title\"),\n link: tag(item, \"link\") || tag(item, \"guid\"),\n date: tag(item, \"pubDate\") || tag(item, \"dc:date\"),\n }));\n const items = rss.length\n ? rss\n : [...xml.matchAll(/<entry\\b[^>]*>([\\s\\S]*?)<\\/entry>/gi)].map(([, entry = \"\"]) => ({\n title: tag(entry, \"title\"),\n link: atomLink(entry),\n date: tag(entry, \"published\") || tag(entry, \"updated\"),\n }));\n return items.filter((item) => item.title && /^https?:\\/\\//i.test(item.link));\n}\n\nfunction formatDate(date: string, timeZone: string | undefined, language: string | undefined): string {\n const parsed = new Date(date);\n if (Number.isNaN(parsed.getTime())) return \"\";\n return parsed.toLocaleDateString(language || \"en\", { month: \"long\", day: \"numeric\", year: \"numeric\", timeZone });\n}\n\n/**\n * The latest items of another site's news feed (RSS or Atom), such as a podcast's episodes or a\n * news site's headlines: each one's title, linking to it, and its date. The feed is read when the\n * site is built, and the block asks for a rebuild the next day, so overnight builds keep it current.\n * Only titles, links and dates are shown, never the items' text.\n */\nconst FeedList: ComponentConfig<FeedListProps> = withParts(\n {\n label: \"News feed\",\n fields: {\n heading: { type: \"text\", label: \"Heading (leave empty for none)\", contentEditable: true },\n feed: { type: \"text\", label: \"The feed's address (RSS or Atom)\", placeholder: \"https://example.org/feed.xml\" },\n limit: { type: \"number\", label: \"How many\", min: 1, max: 50 },\n showDates: {\n type: \"radio\",\n label: \"Show dates\",\n options: [\n { label: \"Yes\", value: true },\n { label: \"No\", value: false },\n ],\n },\n moreLabel: { type: \"text\", label: 'Link under the list, such as \"View all\" (leave empty for none)' },\n moreHref: { type: \"text\", label: \"Where the link goes\" },\n emptyText: { type: \"text\", label: \"Text when the feed can't be read\" },\n className: classNameField,\n },\n defaultProps: {\n heading: \"\",\n feed: \"\",\n limit: 5,\n showDates: true,\n moreLabel: \"\",\n moreHref: \"\",\n emptyText: \"Nothing to show right now.\",\n className: \"\",\n },\n resolveData: async ({ props }, { metadata }) => {\n if (typeof document !== \"undefined\" || !props.feed?.trim()) return { props: { ...props, items: undefined } };\n const site = metadata.site as { timeZone?: string; language?: string } | undefined;\n try {\n // Feeds change daily, so the overnight build should run again tomorrow.\n changesOn(addDays(todayIn(site?.timeZone), 1));\n const items = readFeedItems(await fetchFeed(props.feed))\n .slice(0, Math.max(1, props.limit || 5))\n .map((item) => ({ ...item, date: formatDate(item.date, site?.timeZone, site?.language) }));\n return { props: { ...props, items } };\n } catch (error) {\n console.warn(\n `The feed at ${props.feed} couldn't be read, so the page is built without it: ${(error as Error).message}`,\n );\n return { props: { ...props, items: [] } };\n }\n },\n render: ({ heading, feed, items, showDates, moreLabel, moreHref, emptyText, className, puck }) => {\n const part = useParts();\n return (\n <div className={part(\"gf-feed-list\", \"text-foreground\", className)}>\n {heading && (\n <h2 className={part(\"gf-feed-list-heading\", \"font-heading text-2xl font-semibold\")}>{heading}</h2>\n )}\n {items && items.length > 0 ? (\n <ul className={part(\"gf-feed-list-items\", \"mt-3 divide-y divide-border\")}>\n {items.map((item, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: two items can link to the same address\n <li key={`${index}-${item.link}`} className={part(\"gf-feed-list-item\", \"py-2\")}>\n <SiteLink href={item.link} className={part(\"gf-feed-list-link\", \"font-medium hover:underline\")}>\n {item.title}\n </SiteLink>\n {showDates && item.date && (\n <span className={part(\"gf-feed-list-date\", \"block text-sm text-muted-foreground\")}>\n {item.date}\n </span>\n )}\n </li>\n ))}\n </ul>\n ) : (\n <p className={part(\"gf-feed-list-empty\", \"mt-3 text-muted-foreground\")}>\n {puck?.isEditing && feed ? `The latest items from ${feed} appear here on the site.` : emptyText}\n </p>\n )}\n {moreLabel && moreHref && (\n <SiteLink\n href={moreHref}\n className={part(\n \"gf-feed-list-more\",\n \"mt-3 inline-block text-sm font-semibold text-primary hover:underline\",\n )}\n >\n {moreLabel}\n </SiteLink>\n )}\n </div>\n );\n },\n },\n {\n \"gf-feed-list\": \"News feed\",\n \"gf-feed-list-heading\": \"Heading\",\n \"gf-feed-list-items\": \"List\",\n \"gf-feed-list-item\": \"Item\",\n \"gf-feed-list-link\": \"Item's title\",\n \"gf-feed-list-date\": \"Item's date\",\n \"gf-feed-list-empty\": \"Text when empty\",\n \"gf-feed-list-more\": \"Link under the list\",\n },\n);\n\nexport default withKeywords(FeedList, [\"rss\", \"atom\", \"feed\", \"news\", \"podcast\", \"headlines\"]);\n"
12
+ }
13
+ ],
14
+ "meta": {
15
+ "goodfellow": {
16
+ "category": "Page sections",
17
+ "version": "0.7.0"
18
+ }
19
+ },
20
+ "dependencies": []
21
+ }
package/r/map.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "map",
4
+ "type": "registry:block",
5
+ "title": "Map",
6
+ "description": "A Google map of an address or place, or one from Google Maps' embed code. No API key needed.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/map/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import { classNameField, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface MapProps {\n query: string;\n title: string;\n zoom: number;\n height: number;\n className: string;\n}\n\n/**\n * The map's address: Google Maps' own embed address, from the embed code its\n * Share button gives (or that address itself), or else a map of the address\n * or place, which needs no key. Nothing but Google Maps' embedded maps is shown.\n */\nexport function mapAddress(input: string, zoom: number): string | undefined {\n const text = input.trim();\n if (!text) return undefined;\n const embedded = /<iframe\\b[^>]*\\bsrc=[\"']([^\"']+)[\"']/i.exec(text)?.[1]?.replaceAll(\"&amp;\", \"&\") ?? text;\n if (/^https:\\/\\//i.test(embedded)) {\n try {\n const url = new URL(embedded);\n return url.hostname === \"www.google.com\" && url.pathname === \"/maps/embed\" ? url.href : undefined;\n } catch {\n return undefined;\n }\n }\n if (text.includes(\"<\")) return undefined;\n const params = new URLSearchParams({ q: text, z: String(Math.min(21, Math.max(1, zoom || 15))), output: \"embed\" });\n return `https://maps.google.com/maps?${params}`;\n}\n\nfunction MapView({ query, title, zoom, height, className, puck }: MapProps & { puck?: { isEditing?: boolean } }) {\n const part = useParts();\n const src = mapAddress(query, zoom);\n if (!src) {\n // Only editors see why there's no map; visitors see nothing.\n if (!puck?.isEditing) return null;\n return (\n <div className={part(\"gf-map\", \"rounded-lg bg-muted p-6 text-muted-foreground\", className)}>\n {query.trim()\n ? \"This isn't an address or Google Maps' embed code, so no map is shown.\"\n : \"Enter an address to show a map.\"}\n </div>\n );\n }\n return (\n <iframe\n src={src}\n title={title || \"Map\"}\n loading=\"lazy\"\n referrerPolicy=\"no-referrer-when-downgrade\"\n // Google's map needs its scripts and its own address; it can open Google Maps, but nothing else.\n sandbox=\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n className={part(\"gf-map\", \"w-full rounded-lg border border-border\", className)}\n style={{ height: Math.max(200, height || 400) }}\n />\n );\n}\n\n/** A Google map of an address or place, which visitors can move around and open in Google Maps. No API key needed. */\nconst MapBlock: ComponentConfig<MapProps> = withParts(\n {\n label: \"Map\",\n fields: {\n query: {\n type: \"textarea\",\n label: \"Address or place, or the embed code from Google Maps' Share button\",\n placeholder: \"1600 Pennsylvania Ave NW, Washington, DC\",\n },\n title: { type: \"text\", label: \"What the map shows, for screen readers\" },\n zoom: { type: \"number\", label: \"Zoom, for an address (1 is the world, 21 a building)\", min: 1, max: 21 },\n height: { type: \"number\", label: \"Height in pixels\", min: 200, max: 900 },\n className: classNameField,\n },\n defaultProps: { query: \"\", title: \"Map\", zoom: 15, height: 400, className: \"\" },\n render: (props) => <MapView {...props} />,\n },\n { \"gf-map\": \"Map\" },\n);\n\nexport default withKeywords(MapBlock, [\"map\", \"google maps\", \"address\", \"location\", \"directions\"]);\n"
12
+ }
13
+ ],
14
+ "meta": {
15
+ "goodfellow": {
16
+ "category": "Page sections",
17
+ "version": "0.7.0"
18
+ }
19
+ },
20
+ "dependencies": []
21
+ }
package/r/panel.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "panel",
4
+ "type": "registry:block",
5
+ "title": "Panel",
6
+ "description": "A box with its title in a colored bar, other blocks inside it, and an optional button at its foot.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/panel/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import { classNameField, SiteLink, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig, Slot } from \"@puckeditor/core\";\n\nexport interface PanelProps {\n title: string;\n tone: \"primary\" | \"secondary\";\n content: Slot;\n buttonLabel: string;\n buttonHref: string;\n className: string;\n}\n\nconst titleClasses: Record<PanelProps[\"tone\"], string> = {\n primary: \"bg-primary text-primary-foreground\",\n secondary: \"bg-secondary text-secondary-foreground\",\n};\n\nconst buttonClasses: Record<PanelProps[\"tone\"], string> = {\n primary: \"bg-secondary text-secondary-foreground\",\n secondary: \"bg-primary text-primary-foreground\",\n};\n\n/** A box with its title in a colored bar, other blocks inside it, and an optional button at its foot. */\nconst Panel: ComponentConfig<PanelProps> = withParts(\n {\n label: \"Panel\",\n fields: {\n title: { type: \"text\", label: \"Title\", contentEditable: true },\n tone: {\n type: \"radio\",\n label: \"Title bar's color\",\n options: [\n { value: \"primary\", label: \"Primary\" },\n { value: \"secondary\", label: \"Secondary\" },\n ],\n },\n content: { type: \"slot\" },\n buttonLabel: { type: \"text\", label: \"Button at the foot (leave empty for none)\" },\n buttonHref: { type: \"text\", label: \"Button links to\" },\n className: classNameField,\n },\n defaultProps: { title: \"Panel\", tone: \"primary\", content: [], buttonLabel: \"\", buttonHref: \"\", className: \"\" },\n render: ({ title, tone, content: Content, buttonLabel, buttonHref, className }) => {\n const part = useParts();\n return (\n <div\n className={part(\n \"gf-panel\",\n \"flex h-full flex-col overflow-hidden rounded-md bg-background text-foreground shadow-md\",\n className,\n )}\n >\n {title && (\n <h2\n className={part(\"gf-panel-title\", [\n \"px-4 py-3 text-center font-heading text-2xl font-semibold\",\n titleClasses[tone],\n ])}\n >\n {title}\n </h2>\n )}\n <Content className={part(\"gf-panel-content\", \"flex-1 p-5\")} />\n {buttonLabel && buttonHref && (\n <div className={part(\"gf-panel-foot\", \"px-5 pb-5 text-center\")}>\n <SiteLink\n href={buttonHref}\n className={part(\"gf-panel-button\", [\n \"inline-block rounded-md px-5 py-2 text-sm font-semibold hover:opacity-90\",\n buttonClasses[tone],\n ])}\n >\n {buttonLabel}\n </SiteLink>\n </div>\n )}\n </div>\n );\n },\n },\n {\n \"gf-panel\": \"Panel\",\n \"gf-panel-title\": \"Title bar\",\n \"gf-panel-content\": \"Content\",\n \"gf-panel-foot\": \"Foot\",\n \"gf-panel-button\": \"Button\",\n },\n);\n\nexport default withKeywords(Panel, [\"panel\", \"box\", \"card\", \"title bar\", \"sidebar\"]);\n"
12
+ }
13
+ ],
14
+ "meta": {
15
+ "goodfellow": {
16
+ "category": "Page sections",
17
+ "version": "0.7.0"
18
+ }
19
+ },
20
+ "dependencies": []
21
+ }
package/r/registry.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "goodfellow": {
22
22
  "category": "Page sections",
23
23
  "recommended": true,
24
- "version": "0.6.0"
24
+ "version": "0.7.0"
25
25
  }
26
26
  },
27
27
  "dependencies": []
@@ -45,7 +45,7 @@
45
45
  "goodfellow": {
46
46
  "category": "Page sections",
47
47
  "recommended": true,
48
- "version": "0.6.0"
48
+ "version": "0.7.0"
49
49
  }
50
50
  },
51
51
  "dependencies": []
@@ -69,7 +69,7 @@
69
69
  "goodfellow": {
70
70
  "category": "Page sections",
71
71
  "recommended": true,
72
- "version": "0.6.0"
72
+ "version": "0.7.0"
73
73
  }
74
74
  },
75
75
  "dependencies": []
@@ -92,7 +92,7 @@
92
92
  "goodfellow": {
93
93
  "category": "Page sections",
94
94
  "recommended": true,
95
- "version": "0.6.0"
95
+ "version": "0.7.0"
96
96
  }
97
97
  },
98
98
  "dependencies": []
@@ -119,7 +119,7 @@
119
119
  "meta": {
120
120
  "goodfellow": {
121
121
  "category": "Page sections",
122
- "version": "0.6.0"
122
+ "version": "0.7.0"
123
123
  }
124
124
  }
125
125
  },
@@ -144,10 +144,128 @@
144
144
  "goodfellow": {
145
145
  "category": "Page sections",
146
146
  "recommended": true,
147
- "version": "0.6.0"
147
+ "version": "0.7.0"
148
148
  }
149
149
  }
150
150
  },
151
+ {
152
+ "name": "feed-list",
153
+ "type": "registry:block",
154
+ "title": "News feed",
155
+ "description": "The latest items of another site's RSS or Atom feed, read when the site is built: titles linking to them, with optional dates.",
156
+ "files": [
157
+ {
158
+ "path": "blocks/installed/feed-list/block.tsx",
159
+ "type": "registry:block"
160
+ }
161
+ ],
162
+ "meta": {
163
+ "goodfellow": {
164
+ "category": "Page sections",
165
+ "version": "0.7.0"
166
+ }
167
+ },
168
+ "dependencies": []
169
+ },
170
+ {
171
+ "name": "map",
172
+ "type": "registry:block",
173
+ "title": "Map",
174
+ "description": "A Google map of an address or place, or one from Google Maps' embed code. No API key needed.",
175
+ "files": [
176
+ {
177
+ "path": "blocks/installed/map/block.tsx",
178
+ "type": "registry:block"
179
+ }
180
+ ],
181
+ "meta": {
182
+ "goodfellow": {
183
+ "category": "Page sections",
184
+ "version": "0.7.0"
185
+ }
186
+ },
187
+ "dependencies": []
188
+ },
189
+ {
190
+ "name": "social-links",
191
+ "type": "registry:block",
192
+ "title": "Social links",
193
+ "description": "Links to social networks, each shown as the network's mark in the text's color.",
194
+ "files": [
195
+ {
196
+ "path": "blocks/installed/social-links/block.tsx",
197
+ "type": "registry:block"
198
+ }
199
+ ],
200
+ "meta": {
201
+ "goodfellow": {
202
+ "category": "Page sections",
203
+ "version": "0.7.0"
204
+ }
205
+ },
206
+ "dependencies": []
207
+ },
208
+ {
209
+ "name": "panel",
210
+ "type": "registry:block",
211
+ "title": "Panel",
212
+ "description": "A box with its title in a colored bar, other blocks inside it, and an optional button at its foot.",
213
+ "files": [
214
+ {
215
+ "path": "blocks/installed/panel/block.tsx",
216
+ "type": "registry:block"
217
+ }
218
+ ],
219
+ "meta": {
220
+ "goodfellow": {
221
+ "category": "Page sections",
222
+ "version": "0.7.0"
223
+ }
224
+ },
225
+ "dependencies": []
226
+ },
227
+ {
228
+ "name": "slideshow-hero",
229
+ "type": "registry:block",
230
+ "title": "Slideshow with quick links",
231
+ "description": "Full-width pictures that fade from one to the next, with a badge and a column of quick links over them.",
232
+ "files": [
233
+ {
234
+ "path": "blocks/installed/slideshow-hero/block.tsx",
235
+ "type": "registry:block"
236
+ },
237
+ {
238
+ "path": "blocks/installed/slideshow-hero/slideshow-pictures.tsx",
239
+ "type": "registry:component"
240
+ }
241
+ ],
242
+ "meta": {
243
+ "goodfellow": {
244
+ "category": "Interactive",
245
+ "version": "0.7.0"
246
+ }
247
+ },
248
+ "dependencies": []
249
+ },
250
+ {
251
+ "name": "section-links",
252
+ "type": "registry:block",
253
+ "title": "Content with section links",
254
+ "description": "A page's blocks with a sidebar of links to the other pages in its part of the menu.",
255
+ "files": [
256
+ {
257
+ "path": "blocks/installed/section-links/block.tsx",
258
+ "type": "registry:block"
259
+ }
260
+ ],
261
+ "meta": {
262
+ "goodfellow": {
263
+ "category": "Navigation",
264
+ "version": "0.7.0"
265
+ }
266
+ },
267
+ "dependencies": []
268
+ },
151
269
  {
152
270
  "name": "custom-html",
153
271
  "type": "registry:block",
@@ -170,7 +288,7 @@
170
288
  "meta": {
171
289
  "goodfellow": {
172
290
  "category": "Advanced",
173
- "version": "0.6.0"
291
+ "version": "0.7.0"
174
292
  }
175
293
  },
176
294
  "dependencies": []
@@ -197,7 +315,7 @@
197
315
  "goodfellow": {
198
316
  "category": "Interactive",
199
317
  "recommended": true,
200
- "version": "0.6.0"
318
+ "version": "0.7.0"
201
319
  }
202
320
  },
203
321
  "dependencies": []
@@ -224,7 +342,7 @@
224
342
  "goodfellow": {
225
343
  "category": "Interactive",
226
344
  "recommended": true,
227
- "version": "0.6.0"
345
+ "version": "0.7.0"
228
346
  }
229
347
  },
230
348
  "dependencies": []
@@ -250,7 +368,7 @@
250
368
  "meta": {
251
369
  "goodfellow": {
252
370
  "category": "Interactive",
253
- "version": "0.6.0"
371
+ "version": "0.7.0"
254
372
  }
255
373
  },
256
374
  "dependencies": []
@@ -0,0 +1,21 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "section-links",
4
+ "type": "registry:block",
5
+ "title": "Content with section links",
6
+ "description": "A page's blocks with a sidebar of links to the other pages in its part of the menu.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/section-links/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import { pageTree } from \"@goodfellow-cms/core\";\nimport { classNameField, SiteLink, useParts, useSite, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig, Slot } from \"@puckeditor/core\";\n\nexport interface SectionLinksProps {\n content: Slot;\n menu: string;\n section: string;\n side: \"right\" | \"left\";\n className: string;\n}\n\ninterface MenuLink {\n label: string;\n href: string;\n children?: MenuLink[];\n}\n\n/** Whether `href` is the page at `path`, or a section it's in. */\nfunction isCurrent(href: string, path: string): boolean {\n if (!href.startsWith(\"/\")) return false;\n return href === \"/\" ? path === \"/\" : path === href || path.startsWith(`${href}/`);\n}\n\n/**\n * The page's own blocks, with links beside them to the other pages in its part of the menu: the\n * top-level item it's under, and that item's submenu. On a page under one of those, such as one\n * ministry under \"Ministries\", the pages beside it instead. On a collection item's page, it can\n * show the links as if on another page, such as the list of news.\n */\nconst SectionLinks: ComponentConfig<SectionLinksProps> = withParts(\n {\n label: \"Content with section links\",\n fields: {\n content: { type: \"slot\" },\n menu: { type: \"text\", label: \"Menu the links come from\" },\n section: {\n type: \"text\",\n label: \"Show the links as if on this page (leave empty for the page itself)\",\n placeholder: \"/news\",\n },\n side: {\n type: \"radio\",\n label: \"Links' side\",\n options: [\n { value: \"right\", label: \"Right\" },\n { value: \"left\", label: \"Left\" },\n ],\n },\n className: classNameField,\n },\n defaultProps: { content: [], menu: \"main\", section: \"\", side: \"right\", className: \"\" },\n render: ({ content: Content, menu, section, side, className }) => {\n const { menus, path, pages = [] } = useSite();\n const part = useParts();\n const at = section.trim() || path;\n const top = ((menus[menu] ?? []) as MenuLink[]).find(\n (item) => isCurrent(item.href, at) || item.children?.some((child) => isCurrent(child.href, at)),\n );\n const parent = top?.children?.find((child) => at.startsWith(`${child.href}/`));\n // The pages directly under the submenu page the page is under, such as one ministry's.\n const subpages = parent && parent.href !== \"/\" ? pageTree(pages, parent.href) : [];\n const links =\n parent && subpages.length > 0\n ? subpages.map((page) => ({ label: page.title, href: page.path }))\n : (top?.children ?? []).map((child) => ({ label: child.label, href: child.href }));\n return (\n <div\n className={part(\n \"gf-section-links\",\n [\n \"grid items-start gap-10\",\n side === \"left\" ? \"md:grid-cols-[16rem_minmax(0,1fr)]\" : \"md:grid-cols-[minmax(0,1fr)_16rem]\",\n ],\n className,\n )}\n >\n <Content className={part(\"gf-section-links-content\", [\"min-w-0\", side === \"left\" && \"md:order-2\"])} />\n {links.length > 0 && (\n <nav\n aria-label={parent?.label ?? top?.label ?? menu}\n className={side === \"left\" ? \"md:order-1\" : undefined}\n >\n <ul\n className={part(\n \"gf-section-links-list\",\n \"divide-y divide-primary-foreground/20 overflow-hidden rounded-md bg-primary text-primary-foreground shadow-md\",\n )}\n >\n {links.map((link) => {\n const current = link.href === at || (link.href !== \"/\" && path.startsWith(`${link.href}/`));\n return (\n <li key={`${link.label}-${link.href}`}>\n <SiteLink\n href={link.href}\n aria-current={link.href === path ? \"page\" : undefined}\n data-current={current ? \"\" : undefined}\n className={part(\n \"gf-section-links-link\",\n \"block px-4 py-3 hover:bg-secondary hover:text-secondary-foreground data-current:bg-secondary data-current:text-secondary-foreground\",\n )}\n >\n {link.label}\n </SiteLink>\n </li>\n );\n })}\n </ul>\n </nav>\n )}\n </div>\n );\n },\n },\n {\n \"gf-section-links\": \"Layout\",\n \"gf-section-links-content\": \"Content\",\n \"gf-section-links-list\": \"Links\",\n \"gf-section-links-link\": \"Link\",\n },\n);\n\nexport default withKeywords(SectionLinks, [\"sidebar\", \"section\", \"subpages\", \"navigation\", \"submenu\"]);\n"
12
+ }
13
+ ],
14
+ "meta": {
15
+ "goodfellow": {
16
+ "category": "Navigation",
17
+ "version": "0.7.0"
18
+ }
19
+ },
20
+ "dependencies": []
21
+ }
@@ -19,7 +19,7 @@
19
19
  "goodfellow": {
20
20
  "category": "Page sections",
21
21
  "recommended": true,
22
- "version": "0.6.0"
22
+ "version": "0.7.0"
23
23
  }
24
24
  },
25
25
  "dependencies": []
@@ -19,7 +19,7 @@
19
19
  "goodfellow": {
20
20
  "category": "Page sections",
21
21
  "recommended": true,
22
- "version": "0.6.0"
22
+ "version": "0.7.0"
23
23
  }
24
24
  },
25
25
  "dependencies": []
@@ -22,7 +22,7 @@
22
22
  "meta": {
23
23
  "goodfellow": {
24
24
  "category": "Interactive",
25
- "version": "0.6.0"
25
+ "version": "0.7.0"
26
26
  }
27
27
  },
28
28
  "dependencies": []
package/r/shadcn-faq.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "goodfellow": {
24
24
  "category": "Interactive",
25
25
  "recommended": true,
26
- "version": "0.6.0"
26
+ "version": "0.7.0"
27
27
  }
28
28
  },
29
29
  "dependencies": []
@@ -18,7 +18,7 @@
18
18
  "goodfellow": {
19
19
  "category": "Page sections",
20
20
  "recommended": true,
21
- "version": "0.6.0"
21
+ "version": "0.7.0"
22
22
  }
23
23
  },
24
24
  "dependencies": []
@@ -21,7 +21,7 @@
21
21
  "goodfellow": {
22
22
  "category": "Page sections",
23
23
  "recommended": true,
24
- "version": "0.6.0"
24
+ "version": "0.7.0"
25
25
  }
26
26
  }
27
27
  }
@@ -22,7 +22,7 @@
22
22
  "meta": {
23
23
  "goodfellow": {
24
24
  "category": "Page sections",
25
- "version": "0.6.0"
25
+ "version": "0.7.0"
26
26
  }
27
27
  }
28
28
  }
@@ -23,7 +23,7 @@
23
23
  "goodfellow": {
24
24
  "category": "Interactive",
25
25
  "recommended": true,
26
- "version": "0.6.0"
26
+ "version": "0.7.0"
27
27
  }
28
28
  },
29
29
  "dependencies": []
@@ -18,7 +18,7 @@
18
18
  "goodfellow": {
19
19
  "category": "Page sections",
20
20
  "recommended": true,
21
- "version": "0.6.0"
21
+ "version": "0.7.0"
22
22
  }
23
23
  },
24
24
  "dependencies": []
@@ -0,0 +1,26 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "slideshow-hero",
4
+ "type": "registry:block",
5
+ "title": "Slideshow with quick links",
6
+ "description": "Full-width pictures that fade from one to the next, with a badge and a column of quick links over them.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/slideshow-hero/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import {\n classNameField,\n mediaField,\n SiteImage,\n SiteLink,\n useParts,\n withKeywords,\n withParts,\n} from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { SlideshowPictures } from \"./slideshow-pictures\";\n\ninterface Slide {\n image: string;\n alt: string;\n}\n\ninterface QuickLink {\n label: string;\n href: string;\n}\n\nexport interface SlideshowHeroProps {\n slides: Slide[];\n seconds: number;\n badge: string;\n badgeAlt: string;\n links: QuickLink[];\n /** Words for the pause button and the dots, which screen readers say. */\n words: { pause: string; play: string; picture: string };\n className: string;\n}\n\n/**\n * The top of a home page: pictures that fade from one to the next across the full width, with a\n * badge (such as a logo) and a column of quick links beside them. It changes pictures on its own\n * unless the visitor asks for less motion, stops while the pointer or the keyboard is in it, and\n * has a button to stop it.\n */\nconst SlideshowHero: ComponentConfig<SlideshowHeroProps> = withParts(\n {\n label: \"Slideshow with quick links\",\n fields: {\n slides: {\n type: \"array\",\n label: \"Pictures\",\n arrayFields: {\n image: mediaField(\"Picture\"),\n alt: { type: \"text\", label: \"Description for screen readers\" },\n },\n defaultItemProps: { image: \"\", alt: \"\" },\n getItemSummary: (slide, index) => slide.alt || `Picture ${(index ?? 0) + 1}`,\n },\n seconds: { type: \"number\", label: \"Seconds each picture shows\", min: 2, max: 30 },\n badge: mediaField(\"Badge above the links (optional)\"),\n badgeAlt: { type: \"text\", label: \"Badge's description for screen readers\" },\n links: {\n type: \"array\",\n label: \"Quick links\",\n arrayFields: {\n label: { type: \"text\", label: \"Label\" },\n href: { type: \"text\", label: \"Links to\" },\n },\n defaultItemProps: { label: \"New link\", href: \"/\" },\n getItemSummary: (link) => link.label || \"New link\",\n },\n words: {\n type: \"object\",\n label: \"Words on the buttons\",\n objectFields: {\n pause: { type: \"text\", label: \"Stop button\" },\n play: { type: \"text\", label: \"Start button\" },\n picture: { type: \"text\", label: \"Each dot, for screen readers, before its number\" },\n },\n },\n className: classNameField,\n },\n defaultProps: {\n slides: [],\n seconds: 6,\n badge: \"\",\n badgeAlt: \"\",\n links: [],\n words: { pause: \"Pause\", play: \"Play\", picture: \"Show picture\" },\n className: \"\",\n },\n render: ({ slides, seconds, badge, badgeAlt, links, words, className }) => {\n const part = useParts();\n const shown = slides.filter((slide) => slide.image);\n return (\n <section className={part(\"gf-slideshow-hero\", \"relative isolate overflow-hidden bg-primary\", className)}>\n {shown.length > 0 && (\n <SlideshowPictures\n slides={shown}\n seconds={seconds}\n words={{\n pause: words.pause || \"Pause\",\n play: words.play || \"Play\",\n picture: words.picture || \"Show picture\",\n }}\n classes={{\n picture: part(\n \"gf-slideshow-hero-picture\",\n \"absolute inset-0 h-full w-full object-cover transition-opacity duration-1000\",\n ),\n controls: part(\"gf-slideshow-hero-dots\", \"absolute bottom-4 left-4 z-10 flex items-center gap-2\"),\n dot: part(\"gf-slideshow-hero-dot\", \"size-3.5 rounded-full border border-white/80\"),\n pause: part(\n \"gf-slideshow-hero-pause\",\n \"mr-1 rounded-full bg-black/60 px-3 py-1 text-sm text-white hover:bg-black/80\",\n ),\n }}\n />\n )}\n <div\n className={part(\n \"gf-slideshow-hero-inner\",\n \"relative mx-auto flex min-h-[22rem] max-w-7xl items-center justify-end px-4 py-8 md:min-h-[28rem]\",\n )}\n >\n {(badge || links.length > 0) && (\n <div\n className={part(\"gf-slideshow-hero-links\", \"relative z-10 flex w-full max-w-xs flex-col gap-2 md:mr-4\")}\n >\n {badge && (\n <div className={part(\"gf-slideshow-hero-badge\", \"bg-primary/90 px-6 py-4\")}>\n <SiteImage\n src={badge}\n alt={badgeAlt}\n aria-hidden={badgeAlt ? undefined : true}\n className=\"mx-auto max-h-28 w-auto\"\n />\n </div>\n )}\n {links.map((link, index) => (\n <SiteLink\n // biome-ignore lint/suspicious/noArrayIndexKey: links have no ids of their own\n key={index}\n href={link.href}\n className={part(\n \"gf-slideshow-hero-link\",\n \"bg-primary/90 px-4 py-2.5 text-center text-lg text-primary-foreground shadow transition-colors hover:bg-secondary hover:text-secondary-foreground\",\n )}\n >\n {link.label}\n </SiteLink>\n ))}\n </div>\n )}\n </div>\n </section>\n );\n },\n },\n {\n \"gf-slideshow-hero\": \"Slideshow\",\n \"gf-slideshow-hero-picture\": \"Picture\",\n \"gf-slideshow-hero-dots\": \"Dots and stop button\",\n \"gf-slideshow-hero-dot\": \"Dot\",\n \"gf-slideshow-hero-pause\": \"Stop button\",\n \"gf-slideshow-hero-inner\": \"Inner area\",\n \"gf-slideshow-hero-links\": \"Badge and links\",\n \"gf-slideshow-hero-badge\": \"Badge\",\n \"gf-slideshow-hero-link\": \"Quick link\",\n },\n);\n\nexport default withKeywords(SlideshowHero, [\"slideshow\", \"slider\", \"hero\", \"banner\", \"quick links\", \"pictures\"]);\n"
12
+ },
13
+ {
14
+ "path": "blocks/installed/slideshow-hero/slideshow-pictures.tsx",
15
+ "type": "registry:component",
16
+ "content": "\"use client\";\n\nimport { SiteImage } from \"@goodfellow-cms/react\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * The pictures, fading from one to the next every few seconds, with a dot for\n * each and a button that stops them. They stop while the pointer is over them\n * or the keyboard is in them, and don't change by themselves at all for\n * visitors who ask for less motion.\n */\nexport function SlideshowPictures({\n slides,\n seconds,\n words,\n classes,\n}: {\n slides: Array<{ image: string; alt: string }>;\n seconds: number;\n words: { pause: string; play: string; picture: string };\n classes: { picture: string; controls: string; dot: string; pause: string };\n}) {\n const [shown, setShown] = useState(0);\n const [hovered, setHovered] = useState(false);\n const [stopped, setStopped] = useState(false);\n const [still, setStill] = useState(false);\n\n useEffect(() => {\n const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n setStill(query.matches);\n const changed = () => setStill(query.matches);\n query.addEventListener(\"change\", changed);\n return () => query.removeEventListener(\"change\", changed);\n }, []);\n\n const moving = slides.length > 1 && !still && !stopped;\n useEffect(() => {\n if (!moving || hovered) return;\n const timer = window.setInterval(\n () => setShown((index) => (index + 1) % slides.length),\n Math.max(2, seconds) * 1000,\n );\n return () => window.clearInterval(timer);\n }, [moving, hovered, slides.length, seconds]);\n\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: it only notices the pointer and the keyboard in it, to stop the pictures; its buttons are what visitors use\n <div\n className=\"absolute inset-0\"\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n onFocus={() => setHovered(true)}\n onBlur={() => setHovered(false)}\n >\n {slides.map((slide, index) => (\n <SiteImage\n // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n key={index}\n src={slide.image}\n alt={index === shown ? slide.alt : \"\"}\n // Pictures not shown, and ones without a description, are only there to look at.\n aria-hidden={index === shown && slide.alt ? undefined : true}\n className={`${classes.picture} ${index === shown ? \"opacity-100\" : \"opacity-0\"}`}\n />\n ))}\n {slides.length > 1 && (\n <div className={classes.controls}>\n {!still && (\n <button type=\"button\" onClick={() => setStopped(!stopped)} className={classes.pause}>\n {stopped ? words.play : words.pause}\n </button>\n )}\n {slides.map((slide, index) => (\n <button\n // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n key={index}\n type=\"button\"\n aria-label={`${words.picture} ${index + 1}${slide.alt ? `: ${slide.alt}` : \"\"}`}\n aria-current={index === shown}\n onClick={() => setShown(index)}\n className={`${classes.dot} ${index === shown ? \"bg-white\" : \"bg-black/50 hover:bg-white/70\"}`}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"
17
+ }
18
+ ],
19
+ "meta": {
20
+ "goodfellow": {
21
+ "category": "Interactive",
22
+ "version": "0.7.0"
23
+ }
24
+ },
25
+ "dependencies": []
26
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
3
+ "name": "social-links",
4
+ "type": "registry:block",
5
+ "title": "Social links",
6
+ "description": "Links to social networks, each shown as the network's mark in the text's color.",
7
+ "files": [
8
+ {
9
+ "path": "blocks/installed/social-links/block.tsx",
10
+ "type": "registry:block",
11
+ "content": "import { classNameField, SiteLink, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\ntype Network = \"facebook\" | \"instagram\" | \"youtube\" | \"x\";\n\ninterface SocialLink {\n network: Network;\n href: string;\n}\n\nexport interface SocialLinksProps {\n links: SocialLink[];\n size: \"sm\" | \"md\" | \"lg\";\n className: string;\n}\n\nconst names: Record<Network, string> = { facebook: \"Facebook\", instagram: \"Instagram\", youtube: \"YouTube\", x: \"X\" };\n\n/** Each network's mark, drawn in the text's color on a 24 by 24 grid. */\nconst paths: Record<Network, string> = {\n facebook:\n \"M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07\",\n instagram:\n \"M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85C2.38 3.92 3.9 2.38 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0m0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32M12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8m6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88\",\n youtube:\n \"M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81M9.55 15.57V8.43L15.82 12z\",\n x: \"M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.4l-5.8-7.58-6.63 7.58H.48l8.6-9.83L0 1.15h7.59l5.24 6.93zm-1.29 19.5h2.04L6.48 3.24H4.3z\",\n};\n\nconst sizeClasses: Record<SocialLinksProps[\"size\"], string> = { sm: \"size-5\", md: \"size-6\", lg: \"size-8\" };\n\n/** Links to the site's pages on social networks, each shown as the network's mark, in the text's color. */\nconst SocialLinks: ComponentConfig<SocialLinksProps> = withParts(\n {\n label: \"Social links\",\n fields: {\n links: {\n type: \"array\",\n label: \"Links\",\n arrayFields: {\n network: {\n type: \"select\",\n label: \"Network\",\n options: (Object.keys(names) as Network[]).map((value) => ({ value, label: names[value] })),\n },\n href: { type: \"text\", label: \"Address of the page\", placeholder: \"https://www.facebook.com/…\" },\n },\n defaultItemProps: { network: \"facebook\", href: \"\" },\n getItemSummary: (link) => names[link.network] ?? \"New link\",\n },\n size: {\n type: \"radio\",\n label: \"Size\",\n options: [\n { value: \"sm\", label: \"Small\" },\n { value: \"md\", label: \"Medium\" },\n { value: \"lg\", label: \"Large\" },\n ],\n },\n className: classNameField,\n },\n defaultProps: { links: [], size: \"md\", className: \"\" },\n render: ({ links, size, className }) => {\n const part = useParts();\n return (\n <ul className={part(\"gf-social-links\", \"flex flex-wrap items-center gap-3\", className)}>\n {links\n .filter((link) => link.href && paths[link.network])\n .map((link, index) => (\n // biome-ignore lint/suspicious/noArrayIndexKey: links have no ids of their own\n <li key={index}>\n <SiteLink\n href={link.href}\n className={part(\"gf-social-links-link\", \"block opacity-90 transition-opacity hover:opacity-100\")}\n >\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className={sizeClasses[size]}>\n <path d={paths[link.network]} />\n </svg>\n <span className=\"sr-only\">{names[link.network]}</span>\n </SiteLink>\n </li>\n ))}\n </ul>\n );\n },\n },\n { \"gf-social-links\": \"Social links\", \"gf-social-links-link\": \"Link\" },\n);\n\nexport default withKeywords(SocialLinks, [\"social\", \"facebook\", \"instagram\", \"youtube\", \"x\", \"twitter\", \"icons\"]);\n"
12
+ }
13
+ ],
14
+ "meta": {
15
+ "goodfellow": {
16
+ "category": "Page sections",
17
+ "version": "0.7.0"
18
+ }
19
+ },
20
+ "dependencies": []
21
+ }