Skip to content

Document remark/rehype#938

Merged
kevinzunigacuellar merged 13 commits intomainfrom
css-height-fix
Oct 27, 2023
Merged

Document remark/rehype#938
kevinzunigacuellar merged 13 commits intomainfrom
css-height-fix

Conversation

@kevinzunigacuellar
Copy link
Copy Markdown
Member

@kevinzunigacuellar kevinzunigacuellar commented Oct 20, 2023 •
edited
Loading

What kind of changes does this PR include?

Description

  • Only applies height: auto to elements (iframe, img, ...) when height its not set.
  • Added height: auto to showcase card

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Oct 20, 2023 •
edited
Loading

⚠️ No Changeset found

Latest commit: bb822f9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link
Copy Markdown

netlify bot commented Oct 20, 2023 •
edited
Loading

✅ Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit bb822f9
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/653bf5e5f10c0e0008b11465
😎 Deploy Preview https://deploy-preview-938--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

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

@github-actions github-actions bot added 📚 docs Documentation website changes 🌟 core Changes to Starlight’s main package labels Oct 20, 2023
@astrobot-houston
Copy link
Copy Markdown
Contributor

astrobot-houston commented Oct 20, 2023 •
edited
Loading

size-limit report 📦

Path Size
/index.html 5.13 KB (0%)
/_astro/*.js 19.27 KB (0%)
/_astro/*.css 9.68 KB (0%)

delucis
delucis reviewed Oct 23, 2023
View reviewed changes
Copy link
Copy Markdown
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

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

Thanks @kevinzunigacuellar!

Not 100% sure if this approach will work or not. For example, not super obvious with the test example of 100px, but shrink the viewport narrow enough and you’ll see this distortion:

image in content that is stretched because its height is 100px even though its width has shrunk with its narrow container

This would be more obvious for larger image sizes.

kevinzunigacuellar and others added 2 commits October 23, 2023 09:09
@kevinzunigacuellar @delucis
add md img
c2edae1 
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
add script to assign aspect ratio to iframes
4b5e1ec
@kevinzunigacuellar
Copy link
Copy Markdown
Member Author

kevinzunigacuellar commented Oct 24, 2023

I am not very happy with this solution either 😓

@HiDeoo
Copy link
Copy Markdown
Member

HiDeoo commented Oct 24, 2023

I am not very happy with this solution either 😓

Could we move this to a rehype plugin?

@delucis
Copy link
Copy Markdown
Member

delucis commented Oct 24, 2023 •
edited
Loading

Could we move this to a rehype plugin?

Yeah I also considered this. I’d honestly love it if Starlight added zero custom rehype plugins to give users a clean slate for their own customisations. Maybe a good opportunity for a third-party plugin that we could recommend?

Similar to gatsby-remark-responsive-iframe maybe?

Edit: Definitely not exactly that — it’s using cheerio to parse stuff???

@HiDeoo
Copy link
Copy Markdown
Member

HiDeoo commented Oct 24, 2023 •
edited
Loading

I’d honestly love it if Starlight added zero custom rehype plugins to give users a clean slate for their own customisations. Maybe a good opportunity for a third-party plugin that we could recommend?

I think that is a valid point and wise idea 👍

Tried quickly right now to see if something like that already existed, I'm a bit surprised it is not (or I did not find it easily) but would be fairly easy to setup and publish for someone (and yeah, definitely without cheerio).

@kevinzunigacuellar
Copy link
Copy Markdown
Member Author

kevinzunigacuellar commented Oct 24, 2023

I think a rehype plugin it's a good idea but what about the support for markdoc files?

@HiDeoo
Copy link
Copy Markdown
Member

HiDeoo commented Oct 24, 2023

I think a rehype plugin it's a good idea but what about the support for markdoc files?

Does Markdoc even allow HTML in markup? I think users would need a custom Markdoc tag for an iframe so the tag could also handle this case at the same time I guess?

@github-actions github-actions bot removed the 🌟 core Changes to Starlight’s main package label Oct 24, 2023
kevinzunigacuellar
kevinzunigacuellar commented Oct 24, 2023
View reviewed changes
@kevinzunigacuellar
Copy link
Copy Markdown
Member Author

kevinzunigacuellar commented Oct 24, 2023

To get the ball rolling I added a small section to the end of the authoring content page about plugins.

@delucis delucis changed the title fix: remove height auto when height attribute is set Document remark/rehype Oct 25, 2023
delucis
delucis reviewed Oct 25, 2023
View reviewed changes
@kevinzunigacuellar @delucis
Update docs/src/content/docs/guides/authoring-content.md
0574411 
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
delucis
delucis approved these changes Oct 27, 2023
View reviewed changes
Copy link
Copy Markdown
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

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

I think this looks good to me! Do you want to do anything else in this PR @kevinzunigacuellar?

ElianCodes
ElianCodes approved these changes Oct 27, 2023
View reviewed changes
Copy link
Copy Markdown
Member

@ElianCodes ElianCodes left a comment

Choose a reason for hiding this comment

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

Love it! Thanks for adding this @kevinzunigacuellar!

@kevinzunigacuellar
Copy link
Copy Markdown
Member Author

kevinzunigacuellar commented Oct 27, 2023

(Pressing the green big button...)

@kevinzunigacuellar kevinzunigacuellar merged commit ba70635 into main Oct 27, 2023
@kevinzunigacuellar kevinzunigacuellar deleted the css-height-fix branch October 27, 2023 17:46
@HiDeoo HiDeoo mentioned this pull request Oct 28, 2023
Merged
vasfvitor added a commit to vasfvitor/astro-starlight that referenced this pull request Nov 1, 2023
@vasfvitor
update - authoring-content.md - withastro#938
5b24e6a
@morinokami morinokami mentioned this pull request Dec 2, 2023
Merged
@HiDeoo HiDeoo mentioned this pull request May 1, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@delucis delucis delucis approved these changes

+1 more reviewer

@ElianCodes ElianCodes ElianCodes approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

📚 docs Documentation website changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Height and width of Embed element are not correct.

5 participants

@kevinzunigacuellar @astrobot-houston @HiDeoo @delucis @ElianCodes