SAP · fifoosid · Nov 6, 2019 · Jul 29, 2019 · Jul 29, 2019 · Jul 29, 2019
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,18 @@ yarn-debug.log*
 
 # Ignore default target directory for the npm package 'ui5-schemas'
 .tmp
+
+
+# Playground 
+packages/playground/_site/
+packages/playground/.sass-cache/
+packages/playground/assets/js/ui5-webcomponents/
+
+packages/playground/docs/components
+!packages/playground/docs/components/component.md
+
+packages/playground/docs/documentation
+!packages/playground/docs/documentation/documentation.md
+
+packages/playground/docs/tutorials
+!packages/playground/docs/tutorials/tutorials.md
diff --git a/.travis.yml b/.travis.yml
@@ -10,6 +10,10 @@ before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH="$HOME/.yarn/bin:$PATH"
 
+  # Playground dependecies:
+  - gem install jekyll -v 3.8.6
+  - gem install jekyll-seo-tag
+
 script:
 - yarn build
 - yarn test

diff --git a/deploy/deploy.sh b/deploy/deploy.sh
@@ -56,7 +56,7 @@ if [ "$TRAVIS_BRANCH" == "$TRAVIS_LATEST_RELEASE_WEBSITE_BRANCH" ]; then
 
   # Run the build again so rollup can generate the correct public path urls
   cd $TRAVIS_BUILD_DIR
