documentation browser

eez-open · Jul 15, 2023 · 6f9f658 · 6f9f658
1 parent 6c7bd22
commit 6f9f658
Show file tree

Hide file tree

Showing 140 changed files with 1,374 additions and 12,990 deletions.
diff --git a/docs/components/html/en-US/AddToInstrumentHistory.html b/docs/components/html/en-US/AddToInstrumentHistory.html
diff --git a/docs/components/html/en-US/Animate.html b/docs/components/html/en-US/Animate.html
diff --git a/docs/components/html/en-US/AppView.html b/docs/components/html/en-US/AppView.html
diff --git a/docs/components/html/en-US/BarGraph.html b/docs/components/html/en-US/BarGraph.html
diff --git a/docs/components/html/en-US/Bitmap.html b/docs/components/html/en-US/Bitmap.html
diff --git a/docs/components/html/en-US/Button.html b/docs/components/html/en-US/Button.html
diff --git a/docs/components/html/en-US/ButtonGroup.html b/docs/components/html/en-US/ButtonGroup.html
diff --git a/docs/components/html/en-US/CSVParse.html b/docs/components/html/en-US/CSVParse.html
diff --git a/docs/components/html/en-US/CSVStringify.html b/docs/components/html/en-US/CSVStringify.html
diff --git a/docs/components/html/en-US/CallAction.html b/docs/components/html/en-US/CallAction.html
diff --git a/docs/components/html/en-US/Canvas.html b/docs/components/html/en-US/Canvas.html
diff --git a/docs/components/html/en-US/CatchError.html b/docs/components/html/en-US/CatchError.html
diff --git a/docs/components/html/en-US/Checkbox.html b/docs/components/html/en-US/Checkbox.html
diff --git a/docs/components/html/en-US/CollectStream.html b/docs/components/html/en-US/CollectStream.html
diff --git a/docs/components/html/en-US/Comment.html b/docs/components/html/en-US/Comment.html
diff --git a/docs/components/html/en-US/Compare.html b/docs/components/html/en-US/Compare.html
diff --git a/docs/components/html/en-US/ConnectInstrument.html b/docs/components/html/en-US/ConnectInstrument.html
diff --git a/docs/components/html/en-US/Constant.html b/docs/components/html/en-US/Constant.html
diff --git a/docs/components/html/en-US/Container.html b/docs/components/html/en-US/Container.html
diff --git a/docs/components/html/en-US/Counter.html b/docs/components/html/en-US/Counter.html
diff --git a/docs/components/html/en-US/DateNow.html b/docs/components/html/en-US/DateNow.html
diff --git a/docs/components/html/en-US/Delay.html b/docs/components/html/en-US/Delay.html
diff --git a/docs/components/html/en-US/DisplayData.html b/docs/components/html/en-US/DisplayData.html
diff --git a/docs/components/html/en-US/Dropdown.html b/docs/components/html/en-US/Dropdown.html
diff --git a/docs/components/html/en-US/DynamicCallAction.html b/docs/components/html/en-US/DynamicCallAction.html
diff --git a/docs/components/html/en-US/EEZChart.html b/docs/components/html/en-US/EEZChart.html
diff --git a/docs/components/html/en-US/End.html b/docs/components/html/en-US/End.html
diff --git a/docs/components/html/en-US/Error.html b/docs/components/html/en-US/Error.html
diff --git a/docs/components/html/en-US/Eval JS.html b/docs/components/html/en-US/Eval JS.html
diff --git a/docs/components/html/en-US/Evaluate.html b/docs/components/html/en-US/Evaluate.html
diff --git a/docs/components/html/en-US/ExecuteCommand.html b/docs/components/html/en-US/ExecuteCommand.html
diff --git a/docs/components/html/en-US/FileAppend.html b/docs/components/html/en-US/FileAppend.html
diff --git a/docs/components/html/en-US/FileOpenDialog.html b/docs/components/html/en-US/FileOpenDialog.html
diff --git a/docs/components/html/en-US/FileRead.html b/docs/components/html/en-US/FileRead.html
diff --git a/docs/components/html/en-US/FileSaveDialog.html b/docs/components/html/en-US/FileSaveDialog.html
diff --git a/docs/components/html/en-US/FileWrite.html b/docs/components/html/en-US/FileWrite.html
diff --git a/docs/components/html/en-US/Gauge.html b/docs/components/html/en-US/Gauge.html
diff --git a/docs/components/html/en-US/GetInstrument.html b/docs/components/html/en-US/GetInstrument.html
diff --git a/docs/components/html/en-US/GetInstrumentProperties.html b/docs/components/html/en-US/GetInstrumentProperties.html
diff --git a/docs/components/html/en-US/Grid.html b/docs/components/html/en-US/Grid.html
diff --git a/docs/components/html/en-US/HTTP.html b/docs/components/html/en-US/HTTP.html
diff --git a/docs/components/html/en-US/Input.html b/docs/components/html/en-US/Input.html
diff --git a/docs/components/html/en-US/IsTrue.html b/docs/components/html/en-US/IsTrue.html
diff --git a/docs/components/html/en-US/JSONParse.html b/docs/components/html/en-US/JSONParse.html
diff --git a/docs/components/html/en-US/JSONStringify.html b/docs/components/html/en-US/JSONStringify.html
diff --git a/docs/components/html/en-US/LVGL Arc.html b/docs/components/html/en-US/LVGL Arc.html
diff --git a/docs/components/html/en-US/LVGL Bar.html b/docs/components/html/en-US/LVGL Bar.html
diff --git a/docs/components/html/en-US/LVGL Button.html b/docs/components/html/en-US/LVGL Button.html
diff --git a/docs/components/html/en-US/LVGL Calendar.html b/docs/components/html/en-US/LVGL Calendar.html
diff --git a/docs/components/html/en-US/LVGL Chart.html b/docs/components/html/en-US/LVGL Chart.html
diff --git a/docs/components/html/en-US/LVGL Checkbox.html b/docs/components/html/en-US/LVGL Checkbox.html
diff --git a/docs/components/html/en-US/LVGL Colorwheel.html b/docs/components/html/en-US/LVGL Colorwheel.html
diff --git a/docs/components/html/en-US/LVGL Dropdown.html b/docs/components/html/en-US/LVGL Dropdown.html
diff --git a/docs/components/html/en-US/LVGL Image.html b/docs/components/html/en-US/LVGL Image.html
diff --git a/docs/components/html/en-US/LVGL Imgbutton.html b/docs/components/html/en-US/LVGL Imgbutton.html
diff --git a/docs/components/html/en-US/LVGL Keyboard.html b/docs/components/html/en-US/LVGL Keyboard.html
diff --git a/docs/components/html/en-US/LVGL Label.html b/docs/components/html/en-US/LVGL Label.html
diff --git a/docs/components/html/en-US/LVGL Meter.html b/docs/components/html/en-US/LVGL Meter.html
diff --git a/docs/components/html/en-US/LVGL Panel.html b/docs/components/html/en-US/LVGL Panel.html
diff --git a/docs/components/html/en-US/LVGL Roller.html b/docs/components/html/en-US/LVGL Roller.html
diff --git a/docs/components/html/en-US/LVGL Slider.html b/docs/components/html/en-US/LVGL Slider.html
diff --git a/docs/components/html/en-US/LVGL Spinner.html b/docs/components/html/en-US/LVGL Spinner.html
diff --git a/docs/components/html/en-US/LVGL Switch.html b/docs/components/html/en-US/LVGL Switch.html
diff --git a/docs/components/html/en-US/LVGL Textarea.html b/docs/components/html/en-US/LVGL Textarea.html
diff --git a/docs/components/html/en-US/LVGL UserWidget.html b/docs/components/html/en-US/LVGL UserWidget.html
diff --git a/docs/components/html/en-US/LVGL.html b/docs/components/html/en-US/LVGL.html
diff --git a/docs/components/html/en-US/LineChart.html b/docs/components/html/en-US/LineChart.html
diff --git a/docs/components/html/en-US/List.html b/docs/components/html/en-US/List.html
diff --git a/docs/components/html/en-US/ListGraph.html b/docs/components/html/en-US/ListGraph.html
diff --git a/docs/components/html/en-US/Log.html b/docs/components/html/en-US/Log.html
diff --git a/docs/components/html/en-US/Loop.html b/docs/components/html/en-US/Loop.html
diff --git a/docs/components/html/en-US/MQTTConnect.html b/docs/components/html/en-US/MQTTConnect.html
diff --git a/docs/components/html/en-US/MQTTDisconnect.html b/docs/components/html/en-US/MQTTDisconnect.html
diff --git a/docs/components/html/en-US/MQTTEvent.html b/docs/components/html/en-US/MQTTEvent.html
diff --git a/docs/components/html/en-US/MQTTInit.html b/docs/components/html/en-US/MQTTInit.html
diff --git a/docs/components/html/en-US/MQTTPublish.html b/docs/components/html/en-US/MQTTPublish.html
diff --git a/docs/components/html/en-US/MQTTSubscribe.html b/docs/components/html/en-US/MQTTSubscribe.html
diff --git a/docs/components/html/en-US/MQTTUnsubscribe.html b/docs/components/html/en-US/MQTTUnsubscribe.html
diff --git a/docs/components/html/en-US/Markdown.html b/docs/components/html/en-US/Markdown.html
diff --git a/docs/components/html/en-US/MultilineText.html b/docs/components/html/en-US/MultilineText.html
diff --git a/docs/components/html/en-US/NoOp.html b/docs/components/html/en-US/NoOp.html
diff --git a/docs/components/html/en-US/OnEvent.html b/docs/components/html/en-US/OnEvent.html
diff --git a/docs/components/html/en-US/Output.html b/docs/components/html/en-US/Output.html
diff --git a/docs/components/html/en-US/OverrideStyle.html b/docs/components/html/en-US/OverrideStyle.html
diff --git a/docs/components/html/en-US/Progress.html b/docs/components/html/en-US/Progress.html
diff --git a/docs/components/html/en-US/PythonEnd.html b/docs/components/html/en-US/PythonEnd.html
diff --git a/docs/components/html/en-US/PythonRun.html b/docs/components/html/en-US/PythonRun.html
diff --git a/docs/components/html/en-US/PythonSendMessage.html b/docs/components/html/en-US/PythonSendMessage.html
diff --git a/docs/components/html/en-US/QRCode.html b/docs/components/html/en-US/QRCode.html
diff --git a/docs/components/html/en-US/ReadSetting.html b/docs/components/html/en-US/ReadSetting.html
diff --git a/docs/components/html/en-US/Rectangle.html b/docs/components/html/en-US/Rectangle.html
diff --git a/docs/components/html/en-US/Regexp.html b/docs/components/html/en-US/Regexp.html
diff --git a/docs/components/html/en-US/Roller.html b/docs/components/html/en-US/Roller.html
diff --git a/docs/components/html/en-US/SCPI.html b/docs/components/html/en-US/SCPI.html
diff --git a/docs/components/html/en-US/ScrollBar.html b/docs/components/html/en-US/ScrollBar.html
diff --git a/docs/components/html/en-US/Select.html b/docs/components/html/en-US/Select.html
diff --git a/docs/components/html/en-US/SelectInstrument.html b/docs/components/html/en-US/SelectInstrument.html
diff --git a/docs/components/html/en-US/SelectLanguage.html b/docs/components/html/en-US/SelectLanguage.html
diff --git a/docs/components/html/en-US/SerialConnect.html b/docs/components/html/en-US/SerialConnect.html
diff --git a/docs/components/html/en-US/SerialDisconnect.html b/docs/components/html/en-US/SerialDisconnect.html
diff --git a/docs/components/html/en-US/SerialListPorts.html b/docs/components/html/en-US/SerialListPorts.html
diff --git a/docs/components/html/en-US/SerialRead.html b/docs/components/html/en-US/SerialRead.html
diff --git a/docs/components/html/en-US/SerialWrite.html b/docs/components/html/en-US/SerialWrite.html
diff --git a/docs/components/html/en-US/SetPageDirection.html b/docs/components/html/en-US/SetPageDirection.html
diff --git a/docs/components/html/en-US/SetVariable.html b/docs/components/html/en-US/SetVariable.html
diff --git a/docs/components/html/en-US/ShowFileInFolder.html b/docs/components/html/en-US/ShowFileInFolder.html
diff --git a/docs/components/html/en-US/ShowKeyboard.html b/docs/components/html/en-US/ShowKeyboard.html
diff --git a/docs/components/html/en-US/ShowKeypad.html b/docs/components/html/en-US/ShowKeypad.html
diff --git a/docs/components/html/en-US/ShowMessageBox.html b/docs/components/html/en-US/ShowMessageBox.html
diff --git a/docs/components/html/en-US/ShowPage.html b/docs/components/html/en-US/ShowPage.html
diff --git a/docs/components/html/en-US/Slider.html b/docs/components/html/en-US/Slider.html
diff --git a/docs/components/html/en-US/SortArray.html b/docs/components/html/en-US/SortArray.html
diff --git a/docs/components/html/en-US/Spinner.html b/docs/components/html/en-US/Spinner.html
diff --git a/docs/components/html/en-US/Start.html b/docs/components/html/en-US/Start.html
diff --git a/docs/components/html/en-US/Switch.html b/docs/components/html/en-US/Switch.html
diff --git a/docs/components/html/en-US/SwitchCase.html b/docs/components/html/en-US/SwitchCase.html
diff --git a/docs/components/html/en-US/Terminal.html b/docs/components/html/en-US/Terminal.html
diff --git a/docs/components/html/en-US/TestAndSet.html b/docs/components/html/en-US/TestAndSet.html
diff --git a/docs/components/html/en-US/Text.html b/docs/components/html/en-US/Text.html
diff --git a/docs/components/html/en-US/TextInput.html b/docs/components/html/en-US/TextInput.html
diff --git a/docs/components/html/en-US/ToggleButton.html b/docs/components/html/en-US/ToggleButton.html
diff --git a/docs/components/html/en-US/UpDown.html b/docs/components/html/en-US/UpDown.html
diff --git a/docs/components/html/en-US/UserWidget.html b/docs/components/html/en-US/UserWidget.html
diff --git a/docs/components/html/en-US/Watch.html b/docs/components/html/en-US/Watch.html
diff --git a/docs/components/html/en-US/WriteSettings.html b/docs/components/html/en-US/WriteSettings.html
diff --git a/docs/components/html/en-US/YTGraph.html b/docs/components/html/en-US/YTGraph.html
diff --git a/docs/components/html/en-US/images/animation.png b/docs/components/html/en-US/images/animation.png
diff --git a/help/en-US/components/Component.md b/help/en-US/components/Component.md
@@ -10,8 +10,6 @@ Poravnavanje i distribucija komponenti.
 
 X pozicija komponente.
 
