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

chore(css): Move CSS examples - Shapes, transforms, transition, display #36740

Merged
merged 15 commits into from
Nov 27, 2024
Merged

chore(css): Move CSS examples - Shapes, transforms, transition, display #36740

merged 15 commits into from
Nov 27, 2024

Conversation

bsmth
Copy link
Member

@bsmth bsmth commented Nov 11, 2024 •
edited
Loading

Description

As part of an initiative to reduce repo maintenance & code duplication, this PR moves some external examples into content. This PR converts the following macros to live samples:

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}
{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}
{{EmbedGHLiveSample("css-examples/modules/transforms.html", '100%', 900)}}
{{EmbedGHLiveSample("css-examples/transitions/js-transitions.html", '100%', 500)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/span-flex.html", '100%', 440)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-flex.html", '100%', 440)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/multi-keyword-flex.html", '100%', 640)}}
{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-block.html", '100%', 440)}}

Motivation

Motivation is described in the project issue.

Related issues and pull requests

TODO

@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/xl [PR only] >1000 LoC changed labels Nov 11, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 11, 2024 •
edited
Loading

Preview URLs (7 pages)

(comment last updated: 2024-11-26 11:29:34)

@bsmth bsmth mentioned this pull request Nov 11, 2024
Merged
@bsmth bsmth marked this pull request as ready for review November 11, 2024 16:42
@bsmth bsmth requested a review from a team as a code owner November 11, 2024 16:42
@bsmth bsmth requested review from chrisdavidmills and removed request for a team November 11, 2024 16:42
chrisdavidmills
chrisdavidmills requested changes Nov 19, 2024
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

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

Hey @bsmth! I've looked through all of these. I can verify that they (at least mostly) display correctly by running them in MDN Playground. However, they are not displaying on the preview pages, which is a bit strange.

files/en-us/web/css/css_shapes/basic_shapes/index.md
}
```

{{EmbedLiveSample("inset", "", "250px")}}
Copy link
Contributor

Choose a reason for hiding this comment

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

Hrm, I'm not sure if this is just a problem with the preview page, but the example is not rendering on the page. The references must be correct because it loads correctly in the MDN Playground.

Copy link
Member Author

Choose a reason for hiding this comment

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

That is strange, I did notice the output box was empty occasionally on localhost, but had content on refresh, I wonder if it's a Playground problem with lazy loading / order of loading resources. Needs some investigation.

Copy link
Member Author

Choose a reason for hiding this comment

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

@chrisdavidmills this is a known issue due to changes in Playground envs, it should be resolved in the coming days.

Copy link
Contributor

Choose a reason for hiding this comment

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

OK. In that case, I'm happy with all the additions, except where commented.

files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/basic_shapes/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/from_box_values/index.md Show resolved Hide resolved
files/en-us/web/css/css_shapes/shapes_from_images/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/css_shapes/shapes_from_images/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/css_shapes/shapes_from_images/index.md Outdated Show resolved Hide resolved
chrisdavidmills
chrisdavidmills approved these changes Nov 26, 2024
View reviewed changes
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

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

@bsmth looks fixed, so approving, although I can't see the examples rendered anywhere.

@bsmth
Copy link
Member Author

bsmth commented Nov 27, 2024

@bsmth looks fixed, so approving, although I can't see the examples rendered anywhere.

Thanks a lot! The playground in preview builds is probably not going to be fixed until next week given Rari release prio, so we can ignore for now as Playground is working on prod (& localhost). I'll double check on the branch, but we should be good to go!

@chrisdavidmills chrisdavidmills merged commit dbc3205 into mdn:main Nov 27, 2024
8 checks passed
@bsmth bsmth deleted the css-examples-web-css-3 branch November 27, 2024 14:53
@bsmth
Copy link
Member Author

bsmth commented Nov 27, 2024

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chrisdavidmills chrisdavidmills chrisdavidmills approved these changes

Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs size/xl [PR only] >1000 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@bsmth @chrisdavidmills