Template for quote slides

[ooker777]

I manage to create a template for quote slides. This helps users focus on the data and avoid polluting the text with HTML. To use it just use a blockcode with quote and fill these fields.

```quote
quote: Misquotations are the only quotations that are never misquoted.
author:
  name: Hesketh Pearson
  title: British actor, theater director and writer
  org: Company name
  image: https://upload.wikimedia.org/wikipedia/en/d/d0/Hesketh_Pearson.jpg

Do you want me to make a PR from this? I think we can have a snippet or plugin folder.

CSS

figure.quote {
  display: flex;
  gap: .75em;
  margin: 1em;
}

.col1 {
  display: flex;
  flex-direction: column;
  text-align: end
}

.author {
  font-size: .5em
}
.author .name{
  font-weight: bold
}

.author img {
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  top: 0
}

Preprocessor

function htmlTemplateFn({quote, name, title, org, image}){
  const quoteSentences = quote.split('. ')
  const quoteWithFragmentTags = "<span class='fragment'>" + quoteSentences.join(".</span> <span class='fragment'>") + "</span>" 
  return `<figure class="quote">
    <div class="col1">
      <div>❝ ${quoteWithFragmentTags}</div>
    </div>
    <div class="author fragment">
      <img src="${image}">
      <div class='name' >${name}</div>
      <div class='title'>${title}</div>
      <div class='org' >${org}</div>
    </div>
  </figure>`
} 

function getValue(quoteBlock, field) {
  const pattern = `${field}:(.*)`;
  const regex = new RegExp(pattern, 'g') 
  return [...quoteBlock.matchAll(regex)][0][1].trim();
}

function quoteSlideFn(markdown) {
  const regex = /\`\`\`quote(.*?)\`\`\`/gs
  const quoteBlocks = [...markdown.matchAll(regex)] 
  let result = markdown

  for (const quoteBlock of quoteBlocks) {
    const data = {
      quote: getValue(quoteBlock[0], 'quote'),
      name: getValue(quoteBlock[0], 'name'),
      title: getValue(quoteBlock[0], 'title'),
      org: getValue(quoteBlock[0], 'org'),
      image: getValue(quoteBlock[0], 'image'),
    } 
    const html = htmlTemplateFn(data) 
    result = result.replace(quoteBlock[0], html)
  } 
  return result;
}

export default function (markdown, _options) {
  return new Promise((resolve, _reject) => {
    return resolve(quoteSlideFn(markdown));
  });
}

Demo

[webpro]

Looks cool. That'd be great!

We can link to them in the docs so they can be copy-pasted. Or even add named built-in preprocessors (e.g. reveal-md --preprocessor quotes).

[webpro]

[!WARNING]

reveal-md is no longer in active development.

No new features will be added. Pull requests for bug and documentation fixes will be considered. Occasional dependency upgrades and CVEs might happen.

Thanks for using reveal-md! Please consider these Markdown-based alternatives:

• MkSlides (successor to reveal-md)
• Slidev