feat: ajout composant swagger-ui #21

Co-authored-by: pprevautel <philippe.prevautel@ign.fr>

_includes/components/swaggerui.njk

@@ -0,0 +1,10 @@
+<div id="{{ params.targetId }}" class="frx-swagger-ui"></div>
+<script>
+window.addEventListener('load', function() {
+    SwaggerUIBundle({
+        url: "{{ params.url }}",
+        dom_id: "{{ '#' ~ params.targetId }}",
+        docExpansion: "{{ (params.docExpansion|default('none')) }}"
+    });
+});
+</script>

_includes/layouts/base.njk

@@ -43,6 +43,10 @@
     <script src="/js/mermaid.min.js"></script>
     <script src="/js/mermaid.initialize.js"></script>
 {% endif %}
+{% if swaggerui %}
+    <link rel="stylesheet" href="/css/swagger-ui.css">
+    <script src="/js/swagger-ui.js"></script>
+{% endif %}
 <script src="/js/copy.js" defer></script>
 <title>{{ title or metadata.title }}</title>
 </head>

content/fr/blog/posts/swagger-ui.md

@@ -0,0 +1,40 @@
+---
+title: Intégration du Swagger UI
+description: Comment intégrer le Swagger UI dans une page du site ?
+date: git Last Modified
+swaggerui: true
+tags:
+    - composant
+---
+
+Chaque composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
+
+## Exemple d'utilisation
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("swaggerui", {
+    url: "https://data-qua.priv.geopf.fr/api/v3/api-docs",
+    targetId: "swagger-ui-demo"
+}) }}
+{% endraw %}
+```
+
+Le format complet de l'objet en paramètre est le suivant :
+
+```json
+{
+    "url": "string",
+    "targetId": "string",
+    "docExpansion": "full|list|none*"
+}
+```
+
+## Rendu
+
+{% from "components/component.njk" import component with context %}
+{{ component("swaggerui", {
+    url: "https://data-qua.priv.geopf.fr/api/v3/api-docs",
+    targetId: "swagger-ui-demo"
+}) }}

eleventy.config.js

@@ -32,6 +32,8 @@ module.exports = function (eleventyConfig) {
         "./node_modules/@gouvfr/dsfr/dist/dsfr.nomodule.min.js": "/js/dsfr.nomodule.min.js",
         "./node_modules/@gouvfr/dsfr/dist/artwork": "/artwork",
         "./node_modules/mermaid/dist/mermaid.min.js": "/js/mermaid.min.js",
+        "./node_modules/swagger-ui/dist/swagger-ui.css": "/css/swagger-ui.css",
+        "./node_modules/swagger-ui/dist/swagger-ui-bundle.js": "/js/swagger-ui.js",
     });
 
     // Run Eleventy when these files change:

package.json

@@ -49,7 +49,8 @@
     },
     "dependencies": {
         "@codegouvfr/eleventy-plugin-calendar": "^3.0.4",
-        "@codegouvfr/eleventy-plugin-i18n": "^0.1.3"
+        "@codegouvfr/eleventy-plugin-i18n": "^0.1.3",
+        "swagger-ui": "^5.17.10"
     },
     "lint-staged": {
         "*.{js,json,md}": [

public/css/index.css

@@ -156,3 +156,9 @@ pre[class*="language"] {
     right: 0.5em;
     top: 0.5em;
 }
+
+.frx-swagger-ui {
+    background-color: #ffffff;
+    padding-top: 0.8rem;
+    padding-bottom: 0.8rem;
+}