npm - @maizzle/framework - Versions diffs - 4.8.7 → 5.0.0-beta.0 - Mend

@maizzle/framework 4.8.7 → 5.0.0-beta.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 (80) hide show

package/bin/maizzle +3 -1
package/package.json +65 -58
package/src/commands/build.js +244 -19
package/src/commands/serve.js +2 -197
package/src/generators/plaintext.js +192 -91
package/src/generators/render.js +128 -0
package/src/index.js +46 -14
package/src/{generators/posthtml → posthtml}/defaultComponentsConfig.js +6 -4
package/src/{generators/posthtml → posthtml}/defaultConfig.js +1 -1
package/src/posthtml/index.js +74 -0
package/src/posthtml/plugins/expandLinkTag.js +36 -0
package/src/server/client.js +181 -0
package/src/server/index.js +383 -0
package/src/server/routes/hmr.js +24 -0
package/src/server/routes/index.js +38 -0
package/src/server/views/error.html +83 -0
package/src/server/views/index.html +24 -0
package/src/server/websockets.js +27 -0
package/src/transformers/addAttributes.js +30 -0
package/src/transformers/attributeToStyle.js +30 -36
package/src/transformers/baseUrl.js +52 -23
package/src/transformers/comb.js +51 -0
package/src/transformers/core.js +20 -0
package/src/transformers/filters/defaultFilters.js +90 -70
package/src/transformers/filters/index.js +14 -78
package/src/transformers/index.js +268 -63
package/src/transformers/inline.js +240 -0
package/src/transformers/markdown.js +13 -14
package/src/transformers/minify.js +21 -16
package/src/transformers/posthtmlMso.js +13 -8
package/src/transformers/prettify.js +16 -15
package/src/transformers/preventWidows.js +32 -26
package/src/transformers/removeAttributes.js +17 -17
package/src/transformers/replaceStrings.js +30 -9
package/src/transformers/safeClassNames.js +24 -24
package/src/transformers/shorthandCss.js +22 -0
package/src/transformers/sixHex.js +15 -15
package/src/transformers/urlParameters.js +18 -16
package/src/transformers/useAttributeSizes.js +65 -0
package/src/utils/getConfigByFilePath.js +124 -0
package/src/utils/node.js +68 -0
package/src/utils/string.js +117 -0
package/types/build.d.ts +117 -57
package/types/components.d.ts +130 -112
package/types/config.d.ts +454 -242
package/types/css/inline.d.ts +234 -0
package/types/css/purge.d.ts +125 -0
package/types/events.d.ts +5 -105
package/types/index.d.ts +148 -116
package/types/markdown.d.ts +20 -18
package/types/minify.d.ts +122 -120
package/types/plaintext.d.ts +46 -52
package/types/posthtml.d.ts +103 -136
package/types/render.d.ts +0 -117
package/types/urlParameters.d.ts +21 -20
package/types/widowWords.d.ts +9 -7
package/src/functions/plaintext.js +0 -5
package/src/functions/render.js +0 -5
package/src/generators/config.js +0 -52
package/src/generators/output/index.js +0 -4
package/src/generators/output/to-disk.js +0 -254
package/src/generators/output/to-string.js +0 -73
package/src/generators/postcss.js +0 -23
package/src/generators/posthtml/index.js +0 -75
package/src/generators/tailwindcss.js +0 -157
package/src/transformers/extraAttributes.js +0 -33
package/src/transformers/inlineCss.js +0 -42
package/src/transformers/removeInlineBackgroundColor.js +0 -56
package/src/transformers/removeInlineSizes.js +0 -43
package/src/transformers/removeInlinedSelectors.js +0 -100
package/src/transformers/removeUnusedCss.js +0 -48
package/src/transformers/shorthandInlineCSS.js +0 -26
package/src/utils/helpers.js +0 -13
package/types/baseUrl.d.ts +0 -79
package/types/fetch.d.ts +0 -143
package/types/inlineCss.d.ts +0 -207
package/types/layouts.d.ts +0 -39
package/types/removeUnusedCss.d.ts +0 -115
package/types/tailwind.d.ts +0 -22
package/types/templates.d.ts +0 -181

