-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
252 lines (208 loc) · 9.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>CodeRoad Tutorial Visualization</title>
</head>
<body>
<header class="header">
<img class="header-img" src="img/logo.jpg" />
<h1 class="header-text">Code Road</h1>
</header>
<div class="title">
Visualization of a Code Road tutorial
<br />
Click to see more info
</div>
<main class="main">
<div class="flowchart">
<div class="flow flow-main-repo">Learn NPM Repo</div>
<div class="flow branch branch-master">master</div>
<div class="flow branch branch-version">v0.1.0</div>
<div class="flow file file-project">Project Files</div>
<div class="flow file file-coderoad">CODEROAD.md</div>
<div class="flow file file-config">config.json</div>
<div class="flow repo repo-tutorials">Tutorials Repo</div>
<div class="flow repo repo-coderoad">CodeRoad Repo</div>
<div class="flow-line flow-line-1"></div>
<div class="flow-line flow-line-2"></div>
<div class="flow-line flow-line-3"></div>
<div class="flow-line flow-line-4"></div>
<div class="flow-line flow-line-5"></div>
<div class="flow-line flow-line-6"></div>
<div class="flow-line flow-line-7"></div>
<div class="flow-line flow-line-8"></div>
<div class="flow-line flow-line-9"></div>
<div class="flow-line flow-line-10"></div>
</div>
<div class="column-wrap">
<div class="column column-1">
<div class="commit-img-group commit-img-group-1">
<img class="commit-img" src="img/init_result.jpg" />
</div>
<div class="commit-img-group commit-img-group-2">
<img class="commit-img" src="img/1.1_result.jpg" />
<img class="commit-img" src="img/test-1.png" />
</div>
<div class="commit-img-group commit-img-group-3">
<img class="commit-img" src="img/1.1-solution_result.jpg" />
<img class="commit-img" src="img/solution-1.png" />
</div>
<div class="commit-img-group commit-img-group-4">
<img class="commit-img" src="img/1.2_result.jpg" />
<img class="commit-img" src="img/test-2.png" />
</div>
<div class="commit-img-group commit-img-group-5">
<img class="commit-img" src="img/1.2-solution_result.jpg" />
<img class="commit-img" src="img/solution-2.png" />
</div>
<div class="commit-img-group commit-img-group-6">
<img class="commit-img" src="img/1.3_result.jpg" />
<img class="commit-img" src="img/test-3.png" />
</div>
<div class="commit-img-group commit-img-group-7">
<img class="commit-img" src="img/1.3-solution_result.jpg" />
<img class="commit-img" src="img/solution-3.png" />
</div>
</div>
<div class="column column-2">
<div class="markdown-filename">
<a
href="https://github.com/coderoad/fcc-learn-npm/blob/master/CODEROAD.md"
target="_blank"
>COADROAD.md</a
>
</div>
<pre class="markdown-pre">
<div class="lesson-1-markdown"># Learn NPM package json</div>
<div class="lesson-1-markdown">> The Node Package Manager (NPM) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.</div>
```config
config:
testRunner:
command: npm run programmatic-test
repo:
uri: https://github.com/coderoad/fcc-learn-npm
branch: v0.1.0
dependencies:
- name: node
version: ^10
```
<div class="lesson-1-markdown lesson-2-markdown">## Intro</div>
<div class="lesson-1-markdown">> Introduction to the package.json</div>
<div class="lesson-2-markdown">When starting a new project, NPM generates a package.json file. This file lists the package dependencies for your project. Since NPM packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.
NPM saves packages in a folder named node_modules. These packages can be installed in two ways:
- globally in a root node_modules folder, accessible by all projects.
- locally within a project's own node_modules folder, accessible only to that project.
Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.
The `package.json` file is the center of any Node.js project or NPM package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.</div>
<div class="lesson-1-markdown lesson-3-markdown">## Author</div>
<div class="lesson-1-markdown">> Package.json author</div>
<div class="lesson-3-markdown">One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
```json
"author": "Jane Doe",
```</div>
### Step 1
```config
setup:
files:
- package.json
commits:
<div class="commit-1-markdown"> - '26e502d'</div>
<div class="commit-2-markdown"> - 'e39ab72'</div>
commands:
- npm install
solution:
files:
- package.json
commits:
<div class="commit-3-markdown"> - '72fa9de'</div>
```
<div class="lesson-3-markdown">Add your name as the `author` of the project in the package.json file.</div>
<div class="lesson-3-markdown">**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).</div>
<div class="lesson-1-markdown lesson-4-markdown">## Description</div>
<div class="lesson-1-markdown">> Package.json description</div>
<div class="lesson-4-markdown">The next part of a good package.json file is the `description` field; where a short, but informative description about your project belongs.
If you some day plan to publish a package to NPM, this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description, it’s a great way to summarize what a project does. It’s just as important in any Node.js project to help other developers, future maintainers or even your future self understand the project quickly.
Regardless of what you plan for your project, a description is definitely recommended.
Here's an example:
```json
"description": "A project that does something awesome",
```</div>
### Step 1
```config
setup:
files:
- package.json
commits:
<div class="commit-4-markdown"> - '64bd78f'</div>
solution:
files:
- package.json
commits:
<div class="commit-5-markdown"> - '7888392'</div>
```
<div class="lesson-4-markdown">Add a `description` to the package.json file of your project.</div>
<div class="lesson-4-markdown">**Note:** Remember to use double-quotes for field-names (") and commas (,) to separate fields.</div>
<div class="lesson-1-markdown lesson-5-markdown">## Keywords</div>
<div class="lesson-1-markdown">> Package.json keywords</div>
<div class="lesson-5-markdown">The `keywords` field is where you can describe your project using related keywords.
Here's an example:
```json
"keywords": [ "descriptive", "related", "words" ],
```
As you can see, this field is structured as an array of double-quoted strings.</div>
### Step 1
```config
setup:
files:
- package.json
commits:
<div class="commit-6-markdown"> - '54540f6'</div>
solution:
files:
- package.json
commits:
<div class="commit-7-markdown"> - '803ab94'</div>
```
<div class="lesson-5-markdown">Add an array of suitable strings to the `keywords` field in the package.json file of your project.</div>
<div class="lesson-5-markdown">One of the keywords should be "freecodecamp".</div>
</pre>
</div>
<div class="column column-3">
<img class="lesson-img" src="img/overview_result.jpg" />
<img class="lesson-img" src="img/intro_result.jpg" />
<img class="lesson-img" src="img/author_result.jpg" />
<img
class="lesson-img description-img"
src="img/description_result.jpg"
/>
<img class="lesson-img keywords-img" src="img/keywords_result.jpg" />
</div>
</div>
<div class="tip-wrap">
<div class="tip"></div>
<span class="close-tip-btn">x</span>
</div>
</main>
<footer class="footer">
<a
class="footer-link"
target="_blank"
href="https://github.com/coderoad/fcc-learn-npm"
>View the Learn NPM repo</a
>
<a
class="footer-link"
target="_blank"
href="https://github.com/coderoad/tutorials"
>View the Tutorials repo</a
>
<a
class="footer-link"
target="_blank"
href="https://github.com/coderoad/coderoad-vscode"
>View the Code Road repo</a
>
</footer>
<script type="text/javascript" src="index.js"></script>
</body>