@maizzle/framework 5.0.0-beta.21 → 5.0.0-beta.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.21",
+  "version": "5.0.0-beta.23",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@csstools/css-calc": "^1.2.4",
     "@maizzle/cli": "next",
-    "cheerio": "^1.0.0",
+    "cheerio": "1.0.0-rc.12",
     "chokidar": "^3.6.0",
     "cli-table3": "^0.6.5",
     "color-shorthand-hex-to-six-digit": "^5.0.16",
@@ -62,7 +62,7 @@
     "html-crush": "^6.0.18",
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
-    "juice": "^10.0.0",
+    "juice": "^10.0.1",
     "lodash-es": "^4.17.21",
     "morphdom": "^2.7.4",
     "ora": "^8.0.1",

package/src/commands/build.js

@@ -221,12 +221,15 @@ export default async (config = {}) => {
       if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
         const posthtmlOptions = get(rendered.config, 'posthtml.options', {})
 
-        const plaintext = await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions))
-        rendered.html = await handlePlaintextTags(rendered.html, posthtmlOptions)
-        await writePlaintextFile(plaintext, rendered.config)
+        await writePlaintextFile(
+          await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions)),
+          rendered.config
+        )
           .catch(error => {
             throw new Error(`Error writing plaintext file: ${error}`)
           })
+
+        rendered.html = await handlePlaintextTags(rendered.html, posthtmlOptions)
       }
 
       /**

package/src/generators/plaintext.js

@@ -154,17 +154,11 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   const plaintextExtension = get(plaintextConfig, 'output.extension', 'txt')
 
   /**
-   * If `plaintext: true` (either from Front Matter or from config)
+   * If `plaintext: true` (either from Front Matter or from config),
+   * output plaintext file in the same location as the HTML file.
    */
   if (plaintextConfig === true) {
-    // If the template has a `permalink` key set in the FM
-    if (typeof config.permalink === 'string') {
-      // Output plaintext at the `permalink` path
-      plaintextOutputPath = config.permalink
-    } else {
-      // Output plaintext at the same directory as the HTML file
-      plaintextOutputPath = get(config, 'build.output.path')
-    }
+    plaintextOutputPath = get(config, 'build.output.path')
   }
 
   /**
@@ -179,12 +173,22 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   // No need to handle if it's an object, since we already set it to that initially
 
   /**
-   * If `plaintextOutputPath` is a file path, output file there
+   * If the template has a `permalink` key set in the FM, always output plaintext file there
+   */
+  if (typeof config.permalink === 'string') {
+    plaintextOutputPath = config.permalink
+  }
+
+  /**
+   * If `plaintextOutputPath` is a file path, output file there.
+   *
+   * The file will be output relative to the project root, and the extension
+   * doesn't matter, it will be replaced with `plaintextExtension`.
    */
   if (path.extname(plaintextOutputPath)) {
     // Ensure the target directory exists
     await lstat(plaintextOutputPath).catch(async () => {
-      await mkdir(plaintextOutputPath, { recursive: true })
+      await mkdir(path.dirname(plaintextOutputPath), { recursive: true })
     })
 
     // Ensure correct extension is used
@@ -193,19 +197,19 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
       path.basename(plaintextOutputPath, path.extname(plaintextOutputPath)) + '.' + plaintextExtension
     )
 
-    console.log('plaintextOutputPath', plaintextOutputPath);
-
     return writeFile(plaintextOutputPath, plaintext)
   }
 
   /**
-   * If `plaintextOutputPath` is a directory path, output file there, using the template's name
+   * If `plaintextOutputPath` is a directory path, output file there using the Template's name.
+   *
+   * The file will be output relative to the `build.output.path` directory.
    */
   const templateFileName = get(config, 'build.current.path.name')
 
   plaintextOutputPath = path.join(
-    path.dirname(plaintextOutputPath),
     get(config, 'build.current.path.dir'),
+    plaintextOutputPath,
     templateFileName + '.' + plaintextExtension
   )
 

package/src/server/index.js

