Skip to content

Latest commit

 

History

History
310 lines (256 loc) · 13.6 KB

README.md

File metadata and controls

310 lines (256 loc) · 13.6 KB
Raw

Working with ES6 & Node.js: Professional README Generator

README Generator is a command-line application that dynamically generates a professional README.md file from a user's input using the Inquirer package.

Table of contents

Overview

When creating an open source project on GitHub, it’s important to have a high-quality README for the app. This should include what the app is for, how to use the app, how to install it, how to report issues, and how to make contributions—this last part increases the likelihood that other developers will contribute to the success of the project.

You can quickly and easily create a README file by using a command-line application to generate one. This allows the project creator to devote more time to working on the project.

The challenge

Your task is to create a command-line application that dynamically generates a professional README.md file from a user's input using the Inquirer package. Review the Good README Guide as a reminder of everything that a high-quality, professional README should contain.

The application will be invoked by using the following command:

node index.mjs

Screenshot

Landing page with links to the resources

Landing page

Walkthrough video

Links

My process

Landing Page

The chosen Color Pallete for theming the landing page, and future web pages like the Editor page with the remote terminal.

A documentation page with the generated color pallete for the implemented theme can be seen at README Generator Docs.

Walkthrough Video

You can see an example on how to use the application in your local machine lookig at the video on the landing page.

Built with

  • Node.js
  • Inquirer
  • Remarkable
  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • SaSS
  • BEM CSS Methodology
  • Mobile first design

What I learned

Generate shade from a color pallete in CSS

:root {
  /**
   * color scheme
   * in HSL, only one value changes
   * in RGB this is more complex.
   */
  --color-1: hsl(0, 0%, 0%); /* rgb(0, 0, 0); */
  --color-2: hsl(233, 18%, 19%); /* rgb(40, 42, 58); */
  --color-3: hsl(42, 39%, 32%); /* rgb(115, 95, 50); */
  --color-4: hsl(37, 52%, 53%); /* rgb(198, 151, 73); */
}

/* color shades variants */
[data-theme=color-1] {
  --shade-1: hsl(0, 0%, 10%);
  --shade-2: hsl(0, 0%, 15%);
  --shade-3: hsl(0, 0%, 20%);
  --shade-4: hsl(0, 0%, 25%);
  --shade-5: hsl(0, 0%, 30%);
  --shade-6: hsl(0, 0%, 35%);
}

[data-theme=color-2] {
  --shade-1: hsl(233, 18%, 24%);
  --shade-2: hsl(233, 18%, 29%);
  --shade-3: hsl(233, 18%, 34%);
  --shade-4: hsl(233, 18%, 39%);
  --shade-5: hsl(233, 18%, 44%);
  --shade-6: hsl(233, 18%, 49%);
}

[data-theme=color-3] {
  --shade-1: hsl(42, 39%, 37%);
  --shade-2: hsl(42, 39%, 42%);
  --shade-3: hsl(42, 39%, 47%);
  --shade-4: hsl(42, 39%, 52%);
  --shade-5: hsl(42, 39%, 57%);
  --shade-6: hsl(42, 39%, 62%);
}

[data-theme=color-4] {
  --shade-1: hsl(37, 52%, 58%);
  --shade-2: hsl(37, 52%, 63%);
  --shade-3: hsl(37, 52%, 68%);
  --shade-4: hsl(37, 52%, 73%);
  --shade-5: hsl(37, 52%, 78%);
  --shade-6: hsl(37, 52%, 83%);
}

Use recursion to ask multiple times with Enquiry

function askSections(questions) {
  return inquirer
    .prompt(questions)
    .then((answers) => {
      const { sections: section } = answers;

      if (section === "next") {
        return { sections: [] };
      }

      const questionsFiltered = questions;
      questionsFiltered[0].choices = questions[0].choices.filter(
        (choice) => choice !== section
      );

      return askSections(questionsFiltered).then((answers) => {
        return { sections: [section, ...answers.sections] };
      });
    })
    .catch((error) => {
      if (error.isTtyError) {
        // Prompt couldn't be rendered in the current environment
        throw new Error(
          "Prompt couldn't be rendered in the current environment."
        );
      } else {
        // Something else went wrong
        console.error(error);
      }
    });
}

Compressing in Node.js

const timestamp = Date.now();
const folderPath = path.resolve("./.downloads/");
const compressFilePath = `${folderPath}/${timestamp}-${fileName}.zip`;
const output = fsSync.createWriteStream(compressFilePath);
const archive = archiver("zip", {
  zlib: { level: 9 },
});

// Event handlers.
output.on("close", function () {
  console.log(`${archive.pointer()} total bytes`);
});
output.on("end", function () {
  console.log("Data has been drained");
});
archive.on("error", (err) => {
  throw err;
});
archive.on("warning", function (err) {
  if (err.code === "ENOENT") {
    console.warn(err);
  } else {
    throw err;
  }
});

// write data to output file.
archive.pipe(output);

// append files.
const [mdFilePath, htmlFilePath] = data;
archive.append(fsSync.createReadStream(mdFilePath), { name: `README.md` });
archive.append(fsSync.createReadStream(htmlFilePath), {
  name: `README.html`,
});

await archive.finalize();

Continued development

The following features are created for future development:

  • Landing Page
  • Online Editor Page
  • Remote Terminal

Useful resources

Author

Daniel Rodriguez

Acknowledgments

The teacher and TAs that help us with resources and support to my questions during the development of this project.