You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+35-28Lines changed: 35 additions & 28 deletions
Original file line number
Diff line number
Diff line change
@@ -35,26 +35,29 @@ If you're not familiar with [`git`](https://git-scm.com) and
35
35
helpful.
36
36
37
37
There are several ways forward from this point. It's up to you. Here are some options:
38
-
1. Go to https://github.com/mdn/content and just use the [GitHub UI](https://docs.github.com/en/free-pro-team@latest/github/managing-files-in-a-repository/managing-files-on-github). This is the easiest approach if you just want to make a simple change to a single file, like fixing a typo.
38
+
39
+
1. Go to <https://github.com/mdn/content> and just use the [GitHub UI](https://docs.github.com/en/free-pro-team@latest/github/managing-files-in-a-repository/managing-files-on-github). This is the easiest approach if you just want to make a simple change to a single file, like fixing a typo.
39
40
1. Install and use the [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/github-desktop)
40
41
1. Install and use the [GitHub CLI](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/github-cli)
41
42
1.[Install `git`](https://git-scm.com/downloads) and use it from the command line. You might find these resources helpful:
If you choose an option other than the GitHub UI, you want to install
46
47
[Node.js (version >=12.11)](https://nodejs.org) and [`yarn`](https://classic.yarnpkg.com/en/docs/install).
47
48
48
49
### Fundamental content concepts
49
50
50
51
These are some important things to keep in mind about the MDN content.
51
-
-**Documents are folders** -- Documents are always
52
+
53
+
***Documents are folders** -- Documents are always
52
54
represented by a folder (e.g., [`files/en-us/web/javascript`](files/en-us/web/javascript)), and that folder will contain the content of that specific document as an
-**Documents are hierarchical** - A document folder may contain other folders, where those folders would represent child documents (e.g., [`files/en-us/web/javascript/closures/index.html`](files/en-us/web/javascript/closures/index.html)).
55
-
-**Document folders may contain image files** -- A document folder may also contain image files, which are referenced within that document's `index.html` file.
56
-
-**All redirects are specified in a single file** -- All of the redirects are specified within [`files/en-us/_redirects.txt`](files/en-us/_redirects.txt), one redirect per line. Each line specifies a `from` and `to` URI separated by whitespace. When you move a document, you'll need to add a redirect to this file specifying that its old URI now redirects to its new URI. If both an `index.html` file and a redirect exist for a document, the document takes precedence and the redirect is ignored.
57
-
-**A document's `index.html` starts with "front-matter"** -- Each document's `index.html` file must begin with some YAML called front-matter that defines some important information about the document: `title`, `slug`, and [`tags`](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) (if any). Here's an example that shows the front-matter from the [JavaScript landing page](files/en-us/web/javascript/index.html):
56
+
***Documents are hierarchical** - A document folder may contain other folders, where those folders would represent child documents (e.g., [`files/en-us/web/javascript/closures/index.html`](files/en-us/web/javascript/closures/index.html)).
57
+
***Document folders may contain image files** -- A document folder may also contain image files, which are referenced within that document's `index.html` file.
58
+
***All redirects are specified in a single file** -- All of the redirects are specified within [`files/en-us/_redirects.txt`](files/en-us/_redirects.txt), one redirect per line. Each line specifies a `from` and `to` URI separated by whitespace. When you move a document, you'll need to add a redirect to this file specifying that its old URI now redirects to its new URI. If both an `index.html` file and a redirect exist for a document, the document takes precedence and the redirect is ignored.
59
+
***A document's `index.html` starts with "front-matter"** -- Each document's `index.html` file must begin with some YAML called front-matter that defines some important information about the document: `title`, `slug`, and [`tags`](https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) (if any). Here's an example that shows the front-matter from the [JavaScript landing page](files/en-us/web/javascript/index.html):
60
+
58
61
```yaml
59
62
---
60
63
title: JavaScript
@@ -73,7 +76,7 @@ represented by a folder (e.g., [`files/en-us/web/javascript`](files/en-us/web/ja
73
76
If you just want to make a simple change to a single file, like fixing a typo, the
74
77
GitHub UI is the simplest way to do that. For example, if you've found
75
78
a typo within the [JavaScript landing page](files/en-us/web/javascript/index.html),
76
-
you can sign into GitHub, go to https://github.com/mdn/content, navigate to
79
+
you can sign into GitHub, go to <https://github.com/mdn/content>, navigate to
77
80
`files/en-us/web/javascript/index.html`, and then click on the edit (pencil) button. From there the GitHub UI will take your hand and
78
81
[walk you through the rest](https://docs.github.com/en/free-pro-team@latest/github/managing-files-in-a-repository/editing-files-in-your-repository),
79
82
like automatically creating a
@@ -149,7 +152,7 @@ and use it to make a pull request.
149
152
150
153
1. Next, you'll want to start the local preview service, so you can see the changes
151
154
you'll make as they would look in production. Once started, this local preview
152
-
service is available at http://localhost:5000 within your browser.
155
+
service is available at `http://localhost:5000` within your browser.
153
156
154
157
```sh
155
158
# Switch to a separate terminal.
@@ -193,20 +196,20 @@ service is available at http://localhost:5000 within your browser.
193
196
1. Make your desired changes to one or more `index.html` files using
194
197
your preferred code editor. **When thinking about your desired changes, it's
is generated from the `npm` package created from the https://github.com/mdn/browser-compat-data
464
+
is generated from the `npm` package created from the <https://github.com/mdn/browser-compat-data>
458
465
repository. If you'd like to make or suggest a change to the content of the browser-compatibility
459
466
table on any given MDN document page, you can either use the `Report problems with this data on GitHub` link in the upper-right corner of the table on the page itself to create an issue,
460
-
or go to https://github.com/mdn/browser-compat-data and
467
+
or go to <https://github.com/mdn/browser-compat-data> and
461
468
[read more to learn how to contribute](https://github.com/mdn/browser-compat-data/blob/master/docs/contributing.md).
462
469
463
470
### Adding code examples
464
471
465
472
There are a lot of code examples on MDN, and you'll probably want to add some as you contribute content to the project. There are four types of code example used on MDN:
466
473
467
-
-[Static examples](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Static_examples) — plain code blocks, possibly with a screenshot to statically show the
474
+
* [Static examples](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Static_examples) — plain code blocks, possibly with a screenshot to statically show the
468
475
result of such code if it were to be run.
469
-
-[Traditional MDN "live samples"](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Traditional_live_samples) — A macro that takes plain code blocks, dynamically puts
476
+
* [Traditional MDN "live samples"](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Traditional_live_samples) — A macro that takes plain code blocks, dynamically puts
470
477
them into a document inside an `<iframe>` element, and embeds it into the page to show the
471
478
code running live.
472
-
-[GitHub "live samples"](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#GitHub_live_samples) — A macro that takes a document in a GitHub repo inside the [`mdn
473
-
organization`](https://github.com/mdn), puts it inside an `<iframe>` element, and embeds
479
+
* [GitHub "live samples"](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#GitHub_live_samples) — A macro that takes a document in a GitHub repo inside the [mdn
480
+
organization](https://github.com/mdn), puts it inside an `<iframe>` element, and embeds
474
481
it into the page to show the code running live.
475
-
-[Interactive examples](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Interactive_examples) — Our system for creating live interactive examples that show the
482
+
* [Interactive examples](https://developer.mozilla.org/en-US/docs/MDN/Structures/Code_examples#Interactive_examples) — Our system for creating live interactive examples that show the
476
483
code running live but also allow you to change code on the fly to see what the effect is.
Also make sure that your code examples follow the [MDN code example guidelines](https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines).
488
+
Also make sure that your code examples follow the [MDN code example guidelines](https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines).
482
489
483
490
### Archiving and unarchiving pages
484
491
@@ -488,8 +495,8 @@ If you find a page that is marked archived and you think it shouldn't be, you ca
488
495
489
496
* Submit an issue to check why the page is archived and if it should be unarchived.
490
497
* Find the source code location of the archived page. Archived pages live in the [Archived content](https://github.com/mdn/archived-content/) repo, the structure of which is the same as this repo (except that there are also locale directories present other than `en-US`). As an example:
491
-
* Take the archived [Mobile developer challenge](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Mobile_developer_challenge) page, which is at the URL `https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Mobile_developer_challenge`.
492
-
* This page's source code is at [https://github.com/mdn/archived-content/blob/main/files/en-us/mozilla/mobile/mobile_developer_challenge/index.html](https://github.com/mdn/archived-content/blob/main/files/en-us/mozilla/mobile/mobile_developer_challenge/index.html).
498
+
* Take the archived [Mobile developer challenge](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Mobile_developer_challenge) page, which is at the URL `https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Mobile_developer_challenge`.
499
+
* This page's source code is at [https://github.com/mdn/archived-content/blob/main/files/en-us/mozilla/mobile/mobile_developer_challenge/index.html](https://github.com/mdn/archived-content/blob/main/files/en-us/mozilla/mobile/mobile_developer_challenge/index.html).
493
500
* To unarchive the page, you need to open a pull request to move the page's directory into the appropriate place inside this repo, and update the page's meta data (like `slug`) if needed.
494
501
495
502
Note: To archive a currently-non-archived page, you need to follow the above procedure, but move the page in question the opposite way between repos.
@@ -504,5 +511,5 @@ Sometimes you'll want to make a change to the content that relies on a macro cha
504
511
505
512
In such situations:
506
513
507
-
1. Make the required PR to `https://github.com/mdn/yari/blob/master/kumascript/macros/` first, and get that merged.
514
+
1. Make the required PR to <https://github.com/mdn/yari/blob/master/kumascript/macros/> first, and get that merged.
0 commit comments