# @mythosthesia/reveal-course-elements

> Common elements and element related utilities to build reveal.js slides in the style of Mythosthesia.

Latest version **0.1.2** (published 2023-09-28) · 0 weekly downloads

## Install

```sh
npm install @mythosthesia/reveal-course-elements
pnpm add @mythosthesia/reveal-course-elements
yarn add @mythosthesia/reveal-course-elements
bun add @mythosthesia/reveal-course-elements
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-09-28 |
| First published | 2023-09-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 37.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | guillem.cordoba@gmail.com |
| Maintainers | guillem.cordoba |

## Links

- npm: https://www.npmjs.com/package/@mythosthesia/reveal-course-elements
- Repository: https://github.com/mythosthesia/reveal-course-elements
- Homepage: https://github.com/mythosthesia/reveal-course-elements#readme
- Issues: https://github.com/mythosthesia/reveal-course-elements/issues
- npm.io page: https://npm.io/package/@mythosthesia/reveal-course-elements

## Dependencies (3)

- [lit](https://npm.io/package/lit.md) ^2.6.1
- [reveal.js](https://npm.io/package/reveal.js.md) =4.3.1
- [@lit-labs/motion](https://npm.io/package/@lit-labs/motion.md) ^1.0.4

## Recent versions

- 0.1.2 (latest) — 2023-09-28
- 0.1.1 — 2023-09-06
- 0.1.0 — 2023-09-02

## README

# @mythosthesia/reveal-course-elements

Common elements and element related utilities to build reveal.js slides in the style of Mythosthesia.

## Elements

### SimplePopover

Import it like this:

```js
import "@mythosthesia/reveal-course-elements/dist/elements/simple-popover.js";
```

And then you can use it like this in your html:

```html
<simple-popover><span>Add your popover content here</span></simple-popover>
```

### DirectoryTree

Import it like this:

```js
import "@mythosthesia/reveal-course-elements/dist/elements/directory-tree.js";
```

And then you can use it like this in your html:

```html
<directory-tree></directory-tree>
<script>
  const directoryTreeElement = document.querySelector('directory-tree');

  // Sets the tree to show 
  directoryTreeElement.tree = {
    type: 'directory',
    contents: {
      src: {
        type: 'directory',
        contents: {
          'main.rs': {
            type: 'file',
            content: `fn main() {}`
          }
        }
      },
      'Cargo.toml': {
        type: 'file',
        content: `[package]`
      }
    }
  };

  // Adds a highlight border to the given paths
  directoryTreeElement.highlightedPaths = ['/src/main.rs'];
</script>
```

---
_Source: https://npm.io/package/@mythosthesia/reveal-course-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._