Allow iframe building block / shortcode so we can use the self-hosted forms

Author: Erik2609

content/english/technical-tools/documentation.md

@@ -2,13 +2,13 @@
 type: regular
 title: Documentation for AI-systems
 subtitle: >
-  Open-source templates for model documentation. Based on
-  AI Act requirements and soft law frameworks, such as the
-  [Research framework Algorithms](https://www.rijksoverheid.nl/documenten/rapporten/2023/07/11/onderzoekskader-algoritmes-adr-2023#:~:text=De%20Auditdienst%20Rijk%20heeft%20een,risico's%20beheerst%20\(kunnen\)%20worden.)
-  of the Netherlands Executive Audit Agency, the
-  [Algorithm framework](https://minbzk.github.io/Algoritmekader/) of the Dutch Ministry of the Interior
-  and the Dutch Fundamental Rights Impact Assessment
-  ([IAMA](https://www.rijksoverheid.nl/documenten/rapporten/2021/02/25/impact-assessment-mensenrechten-en-algoritmes)). 
+  Open-source templates for model documentation. Based on AI Act requirements
+  and soft law frameworks, such as the [Research framework
+  Algorithms](https://www.rijksoverheid.nl/documenten/rapporten/2023/07/11/onderzoekskader-algoritmes-adr-2023#:~:text=De%20Auditdienst%20Rijk%20heeft%20een,risico's%20beheerst%20\(kunnen\)%20worden.)
+  of the Netherlands Executive Audit Agency, the [Algorithm
+  framework](https://minbzk.github.io/Algoritmekader/) of the Dutch Ministry of
+  the Interior and the Dutch Fundamental Rights Impact Assessment
+  ([IAMA](https://www.rijksoverheid.nl/documenten/rapporten/2021/02/25/impact-assessment-mensenrechten-en-algoritmes)).
 
 
   Help developing and share feedback through
@@ -18,61 +18,15 @@ image: /images/svg-illustrations/case_repository.svg
 overview_block:
   - title: Identification of AI-systems and high-risk algorithms
     content: >
-      By answering maximum 8 targeted questions, you can determine whether a data-driven application qualifies as an AI-system or as an impactful algorithm. Complete the dynamic questionnaire to find out.
+      By answering maximum 8 targeted questions, you can determine whether a
+      data-driven application qualifies as an AI-system or as an impactful
+      algorithm. Complete the dynamic questionnaire to find out.
     icon: fas fa-search
     id: quick-scan
     items:
       - title: Identify
         icon: fas fa-star
         link: classification-quick-scan/#form
-  # - title: Documentatie en classificatie tool
-  #   content: >
-  #     Organisatiebreed algoritmemanagementbeleid vraagt om pragmatische kaders.
-  #     Hierbij is een risico-georienteerde aanpak vaak leidend. Dit is in lijn
-  #     met nationale en internationale wetgeving voor algoritmes, zoals de AI
-  #     Verordening. Hieronder vindt u een voorbeeld van verschillende dynamische
-  #     vragenlijsten die organisaties helpen om algoritmes en AI-systemen te
-  #     indexeren, documenteren en classificeren.
-  #   icon: far fa-file
-  #   id: organisation-wide
-  #   items:
-  #     - title: 1. Intakeformulier
-  #       icon: fa fa-plus
-  #       link: intake/#form
-  #     - title: 2. Sturing en verantwoording
-  #       icon: fas fa-user-tag
-  #       link: roles-and-responsibilities/#form
-  #     - title: 3. Privacy
-  #       icon: fa fa-eye
-  #       link: privacy/#form
-  #     - title: 4. Data en model
-  #       icon: fas fa-share-alt
-  #       link: data-and-model/#form
-  # - title: AI Verordening
-  #   content: >
-  #     Deze dynamische vragenlijsten helpen je grip te krijgen op de AI
-  #     Verordening.
-  #   icon: fas fa-gavel
-  #   id: ai-act
-  #   items:
-  #     - title: AI-systeem classificatie
-  #       icon: fas fa-code-branch
-  #       link: AI-system-classification/#form
-  #     - title: Risicoclassificatie
-  #       icon: fas fa-mountain
-  #       link: risk-classification/#form
 ---
 
-{{< container_open icon="fas fa-wrench" title="Documentatie en classificatie tool" id="landing-container" >}}
-
-Maak gebruik van dynamische vragenlijsten om algoritmes en AI-systemen te documenten en classificeren.
-
-* [Identificatie van AI-systemen en hoog-risico algoritmes (max. 8 vragen)](#quick-scan)
-
-{{< container_close >}}
-
-{{< overview_block index="0" >}}
-
-<!-- {{< overview_block index="1" >}}
-
-{{< overview_block index="2" >}} -->
+{{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html" id="forms" height="700px" >}}

layouts/shortcodes/iframe.html

@@ -0,0 +1,31 @@
+{{ $_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="row">
+            <div class="col-12">
+                <div class="i-frame__container" style="margin: 0px -20px;">
+                    <iframe class="iframe" src='{{.Get "src" }}'
+                        title="">
+                    </iframe>
+                </div>
+                <style>
+                    .i-frame__container {
+                        background-color: #fff;
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                    }
+
+                    .iframe {
+                        border: none;
+                        width: 100%;
+                        height: {{.Get "height" }};
+                    }
+                </style>
+            </div>
+        </div>
+    </div>
+</div>

tina/collections/shared/page/building_blocks.ts

@@ -15,6 +15,7 @@ import dynamic_form_engine from "../templates/dynamic_form_engine";
 import embed_pdf from "../templates/embed_pdf";
 import form1 from "../templates/form1";
 import form2 from "../templates/form2";
+import iframe from "../templates/iframe";
 import template_image from "../templates/image";
 import overview_block from "../templates/overview_block";
 import pdf_frame from "../templates/pdf_frame";
@@ -56,6 +57,7 @@ const building_blocks: TinaField[] = [
       form1,
       form2,
       template_image,
+      iframe,
       overview_block,
       pdf_frame,
       promo_bar,

tina/collections/shared/templates/iframe.ts

@@ -0,0 +1,33 @@
+import { RichTextTemplate } from "@tinacms/schema-tools/dist/types/index";
+const iframe: RichTextTemplate = {
+  name: "iframe",
+  label: "iFrame",
+  match: {
+    start: "{{<",
+    end: ">}}",
+  },
+  fields: [
+    {
+      name: "id",
+      label: "ID",
+      type: "string",
+      description: "Use top level template",
+      required: true,
+    },
+    {
+      name: "src",
+      label: "URL",
+      type: "string",
+      description: "URL of the web app",
+      required: true,
+    },
+    {
+      name: "height",
+      label: "Height",
+      type: "string",
+      description: "Height of the iframe (i.e. 500px)",
+      required: true,
+    },
+  ],
+};
+export default iframe;