HTMX wrapper for the reports #81
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This higher level wrapper can be used to generate all the reports with one function. The benefit of this is that the CLI no longer needs to know what lower level functions are required to generate the whole set of reports. Making it easier to ensure that the admin command report generation doesn't diverge from the in flow report generation. Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
Reduce the block report to an HTML fragment that is loaded with the wrapper using AJAX requests. Update the summary report links to use a bootstrap button class (which is nicer than the blue URLs anyway?), and use HTMX to replace the `#report-content` div with the block report. The `hx-push-url="true"` is important to make sure the back button on the browser works as expected. Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
Collaborator
Author
|
Minimal visual difference: The only known visual difference is the URL links being replaced with bootstrap buttons. Providing a nicer presentation by default and still giving feedback on mouse over. |
Script to download the js and css dependencies that the HTML reports depend on. This means that the reports can be viewed offline and removes unnecessary dependency on CDN. Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
machshev
force-pushed
the
htmx_wrapper
branch
from
975de33 to
585f284
Compare
Add a static file renderer to go alongside the jinja2 renderer for the static dependencies that do no need templating. This essentially creates a copy of the files in the output directory. Now we have the css/js dependencies locally generated we can update the report template to use them. Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
Signed-off-by: James McCorrie <james.mccorrie@lowrisc.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We want to be able to generate reports that contain the same data but switch the CSS theme depending on the website they are embedded within.
Approach
HTMX is a nice way of doing this without having to write an maintain JS. It allows declarative HTML to make requests to a server replace the contents of an element with the returned content.
Typically to implement something like this, we would have some JS make a request to a backend server which returns some data and then serialise the data and render it client side. With the HTMX approach, events can be defined to trigger a request to a server which returns pre-rendered HTML which is substituted in place. This is an interesting approach as it keeps the state server side, avoiding issues related to synchronising state. In practice this approach can be faster as well, given that server side the operations required to calculate the data are often more resource hungry than the rendering... an there isn't necessarily that much difference between the effort to render HTML fragments verses JSON.
In our case there will be no back-end rendering as we are just presenting static HTML. So the main use of HTMX is it's ability to fetch HTML fragments and insert it into the DOM.
Implementation
The intention is to create an HTMX wrapper page that is the actual
index.htmland then use it to embed the content of the individual report pages. The CSS can go in the wrapper, which means other wrappers can embed the same report with a different CSS script.