elastic/docs

Add new landing page CSS to this repo

colleenmcginnis opened this issue · 2 comments

colleenmcginnis commented

Overview

In elastic/kibana#138051 @gchaps created a new landing page for the Kibana docs. There's some interest in using a similar layout for other docs (for example, elastic/observability-docs#2209).

Most of the styling for the page uses either (1) Bootstrap CSS (see gchaps/kibana#1) or (2) global styles defined in this repo. However, there are a few custom style classes needed to structure the page. Currently those classes are included in the HTML directly inside <style> tags.

We should move these landing page specific styles to this repo to make it easier to maintain consistency especially if we plan to build similar pages for other books. But, I'm hesitant to move those styles to this repo before publishing this landing page because of the issues we saw with caching of front-end assets that caused many users to be served a mix of old and new HTML/CSS/JS when we published #2478 (for example, #2510). I think we should figure out a cache-busting strategy for front-end assets (perhaps #2509) before moving the landing page styles to this repo.

In the short term, @ryankeairns @gchaps and I decided it would be ok to publish elastic/kibana#138051 with the custom styles included in the HTML in the /kibana repo. I think this would help us avoid the caching issues because the styles will be in a new file (rather than changes in an existing repo).

Next steps

  • Publish elastic/kibana#138051 with styles included in the HTML
  • Figure out a cache-busting strategy for front-end assets
  • Add landing page styles to /docs
  • Remove landing page styles from /kibana
  • Other teams build landing pages using global styles as needed

cc @ryankeairns @gchaps @gtback @bmorelli25

gtback commented

Figure out a cache-busting strategy for front-end assets

At a minimum, we can just update URLs like styles.css to instead be something like styles-v2.css. I haven't dug in to how this all works in a long time, but we use Parcel and PostCSS for building our front-end assets.

  • 👍1