Boostnote: HTML export with truly standalone HTML

[tatoosh]

The HTML export is nice but not the best:

• images are not included - why not using inline image?

<p data-line="6"><img src=":storage%5C0.04i5dwoqj2x6.png" alt="0.04i5dwoqj2x6" /></p>

• CSS is referenced to css folder

  <link rel="stylesheet" href="css/ambiance-mobile.css"><link rel="stylesheet" href="css/katex.min.css"><link rel="stylesheet" href="css/codemirror.css">

• fonts are referenced to local filesystem

  font-family: 'Lato';
  src: url('file://C:\Users\ta\AppData\Local\boost\app-0.11.3\resources\app/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
       url('file://C:\Users\ta\AppData\Local\boost\app-0.11.3\resources\app/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
       url('file://C:\Users\ta\AppData\Local\boost\app-0.11.3\resources\app/resources/fonts/Lato-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;

[nlopin]

Boostnote exports css folder together with html file, so the path is correct. The font issue is well known, there is no good solution of it.

[tatoosh]

External CSS are also not a good solution, why not including it in the header?
The image ptioblem also exists.

[Rokt33r]

External CSS are also not a good solution

I agree with it.

[nlopin]

Could you explain, why do you think it's bad?

I think it's a reasonable solution. There are a lot of styles in those CSS and you probably don't want to have 40KB of styles in your HTML file.

[Rokt33r]

Ah, sorry, I misunderstand it.

External CSS is totally fine.

[Rokt33r]

@tatoosh I think external assets are completely fine. Why do you think that we should make huge html?

[tatoosh]

@Rokt33r
Thanks for the discussion.
I am using makrdown for large documentation and an Export in a single HTML file could be transered to other people. Also a single file can be stored in a document management system.
Pandoc exports for example supports that single file html5 Export.

[Rokt33r]

I see, but we cannot include fonts. Anyway, I agree with it if it is optional.

[tatoosh]

Of course fonts are optional. CSS and images should be included.

[tatoosh]

Or u can support Export to script / Export to pandoc?

[Rokt33r]

I mean exporting a single html file(with inline script and inline style).

[nlopin]

@Rokt33r What is the core team vision of the product? You have stats and probably it's possible to understand how often people use HTML export.

If you want to support one-file HTML export we should:

• inline CSS styles
• has a cloud image storage to include them into the HTML file

I've check the Notion app and their export process (they export to Markdown only), they load all images into cloud and include links to them.

[nlopin]

Can you attach Markdown with local image and HTML made from it via pandoc?

[tatoosh]

No, please we not need cloud storage or make that optional! The notes should be stored only on our systems.
Again, please take a look at pandoc, including images and CSS is not a Problem there. I will upload u a sample if that helps?

[tatoosh]

@nlopin i will generate it tomorrow and give u the result here.

[tatoosh]

@nlopin
Here is my demo single HTML5 page for u - including custom.css and images.

I created it with pandoc (over visual studio code extension, could also be a script call).
Images are base64 coded so u will get a working single file export!

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABD0AAAJdCAIAAAC
...

test.zip

My pandoc parameters:

-f gfm+hard_line_breaks -t html5 -c D:\pandoc\mycustom.css --self-contained -t html5 -A D:\pandoc\footer.html"

[Rokt33r]

I agree that we don't need cloud stuff as long as we just want to include images.

[nlopin]

dataUri sounds like reasonable solution. I'll do some research to understand is there any restrictions and how does it work with big images.

[vandijkstef]

How about some export options? Give the choice to include all CSS in the HTML or make everything external. (Now it's 50/50!). Fonts are definitly optional, and it makes no sense to reference the app on my own computer, suggesting to use the system default fonts as fallback.

Now, I got here mainly because I would love to have the HTML export, export into a new folder, so the external assets are neatly contained. Having them all external, allows for easier porting to, for example, a website.
Posting under this issue because I think it adds to the discussion, let me know if you'd like a seperate issue.

[tatoosh]

Good way, both options would helped me a lot!

[ndbeals]

A possible solution to font embedding (or lackthereof) in HTML files would be to also support exporting to MHTML files.