https://github.com/metonym/svelte-prose

Typography utilities for Svelte
https://github.com/metonym/svelte-prose

prose table-of-contents toc typography

Last synced: about 1 month ago
JSON representation

Typography utilities for Svelte

• Host: GitHub
• URL: https://github.com/metonym/svelte-prose
• Owner: metonym
• License: mit
• Created: 2020-04-21T14:17:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-04-21T15:22:39.000Z (over 4 years ago)
• Last Synced: 2024-01-04T16:50:08.285Z (11 months ago)
• Topics: prose, table-of-contents, toc, typography
• Language: HTML
• Homepage: https://metonym.github.io/svelte-prose/
• Size: 85 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-prose

[![NPM][npm]][npm-url]

[![Build][build]][build-badge]

> Typography utilities for Svelte.

Inspired by the U.S. Web Design System [Prose component](https://designsystem.digital.gov/components/typography/#prose), `svelte-prose` is a collection of components for long-form typography.

## Install

```bash

yarn add -D svelte-prose

```

## Usage

```html

  import Prose, { T } from "svelte-prose";

  

  

  
Some text content.


```

### Headings

A Heading component (`T.H1`, `T.H2`, `T.H3`, `T.H4`, `T.H5`, `T.H6`) automatically creates an id from the text prop.

```html

```

### Table of Contents

The `Prose` component creates a two-tiered table of contents from headings.

Hide the default ToC to render your own:

```html

  

    


      {#each toc as { id, text, children }}

      


        {text}

        


          {#each children as child}

          


            {child.text}

          

          {/each}

        

      

      {/each}

    

  

  

  

  
Some text content.


```

## API

### `Prose`

| Property name | Value                        |

| :------------ | :--------------------------- |

| hideToc       | `boolean` (default: `false`) |

### `T.H{1-6}`

| Property name | Value                           |

| :------------ | :------------------------------ |

| text          | `string` (default: `undefined`) |

#### Forwarded events

- on:click

- on:mouseover

- on:mouseenter

- on:mouseout

## [Changelog](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-prose.svg?color=blue

[npm-url]: https://npmjs.com/package/svelte-prose

[build]: https://travis-ci.com/metonym/svelte-prose.svg?branch=master

[build-badge]: https://travis-ci.com/metonym/svelte-prose