0.10.0 • Published 12 months ago

vellum-doc v0.10.0

Weekly downloads
-
License
BSD-3-Clause
Repository
-
Last release
12 months ago

\ Test

A custom element to turn plain HTML into rich documents. Inspired by Docsify.

Demo | Developer Guide | Roadmap | Known Issues

Features include:

  • Document index pane
  • Stow index pane on mobile devices
  • Automatically generate anchor links (optional)

Usage

Include the <script> in your markup:

<script
  type="module"
  src="https://www.unpkg.com/vellum-doc@0.9.0/vellum-doc.js"></script>

Or, if you host the script as part of your project (recommended):

<script type="module">
  import 'vellum-doc/vellum-doc.js'
</script>

Example:

<vellum-doc>
  <h1>Commodi</h1>
  <p>
    Lorem ipsum dolor sit amet. Id omnis amet sit autem voluptas et dicta
    consequatur ut amet rerum ad consequatur nemo ea necessitatibus enim. Aut
    velit accusantium qui molestiae beatae ad sunt odit sit recusandae sapiente
    id tempora mollitia nam praesentium laborum rem molestiae placeat.
  </p>
  <h2>Et nobis reprehenderit quo minus iste sit dolore ipsam!</h2>
  <p>
    Ut quam odio et quae unde ut sunt quas qui unde cupiditate? 33 sequi
    molestiae quo autem vitae ut itaque nisi aut quod esse qui quibusdam labore
    ut voluptatibus sequi sit sapiente galisum. Nam facilis aspernatur et eius
    perspiciatis eum eveniet omnis aut repudiandae rerum ut sunt assumenda?
  </p>
</vellum-doc>

Works best with smooth scrolling enabled:

html {
  scroll-behavior: smooth;
}

Anchors

Anchor links can be dynamically added to document headers using the anchors attribute:

<vellum-doc anchors>
  <h1>Commodi</h1>
</vellum-doc>

Styling

<vellum-doc> exposes CSS custom properties and shadow parts that can be used to style the document index.

Supports the following CSS variables:

VariableDescriptionDefault
--index-widthWidth of the index sidebar.300px

Supports the following shadow parts:

PartDescription
indexThe index pane container. Can be used to set padding, style the index divider (border-right), etc.
index-h1h1 items in the index.
index-h2As above, but for h1 items.
index-h3As above, but for h3 items.
index-h4As above, but for h4 items.

For example:

vellum-doc {
  --index-width: 250px;
}

vellum-doc::part(index) {
  border-right: dashed red;
  padding-left: 10px;
  padding-right: 10px;
}

vellum-doc::part(index-h1) {
  color: red;
}
0.10.0

12 months ago

0.9.0

12 months ago

0.8.0

1 year ago

0.9.1

12 months ago

0.5.0

1 year ago

0.7.0

1 year ago

0.6.0

1 year ago

0.5.1

1 year ago

0.4.2

1 year ago

0.4.1

1 year ago

0.4.0

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.2.2

1 year ago

0.1.0

1 year ago

0.1.1

1 year ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

3 years ago