maizzle/framework v6.0.0-rc.7

on GitHub

New features

This RC brings a bunch of new features!

To try them out, best scaffold a new Maizzle 6 (beta) project:

npx maizzle@latest new

Send test emails

There is now a Test tab at the bottom of the dev UI, from where you can send yourself an actual test email.

The pre-checked "Prevent threading" option appends a timestamp to your subject so that email clients do not group your test messages (important, because threading can affect how an email looks like).

This uses Nodemailer, so you will need to pass your SMTP config for sending emails in the server.email Maizzle config:

import { defineConfig } from '@maizzle/framework'

export default defineConfig({
  server: {
    email: {
      to: ['test@example.com'],
      from: 'dev@example.email',
      transport: {
        host: 'smtp.yourprovider.com',
        port: 465,
        auth: { user: '...', pass: '...' }, // use and fetch env vars in production
      },
    },
  }
})

More commands

We now have commands for screenshotting and copying code to clipboard in the command palette. You can also quickly access the Maizzle docs and Can I Email right from there:

<Preheader>

Renamed the <Preview> component to <Preheader>.

<Markdown>

Added a <Markdown> that can be used to render markdown like this:

<Markdown>
  # Hello!
</Markdown>

Or like this:

<Markdown src="file.md" />

Speaking of markdown, there is now a markdown.shikiTheme option through which you can choose the theme used when syntax-highligthing .md files that you import and use as components

Changed

• replaced the shadcn resizables with a custom implementation that works better with device resizing too
• updated css compilation to transform text-decoration-line from underline/no-underline utilities to text-decoration, for better email client compatibility

Fixed

• fixed an issue with css purging not removing some orphaned classes
• fixed an issue with <style data-embed> being inlined
• fixed a bunch of issues with the dev server ui, like resizing, colors, scrollbars and general polish
• fixed content jumping in dev preview when saving changes to a template

• feat: send test emails 1fea6fe
• refactor: rename preview component to preheader c1447d7
• refactor: css purging 762a5cd
• feat: markdown component 6289d33
• feat: email-safe text decoration 53eff98
• fix: preserve style tags marked as embedded a68de33
• feat: add more commands bc31f54
• refactor: dialog overlay background 649dc5c
• refactor: dev ui dropdowns a0e0cb8
• refactor: devices dropdown 2e2b52e
• refactor: dev preview scrollbar 5ed88c3
• refactor: tone down dev ui icons in dark mode 2b95beb
• feat: custom scrollbars in dev ui 322d7b0
• refactor: server ui dark mode c7c6db9
• refactor: command palette triggers 552e83a
• refactor: compatibility check 071c6fe
• refactor: preview resizing cb205be
• refactor: dev preview rendering b2c4ce4
• feat: markdown.shikiTheme option cc53a7a
• refactor: codeblock component 234acdf

v6.0.0-rc.6...v6.0.0-rc.7