From 1fdc16ab1f2284a12cabd4c4f19e8616cedf50ee Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Thu, 28 Feb 2019 16:36:51 +0100 Subject: [PATCH 01/12] chore: Authors and section fields added. --- src/documentation/0001-node-introduction/index.md | 2 +- src/documentation/0002-node-history/index.md | 2 +- src/documentation/0003-node-installation/index.md | 2 +- .../0004-node-javascript-language/index.md | 2 +- .../0005-node-difference-browser/index.md | 2 +- src/documentation/0006-v8/index.md | 5 +++-- src/documentation/0007-node-run-cli/index.md | 3 ++- .../0008-node-terminate-program/index.md | 3 ++- .../0009-node-environment-variables/index.md | 3 ++- src/documentation/0010-node-hosting/index.md | 3 ++- src/documentation/0011-node-repl/index.md | 3 ++- src/documentation/0012-node-cli-args/index.md | 3 ++- src/documentation/0013-node-output-to-cli/index.md | 3 ++- src/documentation/0014-node-input-from-cli/index.md | 3 ++- src/documentation/0015-node-export-module/index.md | 3 ++- src/documentation/0016-npm/index.md | 3 ++- .../0017-where-npm-install-packages/index.md | 3 ++- .../0018-how-to-use-npm-package/index.md | 3 ++- src/documentation/0019-package-json/index.md | 13 +++++++------ src/documentation/0020-package-lock-json/index.md | 3 ++- .../0021-npm-know-version-installed/index.md | 3 ++- .../index.md | 3 ++- .../0023-update-npm-dependencies/index.md | 3 ++- .../0024-npm-semantic-versioning/index.md | 3 ++- .../0025-npm-uninstall-packages/index.md | 3 ++- .../0026-npm-packages-local-global/index.md | 3 ++- .../0027-npm-dependencies-devdependencies/index.md | 3 ++- src/documentation/0028-npx/index.md | 3 ++- src/documentation/0029-node-event-loop/index.md | 3 ++- .../0030-node-process-nexttick/index.md | 3 ++- src/documentation/0031-node-setimmediate/index.md | 3 ++- src/documentation/0032-javascript-timers/index.md | 3 ++- .../0033-javascript-callbacks/index.md | 3 ++- src/documentation/0034-javascript-promises/index.md | 3 ++- .../0035-javascript-async-await/index.md | 3 ++- src/documentation/0036-node-event-emitter/index.md | 3 ++- src/documentation/0037-node-http-server/index.md | 3 ++- .../0038-node-make-http-requests/index.md | 3 ++- src/documentation/0039-node-http-post/index.md | 3 ++- src/documentation/0040a-node-request-data/index.md | 3 ++- .../0040b-node-file-descriptors/index.md | 3 ++- src/documentation/0041-node-file-stats/index.md | 3 ++- src/documentation/0042-node-file-paths/index.md | 3 ++- src/documentation/0043-node-reading-files/index.md | 3 ++- src/documentation/0044-node-writing-files/index.md | 3 ++- src/documentation/0045-node-folders/index.md | 3 ++- src/documentation/0046-node-module-fs/index.md | 3 ++- src/documentation/0047-node-module-path/index.md | 3 ++- src/documentation/0048-node-module-os/index.md | 3 ++- src/documentation/0049-node-module-events/index.md | 3 ++- src/documentation/0050-node-module-http/index.md | 7 ++++--- src/documentation/0051-node-buffers/index.md | 3 ++- src/documentation/0052-nodejs-streams/index.md | 3 ++- .../0053-node-difference-dev-prod/index.md | 3 ++- src/documentation/0054-node-exceptions/index.md | 3 ++- src/documentation/0055-node-inspect-object/index.md | 3 ++- 56 files changed, 115 insertions(+), 64 deletions(-) diff --git a/src/documentation/0001-node-introduction/index.md b/src/documentation/0001-node-introduction/index.md index 9c939ba835..062fbd1f5a 100644 --- a/src/documentation/0001-node-introduction/index.md +++ b/src/documentation/0001-node-introduction/index.md @@ -1,7 +1,7 @@ --- title: Introduction to Node.js description: "This post is a getting started guide to Node.js, the server-side JavaScript runtime environment. Node.js is built on top of the Google Chrome V8 JavaScript engine, and it's mainly used to create web servers - but it's not limited to that" -author: flaviocopes +authors: flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes section: Quick Start --- diff --git a/src/documentation/0002-node-history/index.md b/src/documentation/0002-node-history/index.md index 0699674a90..3b0936dfe5 100644 --- a/src/documentation/0002-node-history/index.md +++ b/src/documentation/0002-node-history/index.md @@ -1,7 +1,7 @@ --- title: A brief history of Node.js description: 'A look back on the history of Node.js from 2009 to today' -author: flaviocopes +authors: flaviocopes section: Quick Start --- diff --git a/src/documentation/0003-node-installation/index.md b/src/documentation/0003-node-installation/index.md index d9b2b46048..f212757ab6 100644 --- a/src/documentation/0003-node-installation/index.md +++ b/src/documentation/0003-node-installation/index.md @@ -1,7 +1,7 @@ --- title: How to install Node.js description: 'How you can install Node.js on your system: a package manager, the official website installer or nvm' -author: flaviocopes +authors: flaviocopes section: Quick Start --- diff --git a/src/documentation/0004-node-javascript-language/index.md b/src/documentation/0004-node-javascript-language/index.md index eed2fa3500..4a9078f0a9 100644 --- a/src/documentation/0004-node-javascript-language/index.md +++ b/src/documentation/0004-node-javascript-language/index.md @@ -1,7 +1,7 @@ --- title: How much JavaScript do you need to know to use Node.js? description: 'If you are just starting out with JavaScript, how deeply do you need to know the language?' -author: flaviocopes +authors: flaviocopes section: Quick Start --- diff --git a/src/documentation/0005-node-difference-browser/index.md b/src/documentation/0005-node-difference-browser/index.md index 596efd0325..62a43cd0bf 100644 --- a/src/documentation/0005-node-difference-browser/index.md +++ b/src/documentation/0005-node-difference-browser/index.md @@ -1,7 +1,7 @@ --- title: Differences between Node.js and the Browser description: 'How writing JavaScript application in Node.js differs from programming for the Web inside the browser' -author: flaviocopes +authors: flaviocopes section: Quick Start --- diff --git a/src/documentation/0006-v8/index.md b/src/documentation/0006-v8/index.md index ca06b12eff..9a0cd6d117 100644 --- a/src/documentation/0006-v8/index.md +++ b/src/documentation/0006-v8/index.md @@ -1,7 +1,8 @@ --- title: The V8 JavaScript Engine description: "V8 is the name of the JavaScript engine that powers Google Chrome. It's the thing that takes our JavaScript and executes it while browsing with Chrome. V8 provides the runtime environment in which JavaScript executes. The DOM and the other Web Platform APIs are provided by the browser." -author: flaviocopes +authors: flaviocopes +section: Getting Started --- V8 is the name of the JavaScript engine that powers Google Chrome. It's the thing that takes our JavaScript and executes it while browsing with Chrome. @@ -28,7 +29,7 @@ All those engines implement the ECMA ES-262 standard, also called ECMAScript, th V8 is written in C++, and it's continuously improved. It is portable and runs on Mac, Windows, Linux and several other systems. -In this V8 introduction, we will ignore the implementation details of V8: they can be found on more authoritative sites (e.g. the V8 official site), and they change over time, often radically. +In this V8 introduction, we will ignore the implementation details of V8: they can be found on more authorsitative sites (e.g. the V8 official site), and they change over time, often radically. V8 is always evolving, just like the other JavaScript engines around, to speed up the Web and the Node.js ecosystem. diff --git a/src/documentation/0007-node-run-cli/index.md b/src/documentation/0007-node-run-cli/index.md index d9fadef42a..8a5ba8047d 100644 --- a/src/documentation/0007-node-run-cli/index.md +++ b/src/documentation/0007-node-run-cli/index.md @@ -1,7 +1,8 @@ --- title: Run Node.js scripts from the command line description: 'How to run any Node.js script from the CLI' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The usual way to run a Node.js program is to call the `node` globally available command (once you install Node.js) and pass the name of the file you want to execute. diff --git a/src/documentation/0008-node-terminate-program/index.md b/src/documentation/0008-node-terminate-program/index.md index a7f1bc9ce6..b9cac0d363 100644 --- a/src/documentation/0008-node-terminate-program/index.md +++ b/src/documentation/0008-node-terminate-program/index.md @@ -1,7 +1,8 @@ --- title: How to exit from a Node.js program description: 'Learn how to terminate a Node.js app in the best possible way' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- There are various ways to terminate a Node.js application. diff --git a/src/documentation/0009-node-environment-variables/index.md b/src/documentation/0009-node-environment-variables/index.md index 95f7751369..ff99fe4f24 100644 --- a/src/documentation/0009-node-environment-variables/index.md +++ b/src/documentation/0009-node-environment-variables/index.md @@ -1,7 +1,8 @@ --- title: How to read environment variables from Node.js description: 'Learn how to read and make use of environment variables in a Node.js program' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The `process` core module of Node.js provides the `env` property which hosts all the environment variables that were set at the moment the process was started. diff --git a/src/documentation/0010-node-hosting/index.md b/src/documentation/0010-node-hosting/index.md index 158ca0aba3..86b37e7815 100644 --- a/src/documentation/0010-node-hosting/index.md +++ b/src/documentation/0010-node-hosting/index.md @@ -1,7 +1,8 @@ --- title: Where to host a Node.js app description: 'A Node.js application can be hosted in a lot of places, depending on your needs. This is a list of all the various options you have at your disposal' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Here is a non-exhaustive list of the options you can explore when you want to deploy your app and make it publicly accessible. diff --git a/src/documentation/0011-node-repl/index.md b/src/documentation/0011-node-repl/index.md index 2afc2fe122..a32a9b619c 100644 --- a/src/documentation/0011-node-repl/index.md +++ b/src/documentation/0011-node-repl/index.md @@ -1,7 +1,8 @@ --- title: How to use the Node.js REPL description: "REPL stands for Read-Evaluate-Print-Loop, and it's a great way to explore the Node.js features in a quick way" -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The `node` command is the one we use to run our Node.js scripts: diff --git a/src/documentation/0012-node-cli-args/index.md b/src/documentation/0012-node-cli-args/index.md index e677659688..1662d9b2e3 100644 --- a/src/documentation/0012-node-cli-args/index.md +++ b/src/documentation/0012-node-cli-args/index.md @@ -1,7 +1,8 @@ --- title: Node.js, accept arguments from the command line description: 'How to accept arguments in a Node.js program passed from the command line' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- You can pass any number of arguments when invoking a Node.js application using diff --git a/src/documentation/0013-node-output-to-cli/index.md b/src/documentation/0013-node-output-to-cli/index.md index 9b79cf686f..cc4dbcba04 100644 --- a/src/documentation/0013-node-output-to-cli/index.md +++ b/src/documentation/0013-node-output-to-cli/index.md @@ -1,7 +1,8 @@ --- title: Output to the command line using Node.js description: 'How to print to the command line console using Node.js, from the basic console.log to more complex scenarios' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Basic output using the console module diff --git a/src/documentation/0014-node-input-from-cli/index.md b/src/documentation/0014-node-input-from-cli/index.md index 9237247764..fc95a22d4b 100644 --- a/src/documentation/0014-node-input-from-cli/index.md +++ b/src/documentation/0014-node-input-from-cli/index.md @@ -1,7 +1,8 @@ --- title: Accept input from the command line in Node.js description: 'How to make a Node.js CLI program interactive using the built-in readline Node.js module' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- How to make a Node.js CLI program interactive? diff --git a/src/documentation/0015-node-export-module/index.md b/src/documentation/0015-node-export-module/index.md index c0c42629d2..693fb64763 100644 --- a/src/documentation/0015-node-export-module/index.md +++ b/src/documentation/0015-node-export-module/index.md @@ -1,7 +1,8 @@ --- title: Expose functionality from a Node.js file using exports description: 'How to use the module.exports API to expose data to other files in your application, or to other applications as well' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Node.js has a built-in module system. diff --git a/src/documentation/0016-npm/index.md b/src/documentation/0016-npm/index.md index 7b5adfa18a..d6c87ec249 100644 --- a/src/documentation/0016-npm/index.md +++ b/src/documentation/0016-npm/index.md @@ -1,7 +1,8 @@ --- title: An introduction to the npm package manager description: 'A quick guide to npm, the powerful package manager key to the success of Node.js. In January 2017 over 350000 packages were reported being listed in the npm registry, making it the biggest single language code repository on Earth, and you can be sure there is a package for (almost!) everything.' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Introduction to npm diff --git a/src/documentation/0017-where-npm-install-packages/index.md b/src/documentation/0017-where-npm-install-packages/index.md index 37a586da76..5e80709eba 100644 --- a/src/documentation/0017-where-npm-install-packages/index.md +++ b/src/documentation/0017-where-npm-install-packages/index.md @@ -1,7 +1,8 @@ --- title: Where does npm install the packages? description: 'How to find out where npm installs the packages' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you install a package using `npm` you can perform 2 types of installation: diff --git a/src/documentation/0018-how-to-use-npm-package/index.md b/src/documentation/0018-how-to-use-npm-package/index.md index 31483dac2f..d7d5109269 100644 --- a/src/documentation/0018-how-to-use-npm-package/index.md +++ b/src/documentation/0018-how-to-use-npm-package/index.md @@ -1,7 +1,8 @@ --- title: How to use or execute a package installed using npm description: 'How to include and use in your code a package installed in your node_modules folder' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you install using `npm` a package into your `node_modules` folder, or also globally, how do you use it in your Node.js code? diff --git a/src/documentation/0019-package-json/index.md b/src/documentation/0019-package-json/index.md index 1ddb519d7b..8e9a84dc6e 100644 --- a/src/documentation/0019-package-json/index.md +++ b/src/documentation/0019-package-json/index.md @@ -1,7 +1,8 @@ --- title: The package.json guide description: 'The package.json file is a key element in lots of app codebases based on the Node.js ecosystem.' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- If you work with JavaScript, or you've ever interacted with a JavaScript project, Node.js or a frontend project, you surely met the `package.json` file. @@ -148,15 +149,15 @@ This is because when a package is published on `npm`, it gets its own URL based If you published this package publicly on GitHub, a good value for this property is the GitHub repository name. -### `author` +### `authors` -Lists the package author name +Lists the package authors name Example: ```json { - "author": "Joe (https://whatever.com)" + "authors": "Joe (https://whatever.com)" } ``` @@ -164,7 +165,7 @@ Can also be used with this format: ```json { - "author": { + "authors": { "name": "Joe", "email": "joe@whatever.com", "url": "https://whatever.com" @@ -174,7 +175,7 @@ Can also be used with this format: ### `contributors` -As well as the author, the project can have one or more contributors. This property is an array that lists them. +As well as the authors, the project can have one or more contributors. This property is an array that lists them. Example: diff --git a/src/documentation/0020-package-lock-json/index.md b/src/documentation/0020-package-lock-json/index.md index bc0923b9ae..b821d30e3c 100644 --- a/src/documentation/0020-package-lock-json/index.md +++ b/src/documentation/0020-package-lock-json/index.md @@ -1,7 +1,8 @@ --- title: The package-lock.json file description: "The package-lock.json file is automatically generated when installing node packages. Learn what it's about" -author: flaviocopes +authors: flaviocopes +section: Getting Started --- In version 5, npm introduced the `package-lock.json` file. diff --git a/src/documentation/0021-npm-know-version-installed/index.md b/src/documentation/0021-npm-know-version-installed/index.md index e9d7b5da98..dec40aab7c 100644 --- a/src/documentation/0021-npm-know-version-installed/index.md +++ b/src/documentation/0021-npm-know-version-installed/index.md @@ -1,7 +1,8 @@ --- title: Find the installed version of an npm package description: 'How to find out which version of a particular package you have installed in your app' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- To see the latest version of all the npm package installed, including their dependencies: diff --git a/src/documentation/0022-npm-install-previous-package-version/index.md b/src/documentation/0022-npm-install-previous-package-version/index.md index f349348f8f..dae6a50ee3 100644 --- a/src/documentation/0022-npm-install-previous-package-version/index.md +++ b/src/documentation/0022-npm-install-previous-package-version/index.md @@ -1,7 +1,8 @@ --- title: Install an older version of an npm package description: 'Learn how to install an older version of an npm package, something that might be useful to solve a compatibility problem' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- You can install an old version of an npm package using the `@` syntax: diff --git a/src/documentation/0023-update-npm-dependencies/index.md b/src/documentation/0023-update-npm-dependencies/index.md index 4def2e5b3b..a81b8a0be1 100644 --- a/src/documentation/0023-update-npm-dependencies/index.md +++ b/src/documentation/0023-update-npm-dependencies/index.md @@ -1,7 +1,8 @@ --- title: Update all the Node.js dependencies to their latest version description: 'How do you update all the npm dependencies store in the package.json file, to their latest version available?' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you install a package using `npm install `, the latest available version of the package is downloaded and put in the `node_modules` folder, and a corresponding entry is added to the `package.json` and `package-lock.json` files that are present in your current folder. diff --git a/src/documentation/0024-npm-semantic-versioning/index.md b/src/documentation/0024-npm-semantic-versioning/index.md index c80286f4e4..e08388d477 100644 --- a/src/documentation/0024-npm-semantic-versioning/index.md +++ b/src/documentation/0024-npm-semantic-versioning/index.md @@ -1,7 +1,8 @@ --- title: Semantic Versioning using npm description: 'Semantic Versioning is a convention used to provide a meaning to versions' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- If there's one great thing in Node.js packages, is that all agreed on using Semantic Versioning for their version numbering. diff --git a/src/documentation/0025-npm-uninstall-packages/index.md b/src/documentation/0025-npm-uninstall-packages/index.md index b6f319873b..20df0f6d7c 100644 --- a/src/documentation/0025-npm-uninstall-packages/index.md +++ b/src/documentation/0025-npm-uninstall-packages/index.md @@ -1,7 +1,8 @@ --- title: Uninstalling npm packages description: 'How to uninstall an npm Node.js package, locally or globally' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- To uninstall a package you have previously installed **locally** (using `npm install ` in the `node_modules` folder, run diff --git a/src/documentation/0026-npm-packages-local-global/index.md b/src/documentation/0026-npm-packages-local-global/index.md index ea1e9ec215..fcd80a6b2f 100644 --- a/src/documentation/0026-npm-packages-local-global/index.md +++ b/src/documentation/0026-npm-packages-local-global/index.md @@ -1,7 +1,8 @@ --- title: npm global or local packages description: 'When is a package best installed globally? Why?' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The main difference between local and global packages is this: diff --git a/src/documentation/0027-npm-dependencies-devdependencies/index.md b/src/documentation/0027-npm-dependencies-devdependencies/index.md index 0d2aaaaf54..f60bb653a1 100644 --- a/src/documentation/0027-npm-dependencies-devdependencies/index.md +++ b/src/documentation/0027-npm-dependencies-devdependencies/index.md @@ -1,7 +1,8 @@ --- title: npm dependencies and devDependencies description: 'When is a package a dependency, and when is it a dev dependency?' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you install an npm package using `npm install `, you are installing it as a **dependency**. diff --git a/src/documentation/0028-npx/index.md b/src/documentation/0028-npx/index.md index 29d0600994..12cadfbf22 100644 --- a/src/documentation/0028-npx/index.md +++ b/src/documentation/0028-npx/index.md @@ -1,7 +1,8 @@ --- title: The npx Node.js Package Runner description: 'npx is a very cool way to run Node.js code, and provides many useful features' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- `npx` is a very powerful command that's been available in **npm** starting version 5.2, released in July 2017. diff --git a/src/documentation/0029-node-event-loop/index.md b/src/documentation/0029-node-event-loop/index.md index 7b9c5e7e4c..7eecbda474 100644 --- a/src/documentation/0029-node-event-loop/index.md +++ b/src/documentation/0029-node-event-loop/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js Event Loop' description: 'The Event Loop is one of the most important aspects to understand about Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Introduction diff --git a/src/documentation/0030-node-process-nexttick/index.md b/src/documentation/0030-node-process-nexttick/index.md index e39d07b37e..a6e0872c78 100644 --- a/src/documentation/0030-node-process-nexttick/index.md +++ b/src/documentation/0030-node-process-nexttick/index.md @@ -1,7 +1,8 @@ --- title: 'Understanding process.nextTick()' description: 'The Node.js process.nextTick function interacts with the event loop in a special way' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- As you try to understand the Node.js event loop, one important part of it is `process.nextTick()`. diff --git a/src/documentation/0031-node-setimmediate/index.md b/src/documentation/0031-node-setimmediate/index.md index 396ab26878..9e1e13ebec 100644 --- a/src/documentation/0031-node-setimmediate/index.md +++ b/src/documentation/0031-node-setimmediate/index.md @@ -1,7 +1,8 @@ --- title: 'Understanding setImmediate()' description: 'The Node.js setImmediate function interacts with the event loop in a special way' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you want to execute some piece of code asynchronously, but as soon as possible, one option is to use the `setImmediate()` function provided by Node.js: diff --git a/src/documentation/0032-javascript-timers/index.md b/src/documentation/0032-javascript-timers/index.md index 1ab451a92d..8fef55ef94 100644 --- a/src/documentation/0032-javascript-timers/index.md +++ b/src/documentation/0032-javascript-timers/index.md @@ -1,7 +1,8 @@ --- title: Discover JavaScript Timers description: 'When writing JavaScript code, you might want to delay the execution of a function. Learn how to use setTimeout and setInterval to schedule functions in the future' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## `setTimeout()` diff --git a/src/documentation/0033-javascript-callbacks/index.md b/src/documentation/0033-javascript-callbacks/index.md index 54328d10c5..729aca351c 100644 --- a/src/documentation/0033-javascript-callbacks/index.md +++ b/src/documentation/0033-javascript-callbacks/index.md @@ -1,7 +1,8 @@ --- title: 'JavaScript Asynchronous Programming and Callbacks' description: 'JavaScript is synchronous by default, and is single threaded. This means that code cannot create new threads and run in parallel. Find out what asynchronous code means and how it looks like' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Asynchronicity in Programming Languages diff --git a/src/documentation/0034-javascript-promises/index.md b/src/documentation/0034-javascript-promises/index.md index fb067d65fd..fa3ddf7ad0 100644 --- a/src/documentation/0034-javascript-promises/index.md +++ b/src/documentation/0034-javascript-promises/index.md @@ -1,7 +1,8 @@ --- title: Understanding JavaScript Promises description: 'Promises are one way to deal with asynchronous code in JavaScript, without writing too many callbacks in your code.' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Introduction to promises diff --git a/src/documentation/0035-javascript-async-await/index.md b/src/documentation/0035-javascript-async-await/index.md index 00da335853..7e4e18eb6b 100644 --- a/src/documentation/0035-javascript-async-await/index.md +++ b/src/documentation/0035-javascript-async-await/index.md @@ -1,7 +1,8 @@ --- title: 'Modern Asynchronous JavaScript with Async and Await' description: 'Discover the modern approach to asynchronous functions in JavaScript. JavaScript evolved in a very short time from callbacks to Promises, and since ES2017 asynchronous JavaScript is even simpler with the async/await syntax' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Introduction diff --git a/src/documentation/0036-node-event-emitter/index.md b/src/documentation/0036-node-event-emitter/index.md index f0045581de..01add86b7b 100644 --- a/src/documentation/0036-node-event-emitter/index.md +++ b/src/documentation/0036-node-event-emitter/index.md @@ -1,7 +1,8 @@ --- title: The Node.js Event emitter description: 'How to work with custom events in Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- If you worked with JavaScript in the browser, you know how much of the interaction of the user is handled through events: mouse clicks, keyboard button presses, reacting to mouse movements, and so on. diff --git a/src/documentation/0037-node-http-server/index.md b/src/documentation/0037-node-http-server/index.md index 657d8a3746..ea303313ca 100644 --- a/src/documentation/0037-node-http-server/index.md +++ b/src/documentation/0037-node-http-server/index.md @@ -1,7 +1,8 @@ --- title: 'Build an HTTP Server' description: 'How to build an HTTP server with Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Here is a sample Hello World HTTP web server: diff --git a/src/documentation/0038-node-make-http-requests/index.md b/src/documentation/0038-node-make-http-requests/index.md index 6b74ac10d6..b0f547c6b5 100644 --- a/src/documentation/0038-node-make-http-requests/index.md +++ b/src/documentation/0038-node-make-http-requests/index.md @@ -1,7 +1,8 @@ --- title: 'Making HTTP requests with Node.js' description: 'How to perform HTTP requests with Node.js using GET, POST, PUT and DELETE' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## Perform a GET Request diff --git a/src/documentation/0039-node-http-post/index.md b/src/documentation/0039-node-http-post/index.md index 8b7392b006..fe9a316fab 100644 --- a/src/documentation/0039-node-http-post/index.md +++ b/src/documentation/0039-node-http-post/index.md @@ -1,7 +1,8 @@ --- title: Make an HTTP POST request using Node.js description: 'Find out how to make an HTTP POST request using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- There are many ways to perform an HTTP POST request in Node.js, depending on the abstraction level you want to use. diff --git a/src/documentation/0040a-node-request-data/index.md b/src/documentation/0040a-node-request-data/index.md index 8185b31858..c4163d1308 100644 --- a/src/documentation/0040a-node-request-data/index.md +++ b/src/documentation/0040a-node-request-data/index.md @@ -1,7 +1,8 @@ --- title: Get HTTP request body data using Node.js description: 'Find out how to extract the data sent as JSON through an HTTP request body using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Here is how you can extract the data that was sent as JSON in the request body. diff --git a/src/documentation/0040b-node-file-descriptors/index.md b/src/documentation/0040b-node-file-descriptors/index.md index 9473e8aa19..3692a4d789 100644 --- a/src/documentation/0040b-node-file-descriptors/index.md +++ b/src/documentation/0040b-node-file-descriptors/index.md @@ -1,7 +1,8 @@ --- title: 'Working with file descriptors in Node.js' description: 'How to interact with file descriptors using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Before you're able to interact with a file that sits in your filesystem, you must get a file descriptor. diff --git a/src/documentation/0041-node-file-stats/index.md b/src/documentation/0041-node-file-stats/index.md index 5a897c7499..3fa04b9906 100644 --- a/src/documentation/0041-node-file-stats/index.md +++ b/src/documentation/0041-node-file-stats/index.md @@ -1,7 +1,8 @@ --- title: 'Node.js file stats' description: 'How to get the details of a file using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Every file comes with a set of details that we can inspect using Node. diff --git a/src/documentation/0042-node-file-paths/index.md b/src/documentation/0042-node-file-paths/index.md index bdca18de1e..8d76fef743 100644 --- a/src/documentation/0042-node-file-paths/index.md +++ b/src/documentation/0042-node-file-paths/index.md @@ -1,7 +1,8 @@ --- title: 'Node.js File Paths' description: 'How to interact with file paths and manipulate them in Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Every file in the system has a path. diff --git a/src/documentation/0043-node-reading-files/index.md b/src/documentation/0043-node-reading-files/index.md index 2779ae515e..37b6031007 100644 --- a/src/documentation/0043-node-reading-files/index.md +++ b/src/documentation/0043-node-reading-files/index.md @@ -1,7 +1,8 @@ --- title: 'Reading files with Node.js' description: 'How to read files using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The simplest way to read a file in Node.js is to use the `fs.readFile()` method, passing it the file path and a callback function that will be called with the file data (and the error): diff --git a/src/documentation/0044-node-writing-files/index.md b/src/documentation/0044-node-writing-files/index.md index 04cb04fe36..41df0683b8 100644 --- a/src/documentation/0044-node-writing-files/index.md +++ b/src/documentation/0044-node-writing-files/index.md @@ -1,7 +1,8 @@ --- title: 'Writing files with Node.js' description: 'How to write files using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The easiest way to write to files in Node.js is to use the `fs.writeFile()` API. diff --git a/src/documentation/0045-node-folders/index.md b/src/documentation/0045-node-folders/index.md index bc0405dea7..97ec1cebbc 100644 --- a/src/documentation/0045-node-folders/index.md +++ b/src/documentation/0045-node-folders/index.md @@ -1,7 +1,8 @@ --- title: 'Working with folders in Node.js' description: 'How to interact with folders using Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The Node.js `fs` core module provides many handy methods you can use to work with folders. diff --git a/src/documentation/0046-node-module-fs/index.md b/src/documentation/0046-node-module-fs/index.md index 7fb5235ff9..d046eaddb5 100644 --- a/src/documentation/0046-node-module-fs/index.md +++ b/src/documentation/0046-node-module-fs/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js fs module' description: 'The fs module of Node.js provides useful functions to interact with the file system' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The `fs` module provides a lot of very useful functionality to access and interact with the file system. diff --git a/src/documentation/0047-node-module-path/index.md b/src/documentation/0047-node-module-path/index.md index 391448a773..49751a4ce5 100644 --- a/src/documentation/0047-node-module-path/index.md +++ b/src/documentation/0047-node-module-path/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js path module' description: 'The path module of Node.js provides useful functions to interact with file paths' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The `path` module provides a lot of very useful functionality to access and interact with the file system. diff --git a/src/documentation/0048-node-module-os/index.md b/src/documentation/0048-node-module-os/index.md index a710981c0d..2cebf36c3b 100644 --- a/src/documentation/0048-node-module-os/index.md +++ b/src/documentation/0048-node-module-os/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js os module' description: 'The os module of Node.js provides useful functions to interact with underlying system' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- This module provides many functions that you can use to retrieve information from the underlying operating system and the computer the program runs on, and interact with it. diff --git a/src/documentation/0049-node-module-events/index.md b/src/documentation/0049-node-module-events/index.md index 0b8760ef3a..e600c3ec0d 100644 --- a/src/documentation/0049-node-module-events/index.md +++ b/src/documentation/0049-node-module-events/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js events module' description: 'The events module of Node.js provides the EventEmitter class' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The `events` module provides us the EventEmitter class, which is key to working with events in Node. diff --git a/src/documentation/0050-node-module-http/index.md b/src/documentation/0050-node-module-http/index.md index f1dcf1f335..fa2917d5d6 100644 --- a/src/documentation/0050-node-module-http/index.md +++ b/src/documentation/0050-node-module-http/index.md @@ -1,7 +1,8 @@ --- title: 'The Node.js http module' description: 'The http module of Node.js provides useful functions and classes to build an HTTP server' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- The HTTP core module is a key module to Node.js networking. @@ -69,7 +70,7 @@ This property lists all the HTTP status codes and their description: '200': 'OK', '201': 'Created', '202': 'Accepted', - '203': 'Non-Authoritative Information', + '203': 'Non-authorsitative Information', '204': 'No Content', '205': 'Reset Content', '206': 'Partial Content', @@ -85,7 +86,7 @@ This property lists all the HTTP status codes and their description: '307': 'Temporary Redirect', '308': 'Permanent Redirect', '400': 'Bad Request', - '401': 'Unauthorized', + '401': 'Unauthorsized', '402': 'Payment Required', '403': 'Forbidden', '404': 'Not Found', diff --git a/src/documentation/0051-node-buffers/index.md b/src/documentation/0051-node-buffers/index.md index feeb9e9836..6cd62bf521 100644 --- a/src/documentation/0051-node-buffers/index.md +++ b/src/documentation/0051-node-buffers/index.md @@ -1,7 +1,8 @@ --- title: Node.js Buffers description: 'Learn what Node.js buffers are, what they are used for, how to use them' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- ## What is a buffer? diff --git a/src/documentation/0052-nodejs-streams/index.md b/src/documentation/0052-nodejs-streams/index.md index 1c939627b5..1758d119eb 100644 --- a/src/documentation/0052-nodejs-streams/index.md +++ b/src/documentation/0052-nodejs-streams/index.md @@ -1,7 +1,8 @@ --- title: Node.js Streams description: 'Learn what streams are for, why are they so important, and how to use them.' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- diff --git a/src/documentation/0053-node-difference-dev-prod/index.md b/src/documentation/0053-node-difference-dev-prod/index.md index 7814ef460b..53190aa419 100644 --- a/src/documentation/0053-node-difference-dev-prod/index.md +++ b/src/documentation/0053-node-difference-dev-prod/index.md @@ -1,7 +1,8 @@ --- title: Node.js, the difference between development and production description: 'Learn how to set up different configurations for production and development environments' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- You can have different configurations for production and development environments. diff --git a/src/documentation/0054-node-exceptions/index.md b/src/documentation/0054-node-exceptions/index.md index fad90e7765..a2cdfc16e0 100644 --- a/src/documentation/0054-node-exceptions/index.md +++ b/src/documentation/0054-node-exceptions/index.md @@ -1,7 +1,8 @@ --- title: Error handling in Node.js description: 'How to handle errors during the execution of a Node.js application' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- Errors in Node.js are handled through exceptions. diff --git a/src/documentation/0055-node-inspect-object/index.md b/src/documentation/0055-node-inspect-object/index.md index 47f62dd920..32fd64e5a2 100644 --- a/src/documentation/0055-node-inspect-object/index.md +++ b/src/documentation/0055-node-inspect-object/index.md @@ -1,7 +1,8 @@ --- title: How to log an object in Node.js description: 'Logging objects in Node.js' -author: flaviocopes +authors: flaviocopes +section: Getting Started --- When you type `console.log()` into a JavaScript program that runs in the browser, that is going to create a nice entry in the Browser Console: From 96e0f6f1681ad256961097d5d7d55b143d783824 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Thu, 28 Feb 2019 16:37:32 +0100 Subject: [PATCH 02/12] fix: Style fix for edit-link. --- src/components/edit-link.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/edit-link.tsx b/src/components/edit-link.tsx index 9a0813dcdf..b16ea65bc3 100644 --- a/src/components/edit-link.tsx +++ b/src/components/edit-link.tsx @@ -1,8 +1,8 @@ import React from 'react'; type Props = { - relativePath?: string -} + relativePath?: string; +}; const EditLink = ({ relativePath }: Props) => { if (!relativePath) { @@ -12,10 +12,10 @@ const EditLink = ({ relativePath }: Props) => { const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`; return ( - + Edit this page on GitHub - ) -} + ); +}; -export default EditLink +export default EditLink; From c5e33564cb921dbd363a7ec47df67cf345540244 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Thu, 28 Feb 2019 16:38:20 +0100 Subject: [PATCH 03/12] chore: Author link component added. --- src/components/author-link.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/components/author-link.tsx diff --git a/src/components/author-link.tsx b/src/components/author-link.tsx new file mode 100644 index 0000000000..f39268cd58 --- /dev/null +++ b/src/components/author-link.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +type Props = { + username: string; +}; + +const AuthorLink = ({ username }: Props) => { + const githubLink = `https://github.com/${username}`; + return ( + + {username} + + ); +}; + +export default AuthorLink; From 69ce7bd35b4f3caff30ffda95f6c2fecdbb5e21e Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Thu, 28 Feb 2019 16:39:48 +0100 Subject: [PATCH 04/12] refactor: Site creation moved to gatsby-config, nav refactored. --- gatsby-node.js | 180 ++++++++++++++++-- src/components/article.tsx | 47 +++-- src/components/author-link.tsx | 1 + src/components/navigation-item.tsx | 1 + src/components/navigation-section.tsx | 63 ++++-- src/components/navigation.tsx | 29 +-- src/components/pagination.tsx | 14 +- .../0001-node-introduction/index.md | 2 +- src/pages/404.tsx | 45 +---- src/pages/learn.tsx | 98 ---------- src/templates/learn.tsx | 55 ++++++ src/types/index.ts | 65 +++---- src/util/findActive.ts | 52 ----- 13 files changed, 353 insertions(+), 299 deletions(-) delete mode 100644 src/pages/learn.tsx create mode 100644 src/templates/learn.tsx delete mode 100644 src/util/findActive.ts diff --git a/gatsby-node.js b/gatsby-node.js index 69b3d50119..7b676325c5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,31 +1,177 @@ const createSlug = require('./src/util/createSlug'); +const path = require('path'); -exports.onCreatePage = async ({ page, actions }) => { - const { createPage, deletePage } = actions +exports.createPages = ({ graphql, actions }) => { + const { createPage, createRedirect, createNodeField } = actions; - // If this is the learn page, accept all following paths. - console.log(page.path); - if (!!~page.path.indexOf('/learn')) { - deletePage(page); - createPage({ - ...page, - path: '/' - }); - createPage({ - ...page, - matchPath: "/learn/*", - }); - } -} + // TODO: remove this redirect when we have an /index page + createRedirect({ + fromPath: '/', + toPath: '/learn/introduction-to-nodejs', + redirectInBrowser: true, + force: true, + }); + + // TOOD: remove this redirect when we have a /learn index page + createRedirect({ + fromPath: '/learn/', + toPath: '/learn/introduction-to-nodejs', + redirectInBrowser: true, + }); + + // TOOD: remove this redirect when we have a /learn index page + createRedirect({ + fromPath: '/learn', + toPath: '/learn/introduction-to-nodejs', + redirectInBrowser: true, + }); + + return new Promise((resolve, reject) => { + const docTemplate = path.resolve('./src/templates/learn.tsx'); + const filters = `filter: { fields: { slug: { ne: "" } } }`; + + resolve( + graphql( + ` + { + allMarkdownRemark( + ` + + filters + + ` + sort: { fields: [fileAbsolutePath], order: ASC } + ) { + edges { + node { + id + fileAbsolutePath + html + parent { + ... on File { + relativePath + } + } + frontmatter { + title + description + authors + section + } + fields { + slug + } + } + next { + frontmatter { + title + } + fields { + slug + } + } + previous { + frontmatter { + title + } + fields { + slug + } + } + } + } + } + ` + ).then(result => { + if (result.errors) { + console.log(result.errors); + reject(result.errors); + } + const { edges } = result.data.allMarkdownRemark; + let navigationData = {}; + const docPages = []; + edges.forEach(({ node }, index) => { + const { + fields: { slug, authors }, + frontmatter: { title, section }, + parent: { relativePath }, + } = node; + + let previousNodeData = undefined; + const previousNode = index === 0 ? undefined : edges[index - 1].node; + if (previousNode) { + previousNodeData = { + slug: previousNode.fields.slug, + title: previousNode.frontmatter.title, + }; + } + + let nextNodeData = undefined; + const nextNode = + index === edges.length - 1 ? undefined : edges[index + 1].node; + if (nextNode) { + nextNodeData = { + slug: nextNode.fields.slug, + title: nextNode.frontmatter.title, + }; + } + + let data; + if (!navigationData[section]) { + data = { title, slug, section }; + navigationData = { ...navigationData, [section]: [data] }; + } else { + data = { title, slug, section }; + navigationData = { + ...navigationData, + [section]: [...navigationData[section], data], + }; + } + docPages.push({ + slug, + next: nextNodeData, + previous: previousNodeData, + relativePath, + // authors, + }); + }); + + docPages.forEach(page => { + createPage({ + path: `/learn/${page.slug}`, + component: docTemplate, + context: { + slug: page.slug, + next: page.next, + previous: page.previous, + relativePath: page.relativePath, + navigationData: navigationData, + // authors: page.authors, + }, + }); + }); + }) + ); + }); +}; exports.onCreateNode = ({ node, getNode, actions }) => { if (node.internal.type === 'MarkdownRemark') { const { createNodeField } = actions; + const slug = createSlug(node.frontmatter.title); createNodeField({ node, name: `slug`, value: slug, }); + + let authors = node.frontmatter.authors; + if (authors) { + authors = authors.split(','); + createNodeField({ + node, + name: `authors`, + value: authors, + }); + } } -} +}; diff --git a/src/components/article.tsx b/src/components/article.tsx index c97076afc3..2c0d8ee974 100644 --- a/src/components/article.tsx +++ b/src/components/article.tsx @@ -1,21 +1,44 @@ import React from 'react'; -import { RemarkPage, PageInfo } from '../types'; +import { PaginationInfo } from '../types'; import Pagination from './pagination'; import EditLink from './edit-link'; +import AuthorLink from './author-link'; type Props = { - page: RemarkPage; - previous?: PageInfo; - next?: PageInfo; -} + title: string; + html: string; + authors: Array; + relativePath: string; + next?: PaginationInfo; + previous?: PaginationInfo; +}; -const Article = ({ page, previous, next }: Props) => ( +const Article = ({ + title, + html, + previous, + next, + relativePath, + authors, +}: Props) => (
-

{page.frontmatter.title}

-
- - +

{title}

+
+
+ Contributors: + {authors.map(author => ( + + ))} +
+ +
-) +); -export default Article +export default Article; diff --git a/src/components/author-link.tsx b/src/components/author-link.tsx index f39268cd58..ed5b44ccdd 100644 --- a/src/components/author-link.tsx +++ b/src/components/author-link.tsx @@ -7,6 +7,7 @@ type Props = { const AuthorLink = ({ username }: Props) => { const githubLink = `https://github.com/${username}`; return ( + {username} diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx index a7f0fa5312..17b1224017 100644 --- a/src/components/navigation-item.tsx +++ b/src/components/navigation-item.tsx @@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react'; import { Link } from 'gatsby'; type Props = { + key: string; isDone: boolean; isActive: boolean; slug: string; diff --git a/src/components/navigation-section.tsx b/src/components/navigation-section.tsx index aa153a5240..d17dc54ab3 100644 --- a/src/components/navigation-section.tsx +++ b/src/components/navigation-section.tsx @@ -1,29 +1,58 @@ import React from 'react'; -import { NavigationItemData } from '../types'; +import { NavigationItemList, NavigationSectionItem } from '../types'; import NavigationItem from './navigation-item'; type Props = { + key: string; title: string; - items: NavigationItemData[]; + section: NavigationItemList; + currentSlug: string; onItemClick: () => void; -} +}; -const NavigationSection = ({ title, items, onItemClick }: Props) => { +const NavigationSection = ({ + title, + section, + currentSlug, + onItemClick, +}: Props) => { return (

    {title}

    - {items.map((item: NavigationItemData) => ( - - ))} + {section.map((item: NavigationSectionItem) => { + return ( + onItemClick} + /> + ); + })}
- ) -} + ); +}; -export default NavigationSection +const isDone = ( + currentSlug: string, + requestedSlug: string, + section: NavigationItemList +): boolean => { + let currentSlugIndex: number = 0; + let requestedSlugIndex: number = 0; + section.forEach((navigationItem, index) => { + if (navigationItem.slug == currentSlug) { + currentSlugIndex = index; + } + + if (navigationItem.slug == requestedSlug) { + requestedSlugIndex = index; + } + }); + + return currentSlugIndex > requestedSlugIndex; +}; + +export default NavigationSection; diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index bee60e52a8..409301a5e6 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -4,30 +4,31 @@ import { NavigationSectionData } from '../types'; import { isSmallScreen } from '../util/isSmallScreen'; type Props = { - sections: NavigationSectionData[]; + sections: NavigationSectionData; + currentSlug: string; }; -const Navigation = ({ sections }: Props) => { +const Navigation = ({ sections, currentSlug }: Props) => { const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); - const onItemClick = () => isSmallScreen() && toggle(); + const onItemClick = () => { + isSmallScreen() && toggle(); + }; const className = isOpen ? 'side-nav side-nav--open' : 'side-nav'; - return ( ); }; diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx index 07cf0069b9..2abaff005b 100644 --- a/src/components/pagination.tsx +++ b/src/components/pagination.tsx @@ -1,10 +1,10 @@ import { Link } from 'gatsby'; import React from 'react'; -import { PageInfo } from '../types'; +import { PaginationInfo } from '../types'; type Props = { - previous?: PageInfo; - next?: PageInfo; + previous?: PaginationInfo; + next?: PaginationInfo; } const Pagination = ({ previous, next }: Props) => ( @@ -18,15 +18,15 @@ const Pagination = ({ previous, next }: Props) => ( }} >
  • - {previous && previous.frontmatter.title && ( - + {previous && previous.title && ( + ←   Prev )}
  • - {next && next.frontmatter.title && ( - + {next && next.title && ( + Next   → )} diff --git a/src/documentation/0001-node-introduction/index.md b/src/documentation/0001-node-introduction/index.md index 062fbd1f5a..2ed2f2c990 100644 --- a/src/documentation/0001-node-introduction/index.md +++ b/src/documentation/0001-node-introduction/index.md @@ -1,7 +1,7 @@ --- title: Introduction to Node.js description: "This post is a getting started guide to Node.js, the server-side JavaScript runtime environment. Node.js is built on top of the Google Chrome V8 JavaScript engine, and it's mainly used to create web servers - but it's not limited to that" -authors: flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes,flaviocopes +authors: flaviocopes section: Quick Start --- diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 07990dac18..cbc011e1d1 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,26 +1,19 @@ -import { graphql } from 'gatsby'; import React from 'react'; import Hero from '../components/hero'; import Layout from '../components/layout'; -import Navigation from '../components/navigation'; import { LearnPageData } from '../types'; -import { findActive } from '../util/findActive'; type Props = { data: LearnPageData; }; -export default ({ data }: Props) => { - // Get current page related data. - const { navigationSections } = findActive(data.sections.group); - - const title = `PAGE NOT FOUND`; - const description = `You've hit a route that does not exist.`; +export default (props: Props) => { + const title = 'PAGE NOT FOUND'; + const description = 'You have hit a route that does not exist.'; return ( -

    {title}

    @@ -36,35 +29,3 @@ export default ({ data }: Props) => { ); }; - -export const query = graphql` - { - sections: allMarkdownRemark( - sort: { fields: [fileAbsolutePath], order: ASC } - ) { - group(field: frontmatter___section) { - fieldValue - edges { - node { - id - fileAbsolutePath - html - parent { - ... on File { - relativePath - } - } - frontmatter { - title - description - author - } - fields { - slug - } - } - } - } - } - } -`; diff --git a/src/pages/learn.tsx b/src/pages/learn.tsx deleted file mode 100644 index f80427f629..0000000000 --- a/src/pages/learn.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { graphql } from 'gatsby'; -import React from 'react'; -import Article from '../components/article'; -import Hero from '../components/hero'; -import Layout from '../components/layout'; -import Navigation from '../components/navigation'; -import { LearnPageData } from '../types'; -import { findActive } from '../util/findActive'; -import Page404 from './404'; - -type Props = { - data: LearnPageData; - location: Location; -}; - -export default ({ data, location }: Props) => { - // Get current page related data. - const currentPage = location.pathname.split('/').pop(); - const { activePage, previousPage, nextPage, navigationSections } = findActive( - data.sections.group, - currentPage - ); - - // Rendering 404 page as a component here but maintain the url - if (!activePage) { - return ; - } - - // Set the title and desceription for pages only. - // Leave the home page with default by providing empty values. - let title = ''; - let description = ''; - - // The currentPage has empty string value - // Since its pathname only has '/' and nothing after that. - if (currentPage) { - title = `${activePage.frontmatter.title} by ${ - activePage.frontmatter.author - }`; - description = activePage.frontmatter.description; - } - - return ( - - - -
    - - ); -}; - -export const query = graphql` - { - sections: allMarkdownRemark( - sort: { fields: [fileAbsolutePath], order: ASC } - ) { - group(field: frontmatter___section) { - fieldValue - edges { - node { - id - fileAbsolutePath - html - parent { - ... on File { - relativePath - } - } - frontmatter { - title - description - author - } - fields { - slug - } - } - next { - frontmatter { - title - } - fields { - slug - } - } - previous { - frontmatter { - title - } - fields { - slug - } - } - } - } - } - } -`; diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx new file mode 100644 index 0000000000..080a030939 --- /dev/null +++ b/src/templates/learn.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { graphql } from 'gatsby'; +import { LearnPageData, LearnPageContext } from '../types'; +import Layout from '../components/layout'; +import Hero from '../components/hero'; +import Article from '../components/article'; +import Navigation from '../components/navigation'; + +type Props = { + data: LearnPageData; + pageContext: LearnPageContext; +}; + +export default ({ + data: { + doc: { + frontmatter: { title, description }, + html, + fields: { authors }, + }, + }, + pageContext: { slug, next, previous, relativePath, navigationData }, +}: Props) => { + return ( + + + +
    + + ); +}; + +export const query = graphql` + query DocBySlug($slug: String!) { + doc: markdownRemark(fields: { slug: { eq: $slug } }) { + id + html + frontmatter { + title + description + } + fields { + slug + authors + } + } + } +`; diff --git a/src/types/index.ts b/src/types/index.ts index 77dd263277..2897dc692b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,49 +1,36 @@ -export interface RemarkPage { - id: string; - fileAbsolutePath: string; - html: string; - parent: { - relativePath: string - } - frontmatter: { - title: string; - description: string; - author: string; - } - fields: { - slug: string; - } +export interface LearnPageContext { + slug: string; + relativePath: string; + next: PaginationInfo; + previous: PaginationInfo; + navigationData: NavigationSectionData; } - -export interface PageInfo { - frontmatter: { - title: string; - } - fields: { - slug: string; - } +export interface PaginationInfo { + slug: string; + title: string; } - -export interface RemarkSection { - fieldValue: string; - edges: { node: RemarkPage; previous: PageInfo; next: PageInfo }[]; +export interface NavigationSectionData { + [index: string]: NavigationItemList[]; } export interface LearnPageData { - sections: { - group: RemarkSection[]; - } + doc: { + id: string; + html: string; + frontmatter: { + title: string; + description: string; + }; + fields: { + authors: Array; + }; + }; } -export interface NavigationItemData { - id: string; - title: string; - isActive: boolean; - isDone: boolean; - slug: string; -} +export type NavigationItemList = NavigationSectionItem[]; -export interface NavigationSectionData { +export interface NavigationSectionItem { + slug: string; title: string; - items: NavigationItemData[]; + section: string; } diff --git a/src/util/findActive.ts b/src/util/findActive.ts deleted file mode 100644 index eec3b319a8..0000000000 --- a/src/util/findActive.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { RemarkSection, RemarkPage, NavigationSectionData, PageInfo } from '../types'; - -type ActiveResults = { - activePage?: RemarkPage; - previousPage?: PageInfo; - nextPage?: PageInfo; - navigationSections: NavigationSectionData[]; -} - -export function findActive(sections: RemarkSection[], currentPage?: string): ActiveResults { - let activePage: RemarkPage | undefined; - let previousPage: PageInfo | undefined; - let nextPage: PageInfo | undefined; - const navigationSections = []; - - for (const { fieldValue, edges } of sections) { - const items = [] - const title = fieldValue === 'undefined' ? 'Getting Started' : fieldValue; - for (const { node: page, previous, next } of edges ) { - if (!page.frontmatter.title) { - continue; - } - if (!currentPage) { - currentPage = page.fields.slug; - } - const isActivePage = currentPage === page.fields.slug; - if (isActivePage) { - activePage = page; - previousPage = previous; - nextPage = next; - } - items.push({ - id: page.id, - title: page.frontmatter.title, - isActive: isActivePage, - isDone: !activePage && !isActivePage, - slug: page.fields.slug - }); - } - navigationSections.push({ - title, - items - }) - } - - return { - activePage, - previousPage, - nextPage, - navigationSections - } -} \ No newline at end of file From 33c407d875397f4c3984030f40de024354d138d2 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Fri, 1 Mar 2019 13:45:59 +0100 Subject: [PATCH 05/12] fix: Mistakes in docs revoked. --- src/documentation/0006-v8/index.md | 2 +- src/documentation/0019-package-json/index.md | 10 +++++----- src/documentation/0050-node-module-http/index.md | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/documentation/0006-v8/index.md b/src/documentation/0006-v8/index.md index 9a0cd6d117..0ddeb6d400 100644 --- a/src/documentation/0006-v8/index.md +++ b/src/documentation/0006-v8/index.md @@ -29,7 +29,7 @@ All those engines implement the ECMA ES-262 standard, also called ECMAScript, th V8 is written in C++, and it's continuously improved. It is portable and runs on Mac, Windows, Linux and several other systems. -In this V8 introduction, we will ignore the implementation details of V8: they can be found on more authorsitative sites (e.g. the V8 official site), and they change over time, often radically. +In this V8 introduction, we will ignore the implementation details of V8: they can be found on more authoritative sites (e.g. the V8 official site), and they change over time, often radically. V8 is always evolving, just like the other JavaScript engines around, to speed up the Web and the Node.js ecosystem. diff --git a/src/documentation/0019-package-json/index.md b/src/documentation/0019-package-json/index.md index 8e9a84dc6e..61331e63c1 100644 --- a/src/documentation/0019-package-json/index.md +++ b/src/documentation/0019-package-json/index.md @@ -149,15 +149,15 @@ This is because when a package is published on `npm`, it gets its own URL based If you published this package publicly on GitHub, a good value for this property is the GitHub repository name. -### `authors` +### `author` -Lists the package authors name +Lists the package author name Example: ```json { - "authors": "Joe (https://whatever.com)" + "author": "Joe (https://whatever.com)" } ``` @@ -165,7 +165,7 @@ Can also be used with this format: ```json { - "authors": { + "author": { "name": "Joe", "email": "joe@whatever.com", "url": "https://whatever.com" @@ -175,7 +175,7 @@ Can also be used with this format: ### `contributors` -As well as the authors, the project can have one or more contributors. This property is an array that lists them. +As well as the author, the project can have one or more contributors. This property is an array that lists them. Example: diff --git a/src/documentation/0050-node-module-http/index.md b/src/documentation/0050-node-module-http/index.md index fa2917d5d6..af1c6b3386 100644 --- a/src/documentation/0050-node-module-http/index.md +++ b/src/documentation/0050-node-module-http/index.md @@ -70,7 +70,7 @@ This property lists all the HTTP status codes and their description: '200': 'OK', '201': 'Created', '202': 'Accepted', - '203': 'Non-authorsitative Information', + '203': 'Non-Authoritative Information', '204': 'No Content', '205': 'Reset Content', '206': 'Partial Content', @@ -86,7 +86,7 @@ This property lists all the HTTP status codes and their description: '307': 'Temporary Redirect', '308': 'Permanent Redirect', '400': 'Bad Request', - '401': 'Unauthorsized', + '401': 'Unauthorized', '402': 'Payment Required', '403': 'Forbidden', '404': 'Not Found', From d9f4307a0857399630f08efdc8b1aeb9a67f6637 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Fri, 1 Mar 2019 13:51:52 +0100 Subject: [PATCH 06/12] chore: Remove comments. --- gatsby-config.js | 27 +++++++++------------------ gatsby-node.js | 2 -- 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 69543d9afb..c6bd8e37c9 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,13 +1,8 @@ if (process.env.ENVIROMENT !== 'production') { - require('dotenv').config() + require('dotenv').config(); } -// const contentfulConfig = { -// spaceId: process.env.SPACE_ID, -// accessToken: process.env.ACCESS_TOKEN, -// } - -const config = require('./src/config') +const config = require('./src/config'); module.exports = { pathPrefix: process.env.PATH_PREFIX, @@ -73,10 +68,6 @@ module.exports = { ], }, }, - // { - // resolve: `gatsby-source-contentful`, - // options: contentfulConfig, - // }, { resolve: `gatsby-plugin-sitemap`, options: { @@ -104,14 +95,14 @@ module.exports = { } }`, serialize: ({ site, allSitePage, allMarkdownRemark }) => { - let pages = [] + let pages = []; allSitePage.edges.map(edge => { pages.push({ url: site.siteMetadata.siteUrlNoSlash + edge.node.path, changefreq: `daily`, priority: 0.7, - }) - }) + }); + }); allMarkdownRemark.edges.map(edge => { pages.push({ url: `${site.siteMetadata.siteUrlNoSlash}/learn/${ @@ -119,10 +110,10 @@ module.exports = { }`, changefreq: `daily`, priority: 0.7, - }) - }) + }); + }); - return pages + return pages; }, }, }, @@ -130,4 +121,4 @@ module.exports = { resolve: `gatsby-plugin-emotion`, }, ], -} +}; diff --git a/gatsby-node.js b/gatsby-node.js index 7b676325c5..f5af2e5a0b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -130,7 +130,6 @@ exports.createPages = ({ graphql, actions }) => { next: nextNodeData, previous: previousNodeData, relativePath, - // authors, }); }); @@ -144,7 +143,6 @@ exports.createPages = ({ graphql, actions }) => { previous: page.previous, relativePath: page.relativePath, navigationData: navigationData, - // authors: page.authors, }, }); }); From 1fd74b56fbe67c7fb17d823f1599e2a29c963d2a Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Fri, 1 Mar 2019 15:13:02 +0100 Subject: [PATCH 07/12] fix: Authorlink wont be rendered without author data. --- src/components/article.tsx | 2 +- src/components/author-link.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/article.tsx b/src/components/article.tsx index 2c0d8ee974..9b86df0fbf 100644 --- a/src/components/article.tsx +++ b/src/components/article.tsx @@ -32,7 +32,7 @@ const Article = ({ alignItems: 'center', }}> Contributors: - {authors.map(author => ( + {authors && authors.map(author => ( ))}
    diff --git a/src/components/author-link.tsx b/src/components/author-link.tsx index ed5b44ccdd..b57fabb716 100644 --- a/src/components/author-link.tsx +++ b/src/components/author-link.tsx @@ -5,9 +5,11 @@ type Props = { }; const AuthorLink = ({ username }: Props) => { + if (!username) { + return null; + } const githubLink = `https://github.com/${username}`; return ( - {username} From b6881ac399ec316c22fc8d826b0e8ee7369c0c83 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Fri, 1 Mar 2019 15:25:50 +0100 Subject: [PATCH 08/12] chore: Tests updated, tests for new components added. --- test/__fixtures__/page.tsx | 81 ++++++++++++++----- .../__snapshots__/article.test.tsx.snap | 40 +++++---- .../__snapshots__/author-link.test.tsx.snap | 14 ++++ .../__snapshots__/edit-link.test.tsx.snap | 6 ++ .../__snapshots__/pagination.test.tsx.snap | 16 ++-- test/components/article.test.tsx | 30 +++++-- test/components/author-link.test.tsx | 15 ++++ test/components/pagination.test.tsx | 28 ++++--- .../__snapshots__/learn.test.tsx.snap | 66 +++++++++++++++ test/templates/learn.test.tsx | 20 +++++ 10 files changed, 257 insertions(+), 59 deletions(-) create mode 100644 test/components/__snapshots__/author-link.test.tsx.snap create mode 100644 test/components/author-link.test.tsx create mode 100644 test/templates/__snapshots__/learn.test.tsx.snap create mode 100644 test/templates/learn.test.tsx diff --git a/test/__fixtures__/page.tsx b/test/__fixtures__/page.tsx index 4524537754..5442a9cfbb 100644 --- a/test/__fixtures__/page.tsx +++ b/test/__fixtures__/page.tsx @@ -1,21 +1,64 @@ -import { RemarkPage, PageInfo } from '../../src/types'; +import { + LearnPageData, + PaginationInfo, + LearnPageContext, + NavigationSectionData, +} from '../../src/types'; -export const createPageInfo = (title: string) => ({ - frontmatter: { title }, - fields: { slug: title }, -}) as PageInfo; +export const createPaginationInfo = () => + ({ + slug: 'test-slug', + title: 'test-title', + } as PaginationInfo); -export const createRemarkPage = (title: string) => ({ - html: `${title}`, - parent: { - relativePath: `path/${title}.md` - }, - frontmatter: { - title, - description: 'mock-description', - author: 'mock-author', - }, - fields: { - slug: title - }, -}) as RemarkPage; +export const createNavigationSectionData = () => + ({ + 'test-section': [ + { + slug: 'test-slug', + title: 'test-title', + section: 'test-section', + }, + { + title: 'test-title', + slug: 'test-slug', + section: 'test-section', + }, + ], + 'test-section2': [ + { + slug: 'test-slug', + title: 'test-title', + section: 'test-section', + }, + { + title: 'test-title', + slug: 'test-slug', + section: 'test-section', + }, + ], + } as NavigationSectionData); + +export const createLearnPageData = () => + ({ + doc: { + id: 'test-id', + html: 'Test html', + frontmatter: { + title: 'test-title', + description: 'test-description', + }, + fields: { + authors: ['test-user1', 'test-user2'], + }, + }, + } as LearnPageData); + +export const createLearnPageContext = () => + ({ + slug: 'test-slug', + relativePath: 'test-path', + next: createPaginationInfo(), + previous: createPaginationInfo(), + navigationData: createNavigationSectionData(), + } as LearnPageContext); diff --git a/test/components/__snapshots__/article.test.tsx.snap b/test/components/__snapshots__/article.test.tsx.snap index 3b3e860c33..70461e6d07 100644 --- a/test/components/__snapshots__/article.test.tsx.snap +++ b/test/components/__snapshots__/article.test.tsx.snap @@ -7,37 +7,47 @@ exports[`Article component renders correctly 1`] = `

    - mock-page + test-title

    mock-page", + "__html": "Test html", } } /> +
    + Contributors: + + +
    diff --git a/test/components/__snapshots__/author-link.test.tsx.snap b/test/components/__snapshots__/author-link.test.tsx.snap new file mode 100644 index 0000000000..c17e07f808 --- /dev/null +++ b/test/components/__snapshots__/author-link.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuthorLink component renders correctly 1`] = ` + + test-author + +`; diff --git a/test/components/__snapshots__/edit-link.test.tsx.snap b/test/components/__snapshots__/edit-link.test.tsx.snap index 63d2e7e9ec..8e2a6744b4 100644 --- a/test/components/__snapshots__/edit-link.test.tsx.snap +++ b/test/components/__snapshots__/edit-link.test.tsx.snap @@ -3,6 +3,12 @@ exports[`EditLink component renders correctly 1`] = ` Edit this page on GitHub diff --git a/test/components/__snapshots__/pagination.test.tsx.snap b/test/components/__snapshots__/pagination.test.tsx.snap index d836047da5..5340552703 100644 --- a/test/components/__snapshots__/pagination.test.tsx.snap +++ b/test/components/__snapshots__/pagination.test.tsx.snap @@ -12,15 +12,15 @@ exports[`Pagination component only renders links to pages that has a title 1`] = } } > -
    • +
  • `; @@ -38,7 +38,7 @@ exports[`Pagination component renders correctly when there is no next page 1`] = >
    • ); diff --git a/src/types/index.ts b/src/types/index.ts index 2897dc692b..bf6ec21e96 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,7 +10,7 @@ export interface PaginationInfo { title: string; } export interface NavigationSectionData { - [index: string]: NavigationItemList[]; + [index: string]: NavigationItemList; } export interface LearnPageData { From 9b0e89188643057b6c9355bca5fd893a1407a9c4 Mon Sep 17 00:00:00 2001 From: Onur Laru Date: Tue, 5 Mar 2019 09:03:54 +0100 Subject: [PATCH 11/12] chore: Tests updated. --- test/components/__snapshots__/pagination.test.tsx.snap | 10 +++++----- test/components/author-link.test.tsx | 6 +++--- test/components/pagination.test.tsx | 5 ++++- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/test/components/__snapshots__/pagination.test.tsx.snap b/test/components/__snapshots__/pagination.test.tsx.snap index 5340552703..a5916384f5 100644 --- a/test/components/__snapshots__/pagination.test.tsx.snap +++ b/test/components/__snapshots__/pagination.test.tsx.snap @@ -14,7 +14,7 @@ exports[`Pagination component only renders links to pages that has a title 1`] = >
  • {username} diff --git a/src/components/navigation-section.tsx b/src/components/navigation-section.tsx index 01137d8021..f61151e328 100644 --- a/src/components/navigation-section.tsx +++ b/src/components/navigation-section.tsx @@ -43,11 +43,11 @@ const isDone = ( let currentSlugIndex: number = 0; let requestedSlugIndex: number = 0; section.forEach((navigationItem, index) => { - if (navigationItem.slug == currentSlug) { + if (navigationItem.slug === currentSlug) { currentSlugIndex = index; } - if (navigationItem.slug == requestedSlug) { + if (navigationItem.slug === requestedSlug) { requestedSlugIndex = index; } }); diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index 409301a5e6..da77e14915 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -12,9 +12,12 @@ const Navigation = ({ sections, currentSlug }: Props) => { const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(!isOpen); const onItemClick = () => { - isSmallScreen() && toggle(); + if (isSmallScreen()) { + toggle(); + } }; const className = isOpen ? 'side-nav side-nav--open' : 'side-nav'; + return (