index.html

﻿<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8" >
<title>Open Index or Markdown</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain" >
<meta name="description" content="File wrangler. Default index.html file. Opens HTML or Markdown files. Passes location.hash." >
<meta name="keywords" content="ShowDown,Markdown,AJAX,JavaScript,HTML,CSS,GitHub,FOSS" >
<meta name="version" content="2020-05-31" >

<style>

:root { font: 100% monospace; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 80ch; }
a { color: crimson; text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: underline; }
aside { border: 1px solid lightgray; margin-top: 15px; padding: 2px; }
button, input[type=button] { background-color: #eee; border: 2px #eee solid; color: #888; }
blockquote { background-color: #ddd; padding: 1ch; }
center { text-decoration:none; font-size: 2ch;}
code { background-color: #eee; }
pre { background-color: #eee; padding: 5px; }
summary { cursor: pointer; font-size: 2.5ch; font-weight: bold; outline: none; }

</style>

</head>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js" ></script>

	<div id=divContent ></div>

<script>

// https://github.com/showdownjs/showdown

	defaultFile = "README.md";

	//location.hash = "../assets/markdown-help.md"; // test
	//location.hash = "../assets/style.css"

	init();

	function init() {

		showdown.setFlavor("github");

		if ( ! location.hash ) { location.hash = defaultFile; }

		location.hash.endsWith( ".md" ) ? onHashChange() : window.location.href = location.hash;

		window.addEventListener( "hashchange", onHashChange, false );

	}

	function onHashChange() {

		const url = location.hash.slice( 1 );
		document.title = url.split( "/" ).pop();
		const options = { excludeTrailingPunctuationFromURLs: true, ghMention: true, simplifiedAutoLink: true, simpleLineBreaks: true, emoji: true, openLinksInNewWindow: true };

		const xhr = new XMLHttpRequest();
		xhr.open( "get", url, true );
		xhr.onload = () => {
			const txt = xhr.responseText.replace( /\<!--@@@/, "").replace( /\@@@-->/, "");
			divContent.innerHTML = new showdown.Converter( options ).makeHtml( txt );
			window.scrollTo( 0, 0 );
		}
		xhr.send( null );

	}

</script>
</body>
</html>