The web framework for content-driven websites. ️ Star to support our work!
Find a file
Matt Kane af867f3910
feat: experimental responsive images (#12377)
* chore: changeset

* feat: add experimental responsive images config option (#12378)

* feat: add experimental responsive images config option

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update config types

* Move config into `images`

* Move jsdocs

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* feat: add responsive image component (#12381)

* feat: add experimental responsive images config option

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update config types

* Move config into `images`

* Move jsdocs

* wip: responsive image component

* Improve srcset logic

* Improve fixture

* Lock

* Update styling

* Fix style prop handling

* Update test (there's an extra style for images now)

* Safely access the src props

* Remove unused export

* Handle priority images

* Consolidate styles

* Update tests

* Comment

* Refactor srcset

* Avoid dupes of original image

* Calculate missing dimensions

* Bugfixes

* Add tests

* Fix test

* Correct order

* Lint

* Fix fspath

* Update test

* Fix test

* Conditional component per flag

* Fix class concatenation

* Remove logger

* Rename helper

* Add comments

* Format

* Fix markdoc tests

* Add test for style tag

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* feat: add crop support to image services (#12414)

* wip: add crop support to image services

* Add tests

* Strip crop attributes

* Don't upscale

* Format

* Get build working properly

* Changes from review

* Fix jsdoc

* feat: add responsive support to picture component (#12423)

* feat: add responsive support to picture component

* Add picture tests

* Fix test

* Implement own define vars

* Share logic

* Prevent extra astro-* class

* Use dataset scoping

* Revert unit test

* Revert "Fix test"

This reverts commit f9ec6e2938.

* Changes from review

* docs: add docs for responsive images (#12429)

* docs: add responsive images flag docs

* docs: adds jsdoc for image components

* chore: updates from review

* Fix jsdoc

* Changes from review

* Add breakpoints option

* typo

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2024-11-15 13:29:52 +00:00
.changeset feat: experimental responsive images (#12377) 2024-11-15 13:29:52 +00:00
.devcontainer
.github Merge branch 'main' into next 2024-11-06 23:17:39 +08:00
.gitpod
.vscode Merge output: hybrid and output: static (#11824) 2024-09-07 01:07:09 +02:00
benchmark Merge branch 'main' into next 2024-11-15 19:37:28 +08:00
examples Merge branch 'main' into next 2024-11-15 19:37:28 +08:00
packages feat: experimental responsive images (#12377) 2024-11-15 13:29:52 +00:00
scripts Merge branch 'main' into next 2024-11-06 23:17:39 +08:00
.editorconfig
.git-blame-ignore-revs chore: add formatting commit to blame ignore (#11651) 2024-08-08 12:14:37 +02:00
.gitignore Use real filesystem for unit testing (#12172) 2024-10-15 15:34:42 +08:00
.gitpod.yml
.npmrc
.nvmrc
.prettierignore
biome.jsonc fix(deps): update all non-major dependencies (#12366) 2024-11-06 21:47:42 +08:00
CONTRIBUTING.md Merge branch 'main' into next 2024-10-15 16:19:58 +08:00
eslint.config.js chore: move lint rules to Biome (#12145) 2024-10-08 10:12:40 +01:00
LICENSE
package.json Merge branch 'main' into next 2024-11-06 23:17:39 +08:00
pnpm-lock.yaml feat: experimental responsive images (#12377) 2024-11-15 13:29:52 +00:00
pnpm-workspace.yaml Use real filesystem for unit testing (#12172) 2024-10-15 15:34:42 +08:00
prettier.config.js
README.md chore: update CI badge (#12282) 2024-10-22 13:26:06 +01:00
SECURITY.md
SECURITY_CONTACTS
STYLE_GUIDE.md
tsconfig.base.json
tsconfig.eslint.json
tsconfig.json
turbo.json Upgrade to turbo v2 (#11705) 2024-08-15 11:41:21 +08:00

Build the web you want


Astro is a website build tool for the modern web —
powerful developer experience meets lightweight output.

main next License npm version

Install

The recommended way to install the latest version of Astro is by running the command below:

npm create astro@latest

You can also install Astro manually by running this command instead:

npm install --save-dev astro

Looking for help? Start with our Getting Started guide.

Looking for quick examples? Open a starter project right in your browser.

Documentation

Visit our official documentation.

Support

Having trouble? Get help in the official Astro Discord.

Contributing

New contributors welcome! Check out our Contributors Guide for help getting started.

Join us on Discord to meet other maintainers. We'll help you get your first contribution in no time!

Directory

Package Release Notes
astro astro version
create-astro create-astro version
@astrojs/react @astrojs/react version
@astrojs/preact @astrojs/preact version
@astrojs/solid-js @astrojs/solid version
@astrojs/svelte @astrojs/svelte version
@astrojs/vue @astrojs/vue version
@astrojs/lit @astrojs/lit version
@astrojs/node @astrojs/node version
@astrojs/vercel @astrojs/vercel version
@astrojs/cloudflare @astrojs/cloudflare version
@astrojs/partytown @astrojs/partytown version
@astrojs/sitemap @astrojs/sitemap version
@astrojs/tailwind @astrojs/tailwind version
@astrojs/alpinejs @astrojs/alpinejs version
@astrojs/mdx @astrojs/mdx version
@astrojs/db @astrojs/db version
@astrojs/rss @astrojs/rss version
@astrojs/netlify @astrojs/netlify version

CII Best Practices

Several official projects are maintained outside of this repo:

Project Repository
@astrojs/compiler withastro/compiler
Astro Language Tools withastro/language-tools

Sponsors

Astro is free, open source software made possible by these wonderful sponsors.

❤️ Sponsor Astro! ❤️

Astro's sponsors.