Assets in files

[rallisf1]

I am writing a node script to extract styles and images from the generated html and replace them with actual file refs. I'd rather have this option in primo tbh, but I'm in a bit of a hurry to publish this and will make manual edits (outside of primo) later on so it actually makes it easier for me to keep everything separate.

Will share a gist here when I'm done.

[rallisf1]

Here is the gist: https://gist.github.com/rallisf1/cd959bc8f267628ac3a7f83ffd0aeca6

Create these 2 files in your published website root (aka where index.html is) and run npm install and then node ., if you have minify-css installed you can run node . minify to create minified css and html files. Your new html file will be index2.html, edit the script per your liking.

[mateomorris]

Interesting - could you share your motivation for wanting to keep the styles separate? I've debated the benefits of linking vs embedding and decided the tradeoff of embedding was more preferable (slightly higher load time but w/ styles included so no flash of unstyled content).

Publishing the images as files instead of embedding should be possible in the future, but we'll probably want to improve the upload functionality first so that only files which have been changed get uploaded (as opposed to uploading the whole site bundle & images each time).

[rallisf1]

Also, note that I haven't used primo for a multi-page site yet. In that scenario someone might want the pages' css to be merged into 1 file.

[mateomorris]

ideally you want to embed above-the-fold css

That's great, I hadn't considered that. I'd be interested to look into how this could be automated in Primo. I think this is niche enough that it doesn't warrant its own functionality right now, but one feature on the roadmap is to enable transforming the output to give more control over the final build - that way you'd be able to modify the existing build script to have it create a file instead of embedding the styles.

[mateomorris]

P.S. I could always directly contribute code if you can create a simple dev documentation like what loads where...

I haven't started working on docs for contributors yet, but I plan to soon. I could use your input if you have any specific questions you ask when approaching a codebase like this.

[rallisf1]

That's great, I hadn't considered that. I'd be interested to look into how this could be automated in Primo.

I suppose you could use something like @svelte-plugins/viewable to determine which sections are visible when page.top === 0 and mark them as 'above-the-fold' sections, leave those as is and extract the styles from the rest sections into css file(s).

[rallisf1]

I haven't started working on docs for contributors yet, but I plan to soon. I could use your input if you have any specific questions you ask when approaching a codebase like this.

I haven't gone though much of the codebase tbh. It's obvious this is a monorepo and both desktop and server clients import the editor's source. My ideal dev docs would be guides with examples:

• How to add a custom field type
• How to add custom publish target (e.g. ftp)
• How to override the build process (you already have my gist about exporting images and styles, you can use that as example)
• How to add content editor functionality (e.g. a button to choose text colors from --color vars)
  etc... keep in mind if you go through with my plugin-extendable proposal you won't need guides such as above anymore but an API and hooks based plugin development documentation.