Use Monaco for legacy API examples

glpi-project · May 6, 2024 · 11d6b22 · 11d6b22
1 parent f3440e8
commit 11d6b22
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/.webpack.config.js b/.webpack.config.js
@@ -104,7 +104,7 @@ let config = {
         ), // Clean lib dir content
         new MiniCssExtractPlugin(), // Extract styles into CSS files
         new MonacoWebpackPlugin({
-            'languages': ['html', 'javascript', 'typescript', 'json', 'markdown', 'twig', 'css', 'scss'],
+            'languages': ['html', 'javascript', 'typescript', 'json', 'markdown', 'twig', 'css', 'scss', 'shell'],
             'publicPath': '/public/lib/'
         }),
     ],

diff --git a/css/includes/_base.scss b/css/includes/_base.scss
@@ -46,6 +46,7 @@
     --tblr-body-bg: #f5f7fb;
     --tblr-bg-surface: #fff;
     --tblr-bg-surface-tertiary: var(--tblr-gray-50);
+    --tblr-bg-surface-dark: color-mix(in srgb, var(--tblr-bg-surface), var(--tblr-dark) 1.5%);
     --glpi-tabs-bg: color-mix(in srgb, var(--tblr-bg-surface), black 1.5%);
     --glpi-tabs-fg: var(--tblr-muted);
     --glpi-tabs-border-color: var(--tblr-border-color);

diff --git a/css/includes/_palette_dark.scss b/css/includes/_palette_dark.scss
@@ -49,6 +49,7 @@
     --tblr-gray-800: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 84%);
     --tblr-gray-900: var(--tblr-light);
     --tblr-gray-50: var(--tblr-gray-300);
+    --tblr-bg-surface-dark: color-mix(in srgb, var(--tblr-bg-surface), var(--tblr-light) 98.5%);
     --glpi-tabs-active-bg: color-mix(in srgb, var(--tblr-bg-surface), white 10%);
     --glpi-tabs-border-color: transparent;
     --glpi-scrollbar-thumb-color: color-mix(in srgb, var(--tblr-secondary), transparent 75%);

diff --git a/src/Api/API.php b/src/Api/API.php
@@ -51,6 +51,7 @@
 use Document;
 use Dropdown;
 use Glpi\Api\HL\Router;
+use Glpi\Application\View\TemplateRenderer;
 use Glpi\Asset\Asset_PeripheralAsset;
 use Glpi\DBAL\QueryExpression;
 use Glpi\Search\Provider\SQLProvider;
@@ -2436,16 +2437,33 @@ protected function header($html = false, $title = "")
     public function inlineDocumentation($file)
     {
         $this->header(true, __("API Documentation"));
-        echo Html::css("public/lib/prismjs.css");
-        echo Html::script("public/lib/prismjs.js");
 
-        echo "<div class='documentation'>";
         $documentation = file_get_contents(GLPI_ROOT . '/' . $file);
-
-        $md = new MarkdownRenderer();
-        echo $md->render($documentation);
-
-        echo "</div>";
+        // language=Twig
+        echo TemplateRenderer::getInstance()->renderFromStringTemplate(<<<TWIG
+            <div class='documentation'>{{ md|raw }}</div>
+            <script type="module">
+                import('{{ path("js/modules/Monaco/MonacoEditor.js") }}').then(() => {
+                    const lang_elements = $('code[class^="language-"]');
+                    lang_elements.each((index, element) => {
+                        const el = $(element);
+                        const code = el.text();
+                        let lang = el.attr('class').replace('language-', '');
+                        switch (lang) {
+                            case 'bash':
+                                lang = 'shell';
+                                break;
+                            case 'json':
+                                lang = 'javascript';
+                                break;
+                        }
+                        window.GLPI.Monaco.colorizeText(code, lang).then((html) => {
+                            el.html(html);
+                        });
+                    });
+                });
+            </script>
+TWIG, ['md' => (new MarkdownRenderer())->render($documentation)]);
 
         Html::nullFooter();
         exit;