package/src/server/client.js ADDED Viewed

@@ -0,0 +1,181 @@
+// biome-ignore lint: need it globally
+var lastKnownScrollPosition = 0
+function connectWebSocket() {
+  if (!('WebSocket' in window)) {
+    return
+  }
+  const { hostname, port } = window.location
+  const socket = new WebSocket(`ws://${hostname}:${port}`)
+  /**
+   * Synchronized scrolling
+   * Sends the scroll position to the server
+   */
+  function handleScroll() {
+    socket.send(JSON.stringify({
+      type: 'scroll',
+      position: window.scrollY
+    }))
+  }
+  function scrollHandler() {
+    lastKnownScrollPosition = window.scrollY
+    requestAnimationFrame(handleScroll)
+  }
+  window.addEventListener('scroll', scrollHandler)
+  socket.addEventListener('message', async event => {
+    const data = JSON.parse(event.data)
+    if (data.type === 'scroll' && data.scrollSync === true) {
+      window.scrollTo(0, data.position)
+    }
+    if (data.type === 'change') {
+      if (data.hmr === true) {
+        // Use morphdom to update the existing DOM with the new content
+        morphdom(document.documentElement, data.content, {
+          childrenOnly: true,
+          onBeforeElUpdated(fromEl, toEl) {
+            // Speed-up trick from morphdom docs - https://dom.spec.whatwg.org/#concept-node-equals
+            if (fromEl.isEqualNode(toEl)) {
+              return false
+            }
+            return true
+          },
+          onElUpdated(el) {
+            // Handle broken images updates, like incorrect file paths
+            if (el.tagName === 'IMG' && !el.complete) {
+              const img = new Image()
+              img.src = el.src
+              el.src = ''
+              img.onload = () => {
+                el.src = img.src
+              }
+            }
+          },
+        })
+      } else {
+        // Reload the page
+        window.location.reload()
+      }
+      /**
+       * Fix for attributes not being updated on <html> tag
+       * Borrowed from https://github.com/11ty/eleventy-dev-server/
+       */
+      const parser = new DOMParser()
+      const parsed = parser.parseFromString(data.content, 'text/html')
+      const parsedDoc = parsed.documentElement
+      const newAttrs = parsedDoc.getAttributeNames()
+      const docEl = document.documentElement
+      // Remove old attributes
+      const removedAttrs = docEl.getAttributeNames().filter(name => !newAttrs.includes(name))
+      for (const attr of removedAttrs) {
+        docEl.removeAttribute(attr)
+      }
+      // Add new attributes
+      for (const attr of newAttrs) {
+        docEl.setAttribute(attr, parsedDoc.getAttribute(attr))
+      }
+    }
+    if (['add', 'unlink'].includes(data.type)) {
+      if (data.hmr === true) {
+        const randomNumber = Math.floor(Math.random() * 10 ** 16).toString().padStart(16, '0')
+        /**
+         * Cache busting for images
+         *
+         * Appends a `?v=` cache-busting parameter to image sources
+         * every time a file is added or removed. This forces the
+         * browser to re-download the image and immediately
+         * reflect the changes through HMR.
+         */
+        // For all elements with `src` attributes
+        const srcElements = document.querySelectorAll('[src]')
+        srcElements.forEach(el => {
+          // Update the value of 'v' parameter if it already exists
+          if (el.src.includes('?')) {
+            el.src = el.src.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`)
+          } else {
+            // Add 'v' parameter
+            el.src += `?v=${randomNumber}`
+          }
+        })
+        // For `background` attributes
+        const htmlBgElements = document.querySelectorAll('[background]')
+        htmlBgElements.forEach(el => {
+          const bgValue = el.getAttribute('background')
+          if (bgValue) {
+            // Update the value of 'v' parameter if it already exists
+            if (bgValue.includes('?')) {
+              el.setAttribute('background', bgValue.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`))
+            } else {
+              // Add 'v' parameter
+              el.setAttribute('background', `${bgValue}?v=${randomNumber}`)
+            }
+          }
+        })
+        // For inline CSS `background` properties
+        const styleElements = document.querySelectorAll('[style]')
+        styleElements.forEach(el => {
+          const styleAttribute = el.getAttribute('style')
+          if (styleAttribute) {
+            const urlPattern = /(url\(["']?)(.*?)(["']?\))/g
+            // Replace URLs in style attribute with cache-busting parameter
+            const updatedStyleAttribute = styleAttribute.replace(urlPattern, (match, p1, p2, p3) => {
+              // Update the value of 'v' parameter if it already exists
+              if (p2.includes('?')) {
+                  return `${p1}${p2.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`)}${p3}`
+              }
+              // Add 'v' parameter
+              return `${p1}${p2}?v=${randomNumber}${p3}`
+            })
+            // Update style attribute
+            el.setAttribute('style', updatedStyleAttribute)
+          }
+        })
+      } else {
+        // Reload the page
+        window.location.reload()
+      }
+    }
+  })
+  socket.addEventListener('close', () => {
+    window.removeEventListener('scroll', scrollHandler)
+    // debug only:
+    console.log('WebSocket connection closed. Reconnecting...')
+    // Reconnect after a short delay
+    setTimeout(() => {
+      connectWebSocket()
+    }, 1000)
+  })
+  // Handle connection opened
+  socket.addEventListener('open', event => {
+    console.log('WebSocket connection opened')
+  })
+  return socket
+}
+connectWebSocket()

package/src/server/index.js ADDED Viewed

@@ -0,0 +1,383 @@
+import path from 'pathe'
+import fs from 'node:fs/promises'
+import { createServer } from 'node:http'
+import { cwd, exit } from 'node:process'
+import { fileURLToPath } from 'node:url'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+import ora from 'ora'
+import fg from 'fast-glob'
+import express from 'express'
+import pico from 'picocolors'
+import get from 'lodash-es/get.js'
+import * as chokidar from 'chokidar'
+import { isBinary } from 'istextorbinary'
+import WebSocket, { WebSocketServer } from 'ws'
+import { initWebSockets } from './websockets.js'
+import {
+  getLocalIP,
+  getColorizedFileSize,
+} from '../utils/node.js'
+import { injectScript, formatTime } from '../utils/string.js'
+import { render } from '../generators/render.js'
+import { readFileConfig } from '../utils/getConfigByFilePath.js'
+import defaultComponentsConfig from '../posthtml/defaultComponentsConfig.js'
+// Routes
+import hmrRoute from './routes/hmr.js'
+import indexRoute from './routes/index.js'
+const app = express()
+const wss = new WebSocketServer({ noServer: true })
+// Register routes
+app.use(indexRoute)
+app.use(hmrRoute)
+let viewing = ''
+const spinner = ora()
+export default async (config = {}) => {
+  // Read the Maizzle config file
+  config = await readFileConfig(config).catch(() => { throw new Error('Could not compute config') })
+  /**
+   * Dev server settings
+   */
+  const shouldScroll = get(config, 'server.scrollSync', false)
+  const useHmr = get(config, 'server.hmr', true)
+  // Add static assets root prefix so user doesn't have to
+  if (!config.baseURL) {
+    config.baseURL = '/'
+  }
+  /**
+   * Initialize WebSocket server
+   * Used to send messages between the server and the browser
+   */
+  initWebSockets(wss, { scrollSync: shouldScroll, hmr: useHmr })
+  // Get a list of all template paths
+  const templateFolders = Array.isArray(get(config, 'build.content'))
+    ? config.build.content
+    : [config.build.content]
+  const templatePaths = await fg.glob([...new Set(templateFolders)])
+  // Set the template paths on the app, we use them in the index view
+  app.request.templatePaths = templatePaths
+  /**
+   * Create route pattern
+   * Only allow files with the following extensions
+   */
+  const extensions = [
+    ...new Set(templatePaths
+      .filter(p => !isBinary(p)) // exclude binary files from routes
+      .map(p => path.extname(p).slice(1).toLowerCase())
+    )
+  ].join('|')
+  const routePattern = Array.isArray(templateFolders)
+    ? `*/:file.(${extensions})`
+    : `:file.(${extensions})`
+  /**
+   * Loop over the source folders and create route for each file
+   */
+  templatePaths.forEach(() => {
+    app.get(routePattern, async (req, res, next) => {
+      // Run beforeCreate event
+      if (typeof config.beforeCreate === 'function') {
+        config.beforeCreate(config)
+      }
+      try {
+        const filePath = templatePaths.find(t => t.endsWith(req.url.slice(1)))
+        // Set the file being viewed
+        viewing = filePath
+        // Read the file
+        const fileContent = await fs.readFile(filePath, 'utf8')
+        // Set a `dev` flag on the config
+        config._dev = true
+        // Render the file with PostHTML
+        let { html } = await render(fileContent, config)
+        /**
+         * Inject HMR script
+         */
+        html = injectScript(html, '<script src="/hmr.js"></script>')
+        res.send(html)
+      } catch (error) {
+        spinner.fail(`Failed to render template: ${req.url}\n`)
+        next(error)
+      }
+    })
+  })
+  // Error-handling middleware
+  app.use(async (error, req, res, next) => { // eslint-disable-line
+    console.error(error)
+    const view = await fs.readFile(path.join(__dirname, 'views', 'error.html'), 'utf8')
+    const { html } = await render(view, {
+      method: req.method,
+      url: req.url,
+      error
+    })
+    res.status(500).send(html)
+  })
+  /**
+   * Components watcher
+   *
+   * Watches for changes in the configured Templates and Components paths
+   */
+  chokidar
+    .watch([...templatePaths, ...get(config, 'components.folders', defaultComponentsConfig.folders) ])
+    .on('change', async () => {
+      // Not viewing a component in the browser, no need to rebuild
+      if (!viewing) {
+        return
+      }
+      try {
+        const startTime = Date.now()
+        spinner.start('Building...')
+        // beforeCreate event
+        if (typeof config.beforeCreate === 'function') {
+          await config.beforeCreate(config)
+        }
+        // Read the file
+        const fileContent = await fs.readFile(viewing, 'utf8')
+        // Set a `dev` flag on the config
+        config._dev = true
+        // Render the file with PostHTML
+        let { html } = await render(fileContent, config)
+        // Update console message
+        const shouldReportFileSize = get(config, 'server.reportFileSize', false)
+        spinner.succeed(
+          `Done in ${formatTime(Date.now() - startTime)}`
+          + `${pico.gray(` [${path.relative(cwd(), viewing)}]`)}`
+          + `${ shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
+        )
+        /**
+         * Inject HMR script
+         */
+        html = injectScript(html, '<script src="/hmr.js"></script>')
+        // Notify connected websocket clients about the change
+        wss.clients.forEach(client => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify({
+              type: 'change',
+              content: html,
+              scrollSync: get(config, 'server.scrollSync', false),
+              hmr: get(config, 'server.hmr', true),
+            }))
+          }
+        })
+      } catch (error) {
+        spinner.fail('Failed to render template.')
+        throw error
+      }
+    })
+  /**
+   * Global watcher
+   *
+   * Watch for changes in the config file, Tailwind CSS config, and CSS files
+   */
+  const globalWatchedPaths = new Set([
+    'config*.js',
+    'maizzle.config*.js',
+    'tailwind*.config.js',
+    '**/*.css',
+    ...get(config, 'server.watch', [])
+  ])
+  async function globalPathsHandler(file, eventType) {
+    // Not viewing a component in the browser, no need to rebuild
+    if (!viewing) {
+      spinner.info(`file ${eventType}: ${file}`)
+      return
+    }
+    try {
+      const startTime = Date.now()
+      spinner.start('Building...')
+      // Read the Maizzle config file
+      config = await readFileConfig()
+      // Add static assets root prefix so user doesn't have to
+      if (!config.baseURL) {
+        config.baseURL = '/'
+      }
+      // Run beforeCreate event
+      if (typeof config.beforeCreate === 'function') {
+        await config.beforeCreate(config)
+      }
+      // Read the file
+      const filePath = templatePaths.find(t => t.endsWith(viewing))
+      const fileContent = await fs.readFile(path.normalize(filePath), 'utf8')
+      // Set a `dev` flag on the config
+      config._dev = true
+      // Render the file with PostHTML
+      let { html } = await render(fileContent, config)
+      // Update console message
+      const shouldReportFileSize = get(config, 'server.reportFileSize', false)
+      spinner.succeed(
+        `Done in ${formatTime(Date.now() - startTime)}`
+        + `${pico.gray(` [${path.relative(cwd(), filePath)}]`)}`
+        + `${ shouldReportFileSize ? ' · ' + getColorizedFileSize(html) : ''}`
+      )
+      /**
+       * Inject HMR script
+       */
+      html = injectScript(html, '<script src="/hmr.js"></script>')
+      // Notify connected websocket clients about the change
+      wss.clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(JSON.stringify({
+            type: eventType,
+            content: html,
+            scrollSync: get(config, 'server.scrollSync', false),
+            hmr: get(config, 'server.hmr', true),
+          }))
+        }
+      })
+    } catch (error) {
+      spinner.fail('Failed to render template.')
+      throw error
+    }
+  }
+  chokidar
+    .watch([...globalWatchedPaths], {
+      ignored: [
+        'node_modules',
+        get(config, 'build.output.path', 'build_production'),
+      ],
+      ignoreInitial: true,
+    })
+    .on('change', async file => await globalPathsHandler(file, 'change'))
+    .on('add', async file => await globalPathsHandler(file, 'add'))
+    .on('unlink', async file => await globalPathsHandler(file, 'unlink'))
+  /**
+   * Serve all folders in the cwd as static files
+   *
+   * TODO: change to include build.assets or build.static, which may be outside cwd
+   */
+  const srcFoldersList = await fg.glob(
+    [
+      '**/*/',
+      ...get(config, 'build.static.source', [])
+    ], {
+      onlyFiles: false,
+      ignore: [
+        'node_modules',
+        get(config, 'build.output.path', 'build_*'),
+      ]
+    })
+  srcFoldersList.forEach(folder => {
+    app.use(express.static(path.join(config.cwd, folder)))
+  })
+  /**
+   * Start the server
+   */
+  let retryCount = 0
+  const port = get(config, 'server.port', 3000)
+  const maxRetries = get(config, 'server.maxRetries', 10)
+  function startServer(port) {
+    const serverStartTime = Date.now()
+    spinner.start('Starting server...')
+    const server = createServer(app)
+    /**
+     * Handle WebSocket upgrades
+     * Attaches the WebSocket server to the Express server.
+     */
+    server.on('upgrade', (request, socket, head) => {
+      wss.handleUpgrade(request, socket, head, ws => {
+        wss.emit('connection', ws, request)
+      })
+    })
+    server.listen(port, async () => {
+      const { version } = JSON.parse(
+        await fs.readFile(
+          new URL('../../package.json', import.meta.url)
+        )
+      )
+      spinner.stopAndPersist({
+        text: `${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(Date.now() - serverStartTime)} ms`
+          + '\n\n'
+          + `  → Local:   http://localhost:${port}`
+          + '\n'
+          + `  → Network: http://${getLocalIP()}:${port}\n`
+      })
+    })
+    server.on('error', error => {
+      try {
+        if (error.code === 'EADDRINUSE') {
+          server.close()
+          retryPort()
+        }
+      } catch (error) {
+        spinner.fail(error.message)
+        exit(1)
+      }
+    })
+    return server
+  }
+  function retryPort() {
+    retryCount++
+    if (retryCount <= maxRetries) {
+      const nextPort = port + retryCount
+      startServer(nextPort)
+    } else {
+      spinner.fail(`Exceeded maximum number of retries (${maxRetries}). Unable to find a free port.`)
+      exit(1)
+    }
+  }
+  startServer(port)
+}

