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' });
Options
| Options | Description |
|---|---|
| -i | Provide file to be parsed |
| -h | Show helps option |
| -v | Show software version |
Top comments (0)