npm - astro-html - Versions diffs - 0.19.0 - Mend

astro-html 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/Banner.astro ADDED Viewed

@@ -0,0 +1,69 @@
+---
+const props = Astro.props;
+---
+<html lang="de">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="ad.orientation" content="portrait,landscape">
+    <meta name="ad.size" content={`width=${props.width},height=${props.height}`}>
+    <title>{props.title}</title>
+    <style>
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .banner {
+        display: block;
+        overflow: hidden;
+        cursor: pointer;
+        text-decoration: none;
+      }
+    </style>
+    <slot name="head" />
+  </head>
+  <body>
+    <a href="javascript:window.open(window.clickTag)" class={['banner', props.class].join(" ")} id="clicktag" target="_blank">
+      <slot />
+    </a>
+    <script is:inline type="application/javascript">
+      var clickTag = "";
+      var getUriParams = (function () {
+        var query_string = {};
+        var query = window.location.search.substring(1);
+        var parmsArray = query.split("&");
+        if (parmsArray.length <= 0) return query_string;
+        for (var i = 0; i < parmsArray.length; i++) {
+          var pair = parmsArray[i].split("=");
+          var val = decodeURIComponent(pair[1]);
+          if (val != "" && pair[0] != "") query_string[pair[0]] = val;
+        }
+        return query_string;
+      })();
+      const element = document.getElementById("clicktag");
+      const href = getUriParams.clicktag || getUriParams.clickTag || getUriParams.clicktag1;
+      const target = getUriParams.target || getUriParams.target1;
+      // google
+      if (href) {
+        window.clickTag = href;
+      }
+      // default
+      if (element && href) {
+        element.setAttribute("href", href);
+      }
+      if (element && target) {
+        element.setAttribute("target", target);
+      }
+    </script>
+  </body>
+</html>

package/Mail.astro ADDED Viewed

@@ -0,0 +1,12 @@
+---
+import { Head, Html } from "@react-email/components";
+---
+<Fragment
+  set:html={`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`}
+/>
+<Html>
+  <Head />
+  <slot />
+</Html>

package/README.md ADDED Viewed

