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.

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

docs(fix): Fix homepage by removing unclosed and unused <code> tags #2120

Merged
merged 1 commit into from Mar 17, 2023

Conversation

malee31
Copy link
Contributor

@malee31 malee31 commented Mar 12, 2023

Removed <code> tags that browsers like Chrome automatically close when parsing HTML resulting in styling inconsistencies (font-family)

Why

I noticed some inconsistencies in styling on the React Spring home page. Investigation on why resulted in this patch.
Inconsistencies can be easily spotted by looking at the @ in the import statements.
image
image

What

Fixed examples on the home page of https://www.react-spring.dev in the "And there's even more" section.
Issue can be reproduced by hovering over the Shorthand transformation styles bullet point and comparing it by hovering over any other bullet point like Animate any value – strings, numbers, css variables...

The styling difference occurs because there is an unclosed <code> tag in the raw HTML fixtures in HomeBlockMore.tsx:50 which is automatically closed by browsers.
The raw HTML is already enclosed in another <code> block by React resulting in a duplicate. This inner <code> block also does not have font-family: monospace and uses the User Agent stylesheet instead.

There is also a closing </code> tag in the previous fixture that is discarded by browsers as an extra closing tag so that was removed too.

Checklist

  • Documentation updated
  • Ready to be merged

Removed <code> tags that browsers like Chrome automatically close when parsing HTML resulting in styling inconsistencies (font-family)
@changeset-bot
Copy link

changeset-bot bot commented Mar 12, 2023

⚠️ No Changeset found

Latest commit: e5afc2a

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

@vercel
Copy link

vercel bot commented Mar 12, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
react-spring ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 12, 2023 at 2:20AM (UTC)

@malee31 malee31 changed the title Fix unclosed and unused <code> tags. patch: Fix homepage by removing unclosed and unused <code> tags Mar 12, 2023
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e5afc2a:

Sandbox Source
Animating Auto Configuration
Card Configuration
Cards Stack Configuration
Chaining Transition and a Spring Configuration
CSS Gradients Configuration
CSS Keyframes Configuration
Async CSS variables Configuration
Draggable List Configuration
Exit Before Enter Configuration
Flip Card Configuration
Floating Button Configuration
Goo Blobs Configuration
Image Fade Configuration
List Reordering Configuration
MacOS Dock Configuration
Masonry Grid Configuration
Multistage Transitions Configuration
Noise Configuration
Notification Hub Configuration
Horizontal Parallax Configuration
Sticky Parallax Configuration
Vertical Parallax Configuration
Rocket decay Configuration
Basic Transition Configuration
Native Slide Configuration

@joshuaellis
Copy link
Member

Thanks for this! Sorry for the delay.

@joshuaellis joshuaellis changed the title patch: Fix homepage by removing unclosed and unused <code> tags docs(fix): Fix homepage by removing unclosed and unused <code> tags Mar 17, 2023
@joshuaellis joshuaellis merged commit 4524236 into pmndrs:main Mar 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants