diff --git a/css/getting-started.css b/css/getting-started.css new file mode 100644 index 0000000..98aee24 --- /dev/null +++ b/css/getting-started.css @@ -0,0 +1,78 @@ +.gs-masthead { + text-align: center; + color: var(--color-white); + background-image: linear-gradient(to bottom, #009cff, #3f5dff); + padding: 120px 0px 80px 0px; + z-index: 5; + position: relative; + overflow: hidden; +} + +.gs-masthead .container-fluid { + position: absolute; + background-color: var(--color-blue); + background: linear-gradient(to top, transparent, #3f5dff), url('../img/getting-started/dot-pattern-2x.png'); + + /*background: url('../img/getting-started/dot-pattern-2x.png');*/ + opacity: 0.2; + z-index: -1; + background-repeat: no-repeat; + background-attachment: scroll; + background-position: center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + width: 100%; + padding: 350px; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.gs-masthead .header-space { + height:80px; +} + +/* tag for steps */ +.steptag { + background-color: var(--color-blue-d); + text-align: center; + border-radius: 5px; + color: var(--color-white); + border: none; + margin-bottom: 16px; + padding-left: 14px; + padding-right: 14px; + float: left; +} + +code { + color: black; + background-color: var(--color-white-xd); + padding: 5px; +} + +code-blue { + color: var(--color-blue-d); +} + +p.large.step { + padding-top: 10px; +} + +.link { + color: var(--color-blue-d); +} +.link:hover { + color: var(--color-blue-xd); + text-decoration: none; +} + +section.odd-section { + background-color: var(--color-white-xd); +} +section.even-section { + background-color: var(--color-white-d); +} diff --git a/css/loopback.css b/css/loopback.css index b39133d..39ec305 100644 --- a/css/loopback.css +++ b/css/loopback.css @@ -128,12 +128,14 @@ p.centered-regular { text-align: center; padding: 16px; border-radius: 5px; - border: none; + border-color: var(--color-blue-d); + border: solid; vertical-align: middle; color: var(--color-blue-d); font-size: 16px; - font-weight: bold; line-height: 16px; + position: relative; + top: 50%; } .btn-primary:active, @@ -148,12 +150,14 @@ p.centered-regular { .btn-secondary:hover { background-color: var(--color-blue-d); color: var(--color-white); + border-color: var(--color-blue-d); } /* navbar */ nav { padding-top: 10px; background-color: white; + border-bottom: solid 1px var(--color-gray); } .navbar-light .navbar-nav .nav-link:hover { color: var(--color-blue-d); @@ -161,6 +165,9 @@ nav { .navbar-light .navbar-nav .nav-link:active { color: var(--color-blue-xd); } +.navbar-light .navbar-nav .nav-link.highlighted { + color: var(--color-gray-xd); +} /* Header alert */ .header-alert { @@ -186,7 +193,7 @@ nav { .masthead .container-fluid { position: absolute; background-color: var(--color-blue); - background: url('../img/homepage/hero-illustration.svg'); + background: linear-gradient(to top, transparent, #3f5dff), url('../img/homepage/hero-illustration.svg'); opacity: 0.4; z-index: -1; background-repeat: no-repeat; @@ -266,7 +273,7 @@ section { padding: 80px 0 56px 0; } .container { - padding: 0px 0 112px 0; + padding: 0px 0 50px 0; } /* Action */ @@ -289,6 +296,8 @@ section { .hairline { stroke-width: 1px; background-color: var(--color-gray); + margin-top: 0px; + margin-bottom: 0px; } /* Footer */ footer { @@ -296,6 +305,10 @@ footer { text-align: center; background-color: var(--color-gray-xd); } +.hairline-footer { + stroke-width: 1px; + background-color: var(--color-gray); +} footer a { color: white; @@ -320,3 +333,17 @@ footer a:hover { color: var(--color-gray); text-decoration: none; } + +.code-snippet { + color: var(--color-gray-xd); + text-align: left; + background-color: var(--color-white-xd); + border-radius: 5px; + border-color: var(--color-gray-xd); + border: 1px solid; + padding: 22px 30px 0px 30px; + width: 100%; + position: relative; + top: 30%; + white-space: pre-wrap; +} diff --git a/getting-started.html b/getting-started.html new file mode 100644 index 0000000..4189e16 --- /dev/null +++ b/getting-started.html @@ -0,0 +1,338 @@ + + + +
+ + + + + + +Before you install LoopBack, make sure to download and install Node.js (version 8.9.x or higher), a JavaScript + runtime.
+The LoopBack 4 CLI is a command-line interface that can scaffold a project or extension. The CLI provides + the fastest way to get started with a LoopBack 4 project that adheres to best practices. +
+++$ npm install -g loopback-cli +
To create a new project, run the CLI as follows. +
+++$ lb4 app +
Answer the prompts as follows. +
+++[?] Project name: getting-started +[?] Project description: Getting started tutorial +[?] Project root directory: (getting-started) +[?] Application class name: StarterApplication +[?] Select project build settings: Enable tslint, Enable prettier, Enable mocha, Enable loopbackBuild +
The project comes with a "ping" route to test the project. Let's try it out by running the projects. +
+In a browser, visit + http://127.0.0.1:3000/ping +
+++$ cd getting-started +$ npm start +
Now that we have a basic project created, it’s time to add our own controller. Let’s add a simple “Hello + World” controller as follows. +
+++$ lb4 controller +[?] Controller class name: hello +[?] What kind of controller would you like to generate? Empty Controller + create src/controllers/hello.controller.ts + update src/controllers/index.ts +Controller Hello was now created in src/controllers/ +
Paste the following contents into the file /src/controllers/hello.controller.ts.
+
++import {get }from '@loopback/rest'; +export class HelloController { + @get('/hello') + hello(): string { +return 'Hello world!'; + } +} +
Start the application using npm start.
+
Hello world!
+ Follow the tutorial to create a real-world application with LoopBack 4. +
@ Copyright 2018 StrongLoop, an IBM company