Skip to content

Commit eb01020

Browse files
bsmthbsmth
authored
chore: Improvements to template files, formatter config (#173)
* chore: Improvements to template files, formatter config * chore: add contrib doc * chore: add contrib doc * chore(style): Newlines at EOF per reviewer comments
1 parent 6fcc513 commit eb01020

34 files changed

+342
-91
lines changed

‎.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
[*]
7+
indent_style = space
8+
indent_size = 2
9+
end_of_line = lf
10+
charset = utf-8
11+
trim_trailing_whitespace = true
12+
insert_final_newline = true
13+
14+
[*.md]
15+
trim_trailing_whitespace = false

‎.github/CODEOWNERS

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# This file is used to request PR reviews from the appropriate team.
2+
#
3+
# Order is important; the last matching pattern takes precedence.
4+
# Each rule is more specific than the previous rules.
5+
# For more information, see:
6+
# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners
7+
8+
# Default
9+
* @mdn/core-yari-content

‎.github/ISSUE_TEMPLATE/bug.yml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: "Issue report"
2+
description: Report an unexpected problem or unintended behavior.
3+
labels: ["needs triage"]
4+
body:
5+
- type: markdown
6+
attributes:
7+
value: |
8+
### Before you start
9+
10+
**Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
11+
12+
↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
13+
14+
---
15+
- type: textarea
16+
id: problem
17+
attributes:
18+
label: What was incorrect, unhelpful, or incomplete?
19+
validations:
20+
required: true
21+
- type: textarea
22+
id: expected
23+
attributes:
24+
label: What did you expect to see?
25+
validations:
26+
required: true
27+
- type: textarea
28+
id: references
29+
attributes:
30+
label: Do you have any supporting links, references, or citations?
31+
description: Link to information that helps us confirm your issue.
32+
- type: textarea
33+
id: more-info
34+
attributes:
35+
label: Do you have anything more you want to share?
36+
description: For example, steps to reproduce, screenshots, screen recordings, or sample code.

‎.github/ISSUE_TEMPLATE/config.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
blank_issues_enabled: false
2+
contact_links:
3+
- name: MDN GitHub Discussions
4+
url: https://github.com/orgs/mdn/discussions
5+
about: Does the issue involve a lot of pages, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first.
6+
- name: MDN Web Docs on Discourse
7+
url: https://discourse.mozilla.org/c/mdn/learn/250
8+
about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse.
9+
- name: Help with code
10+
url: https://stackoverflow.com/
11+
about: If you are stuck and need help with code, StackOverflow is a great resource.

‎.github/PULL_REQUEST_TEMPLATE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->
2+
3+
**Description:**
4+
5+
<!-- ✍️ Summarize your changes in one or two sentences -->
6+
7+
**Motivation:**
8+
9+
<!-- ❓ Why are you making these changes and how do they help readers? -->
10+
11+
**Additional details:**
12+
13+
<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->
14+
15+
**Related issues and pull requests:**
16+
17+
<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" -->
18+
<!-- 👉 Highlight related pull requests using "Relates to #123" -->
19+
<!-- ❗ If another pull request should be merged first, use "**Depends on:** #123" -->
20+
21+
<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->

‎.github/workflows/idle-issues.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
name: "Mark issues and pull requests as idle"
2+
on:
3+
schedule:
4+
- cron: "49 11,23 * * *"
5+
6+
jobs:
7+
idle:
8+
uses: mdn/workflows/.github/workflows/idle.yml@main
9+
with:
10+
target-repo: "mdn/css-examples"

‎.github/workflows/lock-closed.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
name: "Lock old issues and pull requests"
2+
on:
3+
schedule:
4+
- cron: "0 9 1 * *"
5+
6+
jobs:
7+
lock:
8+
uses: mdn/workflows/.github/workflows/lock-closed.yml@main
9+
with:
10+
target-repo: "mdn/css-examples"

‎.github/workflows/new-issues.yml

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
name: "Mark new issues with needs-triage label"
2+
3+
on:
4+
issues:
5+
types:
6+
- reopened
7+
- opened
8+
9+
jobs:
10+
label-new-issues:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- name: initial labelling
14+
uses: andymckay/labeler@master
15+
with:
16+
add-labels: "needs triage"
17+
ignore-if-assigned: true

‎.github/workflows/pr-merge-conflicts.yml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
name: "Label PRs with conflicts"
2+
3+
on:
4+
push:
5+
pull_request_target:
6+
types: [synchronize]
7+
8+
jobs:
9+
label-merge-conflicts:
10+
uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
11+
with:
12+
target-repo: "mdn/css-examples"
13+
secrets:
14+
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.markdownlint-cli2.jsonc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"config": {
3+
"extends": "./.markdownlint.jsonc"
4+
},
5+
"ignores": [
6+
"node_modules",
7+
".git",
8+
".github",
9+
"tests",
10+
"editable-samples/codemirror"
11+
]
12+
}