@@ -140,7 +140,7 @@ export default async (config = {}) => {
    * */
   app.request.templatePaths = templatePaths
 
-  // await updateRoutes(app, config)
+  app.request.maizzleConfig = config
 
   /**
    * Create route pattern

package/src/server/routes/index.js

@@ -7,27 +7,65 @@ import { fileURLToPath } from 'node:url'
 import expressions from 'posthtml-expressions'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-route.get(['/', '/index.html'], async (req, res) => {
-  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
+function groupFilesByDirectories(globs, files) {
+  const result = {}
+  let current = {}
 
-  // Group by `dir`
-  const groupedByDir = {}
+  globs.forEach(glob => {
+    const rootPath = glob.split(/[\*\!\{\}]/)[0].replace(/\/+$/, '')
 
-  req.templatePaths
-    .map(t => path.parse(t))
-    .forEach(file => {
-      if (!groupedByDir[file.dir]) {
-        groupedByDir[file.dir] = []
-      }
+    files.forEach(file => {
+      if (file.startsWith(rootPath)) {
+        const relativePath = file.slice(rootPath.length + 1)
+        const parts = relativePath.split('/')
+        current = result[rootPath] = result[rootPath] || {}
+
+        for (let i = 0; i < parts.length - 1; i++) {
+          current = current[parts[i]] = current[parts[i]] || {}
+        }
 
-      file.href = [file.dir.replace(file.root, ''), file.base].join('/')
-      groupedByDir[file.dir].push(file)
+        const fileName = parts[parts.length - 1]
+        current[fileName] = {
+          name: fileName,
+          href: file,
+        }
+      }
     })
+  })
+
+  return result
+}
+
+function flattenPaths(paths, parentPath = '', currentDepth = 0) {
+  const flatArray = []
+
+  for (const [key, value] of Object.entries(paths)) {
+    const fullPath = parentPath ? `${parentPath}/${key}` : key
+
+    if (value && typeof value === 'object' && !value.name) {
+      // If it's a folder, add it with the current depth and recurse into its contents
+      flatArray.push({ name: key, path: fullPath, depth: currentDepth, type: 'folder' })
+      flatArray.push(...flattenPaths(value, fullPath, currentDepth + 1))
+    } else if (value && typeof value === 'object' && value.name) {
+      // If it's a file, add it with the current depth
+      flatArray.push({ name: value.name, href: value.href, path: fullPath, depth: currentDepth, type: 'file' })
+    }
+  }
+
+  return flatArray
+}
+
+route.get(['/', '/index.html'], async (req, res) => {
+  const view = await fs.readFile(path.join(__dirname, '../views', 'index.html'), 'utf8')
+
+  const content = new Set(req.maizzleConfig.build.content)
+
+  const groupedByDir = groupFilesByDirectories(content, req.templatePaths)
 
   const { html } = await posthtml()
     .use(expressions({
       locals: {
-        templates: groupedByDir
+        paths: flattenPaths(groupedByDir)
       }
     }))
     .process(view)

package/src/server/views/index.html

@@ -4,21 +4,144 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Maizzle | Templates</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" media="screen">
+  <style>
+    body {
+      padding: 7rem 6.25rem;
+    }
+
+    @media (max-width: 425px) {
+      body {
+        padding: 3rem 1.5rem;
+      }
+    }
+
+    /* General styling */
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      font-family: Inter, Arial, Helvetica, sans-serif;
+    }
+
+    /* Folder styling */
+    li > strong {
+      font-size: 1.875rem;
+      line-height: 2.25rem;
+      color: #0F172A;
+    }
+
+    li.folder.root {
+      padding-bottom: 1.5rem;
+      padding-top: 3rem;
+    }
+
+    li.folder.root:first-child {
+      padding-top: 0 !important;
+    }
+
+    li.folder.nested {
+      padding-top: 1.5rem;
+    }
+
+    li.folder.nested > strong {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 600;
+    }
+
+    li > strong > span {
+      color: #94A3B8;
+    }
+
+    /* File styling */
+    li > a {
+      color: #4f46e5;
+      text-decoration: none;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+
+    li > a:hover {
+      text-decoration: underline;
+    }
+
+    /* Indentation based on depth */
+    li {
+      padding-left: 1.5rem;
+    }
+
+    li.folder.nested {
+      padding-top: 2.25rem;
+      padding-bottom: 0.625rem;
+      border-left: 1px solid #64748B;
+    }
+
+    li.folder.root {
+      padding-top: 3rem;
+      border: none;
+    }
+
+    li.file {
+      border-left: 1px solid #64748B;
+    }
+
+    li.file.nested {
+      line-height: 2.25rem;
+    }
+
+    li.file.nested a {
+      padding-bottom: 0.75rem;
+      margin-left: -1.5rem;
+      padding-left: 1.5rem;
+      border-left: 1px solid #cbd5e1;
+    }
+
+    li.file.nested:last-child a {
+      padding-bottom: 0;
+    }
+
+    .insignia {
+      width: 64rem;
+      position: fixed;
+      z-index: -1;
+      right: -3rem;
+      bottom: 0;
+    }
+
+    @media (max-width: 425px) {
+      .insignia {
+        width: 100%;
+      }
+    }
+  </style>
 </head>
 <body>
-  <each loop="items, index in templates">
-    <div>
-      <h2>{{ index }}</h2>
-      <ul>
-        <each loop="item in items">
-          <li>
-            <a href="{{ item.href }}">
-              {{ item.base }}
-            </a>
-          </li>
-        </each>
-      </ul>
-    </div>
-  </each>
+  <ul>
+    <each loop="item in paths">
+      <if condition="item.type === 'folder'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="folder {{ item.depth > 0 ? 'nested' : 'root' }}"
+        >
+          <strong>{{{ item.name }}}</strong>
+        </li>
+      </if>
+      <if condition="item.type === 'file'">
+        <li
+          style="padding-left: calc(1.5rem * {{ item.depth }});"
+          class="file {{ item.depth > 1 ? 'nested' : '' }}"
+        >
+          <a href="{{ item.href }}">
+            {{ item.name }}
+          </a>
+        </li>
+      </if>
+    </each>
+  </ul>
+
+  <svg fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 993 483" class="insignia"><mask id="a" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="993" height="483"><path fill="#D9D9D9" d="M0 0h993v483H0z"></path></mask><g mask="url(#a)" stroke="#e2e8f0" stroke-miterlimit="10"><path d="M954.124 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816ZM583.379 81.816c0-45.163-39.678-81.774-88.624-81.774-48.945 0-88.624 36.611-88.624 81.774v436.13c0 45.163 39.679 81.775 88.624 81.775 48.946 0 88.624-36.612 88.624-81.775V81.816Z"></path><path d="M935.39 132.185c30.161-35.57 23.362-86.965-15.187-114.795S825.954-4.165 795.794 31.404L425.713 467.848c-30.161 35.57-23.361 86.965 15.187 114.795 38.549 27.829 94.249 21.555 124.41-14.014l370.08-436.444ZM564.288 132.196c30.161-35.569 23.362-86.964-15.187-114.794S454.852-4.154 424.692 31.416L54.611 467.86c-30.16 35.569-23.361 86.965 15.187 114.794 38.549 27.83 94.249 21.556 124.41-14.013l370.08-436.445Z"></path></g></svg>
 </body>
 </html>

package/src/transformers/inline.js

@@ -2,11 +2,11 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
-import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
 import { calc } from '@csstools/css-calc'
 import isEmpty from 'lodash-es/isEmpty.js'
+import * as cheerio from 'cheerio/lib/slim'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'

package/types/css/inline.d.ts

@@ -85,6 +85,8 @@ export default interface InlineCSSConfig {
    * Prefer HTML `width` and `height` attributes over inline CSS.
    * The inline CSS `width` and `height` will be removed.
    *
+   * Applies to elements set in `widthElements` and `heightElements`.
+   *
    * @example
    * ```
    * export default {