fedora-web / websites

#44 coreos: use Vue render function instead of templating
Closed by rfairley. Opened by rfairley.
fedora-web/ rfairley/websites rfairley-render-function-rebase  into  master

Download 44.patch

Use the render() function rather than Vue templating, and use the
Vue runtime-only build [1]. This is so that the eval() function, which
the CSP blocks, in the Vue full build is not used. Conversion of
previous template logic to using createElement() is done accordingly.

Drop generated runtime JS files that are not needed anymore, which were
added in a9fb7591b4a77a9c4baca6f3e8fbb0405a2f71fd.

Also improve the general structure of the code, by adding a streamDisplay
data member, which holds display information for the downloadable images
in each section. This structure is populated whenever stream data is
refreshed, by loadStreamDisplay(). The render function then reads
from streamDisplay.

Finally, some minor tweaks to spacing and text are made on the page,
however the page renders largely the same as before.

[1] https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Signed-off-by: Robert Fairley rfairley@redhat.com

Verified locally running the Flask development server.

This should be compatible with the CSP:
- no inline style when rendering the download page
- coreos-download.js is included as a separate file (no inline scripts)
- the Vue runtime-only build is used, rather than the full

Rendered HTML and a screenshot of the download page from this PR: https://rfairley.fedorapeople.org/websites-review/coreos-download-pr-44-1.zip

cc @bgilbert

This approach avoids having to commit the output of a build toolchain, but I'm concerned that it could sacrifice maintainability. The former isn't ideal, but the latter could become a real problem over time. I can live with this approach if that's the consensus, but it's not my preference.

Also, @rfairley, the screenshot link isn't producing a ZIP file for me.

This approach avoids having to commit the output of a build toolchain, but I'm concerned that it could sacrifice maintainability. The former isn't ideal, but the latter could become a real problem over time. I can live with this approach if that's the consensus, but it's not my preference.

Agreed, I'm thinking we'll want to think about other approaches, and potentially overhaul this later. The main reason for switching to this is to avoid committing the generated files, or integrating the toolchain into the deploy process.

Some of the added logic here should be reusable, e.g. in loadStreamDisplay, which would be useful if templating were being utilized too. The render function however - we can probably do something better for the longer term.

If we did want to keep using the Vue toolchain, we could maintain the .vue file(s) for the coreos download page, and document how to build the .js files and commit them. We could also integrate it into the deploy workflow. Though, there might be other solutions which avoid needing to integrate a new toolchain in.

An alternative to the render function is: we write out more of the HTML structure in coreos/download/index.html, then use native JS (or jQuery) to reference and write HTML elements (so the #app part is not entirely generated by JS code).

Templating would be better still though. Looking into other frameworks, lit-html would provide a HTML-like syntax to write the template then render the HTML elements. It also looks light enough that it'd avoid a toolchain or template compiler, and would work alongside translations for static text in the coreos/download/index.html page.

Curious to hear thoughts from other website maintainers (would carrying the .vue files and committing toolchain-generated files be acceptable?).

My opinion is to have this in for the short term, and work with it when making small adjustments for now. We'd want to investigate a better approach soon though - before implementing https://pagure.io/fedora-websites/issue/964#comment-576026 (which we'd want for FCOS stable).

Also, @rfairley, the screenshot link isn't producing a ZIP file for me.

Sorry, fixed this link now (https://rfairley.fedorapeople.org/websites-review/coreos-download-pr-44-1.zip).

Closing this - changes here are included in https://pagure.io/fedora-web/websites/pull-request/46, can discuss there.

Pull-Request has been closed by rfairley
Metadata
None
No Tags
Static archive. pagure.io was sunset in 2026; this is a read-only snapshot.
Red Hat Logo

Fedora is sponsored by Red Hat. Learn more about the relationship between Red Hat and Fedora »

© Red Hat, Inc. and others.