Add HTML file to documentation (#1082)

Add Html file to doc Co-authored-by: Zarko Simic <42171300+zarkosimic@users.noreply.github.com> Co-authored-by: Karolina Zydek <karolina.zydek@sap.com> Co-authored-by: Markus <1720843+maxmarkus@users.noreply.github.com>
SAP · Feb 18, 2020 · 296ae68 · 296ae68
1 parent 1079ca5
commit 296ae68
Showing 1 changed file with 79 additions and 2 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -25,13 +25,90 @@ This diagram illustrates the structure of Luigi:
 
 <img src="https://github.com/SAP/luigi/blob/master/docs/assets/luigi-overview-diagram.jpg?raw=true" width="600"/>
 
+ Do you want to try out Luigi without installing it on your machine? Try one of these options:
+
+<!-- accordion:start -->
+
+ ### HTML file
+
+It is possible to create a Luigi application using a single HTML file. This example aims to show the simplicity of Luigi, but it is not intended for real-life use.
+
+Copy and paste this code in a text editor, then save it as an HTML file:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	  <title>Hello Luigi</title>
+	  <link rel='stylesheet' href='https://unpkg.com/@kyma-project/luigi-core/luigi.css'>
+      <meta charset="utf-8">
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="https://unpkg.com/@kyma-project/luigi-core/luigi.js"></script>
+	<script>
+        Luigi.setConfig({
+            navigation: {
+                nodes: [{
+                    pathSegment: 'home',
+                    hideFromNav: true,
+                    children: [{
+                        pathSegment: 'hello',
+                        label: 'Hello Luigi',
+                        viewUrl: 'https://fiddle.luigi-project.io/examples/microfrontends/multipurpose.html',
+                        isolateView: true,
+                        context: {
+                            title: 'Hello Luigi!',
+                            content: " ",
+                            imgUrl: "https://fiddle.luigi-project.io/img/logos/Luigi-logo_rgb.svg",
+                            imgWidth: "300",
+                            imgTopMargin: true
+                        }
+                    },{
+                        pathSegment: 'hello2',
+                        label: 'Hello Maryna',
+                        viewUrl: 'https://fiddle.luigi-project.io/examples/microfrontends/multipurpose.html',
+                        isolateView: true,
+                        context: {
+                            title: 'Hello Maryna!',
+                            content: " ",
+                            imgUrl: "https://fiddle.luigi-project.io/img/logos/Luigi-logo_rgb.svg",
+                            imgWidth: "300",
+                            imgTopMargin: true
+                        }
+                    }]
+                }]
+            },
+            routing: {
+                useHashRouting: true
+            },
+            settings: {
+                responsiveNavigation: 'semiCollapsible',
+                header: {
+                    title: 'Hello Luigi',
+                    logo: 'https://fiddle.luigi-project.io/img/luigi.png'
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+### Luigi Fiddle
+Go to the [Luigi Fiddle](https://fiddle.luigi-project.io/) website. Click on **Modify Config** at the bottom right of the page to make changes to the Luigi application.
+
+<!-- accordion:end -->
 
 ## Prerequisites
 
-* Basic knowledge of HTML 
+* Basic knowledge of HTML
 * Basic knowledge of JavaScript
 
-## Steps
+## Setup
 
 ### Luigi Core