package/src/server/routes/hmr.js ADDED Viewed

@@ -0,0 +1,24 @@
+import express from 'express'
+const router = express.Router()
+import fs from 'node:fs/promises'
+import { dirname, join } from 'pathe'
+import { fileURLToPath } from 'node:url'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+router.get('/hmr.js', async (req, res) => {
+  const morphdomScript = await fs.readFile(
+    join(__dirname, '../../../node_modules/morphdom/dist/morphdom-umd.js'),
+    'utf8'
+  )
+  const clientScript = await fs.readFile(
+    join(__dirname, '../client.js'),
+    'utf8'
+  )
+  res.setHeader('Content-Type', 'application/javascript')
+  res.send(morphdomScript + clientScript)
+})
+export default router

package/src/server/routes/index.js ADDED Viewed

@@ -0,0 +1,38 @@
+import path from 'pathe'
+import express from 'express'
+const route = express.Router()
+import posthtml from 'posthtml'
+import fs from 'node:fs/promises'
+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')
+  // Group by `dir`
+  const groupedByDir = {}
+  req.templatePaths
+    .map(t => path.parse(t))
+    .forEach(file => {
+      if (!groupedByDir[file.dir]) {
+        groupedByDir[file.dir] = []
+      }
+      file.href = [file.dir.replace(file.root, ''), file.base].join('/')
+      groupedByDir[file.dir].push(file)
+    })
+  const { html } = await posthtml()
+    .use(expressions({
+      locals: {
+        templates: groupedByDir
+      }
+    }))
+    .process(view)
+  res.send(html)
+})
+export default route

