Skip to content

Commit

Permalink
Write development instructions within readme
Browse files Browse the repository at this point in the history
  • Loading branch information
JoelCDL committed Dec 18, 2024
1 parent e29c1d7 commit 3579e51
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 2 deletions.
44 changes: 43 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,46 @@
# Klaro UI

The Klaro consent manager custom UI for the California Digital Library.

Developer instructions coming soon.
View sample at https://cdlib.github.io/klaro-ui

## Requirements

- Git
- Node version 20 or above
- NPM version 10 or above
- Klaro source and a valid config file

## Installation

1. Follow the steps in [Getting Started](https://klaro.org/docs/getting-started) within the Klaro documentation.

2. Within the `src` URL of the Klaro script (after the config script), replace the URL ending in **klaro.js** with the "no CSS" version:

```
https://cdn.kiprotect.com/klaro/v0.7/klaro-no-css.js
```

3. From your CLI, install Klaro UI into your application as a dependency:

```
npm install https://github.com/cdlib/klaro-ui --save
```

The module **klaro-ui** is now installed in your application's **node_modules** folder.

4. From your bundler/build tool, source the `klaro-ui` stylesheet from the klaro-ui module:

```
/node_modules/klaro-ui/dist/klaro-ui.css
```

## Appearance

Klaro UI doesn't include any typefaces. The Klaro text will include the font defined for the document.

The Klaro UI default stylesheet renders a light colored theme when a user's system appearance is set to light colors and a dark colored theme when set to dark colors.

For only the light colored theme, use **klaro-ui-light.css** within **klaro-ui/dist**.

For only the dark colored theme, use **klaro-ui-dark.css** within **klaro-ui/dist**.
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<h1>Klaro UI for the California Digital Library</h1>
<main>
<p>This page demonstrates the Klaro consent manager using the custom CDL design, text and functionality.</p>
<p>Developer instructions for applying this custom UI to instances of Klaro on CDL websites will be published soon to <a href="https://github.com/cdlib/klaro-ui" target="_blank">cdlib Klaro-UI GitHub repository</a>.</p>
<p>To use this custom UI for instances of Klaro on CDL websites, see the <a href="https://github.com/cdlib/klaro-ui" target="_blank">cdlib Klaro-UI GitHub readme</a>.</p>
<p>Below is filler content to force some vertical page scrolling and test that Klaro is always rendering as a fixed component in the lower-right of the browser.</p>
</main>
<aside>
Expand Down

0 comments on commit 3579e51

Please sign in to comment.