Update index.js

06-build-page/index.js

@@ -1,113 +1,82 @@
-const fs = require('fs');
-const path = require('path');
-const fsPromise = require('fs/promises');
-const { createBrotliCompress } = require('zlib');
-let dirDirection = path.resolve(__dirname + '/project-dist');
-let assetsDirection = path.resolve(__dirname + '/project-dist/assets');
-let htmlDirection = path.resolve(__dirname + '/project-dist/index.html');
-let csslDirection = path.resolve(__dirname + '/project-dist/style.css');
-
-
-fs.mkdir(dirDirection, { recursive: true }, err => {
-  if(err) throw err; 
-});
-
-fs.mkdir(assetsDirection, { recursive: true }, err => {
-  if(err) throw err; 
-});
-
+const fs = require("fs/promises");
+const path = require("path");
+
+const distDir = path.join(__dirname, "project-dist");
+const assetsSrc = path.join(__dirname, "assets");
+const assetsDist = path.join(distDir, "assets");
+const htmlDist = path.join(distDir, "index.html");
+const cssDist = path.join(distDir, "style.css");
+const templateFile = path.join(__dirname, "template.html");
+const componentsDir = path.join(__dirname, "components");
+const stylesDir = path.join(__dirname, "styles");
+
+// Ensure directories exist
+async function prepareDist() {
+  await fs.mkdir(distDir, { recursive: true });
+  await fs.mkdir(assetsDist, { recursive: true });
+  await fs.writeFile(htmlDist, "");
+  await fs.writeFile(cssDist, "");
+}
 
-fs.writeFile(
-  htmlDirection,
-  '',
-  (err) => {
-    if (err) throw err;
-  });
+// Copy assets folder recursively
+async function copyAssets(src, dest) {
+  await fs.mkdir(dest, { recursive: true });
+  const entries = await fs.readdir(src, { withFileTypes: true });
 
-fs.writeFile(
-  csslDirection,
-  '',
-  (err) => {
-    if (err) throw err;
-  });
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
 
-async function copyDirectory () {
-  try {
-    const readDir = await fsPromise.readdir('06-build-page/assets', {withFileTypes: true});
-    for (const dir of readDir) {
-      let copies = await fsPromise.readdir(`06-build-page/assets/${dir.name}`, {withFileTypes: true});
-      console.log(dir.name);
-      fs.mkdir(`06-build-page/project-dist/assets/${dir.name}`, { recursive: true }, err => {
-        if(err) throw err; 
-      });
-      let readyCopy = await fsPromise.readdir(`06-build-page/project-dist/assets/${dir.name}`, {withFileTypes: true});
-      for (const file of readyCopy) {
-        fs.unlink(`06-build-page/project-dist/assets/${dir.name}/${file.name}`, function(err){
-          if (err) {
-            console.log(err);
-          } 
-        });
-      }
-      for (const copy of copies) {
-        // console.log(`06-build-page/assets/${readDir[i].name}/${copy.name}`)
-        fs.copyFile(`06-build-page/assets/${dir.name}/${copy.name}`, `06-build-page/project-dist/assets/${dir.name}/${copy.name}`, (err) => {
-          if (err) {
-            console.log('Error Found:', err);
-          }  
-        });
-
-      }
+    if (entry.isDirectory()) {
+      await copyAssets(srcPath, destPath);
+    } else {
+      await fs.copyFile(srcPath, destPath);
     }
-
-
-  } catch(err) {
-    console.log((err)); 
   }
 }
 
-copyDirectory();
-
-async function createHtml() {
-  try {
-    let templateHtml = await fsPromise.readFile(__dirname + '/' + 'template.html');
-    let htmlComponents = await fsPromise.readdir(__dirname + '/' + 'components', {withFileTypes: true});
-    let htmlTxt = templateHtml.toString();
-    let currentPart = '';
-    for (const component of htmlComponents) {
-      if (component.isFile() && path.extname(component.name) === '.html'){
-        currentPart = await fsPromise.readFile(__dirname + '/components/' + `${component.name}`);
-        htmlTxt = htmlTxt.replace(`{{${component.name.slice(0, -5)}}}`, currentPart.toString());
+// Build HTML by replacing components
+async function buildHtml() {
+  let template = await fs.readFile(templateFile, "utf-8");
+  const components = await fs.readdir(componentsDir, { withFileTypes: true });
 
-      }
+  for (const comp of components) {
+    if (comp.isFile() && path.extname(comp.name) === ".html") {
+      const placeholder = `{{${path.basename(comp.name, ".html")}}}`;
+      const content = await fs.readFile(path.join(componentsDir, comp.name), "utf-8");
+      template = template.replace(placeholder, content);
     }
-    fsPromise.writeFile(__dirname + '/project-dist/index.html', htmlTxt);
-
-  }  catch(err) {
-    console.log((err)); 
   }
+
+  await fs.writeFile(htmlDist, template);
 }
 
-createHtml();
+// Merge all CSS into one
+async function buildCss() {
+  const styles = await fs.readdir(stylesDir, { withFileTypes: true });
+  const cssContents = [];
+
+  for (const file of styles) {
+    if (file.isFile() && path.extname(file.name) === ".css") {
+      const content = await fs.readFile(path.join(stylesDir, file.name), "utf-8");
+      cssContents.push(content);
+    }
+  }
 
+  await fs.writeFile(cssDist, cssContents.join("\n"));
+}
 
-async function copyStyles() {
+// Main build process
+async function build() {
   try {
-
-    let stylesComponents = await fsPromise.readdir(__dirname + '/' + 'styles', {withFileTypes: true});
-    for (const styles of stylesComponents) {
-      if (styles.isFile() === true && path.extname(styles.name) == '.css') {
-        let currentCss = await fsPromise.readFile(__dirname + `/styles/${styles.name}`, 'utf-8');
-        fs.appendFile(
-          (__dirname + '/project-dist/style.css'),
-          currentCss,
-          err => {
-            if (err) throw err;
-          });
-      }
-    }
-  } catch(err) {
-    console.log((err)); 
+    await prepareDist();
+    await copyAssets(assetsSrc, assetsDist);
+    await buildHtml();
+    await buildCss();
+    console.log("Build completed successfully!");
+  } catch (err) {
+    console.error("Build failed:", err);
   }
 }
 
-copyStyles();
+build();