Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add (optional) excalidraw custom asset path #1654

Merged
merged 8 commits into from
Oct 13, 2023
Merged

Add (optional) excalidraw custom asset path #1654

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
db9b74a
Move excalidraw script import to worker.js
gerlingsm Oct 2, 2023
4c06424
add custom asset path over env variable
gerlingsm Oct 2, 2023
ce1b59b
Add empty env variable to dockerfile
gerlingsm Oct 2, 2023
fd8a528
Update excalidraw documentation
gerlingsm Oct 2, 2023
5fe69e1
update formatting
gerlingsm Oct 2, 2023
ec65329
Add a comment and move the global definition before loading excalidra…
ggrossetie Oct 12, 2023
f2a0253
Apply suggestions from documentation review
ggrossetie Oct 12, 2023
e3bdbe5
Title capitalization
ggrossetie Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/modules/setup/pages/configuration.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,14 @@ TIP: Keep in mind that browsers also have a URI limit on `<img>` tags.
Most modern browsers https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers/417184#417184[support a URI length greater than 64000] on `<img>` tags but this value is probably a bit excessive.
We recommend to use a maximum length that's not greater than 8192 and not greater than 5120 if you are supporting IE 11.

== Excalidraw Asset Path
ggrossetie marked this conversation as resolved.
Show resolved Hide resolved

By default excalidraw loads the assets from a public CDN. (unkpg)
ggrossetie marked this conversation as resolved.
Show resolved Hide resolved

Its possible to change this behaviour over the KROKI_EXCALIDRAW_ASSET_PATH env variable, which is empty by default
ggrossetie marked this conversation as resolved.
Show resolved Hide resolved

More informationen about the asset path can be found here: https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation
ggrossetie marked this conversation as resolved.
Show resolved Hide resolved

== Enabling SSL on the server

By default, SSL/TLS is not enabled on the server but you can enable it by setting `KROKI_SSL` environment variable to `true`.
Expand Down
1 change: 1 addition & 0 deletions excalidraw/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ WORKDIR /usr/local/kroki/
RUN mkdir -p /usr/local/kroki/node && chown kroki:kroki -R /usr/local/kroki

ENV KROKI_EXCALIDRAW_PAGE_URL=file:///usr/local/kroki/assets/index.html
ENV KROKI_EXCALIDRAW_ASSET_PATH=
ENV PUPPETEER_EXECUTABLE_PATH=/usr/lib/chromium/chrome
#ENV DEBUG="puppeteer:*"
ENV LEVEL="info"
Expand Down
1 change: 0 additions & 1 deletion excalidraw/assets/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
<body>
<script src="./excalidraw/react.production.min.js" charset="utf-8"></script>
<script src="./excalidraw/react-dom.production.min.js" charset="utf-8"></script>
<script src="./excalidraw/excalidraw.production.min.js" charset="utf-8"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions excalidraw/src/worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default class Worker {
constructor (browserInstance) {
this.browserWSEndpoint = browserInstance.wsEndpoint()
this.pageUrl = process.env.KROKI_EXCALIDRAW_PAGE_URL || `file://${path.join(__dirname, '..', 'assets', 'index.html')}`
this.assetPath = process.env.KROKI_EXCALIDRAW_ASSET_PATH || ''
}

async convert (task) {
Expand All @@ -20,6 +21,12 @@ export default class Worker {
try {
await page.setViewport({ height: 800, width: 600 })
await page.goto(this.pageUrl)
await page.addScriptTag({
path: `${path.join(__dirname, '..', 'assets', 'excalidraw', 'excalidraw.production.min.js')}`
});
ggrossetie marked this conversation as resolved.
Show resolved Hide resolved
await page.addScriptTag({
content: `window.EXCALIDRAW_ASSET_PATH="${this.assetPath}"`
});
// QUESTION: should we reuse the page for performance reason ?
return await page.evaluate(async (definition) => {
const svgElement = await window.ExcalidrawLib.exportToSvg(JSON.parse(definition))
Expand Down