-![Alt text](images/align_and_distribute.png)
-
 ## Top [DRAFT]
 
 Y pozicija komponente.

diff --git a/help/en-US/components/images/animation.png b/help/en-US/components/images/animation.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,9 @@
         "start": "electron --trace-warnings --trace-deprecation .",
         "build": "npm run build-src && npm run build-css && npm run build-dark-css && npm run build-eez-runtime && npm run build-lvgl-runtime && npm run make-electron-builder-yml",
         "build-src": "tsc && node node_modules/gulp-cli/bin/gulp.js release",
-        "build-css": "node node_modules/less/bin/lessc --clean-css packages/eez-studio-ui/_stylesheets/main.less build/eez-studio-ui/_stylesheets/main.css",
+        "build-css": "node node_modules/less/bin/lessc --clean-css packages/eez-studio-ui/_stylesheets/main.less build/eez-studio-ui/_stylesheets/main.css && npm run build-component-doc-css",
         "build-dark-css": "node node_modules/less/bin/lessc packages/eez-studio-ui/_stylesheets/main-dark.less build/eez-studio-ui/_stylesheets/main-dark.css",
+        "build-component-doc-css": "node node_modules/less/bin/lessc --clean-css packages/eez-studio-ui/_stylesheets/component-doc-light.less build/eez-studio-ui/_stylesheets/component-doc.css",
         "build-eez-runtime": "run-script-os",
         "build-eez-runtime:darwin:linux": "cp packages/project-editor/flow/runtime/eez_runtime.* build/project-editor/flow/runtime",
         "build-eez-runtime:win32": "copy packages\\project-editor\\flow\\runtime\\eez_runtime.* build\\project-editor\\flow\\runtime\\",