package/src/server/views/error.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Error</title>
+  <style>
+    body {
+      font-family: Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+      padding: 24px;
+    }
+    .stack-trace-wrapper {
+      width: 100%;
+      max-width: 90ch;
+      margin-top: 2.25rem;
+    }
+    .stack-trace {
+      overflow-x: auto;
+      padding: 24px;
+      border-radius: 4px;
+      text-align: left;
+      font-size: 1rem;
+      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
+      border-left: 4px solid #FB7185;
+      background-color: rgba(248, 250, 252, 0.7);
+      backdrop-filter: blur(4px);
+      font-family: 'Courier New', Courier, monospace;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 style="font-size: 3rem; color: #0F172A; margin: 2.25rem 0">
+      <span style="color: #4f46e5">Oops!</span>
+      Something went wrong.
+    </h1>
+    <p style="margin: 0 0 2.25rem; font-size: 1.25rem; line-height: 1.5; color: #64748B;">
+      {{ page.error.message }}
+    </p>
+    <span style="padding: 2px 12px; font-size: 1rem; line-height: 1.5; color: #fff; background-color: #64748B; border-radius: 8px;">
+      {{ page.method }}
+    </span>
+    <p style="margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #334155;">
+      {{ page.url }}
+    </p>
+    <if condition="page.error.code">
+      <p style="margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #334155;">
+        {{ page.error.code }}
+      </p>
+    </if>
+    <div class="stack-trace-wrapper">
+      <div class="stack-trace">
+        <each loop="line, index in page.error.stack.split('\n')">
+          <p>{{{ line }}}</p>
+        </each>
+      </div>
+    </div>
+  </div>
+  <div style="position: fixed; bottom: 0; right: 0; pointer-events: none; user-select: none;">
+    <svg width="883" height="536" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1100" height="536"><path fill="#D9D9D9" d="M0 .955h1100V536H0z"/></mask><g mask="url(#a)" stroke="#94A3B8" stroke-miterlimit="10"><path d="M1056.93 92.587c0-50.03-43.95-90.587-98.168-90.587-54.22 0-98.174 40.557-98.174 90.587v483.125c0 50.029 43.954 90.586 98.174 90.586 54.218 0 98.168-40.557 98.168-90.586V92.587ZM646.241 92.587C646.241 42.556 602.287 2 548.067 2c-54.219 0-98.173 40.557-98.173 90.587v483.125c0 50.029 43.954 90.586 98.173 90.586 54.22 0 98.174-40.557 98.174-90.586V92.587Z"/><path d="M1036.18 148.383c33.41-39.402 25.88-96.336-16.82-127.164C976.657-9.61 914.955-2.66 881.544 36.742L471.586 520.215c-33.411 39.402-25.879 96.336 16.824 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.955-483.473ZM625.093 148.396c33.411-39.403 25.878-96.336-16.824-127.164C565.567-9.597 503.865-2.647 470.454 36.755L60.495 520.228c-33.41 39.402-25.878 96.336 16.825 127.164 42.702 30.829 104.404 23.879 137.815-15.523l409.958-483.473Z"/></g></svg>
+  </div>
+</body>
+</html>