@@ -0,0 +1,82 @@
+# astro-html
+Integration for Astro to Generate HTML emails with React ([react-email](https://github.com/resend/react-email)).
+## Installation
+```sh
+npm i astro-html
+```
+## Usage
+```javascript
+import { defineConfig } from "astro/config";
+import email from "astro-html";
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    email({
+      filename: "[name].html",
+    }),
+  ],
+});
+```
+### Development
+```sh
+npx astro dev
+```
+Development preview with live reload.
+### Production
+```sh
+npx astro build
+```
+This will generate HTML files for each `.astro` file in the `src/pages` directory.
+## Example
+```astro
+---
+// Important! Without partial astro will render the default Doctype.
+export const partial = true;
+import * as React from "react";
+import { Body, Container, Heading, Link, Text } from "@react-email/components";
+import Mail from "astro-html/Mail.astro";
+const fontFamily =
+  "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+const container: React.CSSProperties = {
+  paddingLeft: "45px",
+  paddingRight: "45px",
+  margin: "0 auto",
+  maxWidth: "640px",
+};
+---
+<Mail>
+  <Body
+    style={{
+      fontFamily,
+      backgroundColor: "#ffffff",
+      margin: "0",
+    }}
+  >
+    <Container style={container}>
+      <Heading>My Email</Heading>
+      <Text>Lorem Ipsum</Text>
+      <Link href="https://example.com">Click me</Link>
+    </Container>
+  </Body>
+</Mail>
+```

package/index.astro ADDED Viewed

@@ -0,0 +1,522 @@
+---
+import fs from "node:fs";
+import path from "node:path";
+let failed = false;
+async function findTemplates(
+	basePath: string,
+	relativePath: string = "",
+	currentDepth: number = 0,
+	maxDepth: number = 2,
+): Promise<any[]> {
+	if (currentDepth > maxDepth) {
+		return [];
+	}
+	const fullPath = path.resolve(basePath, relativePath);
+	const items = fs.readdirSync(fullPath);
+	const results: any[] = [];
+	for (const item of items) {
+		const itemPath = path.resolve(fullPath, item);
+		const stat = fs.statSync(itemPath);
+		try {
+			if (stat.isDirectory()) {
+				const subResults = await findTemplates(
+					basePath,
+					path.join(relativePath, item),
+					currentDepth + 1,
+					maxDepth,
+				);
+				results.push(...subResults);
+			} else {
+				if (!itemPath.endsWith(".astro")) {
+					continue;
+				}
+				const astroPageRaw = { default: fs.readFileSync(itemPath, "utf-8") };
+				const frontMatterMatch = astroPageRaw.default?.match(
+					/^---\s*([\s\S]*?)\s*---/,
+				);
+				// Extract only export statements from frontmatter
+				let exportStatements = "";
+				if (frontMatterMatch) {
+					const frontMatter = frontMatterMatch[1];
+					const exportMatches = frontMatter.match(
+						/export\s+[\s\S]*?(?=export\s+|$)/g,
+					);
+					if (exportMatches) {
+						exportStatements = exportMatches.join("\n");
+					}
+				}
+				const frontMatterToProcess = exportStatements || "";
+				let exprts = {};
+				// TODO: This limits us to not use relative file imports. Why cant we import astro file here at build time.
+				if (frontMatterMatch) {
+					const frontMatterModule = await import(
+						`data:text/javascript,${encodeURIComponent(frontMatterToProcess)}`
+					);
+					exprts = frontMatterModule;
+				}
+				const templateName = (
+					relativePath ? path.join(relativePath, item) : item
+				).replace(".astro", "");
+				// Check if getStaticPaths exists and generate multiple pages if so
+				if (
+					exprts.getStaticPaths &&
+					typeof exprts.getStaticPaths === "function"
+				) {
+					const staticPaths = await exprts.getStaticPaths();
+					for (const pathData of staticPaths) {
+						let pageName = templateName;
+						for (const key in pathData.params) {
+							pageName = pageName.replace(`[${key}]`, pathData.params[key]);
+						}
+						results.push({
+							name: pageName,
+							config: exprts.config,
+							params: pathData.params,
+						});
+					}
+				} else {
+					results.push({
+						name: templateName,
+						config: exprts.config,
+					});
+				}
+			}
+		} catch (err) {
+			console.error(err);
+			failed = true;
+		}
+	}
+	return results;
+}
+const templates = await findTemplates("src/pages", "", 0, 2);
+if (failed) {
+	throw new Error("Failed to build pages");
+}
+---
+<html>
+  <head>
+    <title>Astro Email</title>
+    <Fragment
+      set:html={`
+        <script id="data" type="application/json">${JSON.stringify(
+          {
+            pages: templates,
+          },
+          null,
+          "  "
+        )}</script>
+      `}
+    />
+  </head>
+  <body>
+    <div class="layout">
+      <div class="sidebar">
+        <div class="sidebar-header">
+          <h1>Templates</h1>
+          <button id="download-assets" class="download-button" data-has-assets="true">
+            Download All Assets
+          </button>
+        </div>
+        {
+          templates.map((template, index) => {
+            const path = template?.name.replace(".astro", "");
+            return (
+              <div class="button" data-template={path}>
+                <a href={`#${path}`}>
+                  <span class="template-number">{String(index + 1).padStart(2, '0')}</span>
+                  <span class="template-name">{path}</span>
+                </a>
+                <a target="_blank" href={path} class="template-link">
+                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" style="margin-bottom:-2px;" viewBox="0 0 15 15">
+                    <defs>
+                      <clipPath id="clip-path">
+                        <rect id="Rectangle_1687" data-name="Rectangle 1687" width="15" height="15" transform="translate(11726 152)" fill="none"/>
+                      </clipPath>
+                    </defs>
+                    <g id="Mask_Group_3" data-name="Mask Group 3" transform="translate(-11726 -152)" clip-path="url(#clip-path)">
+                      <g id="Group_422" data-name="Group 422" fill="currentColor">
+                        <path id="Path_4182" data-name="Path 4182" d="M14.6,14H7.4A2.4,2.4,0,0,1,5,11.6V4.4A2.4,2.4,0,0,1,7.4,2h2.8V3.2H7.4A1.2,1.2,0,0,0,6.2,4.4v7.2a1.2,1.2,0,0,0,1.2,1.2h7.2a1.2,1.2,0,0,0,1.2-1.2V9H17v2.6A2.4,2.4,0,0,1,14.6,14Z" transform="translate(11722 152)"/>
+                        <path id="Path_4181" data-name="Path 4181" d="M3.385,9.591V1.927L.963,4.349a.564.564,0,0,1-.8-.8L3.54.176a.564.564,0,0,1,.684-.1h0l.01.006,0,0,.007,0,.006,0,0,0L4.264.1h0a.567.567,0,0,1,.083.069L7.733,3.55a.564.564,0,0,1-.8.8L4.513,1.926V9.591a.564.564,0,1,1-1.128,0Z" transform="translate(11737.298 150.117) rotate(45)"/>
+                      </g>
+                    </g>
+                  </svg>
+                </a>
+              </div>
+            );
+          })
+        }
+      </div>
+      <div class="preview">
+        <div id="display-width" class="preview-header"></div>
+        <iframe width="640px"></iframe>
+        <script>
+          const dataString = document.querySelector("#data")?.innerHTML;
+          if (!dataString) throw new Error("No data found");
+          const data = JSON.parse(dataString);
+          console.debug("data", data);
+          // Download assets functionality
+          const downloadButton = document.querySelector("#download-assets");
+          const hasAssets = downloadButton && downloadButton.getAttribute("data-has-assets") === "true";
+          if (downloadButton) {
+            if (!hasAssets) {
+              downloadButton.disabled = true;
+              downloadButton.innerHTML = `
+                <svg width="12" height="12" viewBox="0 0 12 12" style="color: #6c757d;">
+                  <circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
+                  <path d="M4.5 4.5l3 3M7.5 4.5l-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                No Assets Built
+              `;
+              downloadButton.title = "Run 'npm run build' to generate downloadable assets";
+            } else {
+              downloadButton.addEventListener("click", () => {
+                // Simple direct download of pre-built zip
+                const link = document.createElement("a");
+                link.href = "/assets.zip";
+                link.download = "assets.zip";
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                // Show success feedback
+                const originalText = downloadButton.innerHTML;
+                downloadButton.innerHTML = `
+                  <svg width="12" height="12" viewBox="0 0 12 12" style="color: #22c55e;">
+                    <path d="M2 6l2.5 2.5L9 4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                  Downloaded!
+                `;
+                setTimeout(() => {
+                  downloadButton.innerHTML = originalText;
+                }, 1500);
+              });
+            }
+          }
+          const iframe = document.querySelector("iframe");
+          if (!iframe) throw new Error("No iframe found");
+          let fixedWidth = undefined;
+          let fixedHeight = undefined;
+          const updateFormat = (name?: string) => {
+            const config = data.pages.find((temp: { name: string }) => {
+              return temp.name === `${name}`;
+            })?.config;
+            fixedWidth = config.width;
+            fixedHeight = config.height;
+            const width = fixedWidth || iframe?.offsetWidth || 0;
+            const height = fixedHeight || iframe?.offsetHeight || 0;
+            const display = document.querySelector("#display-width");
+            if(display) {
+              display.innerHTML = `${width}x${height}px`;
+            }
+            if(iframe) {
+              iframe.width = `${width}`;
+              iframe.height = `${height}`;
+            }
+          }
+          let resizeListener: EventListener;
+          function showTemplate(name: string) {
+            if(!iframe) return;
+            const config = data.pages.find((temp: { name: string }) => {
+              return temp.name === `${name}`;
+            })?.config;
+            console.debug(name, config)
+            updateFormat(name);
+            iframe.src = `/${name}.html`;
+            // Update active state
+            document.querySelectorAll('.button').forEach(button => {
+              button.classList.remove('active');
+            });
+            const activeButton = document.querySelector(`[data-template="${name}"]`);
+            if (activeButton) {
+              activeButton.classList.add('active');
+            }
+            window.removeEventListener("resize", resizeListener);
+            resizeListener = () => updateFormat(name);
+            window.addEventListener("resize", resizeListener);
+          }
+          const template = location.hash.substring(1);
+          if (template) {
+            showTemplate(template)
+          } else {
+            const first = data.pages[0]?.name.replace(".astro", "");
+            showTemplate(first)
+          }
+          window.addEventListener("hashchange", () => {
+            showTemplate(location.hash.substring(1));
+          });
+        </script>
+      </div>
+    </div>
+    <style>
+      body {
+        font-family: sans-serif, Arial;
+        height: 100vh;
+        margin: 0;
+        overscroll-behavior: none;
+        overflow: hidden;
+        font-size: 1rem;
+      }
+      body {
+        background-color: #e5e5f7;
+        background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(to right, #eee 1px, #fff 1px);
+        background-size: 20px 20px;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: hsl(258, 7%, 10%);
+          color: #fff;
+        }
+      }
+      iframe {
+        border: none;
+        max-height: 100%;
+        max-width: 100%;
+        flex: none;
+      }
+      h1 {
+        opacity: 0.65;
+        font-size: 0.65rem;
+        font-weight: normal;
+        text-transform: uppercase;
+        margin: 0;
+      }
+      .preview-header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px 20px;
+        font-size: 0.75rem;
+        color: #666;
+      }
+      .preview {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        justify-content: center;
+        justify-items: center;
+        height: 100%;
+        margin: 0 20px;
+      }
+      .layout {
+        height: 100%;
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        grid-template-rows: 1fr;
+      }
+      .sidebar {
+        margin: 8px;
+        border-radius: 8px;
+        background: #fff;
+        padding: 1rem 0.75rem;
+        box-sizing: border-box;
+        border-right: 1px solid #e0e0e0;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+      .sidebar-header {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+      .download-button {
+        appearance: none;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        padding: 0.5rem 1rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-height: 2.25rem;
+      }
+      .download-button:hover:not(:disabled) {
+        background: #0056b3;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+      }
+      .download-button:disabled {
+        opacity: 0.8;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+        background: #6c757d;
+      }
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      @media (prefers-color-scheme: dark) {
+        .sidebar {
+          background-color: hsl(258, 4%, 14%);
+          border-right: 1px solid #000000;
+        }
+      }
+      a[href] {
+        color: inherit;
+        text-decoration: none;
+      }
+      .button,
+      button {
+        display: inline-block;
+        box-sizing: border-box;
+        appearance: none;
+        width: 100%;
+        background: transparent;
+        color: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 4px 0px 6px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin-bottom: 0.5rem;
+        transition: all 0.2s;
+      }
+      .button a[href^="#"] {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex: 1;
+        min-height: 2rem;
+      }
+      .template-number {
+        font-size: 0.75rem;
+        opacity: 0.6;
+        font-weight: 600;
+        min-width: 1.5rem;
+        text-align: center;
+      }
+      .template-name {
+        flex: 1;
+        font-size: 0.8rem;
+      }
+      .button.active {
+        background: #007bff;
+        color: #fff;
+        border-color: #007bff;
+      }
+      .button.active .template-number {
+        opacity: 0.9;
+      }
+      .template-link {
+        font-size: 0.65rem;
+        padding: 8px 10px;
+        border-radius: 8px;
+        transition: all 0.2s;
+      }
+      .template-link:hover {
+        background: #8282823e;
+      }
+      .button:hover,
+      button:hover {
+        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.04);
+      }
+      .button:active,
+      button:active {
+        transition: none;
+        box-shadow: none;
+      }
+      @media (prefers-color-scheme: dark) {
+        button {
+          border: 1px solid #4b4b4b;
+        }
+        button:hover {
+          background: #3f3f3f;
+        }
+        .button.active {
+          background: #0066cc;
+          border-color: #0066cc;
+        }
+        .download-button:hover:not(:disabled) {
+          background: #0056b3;
+        }
+        .download-button:disabled {
+          background: #6c757d;
+        }
+      }
+    </style>
+  </body>
+</html>

package/index.js ADDED Viewed

@@ -0,0 +1,169 @@
+import react from "@vitejs/plugin-react";
+import fs from "node:fs";
+import path from "node:path";
+import * as vite from "vite";
+import child_process from "node:child_process";
+/**
+ * @param {object} options
+ * @param {string | ((name: string) => string)} options.filename - The filename to use for the output files. Use `[name]` to insert the page name.
+ * @returns {import('astro').AstroIntegration}
+ */
+export default function email(options) {
+  return {
+    name: "email",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url;
+        if (!url) return next();
+        // Extract the filename from any sub-path
+        const segments = url.split("/").filter(Boolean);
+        const filename = segments[segments.length - 1];
+        // Only handle requests for files with extensions
+        if (filename?.includes(".")) {
+          const publicPath = path.join(process.cwd(), "public", filename);
+          if (fs.existsSync(publicPath)) {
+            const stat = fs.statSync(publicPath);
+            if (stat.isFile()) {
+              res.setHeader("Content-Length", stat.size);
+              const stream = fs.createReadStream(publicPath);
+              stream.pipe(res);
+              return;
+            }
+          }
+        }
+        next();
+      });
+    },
+    hooks: {
+      "astro:config:setup": ({
+        command,
+        updateConfig,
+        injectRoute,
+        addRenderer,
+        addDevToolbarApp,
+      }) => {
+        addRenderer({
+          name: "astro-html/react",
+          serverEntrypoint: "@astrojs/react/server.js",
+        });
+        updateConfig({
+          vite: {
+            plugins: [
+              react(),
+              optionsPlugin(false), // required for @astrojs/react/server.js to work.
+            ],
+            build: {
+              assetsInlineLimit: 1024 * 20, // inline all assets
+            },
+          },
+          compressHTML: false,
+          build: {
+            format: "file",
+          },
+        });
+        injectRoute({
+          pattern: "/",
+          entrypoint: "astro-html/index.astro",
+        });
+        addDevToolbarApp("astro-html/toolbar.js");
+      },
+      "astro:build:done": async ({ dir, pages }) => {
+        if (options.filename) {
+          const manifest = [];
+          for (const page of pages) {
+            const pathname = page.pathname;
+            const basename = pathname.split(".")[0];
+            if (!pathname) continue; // index has none
+            const name =
+              typeof options.filename === "string"
+                ? options.filename.replace("[name]", basename)
+                : options.filename(basename);
+            fs.renameSync(
+              path.resolve(dir.pathname, `${pathname}.html`),
+              path.resolve(dir.pathname, name),
+            );
+            const files = [name];
+            // Add all public files
+            const publicDir = path.resolve("public");
+            if (fs.existsSync(publicDir)) {
+              const publicFiles = fs.readdirSync(publicDir);
+              for (const publicFile of publicFiles) {
+                const publicFilePath = path.resolve(publicDir, publicFile);
+                if (fs.statSync(publicFilePath).isFile()) {
+                  files.push(publicFile);
+                }
+              }
+            }
+            // check if an .jpg file with the same name exists and copy it to dist too.
+            const jpgPath = path.resolve("src/pages", `${pathname}.jpg`);
+            if (fs.existsSync(jpgPath)) {
+              const newJpgName =
+                typeof options.filename === "string"
+                  ? options.filename
+                      .replace("[name]", basename)
+                      .replace(/\.[^.]+$/, ".jpg")
+                  : options.filename(basename).replace(/\.[^.]+$/, ".jpg");
+              fs.copyFileSync(jpgPath, path.resolve(dir.pathname, newJpgName));
+              files.push(newJpgName);
+            }
+            manifest.push({
+              name: pathname,
+              files: files,
+            });
+          }
+          fs.writeFileSync(
+            path.resolve(dir.pathname, "manifest.json"),
+            JSON.stringify(manifest, null, 2),
+          );
+        }
+      },
+      "astro:server:setup": ({ server }) => {
+        server.ws.on("astro-dev-toolbar:astro-html:toggled", (data) => {
+          if (data.state === true) {
+            child_process.exec("astro build");
+          }
+        });
+      },
+    },
+  };
+}
+/** @type {(xperimentalReactChildren?: boolean) => vite.Plugin} */
+function optionsPlugin(experimentalReactChildren) {
+  const virtualModule = "astro:react:opts";
+  const virtualModuleId = `\0${virtualModule}`;
+  return {
+    name: "astro-html/react:opts",
+    resolveId(id) {
+      if (id === virtualModule) {
+        return virtualModuleId;
+      }
+    },
+    load(id) {
+      if (id === virtualModuleId) {
+        return {
+          code: `export default {
+						experimentalReactChildren: ${JSON.stringify(experimentalReactChildren)}
+					}`,
+        };
+      }
+    },
+  };
+}

