标签： frontend

function matcher(decorator: MatchDecorator): Extension {
  return ViewPlugin.define(view => ({
    decorations: decorator.createDeco(view),
    update(u): void {
      this.decorations = decorator.updateDeco(u, this.decorations);
    },
  }), {
    decorations: v => v.decorations,
  });
}

import { Decoration, EditorView, MatchDecorator, ViewPlugin } from '@codemirror/view';
import { Extension } from '@uiw/react-codemirror';

function matcher(decorator: MatchDecorator): Extension {
  return ViewPlugin.define(view => ({
    decorations: decorator.createDeco(view),
    update(u): void {
      this.decorations = decorator.updateDeco(u, this.decorations);
    },
  }), {
    decorations: v => v.decorations,
  });
}

export const HighlightMark = Decoration.mark({
  class: 'md-highlight',
});

const mdMarkSyntaxMatcher = new MatchDecorator({
  regexp: /==[^=]+==/g,
  decoration: HighlightMark,
});

const mdMarkSyntaxStyling = matcher(mdMarkSyntaxMatcher);

import { Diagnostic } from '@codemirror/lint';
import { BehaviorSubject } from 'rxjs';

const diagnostics$ = new BehaviorSubject<Diagnostic[]>([]);

const invalidMetric = linter(async view => {
  const diagnostics: Diagnostic[] = await yourLinter(view);
  diagnostics$.next(diagnostics);
  return diagnostics;
});

class PlaceholderWidget extends WidgetType {
  constructor(string, private from: number, private to: number) {
    super();
  }

  toDOM(view: EditorView): HTMLElement {
    const span = document.createElement('span');
    span.innerHTML = renderYourWidget(view);
    // @ts-expect-error add destroy$ to span
    span.destory$ = diagnostics$.subscribe(diagnostics => {
      const error = diagnostics.find(d => d.from >= this.from && d.to <= this.to);
      if (error) {
        span.classList.add('cm-widget-error');
      } else {
        span.classList.remove('cm-widget-error');
      }
    });
    return span;
  }

  destroy(el: HTMLSpanElement) {
    // @ts-ignore
    if (el.destory$) {
      // @ts-ignore
      el.destory$.unsubscribe();
    }
  }
}

const placeholderMatcher = new MatchDecorator({
  regexp: /#[0-9A-Za-z_]+/g,
  decorate: (add, from, to, match) => {
    const deco = Decoration.replace({
      widget: new PlaceholderWidget(from, to),
    });
    add(from, to, deco);
  },
});
const placeholders = ViewPlugin.fromClass(class {
  placeholders: DecorationSet;

  constructor(view: EditorView) {
    this.placeholders = placeholderMatcher.createDeco(view);
  }

  update(update: ViewUpdate) {
    this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
  }
}, {
  decorations: instance => instance.placeholders,
  provide: plugin => EditorView.atomicRanges.of(view => {
    return view.plugin(plugin)?.placeholders || Decoration.none;
  }),
});

npx degit kometolabs/vite-tailwind-nojs-starter email-template

import { resolve } from "path";
import { defineConfig } from "vite";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

function optimizeSvgPlugin() {
  if (!!process.env.OPTIMIZE_IMAGES) {
    return ViteImageOptimizer({
      svgo: {
        plugins: [{ removeViewBox: false }, { removeDimensions: true }],
      },
    });
  }
}

export default defineConfig(() => ({
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    // avoid inlining images
    assetsInlineLimit: () => false,
    rollupOptions: {
      input: {
        page1: resolve(__dirname, "src", "page1.html"),
        page2: resolve(__dirname, "src", "page2.html"),
      },
      output: {
        // avoid hash in assets filename
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split(".");
          let extType = info[info.length - 1];

          // Explicitly handle image files
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = "img";
            // Return the original filename without hashing
            return `assets/${extType}/[name][extname]`;
          }

          // For other asset types, you can keep the default hashing behavior
          return `assets/${extType}/[name]-[hash][extname]`;
        },
      },
    },
  },
  root: "src",
  plugins: [optimizeSvgPlugin()],
}));

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

// convert all `{{ foo }}` to `<%= foo %>`

function convertToEjs(content: string) {
  return content.replace(/{{\s*(\w+?)\s*}}/g, "<%= $1 %>");
}

/**
 * Convert /assets/img/foo-bar.svg to cid:foo-bar
 * @param content
 */
function toCidReference(content: string): string {
  return content.replace(/\/assets\/img\/([a-zA-Z0-9-)]+?)\.(svg|png|jpg|jpeg)/g, "cid:$1");
}

const files = await glob(dir + "/**/*.html");

for (const filename of files) {
  const content = await fs.readFile(filename, "utf-8");
  const dirOfFile = path.dirname(filename);
  const newContent = toCidReference(convertToEjs(content));
  const newFilename = path.join(
    dirOfFile,
    path.basename(filename, ".html") + ".ejs",
  );

  await fs.writeFile(newFilename, newContent);
  echo(chalk.green(`Converted ${filename} to ${newFilename}`));
}

#!/usr/bin/bash
OPTIMIZE_IMAGES=true yarn build
cp ./dist/assets/img/* ./assets/img/
npx tsx ./scripts/to-ejs-template.ts --dir ./dist