novafurry · August 21, 2023 07:38
diff --git a/readme.md b/readme.md
diff --git a/example file.txt b/example file.txt
 # My Blog (title)
 Welcome.
 -=-=-=-=-=-=-
 # Post 1
 Hello I am Post 1
diff --git a/Handle Bar Helpers.js b/Handle Bar Helpers.js
 Handlebars.registerHelper('betterTitle', function (filepath) {
  return new Handlebars.SafeString(
    JSON.stringify(filepath.data.root.files[0].name).replace(/\.[^/.]+$/, "").replace('"', '').replace('"',"")
  );
 });
diff --git a/Template.html b/Template.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>{{betterTitle}}</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <style>
        .mdl-layout__header-row {
            padding: 0 16px;
        }

        .mdl-layout__drawer-button {
            color: rgba(0, 0, 0, 0.54);
        }

        .mdl-layout__drawer {
            width: 240px;
        }

        .mdl-layout__content {
            padding: 24px;
            flex: none;
        }

        .post {
            display: none;
        }

        .post.active {
            display: block;
        }

        body {
            height: 100vh;
            max-height: 100vh !important;
            overflow: hidden;
        }

        * {
            max-height: 100vh !important;
            overflow: hidden;
        }

        main.mdl-layout__content {
            overflow: hidden !important;

        }

        .post {
            height: 91vh;
            overflow-y: auto;
        }

        .mdl-layout.mdl-js-layout.mdl-layout--fixed-drawer.has-drawer.is-upgraded {
            overflow: hidden !important;
        }

        main.mdl-layout__content {}
    </style>
 </head>

 <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">{{betterTitle}}</span>
            <nav id="drawer-toc" class="mdl-navigation"></nav>
        </div>
        <main class="mdl-layout__content">
            <div id="posts">{{{files.0.content.html}}}</div>
            <div id="not-found" class="post">
                <h1>404 Not Found</h1>
                <p>The page you are looking for could not be found.</p>
            </div>
        </main>
    </div>

    <script type="text/javascript">
        function getTextContent(stringifiedElement) {
            let parser = new DOMParser();
            let doc = parser.parseFromString(stringifiedElement, "text/html");
            return doc.body.textContent;
        }

        var separator = "\n-=-=-=-=-=-=-";
        var posts = [];
        var content = document.querySelector('#posts').innerHTML;
        var postContents = content.split(separator);
        console.log(postContents)
        for (var i = 0; i < postContents.length; i++) {
            var postContent = postContents[i].trim();
            console.log(postContent)
            if (postContent) {
                var titleEndIndex = postContent.indexOf('</h1>');
                if (titleEndIndex === -1) {
                    titleEndIndex = postContent.length;
                }
                var title = getTextContent(postContent.substring(0, titleEndIndex).trim())
                var content = postContent.substring(titleEndIndex).trim();
                posts.push({
                    title: title,
                    content: content
                });
            }
        }

        var drawerToc = document.querySelector('#drawer-toc');
        var postsContainer = document.querySelector('#posts');
        postsContainer.innerHTML = '';
        for (var i = 0; i < posts.length; i++) {
            var post = posts[i];
            post.id = 'post-' + i;

            var drawerLink = document.createElement('a');
            drawerLink.className = 'mdl-navigation__link';
            drawerLink.href = '#' + post.id;
            drawerLink.textContent = post.title;
            drawerToc.appendChild(drawerLink);

            var postElement = document.createElement('div');
            postElement.id = post.id;
            postElement.className = 'post' + (i === 0 ? ' active' : '');
            postElement.innerHTML = '<h1>' + post.title + '</h1>' + '<p>' + post.content + '</p>';
            postsContainer.appendChild(postElement);
        }

        window.addEventListener('hashchange', function () {
            var hash = window.location.hash.substring(1);
            var posts = document.querySelectorAll('.post');
            var found = false;
            for (var i = 0; i < posts.length; i++) {
                if (posts[i].id === hash) {
                    posts[i].classList.add('active');
                    found = true;
                } else {
                    posts[i].classList.remove('active');
                }
            }
            if (!found) {
                document.querySelector('#not-found').classList.add('active');
            }
        });
    </script>

 </body>

 </html>
	# My Blog (title)
	Welcome.
	-=-=-=-=-=-=-
	# Post 1
	Hello I am Post 1
	Handlebars.registerHelper('betterTitle', function (filepath) {
	return new Handlebars.SafeString(
	JSON.stringify(filepath.data.root.files[0].name).replace(/\.[^/.]+$/, "").replace('"', '').replace('"',"")
	);
	});
	<!DOCTYPE html>
	<html>

	<head>
	<title>{{betterTitle}}</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<style>
	.mdl-layout__header-row {
	padding: 0 16px;
	}

	.mdl-layout__drawer-button {
	color: rgba(0, 0, 0, 0.54);
	}

	.mdl-layout__drawer {
	width: 240px;
	}

	.mdl-layout__content {
	padding: 24px;
	flex: none;
	}

	.post {
	display: none;
	}

	.post.active {
	display: block;
	}

	body {
	height: 100vh;
	max-height: 100vh !important;
	overflow: hidden;
	}

	* {
	max-height: 100vh !important;
	overflow: hidden;
	}

	main.mdl-layout__content {
	overflow: hidden !important;

	}

	.post {
	height: 91vh;
	overflow-y: auto;
	}

	.mdl-layout.mdl-js-layout.mdl-layout--fixed-drawer.has-drawer.is-upgraded {
	overflow: hidden !important;
	}

	main.mdl-layout__content {}
	</style>
	</head>

	<body>
	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
	<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">{{betterTitle}}</span>
	<nav id="drawer-toc" class="mdl-navigation"></nav>
	</div>
	<main class="mdl-layout__content">
	<div id="posts">{{{files.0.content.html}}}</div>
	<div id="not-found" class="post">
	<h1>404 Not Found</h1>
	<p>The page you are looking for could not be found.</p>
	</div>
	</main>
	</div>

	<script type="text/javascript">
	function getTextContent(stringifiedElement) {
	let parser = new DOMParser();
	let doc = parser.parseFromString(stringifiedElement, "text/html");
	return doc.body.textContent;
	}

	var separator = "\n-=-=-=-=-=-=-";
	var posts = [];
	var content = document.querySelector('#posts').innerHTML;
	var postContents = content.split(separator);
	console.log(postContents)
	for (var i = 0; i < postContents.length; i++) {
	var postContent = postContents[i].trim();
	console.log(postContent)
	if (postContent) {
	var titleEndIndex = postContent.indexOf('</h1>');
	if (titleEndIndex === -1) {
	titleEndIndex = postContent.length;
	}
	var title = getTextContent(postContent.substring(0, titleEndIndex).trim())
	var content = postContent.substring(titleEndIndex).trim();
	posts.push({
	title: title,
	content: content
	});
	}
	}

	var drawerToc = document.querySelector('#drawer-toc');
	var postsContainer = document.querySelector('#posts');
	postsContainer.innerHTML = '';
	for (var i = 0; i < posts.length; i++) {
	var post = posts[i];
	post.id = 'post-' + i;

	var drawerLink = document.createElement('a');
	drawerLink.className = 'mdl-navigation__link';
	drawerLink.href = '#' + post.id;
	drawerLink.textContent = post.title;
	drawerToc.appendChild(drawerLink);

	var postElement = document.createElement('div');
	postElement.id = post.id;
	postElement.className = 'post' + (i === 0 ? ' active' : '');
	postElement.innerHTML = '<h1>' + post.title + '</h1>' + '<p>' + post.content + '</p>';
	postsContainer.appendChild(postElement);
	}

	window.addEventListener('hashchange', function () {
	var hash = window.location.hash.substring(1);
	var posts = document.querySelectorAll('.post');
	var found = false;
	for (var i = 0; i < posts.length; i++) {
	if (posts[i].id === hash) {
	posts[i].classList.add('active');
	found = true;
	} else {
	posts[i].classList.remove('active');
	}
	}
	if (!found) {
	document.querySelector('#not-found').classList.add('active');
	}
	});
	</script>

	</body>

	</html>