JohnnyMcFadden

// -------------------
/* script.js */
// -------------------

// ... prev code

  const rootDirectoryPath = `./src/articles/${readType}/${directoryName}`;
  const componentsDirectoryPath = `${rootDirectoryPath}/components`;

  // Create directories

JohnnyMcFadden

<nav aria-label="Primary">
  <ul>
    <li><a href="/articles/sass">Sass</a></li>
    <li>
      <a href="/articles/javascript">Javascript</a>
      <!-- Notice how the <nav> element does NOT added again -->
      <ul>
        <li><a href="/articles/javascript/promises">Promises</a></li>
        <li><a href="/articles/javascript/vanilla">Vanilla</a></li>
      </ul>

JohnnyMcFadden

import React from 'react';
import ReactDOM from 'react-dom';

if (process.env.NODE_ENV !== 'production') {
  import('@axe-core/react').then((axe) => {
    axe(React, ReactDOM, 1000, {}, '#root'); // optional 5th arg node or arr
  });
}

JohnnyMcFadden

import React from 'react';
import PropTypes from 'prop-types';

const Video = ({ src }) => (
  <div className="media-container">
    <video className="video" autoPlay loop muted playsInline>
      <source src={src} type="video/mp4" loop />
    </video>
  </div>
);

JohnnyMcFadden

const readline = require('readline');

const userInterface = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

userInterface.question('What is 5x5?', (answer) => {
  Number(answer) === 25
    ? console.log('WELL DONE... ✔️')

JohnnyMcFadden

/* ------------------------------ 
            utils.js  
   ------------------------------ */
const readline = require('readline'); 

const createUserInterface = () =>
  readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });

JohnnyMcFadden

const chalk = require('chalk');

const drawLine = (color) =>
  console.log(chalk[color]('-'.repeat(process.stdout.columns)));

const centerAlign = (string) => {
  const padding = (process.stdout.columns - string.length) / 2;
  return `${' '.repeat(padding)}`;
};

JohnnyMcFadden

const changeEmojiDisplayAsync = (type = 'show') => {
  console.log('2');
  const elements = document.getElementsByClassName('spooky-emoji-async');
  for (let element of elements) {
    setTimeout(() => {
      console.log('(3) change element className');
      element.className = `spooky-emoji-async spooky-emoji-async--${type}`;
    }, 2000);
  }
};

JohnnyMcFadden

const changeEmojiDisplay = (type = 'show') => {
  console.log('2');
  const elements = document.getElementsByClassName('spooky-emoji');
  for (let element of elements) {
    console.log('(3) change element className');
    element.className = `spooky-emoji spooky-emoji--${type}`;
  }
};

const changeTextDisplay = (type = 'show') => {

JohnnyMcFadden

// imported from utils
const styleInterface = document.documentElement.style;

<label>
  Background Color:
  <input
    type="color"
    onChange={(event) =>
      styleInterface.setProperty(`--background-body`, event.target.value)
    }