Conteúdo Rico

Vários componentes personalizados estão incluídos para ampliar o CommonMark. video, image, gif e audio foram criados para ajudar você a aproveitar elementos HTML modernos em seu conteúdo.

Vídeo

• sources é um array de caminhos de arquivos de vídeo. (obrigatório)
• class define uma classe para o vídeo.
• caption define o texto da legenda abaixo do vídeo.
• w define a largura do vídeo.
• h define a altura do vídeo.
• autoplay quando definido, reproduz o vídeo automaticamente ao carregar.
• loop quando definido, reproduz o vídeo em loop.
• muted quando definido, inicia o áudio silenciado.
• playsinline, quando definido, reproduz o vídeo incorporado em vez de tela cheia em navegadores móveis.

sources pode usar o mesmo caminho, um caminho relativo ou um caminho raiz, como o componente img

Classes opcionais:

• ci pode ser usado para centralizar a imagem.
• fr pode ser usado para alinhar a imagem à direita.
• fl pode ser usado para alinhar a imagem à esquerda.
• b1 pode ser usado para adicionar uma borda de 1px.

Uso

{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}

Saída

<video controls preload="auto">
  
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />Your browser doesn't support the video tag and/or the video formats in use here – sorry!</video>

Uso

{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="It's Over 9000!!"  page={page} config={config} />}}

Saída

<figure class="fi ci b1">
<video controls preload="auto" class="ci b1" muted>
  
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />Your browser doesn't support the video tag and/or the video formats in use here – sorry!</video><figcaption>It's Over 9000!!</figcaption></figure>

Imagem

O componente image retorna uma tag <picture> com várias fontes.

Cada string no array sources deve ser o caminho para um arquivo de imagem de um tipo diferente (avif, webp, png, jpg etc.). A última imagem no array sources é usada para criar uma tag <img> como alternativa caso o navegador ainda não ofereça suporte aos outros formatos.

• sources é um array de caminhos de arquivos de imagem. (obrigatório)
• class define uma classe para a imagem.
• caption define o texto da legenda abaixo da imagem.
• w define a largura da imagem.
• h define a altura da imagem.

sources pode usar o mesmo caminho, um caminho relativo ou um caminho raiz, como o componente img

Classes opcionais:

• ci pode ser usado para centralizar a imagem.
• fr pode ser usado para alinhar a imagem à direita.
• fl pode ser usado para alinhar a imagem à esquerda.
• b1 pode ser usado para adicionar uma borda de 1px.

Uso

{{<image sources={["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"]} w={640} h={480} alt="ITS OVER 9000!"  page={page} config={config} />}}

Saída

<picture>
  <source srcset="over9000-960.avif" type="image/avif" />
  <source srcset="over9000-640.avif" type="image/avif" />
  <source srcset="over9000-400.avif" type="image/avif" />
  <img src="over9000-640.webp" alt="ITS OVER 9000!" width="640" height="480" loading="lazy" />
</picture>

GIF

O componente gif é exatamente igual ao componente de vídeo. A única diferença é que ele recebe automaticamente as propriedades adicionais autoplay, loop, muted e playsinline.

Usar a tag <video> no lugar de GIFs permite reduzir o tamanho dos arquivos, o que é especialmente importante em regiões onde a internet é mais lenta ou menos confiável.

Uso

{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}

Saída

<video controls autoplay loop muted playsinline>
  
  <source src="over9000_av1.mp4" type="video/mp4" />
  <source src="over9000_vp9.webm" type="video/webm" />Your browser doesn't support the video tag and/or the video formats in use here – sorry!</video>

Áudio

O componente audio recebe um array sources de strings e retorna uma tag <audio>. Cada string no array sources deve ser o caminho para um arquivo de áudio de um tipo diferente (ogg, mp3, flac, wav etc.). O navegador reproduzirá o primeiro tipo compatível; portanto, ordená-los do menor para o maior usará menos largura de banda, se esse for o objetivo.

• sources é um array de caminhos de arquivos. (obrigatório)
• class define uma classe para o áudio.
• caption define o texto da legenda abaixo do áudio.
• autoplay, quando definido, reproduz o áudio automaticamente ao carregar.
• loop, quando definido, reproduz o áudio em loop.
• muted quando definido, inicia o áudio silenciado.

sources pode usar o mesmo caminho, um caminho relativo ou um caminho raiz, como o componente img

Classes opcionais:

• ci pode ser usado para centralizar a imagem.
• fr pode ser usado para alinhar a imagem à direita.
• fl pode ser usado para alinhar a imagem à esquerda.
• b1 pode ser usado para adicionar uma borda de 1px.

Uso

{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]}  page={page} config={config} />}}

Saída

<audio controls>
  
  <source src="over9000.ogg" type="audio/ogg" />
  <source src="over9000.mp3" type="audio/mpeg" />
  <source src="over9000.flac" type="audio/flac" />
  <source src="over9000.wav" type="audio/wav" />Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!</audio>

Uso

{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="It's Over 9000!!"  page={page} config={config} />}}

Saída

<figure class="fi ci b1">
<audio controls class="ci b1">
  
  <source src="over9000.ogg" type="audio/ogg" />
  <source src="over9000.mp3" type="audio/mpeg" />
  <source src="over9000.flac" type="audio/flac" />
  <source src="over9000.wav" type="audio/wav" />Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!</audio><figcaption>It's Over 9000!!</figcaption></figure>