treekomponents

Stencil Component Starter

Usage no npm install needed!

<script type="module">
  import treekomponents from 'https://cdn.skypack.dev/treekomponents';
</script>

README

Built With Stencil

Treekomponents

Collection of standalone Web Components that support a mixed syntax of Markdown, TeX and web elements. Engines used are Showdown and KaTeX. Web components are built with StencilJS.

Global component : Document printer

Interactive components :

Display components :

Media components :

Embed components :

Installation

With npm

npm install treekomponents --save

Or with a script tag

Place this script tag

<script src="https://unpkg.com/treekomponents@latest/dist/mycomponent.js"></script>

in the head of your index.html.

Import Katex styles

You need then to import KaTeX math font styles in your index.html to have a TeX-like display of maths formulas.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css"
  integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y"
  crossorigin="anonymous"
/>

Global component : the printer trko-doc-printer

It should encapsulate the rest of your treekomponents. It will handle the job to parse what is Markdown and what is HTML. Components that require a slot param will i-only work properly inside that trko-doc-printer tag.

<trko-doc-printer mdHtmlContent="<your input text>"></trko-doc-printer>
Rendered
<section class="trko-doc-section">...doc serialized</section>

Components

Youtube video : trko-youtube-video

Youtube iframe is lazy-loaded.

<trko-youtube-video
  video-id="<video ID>"
  description="<description>"
></trko-youtube-video>
Parameters :
  • video-id : ID of the youtube video to display.
  • description : description of the video, to be displayed in the figcaption.
Rendered :
<figure class="trko-youtube-video-container">
  <div class="trko-youtube-video-iframe-container">
    <iframe src="https://youtube..../id=<video-id>">
  </div>
  <figcaption>...description</figcaption>
</figure>

Hide-show : trko-hide-show

<trko-hide-show heading="<heading>" close="true || false">
  <!-- any md/katex/HTML -->
</trko-hide-show>
Parameters :
  • heading : title of the block, that is displayed when the block is hidden.
  • inner (slot) : content inside the block, displayed when open.
  • close : the initial state of the block, hidden or displayed at first.
Rendered :
<div class="trko-hide-show-container">
  <div class="trko-hide-show-head">
    <h5>...title</h5>
    <button>{open ? 'Masquer' : 'Afficher'}</button>
  </div>
  <div class="closed/opened trko-hidden-section">...content rendered</div>
</div>

Content-box : trko-box

<trko-box class="<your classes>" heading="<your title>"></trko-box>
Parameters
  • class : additionnal classes you may want to add to this particular block.
  • heading (optional) : title of the box.
Rendered
<div
  class="trko-box-container <your classes>"
  id="bx-<your heading in kebabCase>"
>
  { if heading : <h5>...title</h5> else ''}
  <div class="trko-box-content"><!-- your inner rendered --></div>
</div>

Single image : trko-image

<trko-image
  url="https://..."
  title="<titre>"
  description="<description>"
></trko-image>
Parameters
  • url : url of the image to display.
  • title : title of the image, for accessibility.
  • description : description of the image, will be rendered in the figcaption tag.
Rendered
<figure>
  <img src="<url param>" alt="<description>" title="<title>" />
  <figcaption>...title</figcaption>
</figure>

Annotation : trko-annotation

<trko-annotation annotated="<annotated text>">
  <!-- md/katex/html content in the annotation -->
</trko-annotation>
Parameters :
  • annotated : the text that you want to put annotation on.
  • annotation (in slot) : the md-katex-html raw of what the annotation modal should display.
Events :
  • annotationClick : triggered when the annotation is clicked. Emits an event like :
{
    annotated: '<text annotated>',
    annotation: '<text to display in the annotation modal>'
}
Rendered :
<span class="trko-annotated-text">...annotated text serialized</span>

Blockquote : trko-blockquote

In addition to Markdown auto-rendering blockquote, there is a blockquote that allows you to set the alignment of the text, separate author name styles, and add a link to the source.

<trko-blockquote
  author="<author>"
  link="<source link>"
  alignment="left | center | right"
  class="<your add. classes>"
>
  <!-- md/katex/html content of the blockquote -->
</trko-blockquote>
Parameters :
  • author : the text that you want to put annotation on.
  • link : url of a source of the quote or any link you want to provide in addition.
  • class : additional classes to the container.
  • alignment : alignment of the inner text, possible values are left, center or right.
  • quote (in slot) : the md-katex-html raw of what the blockquote should contain.
Rendered :
<div
  class="trko-blockquote-container <your add. classes>"
  style="text-align: <your alignment>"
>
  <blockquote class="trko-blockquote">...quote content</blockquote>
  <div class="trko-blockquote-author">...author</div>
</div>