package/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+	"name": "astro-html",
+	"description": "Integration for Astro to Generate HTML emails with React (react-email)",
+	"type": "module",
+	"author": {
+		"name": "Tim Havlicek",
+		"email": "tim.h4vlicek@gmail.com"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/luckydye/astro-html.git"
+	},
+	"version": "0.19.0",
+	"main": "index.js",
+	"scripts": {
+		"dev": "astro dev",
+		"build": "astro build"
+	},
+	"dependencies": {
+		"@astrojs/react": "^4.4.0",
+		"@vitejs/plugin-react": "^4.7.0",
+		"@react-email/components": "^0.5.6"
+	},
+	"devDependencies": {
+		"@types/node": "^20.11.17",
+		"@types/react": "^18.2.55",
+		"@types/react-dom": "^18.2.19"
+	},
+	"files": [
+		"Mail.astro",
+		"Banner.astro",
+		"index.astro",
+		"index.js",
+		"toolbar.js"
+	]
+}

package/toolbar.js ADDED Viewed

@@ -0,0 +1,32 @@
+const icon = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15" viewBox="0 0 15 15">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1688" data-name="Rectangle 1688" width="15" height="15" transform="translate(11726 152)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Mask_Group_4" data-name="Mask Group 4" transform="translate(-11726 -152)" clip-path="url(#clip-path)">
+    <g fill="#fff" id="Group_423" data-name="Group 423" transform="translate(0.5)">
+      <path id="Path_4183" data-name="Path 4183" d="M14.6,14H7.4A2.4,2.4,0,0,1,5,11.6V8.018H6.2V11.6a1.2,1.2,0,0,0,1.2,1.2h7.2a1.2,1.2,0,0,0,1.2-1.2V8.018H17V11.6A2.4,2.4,0,0,1,14.6,14Z" transform="translate(11722 152)"/>
+      <path id="Path_4184" data-name="Path 4184" d="M3.385,9.591V1.927L.963,4.349a.564.564,0,0,1-.8-.8L3.54.176a.564.564,0,0,1,.684-.1h0l.01.006,0,0,.007,0,.006,0,0,0L4.264.1h0a.567.567,0,0,1,.083.069L7.733,3.55a.564.564,0,0,1-.8.8L4.513,1.926V9.591a.564.564,0,1,1-1.128,0Z" transform="translate(11736.949 162.579) rotate(180)"/>
+    </g>
+  </g>
+</svg>
+`;
+export default {
+  id: 'astro-html',
+  name: 'Export emails',
+  icon,
+  init(canvas, eventTarget) {
+    eventTarget.addEventListener('app-toggled', async (event) => {
+      if (event.detail.state) {
+        setTimeout(() => {eventTarget.dispatchEvent(
+          new CustomEvent('toggle-app', {
+            detail: { state: false },
+          })
+        )}, 150)
+      }
+    })
+  }
+}