1/**
2 * ArticleImage component generates and displays an image for an article title.
3 * If the title contains a version number (e.g., "v1.2.3", "v1.0-rc.1", "v1.0.3-rc.4"),
4 * it will be extracted and combined with "Spice.ai" prefix.
5 *
6 * @example
7 * // Basic usage
8 * <ArticleImage title="Regular Article Title" />
9 * // Output: renders image with full title
10 *
11 * @example
12 * // With version number
13 * <ArticleImage title="Release Notes v1.2.3-beta" />
14 * // Output: renders image with "Spice.ai v1.2.3-beta"
15 *
16 * @example
17 * // With release candidate version
18 * <ArticleImage title="Release Notes v1.0-rc.1" />
19 * // Output: renders image with "Spice.ai v1.0-rc.1"
20 *
21 * @component
22 */
23
24interface ArticleImageProps {
25  /** The title of the article */
26  title: string
27}
28
29export const ArticleImage = ({ title }: ArticleImageProps) => {
30  const versionRegex = /v\d+(\.\d+)*(-[a-zA-Z]+(\.\d+)*)?/
31  const match = title.match(versionRegex)
32  const shortTitle = match ? 'Spice ' + match[0] : title
33
34  const imageUrl = `/generate-image?title=${encodeURIComponent(shortTitle)}`
35
36  return (
37    <img
38      src={imageUrl}
39      alt={title}
40      width={600}
41      height={400}
42      className='w-full overflow-hidden rounded-[4px]'
43    />
44  )
45}
46

1/**
2 * ArticleImage component generates and displays an image for an article title.
3 * If the title contains a version number (e.g., "v1.2.3", "v1.0-rc.1", "v1.0.3-rc.4"),
4 * it will be extracted and combined with "Spice.ai" prefix.
5 *
6 * @example
7 * // Basic usage
8 * <ArticleImage title="Regular Article Title" />
9 * // Output: renders image with full title
10 *
11 * @example
12 * // With version number
13 * <ArticleImage title="Release Notes v1.2.3-beta" />
14 * // Output: renders image with "Spice.ai v1.2.3-beta"
15 *
16 * @example
17 * // With release candidate version
18 * <ArticleImage title="Release Notes v1.0-rc.1" />
19 * // Output: renders image with "Spice.ai v1.0-rc.1"
20 *
21 * @component
22 */
23
24interface ArticleImageProps {
25  /** The title of the article */
26  title: string
27}
28
29export const ArticleImage = ({ title }: ArticleImageProps) => {
30  const versionRegex = /v\d+(\.\d+)*(-[a-zA-Z]+(\.\d+)*)?/
31  const match = title.match(versionRegex)
32  const shortTitle = match ? 'Spice ' + match[0] : title
33
34  const imageUrl = `/generate-image?title=${encodeURIComponent(shortTitle)}`
35
36  return (
37    <img
38      src={imageUrl}
39      alt={title}
40      width={600}
41      height={400}
42      className='w-full overflow-hidden rounded-[4px]'
43    />
44  )
45}
46