Release 0.0.1: Should have start things earlier

#opensource #github #senecacollege #telescope

To explain for the title, I used to read a post where people interviewed Bill Gate and he has claimed that a good IT student should start to work on their deadlines one night before so as they can practice working under pressure. I did start my release 0.1 one night before the due date and did not recognize how rusty I am. I was panic and did not know where to start at all due to not coding for the whole summer. After that, I have a chance to connect with DukeManh on Slack and he helped me out a lot. You guys can visit his code at: OSD_SSG

Implementation:

When talking to Duke he suggest me to take a look at yargs npm which is an npm package that allow us to create an interactive command line tools which support build-in feature to help for parsing arguments in the command line.

const argv = yargs
  .option({
    input: {
      alias: 'i',
      describe: 'Text file to create an html file',
      type: 'string',
      demandOption: true,
      requiresArg: true,
    },
  })
  .help()
  .alias('help', 'h')
  .version()
  .alias('version', 'v').argv as {
  input: string;
  _: (string | number)[];
  $0: string;
};
const { input } = argv;

Yargs already help you out with the built in help() and version() function. All you have to do is customize the "-i" option which allow the user to enter the text file that need to be transformed to html

Next, we will have to create a helper function which help to filter out the file path and create a static HTML markup upon the content of the given file

//Create html markup file from provided text file
const processingFile = (filePath: string): string => {
  const fileExt = path.extname(filePath).toLowerCase();
  if (fileExt !== '.txt') {
    return '';
  }

  const file = fs.readFileSync(filePath, 'utf-8');

  // title is before the first 2 blank lines of the text
  let titleAndContent = file.split(/\n\n\n/);
  let title = '';
  let content = '';

  if (titleAndContent.length >= 2) {
    [title] = titleAndContent;
    content = titleAndContent.slice(1).join('\n\n\n');
  } else {
    [content] = titleAndContent;
  }

  const head = `<meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="index.css"> 
                <title>${title || path.basename(filePath, '.txt')}</title>`;

  const body = `
                ${title ? `<h1>${title}</h1>` : ''}
                ${content
                  .split(/\r?\n\r?\n/)
                  .map((para) => `<p>${para.replace(/\r?\n/, ' ')}</p>`)
                  .join('\n')}
                  `;

  const markup = `<!DOCTYPE html>
      <html lang="en">
        <head>
          ${head}
        </head>
        <body>
          ${body}
        </body>
      </html>`;

  return markup.split(/\n\s+/).join('\n');
};

After that, we will need to generate an index file to contains the hyperlink to all html pages have been generated:

const indexMarkup = `<!DOCTYPE html>
      <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css"> 
        <title>${path.basename(input)}</title>
        </head>
        <body>
          <h1>${path.basename(input)}</h1>
          <ul>
            ${dists
              .map(
                (dist) =>
                  `<li><a href="${path.relative(outputDir, dist)}">${path.basename(
                    dist,
                    '.html'
                  )}</a></li>`
              )
              .join('\n')}
          </ul>
        </body>
      </html>`
    .split(/\n\s+/)
    .join('\n');

  fs.writeFileSync(`${outputDir}/index.html`, indexMarkup, { flag: 'w' });