feat: develop example content for openmfp update

CONTRIBUTING.md

@@ -48,11 +48,21 @@ kubectl patch deployment openmfp-example-content -n openmfp-system --type='json'
 kubectl patch deployment openmfp-example-content -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/template/spec/containers/0/image", "value": "example-content:latest"}]' && \
 kubectl rollout restart deployment openmfp-example-content -n openmfp-system && \
 kubectl rollout status deployment openmfp-example-content -n openmfp-system && \
-kubectl patch contentconfiguration openmfp-example-content-ui -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/assets/config.json?r='$(date +%s%3N)'"}]' && \
-kubectl patch contentconfiguration openmfp-example-content-wc -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/wc/assets/config.json?r='$(date +%s%3N)'"}]'
+kubectl patch contentconfiguration openmfp-example-content-ui -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/example-content/ui/assets/config.json?r='$(date +%s%3N)'"}]' && \
+kubectl patch contentconfiguration openmfp-example-content-wc -n openmfp-system --type='json' -p='[{"op": "replace", "path": "/spec/remoteConfiguration/internalUrl", "value": "http://openmfp-example-content.openmfp-system.svc.cluster.local:8080/ui/example-content/wc/assets/config.json?r='$(date +%s%3N)'"}]'
 ```
 
 **Troubleshooting**
+- If you encounter error like this: 
+```
+    ERROR: command "docker save -o /tmp/images-tar1234567890/images.tar example-content:latest" failed with error: exit status 1
+```
+   Use this two commands and try again
+```sh
+    mkdir $HOME/tmp/
+    export TMPDIR=$HOME/tmp/ 
+```
+
 - If you encounter issues when starting the pod with the loaded image you [this issue](https://github.com/kubernetes-sigs/kind/issues?q=is%3Aissue%20state%3Aopen%20load%20image). A way to circumnvent this is to disable `Use containerd for pulling and storing images` in the docker settings.
 
 ## Issues

Dockerfile

@@ -10,7 +10,7 @@ RUN npm run build-prod
 RUN npm run build:wc
 
 FROM nginx:alpine
-COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/
-COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/wc/
+COPY --from=build /app/frontend/dist/ /usr/share/nginx/html/ui/example-content/ui/
+COPY --from=build /app/frontend/dist-wc/ /usr/share/nginx/html/ui/example-content/wc/
 COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 8080

frontend/angular.json

@@ -20,6 +20,7 @@
             "outputPath": "dist",
             "index": "projects/ui/src/index.html",
             "main": "projects/ui/src/main.ts",
+            "baseHref": "/ui/example-content/ui/",
             "polyfills": [
               "zone.js"
             ],
@@ -139,6 +140,7 @@
           "options": {
             "outputPath": "dist-wc",
             "index": "",
+            "baseHref": "/ui/example-content/wc/",
             "main": "projects/wc/src/main.ts",
             "polyfills": "projects/wc/src/polyfills.ts",
             "tsConfig": "projects/wc/tsconfig.app.json",

frontend/projects/ui/src/assets/config.json

@@ -1,5 +1,5 @@
 {
-  "name": "examples-overview",
+  "name": "examples-overview-ui",
   "creationTimestamp": "",
   "luigiConfigFragment": {
     "data": {
@@ -10,25 +10,77 @@
           "order": 1,
           "defineEntity": {
             "id": "main"
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "overview",
+          "label": "Overview of Examples",
+          "icon": "home",
+          "order": 1,
+          "defineEntity": {
+            "id": "overview"
           },
-          "children": [
-            {
-              "pathSegment": "overview",
-              "label": "Examples overview",
-              "icon": "home",
-              "defineEntity": {
-                "id": "overview"
-              },
-              "compound": {
-                "renderer": {
-                  "use": "grid",
-                  "config": {
-                    "columns": "1fr 1fr 1fr 1fr"
-                  }
-                }
+          "compound": {
+            "renderer": {
+              "use": "grid",
+              "config": {
+                "columns": "1fr 1fr 1fr 1fr"
               }
             }
-          ]
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "entity-definition",
+          "label": "Entity Definition",
+          "hideFromNav": true,
+          "order": 2,
+          "defineEntity": {
+            "id": "entity-definition"
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          },
+          "compound": {
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "micro-frontend-iframe",
+          "label": "Micro Frontend Iframe",
+          "hideFromNav": true,
+          "order": 3,
+          "virtualTree": true,
+          "navigationContext": "showcase",
+          "urlSuffix": "/ui/example-content/ui/#/showcase",
+          "loadingIndicator": {
+            "enabled": false
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          }
+        },
+        {
+          "entityType": "main",
+          "pathSegment": "web-component-integration",
+          "label": "Web Component Integration",
+          "hideFromNav": true,
+          "order": 4,
+          "defineEntity": {
+            "id": "web-component-integration"
+          },
+          "category": {
+            "label": "Showcase of Examples",
+            "icon": "attachment-html",
+            "collapsible": true
+          },
+          "compound": {
+          }
         }
       ]
     }

frontend/projects/ui/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>ExampleContent</title>
-  <base href="./">
+  <base href="/ui/example-content/ui/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

frontend/projects/wc/src/app/showcase/showcase.component.html

@@ -1,15 +1,41 @@
+<div class="title">
+  <ui5-title  level="H3">{{title}}</ui5-title>
+</div>
 <div class="showcase-cards">
+  <ui5-bar design="Header">
+    <ui5-button class="button" design="Attention" (ui5Click)="toggleShowAllCodes()" slot="endContent">
+      @if(showAllCode){
+        <ui5-icon name="detail-less"></ui5-icon> Hide All Code Examples
+      } @else {
+        <ui5-icon name="detail-more"></ui5-icon> Show All Code Examples
+      }
+    </ui5-button>
+  </ui5-bar>
+
   @for (item of showcaseItems; track $index) {
     <ui5-card class="showcase-card">
       <ui5-panel fixed>
         <div class="header">
-          <ui5-title class="title" level="H4">{{item.header}}</ui5-title>
-          @if(item.linkToExample) {
-            <ui5-button class="button" design="Emphasized" (ui5Click)="show(item.linkToExample)">Show Example</ui5-button>
-          }
+          <ui5-title class="headline" level="H4">{{item.header}}</ui5-title>
+          <div class="buttons">
+            @if(item.linkToExample){
+              <ui5-button class="button" design="Emphasized" (ui5Click)="showExample(item)">
+                <ui5-icon name="example"></ui5-icon> Show Example
+              </ui5-button>
+            }
+            <ui5-button class="button" design="Attention" (ui5Click)="toggleCode(item)">
+              @if(!!item.isCodeVisible){
+                <ui5-icon name="hide"></ui5-icon> Hide Code
+              } @else {
+                <ui5-icon name="show"></ui5-icon> Show Code
+              }
+            </ui5-button>
+          </div>
         </div>
-        <ui5-label class="description">{{item.label}}</ui5-label>
-        <ui5-text class="content">{{item.example}}</ui5-text>
+        <div class="panel description" [innerHTML]="item.label | safeHtml"></div>
+        @if(!!item.isCodeVisible){
+          <ui5-text class="panel content">{{item.example}}</ui5-text>
+        }
       </ui5-panel>
     </ui5-card>
   }

frontend/projects/wc/src/app/showcase/showcase.component.scss

@@ -2,34 +2,56 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .showcase-card {
   display: block;
 
+  .panel {
+    padding: 5px 10px 5px 10px;
+    border-radius: 15px;
+    white-space: pre-wrap;
+  }
+
   .description {
-    margin: 10px;
+    box-shadow: 0px 0px 20px lightblue;
+    background-color: aliceblue;
+    font-size: 16px;
   }
 
   .content {
-    white-space: pre-wrap;
+    box-shadow: 0px 0px 20px gainsboro;
+    background-color: ivory;
+    margin-top: 10px;
     word-spacing: 4px;
   }
 }
 
 .header {
   padding: 10px;
   display: flex;
+  justify-content: space-between;
 
-  .title {
+  .headline {
     padding-top: 5px;
   }
 
   .button {
-    margin-left: 30px;
+    margin-left: 20px;
     padding: 5px;
     border-radius: 5px;
   }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.title {
+  padding: 5px;
+  display: flex;
+  justify-content: center;
 }