0.36.2 • Published 11 months ago

@atjson/renderer-html v0.36.2

Weekly downloads
330
License
Apache-2.0
Repository
-
Last release
11 months ago

🧭 @atjson/renderer-html

Take an annotated document and render it into HTML. By default, this will take an offset document and render it to HTML.

🎈 Extending

The HTML renderer has a $ method that's designed to make it easy to extend and write your own output to HTML.

To extend the current HTML renderer to support YouTube embeds (the kind that show up when you use the share menu), we'd use the following code:

import { YouTubeEmbed } from '@atjson/offset-annotations';
import HTMLRenderer from '@atjson/renderer-html';

export default MyHTMLRenderer extends HTMLRenderer {
  *YoutubeEmbed(embed: YouTubeEmbed) {
    return yield* this.$('iframe', {
      attributes: {
        width: embed.attributes.width,
        height: embed.attributes.height,
        src: embed.attributes.url,
        frameborder: '0',
        allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
        allowfullscreen: true
      }
    });
  }
}

Now when we put in a video, like https://www.youtube.com/watch?v=RrkL9e2w7gQ, we'll get the following:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/RrkL9e2w7gQ"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
0.36.2

11 months ago

0.36.1

12 months ago

0.36.0

12 months ago

0.33.0

1 year ago

0.34.0

1 year ago

0.35.2

12 months ago

0.35.1

1 year ago

0.35.0

1 year ago

0.32.2

1 year ago

0.32.1

1 year ago

0.32.0

1 year ago

0.31.0

1 year ago

0.30.0

2 years ago

0.29.6

2 years ago

0.29.5

2 years ago

0.29.4

2 years ago

0.29.3

2 years ago

0.29.3-react.63

2 years ago

0.29.2

3 years ago

0.29.0

3 years ago

0.29.1

3 years ago

0.28.17

3 years ago

0.28.15

3 years ago

0.28.14

3 years ago

0.28.13

3 years ago

0.28.12

3 years ago

0.28.11

3 years ago

0.28.10

3 years ago

0.28.9

3 years ago

0.28.8

3 years ago

0.28.7

3 years ago

0.28.6

3 years ago

0.28.5

3 years ago

0.27.12-dev.2

3 years ago

0.28.1

3 years ago

0.28.0

3 years ago

0.28.4

3 years ago

0.28.3

3 years ago

0.28.2

3 years ago

0.27.9-dev.8

4 years ago

0.27.11

3 years ago

0.27.10

4 years ago

0.27.9-dev.5

4 years ago

0.27.9-dev.6

4 years ago

0.27.9-dev.7

4 years ago

0.27.9

4 years ago

0.27.8

4 years ago

0.27.7

4 years ago

0.27.6

4 years ago

0.27.5

4 years ago

0.27.4

4 years ago

0.27.3

4 years ago

0.27.2

4 years ago

0.27.1

4 years ago

0.27.0

4 years ago

0.26.0

5 years ago

0.25.3

5 years ago

0.25.3-dev.1

5 years ago

0.25.3-dev.0

5 years ago

0.25.2

5 years ago

0.25.1

5 years ago

0.25.0

5 years ago

0.24.15

5 years ago

0.24.14

5 years ago

0.24.13

5 years ago

0.24.12

5 years ago

0.24.11

5 years ago

0.24.10

5 years ago

0.24.9

5 years ago

0.24.8

5 years ago

0.24.7

5 years ago

0.24.7-dev.0

5 years ago

0.24.6

5 years ago

0.24.5

5 years ago

0.24.4

5 years ago

0.24.4-dev.0

5 years ago

0.24.3

5 years ago

0.24.2

5 years ago

0.24.1

5 years ago

0.24.0

5 years ago

0.23.6

5 years ago

0.23.5

5 years ago

0.23.4

5 years ago

0.23.3

6 years ago

0.23.2

6 years ago

0.23.1

6 years ago

0.23.0

6 years ago

0.22.6-dev.0

6 years ago

0.22.5

6 years ago

0.22.4

6 years ago

0.22.3

6 years ago

0.22.2

6 years ago

0.22.1

6 years ago

0.22.1-dev276.0

6 years ago

0.22.0

6 years ago

0.22.0-dev273.0

6 years ago

0.21.5

6 years ago

0.21.4

6 years ago

0.21.3

6 years ago

0.21.2

6 years ago

0.21.1

6 years ago

0.21.0

6 years ago

0.19.1

6 years ago

0.19.0

6 years ago

0.18.0

6 years ago