live-codes · hatemhosny · Mar 24, 2025 · Mar 24, 2025 · Mar 24, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -121,7 +121,7 @@
     "cross-env": "7.0.3",
     "dts-bundle": "0.7.3",
     "esbuild": "0.20.2",
-    "esbuild-plugin-minify-html": "0.1.1",
+    "esbuild-plugin-minify-html": "0.1.2",
     "esbuild-plugin-replace": "1.4.0",
     "eslint": "9.20.1",
     "eslint-config-prettier": "10.0.1",

diff --git a/scripts/build.js b/scripts/build.js
@@ -1,5 +1,5 @@
 const esbuild = require('esbuild');
-const minifyHTML = require('esbuild-plugin-minify-html').default;
+const { minify: minifyHTML, default: minifyHTMLPlugin } = require('esbuild-plugin-minify-html');
 const fs = require('fs');
 const path = require('path');
 
@@ -11,7 +11,27 @@ const { arrToObj, mkdir, uint8arrayToString, iife, getFileNames, getEnvVars } =
 
 const args = process.argv.slice(2);
 const devMode = args.includes('--dev');
-const outDir = path.resolve(__dirname + '/../build');
+const root = path.resolve(__dirname + '/..');
+const outDir = path.resolve(root, 'build');
+
+const minifyHTMLOptions = {
+  collapseWhitespace: true,
+  collapseBooleanAttributes: true,
+  minifyJS: true,
+  minifyCSS: true,
+  processScripts: ['importmap'],
+};
+
+const copyFile = async (filePath, outputName) => {
+  const src = path.resolve(root, filePath);
+  const dist = path.resolve(outDir, outputName);
+  if (devMode || !filePath.endsWith('.html')) {
+    return fs.promises.copyFile(src, dist);
+  }
+  const content = await fs.promises.readFile(src, 'utf8');
+  const minified = await minifyHTML(content, minifyHTMLOptions);
+  fs.writeFileSync(dist, minified, 'utf8');
+};
 
 const prepareDir = async () => {
   mkdir(outDir);
@@ -22,30 +42,14 @@ const prepareDir = async () => {
   }
   const fileNames = await getFileNames(outDir + '/livecodes/');
   await Promise.all(fileNames.map(async (f) => fs.promises.unlink(outDir + '/livecodes/' + f)));
-
-  if (process.env.CF_PAGES) {
+  await Promise.all([
     // add headers in Cloudflare
-    await fs.promises.copyFile(
-      path.resolve(__dirname + '/../src/_headers'),
-      path.resolve(outDir + '/_headers'),
-    );
-  }
-  await fs.promises.copyFile(
-    path.resolve(__dirname + '/../src/favicon.ico'),
-    path.resolve(outDir + '/favicon.ico'),
-  );
-  await fs.promises.copyFile(
-    path.resolve(__dirname + '/../src/404.html'),
-    path.resolve(outDir + '/404.html'),
-  );
-  await fs.promises.copyFile(
-    path.resolve(__dirname + '/../src/index.html'),
-    path.resolve(outDir + '/index.html'),
-  );
-  await fs.promises.copyFile(
-    path.resolve(__dirname + '/../src/livecodes/html/app-base.html'),
-    path.resolve(outDir + '/app.html'),
-  );
+    process.env.CF_PAGES ? copyFile('src/_headers', '_headers') : Promise.resolve(),
+    copyFile('src/favicon.ico', 'favicon.ico'),
+    copyFile('src/404.html', '404.html'),
+    copyFile('src/index.html', 'index.html'),
+    copyFile('src/livecodes/html/app-base.html', 'app.html'),
+  ]);
 };
 
 /** @type {Partial<esbuild.BuildOptions>} */
@@ -63,32 +67,19 @@ const baseOptions = {
   loader: { '.html': 'text', '.ttf': 'file' },
   logLevel: 'error',
   external: ['codemirror', '@codemirror/*', '@lezer/*', '@replit/codemirror-*'],
-  plugins: [
-    ...(devMode
-      ? []
-      : [
-          minifyHTML({
-            collapseWhitespace: true,
-            collapseBooleanAttributes: true,
-            minifyJS: true,
-            minifyCSS: true,
-            processScripts: ['importmap'],
-          }),
-        ]),
-  ],
+  plugins: [...(devMode ? [] : [minifyHTMLPlugin(minifyHTMLOptions)])],
 };
 
