Next Gen Dynamic Blogging

2021-01-19mmackh

TL;DR

Three iterations deep and until further notice, I finally consider my blogging system re-writing hobby over. I don't think it could get any simpler: 2 PHP Scripts, an .htaccess modification and that's it. Unfortunately I had to retroactively change the structure of my HTML-only & JavaScript approach.

2021-01-19-Next-Gen-Dynamic-Blogging.php

<h1>Next Gen Dynamic Blogging</h1><time>2021-01-19</time><author>mmackh</author>

<h2>TL;DR</h2>
Three iterations deep and until further notice, I finally consider my blogging system re-writing hobby over. I don't think it could get any simpler: 2 PHP Scripts, an .htaccess modification and that's it. Unfortunately I had to retroactively change the structure of my HTML-only & JavaScript approach.

<h2>2021-01-19-Next-Gen-Dynamic-Blogging.php</h2>
<code><?php echo htmlspecialchars(file_get_contents(__FILE__)) ?></code>

<h2>.htaccess in /articles</h2>
<code>php_value auto_prepend_file "../templates/header.php"
php_value auto_append_file "../templates/footer.php"</code>

<h2>/templates/header.php</h2>
<code><?php echo htmlspecialchars(file_get_contents('../templates/header.php')) ?></code>

<h2>/templates/footer.php</h2>
<code><?php echo htmlspecialchars(file_get_contents('../templates/footer.php')) ?></code>

.htaccess in /articles

php_value auto_prepend_file "../templates/header.php"
php_value auto_append_file "../templates/footer.php"

/templates/header.php

<?php
	ob_start();

/templates/footer.php

<?php 
	$imagesDirectory = 'images/';

	function get_string_between($string, $start, $end){
		$string = ' ' . $string;
		$ini = strpos($string, $start);
		if ($ini == 0) return '';
		$ini += strlen($start);
		$len = strpos($string, $end, $ini) - $ini;
		return substr($string, $ini, $len);
	}

	$article = ob_get_clean();
	$article = str_replace('</author>', '</author><button id="accessibility" class="accessibilityToggle" onclick="accessibility()">Toggle Reader</button>', $article);
	$article = str_replace('<code>', '<pre><code>', $article);
	$article = str_replace('</code>', '</code></pre>', $article);
	
	$article = str_replace(["</li>\r", "</li>\n", "</li>\r\n"], ['<li>'], $article);
	
	$preRegexPattern = "/<pre\>(.*?)<\/pre\>/is";
	preg_match_all($preRegexPattern, $article, $matches);
	$preMatches = $matches[1];
	
	$title = strip_tags(get_string_between($article, '<h1>', '</h1>'));
	$date = strip_tags(get_string_between($article, '<time>', '</time>'));
	$author = strip_tags(get_string_between($article, '<author>', '</author>'));
	
	$articleWithParagraphs = str_replace(array("\r\n", "\r", "\n"), '<p>', $article);
	preg_match_all($preRegexPattern, $articleWithParagraphs, $matchesParagraph);
	if ($matchesParagraph) {
		$i = 0;
		foreach($matchesParagraph[1] as $match) {
			$articleWithParagraphs = str_replace($match, $preMatches[$i], $articleWithParagraphs);
			$i += 1;
		}
		$articleWithParagraphs = str_replace('<p><pre>', '<pre>', $articleWithParagraphs);
		$articleWithParagraphs = str_replace('</pre><p>', '</pre>', $articleWithParagraphs);
	}
	
	echo '<html lang="en">';
	echo '<link rel="stylesheet" href="/style.css?v=1.3" /><meta name="viewport" content="initial-scale=1.0"/>';
	echo '<title>'.$title.' | '.$author.'</title>';
	echo '<article>';
	echo '<a href="/blog" class="back">Back</a><br><br>';
	echo $articleWithParagraphs;
	echo '</article>';
	echo '';
?>
<script charset="utf-8">	
	function accessibility() {
		var targetClassList = document.body.classList;
		var targetClass = 'accessibility';
		if (targetClassList.contains(targetClass)) {
			targetClassList.remove(targetClass);
		} else {
			targetClassList.add(targetClass);
		}
	}
</script>
<script>
	function initGallery() {
		var galleryElements = document.querySelectorAll('gallery');
		if (galleryElements.length == 0) return;
		
		for (var i = 0; i < galleryElements.length; i += 1) {
			var galleryElement = galleryElements[i];
			
			const div = document.createElement("div");
			div.setAttribute('class', 'gallery');
			
			var columns = galleryElement.getAttribute('columns') ?? 2;
			var imageWidth = (1 / columns) * 100;
			
			var imageHTML = '';
			var images = galleryElement.getAttribute('src').split(',');
			for (var ii = 0; ii < images.length; ii += 1) {
				var image = '<?php echo $imagesDirectory; ?>' + images[ii];
				imageHTML += '<img style="padding: 0; display: inline; width:'+ imageWidth +'%; height: auto;" src="' + image + '"/>';
			}
			div.innerHTML = imageHTML;
			
			galleryElement.parentNode.replaceChild(div, galleryElement);
		}
	}
	initGallery();
</script>