Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add assets page #2779

Merged
merged 57 commits into from
Mar 7, 2023
Merged

Add assets page #2779

merged 57 commits into from
Mar 7, 2023

Conversation

natemoo-re
Copy link
Member

@natemoo-re natemoo-re commented Mar 2, 2023 •
edited
Loading

What kind of changes does this PR include?

  • New or updated content

Description

Open Questions

  • How much do we want to integrate this into the Images guide? Is the top-level warning and pointing to the other page sufficient?

@netlify
Copy link

netlify bot commented Mar 2, 2023 •
edited
Loading

✅ Deploy Preview for astro-docs-2 ready!

Name Link
🔨 Latest commit 3b6cc8c
🔍 Latest deploy log https://app.netlify.com/sites/astro-docs-2/deploys/6407883dac0a2d0008ed5fa9
😎 Deploy Preview https://deploy-preview-2779--astro-docs-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@Jutanium
Copy link
Contributor

Jutanium commented Mar 2, 2023

Awesome! I noticed there's no examples here about what changes with images in Markdown - I know you can now use relative images, does anything else change?

@Princesseuh Princesseuh mentioned this pull request Mar 3, 2023
Merged
@natemoo-re natemoo-re marked this pull request as ready for review March 3, 2023 17:20
sarah11918
sarah11918 reviewed Mar 3, 2023
View reviewed changes
Copy link
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just leaving these to make link checker happy!

src/content/docs/en/reference/image-service-reference.mdx Outdated Show resolved Hide resolved
src/content/docs/en/guides/images.mdx Outdated Show resolved Hide resolved
@sarah11918 sarah11918 added add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. merge-on-release Don't merge this before the feature is released! (MQ=approved but WAIT for feature release!) labels Mar 3, 2023
Princesseuh
Princesseuh reviewed Mar 7, 2023
View reviewed changes
src/content/docs/en/guides/assets.mdx Outdated

The `<Image />` component generates an `<img>` tag.

This component can transform an image's dimensions, file type, and quality to produce an optimized image that avoids Content Layout Shift **(CLS)**.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Technically, it's not the generated image that avoids CLS, it's the img tag generated by the Image component.

Princesseuh
Princesseuh reviewed Mar 7, 2023
View reviewed changes
src/content/docs/en/guides/assets.mdx Outdated

### `getImage()` (`astro:assets`)

This function is intended for generating images destined to be used somewhere else than directly in HTML, for example in CSS or in an [API Route](/en/core-concepts/endpoints/#server-endpoints-api-routes).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A major usage of getImage is also if you want to create your own Image component, might be worth a shoutout (the included Image component is basically just a call to getImage!)

sarah11918
sarah11918 reviewed Mar 7, 2023
View reviewed changes
src/content/docs/en/guides/assets.mdx Outdated

### Update your Markdown files

Relative images can now be referenced in Markdown and MDX files. These will automatically be optimized and hashed by Astro's build process.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Relative images can now be referenced in Markdown and MDX files. These will automatically be optimized and hashed by Astro's build process.
Relative images can now be referenced in Markdown. These will automatically be optimized and hashed by Astro's build process.

Princesseuh
Princesseuh reviewed Mar 7, 2023
View reviewed changes
src/content/docs/en/reference/image-service-reference.mdx Outdated

#### How this Works

At build time for static sites, both `<Image/>` and `getImage(options)` call the `transform()` function. They pass options either through component attributes or an `options` argument, respectively. The transformed images will be built to a `dist/_astro` folder.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is also the case for pre-rendered routes, if you want to add an additional precision.

sarah11918 and others added 12 commits March 7, 2023 12:34
@sarah11918 @Princesseuh
Apply suggestions from code review
86f555f 
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
more realistic code samples
825792f
text edits
cd7d3d0
other attributes
edf42da
endpoint example
5d45e7f
remove end comment
f78ea3b
remove MDX mention
ea64b1a
@Princesseuh
Update src/content/docs/en/guides/assets.mdx
eb7e642 
Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
@sarah11918
Update src/content/docs/en/guides/assets.mdx
a771d1e 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
@sarah11918
Update src/content/docs/en/guides/assets.mdx
b1f68a3 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
@sarah11918
Update src/content/docs/en/guides/assets.mdx
bf11563 
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
optimized asset support
3b6cc8c
@sarah11918 sarah11918 merged commit e1a3bd1 into main Mar 7, 2023
@sarah11918 sarah11918 deleted the feat/assets branch March 7, 2023 20:01
@sarah11918 sarah11918 added the minor-release For the next minor release; in the milestone, "merge queue" when approved by Sarah! label Jun 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Princesseuh Princesseuh Princesseuh left review comments

@Jutanium Jutanium Jutanium left review comments

@sarah11918 sarah11918 sarah11918 left review comments

@yanthomasdev yanthomasdev yanthomasdev left review comments

Assignees
No one assigned
Labels
add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. merge-on-release Don't merge this before the feature is released! (MQ=approved but WAIT for feature release!) minor-release For the next minor release; in the milestone, "merge queue" when approved by Sarah!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@natemoo-re @Jutanium @Princesseuh @sarah11918 @yanthomasdev @delucis