Commit graph

48 commits

Author SHA1 Message Date
Gérald Gounot
ac3649bb58
Add support for SVG images to  @astrojs/image (#6118)
* @astrojs/image: add support for SVG images

* @astrojs/image: add tests for SVG images

* @astrojs/image: update README.md with SVG format info

* Add minor changeset for @astrojs/image
2023-02-15 09:21:41 +01:00
Bryce Russell
327a76c3db
Fix remote image example (#6112)
* Fix remote image example

`format` prop is required for remote images

* Specify `format` is only required when using `Squoosh`

- Undo changes / Restore previous content in Remote Image Examples
- Specify `format` is only required for remote images when using Squoosh(default)

* Fix backticks

* remove 'only' and backticks on squoosh

---------

Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com>
2023-02-06 14:38:31 -06:00
Bryce Russell
e3e2498248
Add required alt to Picture example (#6074)
Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com>
2023-01-31 21:28:14 -04:00
Nick Buk[0vec]
15f4d96b08
Add links to sharp docs in @astro/image README (#6017)
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2023-01-31 21:21:28 -04:00
Happydev
474ecc7be6
Correct usage of getImage function (#6068) 2023-01-31 16:50:17 +00:00
Bryce Russell
b6bed15a00
Fix local image example (#6019)
- `aspectRatio` prop requires a `width` or `height` prop

Co-authored-by: BryceRussell <19967622+BryceRussell@users.noreply.github.com>
2023-01-29 10:00:48 +01:00
Subha Chanda
1c7eef308e
Updated according to new configuration (#5478)
* Updated according to new configuration

Astro imports the `defineConfig` function from `astro/config`. The `integrations` key needs to be passed into the `defineConfig` function, but it is not shown in the README. Updated the README according to the CLI example.

* update alpine

* update image

* update lit

* update mdx

* update preact

* update prefetch

* update react

* update sitemap

* update solid

* update svelte

* update tailwind

* update turbolinks

* update vue

* chore: add changeset

* update image

* update svelte readme

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
2023-01-26 13:03:00 -06:00
Chris Swithinbank
fcada72bd5
Integration READMEs code block sweep 🧹 (#5455) 2022-11-22 15:56:55 +01:00
Ted Diño
afb751dbd1
[docs] fix typo in image integration README (#5416) 2022-11-16 12:07:11 -04:00
Donald
df8092b007
Fix typo in image integration documentatation (#5388) 2022-11-13 23:00:14 -04:00
Sarah Rainsberger
06d016a741
[docs] update image integration README (#5231)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
2022-10-28 16:17:56 -03:00
Emmanuel Chucks
ed2dfdae5b
fix: updates <Picture /> to pass HTML attributes down to the <img /> element (#5038)
* fix: also pass attrs to underlying img

`class` for direct img styling, `width` & `height` to prevent layout shift, etc need to be passed to the underlying img tag to work.

* remove redundant attr from picture tag

* revert to previous commit

- seemed to break some tests
- can't deal with fixing that right now, maybe later

* only passing attributes to the img

* adding a note to the README

* chore: add changeset

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
2022-10-20 19:42:36 +00:00
mandar1jn
c5484add6a
Corrected the getImage() paramaters (#5040) 2022-10-10 11:06:55 -04:00
Chris Swithinbank
f9261ddd00
Fix missing language tag on README code block (#4940) 2022-10-01 00:29:11 +02:00
Tony Sullivan
9892989619
[@astrojs/image] adding caching support for SSG builds (#4909)
* adds a caching feature for SSG builds

* chore: add changeset

* nit: eslint fix

* chore: add readme docs for caching

* adding basic test coverage for cached images
2022-09-29 21:20:48 +00:00
Jake Strawn
b0f6216367
docs: Update references to support channel in Discord. (#4872) 2022-09-26 21:02:05 +08:00
Tony Sullivan
fad3867adb
Adding an optional image service based on Squoosh (#4738)
* WIP: adding a service built on @squoosh/lib

* WIP: investigating memory leaks in Squoosh

* WIP: vendoring Squoosh to work with our build

* chore: a bit of cleanup and a small perf gain

* removing a few unused deps

* fix: removing temp .only() in sharp test

* hooking up the last build steps to copy over .wasm files

* removing the duplicated lib/*.wasm files

* defaulting to Sharp for the initial @next release

* make sure pnpm always runs the postbuild script

* removing a few node dependencies

* refactor: move the copy .wasm build step out of the SSR bundle

* linter fixes

* fixing lock file

* chore: add TEMP changeset

* fix built wasm location for SSG builds

* Revert "defaulting to Sharp for the initial @next release"

This reverts commit 1a8d4f7f60.

* removing sharp dependency

* Revert "fix built wasm location for SSG builds"

This reverts commit 446b80bb53.

* chore: update lockfile

* fixing up image tests for the wasm loader

* updating the README for squoosh

* parallel wasm builds

* refactor: a bit of house keeping

* perf: allow a thread for each output encoding format

* fix: dev broke with the shift to wasm workers

* adds a new `astro:build:generated` hook for SSG builds

* fix: typo + calling cleanup methods in wasm codecs

* adding @astrojs/webapi for the TransformStream polyfill

* Revert "adding @astrojs/webapi for the TransformStream polyfill"

This reverts commit 39e5b845a5.

* perf: using sharp for most of the CI tests

* chore: update lockfile

* removing hard-coded squoosh imports

* fix: adding sharp to rollup externals

* test: using dev for the squoosh tests

* fix: updating the build output dir for wasm filles in SSG builds

* updating the changeset with migration details

* Revert "adds a new `astro:build:generated` hook for SSG builds"

This reverts commit 59b5fec7be.

* nit: adding comments for the wasm file copy

* chore: fix eslint warning
2022-09-22 19:48:14 +00:00
Oussama Bennaci
ea37de86e4
[@astrojs/image] flatten background only if alpha channel isn't supported (#4800)
* Use sharp flatten only when format doesnt support alpha

* Allow rgba for background prop

* Add changeset

* Adjust doc

* Fix tests
2022-09-20 20:25:45 +00:00
Oussama Bennaci
1e5d8ba9af
[@astrojs/image] support additional resize options (#4438)
* working draft

* more sharp params

* add changeset

* fix typing

* wip

* add missing docblocks

* update lock file

* remove enlargement and reduction resize options

* add tests

* Add docs

* support crop options in pictures

* cleanup

* define crop types in docs

* cleanup

* remove kernel option

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
2022-09-09 20:13:59 +00:00
Ben Holmes
c706d845eb
No 👏 more 👏 server 👏 restarts 👏 on 👏 config 👏 changes (#4578)
* feat: restart config on add, remove, update

* fix: reload for root project configs only

* fix: throw when userConfigPath can't resolve

* chore: changeset

* wip: remove normalizePath before writeFile

* refactor: invalidateWithCache -> isConfigReload

* wip: mustExist?

* debug: config loaded successfully

* debug: more logs

* debug: MORE logging

* fix: normalize resolved config path

* debug: yet MORE logging

* chore: bump proload

* fix: use file path, not URL.pathname

* Revert "wip: mustExist?"

This reverts commit 8ca8662132532dcdc9fd120868e615ddc60f498e.

* chore: remove console log

* feat: cleanup restart message, better invalid config handling

* chore: update lockfile

* chore: fix types

* fix: throw helpful error when config does not exist

* docs: remove "restart dev server" from integrations

* docs: make sure to restart -> try restarting

Co-authored-by: Nate Moore <nate@astro.build>
2022-09-09 11:58:16 -04:00
Valentin Bersier
e4348a4eb4
@astrojs/image: add a background option/prop to replace the alpha layer (#4642)
* Added `background` option and prop.
This optional color specifies which background to use when removing the
alpha channel if the output format doesn't support transparency.

* Modified existing tests

* Fixed wrong dimensions in tests

* Fixing a few instances of jpeg vs jpg

* Added color checking

* working on the tests

* tests are now passing

* Adding tests

* Added tests for background color

* no need to test with subpath

* Added fixture

* Renamed test fixture for background-color

* skipping test until fixed

* Typo

* Working on tests

* tests are passing

* Updated readme and added changeset

* Updated lockfile

* Updated lockfile

* Updated lockfile

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
2022-09-07 17:22:11 +00:00
Tibor Schiemann
d693e365ca
Integrations: Fix NPM instructions to use npx astro add again (#4653)
* Fix install instructions to use `npx astro` again

* Replace joyful hiccups with regular issues :)
2022-09-07 12:08:58 +02:00
Chris Swithinbank
eb4eebde9e
Fix image integration README (#4599)
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2022-09-02 17:05:04 +02:00
Jan Müller
72c760e9b8
feat(image): throw if alt text is missing (#4511)
* feat(image): throw if no `alt` is provided

* chore: add changeset

* docs(image): update README

* updated alt text stuff throughout

* fixing with-mdx test suite

* warn for missing alt text, will throw an error in a future release

* final README tweaks

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2022-09-01 21:24:07 +00:00
Tony Sullivan
00c605ce35
Image integration refactor and cleanup (#4482)
* WIP: simplifying the use of `fs` vs. the vite plugin

* removing a few node deps (etag and node:path)

* adding ts defs for sharp

* using the same mime package as astro's core App

* fixing file URL support in windows

* using file URLs when loading local image metadata

* fixing a bug in the etag helper

* Windows compat

* splitting out dev & build tests

* why do these suites fail in parallel?

* one last windows compat case

* Adding tests for treating /public images the same as remote URLs

* a couple fixes for Astro's `base` config

* adding base path tests for SSR

* fixing a bad merge, lost the kleur dependency

* adding a test suite for images + MDX

* chore: add changeset

* simplifying the with-mdx tests

* bugfix: don't duplicate the period when using existing file extensions

* let Vite cache the image loader service

* adding some docs for using /public images

* fixing changeset

* Update packages/integrations/image/README.md

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

* Update packages/integrations/image/README.md

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

* nit: minor README syntax tweaks

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2022-08-30 21:09:44 +00:00
Tim Rinkel
9389517f63
Update README.md (#4517) 2022-08-29 16:42:27 +08:00
Tc001
ca24a60b13
Earlier import snippet for @astrojs/image (#4484)
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2022-08-25 19:39:22 -03:00
Tony Sullivan
c4af8723bd
[@astrojs/image] adds a logger to the the image integration (#4342)
* WIP: adding a console logger that respect vite.logLevel

* adds an optional prefix for messages

* remove temporary debug log

* typo fix

* cleaning up log syntax

* fixing logger whitespace

* adding README docs

* test: disable integration logging in tests

* chore: add changeset
2022-08-22 19:13:19 +00:00
Chris Swithinbank
e2b3f8a3f4
integrations: update recommended method for running astro add (#4340) 2022-08-16 10:31:14 +02:00
mundry
2bb4e3b812
add missing word in image integration-guide (#4303)
Co-authored-by: mundry <mundry@users.noreply.github.com>
2022-08-13 13:41:15 -03:00
Caleb Jasik
5afb5ef7af
Fix spelling mistake in @astrojs/image docs (#4256)
`intergration` -> `integration`
2022-08-11 11:07:11 -05:00
Alexandre Desroches
92aa6a75ea
Updated @astrojs/image README.md missing formats prop as subtitle (#4221)
* Update README.md

Added missing subtitle for `formats` prop of the <Picture> component

* Create fast-drinks-visit.md

Co-authored-by: Fred K. Schott <fkschott@gmail.com>
2022-08-09 16:29:07 -07:00
Sarah Rainsberger
63d43e1754
remove errant remaining details tags (#4212) 2022-08-09 09:09:16 -05:00
Erika
36cb503c8a
Update @astrojs/image README with mention of the new env.d.ts file (#4206) 2022-08-08 17:27:48 -04:00
Sarah Rainsberger
9894b3dcde
remove details tags from integration READMEs (#4198) 2022-08-08 12:07:38 -05:00
Tony Sullivan
5811208182
Fixes local image resolution in SSR builds on Windows (#4173)
* fixing SSR local file resolution path on windows

* chore: add changeset

* nit: fixing typo in image README file

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
2022-08-05 20:36:30 +00:00
Sarah Rainsberger
76ec35ff30
[docs content] Image README formatting (#4082)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
2022-07-30 09:29:03 -03:00
Tony Sullivan
a397b981f5
Fixes type definitions @astrojs/image and adds more documentation to the README (#4045)
* WIP: moving to a static .d.ts types file

* fixing named exports for getImage and getPicture

* removing the exports.astro map for now

* WIP: adding readme docs for component attributes

* Adding docs for getImage and getPicture

* leaning fully on TSC to build .d.ts files

* finally found the solution for proper ESM import types

* adding a note to the README for tsconfig updates

* chore: add changesets

* typo

* docs: removing the "Images in Markdown" example

* removing the need for publishing src to NPM

* fix: make type re-export explicit

* updating image module defs to match InputFormat

* using astro syntax highlighting for README code blocks

* nit: missing backtick in README

* make sure Astro component directives aren't recommended twice
2022-07-27 15:39:05 +00:00
Sarah Rainsberger
ef9c4152b2
[READMEs] removed "experimental" from astro add instructions (#4004) 2022-07-21 14:33:59 -03:00
Tony Sullivan
eaf187f2c4
Fixing TypeScript type definitions for image components (#3980)
* moving back to importing from components directory

* exporting components with a .ts file instead of .js

* chore: changeset
2022-07-20 00:33:11 +00:00
Tony Sullivan
d73c04a9e5
<Picture> component should pass all unknown attributes to the <img> element (#3961)
* <Picture /> should pass all unrecognized props down to the <img> element

* chore: add changeset

* Adding test coverage for custom <img> attributes

* chore: adding a README note for passing attributes to the picture's img

* Revert "<Picture /> should pass all unrecognized props down to the <img> element"

This reverts commit ce3e33930f.

* Picture should pass alt text to the img
2022-07-19 19:21:58 +00:00
Tony Sullivan
2a7dd040e8
Improving support for third-party hosted image services (#3957)
* WIP: always use the built-in sharp service for local images in `dev`

* adding type definitions for the integration's use of globalThis

* simplifying the globalThis type checking

* chore: adding changeset

* removing temp hosted service used for testing
2022-07-18 19:43:40 +00:00
Chris Swithinbank
bf5d1cc1e7
More integration README fixes (#3885)
* Integration README fixes

* More tweaks (mostly code backticks for filenames)

* Update changeset

* Few more tweaks

* Make sure code blocks all have a code language

* Use URLs of new docs pages for package homepage

* One more stray `<br>` 👢

* Standardise to `sh` instead of `shell`
2022-07-11 21:10:34 +02:00
Tony Sullivan
89d76753a0
Adds a new <Picture> component to the image integration (#3866)
* moving all normalization logic out of the Image component

* refactor: only require loaders to provide the image src

* Adding a `<Picture />` component

* fixing types.ts imports

* refactor: moving getImage to it's own file

* updating component types to use astroHTML.JSX

* Revert "updating component types to use astroHTML.JSX"

This reverts commit 6e5f578da8.

* going back to letting loaders add extra HTML attributes

* Always use lazy loading and async decoding

* Cleaning up the Picture component

* Adding test coverage for <Picture>

* updating the README

* using JSX types for the Image and Picture elements

* chore: adding changeset

* Update packages/integrations/image/src/get-image.ts

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* allow users to override loading and async on the <img>

* renaming config to constants, exporting getPicture()

* found the right syntax to import astro-jsx

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
2022-07-08 21:37:55 +00:00
Chris Swithinbank
1f9e4857ff
Integration README fixes (#3865)
* Remove stray XML tag in sitemap integration README

* Fix link errors

* Add changeset
2022-07-08 21:56:24 +02:00
Matthew Phillips
502f063131
Allow importing Image component from @astrojs/image (#3848)
* Allow importing Image component from @astrojs/image

* Adds a changeset

* Export the Image type
2022-07-07 13:49:46 -04:00
Tony Sullivan
5ccccace0c
Updates how the new Image component is exported to support older versions of Astro (#3812)
* don't use typescript for the components named export file

* Adding a readme example for images in markdown

* chore: add changeset
2022-07-04 14:52:32 +00:00
Tony Sullivan
e8593e7ead
Adds an @astrojs/image integration for optimizing images (#3694)
* initial commit

* WIP: starting to define interfaces for images and transformers

* WIP: basic sharp service to test out the API setup

* adding a few tests for sharp.toImageSrc

* Adding tests for sharp.parseImageSrc

* hooking up basic SSR support

* updating image services to return width/height

* simplifying config setup for v1

* hooking up basic SSR + SSG support (dev & build)

* refactor: a bit of code cleanup and commenting

* WIP: migrating local files to ESM + vite plugin

* WIP: starting to hook up user-provided loaderEntryPoints

* chore: update lock file

* chore: update merged lockfile

* refactor: code cleanup and type docs

* pulling over the README template for first-party integrations

* moving metadata out to the loader

* updating the test for the refactored import

* revert: remove unrelated webapi formatting

* revert: remove unrelated change

* fixing up the existing sharp tests

* fix: vite plugin wasn't dynamically loading the image service properly

* refactor: minor API renaming, removing last hard-coded use of sharp loader

* don't manipulate src for hosted image services

* Adding support for automatically calculating dimensions by aspect ratio, if needed

* a few bug fixes + renaming the aspect ratio search param to "ar"

* Adding ETag support, removing need for loaders to parse file metadata

* using the battle tested `etag` package

* Adding support for dynamically calculating partial sizes

* refactor: moving to the packages/integrations dir, Astro Labs TBD later

* refactor: renaming parse/serialize functions

* Adding tests for SSG image optimizations

* refactor: clean up outdated names related to ImageProps

* nit: reusing cached SSG filename

* chore: update pnpm lock file

* handling file URLs when resolving local image imports

* updating image file resolution to use file URLs

* increasing test timeout for image build tests

* fixing eslint error in sharp test

* adding slash for windows compat in src URLs

* chore: update lockfile after merge

* Adding README content

* adding a readme call to action for configuration options

* review: A few of the quick updates from the PR review

* hack: adds a one-off check to allow query params for the _image route

* Adds support for src={import("...")}, and named component exports

* adding SSR tests

* nit: adding a bit more comments

* limiting the query params in SSG dev to the images integration
2022-07-01 15:47:48 +00:00