From 3ab739bd4b18e7779ac427147871332613c48c0f Mon Sep 17 00:00:00 2001 From: "Polite, David" Date: Fri, 14 Sep 2018 08:39:35 +0200 Subject: [PATCH 1/4] Documentation refinements --- README.md | 28 ++++++++++++++++------------ docs/application-setup.md | 28 ++++++++++++++++++++-------- 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 4f8f30f364..8214b3731d 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Overview -Luigi is a micro front-end JavaScript framework that enables the creation of an administrative dashboard which is driven by local and distributed views. Luigi enables the communication between a web application and content-views which the application contains such as routing, navigation, authorization, and user experience elements. +Luigi is a micro front-end JavaScript framework that enables the creation of an administrative user interface which is driven by local and distributed views. Luigi enables the communication between a web application and content-views which the application contains such as routing, navigation, authorization, and user experience elements. Luigi consists of two components: **Luigi core** and **Luigi client**. @@ -10,23 +10,27 @@ Luigi consists of two components: **Luigi core** and **Luigi client**. ## Installation -To get started with Luigi, read the [Luigi core](https://github.com/kyma-project/luigi/blob/master/core/README.md) document. +### Luigi core -- [Application setup](docs/application-setup.md) -- [Navigation configuration](docs/navigation-configuration.md) -- [Authorization configuration](docs/authorization-configuration.md) -- [Routing mechanism configuration](docs/router-configuration.md) -- [General settings](docs/general-settings.md) +Luigi core is the part of Luigi that enables navigation, security and routing. To get started with Luigi, read [this](docs/application-setup.md) document. + +- [Application setup](docs/application-setup.md) - Shows you the first steps to prepare your application for development. +- [Navigation configuration](docs/navigation-configuration.md) - Shows you how to configure navigation. +- [Authorization configuration](docs/authorization-configuration.md) - Shows you how to secure Luigi. +- [Routing mechanism configuration](docs/router-configuration.md) - Demonstrates routing in Luigi. +- [General settings](docs/general-settings.md) - Provides you with configuration parameters. See [this](https://github.com/kyma-project/luigi/blob/master/client/README.md) document to learn more about the Luigi client. -- [Lifecycle](docs/lifecycle.md) -- [Link Manager](docs/link-manager.md) -- [UX Manager](docs/ux-manager.md) +### Luigi client + +Luigi client enables integration of Luigi in views. Configure the lifecycle and links of the client. Customize the appearance of Luigi client. -## Development +- [Lifecycle](docs/lifecycle.md) - Gives you details on the life cycle of listeners, navigation nodes and event data. +- [Link Manager](docs/link-manager.md) - Shows how to configure the Link Manager. +- [UX Manager](docs/ux-manager.md) - Shows how to set up the UX Manager. -To run Luigi during your development phase, use the [Angular example application](/core/examples/luigi-sample-angular). +View [example applications](/core/examples). ### Code formatting for contributors diff --git a/docs/application-setup.md b/docs/application-setup.md index da6d38e6a2..b2c24035ae 100644 --- a/docs/application-setup.md +++ b/docs/application-setup.md @@ -2,6 +2,13 @@ Prior to the implementation of Luigi, you need to set up your application. This document shows you how to set up a web application using the Luigi micro front-end framework. +Choose the framework used to build your application: + +[Application setup without a framework](#noframework)
+[Angular 6](#angular6)
+[SAPUI5/OpenUI5](#sapui5)
+[VUE.JS](#vuejs) + ## Intitial steps Follow these steps to build a web application based on Luigi: @@ -21,7 +28,8 @@ npm install --save @kyma-project/luigi-client The examples on this page demonstrate commands that perform each of the necessary steps to set up your application. Each set of commands is grouped by the framework on which you execute it. -### Application setup for an application not using a framework + +### Application setup for an application not using a framework >**NOTE:** You need a development server capable of hosting Single Page Applications. The recommended server is Live Server. @@ -40,13 +48,14 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/sampleexternal.html > public/assets/temp.html -$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js +$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/assets/temp.html'}]}]}}" > public/assets/sampleconfig.js $ cp -r node_modules/\@kyma-project/luigi-* public $ live-server --entry-file=index.html public ```` + -### Application setup for Angular 6 +### Application setup for Angular 6 >**NOTE:** The Angular CLI is a prerequisite for this example. @@ -59,14 +68,15 @@ $ ng new my-dream-app --routing && cd my-dream-app $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mv src/index.html src/angular.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > src/index.html -$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > src/assets/sampleconfig.js +$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/angular.html'}]}]}}" > src/assets/sampleconfig.js $ sed 's/"src\/index.html"/"src\/angular.html"/g' angular.json > tmp.json && mv tmp.json angular.json $ sed 's/"src\/assets"/"src\/assets","src\/index.html",{"glob": "**","input": "node_modules\/@kyma-project\/luigi-core", "output": "\/luigi-core"},{"glob": "**","input": "node_modules\/@kyma-project\/luigi-client","output": "\/luigi-client"}/g' angular.json > tmp.json && mv tmp.json angular.json $ ng serve ```` + -### Application setup for SAPUI5/OpenUI5 +### Application setup for SAPUI5/OpenUI5 >**NOTE:** Live Server must be installed as your development server. @@ -85,13 +95,15 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html $ curl https://raw.githubusercontent.com/SAP/openui5/master/src/sap.m/test/sap/m/demokit/helloworld/index.html | sed 's/src="..\/..\/..\/..\/..\/resources\/sap-ui-core.js"/src="https:\/\/openui5.hana.ondemand.com\/resources\/sap-ui-core.js"/g' > public/ui5.html -$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js +$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/ui5.html'}]}]}}" > public/assets/sampleconfig.js $ cp -r node_modules/\@kyma-project/luigi-* public $ live-server --entry-file=index.html public ```` -### Application setup for VUE.JS + + +### Application setup for VUE.JS >**NOTE:** The VUE CLI is a prerequisite for this example. @@ -109,7 +121,7 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ mv public/index.html public/vue.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html -$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js +$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/vue.html'}]}]}}" > public/assets/sampleconfig.js $ echo "const webpack=require('webpack');const CopyWebpackPlugin=require('copy-webpack-plugin');module.exports={pages:{sampleapp:{entry:'src/main.js',template:'public/vue.html',filename:'vue.html'}},lintOnSave:true,runtimeCompiler:true,outputDir:'dist',configureWebpack:{plugins:[new CopyWebpackPlugin([{context:'public',to:'index.html',from:'index.html'},{context:'node_modules/@kyma-project/luigi-core',to:'./luigi-core',from:{glob:'**',dot:true}},{context:'node_modules/@kyma-project/luigi-client',to:'./luigi-client',from:{glob:'**',dot:true}}],{ignore:['.gitkeep','**/.DS_Store','**/Thumbs.db'],debug:'warning'})]}};" > vue.config.js $ npm run serve ```` \ No newline at end of file From 93870c39d67815bb86b85289a0b7791aecd038fe Mon Sep 17 00:00:00 2001 From: "Polite, David" Date: Fri, 14 Sep 2018 08:46:01 +0200 Subject: [PATCH 2/4] Put back correct code example lines --- docs/application-setup.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/application-setup.md b/docs/application-setup.md index b2c24035ae..d9b0d04e04 100644 --- a/docs/application-setup.md +++ b/docs/application-setup.md @@ -48,7 +48,7 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/sampleexternal.html > public/assets/temp.html -$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/assets/temp.html'}]}]}}" > public/assets/sampleconfig.js +$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js $ cp -r node_modules/\@kyma-project/luigi-* public $ live-server --entry-file=index.html public @@ -68,7 +68,7 @@ $ ng new my-dream-app --routing && cd my-dream-app $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mv src/index.html src/angular.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > src/index.html -$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/angular.html'}]}]}}" > src/assets/sampleconfig.js +$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > src/assets/sampleconfig.js $ sed 's/"src\/index.html"/"src\/angular.html"/g' angular.json > tmp.json && mv tmp.json angular.json $ sed 's/"src\/assets"/"src\/assets","src\/index.html",{"glob": "**","input": "node_modules\/@kyma-project\/luigi-core", "output": "\/luigi-core"},{"glob": "**","input": "node_modules\/@kyma-project\/luigi-client","output": "\/luigi-client"}/g' angular.json > tmp.json && mv tmp.json angular.json $ ng serve @@ -95,7 +95,7 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html $ curl https://raw.githubusercontent.com/SAP/openui5/master/src/sap.m/test/sap/m/demokit/helloworld/index.html | sed 's/src="..\/..\/..\/..\/..\/resources\/sap-ui-core.js"/src="https:\/\/openui5.hana.ondemand.com\/resources\/sap-ui-core.js"/g' > public/ui5.html -$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/ui5.html'}]}]}}" > public/assets/sampleconfig.js +$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js $ cp -r node_modules/\@kyma-project/luigi-* public $ live-server --entry-file=index.html public @@ -121,7 +121,7 @@ $ npm i -S @kyma-project/luigi-core@0.2.1 @kyma-project/luigi-client@0.2.1 $ mkdir -p public/assets $ mv public/index.html public/vue.html $ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/index.html > public/index.html -$ echo "LuigiConfig={navigation: {nodes: () => [{pathSegment:'home',label:'Home',children:[{pathSegment:'hw',label:'Hello World\!',viewUrl:'/vue.html'}]}]}}" > public/assets/sampleconfig.js +$ curl https://raw.githubusercontent.com/kyma-project/Luigi/master/core/examples/luigi-sample-angular/src/assets/basicConfiguration.js > public/assets/sampleconfig.js $ echo "const webpack=require('webpack');const CopyWebpackPlugin=require('copy-webpack-plugin');module.exports={pages:{sampleapp:{entry:'src/main.js',template:'public/vue.html',filename:'vue.html'}},lintOnSave:true,runtimeCompiler:true,outputDir:'dist',configureWebpack:{plugins:[new CopyWebpackPlugin([{context:'public',to:'index.html',from:'index.html'},{context:'node_modules/@kyma-project/luigi-core',to:'./luigi-core',from:{glob:'**',dot:true}},{context:'node_modules/@kyma-project/luigi-client',to:'./luigi-client',from:{glob:'**',dot:true}}],{ignore:['.gitkeep','**/.DS_Store','**/Thumbs.db'],debug:'warning'})]}};" > vue.config.js $ npm run serve ```` \ No newline at end of file From 3ac3bde8534285b7724590c20e83bd752a0be312 Mon Sep 17 00:00:00 2001 From: "Polite, David" Date: Fri, 14 Sep 2018 10:12:44 +0200 Subject: [PATCH 3/4] Correct sentence format, etc. --- README.md | 18 +++++++++--------- docs/application-setup.md | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 8214b3731d..25156db4b2 100644 --- a/README.md +++ b/README.md @@ -14,21 +14,21 @@ Luigi consists of two components: **Luigi core** and **Luigi client**. Luigi core is the part of Luigi that enables navigation, security and routing. To get started with Luigi, read [this](docs/application-setup.md) document. -- [Application setup](docs/application-setup.md) - Shows you the first steps to prepare your application for development. -- [Navigation configuration](docs/navigation-configuration.md) - Shows you how to configure navigation. -- [Authorization configuration](docs/authorization-configuration.md) - Shows you how to secure Luigi. -- [Routing mechanism configuration](docs/router-configuration.md) - Demonstrates routing in Luigi. -- [General settings](docs/general-settings.md) - Provides you with configuration parameters. +- [Application setup](docs/application-setup.md) shows you the first steps to prepare your application for development. +- [Navigation configuration](docs/navigation-configuration.md) shows you how to configure navigation. +- [Authorization configuration](docs/authorization-configuration.md) shows you how to secure Luigi. +- [Routing mechanism configuration](docs/router-configuration.md) demonstrates routing in Luigi. +- [General settings](docs/general-settings.md) provides you with configuration parameters. See [this](https://github.com/kyma-project/luigi/blob/master/client/README.md) document to learn more about the Luigi client. ### Luigi client -Luigi client enables integration of Luigi in views. Configure the lifecycle and links of the client. Customize the appearance of Luigi client. +Luigi client enables integration of Luigi in views. Configure the lifecycle and links of the client. Customize the appearance of your navigation. -- [Lifecycle](docs/lifecycle.md) - Gives you details on the life cycle of listeners, navigation nodes and event data. -- [Link Manager](docs/link-manager.md) - Shows how to configure the Link Manager. -- [UX Manager](docs/ux-manager.md) - Shows how to set up the UX Manager. +- [Lifecycle](docs/lifecycle.md) gives you details on the life cycle of listeners, navigation nodes and event data. +- [Link Manager](docs/link-manager.md) shows how to configure the Link Manager. +- [UX Manager](docs/ux-manager.md) shows how to set up the UX Manager. View [example applications](/core/examples). diff --git a/docs/application-setup.md b/docs/application-setup.md index d9b0d04e04..694a3d9f70 100644 --- a/docs/application-setup.md +++ b/docs/application-setup.md @@ -2,7 +2,7 @@ Prior to the implementation of Luigi, you need to set up your application. This document shows you how to set up a web application using the Luigi micro front-end framework. -Choose the framework used to build your application: +Choose the framework to build your application: [Application setup without a framework](#noframework)
[Angular 6](#angular6)
From b29829c5942ea8eb2633bfe38a32d87430a2ebb7 Mon Sep 17 00:00:00 2001 From: "Polite, David" Date: Fri, 14 Sep 2018 10:21:32 +0200 Subject: [PATCH 4/4] Capitalization and sentence rewording. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 25156db4b2..d1272d9a3c 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,9 @@ See [this](https://github.com/kyma-project/luigi/blob/master/client/README.md) d ### Luigi client -Luigi client enables integration of Luigi in views. Configure the lifecycle and links of the client. Customize the appearance of your navigation. +Luigi client enables integration of Luigi in views. You can easily configure the lifecycle and links of the client, as well as customize the appearance of your navigation. -- [Lifecycle](docs/lifecycle.md) gives you details on the life cycle of listeners, navigation nodes and event data. +- [Lifecycle](docs/lifecycle.md) gives you details on the life cycle of listeners, navigation Nodes and Event data. - [Link Manager](docs/link-manager.md) shows how to configure the Link Manager. - [UX Manager](docs/ux-manager.md) shows how to set up the UX Manager.