-const sdkBuild = () => {
+const sdkBuild = async () => {
   const sdkSrcDir = 'src/sdk/';
   const sdkSrcMod = sdkSrcDir + 'index.ts';
-  const sdkOutDir = 'build/sdk/';
+  const sdkOutDir = 'sdk/';
 
-  fs.copyFileSync(path.resolve('LICENSE'), path.resolve(sdkOutDir + 'LICENSE'));
-  fs.copyFileSync(path.resolve('README.md'), path.resolve(sdkOutDir + 'README.md'));
-  fs.copyFileSync(
-    path.resolve(sdkSrcDir + 'package.sdk.json'),
-    path.resolve(sdkOutDir + 'package.json'),
-  );
+  await Promise.all([
+    copyFile('LICENSE', sdkOutDir + 'LICENSE'),
+    copyFile('README.md', sdkOutDir + 'README.md'),
+    copyFile(sdkSrcDir + 'package.sdk.json', sdkOutDir + 'package.json'),
+  ]);
 
   const sdkOptions = {
     ...baseOptions,
@@ -101,36 +92,36 @@ const sdkBuild = () => {
       ...sdkOptions,
       entryPoints: [sdkSrcMod],
       outdir: undefined,
-      outfile: sdkOutDir + 'livecodes.js',
+      outfile: path.resolve(outDir, sdkOutDir, 'livecodes.js'),
     }),
     esbuild.build({
       ...sdkOptions,
       entryPoints: [sdkSrcMod],
       outdir: undefined,
-      outfile: sdkOutDir + 'livecodes.cjs',
+      outfile: path.resolve(outDir, sdkOutDir, 'livecodes.cjs'),
       format: 'cjs',
     }),
     esbuild.build({
       ...sdkOptions,
       entryPoints: [sdkSrcMod],
       outdir: undefined,
-      outfile: sdkOutDir + 'livecodes.umd.js',
+      outfile: path.resolve(outDir, sdkOutDir, 'livecodes.umd.js'),
       format: 'iife',
       globalName: 'livecodes',
     }),
     esbuild.build({
       ...sdkOptions,
       entryPoints: [sdkSrcDir + 'react.tsx'],
       outdir: undefined,
-      outfile: sdkOutDir + 'react.js',
+      outfile: path.resolve(outDir, sdkOutDir, 'react.js'),
       external: ['react'],
       jsx: 'automatic',
     }),
     esbuild.build({
       ...sdkOptions,
       entryPoints: [sdkSrcDir + 'vue.ts'],
       outdir: undefined,
-      outfile: sdkOutDir + 'vue.js',
+      outfile: path.resolve(outDir, sdkOutDir, 'vue.js'),
       external: ['vue'],
       alias: {
         '@vue/runtime-core': 'vue',

diff --git a/scripts/inject-css.js b/scripts/inject-css.js
@@ -13,7 +13,7 @@ const injectCss = async () => {
   var html = fs.readFileSync(path.resolve(htmlFile), 'utf8');
   var css = fs.readFileSync(path.resolve(outDir + cssFile), 'utf8');
 
-  var result = html.replace('<!-- index.css -->', `<style>\n${css}</style>`);
+  var result = html.replace('<!-- index.css -->', `<style>${css}</style>`);
   fs.writeFileSync(path.resolve(htmlFile), result, 'utf8');
   fs.unlinkSync(path.resolve(outDir + cssFile));
 };

diff --git a/src/index.html b/src/index.html
@@ -79,80 +79,6 @@
         fill-rule="evenodd"
         style="display: block; margin: 0 auto"
       >
-        <style>
-          .B {
-            stroke: none;
-          }
-          .C {
-            fill: url(#C);
-          }
-          .D {
-            fill: #96bf3d;
-          }
-          .E {
-            fill-rule: nonzero;
-          }
-
-          /* Add animation keyframes */
-          @keyframes pulse2 {
-            0%,
-            100% {
-              opacity: 0;
-            }
-            50% {
-              opacity: 1;
-            }
-          }
-
-          @keyframes pulse {
-            0%,
-            100% {
-              opacity: 0.9;
-            }
-            50% {
-              opacity: 1;
-            }
-          }
-
-          @keyframes colorPulse {
-            0%,
-            100% {
-              stop-color: #d7d7d7;
-            }
-            50% {
-              stop-color: #b0b0b0;
-            }
-          }
-
-          @keyframes colorPulse2 {
-            0%,
-            100% {
-              stop-color: #626262;
-            }
-            50% {
-              stop-color: #444444;
-            }
-          }
-
-          #cube-container {
-            animation: pulse2 3s ease-in-out infinite;
-            scale: 0.9;
-            transform-origin: center;
-          }
-
-          #inner-cube {
-            animation: pulse 2s ease-in-out infinite;
-          }
-
-          #gradient-stop-1 {
-            animation: colorPulse 4s ease-in-out infinite;
-          }
-
-          #gradient-stop-2 {
-            animation: colorPulse2 4s ease-in-out infinite;
-          }
-        </style>
-
         <defs>
           <filter id="A" x="-1.8182%" y="-2.7229%" width="104.0559%" height="106.0741%">
             <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
@@ -179,7 +105,6 @@
             <stop id="gradient-stop-2" offset="100%" stop-color="#626262" />
           </linearGradient>
         </defs>
-
         <g filter="url(#A)" fill="#c1c1c1" transform="translate(9.5 4.5)" class="B E">
           <path
             d="M16.7525 286.7298C6.7066 275.7455 0 253.8097 0 234.5909c0-19.2061 5.0266-37.032 17.5891-46.6336h-.8357L214.4292 0v127.5964c-21.7784 20.5762-51.0939 43.9057-124.8028 108.3891l.8357 1.3552c39.3673 28.822 84.5988 72.7163 123.9662 111.1297v128.966z"
@@ -190,7 +115,6 @@
             />
           </g>
         </g>
-
         <g id="cube-container" filter="url(#B)" transform="translate(219.5 59.5)" class="B">
           <g transform="translate(147.229 92.5951)">
             <path d="M0 261.9238l143.1698-87.4534V0L0 87.2109v174.7129z" />
@@ -214,7 +138,6 @@
             d="M290.1287 87.017L147.3196 0 4.5106 87.017 0 89.8789v180.0482L147.5 360l4.5106-2.7648L295 269.9271V89.8303zm-4.511 177.2837l-133.7875 81.7786V182.6194l133.9679-81.6331zm-142.809 81.7786L8.8407 264.2521V100.9863l133.968 81.6331zM13.6223 92.6919l133.6973-81.536 133.6974 81.536-133.6974 81.4873L13.487 92.6919z"
             fill="#444"
           />
-
           <g id="inner-cube">
             <g transform="translate(147.9058 133.4844)" class="C">
               <path d="M0 140.566l76.9073-46.9039V0L0 46.8553v93.7107z" />
@@ -225,17 +148,16 @@
             <g transform="translate(70.6373 85.513)" class="C">
               <path d="M153.3638 46.71L76.6819 0 0 46.71l76.6819 46.8554L153.3638 46.71z" />
             </g>
-            <g transform="translate(147.3196 132.223)" class="D">
+            <g transform="translate(147.3196 132.223)">
               <path d="M0 42.102L68.9685.0968 68.8787 0 0 42.0534v.0486z" />
             </g>
-            <g transform="translate(78.3507 132.223)" class="D">
+            <g transform="translate(78.3507 132.223)">
               <path d="M.0902 0L0 .0968 68.9685 42.102v-.0486L.0902 0z" />
             </g>
-            <g transform="translate(147.3196 174.2764)" class="D">
+            <g transform="translate(147.3196 174.2764)">
               <path d="M0 0z" />
             </g>
           </g>
-
           <g transform="translate(64.7736 79.159)">
             <path
               d="M160.5811 47.4858L82.5456 0 4.5106 47.4858 0 50.2992v100.9377l82.5456 50.4446 4.511-2.7648 78.1253-47.6798V50.2992zm-4.5109 98.0762l-69.0136 42.1987v-84.2035l69.1042-42.102zm-78.0351 42.1987L8.9309 145.562V61.4552l69.1042 42.102zM13.6674 53.064l68.8782-41.908 68.8787 41.9566-68.8787 42.0048-68.9684-41.9566z"