chore: Improvements to template files, formatter config

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/CODEOWNERS

@@ -0,0 +1,9 @@
+# This file is used to request PR reviews from the appropriate team.
+#
+# Order is important; the last matching pattern takes precedence.
+# Each rule is more specific than the previous rules.
+# For more information, see:
+# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners
+
+# Default
+* @mdn/core-yari-content

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,36 @@
+name: "Issue report"
+description: Report an unexpected problem or unintended behavior.
+labels: ["needs triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Before you start
+
+        **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
+
+        ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
+
+        ---
+  - type: textarea
+    id: problem
+    attributes:
+      label: What was incorrect, unhelpful, or incomplete?
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: references
+    attributes:
+      label: Do you have any supporting links, references, or citations?
+      description: Link to information that helps us confirm your issue.
+  - type: textarea
+    id: more-info
+    attributes:
+      label: Do you have anything more you want to share?
+      description: For example, steps to reproduce, screenshots, screen recordings, or sample code.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: MDN GitHub Discussions
+    url: https://github.com/orgs/mdn/discussions
+    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.
+  - name: MDN Web Docs on Discourse
+    url: https://discourse.mozilla.org/c/mdn/learn/250
+    about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse.
+  - name: Help with code
+    url: https://stackoverflow.com/
+    about: If you are stuck and need help with code, StackOverflow is a great resource.

.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,21 @@
+<!-- 🙌 Thanks for contributing to MDN Web Docs. Adding details below will help us to merge your PR faster. -->
+
+**Description:**
+
+<!-- ✍️ Summarize your changes in one or two sentences -->
+
+**Motivation:**
+
+<!-- ❓ Why are you making these changes and how do they help readers? -->
+
+**Additional details:**
+
+<!-- 🔗 Link to release notes, vendor docs, bug trackers, source control, or other places providing more context -->
+
+**Related issues and pull requests:**
+
+<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" -->
+<!-- 👉 Highlight related pull requests using "Relates to #123" -->
+<!-- ❗ If another pull request should be merged first, use "**Depends on:** #123" -->
+
+<!-- 👷‍♀️ After submitting, go to the "Checks" tab of your PR for the build status -->

.github/workflows/idle-issues.yml

@@ -0,0 +1,10 @@
+name: "Mark issues and pull requests as idle"
+on:
+  schedule:
+    - cron: "49 11,23 * * *"
+
+jobs:
+  idle:
+    uses: mdn/workflows/.github/workflows/idle.yml@main
+    with:
+      target-repo: "mdn/css-examples"

.github/workflows/lock-closed.yml

@@ -0,0 +1,10 @@
+name: "Lock old issues and pull requests"
+on:
+  schedule:
+    - cron: "0 9 1 * *"
+
+jobs:
+  lock:
+    uses: mdn/workflows/.github/workflows/lock-closed.yml@main
+    with:
+      target-repo: "mdn/css-examples"

.github/workflows/new-issues.yml

@@ -0,0 +1,17 @@
+name: "Mark new issues with needs-triage label"
+
+on:
+  issues:
+    types:
+      - reopened
+      - opened
+
+jobs:
+  label-new-issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: initial labelling
+        uses: andymckay/labeler@master
+        with:
+          add-labels: "needs triage"
+          ignore-if-assigned: true

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

@@ -0,0 +1,14 @@
+name: "Label PRs with conflicts"
+
+on:
+  push:
+  pull_request_target:
+    types: [synchronize]
+
+jobs:
+  label-merge-conflicts:
+    uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
+    with:
+      target-repo: "mdn/css-examples"
+    secrets:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.markdownlint-cli2.jsonc

@@ -0,0 +1,12 @@
+{
+  "config": {
+    "extends": "./.markdownlint.jsonc"
+  },
+  "ignores": [
+    "node_modules",
+    ".git",
+    ".github",
+    "tests",
+    "editable-samples/codemirror"
+  ]
+}

.markdownlint.jsonc

@@ -0,0 +1,8 @@
+// This file defines our configuration for Markdownlint. See
+// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
+// for more details on each rule.
+
+{
+  "first-line-heading": false,
+  "line-length": false
+}

.prettierignore

@@ -0,0 +1,3 @@
+editable-samples/codemirror/**/*
+editable-samples-2/js/
+.markdownlint*

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "bracketSameLine": true
+}

CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# Contribution guide
+
+This repository accompany various CSS documentation pages on [MDN Web Docs](https://developer.mozilla.org).
+This document will help you get started with contributions!
+
+## Types of contribution
+
+> [!NOTE]
+> 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.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
+
+There are many ways you can help improve this repository! For example:
+
+- **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.
+- **Improve an existing example.** You could make improvements or add some other changes which would make example more helpful to the users.
+- **Fix a bug:** we have a list of [issues](https://github.com/mdn/css-examples/issues), or maybe you found your own.
+
+## Getting started
+
+You will need to have Git and GitHub set up to be able to contribute.
+
+### Set up Git and GitHub
+
+For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/).
+With the above dependencies satisfied, [create your new account on GitHub](https://github.com/join).
+
+Next up, you need to fork and clone the repo to be able to contribute to it.
+You can [learn about forking on GitHub](https://help.github.com/articles/fork-a-repo).
+Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/).
+
+### Serving
+
+You should serve your example locally to see the results before submitting your changes.
+There are a few different ways to do this depending on your preferred tooling methods.
+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.
+
+```bash
+cd my-cool-example
+python3 -m http.server
+```
+
+### Open a pull request
+
+Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/).
+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.
+
+### Including your example on MDN
+
+After your pull request is reviewed and merged, you can link to your example from MDN Web Docs.
+For example, the <https://mdn.github.io/css-examples/counter-style-demo/> demo is referenced in MDN content like so:
+
+```markdown
+See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).
+```
+
+## Thank you
+
+Thanks a lot for your contribution!
+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

@@ -1,6 +1,11 @@
 # css-examples
 
-This repository contains examples of CSS usage.
+Code examples that accompany various MDN CSS documentation pages.
+
+> [!NOTE]
+> 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.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
 
 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).
 
@@ -10,10 +15,24 @@ The "moz-context-properties" directory contains a demo for the [-moz-context-pro
 
 The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
 
-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/).
+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/).
 
-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/).
+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/).
 
-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/).
+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/).
 
 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/).
+
+## Contribute to MDN Web Docs
+
+You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work.
+The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.
+
+To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository.
+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).
+
+## Get in touch
+
+You can communicate with the MDN Web Docs team and community using the [communication channels][].
+
+[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels

feature-queries/not.html

@@ -24,8 +24,8 @@
   <body>
     <section class="preview">
       <div class="box">
-        If your browser does not support row-gap, the content will be
-        darkgreen with a dashed border.
+        If your browser does not support row-gap, the content will be darkgreen
+        with a dashed border.
       </div>
     </section>
 

feature-queries/or.html

@@ -24,7 +24,8 @@
   <body>
     <section class="preview">
       <div class="box">
-        The text and border will be green if your browser supports font smoothing.
+        The text and border will be green if your browser supports font
+        smoothing.
       </div>
     </section>
 

feature-queries/simple.html

@@ -24,8 +24,8 @@
   <body>
     <section class="preview">
       <div class="box">
-        If your browser supports row-gap, border will be be 
-        dashed and text will be darkgreen
+        If your browser supports row-gap, border will be be dashed and text will
+        be darkgreen
       </div>
     </section>
 

learn/tasks/backgrounds/marking.md

@@ -20,7 +20,7 @@ h2 {
 }
 ```
 
-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.
+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.
 
 ## Task 2
 
@@ -43,7 +43,8 @@ There are also some elements which link back to earlier lessons:
 h2 {
   padding: 0 40px;
   text-align: center;
-  background: url(star.png) no-repeat left center,
+  background:
+    url(star.png) no-repeat left center,
     url(star.png) repeat-y right center;
 }
 ```

learn/tasks/box-model/marking.md

@@ -4,7 +4,7 @@
 
 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.
 
-```
+```css
 .alternate {
   box-sizing: border-box;
   width: 390px;
@@ -15,7 +15,7 @@ In this task the student needs to know that when using the alternate box model,
 
 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.
 
-```
+```css
 .box {
   border: 5px dotted black;
   margin: 20px 1em 40px 2em;
@@ -27,7 +27,7 @@ This task involves the student using the margin, border and padding properties c
 
 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.
 
-```
+```css
 .box span {
   background-color: pink;
   border: 5px solid black;

learn/tasks/cascade/marking.md

@@ -4,7 +4,7 @@
 
 One possible solution is as follows:
 
-```
+```css
 #outer #inner a {
   background-color: initial;
 }
@@ -18,8 +18,8 @@ Then the student needs to remember there are special keyword values for all prop
 
 One possible solution is as follows:
 
-```
- @layer yellow, green, purple;
+```css
+@layer yellow, green, purple;
 ```
 
 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.