[PROJECT] Move embedded css-examples into content

[bsmth]

As part of an initiative to reduce repo maintenance & code duplication, we'll be moving external examples into content, starting with embedded examples, and specifically CSS examples. Some automation work to speed this up is done on mdn/content@main...bsmth:content:css-examples-transfer, but to avoid one large PR which is not detail-focused, let's take our time to make sure the content looks and works great in smaller pieces.

How to help (en-US mdn/content):

• Go to the tracking sheet (I will grant permissions)
• Pick a maximum of 10 files and mark yourself as working on some
• Grab changes from https://github.com/bsmth/content/tree/css-examples-transfer

Instead of copying and pasting from the diffs, you can try the following approach:

# Add my fork as a remote
git remote add bsmth https://github.com/bsmth/content.git
git fetch bsmth
git checkout main && git fetch && git pull
# Create a branch from main
git branch my-examples-work && git checkout my-examples-work

# Check out specific files from my fork
git checkout bsmth/css-examples-transfer -- path/to/example-file path/to/example-file2

At this point, you should have changes ready to be tidied up, and you can open a PR when ready.

Check the following:

• The feature is demonstrated as expected, compared to the original
• The example is minimal with no unused styles or HTML
• Images use the https://github.com/mdn/shared-assets repo (add missing images to shared assets if you need)
• The prose makes sense given the changes
• Your PR links to this issue

Things not to do:

• Don't copy any 'playable editor' code (playable.js & styles.css) or assets

If you're unsure, you can ask, or highlight things as unsure in the PR.

How to help (Translated content):

When a PR is merged, you can help by porting the changes from mdn/content@main to translated-content. This will be really important to make sure translated versions don't get left behind with this project.

Why:

There are a few reasons why we are moving the examples:

• Help guarantee code quality of examples in content
• Consistency in code editors / code pens in docs pages
• More examples work with the playground out-of-the box
• Minimize code duplication so there are fewer pull requests and reviews needed in the org
• Fewer repositories to maintain

Tracking sheet: https://docs.google.com/spreadsheets/d/1v1gmrJDX7ALXEiRmPKBpVbCXRCdVOGJm2-zQ7qj1cJo/edit?gid=0#gid=0

[bsmth]

@mdn/localization-team-leads this is going to be relevant :) If you need a hand with changes or reviewing the translated versions, please @ mention me, as it's going to be good to prioritize landing the localized PRs after they've been merged to en-US content.

[hochan222]

@bsmth, I created a PR, and it seems to be working well. cc. @mdn/yari-content-ko

---

Additionally..

https://github.com/mdn/translated-content/pull/24284/files

### Example showing different durations
...
{{EmbedLiveSample("Example_showing_different_durations",275,200)}}

If the existing Markdown title is specified as EmbedLiveSample, it would be better to update it to the following syntax too.

\```html live-sample___specificity-simple
...
\```
\```css live-sample___specificity-simple
...
\```
{{EmbedLiveSample("specificity-simple")}}

[bsmth]

@bsmth, I created a PR, and it seems to be working well.

Super, your PR looks good, thank you! I'm making small edits on each new mdn/content PR to tidy up examples, and your PR includes those changes, so I'm happy!

If the existing Markdown title is specified as EmbedLiveSample, it would be better to update it to the following syntax too.

This syntax language live-sample___sample-name is a bit more flexible and isn't fixed to the section title. I'm using it for all CSS examples in this project so the changes are independent of the rest of the page.

[hochan222]

Thank you :) I requested docs access to see the applied content repo range. Could you please approve it?

Or, I’d like to apply the updates to the ko-locale in translated-content. Should I only apply them to the PRs currently being tracked in this issue?

[bsmth]

Thank you :) I requested docs access to see the applied content repo range. Could you please approve it?

Done ✅

Or, I’d like to apply the updates to the ko-locale in translated-content. Should I only apply them to the PRs currently being tracked in this issue?

Yes, that would be the best thing to do for now; wait until each PR has landed on mdn/content first, the content may go out of sync if we do them in a different order. Thank you!