@@ -55,6 +56,7 @@
         "@types/emscripten": "^1.39.6",
         "@types/ffi-napi": "^4.0.7",
         "@types/jquery": "^3.3.38",
+        "@types/jsdom": "^21.1.1",
         "@types/json-stable-stringify": "^1.0.34",
         "@types/lodash": "^4.14.185",
         "@types/marked": "^5.0.0",
@@ -85,6 +87,7 @@
         "gulp": "^4.0.2",
         "gulp-cli": "^2.2.0",
         "gulp-terser": "^2.1.0",
+        "jsdom": "^22.1.0",
         "json-to-pretty-yaml": "^1.2.2",
         "less": "^3.13.1",
         "less-plugin-clean-css": "^1.5.1",

diff --git a/packages/eez-studio-ui/_stylesheets/app.less b/packages/eez-studio-ui/_stylesheets/app.less
@@ -7236,97 +7236,6 @@ button.EezStudio_Action {
     height: 100%;
     display: flex;
     flex-direction: column;
-
-    .EezStudio_Component_Documentation {
-        flex: 1;
-        padding: 10px;
-        background-color: @backgroundColor;
-        overflow: auto;
-
-        .EezStudio_Component_Documentation_TitleEnclosure {
-            padding-bottom: 10px;
-            border-bottom: 1px solid @borderColor;
-            margin-bottom: 20px;
-
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .EezStudio_Component_Documentation_Title {
-                display: flex;
-                align-items: center;
-                font-size: 32px;
-                border-radius: 8px;
-                padding: 5px 15px;
-                width: fit-content;
-
-                img,
-                svg {
-                    height: 36px;
-                    object-fit: contain;
-                }
-
-                & > div:last-child {
-                    padding-left: 10px;
-                }
-            }
-
-            .EezStudio_Component_Documentation_Title_ProjectTypes {
-                svg,
-                img {
-                    margin-right: 10px;
-                }
-
-                svg:last_child,
-                img:last_child {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        .EezStudio_Component_Documentation_Body {
-            .EezStudio_Component_Documentation_BodySection {
-                & > h1:first-child {
-                    font-size: 18px;
-                    font-weight: bold;
-                    text-transform: uppercase;
-                }
-                & > div:nth-child(2) {
-                    padding-left: 10px;
-                }
-                margin-bottom: 15px;
-
-                & div > dl > dt {
-                    display: flex;
-                    h2 {
-                        margin-bottom: 0;
-                        margin-right: 20px;
-                        font-size: 14px;
-                        line-height: var(--bs-body-line-height);
-                    }
-                    margin-bottom: 10px;
-                }
-
-                .accordion-item {
-                    h2 {
-                        font-size: 14px;
-                    }
-                }
-
-                .accordion-body dt {
-                    display: flex;
-                    h3 {
-                        margin-bottom: 0;
-                        margin-right: 20px;
-                        font-size: 14px;
-                        line-height: var(--bs-body-line-height);
-                    }
-                    margin-bottom: 10px;
-                }
-            }
-            .EezStudio_Component_Documentation_BodySection:last-child {
-                margin-bottom: 0;
-            }
-        }
-    }
 }
+
+@import "component-doc";
diff --git a/packages/eez-studio-ui/_stylesheets/component-doc-light.less b/packages/eez-studio-ui/_stylesheets/component-doc-light.less
@@ -0,0 +1,2 @@
+@import "vars";
+@import "component-doc";
diff --git a/packages/eez-studio-ui/_stylesheets/component-doc.less b/packages/eez-studio-ui/_stylesheets/component-doc.less
@@ -0,0 +1,97 @@
+.EezStudio_DocumentationBrowser_Content_Help {
+    .EezStudio_Component_Documentation {
+        flex: 1;
+        padding: 10px;
+        background-color: @backgroundColor;
+        overflow: auto;
+
+        .EezStudio_Component_Documentation_TitleEnclosure {
+            padding-bottom: 10px;
+            border-bottom: 1px solid @borderColor;
+            margin-bottom: 20px;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .EezStudio_Component_Documentation_Title {
+                display: flex;
+                align-items: center;
+                font-size: 32px;
+                border-radius: 8px;
+                padding: 5px 15px;
+                width: fit-content;
+
+                & > div:nth-child(1) {
+                    display: inline-flex;
+                    img,
+                    svg {
+                        height: 36px;
+                        object-fit: contain;
+                    }
+                }
+
+                & > div:nth-child(2) {
+                    padding-left: 10px;
+                }
+            }
+
+            .EezStudio_Component_Documentation_Title_ProjectTypes {
+                svg,
+                img {
+                    margin-right: 10px;
+                }
+
+                svg:last_child,
+                img:last_child {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        .EezStudio_Component_Documentation_Body {
+            .EezStudio_Component_Documentation_BodySection {
+                & > h1:first-child {
+                    font-size: 18px;
+                    font-weight: bold;
+                    text-transform: uppercase;
+                }
+                & > div:nth-child(2) {
+                    padding-left: 10px;
+                }
+                margin-bottom: 15px;
+
+                & div > dl > dt {
+                    display: flex;
+                    h2 {
+                        margin-bottom: 0;
+                        margin-right: 20px;
+                        font-size: 14px;
+                        line-height: var(--bs-body-line-height);
+                    }
+                    margin-bottom: 10px;
+                }
+
+                .accordion-item {
+                    h2 {
+                        font-size: 14px;
+                    }
+                }
+
+                .accordion-body dt {
+                    display: flex;
+                    h3 {
+                        margin-bottom: 0;
+                        margin-right: 20px;
+                        font-size: 14px;
+                        line-height: var(--bs-body-line-height);
+                    }
+                    margin-bottom: 10px;
+                }
+            }
+            .EezStudio_Component_Documentation_BodySection:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
diff --git a/packages/home/documentation-browser/generate-html.tsx b/packages/home/documentation-browser/generate-html.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { resolve } from "path";
 import { createRoot } from "react-dom/client";
 import fs from "fs";
 
@@ -11,107 +12,6 @@ import { getModel } from "./model";
 import { ComponentContent } from "./components/ComponentContent";
 import { sourceRootDir } from "eez-studio-shared/util";
 
-const CSS = `.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation {
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    overflow: auto;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #e0e0e0;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title {
-    display: flex;
-    align-items: center;
-    font-size: 32px;
-    border-radius: 8px;
-    padding: 5px 15px;
-    width: fit-content;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title
-    img,
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title
-    svg {
-    height: 36px;
-    object-fit: contain;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title
-    > div:last-child {
-    padding-left: 10px;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title_ProjectTypes
-    img,
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title_ProjectTypes
-    svg {
-    margin-right: 10px;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title_ProjectTypes
-    img:last_child,
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_TitleEnclosure
-    .EezStudio_Component_Documentation_Title_ProjectTypes
-    svg:last_child {
-    margin-right: 0;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_Body
-    .EezStudio_Component_Documentation_BodySection {
-    margin-bottom: 15px;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_Body
-    .EezStudio_Component_Documentation_BodySection
-    > div:first-child {
-    font-size: 18px;
-    font-weight: 700;
-    text-transform: uppercase;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_Body
-    .EezStudio_Component_Documentation_BodySection
-    > div:nth-child(2) {
-    padding-left: 10px;
-}
-.EezStudio_DocumentationBrowser_Content_Help
-    .EezStudio_Component_Documentation
-    .EezStudio_Component_Documentation_Body
-    .EezStudio_Component_Documentation_BodySection:last-child {
-    margin-bottom: 0;
-}`;
-
 async function generateHTMLFile(
     componentInfo: ComponentInfo,
     filePath: string
@@ -127,6 +27,12 @@ async function generateHTMLFile(
 
     await new Promise(resolve => setTimeout(resolve, 10));
 
+    const cssFilePath = resolve(
+        `${sourceRootDir()}/eez-studio-ui/_stylesheets/component-doc.css`
+    );
+    console.log(cssFilePath);
+    let CSS = await fs.promises.readFile(cssFilePath, "utf8");
+
     const html = `<!DOCTYPE html>
 <html lang="en">
 <head>