‎.markdownlint.jsonc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// This file defines our configuration for Markdownlint. See
2+
// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
3+
// for more details on each rule.
4+
5+
{
6+
"first-line-heading": false,
7+
"line-length": false
8+
}

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
editable-samples/codemirror/**/*
2+
editable-samples-2/js/
3+
.markdownlint*

‎.prettierrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"bracketSameLine": true
3+
}

‎CONTRIBUTING.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Contribution guide
2+
3+
This repository accompany various CSS documentation pages on [MDN Web Docs](https://developer.mozilla.org).
4+
This document will help you get started with contributions!
5+
6+
## Types of contribution
7+
8+
> [!NOTE]
9+
> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
10+
> These methods are simpler to maintain as the code lives beside the rest of the content.
11+
> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
12+
13+
There are many ways you can help improve this repository! For example:
14+
15+
- **Write a new example.** If you would like to add a new example, make sure this feature is supported by a stable version of modern browsers.
16+
- **Improve an existing example.** You could make improvements or add some other changes which would make example more helpful to the users.
17+
- **Fix a bug:** we have a list of [issues](https://github.com/mdn/css-examples/issues), or maybe you found your own.
18+
19+
## Getting started
20+
21+
You will need to have Git and GitHub set up to be able to contribute.
22+
23+
### Set up Git and GitHub
24+
25+
For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/).
26+
With the above dependencies satisfied, [create your new account on GitHub](https://github.com/join).
27+
28+
Next up, you need to fork and clone the repo to be able to contribute to it.
29+
You can [learn about forking on GitHub](https://help.github.com/articles/fork-a-repo).
30+
Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/).
31+
32+
### Serving
33+
34+
You should serve your example locally to see the results before submitting your changes.
35+
There are a few different ways to do this depending on your preferred tooling methods.
36+
See [Running a simple local HTTP server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server) for information on setting up a server.
37+
38+
```bash
39+
cd my-cool-example
40+
python3 -m http.server
41+
```
42+
43+
### Open a pull request
44+
45+
Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/).
46+
You can find more information about submitting pull requests in our [Community guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) docs.
47+
48+
### Including your example on MDN
49+
50+
After your pull request is reviewed and merged, you can link to your example from MDN Web Docs.
51+
For example, the <https://mdn.github.io/css-examples/counter-style-demo/> demo is referenced in MDN content like so:
52+
53+
```markdown
54+
See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).
55+
```
56+
57+
## Thank you
58+
59+
Thanks a lot for your contribution!
60+
If you'd like to ask questions or get in touch, feel free to drop by in [Discord](https://developer.mozilla.org/discord) or say hello in one of [our communication channels](https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels).

‎README.md

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
# css-examples
22

3-
This repository contains examples of CSS usage.
3+
Code examples that accompany various MDN CSS documentation pages.
4+
5+
> [!NOTE]
6+
> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
7+
> These methods are simpler to maintain as the code lives beside the rest of the content.
8+
> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
49
510
The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html).
611

