DOCSEARCHbyAlgolia
Submit Docs

Maizzle Documentation

website·Indexed 33 days ago

https://v5.maizzle.com/docs/introduction

A framework for creating email newsletters, featuring integration with Tailwind CSS, support for components, and capabilities for fetching and formatting external data such as RSS feeds via rss-parser.

Tokens
2.6K
Snippets
20
Records
23
Agent score
0%

What's inside Maizzle

  2. Fetch and display API data in Maizzle templates

    Use the <fetch> tag to retrieve JSON data from an external API endpoint directly within a Maizzle template. The retrieved data is available in the response array. You can access specific items using index notation (e.g., response[0]) to manually map API fields to your HTML markup.
    <x-main>
  <fetch url="https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1">
    <tr>
      <td>
        <h1>{{ response[0].title.rendered }}</h1>
        <div>{{ response[0].excerpt.rendered }}</div>
        <a href="{{ response[0].link }}">Read more</a>
      </td>
    </tr>
  </fetch>
</x-main>

  3. Loop through API response data using the <each> tag

    To iterate over all items returned by a <fetch> tag, use the <each> tag with the loop attribute. You can also use JavaScript expressions within the loop attribute (such as .slice()) to iterate over a specific subset of the response data. The loop.last meta property can be used to conditionally render elements (like dividers) only after the final item.
    <fetch url="https://api.example.com/posts">
  <each loop="post in response.slice(-2)">
    <tr>
      <td>
        <h4><a href="{{ post.link }}">{{ post.title.rendered }}</a></h4>
        <if condition="loop.last">
          <hr />
        </if>
      </td>
    </tr>
  </each>
</fetch>

  4. Use Markdown inside Maizzle components

    To render Markdown content inside a component, ensure there is an empty line both before and after the Markdown content passed into the component tags.
    <x-alert>

# {{ page.title }}

This is the first newsletter.

</x-alert>

  5. Apply utility classes to Markdown headings

    In Maizzle Markdown files, you can apply utility classes directly to headings by adding them in curly braces {} immediately following the heading text. Classes must include a leading dot (.) and be separated by spaces. These classes are processed and inlined into the final HTML output.
    # Hello world {.m-0 .mb-10 .text-slate-900}

  6. Implement syntax highlighting for Markdown code blocks using Shiki

    To add syntax highlighting to fenced code blocks in Maizzle Markdown, you can define a custom highlight method for markdown-it within the beforeCreate event in your config.js. This ensures the highlighter is initialized once before templates are compiled.
    npm install shiki
    // config.js
import { createHighlighter } from 'shiki'

export default {
  async beforeCreate(config) {
    const highlighter = await createHighlighter({
      themes: ['nord'],
      langs: ['html'],
    })

    config = Object.assign(config, {
      markdown: {
        markdownit: {
          highlight: (code, lang) => {
            lang = lang || 'html'
            return highlighter.codeToHtml(code, { lang, theme: 'nord' })
          }
        }
      }
    })
  },
}

  7. Configure Maizzle to use PrismJS for Markdown syntax highlighting

    To automatically syntax-highlight fenced code blocks within Markdown in Maizzle, install the prismjs library and configure the markdownit highlight function in config.js to use Prism's highlighting engine.
    npm i prismjs
    // config.js
const Prism = require('prismjs')

module.exports = {
  markdown: {
    markdownit: {
      highlight(code, lang) {
        lang = lang || 'markup'
        return Prism.highlight(code, Prism.languages[lang], lang)
      }
    }
  }
}

  8. Implement custom layouts using Front Matter

    You can dynamically assign layouts to Markdown files by extracting a layout property from the file's Front Matter using the front-matter package within the beforeRender hook of config.js.
    import fm from 'front-matter'

export default {
  beforeRender(html) {
    const { attributes, body } = fm(html)
    const layout = attributes.layout || 'main'

    return `
      <x-${layout}>
        <md>${body}</md>
      </x-${layout}>`
  }
}

  9. Add PrismJS syntax highlighting via PostHTML

    To implement syntax highlighting in HTML emails, use the posthtml-prism plugin. This allows you to use standard <pre><code class="language-xxx"> markup, which the plugin then transforms into highlighted HTML during the build process.
    npm i posthtml-prism
    // config.js
module.exports = {
  build: {
    posthtml: {
      plugins: [
        require('posthtml-prism')()
      ]
    }
  }
}
    <!-- emails/example.html -->
<pre>
  <code class="language-javascript">
  function foo(bar) {
    var a = 42,
        b = 'Prism';
    return a + bar(b);
  }
  </code>
</pre>

  10. Create an email newsletter from an RSS feed

    Use the rss-parser library within Maizzle's beforeCreate event to fetch RSS feed data and make it available to your templates. You can define custom fields to capture data not returned by default (e.g., subtitle or summary).
    npm install rss-parser
    // config.js
import Parser from 'rss-parser'

export default {
  feed: {
    url: 'https://laracasts.com/feed'
  },
  async beforeCreate(config) {
    const parser = new Parser({
      customFields: {
        feed: ['subtitle'],
        item: ['summary']
      }
    })

    let feed = await parser.parseURL(config.feed.url)

    config.feed = {
      title: feed.title,
      subtitle: feed.subtitle,
      link: feed.link,
      updated_at: feed.lastBuildDate,
      posts: feed.items
    }
  }
}

  11. Apply a PrismJS theme to Maizzle templates

    To style PrismJS tokenized code blocks, save a Prism theme CSS file (e.g., prism-synthwave84.css) to the css directory of your project and import it into your css/tailwind.css file between the components and utilities imports.
    /* Tailwind CSS components */
@import "tailwindcss/components";

@import "custom/prism-synthwave84";

/* Tailwind CSS utility classes */
@import "tailwindcss/utilities";

/* Your custom utility classes */
@import "utilities";

  12. Fetch WordPress posts using the Maizzle fetch tag

    Use the <fetch> tag in a Maizzle template to retrieve data from the WordPress REST API. You can use query parameters like per_page to limit results and _embed=1 to include additional fields such as featured media (_embedded["wp:featuredmedia"]). The fetched data is available within the template via the {{ response }} variable.
    <x-main>
  <fetch url="https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1">
    <!-- Posts are now available in {{ response }} -->
  </fetch>
</x-main>