Add webapp shortcode where any web app can be loaded with an appId, script and stylesheet.

Author: Erik2609

content/english/technical-tools/documentation.md

@@ -29,4 +29,6 @@ overview_block:
         link: classification-quick-scan/#form
 ---
 
-{{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html" id="forms" height="700px" >}}
+{{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html" id="forms" height="500px" >}}
+
+{{< webapp id="webapp" appId="AIActWizard" stylesheet="https://ai-documentation.s3.eu-central-1.amazonaws.com/AI-Act-Questionnaire-v1.0.0.css" src="https://ai-documentation.s3.eu-central-1.amazonaws.com/AI-Act-Questionnaire-v1.0.0.js" title="" >}}

layouts/shortcodes/iframe.html

@@ -1,7 +1,7 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
 
 <div class="container-fluid mt-5 p-0">
-    <div class="shadow mobile-desktop-container-layout-web-app rounded-lg" id='{{.Get "id" }}'>
+    <div class="rounded-lg" id='{{.Get "id" }}'>
         <div class="row">
             <div class="col-12">
                 {{ if .Get "title" }}
@@ -19,7 +19,7 @@ <h3 class="pl-3">{{ .Get "title" }}
 
                 {{ end }}
                 {{ end}}
-                <div class="i-frame__container" style="margin: 0px -20px;">
+                <div class="i-frame__container" >
                     <iframe class="iframe" src='{{.Get "src" }}'
                         title='.Get "title"'>
                     </iframe>

layouts/shortcodes/webapp.html

@@ -0,0 +1,39 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<!-- text field -->
+<div class="container-fluid mt-5 p-0">
+    <div class="shadow mobile-desktop-container-layout-web-app bg-lightblue rounded-lg" id='{{ .Get "id" }}'>
+
+    <div class="row">
+      <div class="col-12">
+
+        {{ if .Get "title" }}
+        {{ if .Get "icon" }}
+        <!-- Title and icon -->
+        <h3 class="">
+          <span class='{{ .Get "icon" }} icon mb-4 pl-5'></span>
+        {{ .Get "title" | markdownify }}
+        </h3>
+
+        {{ else }}
+        <!-- Title -->
+        <h3 class="pl-3">{{ .Get "title" | markdownify }}
+        </h3>
+
+        {{ end }}
+        {{ end }}
+
+        <!-- Bias Detection Tool -->
+        <div id='{{.Get "appId" }}'></div>
+        <!-- /Bias Detection Tool -->
+
+    </div>
+</div>
+
+</div>
+</div>
+<!-- text field -->
+{{ if .Get "stylesheet" }}
+<link rel="stylesheet" href='{{ .Get "stylesheet" }}' />
+{{ end }}
+<script type="module" src='{{ .Get "src" }}'></script>

tina/collections/shared/page/building_blocks.ts

@@ -28,6 +28,7 @@ import team from "../templates/team";
 import team1 from "../templates/team1";
 import team2 from "../templates/team2";
 import tooltip from "../templates/tooltip";
+import webapp from "../templates/webapp";
 import image from "./image";
 import subtitle from "./subtitle";
 import title from "./title";
@@ -68,6 +69,7 @@ const building_blocks: TinaField[] = [
       team1,
       team2,
       tooltip,
+      webapp,
     ],
   },
   {

tina/collections/shared/templates/iframe.ts

@@ -33,15 +33,13 @@ const iframe: RichTextTemplate = {
       label: "Title",
       type: "string",
       description: "",
-      required: true,
     },
     {
       type: "string",
       name: "icon",
       label: "Icon",
       description:
         "From https://fontawesome.com/v5/search?m=free (e.g. fa fa-list for https://fontawesome.com/icons/list?f=classic&s=solid)",
-      required: false,
     },
   ],
 };

tina/collections/shared/templates/webapp.ts

@@ -0,0 +1,52 @@
+import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index";
+const webapp: RichTextTemplate = {
+  name: "webapp",
+  label: "Web App",
+  match: {
+    start: "{{<",
+    end: ">}}",
+  },
+  fields: [
+    {
+      name: "id",
+      label: "ID",
+      type: "string",
+      description: "Use top level template",
+      required: true,
+    },
+    {
+      name: "appId",
+      label: "App ID",
+      type: "string",
+      description: "App ID of the web app",
+      required: true,
+    },
+    {
+      name: "src",
+      label: "Script url",
+      type: "string",
+      description: "Script url of the web app",
+      required: true,
+    },
+    {
+      name: "stylesheet",
+      label: "Stylesheet url",
+      type: "string",
+      description: "Stylesheet url of the web app",
+    },
+    {
+      name: "title",
+      label: "Title",
+      type: "string",
+      description: "",
+    },
+    {
+      type: "string",
+      name: "icon",
+      label: "Icon",
+      description:
+        "From https://fontawesome.com/v5/search?m=free (e.g. fa fa-list for https://fontawesome.com/icons/list?f=classic&s=solid)",
+    },
+  ],
+};
+export default webapp;