@@ -10,10 +15,24 @@ The "moz-context-properties" directory contains a demo for the [-moz-context-pro
1015

1116
The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
1217

13-
The "object-fit-basics" directory contains a simple page demonstrating typical usage of different <code>object-fit</code> and <code>object-position</code> values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
18+
The "object-fit-basics" directory contains a simple page demonstrating typical usage of different `object-fit` and `object-position` values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
1419

15-
The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
20+
The "object-fit-gallery" directory contains a fun image gallery that uses `object-fit` to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).
1621

17-
The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different <code>overscroll-behavior</code> values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
22+
The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different `overscroll-behavior` values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/).
1823

1924
The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/).
25+
26+
## Contribute to MDN Web Docs
27+
28+
You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work.
29+
The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.
30+
31+
To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository.
32+
By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md).
33+
34+
## Get in touch
35+
36+
You can communicate with the MDN Web Docs team and community using the [communication channels][].
37+
38+
[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels

‎feature-queries/not.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<body>
2525
<section class="preview">
2626
<div class="box">
27-
If your browser does not support row-gap, the content will be
28-
darkgreen with a dashed border.
27+
If your browser does not support row-gap, the content will be darkgreen
28+
with a dashed border.
2929
</div>
3030
</section>
3131

‎feature-queries/or.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<body>
2525
<section class="preview">
2626
<div class="box">
27-
The text and border will be green if your browser supports font smoothing.
27+
The text and border will be green if your browser supports font
28+
smoothing.
2829
</div>
2930
</section>
3031

‎feature-queries/simple.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<body>
2525
<section class="preview">
2626
<div class="box">
27-
If your browser supports row-gap, border will be be
28-
dashed and text will be darkgreen
27+
If your browser supports row-gap, border will be be dashed and text will
28+
be darkgreen
2929
</div>
3030
</section>
3131

‎learn/tasks/backgrounds/marking.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ h2 {
2020
}
2121
```
2222

23-
The student could use the individual border longhands however this is unecessarily verbose as all borders are set to the same color, style and size.
23+
The student could use the individual border longhands however this is unnecessarily verbose as all borders are set to the same color, style and size.
2424

2525
## Task 2
2626

@@ -43,7 +43,8 @@ There are also some elements which link back to earlier lessons:
4343
h2 {
4444
padding: 0 40px;
4545
text-align: center;
46-
background: url(star.png) no-repeat left center,
46+
background:
47+
url(star.png) no-repeat left center,
4748
url(star.png) repeat-y right center;
4849
}
4950
```

‎learn/tasks/box-model/marking.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
In this task the student needs to know that when using the alternate box model, the width is the size of the total of content, padding and border. Therefore to make it match the standard box model example they need to set the width to 390px.
66

7-
```
7+
```css
88
.alternate {
99
box-sizing: border-box;
1010
width: 390px;
@@ -15,7 +15,7 @@ In this task the student needs to know that when using the alternate box model,
1515

1616
This task involves the student using the margin, border and padding properties correctly. They might choose to use the longhand properties instead however in particular when setting the padding to all sides, the shorthand is probably the better choice.
1717

18-
```
18+
```css
1919
.box {
2020
border: 5px dotted black;
2121
margin: 20px 1em 40px 2em;
@@ -27,7 +27,7 @@ This task involves the student using the margin, border and padding properties c
2727

2828
In this task the student needs to know that by using `display: inline-block` the block direction margin, border and padding will cause the other lines to be pushed away from the element.
2929

30-
```
30+
```css
3131
.box span {
3232
background-color: pink;
3333
border: 5px solid black;

‎learn/tasks/cascade/marking.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
One possible solution is as follows:
66

7-
```
7+
```css
88
#outer #inner a {
99
background-color: initial;
1010
}
@@ -18,8 +18,8 @@ Then the student needs to remember there are special keyword values for all prop
1818

1919
One possible solution is as follows:
2020

21-
```
22-
@layer yellow, green, purple;
21+
```css
22+
@layer yellow, green, purple;
2323
```
2424

2525
There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows.

0 commit comments

Comments
 (0)