From f8fea74305d4b76cc727d01c7af9b663055caee5 Mon Sep 17 00:00:00 2001 From: Diana Lau Date: Fri, 22 Jun 2018 11:11:53 -0400 Subject: [PATCH] add getting started page Signed-off-by: Diana Lau --- css/getting-started.css | 78 ++++++++++ css/loopback.css | 35 ++++- getting-started.html | 338 ++++++++++++++++++++++++++++++++++++++++ index.html | 4 +- 4 files changed, 449 insertions(+), 6 deletions(-) create mode 100644 css/getting-started.css create mode 100644 getting-started.html 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 @@ + + + + + + + + + + + LoopBack 4 + + + + + + + + + + + + + + + + +
+
+
+

Ready to build with LoopBack?

+
+
Let's get you equipped.
+
+
+ + +
+ +
+
+
+ +
+
+

Have you installed Node.js?

+

Before you install LoopBack, make sure to download and install Node.js (version 8.9.x or higher), a JavaScript + runtime.

+
+
+ Install Node.js +
+
+
+
+
+ +
+ +
+
+
+ +
+
+

Install LoopBack 4 CLI

+

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
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+

Create a new project

+

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
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+

Starting the project

+

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
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+

Add your own controller

+

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!'; 
+  } 
+}
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+

Test your application

+

Start the application using npm start. +

+
+
+ Visit http://127.0.0.1:3000/hello to see Hello world! +
+
+
+
+
+
+
+
+

Ready to continue your journey? +

Follow the tutorial to create a real-world application with LoopBack 4.

+
+
+ View Tutorial +
+
+
+
+ + + + + + + + + + + + + diff --git a/index.html b/index.html index 6a5fd49..efce44b 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@ -
+

@ Copyright 2018 StrongLoop, an IBM company