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

• Working with ES6 & Node.js: Professional README Generator
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

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

Walkthrough video

Links

• Solution URL: https://github.com/technoveltyco/bootcamp-week11-challenge
• Live Site URL: https://technoveltyco.github.io/bootcamp-week11-challenge/

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

• Markdown / HTML
  • The easiest way to create a README
  • Awesome README
  • Auto-generating Markdown tables of contents
• CSS & UX/UI
  • MDN - Organizing your CSS
  • MDN - Using media queries
  • A Look at Some CSS Methodologies
  • Which CSS method should I use?
  • How to Choose the Best CSS Framework: Understanding Metrics and Context
  • Understanding CSS Writing Methodologies
  • CSS Naming Conventions that Will Save You Hours of Debugging
  • BEM Methodology In CSS: A Quick Start Guide
  • BEM vs. SMACSS: Comparing CSS methodologies
  • What makes BEM better than using a nestable style sheet language like LESS?
  • BEM CSS Methodology
  • Atomic Design
  • Atomizer
  • Systematic CSS
  • 50 CSS Best Practices & Guidelines to Write Better CSS
  • The New CSS Reset
  • CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained
  • Generating Shades of Color Using CSS Variables
  • Creating Color Themes With Custom Properties, HSL, and a Little calc()
  • Color Hunt
  • 122 Shades of White Color With Names, Hex, RGB, CMYK Codes
  • Complementary Color Picker
  • Color wheel
  • Color Palletes Generator
  • The Best Way to Implement a “Wrapper” in CSS
  • Styling Layout Wrappers In CSS
  • A Complete Introduction to Web Components in 2023
  • An Introduction to Web Components
  • Landing Page Vs. Homepage: What’s The Difference?
  • How To Design an Effective Landing Page — 8 Best Practices
  • The Anatomy of a Landing Page
  • The Component Gallery
  • WebComponents.org
  • GitHub - MDN - Web Component examples
  • GitHub - Awesome Standalones Web Components
  • GitHub - Accessible Components
• JavaScript / Node.js / TypeScript
  • Using Import aliases in JavaScript
  • Inquirer
  • Remarkable
  • MarkdownTOC - Generate a markdown TOC (table of contents) with Remarkable
  • CommonJS vs. ES modules in Node.js
  • How to Deploy Your Node.js Application for Free with Render
  • Zipping and unzipping files with NodeJS
  • Zipping a file(or multiple files ) in Nodejs
  • Gzip compression with Node.js
  • How to Check if a File exists in Node using Async/Await
  • What is a “.d.ts” file in TypeScript?
• Remote terminal / Security
  • How to create web-based terminals
  • Xterm js Terminal
  • Xterm js Security
  • How to secure your WebSocket connections
  • Testing for WebSockets security vulnerabilities
  • HTML5 Security Cheat Sheet

Author

Daniel Rodriguez

• GitHub - Technovelty

Acknowledgments

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