nuxt-email-renderer 0.0.8 → 0.0.9

package/README.md

@@ -1,33 +1,17 @@
-<!--
-Get your module up and running quickly.
+# Nuxt Email Renderer
 
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
--->
+**The next generation of writing emails in Nuxt.**
 
-# Nuxt Email Renderer
+A Nuxt module that provides high-quality, unstyled components for creating emails using Vue and TypeScript. 
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-A Nuxt module to render email templates using Vue components.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+[📖 &nbsp;Documentation](https://nuxtemail.com) · [👾 &nbsp;Playground](https://nuxtemail.com/playground)
 
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
-
-## Quick Setup
+## Install
 
 Install the module to your Nuxt application with one command:
 
@@ -37,37 +21,145 @@ npx nuxi module add nuxt-email-renderer
 
 That's it! You can now use Nuxt Email Renderer in your Nuxt app ✨
 
+## Getting started
+
+Add the module to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-email-renderer'
+  ]
+})
+```
+
+Create an email template using Vue components. Include styles where needed:
+
+```vue
+<template>
+  <EHtml>
+    <EHead />
+    <EPreview>Welcome to our platform!</EPreview>
+    <EBody :style="{ backgroundColor: '#f6f9fc', fontFamily: 'Arial, sans-serif' }">
+      <EContainer :style="{ margin: '0 auto', padding: '20px 0 48px' }">
+        <EHeading :as="'h1'">Welcome!</EHeading>
+        <EText :style="{ fontSize: '16px', lineHeight: '24px' }">
+          Thanks for joining us. Click the button below to get started.
+        </EText>
+        <EButton 
+          href="https://example.com" 
+          :style="{ backgroundColor: '#007ee6', color: '#fff', padding: '12px 20px' }"
+        >
+          Get Started
+        </EButton>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>
+```
+
+In your code, you can now render the template by calling the render API endpoint provided by the module:
+
+```ts
+const response = await $fetch("/api/emails/render", {}, {
+  method: "POST",
+  body: {
+    template: "WelcomeEmail",
+    props: {
+      userName: "John Doe",
+      confirmationUrl: "https://example.com/confirm?token=abc123",
+    },
+  },
+});
+```
+
+If you have the Nuxt DevTools enabled, you can also test rendering directly from the DevTools panel. You should see your `WelcomeEmail` template listed.
 
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  npm install
-  
-  # Generate type stubs
-  npm run dev:prepare
-  
-  # Develop with the playground
-  npm run dev
-  
-  # Build the playground
-  npm run dev:build
-  
-  # Run ESLint
-  npm run lint
-  
-  # Run Vitest
-  npm run test
-  npm run test:watch
-  
-  # Release new version
-  npm run release
-  ```
-
-</details>
+## Components
+
+A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.
+
+- [Body](src/runtime/components/body) - The main body wrapper for your email
+- [Button](src/runtime/components/button) - A styled button component
+- [CodeBlock](src/runtime/components/code-block) - Syntax-highlighted code blocks  
+- [CodeInline](src/runtime/components/code-inline) - Inline code snippets
+- [Column](src/runtime/components/column) - Table column for layouts
+- [Container](src/runtime/components/container) - Centered container wrapper
+- [Font](src/runtime/components/font) - Web font imports
+- [Head](src/runtime/components/head) - HTML head section
+- [Heading](src/runtime/components/heading) - Headings (h1-h6)
+- [Hr](src/runtime/components/hr) - Horizontal divider lines
+- [Html](src/runtime/components/html) - Root HTML wrapper
+- [Img](src/runtime/components/img) - Responsive images
+- [Link](src/runtime/components/link) - Styled anchor links
+- [Preview](src/runtime/components/preview) - Email preview text
+- [Row](src/runtime/components/row) - Table rows for layouts
+- [Section](src/runtime/components/section) - Content sections
+- [Style](src/runtime/components/style) - CSS styles
+- [Text](src/runtime/components/text) - Paragraph and text content
+
+## Support
+
+All components were tested using the most popular email clients.
+
+| Gmail ✔ | Apple Mail ✔ | Outlook ✔ | Yahoo! Mail ✔ | HEY ✔ | Superhuman ✔ |
+|---------|--------------|-----------|---------------|-------|--------------|
+
+## Development
+
+#### Install dependencies
+
+```bash
+pnpm install
+```
+
+#### Build
+
+```bash
+pnpm build
+```
+
+#### Run playground
+
+```bash
+pnpm dev
+```
+
+This will start the development server with the playground at [localhost:3000](http://localhost:3000/).
+
+#### Run DevTools interface
+
+```bash
+pnpm client:dev
+```
+
+This starts the email template viewer interface at [localhost:3300](http://localhost:3300/).
+
+#### Run tests
+
+```bash
+pnpm test
+```
+
+#### Run linting
+
+```bash
+pnpm lint
+```
+
+## Authors
+
+- Michael Hoffmann ([@mokkapps](https://twitter.com/mokkapps))
+
+## License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [📖 &nbsp;Documentation](https://nuxtemail.com)
+- [🏀 &nbsp;Playground](https://nuxtemail.com/playground)
 
 
 <!-- Badges -->

package/dist/client/200.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__nuxt-email-renderer/_nuxt/BWau57G6.js"}}</script><link rel="stylesheet" href="/__nuxt-email-renderer/_nuxt/entry.CJ9_mbro.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/BWau57G6.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-404.BHOIm0B1.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/Dp9LgCK2.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/n57rOy2v.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-500.CqX_nDZ5.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/DZaor8iy.js"><script type="module" src="/__nuxt-email-renderer/_nuxt/BWau57G6.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1759036602541,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{nuxtEmailRenderer:{emailsDir:"/playground/emails",devtools:false}},app:{baseURL:"/__nuxt-email-renderer",buildId:"708fbde9-f767-4f39-b851-ec1205270e83",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__nuxt-email-renderer/_nuxt/YwajB3s2.js"}}</script><link rel="stylesheet" href="/__nuxt-email-renderer/_nuxt/entry.jNjS3-cZ.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/YwajB3s2.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-404.BHOIm0B1.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/Dp9LgCK2.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/n57rOy2v.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-500.CqX_nDZ5.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/DZaor8iy.js"><script type="module" src="/__nuxt-email-renderer/_nuxt/YwajB3s2.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1759140505695,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{nuxtEmailRenderer:{emailsDir:"/playground/emails",devtools:false}},app:{baseURL:"/__nuxt-email-renderer",buildId:"c534c671-6313-474a-9e7c-cf6db80f1b4e",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/client/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__nuxt-email-renderer/_nuxt/BWau57G6.js"}}</script><link rel="stylesheet" href="/__nuxt-email-renderer/_nuxt/entry.CJ9_mbro.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/BWau57G6.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-404.BHOIm0B1.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/Dp9LgCK2.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/n57rOy2v.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-500.CqX_nDZ5.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/DZaor8iy.js"><script type="module" src="/__nuxt-email-renderer/_nuxt/BWau57G6.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1759036602542,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{nuxtEmailRenderer:{emailsDir:"/playground/emails",devtools:false}},app:{baseURL:"/__nuxt-email-renderer",buildId:"708fbde9-f767-4f39-b851-ec1205270e83",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__nuxt-email-renderer/_nuxt/YwajB3s2.js"}}</script><link rel="stylesheet" href="/__nuxt-email-renderer/_nuxt/entry.jNjS3-cZ.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/YwajB3s2.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-404.BHOIm0B1.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/Dp9LgCK2.js"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/n57rOy2v.js"><link rel="prefetch" as="style" crossorigin href="/__nuxt-email-renderer/_nuxt/error-500.CqX_nDZ5.css"><link rel="prefetch" as="script" crossorigin href="/__nuxt-email-renderer/_nuxt/DZaor8iy.js"><script type="module" src="/__nuxt-email-renderer/_nuxt/YwajB3s2.js" crossorigin></script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1759140505695,false]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{nuxtEmailRenderer:{emailsDir:"/playground/emails",devtools:false}},app:{baseURL:"/__nuxt-email-renderer",buildId:"c534c671-6313-474a-9e7c-cf6db80f1b4e",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>

package/dist/client/_nuxt/DxtrUEuP.js

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./D7nOehHU.js","./BWau57G6.js","./entry.CJ9_mbro.css"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./D7nOehHU.js","./YwajB3s2.js","./entry.jNjS3-cZ.css"])))=>i.map(i=>d[i]);
 import{j as h,m,k as l}from"#entry";const y=h({name:"ECodeBlock",props:{code:{type:String,required:!0},lang:{type:String,required:!0},theme:{type:String,required:!0},class:{type:String,default:""},showLineNumbers:{type:Boolean,default:!1},lineNumberColor:{type:String,default:"#636E7B"},lineHighlightingColor:{type:String,default:"rgba(101, 117, 133, .16)"},highlightedLines:{type:Array,default:()=>[]}},async setup({code:a,lang:r,theme:t,showLineNumbers:s,lineNumberColor:n,highlightedLines:p,lineHighlightingColor:c}){const{createHighlighter:d}=await m(async()=>{const{createHighlighter:e}=await import("./D7nOehHU.js");return{createHighlighter:e}},__vite__mapDeps([0,1,2]),import.meta.url),i=await d({langs:[r],themes:[t]}),g=i.getTheme(t).bg,u=i.codeToHtml(a,{lang:r,theme:t,transformers:[{code(e){e.properties.style="display: table; width: 100%;"}},{line(e,o){e.properties.style="display: table-row; line-height: 1.5; height: 1.5em;",s&&e.children.unshift({type:"element",tagName:"span",properties:{className:["line-number"],style:`padding-left: 5px; padding-right: 15px; color: ${n}; user-select: none;`},children:[{type:"text",value:`${o}`}]}),p.includes(o)&&(e.properties.style+=`background-color: ${c};`)}}]});return()=>l("pre",{class:["shiki",t],style:{backgroundColor:g,display:"block",whiteSpace:"pre",fontFamily:"monospace"},tabindex:0},[l("span",{innerHTML:u})])}}),b=Object.assign(y,{__name:"CodeBlockECodeBlock"});export{y as ECodeBlock,b as default};