Getting the files
A host needs at most four static files, all built from the same commit:
| File | What it is |
|---|---|
home-ui.js | Every element, one self-contained ES module with lit inlined. |
home-ui.css | Tokens, the class sheet and the icon masks, flattened into one sheet. It starts with a Google Fonts @import for the theme’s three faces. |
home-ui-charts.js | The five chart elements. Load it only on a page that draws a chart. |
hui-icons.svg | The Remix Icon sprite your own markup references with <use> - see Go templates. |
LICENSE-REMIXICON.txt comes with them, covering the bundled icons.
Every push to main builds a new version, MAJOR.MINOR.<run>: the major and minor come from the
package and the patch is the CI run number, so each version is higher than the last. The files are
published in two places.
From this site
Section titled “From this site”This site serves the files of the version it was deployed with:
https://home-ui.harriverse.com/dist/v0.1.50/home-ui.jshttps://home-ui.harriverse.com/dist/v0.1.50/home-ui.csshttps://home-ui.harriverse.com/dist/v0.1.50/home-ui-charts.jshttps://home-ui.harriverse.com/dist/v0.1.50/hui-icons.svg/dist/latest/<file> redirects to the current version, so it always gives the newest build.
/version.json names that version, along
with the run and the commit that built it.
- A versioned file never changes, so it is served with a one-year
immutablecache. Thelatestredirect is not cached at all. - Every file in
/dist/sendsAccess-Control-Allow-Origin: *, the redirect included, so a page on another origin can load it with<link>and<script type="module">directly. - The sprite is the exception. Browsers do not follow an SVG
<use href>to another origin, so servehui-icons.svgfrom your own host even while you try the other files from here. - Only the current version is on the site. Each deploy replaces the whole site, so
/dist/v0.1.50/stops existing once the next version deploys. To pin a version, download it (below) and serve it yourself.
To try Home-UI without downloading anything, use latest:
<html lang="en" class="light"> <head> <link rel="stylesheet" href="https://home-ui.harriverse.com/dist/latest/home-ui.css" /> <script type="module" src="https://home-ui.harriverse.com/dist/latest/home-ui.js"></script> </head> <body class="hui-surface"> <hui-button>It works</hui-button> </body></html>Do not ship an application that loads from latest. A deploy can change the markup a control
expects, and your pages would pick it up with no warning. The snippets across these docs use
latest so they work as pasted; for anything you ship, download the files or pin a version.
From a GitHub Release
Section titled “From a GitHub Release”Each version is also a GitHub Release tagged v0.1.50 in the Home-UI repository, with the same
files attached. Releases are never deleted or replaced, so this is where you get an older version
or pin one. The repository is private at the moment, so you can reach the releases only if you
have access to it.
With the GitHub CLI:
gh release download v0.1.50 --repo haribo256/home-ui-components --dir static/Serving them from your host
Section titled “Serving them from your host”Put the files beside each other under one static path, for example /static/, and load them as
shown in the introduction. Your <use href> references then point at
/static/hui-icons.svg. The file names are the same in every version, so either serve them with
revalidation or put the version in the path - /static/v0.1.50/home-ui.js - and cache that for
a long time. A Go host can embed the folder with embed.FS.
When you move to a new version, replace all the files together. The JavaScript and the stylesheet are built for each other, and mixing versions can leave a control unstyled.