pjlamb12/compodoc.js

## compodoc.js
const angularJson = require('./angular.json');
const exec = require('child_process').exec;
const fs = require('fs');

const mainProjects = Object.keys(angularJson.projects).filter(proj => !proj.includes('e2e'));
const tsConfigPaths = parseTsconfigPaths();

function parseTsconfigPaths() {
	const pathsArray = [];
	for (const projectName of mainProjects) {
		const project = angularJson.projects[projectName];
		const tsConfigPath =
			project.projectType === 'library'
				? `${project.root}/tsconfig.lib.json`
				: `${project.root}/tsconfig.app.json`;
		const nameParts = project.root.split('/');
		const name = nameParts[nameParts.length - 1];
		pathsArray.push({ tsConfigPath, name });
	}

	return pathsArray;
}

async function runCompodoc() {
	for (const path of tsConfigPaths) {
		await exec(`npx compodoc -p ${path.tsConfigPath} --output documentation/${path.name}/`);
	}
}

runCompodoc();

generateRootIndexHtml();

function generateRootIndexHtml() {
	const fileName = './documentation/index.html';
	const stream = fs.createWriteStream(fileName);

	stream.once('open', function() {
		const html = generateAllHtml();
		stream.end(html);
	});
}

function generateAllHtml() {
	const topHalf = getFirstHtmlPart();
	const mainText = getMainDocumentText();
	const listItems = buildListItems();
	const bottomHalf = getLastHtmlPart();

	return `${topHalf}${mainText}${listItems}${bottomHalf}`;
}

function buildListItems() {
	let itemsHtml = '';
	for (const path of tsConfigPaths) {
		itemsHtml = `${itemsHtml}${buildNavItem(path.name)}`;
	}
	return itemsHtml;
}

function buildNavItem(sectionName) {
	return `
	<li>
		<a href="./${sectionName}/index.html"><span class="fa fa-file-text-o"></span>${sectionName}</a>
	</li>
	`;
}

function getFirstHtmlPart() {
	const oneProject = tsConfigPaths[0].name;
	return `
	<!doctype html>
	<html class="no-js" lang="">
		<head>
			<meta charset="utf-8">
			<meta http-equiv="x-ua-compatible" content="ie=edge">
			<title>motiv-health-angular documentation</title>
			<meta name="description" content="">
			<meta name="viewport" content="width=device-width, initial-scale=1">

			<link rel="icon" type="image/x-icon" href="./${oneProject}/images/favicon.ico">
			<link rel="stylesheet" href="./${oneProject}/styles/style.css">
		</head>
		<body>
	`;
}

function getMainDocumentText() {
	return `
		<div class="container-fluid main">
			<div class="row main">
				<div class="content readme">
					<div class="content-data">
						<h1 id="motiv-health-angular-monorepo-main">Motiv Health Angular Monorepo</h1>
						<p>
							The documentation here covers each project and library. You can navigate to the main page of each of those apps or libraries by using the menu.
						</p>
						<ul>
	`;
}

function getLastHtmlPart() {
	const oneProject = tsConfigPaths[0].name;
	return `
						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="./${oneProject}/js/libs/bootstrap-native.js"></script>

		<script src="./${oneProject}/js/menu.js"></script>
	</body>
	</html>

	`;
}
	const angularJson = require('./angular.json');
	const exec = require('child_process').exec;
	const fs = require('fs');

	const mainProjects = Object.keys(angularJson.projects).filter(proj => !proj.includes('e2e'));
	const tsConfigPaths = parseTsconfigPaths();

	function parseTsconfigPaths() {
	const pathsArray = [];
	for (const projectName of mainProjects) {
	const project = angularJson.projects[projectName];
	const tsConfigPath =
	project.projectType === 'library'
	? `${project.root}/tsconfig.lib.json`
	: `${project.root}/tsconfig.app.json`;
	const nameParts = project.root.split('/');
	const name = nameParts[nameParts.length - 1];
	pathsArray.push({ tsConfigPath, name });
	}

	return pathsArray;
	}

	async function runCompodoc() {
	for (const path of tsConfigPaths) {
	await exec(`npx compodoc -p ${path.tsConfigPath} --output documentation/${path.name}/`);
	}
	}

	runCompodoc();

	generateRootIndexHtml();

	function generateRootIndexHtml() {
	const fileName = './documentation/index.html';
	const stream = fs.createWriteStream(fileName);

	stream.once('open', function() {
	const html = generateAllHtml();
	stream.end(html);
	});
	}

	function generateAllHtml() {
	const topHalf = getFirstHtmlPart();
	const mainText = getMainDocumentText();
	const listItems = buildListItems();
	const bottomHalf = getLastHtmlPart();

	return `${topHalf}${mainText}${listItems}${bottomHalf}`;
	}

	function buildListItems() {
	let itemsHtml = '';
	for (const path of tsConfigPaths) {
	itemsHtml = `${itemsHtml}${buildNavItem(path.name)}`;
	}
	return itemsHtml;
	}

	function buildNavItem(sectionName) {
	return `
	<li>
	<a href="./${sectionName}/index.html"><span class="fa fa-file-text-o"></span>${sectionName}</a>
	</li>
	`;
	}

	function getFirstHtmlPart() {
	const oneProject = tsConfigPaths[0].name;
	return `
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>motiv-health-angular documentation</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="icon" type="image/x-icon" href="./${oneProject}/images/favicon.ico">
	<link rel="stylesheet" href="./${oneProject}/styles/style.css">
	</head>
	<body>
	`;
	}

	function getMainDocumentText() {
	return `
	<div class="container-fluid main">
	<div class="row main">
	<div class="content readme">
	<div class="content-data">
	<h1 id="motiv-health-angular-monorepo-main">Motiv Health Angular Monorepo</h1>
	<p>
	The documentation here covers each project and library. You can navigate to the main page of each of those apps or libraries by using the menu.
	</p>
	<ul>
	`;
	}

	function getLastHtmlPart() {
	const oneProject = tsConfigPaths[0].name;
	return `
	</ul>
	</div>
	</div>
	</div>
	</div>

	<script src="./${oneProject}/js/libs/bootstrap-native.js"></script>

	<script src="./${oneProject}/js/menu.js"></script>
	</body>
	</html>

	`;
	}