Preprocessing: ensure dir-index and dir-index-uncat are in sync

Question

Preprocessing: ensure dir-index and dir-index-uncat are in sync

rht opened this issue 9 years ago · comments

Preprocessing: Automate the css bundling and injection into dir-index-uncat.html with gulp-inject / gulp-usemin / gulp-useref

Jessica Schilling · Answer 1 · Fri May 22 2020 04:43:24 GMT+0800 (China Standard Time)

I believe this one's no longer relevant with more recent changes to this repo.

Steven Allen · Answer 2 · Fri May 22 2020 04:54:43 GMT+0800 (China Standard Time)

Is this automated now?

Jessica Schilling · Answer 3 · Fri May 22 2020 05:07:45 GMT+0800 (China Standard Time)

My mistake, reopening -- that said, what's the reason maintaining two separate .css files and linking to them from dir-index-uncat.html instead of in <style> directly in the html? (Total css file size did go down considerably in recent revisions.)

Steven Allen · Answer 4 · Fri May 22 2020 05:35:57 GMT+0800 (China Standard Time)

I think so we can minimize them in the HTML file? We could also, maybe, just embed the CSS then minimize the HTML files themselves on build.

Steven Allen · Answer 5 · Fri May 22 2020 05:36:24 GMT+0800 (China Standard Time)

It was probably mostly that the bootstrap code was too much.

Jessica Schilling · Answer 6 · Fri May 22 2020 05:39:48 GMT+0800 (China Standard Time)

There was a lot of Bootstrap code in there before. I'd vote to just embed the minified CSS for those two files in <style>. The remaining HTML is something like 50 lines.

Steven Allen · Answer 7 · Fri May 22 2020 07:56:07 GMT+0800 (China Standard Time)

Well, editing minified CSS is painful. If we could leave it unminified and then minify the HTML along with the CSS, that would work.

Jessica Schilling · Answer 8 · Sat May 23 2020 02:00:42 GMT+0800 (China Standard Time)

I'm not sure how to do that in a Go context, but sounds good ...

Marcin Rataj · Answer 9 · Fri Jul 24 2020 18:04:56 GMT+0800 (China Standard Time)

I think the key here is to remove the need for manual updating of two files

Namely, remove the need for this step from https://github.com/ipfs/dir-index-html#updating:

Make changes to both dir-index.html and dir-index-uncat.html.

Instead, there should be npm run build script and clear distinction between

src/ (sources edited in PRs) and
dist/ (final artifacts used by go-ipfs)

Peter Rabbitson · Answer 10 · Fri Jul 24 2020 18:13:09 GMT+0800 (China Standard Time)

@lidel the core question is "why DO we carry 2 files".
Here is their difference colordiff -uw dir-index.html dir-index-uncat.html | less -SR:

Both the inline style and the linked to styles are the same minified .css. It seems... pointless.

Marcin Rataj · Answer 11 · Fri Jul 24 2020 18:46:42 GMT+0800 (China Standard Time)

I guess (based on partial feedback and git history) in 2015 there were two versions (human-readable source of truth and minified+inlined version for production), but over time only the minified version was updated with changes, making entire setup broken/obsolete.

Cleaning things up and introducing build script that creates dist/dir-index.html with inlined and minified CSS from human-readable src/dir-index.html is how I would fix this. That way only src/dir-index.html needs to be changed.

Jessica Schilling · Answer 12 · Sat Jul 25 2020 01:56:20 GMT+0800 (China Standard Time)

I can probably do this. Will have a play around 😊

Jessica Schilling · Answer 13 · Sat Jul 25 2020 07:38:14 GMT+0800 (China Standard Time)

#40 addresses this, but please note it'll also require updating go-ipfs itself to look for the new file names. (@ribasushi and/or @lidel, is this something you're willing to address in a separate PR?)