cferdinandi/about.html Secret

## about.html
<h2>Hi, I'm Chris Ferdinandi.</h2>

<p><strong>I help people learn vanilla JavaScript,</strong> and I believe there’s a simpler, more resilient way to make things for the web.</p>

## index.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Includes</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}
		</style>
	</head>

	<body>

		<h1>Hate the complexity of modern front-end web development?</h1>

		<p>Me too! I send out a short email each weekday on how to build a simpler, more resilient web. Join over 13k others.</p>


		<include-html path="about.html">
			<a href="about.html">Learn more about me.</a>
		</include-html>


		<script>
			// Extend the HTMLElement class to create the web component
			class IncludeHTML extends HTMLElement {

				/**
				 * Get and render external HTML
				 * @param  {String} path The path to the external HTML
				 */
				async #getHTML (path) {

					// Get the page
					let request = await fetch(path);
					if (!request.ok) return;

					// Get the HTML
					this.innerHTML = await request.text();

				}

				/**
				 * The class constructor object
				 */
				constructor () {

					// Always call super first in constructor
					super();

					// Get the source HTML to load
					let path = this.getAttribute('path');
					if (!path) return;

					// Render HTML
					this.#getHTML(path);

				}

			}

			// Define the new web component
			if ('customElements' in window) {
				customElements.define('include-html', IncludeHTML);
			}
		</script>

	</body>
</html>
	<h2>Hi, I'm Chris Ferdinandi.</h2>

	<p><strong>I help people learn vanilla JavaScript,</strong> and I believe there’s a simpler, more resilient way to make things for the web.</p>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Includes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}
	</style>
	</head>

	<body>

	<h1>Hate the complexity of modern front-end web development?</h1>

	<p>Me too! I send out a short email each weekday on how to build a simpler, more resilient web. Join over 13k others.</p>


	<include-html path="about.html">
	<a href="about.html">Learn more about me.</a>
	</include-html>


	<script>
	// Extend the HTMLElement class to create the web component
	class IncludeHTML extends HTMLElement {

	/**
	* Get and render external HTML
	* @param {String} path The path to the external HTML
	*/
	async #getHTML (path) {

	// Get the page
	let request = await fetch(path);
	if (!request.ok) return;

	// Get the HTML
	this.innerHTML = await request.text();

	}

	/**
	* The class constructor object
	*/
	constructor () {

	// Always call super first in constructor
	super();

	// Get the source HTML to load
	let path = this.getAttribute('path');
	if (!path) return;

	// Render HTML
	this.#getHTML(path);

	}

	}

	// Define the new web component
	if ('customElements' in window) {
	customElements.define('include-html', IncludeHTML);
	}
	</script>

	</body>
	</html>