diff --git a/.changeset/responsive-image-formats.md b/.changeset/responsive-image-formats.md new file mode 100644 index 000000000..ade56e0cc --- /dev/null +++ b/.changeset/responsive-image-formats.md @@ -0,0 +1,5 @@ +--- +"fulldev-ui": minor +--- + +Add an optional Image component with Astro Picture formats, responsive sources and an unchanged single-image default. diff --git a/public/_redirects b/public/_redirects index 836a14d39..2503103da 100644 --- a/public/_redirects +++ b/public/_redirects @@ -229,12 +229,11 @@ /blocks/pricings/ /blocks/pricing/ 301! /docs/components/auto-form/ /components/form/ 301! -/docs/components/image/ /components/ 301! +/docs/components/image/ /components/image/ 301! /docs/components/list/ /components/typography/ 301! /docs/components/ /components/ 301! /docs/components/* /components/:splat 301! /components/gradient/ /components/ 301! -/components/image/ /components/ 301! /components/tile/ /components/ 301! /docs/cli/ /docs/installation/ 301! diff --git a/public/og/components/image.jpg b/public/og/components/image.jpg new file mode 100644 index 000000000..fbba0d43d Binary files /dev/null and b/public/og/components/image.jpg differ diff --git a/public/r/styles/base-luma/components.json b/public/r/styles/base-luma/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-luma/components.json +++ b/public/r/styles/base-luma/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-luma/image.json b/public/r/styles/base-luma/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-luma/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json index c66ac6f6b..ee42214e2 100644 --- a/public/r/styles/base-luma/registry.json +++ b/public/r/styles/base-luma/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-lyra/components.json b/public/r/styles/base-lyra/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-lyra/components.json +++ b/public/r/styles/base-lyra/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-lyra/image.json b/public/r/styles/base-lyra/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-lyra/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json index 9d98fb6d3..5f4f21362 100644 --- a/public/r/styles/base-lyra/registry.json +++ b/public/r/styles/base-lyra/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-maia/components.json b/public/r/styles/base-maia/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-maia/components.json +++ b/public/r/styles/base-maia/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-maia/image.json b/public/r/styles/base-maia/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-maia/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json index 5a5716564..c2bb2bef2 100644 --- a/public/r/styles/base-maia/registry.json +++ b/public/r/styles/base-maia/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-mira/components.json b/public/r/styles/base-mira/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-mira/components.json +++ b/public/r/styles/base-mira/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-mira/image.json b/public/r/styles/base-mira/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-mira/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json index 074155b04..d36fc2bf9 100644 --- a/public/r/styles/base-mira/registry.json +++ b/public/r/styles/base-mira/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-nova/components.json b/public/r/styles/base-nova/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-nova/components.json +++ b/public/r/styles/base-nova/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-nova/image.json b/public/r/styles/base-nova/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-nova/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json index fb5ad8eef..c2520628b 100644 --- a/public/r/styles/base-nova/registry.json +++ b/public/r/styles/base-nova/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-rhea/components.json b/public/r/styles/base-rhea/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-rhea/components.json +++ b/public/r/styles/base-rhea/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-rhea/image.json b/public/r/styles/base-rhea/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-rhea/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json index 449fec7da..1d9d85ac5 100644 --- a/public/r/styles/base-rhea/registry.json +++ b/public/r/styles/base-rhea/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-sera/components.json b/public/r/styles/base-sera/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-sera/components.json +++ b/public/r/styles/base-sera/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-sera/image.json b/public/r/styles/base-sera/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-sera/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json index c9a410e5a..1ee79fae1 100644 --- a/public/r/styles/base-sera/registry.json +++ b/public/r/styles/base-sera/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-vega/components.json b/public/r/styles/base-vega/components.json index e0f9f98bf..deba8a378 100644 --- a/public/r/styles/base-vega/components.json +++ b/public/r/styles/base-vega/components.json @@ -31,6 +31,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/public/r/styles/base-vega/image.json b/public/r/styles/base-vega/image.json new file mode 100644 index 000000000..37a01426b --- /dev/null +++ b/public/r/styles/base-vega/image.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "image", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial> & {\n inferSize?: boolean\n}\n\nconst {\n class: className,\n alt,\n src,\n inferSize = true,\n formats,\n fallbackFormat,\n pictureAttributes,\n ...props\n} = Astro.props\n\nconst imageProps = {\n ...props,\n src,\n alt: alt ?? \"\",\n class: cn(\"h-auto w-full\", className),\n inferSize,\n} as ComponentProps\nconst pictureProps = {\n ...imageProps,\n formats,\n fallbackFormat,\n pictureAttributes: {\n ...pictureAttributes,\n class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n },\n} as ComponentProps\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && }\n{src && !usePicture && }\n", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "content": "export { default as Image } from \"./image.astro\"\n", + "type": "registry:ui" + } + ], + "docs": "https://ui.full.dev/components/image/", + "categories": [ + "ui" + ], + "type": "registry:ui" +} \ No newline at end of file diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json index 559395d8c..19cd0846d 100644 --- a/public/r/styles/base-vega/registry.json +++ b/public/r/styles/base-vega/registry.json @@ -919,6 +919,26 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": [ + "ui" + ], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2547,6 +2567,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/registry.json b/registry.json index 546872bab..4298d8a31 100644 --- a/registry.json +++ b/registry.json @@ -834,6 +834,24 @@ } ] }, + { + "name": "image", + "type": "registry:ui", + "title": "Image", + "description": "An optional image with responsive picture formats for existing Astro blocks.", + "categories": ["ui"], + "docs": "https://ui.full.dev/components/image/", + "files": [ + { + "path": "src/components/ui/image/image.astro", + "type": "registry:ui" + }, + { + "path": "src/components/ui/image/index.ts", + "type": "registry:ui" + } + ] + }, { "name": "input", "type": "registry:ui", @@ -2309,6 +2327,7 @@ "@fulldev/header", "@fulldev/hover-card", "@fulldev/icon", + "@fulldev/image", "@fulldev/input", "@fulldev/input-group", "@fulldev/item", diff --git a/src/components/ui/image/image.astro b/src/components/ui/image/image.astro new file mode 100644 index 000000000..3c0cc39cd --- /dev/null +++ b/src/components/ui/image/image.astro @@ -0,0 +1,42 @@ +--- +import { Image as AstroImage, Picture as AstroPicture } from "astro:assets" +import type { ComponentProps } from "astro/types" + +import { cn } from "@/lib/utils" + +type Props = Partial> & { + inferSize?: boolean +} + +const { + class: className, + alt, + src, + inferSize = true, + formats, + fallbackFormat, + pictureAttributes, + ...props +} = Astro.props + +const imageProps = { + ...props, + src, + alt: alt ?? "", + class: cn("h-auto w-full", className), + inferSize, +} as ComponentProps +const pictureProps = { + ...imageProps, + formats, + fallbackFormat, + pictureAttributes: { + ...pictureAttributes, + class: cn("contents [&>source]:hidden", pictureAttributes?.class), + }, +} as ComponentProps +const usePicture = !!formats?.length +--- + +{src && usePicture && } +{src && !usePicture && } diff --git a/src/components/ui/image/index.ts b/src/components/ui/image/index.ts new file mode 100644 index 000000000..53d622f23 --- /dev/null +++ b/src/components/ui/image/index.ts @@ -0,0 +1 @@ +export { default as Image } from "./image.astro" diff --git a/src/content/globals/en.yaml b/src/content/globals/en.yaml index 67b409738..817439832 100644 --- a/src/content/globals/en.yaml +++ b/src/content/globals/en.yaml @@ -100,6 +100,8 @@ sidebar: href: /components/hover-card/ - label: Icon href: /components/icon/ + - label: Image + href: /components/image/ - label: Input Group href: /components/input-group/ - label: Input diff --git a/src/content/pages/components/image.mdx b/src/content/pages/components/image.mdx new file mode 100644 index 000000000..f0391d641 --- /dev/null +++ b/src/content/pages/components/image.mdx @@ -0,0 +1,43 @@ +--- +type: doc +title: Image +description: An optional image with responsive picture formats for existing Astro blocks. +--- + +## Installation + +```bash +npx shadcn@latest add @fulldev/image +``` + +## Usage + +```astro +--- +import { Image } from "@/components/ui/image" +import photo from "@/assets/photo.webp" +--- + +The team at work +``` + +Without `formats`, the component renders Astro's `Image`. With `formats`, it +renders Astro's `Picture`, keeping the image's classes and attributes. Choose +widths and sizes for the rendered image. Leave SVGs and animated images in their +original format. + +The picture wrapper uses `display: contents`. It still changes DOM ancestry: +check direct-child CSS selectors when adding formats to an existing block. + +## API Reference + +The component accepts Astro `Image` props, plus `formats`, `fallbackFormat` and +`pictureAttributes` from Astro `Picture`. A missing `src` renders nothing. Its +default image classes are `h-auto w-full`; `class` is merged after them. diff --git a/src/layouts/base.astro b/src/layouts/base.astro index 81cbefda9..0cb16caf8 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -28,13 +28,15 @@ import DocsSearch from "@/components/docs-search.astro" import DocsSwitcher from "@/components/docs-switcher.astro" import Posthog from "@/components/posthog.astro" import PresetHead from "@/components/preset-head.astro" +import wordmarkFont from "@/assets/fonts/fulldev-wordmark.woff2?url" type Props = { global: GlobalSchema page: BaseSchema + preloadMono?: boolean } -const { global, page }: Props = Astro.props +const { global, page, preloadMono = true }: Props = Astro.props const pageId = getPageId(Astro.url.pathname) const framework = getFramework(pageId) @@ -130,7 +132,17 @@ const switcherLabels = { {/* Preload only the upright face: few pages use italic text, and the italic file would compete with the stylesheets and the upright file. */} - + + diff --git a/src/layouts/home.astro b/src/layouts/home.astro index ef917de5e..0ee35223e 100644 --- a/src/layouts/home.astro +++ b/src/layouts/home.astro @@ -87,7 +87,7 @@ const withReact = (link: T) => ({ }) --- - +
({ })) --- - +