added features block

src/blocks/features/features.ts

@@ -0,0 +1,37 @@
+import { html, render } from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+interface Feature {
+  icon: string;
+  textBlock: string;
+}
+
+type TemplateArgs = Feature[];
+
+const template = (features: TemplateArgs) => {
+  return html`
+    ${features.map(
+      (feature) => html`
+        <article>
+          <span class="icon fa-gem">${feature.icon}</span>
+          <div class="content">${unsafeHTML(feature.textBlock)}</div>
+        </article>
+      `
+    )}
+  `;
+};
+
+export default function (block: HTMLElement) {
+  const rows = block.querySelectorAll(':scope > div');
+  let features: Feature[] = [];
+  [...rows].forEach((row) => {
+    const icon = row.children[0].innerHTML;
+    const textBlock = row.children[1].innerHTML;
+    features.push({ icon, textBlock });
+  });
+
+  block.innerHTML = '';
+
+  block.style.removeProperty('display');
+  render(template(features), block);
+}

types/blocks/features/features.d.ts

@@ -0,0 +1 @@
+export default function (block: HTMLElement): void;

vite.config.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from "vite";
-import minifyHTML from "rollup-plugin-minify-html-literals";
+import { defineConfig } from 'vite';
+import minifyHTML from 'rollup-plugin-minify-html-literals';
 
-const { resolve } = require("path");
+const { resolve } = require('path');
 
-const isProd = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV === 'production';
 
 export default defineConfig(({ command, mode }) => {
   return {
@@ -15,25 +15,26 @@ export default defineConfig(({ command, mode }) => {
       minify: true,
       cssMinify: true,
       commonjsOptions: {
-        include: ["node_modules/**"],
+        include: ['node_modules/**'],
       },
       emptyOutDir: true,
       rollupOptions: {
         cache: false,
-        preserveEntrySignatures: "strict",
+        preserveEntrySignatures: 'strict',
         input: {
-          styles: resolve(__dirname, "src/styles/sass/main.scss"),
-          main: resolve(__dirname, "src/main.ts"),
-          counter: resolve(__dirname, "src/blocks/counter/counter.ts"),
-          banner: resolve(__dirname, "src/blocks/banner/banner.ts"),
+          styles: resolve(__dirname, 'src/styles/sass/main.scss'),
+          main: resolve(__dirname, 'src/main.ts'),
+          counter: resolve(__dirname, 'src/blocks/counter/counter.ts'),
+          banner: resolve(__dirname, 'src/blocks/banner/banner.ts'),
+          features: resolve(__dirname, 'src/blocks/features/features.ts'),
         },
         output: {
-          dir: "dist",
+          dir: 'dist',
           assetFileNames: () => {
-            return "[name]/[name][extname]";
+            return '[name]/[name][extname]';
           },
-          chunkFileNames: "__chunks__/[name].[hash].js",
-          entryFileNames: "[name]/[name].js",
+          chunkFileNames: '__chunks__/[name].[hash].js',
+          entryFileNames: '[name]/[name].js',
         },
         plugins: [isProd && minifyHTML()],
       },