-  DEPLOY_PUBLIC_PATH=https://sap.github.io/ui5-webcomponents/ yarn build
+  DEPLOY_PUBLIC_PATH=https://sap.github.io/ui5-webcomponents/assets/js/ui5-webcomponents/ yarn build:playground
 
   # Move master build folder to gh-pages folder
   cp -Rf $TRAVIS_BUILD_DIR/packages/playground/dist/* gh-pages
@@ -85,7 +85,7 @@ if [ "$TRAVIS_BRANCH" == "$TRAVIS_LATEST_RELEASE_WEBSITE_BRANCH" ]; then
 
   # Run the build again so rollup can generate the correct public path urls
   cd $TRAVIS_BUILD_DIR
-  DEPLOY_PUBLIC_PATH=https://sap.github.io/ui5-webcomponents/master yarn build
+  DEPLOY_PUBLIC_PATH=https://sap.github.io/ui5-webcomponents/master/assets/js/ui5-webcomponents/ yarn build:playground
 
   # Move master build folder to gh-pages folder
   cp -Rf $TRAVIS_BUILD_DIR/packages/playground/dist/* gh-pages/master

diff --git a/docs/Angular-tutorial.md b/docs/Angular-tutorial.md
@@ -2,30 +2,36 @@
 
 In this tutorial you will learn how to add UI5 Web Components to your application. The UI5 Web Components can be added both to new Angular applications, as well as already existing ones.
 
-## Step 1: Install Angular CLI: 
-```
+## Step 1: Install Angular CLI
+
+```bash
 npm install -g @angular/cli
 ```
 
-## Step 2: Create New Angular Application:
-```
+## Step 2: Create New Angular Application
+
+```bash
 ng new ui5-web-components-application
 cd ui5-web-components-application
 ```
 
-## Step 3: Add UI5 Web Components:
-```
+## Step 3: Add UI5 Web Components
+
+```bash
 npm install @ui5/webcomponents --save
 ```
 
 ## Step 4. Allow the Use of Custom Elements in Angular
+
 Before using UI5 Web Components, you have to allow the use of custom elements in Angular. To do so, you have to import CUSTOM_ELEMENTS_SCHEMA in ```app.module.ts``` :
+
 ```js
 import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 ```
+
 After importing it, you have to add it to the schemas array:
 
-```
+```js
 imports: [
     ...
 ],
@@ -34,35 +40,42 @@ schemas: [
 ]
 ```
 
-## Step 5. Import the Components That You Are Going to Use:
+## Step 5. Import the Components That You Are Going to Use
+
 ```js
 import "@ui5/webcomponents/dist/Button";
 ```
 
-## Step 6. Use the Imported Elements in Your Application:
+## Step 6. Use the Imported Elements in Your Application
+
 ```html
 <ui5-button>Hello world!</ui5-button>
 ```
 
-## Step 7. Launch the Application:
-```
+## Step 7. Launch the Application
+
+```bash
 ng serve -o
 ```
 
-## Additional:
+## Additional
 
-### Two-Way Data Binding:
+### Two-Way Data Binding
 
 You can use two-way data binding with the following components: CheckBox, RadioButton, Input, DatePicker, Switch, TextArea.
 In order to use it, you have to use a library called [Origami](https://github.com/hotforfeature/origami), that provides advanced support for two-way data binding of custom elements.
 
 Example:
-1. Install Origami: 
-```
+
+1. Install Origami:
+
+```bash
 npm install @codebakery/origami
 ```
+
 2. Import the OrigamiFormsModule from Origami
-```
+
+```js
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { OrigamiFormsModule } from '@codebakery/origami/forms';
@@ -78,6 +91,7 @@ export class AppModule {}
 ```
 
 3. Use Origami in your template:
+
 ```html
 <ui5-input [(ngModel)]="value" origami></ui5-input>
 ```
diff --git a/docs/Configuration.md b/docs/Configuration.md
@@ -16,7 +16,7 @@ calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian     |
 [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below		| Empty object | Allows to override locale-specific configuration
 
 <a name="rtl"></a>
-###RTL
+### RTL
 
 When the `rtl` setting is set to `true`, UI5 Web Components will adjust their styling accordingly.
 However, you should also set the HTML attribute `dir` to `rtl` on the `body` or `html` or any other relevant region of your application

diff --git a/docs/HowToUse.md → docs/How To Use.md b/docs/HowToUse.md → docs/How To Use.md
diff --git a/docs/PublicModuleImports.md → docs/Public Module Imports.md b/docs/PublicModuleImports.md → docs/Public Module Imports.md
diff --git a/docs/React-tutorial.md b/docs/React-tutorial.md
@@ -2,36 +2,40 @@
 
 In this tutorial you will learn how to add UI5 Web Components to your application. The UI5 Web Components can be added both to new React applications, as well as already existing ones.
 
-## Step 1. Start New Application. For Example with create-react-app:
-```
+## Step 1. Start New Application. For Example with create-react-app
+
+```bash
 npx create-react-app ui5-web-components-application
 cd ui5-web-components-application
 ```
 
-## Step 2. Add UI5 Web Components:
-```
+## Step 2. Add UI5 Web Components
+
+```bash
 npm install @ui5/webcomponents --save
 ```
 
-## Step 3. Import the Components That You Are Going to Use:
+## Step 3. Import the Components That You Are Going to Use
+
 ```js
 import "@ui5/webcomponents/dist/Button";
 ```
 
-## Step 4. Use the Imported Elements in Your Application:
+## Step 4. Use the Imported Elements in Your Application
+
 ```html
 <ui5-button>Hello world!</ui5-button>
 ```
 
-## Step 5. Launch the Application:
-```
+## Step 5. Launch the Application
+
+```bash
 yarn start
 ```
 
+## Additional
 
-## Additional:
-
-### Event Binding:
+### Event Binding
 
 In order to use the events, provided by UI5 Web Components, currently you need to get a ref to the component, because React doesn't support custom events. Here is an example of what you need to do in order to use the events provided by UI5 Web Components:
 
@@ -57,12 +61,12 @@ class Home extends Component {
 }
 ```
 
-### Bolean Properties Binding:
+### Bolean Properties Binding
 
 For boolean properties like ```collapsed```  in ```ui5-panel```, instead of setting true or false, you have to take care of the presence of the property. Here is an example:
 
 ```html
 <ui5-panel header-text="Achievements" collapsed={!this.state.achievements.length || undefined}>
     <!-- Content of ui5-panel -->
 </ui5-panel>
-```
+```
diff --git a/docs/Vue-tutorial.md b/docs/Vue-tutorial.md
@@ -2,49 +2,57 @@
 
 In this tutorial you will learn how to add UI5 Web Components to your application. The UI5 Web Components can be added both to new VueJS applications, as well as already existing ones.
 
-## Step 1. Install Vue CLI:
-```
+## Step 1. Install Vue CLI
+
+```bash
 npm install -g @vue/cli
 ```
 
-## Step 2. Init New App:
-```
+## Step 2. Init New App
+
+```bash
 vue create ui5-web-components-application
 cd ui5-web-components-application
 ```
 
-## Step 3. Add UI5 Web Components:
-```
+## Step 3. Add UI5 Web Components
+
+```bash
 npm install @ui5/webcomponents --save
 ```
 
 ## Step 4. Add UI5 Web Components to Vue ignoredElement
+
 Add the following line to your ```main.js``` file:
 
 ```js
 Vue.config.ignoredElements = [/^ui5-/];
 ```
 
-## Step 5. Import the Components That You Are Going to Use:
+## Step 5. Import the Components That You Are Going to Use
+
 ```js
 import "@ui5/webcomponents/dist/Button";
 ```
 
-## Step 6. Use the Imported Elements in Your Application:
+## Step 6. Use the Imported Elements in Your Application
+
 ```html
 <ui5-button>Hello world!</ui5-button>
 ```
 
-## Step 7: Launch the Application:
-```
+## Step 7: Launch the Application
+
+```bash
 yarn serve
 ```
 
-## Additional:
+## Additional
 
-### Two-Way Data Binding:
+### Two-Way Data Binding
 
 `v-model` binding doesn't work as expected for custom elements. In order to use two way data binding, you should bind and update the value yourself like this:
+
 ```html
 <ui5-input
     :value="inputValue"

diff --git a/lib/documentation/index.js b/lib/documentation/index.js
@@ -37,7 +37,7 @@ Handlebars.registerHelper('toLowerCase', function (str) {
 
 Handlebars.registerHelper('toKebabCase', function (str) {
 	const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-	return kebab !== str ? kebab : "";
+	return kebab !== str ? kebab : undefined;
 });
 
 Handlebars.registerHelper('checkEven', function (iIndex) {
@@ -105,20 +105,10 @@ const generateSamplePage = entry => {
 	} catch (err) { }
 
 	if (content) {
-		const fnRedirect = `
-		<script>
-			function redirect(event, component) {
-					event.preventDefault();
-					var location = window.parent.location.href;
-					window.parent.location.href = location.replace(/components\\/.+/gi, "components/" + component);
-			};
-		</script>
-		`;
 		const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
 		const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
 
-		content = content.replace('</body', APIReference + '</body');
-		content = content.replace('</body', fnRedirect + '</body');
+		content = content.replace('<!-- JSDoc marker -->', APIReference);
 		content = content.replace(sinceMarker, EntitySince);
 
 		content = content.replace(linkMatcher, match => {

diff --git a/lib/documentation/templates/api-events-section.js b/lib/documentation/templates/api-events-section.js
@@ -22,10 +22,10 @@ module.exports = {
           </div>
 
           {{#each this.parameters}}
-            <tr class="api-table-event-param" >
+            <tr class="api-table-event-param">
               <div class="api-table-content-event-params-wrapper">
                 <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} </br> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
+                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
               </div>
             </tr>
           {{/each}}

diff --git a/lib/documentation/templates/api-methods-section.js b/lib/documentation/templates/api-methods-section.js
@@ -18,7 +18,7 @@ module.exports = {
 
           {{#each this.parameters}}
             <div class="cell api-table-content-cell api-table-content-cell-bold api-table-param-name">{{this.name}}</div>
-            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} </br> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
+            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
           {{/each}}
         {{/each}}
       </div>

diff --git a/lib/documentation/templates/api-properties-section.js b/lib/documentation/templates/api-properties-section.js
@@ -14,7 +14,16 @@ module.exports = {
 
         {{#each properties}}
           <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}} {{#if this.readonly}} (readonly) {{else}} <br> <code>{{toKebabCase this.name}}{{/if}} </code></div>
+            <div class="cell api-table-content-cell api-table-content-cell-bold">
+              {{this.name}}
+              {{#if this.readonly}}
+                (readonly)
+              {{/if}}
+                <br>
+              {{#if (toKebabCase this.name)}}
+                <code>{{toKebabCase this.name}}</code>
+              {{/if}}
+            </div>
             <div class="cell api-table-content-cell">{{this.type}}</div>
             <div class="cell api-table-content-cell">{{this.defaultValue}}</div>
             <div class="cell api-table-content-cell api-table-content-cell-description">

diff --git a/lib/documentation/templates/template.js b/lib/documentation/templates/template.js
@@ -33,6 +33,6 @@ module.exports = {
         <a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
         <a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
       </div>
-      <img src="../../images/sap-logo-svg.svg" alt="Sap Logo" />
+      <img src="../../../../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
     </footer>`
 };
diff --git a/package.json b/package.json
@@ -9,18 +9,19 @@
     "ui5"
   ],
   "scripts": {
-    "build": "npm-run-all --sequential build:core build:base build:main build:playground",
+    "build": "npm-run-all --sequential build:core build:base build:main",
     "build:core": "cd packages/core && yarn build",
     "build:base": "cd packages/base && yarn build",
     "build:main": "cd packages/main && yarn build",
-    "build:playground": "cd packages/playground && yarn build",
+    "build:playground": "yarn build:main && cd packages/playground && yarn build",
     "clean": "npm-run-all --sequential clean:core clean:base clean:main",
     "clean:core": "cd packages/core && yarn clean",
     "clean:base": "cd packages/base && yarn clean",
     "clean:main": "cd packages/main && yarn clean",
     "start": "npm-run-all --parallel start:base start:main",
     "start:base": "cd packages/base && yarn start",
     "start:main": "cd packages/main && yarn start",
+    "start:playground": "cross-env DEPLOY_PUBLIC_PATH=/assets/js/ui5-webcomponents/ yarn build:main && cd packages/playground && yarn start",
     "test": "cd packages/main && yarn test",
     "lint": "wsrun --exclude-missing lint",
     "link-all": "wsrun link",