docs: merge 7ba74ad and friends

This commit is contained in:
Pat Cavit 2017-03-28 11:37:07 -07:00
parent 000eec90d8
commit 207dea91da
10 changed files with 72 additions and 59 deletions

View file

@ -2,9 +2,9 @@
- [Structure](#structure) - [Structure](#structure)
- [Lifecycle methods](#lifecycle-methods) - [Lifecycle methods](#lifecycle-methods)
- [Syntactic variants](#syntactic-variants)
- [State](#state) - [State](#state)
- [ES6 classes](#es6-classes) - [Avoid anti-patterns](#avoid-anti-patterns)
- [Avoid-anti-patterns](#avoid-anti-patterns)
### Structure ### Structure
@ -101,7 +101,7 @@ To learn more about lifecycle methods, [see the lifecycle methods page](lifecycl
--- ---
### Alternate component syntaxes ### Syntactic variants
#### ES6 classes #### ES6 classes

View file

@ -8,13 +8,9 @@ var version = JSON.parse(fs.readFileSync("./package.json", "utf-8")).version
try {fs.mkdirSync("./dist")} catch (e) {/* ignore */} try {fs.mkdirSync("./dist")} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/archive")} catch (e) {/* ignore */} try {fs.mkdirSync("./dist/archive")} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/archive/v" + version)} catch (e) {/* ignore */} try {fs.mkdirSync("./dist/archive/v" + version)} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/archive/v" + version + "/lib")} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/archive/v" + version + "/lib/prism")} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/lib")} catch (e) {/* ignore */}
try {fs.mkdirSync("./dist/lib/prism")} catch (e) {/* ignore */}
var guides = fs.readFileSync("docs/guides.md", "utf-8") var guides = fs.readFileSync("docs/nav-guides.md", "utf-8")
var methods = fs.readFileSync("docs/methods.md", "utf-8") var methods = fs.readFileSync("docs/nav-methods.md", "utf-8")
var index = fs.readFileSync("docs/index.md", "utf-8") var index = fs.readFileSync("docs/index.md", "utf-8")
fs.writeFileSync("README.md", index.replace(/(\]\()(.+?)\.md(\))/g, "$1http://mithril.js.org/$2.html$3"), "utf-8") fs.writeFileSync("README.md", index.replace(/(\]\()(.+?)\.md(\))/g, "$1http://mithril.js.org/$2.html$3"), "utf-8")
@ -27,7 +23,7 @@ function generate(pathname) {
generate(pathname + "/" + filename) generate(pathname + "/" + filename)
}) })
} }
else if (!pathname.match(/tutorials|archive|guides|methods/)) { else if (!pathname.match(/tutorials|archive|nav-/)) {
if (pathname.match(/\.md$/)) { if (pathname.match(/\.md$/)) {
var outputFilename = pathname.replace(/\.md$/, ".html") var outputFilename = pathname.replace(/\.md$/, ".html")
var markdown = fs.readFileSync(pathname, "utf-8") var markdown = fs.readFileSync(pathname, "utf-8")
@ -55,7 +51,9 @@ function generate(pathname) {
.replace(/\[version\]/, version) // update version .replace(/\[version\]/, version) // update version
.replace(/\[body\]/, markedHtml) .replace(/\[body\]/, markedHtml)
.replace(/<h(.) id="([^"]+?)">(.+?)<\/h.>/gim, function(match, n, id, text) { // fix anchors .replace(/<h(.) id="([^"]+?)">(.+?)<\/h.>/gim, function(match, n, id, text) { // fix anchors
return "<h" + n + ' id="' + text.toLowerCase().replace(/<(\/?)code>/g, "").replace(/<a.*?>.+?<\/a>/g, "").replace(/\.|\[|\]|&quot;|\/|\(|\)/g, "").replace(/\s/g, "-") + '">' + text + "</h" + n + ">" var anchor = text.toLowerCase().replace(/<(\/?)code>/g, "").replace(/<a.*?>.+?<\/a>/g, "").replace(/\.|\[|\]|&quot;|\/|\(|\)/g, "").replace(/\s/g, "-");
return `<h${n} id="${anchor}"><a href="#${anchor}">${text}</a></h${n}>`;
}) })
fs.writeFileSync("./dist/archive/v" + version + "/" + outputFilename.replace(/^docs\//, ""), html, "utf-8") fs.writeFileSync("./dist/archive/v" + version + "/" + outputFilename.replace(/^docs\//, ""), html, "utf-8")
fs.writeFileSync("./dist/" + outputFilename.replace(/^docs\//, ""), html, "utf-8") fs.writeFileSync("./dist/" + outputFilename.replace(/^docs\//, ""), html, "utf-8")

View file

@ -69,7 +69,7 @@ Let's create an HTML file to follow along:
### Hello world ### Hello world
Let's start as small as well can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out - you'll learn better) Let's start as small as we can: render some text on screen. Copy the code below into your file (and by copy, I mean type it out - you'll learn better)
```javascript ```javascript
var root = document.body var root = document.body

View file

@ -2,8 +2,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Mithril.js</title> <title>Mithril.js</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="lib/prism/prism.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
@ -27,7 +26,8 @@
<small>License: MIT. &copy; Leo Horie.</small> <small>License: MIT. &copy; Leo Horie.</small>
</section> </section>
</main> </main>
<script src="lib/prism/prism.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-jsx.min.js"></script>
<script> <script>
document.querySelector(".hamburger").onclick = function() { document.querySelector(".hamburger").onclick = function() {
document.body.className = document.body.className === "navigating" ? "" : "navigating" document.body.className = document.body.className === "navigating" ? "" : "navigating"

View file

@ -1,6 +0,0 @@
.token.comment,.token.prolog,.token.doctype,.token.cdata {color:#888;}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol {color:#905;}
.token.selector,.token.attr-name,.token.string,.token.builtin {color:#690;}
.token.atrule,.token.attr-value,.token.punctuation,.token.keyword {color:#1e5799;}
.token.regex,.token.important {color:#e90;}

File diff suppressed because one or more lines are too long

View file

@ -1,36 +1,49 @@
# Releasing # Releasing
Releasing new builds of mithril is mostly automated via `npm version`
## Publishing to NPM ## Publishing to NPM
1. `npm run release <major|minor|patch|semver>` Releasing new builds of mithril to NPM is mostly automated via `npm run release`
1. Update information in `docs/change-log.md` to match reality & the new version that will be released
2. `npm run release <major|minor|patch|semver>`
All further steps are automated and run as follows: All further steps are automated and run as follows:
2. New bundles are generated using updated version 3. New bundles are generated using updated version
3. Tests are run 4. Tests are run
4. Linting is run (but doesn't fail build) 5. Linting is run (but doesn't fail build)
5. Version number in package.json is incremented 6. Version number in package.json is incremented
6. `git add` called on bundle output 7. `git add` called on bundle output
7. `package.json` and updated bundles are committed to git 8. `package.json` and updated bundles are committed to git
8. previous commit is tagged using new version number 9. previous commit is tagged using new version number
9. `git push --follow-tags` pushes up new version commit & tag to github 10. `git push --follow-tags` pushes up new version commit & tag to github
10. Travis sees new release, starts build 11. Travis sees new release, starts build
11. Travis generates new bundles before running tests 12. Travis generates new bundles before running tests
12. Travis runs tests 13. Travis runs tests
13. Travis lints files (but can't fail build) 14. Travis lints files (but can't fail build)
14. If build fails, abort 15. If build fails, abort
15. Build succeeded, so travis will commit back any changes to the repo (but there won't be any) 16. Build succeeded, so travis will commit back any changes to the repo (but there won't be any)
16. Travis sees that this commit has a tag associated with it 17. Travis sees that this commit has a tag associated with it
17. Travis will use the encrypted npm creds in `.travis.yml` to publish a new version to npm 18. Travis will use the encrypted npm creds in `.travis.yml` to publish a new version to npm
## Publishing a GitHub release ## Publishing a GitHub release
Happens automatically as part of the [Publishing to NPM](#publishing-to-npm) process described above. Happens automatically as part of the [Publishing to NPM](#publishing-to-npm) process described above.
Does require a manual description to be added though, as the auto-generated one isn't very interesting. Does require a manual description to be added though, as the auto-generated one isn't very interesting. I suggest coming up with a fun title & then copying the `docs/change-log.md` entry for the build.
## Updating `docs/change-log.md` ## Updating `docs/change-log.md`
**TODO** This is still a manual process, I'm sorry.
## Updating docs (outside of a new version)
Fixes to documentation can land whenever, updates to the site are published via Travis.
1. `git co next`
2. `git pull lhorie next`
3. `git co master`
4. `git co next -- ./docs`
5. Ensure that no new features are added
6. `git push lhorie`
7. After the Travis build completes new docs should appear in ~3 minutes

View file

@ -6,17 +6,10 @@ nav a {border-left:1px solid #ddd;padding:0 10px;}
nav a:first-child {border:0;padding-left:0;} nav a:first-child {border:0;padding-left:0;}
main {margin-bottom:100px;} main {margin-bottom:100px;}
main section {margin-left:270px;} main section {margin-left:270px;}
h1 {font-size:24px;margin:0 0 15px;}
h2 {font-size:22px;margin:45px 0 15px;}
h3 {font-size:20px;margin:45px 0 15px;}
h4 {font-size:18px;margin:30px 0 15px;}
h5 {font-weight:bold;margin:15px 0 15px;}
h1 img {transform:rotate(180deg);vertical-align:middle;width:20px;}
h1 small {font-size:16px;}
p {margin:0 0 15px;} p {margin:0 0 15px;}
pre,code {background:#eee;font-family:monospace;font-size:14px;} pre,code {background:#eee;font-family:monospace;font-size:14px;}
pre {border-left:3px solid #1e5799;overflow:auto;padding:10px 20px;} pre {border-left:3px solid #1e5799;overflow:auto;padding:10px 20px;margin:20px 0;}
code {border:1px solid #ddd;display:inline-block;margin:0 0 1px;padding:3px;white-space:pre;} code {border:1px solid #ddd;display:inline-block;margin:0 0 1px;padding:5px 3px;white-space:pre;}
pre code {border:0;margin:0;padding:0;} pre code {border:0;margin:0;padding:0;}
table {border-collapse:collapse;margin:0 0 30px;width:100%;} table {border-collapse:collapse;margin:0 0 30px;width:100%;}
tbody tr:nth-child(odd) {background:#fafafa;} tbody tr:nth-child(odd) {background:#fafafa;}
@ -28,6 +21,21 @@ a {color:#1e5799;text-decoration:none;}
a:hover {text-decoration:underline;} a:hover {text-decoration:underline;}
hr {border:0;border-bottom:1px solid #ddd;margin:30px 0;} hr {border:0;border-bottom:1px solid #ddd;margin:30px 0;}
/* Headings */
h1,h2,h3,h4,h5 {position:relative}
h1 {font-size:24px;margin:0 0 15px;}
h2 {font-size:22px;margin:45px 0 15px;}
h3 {font-size:20px;margin:45px 0 15px;}
h4 {font-size:18px;margin:30px 0 15px;}
h5 {font-weight:bold;margin:15px 0 15px;}
h1 img {transform:rotate(180deg);vertical-align:middle;width:20px;}
h1 small {font-size:16px;}
h2 a,h3 a,h4 a,h5 a,
h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,
h2 a:active,h3 a:active,h4 a:active,h5 a:active,
h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited {color:#000;text-decoration:none;}
h2::before,h3::before,h4::before,h5::before {content:"#";position:absolute;left:-20px;visibility:hidden;}
h2:hover::before,h3:hover::before,h4:hover::before,h5:hover::before {visibility:visible;}
#signature + p code {padding:3px 10px;} #signature + p code {padding:3px 10px;}
h1 + ul {margin:40px 0 0 -270px;padding:0;position:absolute;width:250px;} h1 + ul {margin:40px 0 0 -270px;padding:0;position:absolute;width:250px;}
h1 + ul + hr {display:none;} h1 + ul + hr {display:none;}
@ -80,3 +88,10 @@ h1 + ul strong + ul {border-left:3px solid #1e5799;}
nav,h1 + ul {display:none;} nav,h1 + ul {display:none;}
main section {margin:0;} main section {margin:0;}
} }
/* prism theming */
.token.comment,.token.prolog,.token.doctype,.token.cdata {color:#888;}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol {color:#905;}
.token.selector,.token.attr-name,.token.string,.token.builtin {color:#690;}
.token.atrule,.token.attr-value,.token.punctuation,.token.keyword {color:#1e5799;}
.token.regex,.token.important {color:#e90;}