DevEarley/MicroBlog.js

## readme.md

      
    Raw
  

              readme.md
            
          
    MicroBlog

Live MicroBlog Example - https://devearley.github.io/earley.dev/
Showdown

This blog is powered by Showdown - a JS library that parses markdown files into HTML.
How it works


Each blog entry listed in the files array will be downloaded with a XMLHttpRequest.
After the entries are downloaded, they are sorted to match the order in the files array.
The sorted blog entries are converted to HTML and added to the div with the MicroBlog id.

How to test locally


Download and install Node.js
Install http-server

npm i -g http-server

Download and Extract this gist.
Open run.cmd and adjust the port (1234 by default)
run.cmd will open a browser and navigate to localhost:1234 automatically.

Enjoy Micro Blog!

Please let me know how you use MicroBlog! Send me a message, leave a comment or DM me on  twitter =D
-DevEarley

  
## index.html
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
            crossorigin="anonymous" type="text/javascript"></script>
    <link rel="stylesheet" href="./style.css">
    <script src="./MicroBlog.js"></script>
    <title>Micro Blog</title>
</head>

<body>
    <div id="MicroBlog"></div>
</body>

</html>

## MicroBlog.js
(function () {
    let files = [
        'readme.md'
    ];
    let converter = new showdown.Converter();
    let entries = [];

    function updateBlog(_entries, _files) {
        let blog = document.getElementById("MicroBlog");
        if (blog != null) {
            blog.innerHTML = "";
            let sortedEntries = _entries.sort(function (a, b) {
                return (getIndex(a.url, _entries, _files) < getIndex(b.url, _entries, _files)) ? -1 : 1;
            });
            for (let i = 0; i < sortedEntries.length; i++) {
                blog.innerHTML += sortedEntries[i].html;
                blog.innerHTML += "<!--" + sortedEntries[i].url + "-->";
            }
        }
    }

    function init(_entries, _files, _converter) {
        for (let f = 0; f < _files.length; f++) {
            let client = new XMLHttpRequest();
            client.open('GET', './' + _files[f]);
            client.send();
            client.onreadystatechange = function () {
                if (client.readyState != 4) return;
                let html = _converter.makeHtml(client.responseText);
                let url = client.responseURL;
                _entries.push({
                    html: html,
                    url: url
                });
                if (_entries.length == _files.length) {
                    updateBlog(_entries, _files);
                }
            }
        }
    }

    function getIndex(_url, _entries, _files) {
        var fileName = extractFilename(_url);
        var index = 0;
        for (var i = 0; i < _files.length; i++) {
            let fileNameFromIndex = _files[i];
            if (fileNameFromIndex === fileName) {
                index = i;
            }
        }
        return index;
    }

    function extractFilename(_path) {
        const pathArray = _path.split("/");
        const lastIndex = pathArray.length - 1;
        return pathArray[lastIndex];
    }

    init(entries, files, converter);
})();

## run.cmd
http-server -a localhost -p 1234 -o

## style.css
@import url('https://fonts.googleapis.com/css?family=Caladea:400|Nunito+Sans:400');
.signature{
  font-family: 'Caladea', sans-serif;

}
#MicroBlog{
    max-width: 800px;
    margin: 0 auto;
}

html {font-size: 100%;} /*16px*/

body{
    margin: 2.75rem 2.75rem 1.05rem;
     font-family: 'Nunito Sans', sans-serif;

    font-weight: 400;
    line-height: 1.65;
    text-align: justify;
}

body, a {
    background-color: #222;
    color: white;
}

 hr{
     margin:10vh;
 }


 p {margin-bottom: 1.15rem;}

 h1, h2, h3, h4, h5 {
   text-align: left;
   margin: 2.75rem 0 1.05rem;
   font-family: 'Caladea', sans-serif;
   font-weight: 400;
   line-height: 1.15;
 }

 h1 {
   margin-top: 0;
   font-size: 2.488em;
 }

 h2 {font-size: 2.074em;}

 h3 {font-size: 1.728em;}

 h4 {font-size: 1.44em;}

 h5 {font-size: 1.2em;}

 small, .text_small {font-size: 0.833em;}
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"
	crossorigin="anonymous" type="text/javascript"></script>
	<link rel="stylesheet" href="./style.css">
	<script src="./MicroBlog.js"></script>
	<title>Micro Blog</title>
	</head>

	<body>
	<div id="MicroBlog"></div>
	</body>

	</html>
	(function () {
	let files = [
	'readme.md'
	];
	let converter = new showdown.Converter();
	let entries = [];

	function updateBlog(_entries, _files) {
	let blog = document.getElementById("MicroBlog");
	if (blog != null) {
	blog.innerHTML = "";
	let sortedEntries = _entries.sort(function (a, b) {
	return (getIndex(a.url, _entries, _files) < getIndex(b.url, _entries, _files)) ? -1 : 1;
	});
	for (let i = 0; i < sortedEntries.length; i++) {
	blog.innerHTML += sortedEntries[i].html;
	blog.innerHTML += "<!--" + sortedEntries[i].url + "-->";
	}
	}
	}

	function init(_entries, _files, _converter) {
	for (let f = 0; f < _files.length; f++) {
	let client = new XMLHttpRequest();
	client.open('GET', './' + _files[f]);
	client.send();
	client.onreadystatechange = function () {
	if (client.readyState != 4) return;
	let html = _converter.makeHtml(client.responseText);
	let url = client.responseURL;
	_entries.push({
	html: html,
	url: url
	});
	if (_entries.length == _files.length) {
	updateBlog(_entries, _files);
	}
	}
	}
	}

	function getIndex(_url, _entries, _files) {
	var fileName = extractFilename(_url);
	var index = 0;
	for (var i = 0; i < _files.length; i++) {
	let fileNameFromIndex = _files[i];
	if (fileNameFromIndex === fileName) {
	index = i;
	}
	}
	return index;
	}

	function extractFilename(_path) {
	const pathArray = _path.split("/");
	const lastIndex = pathArray.length - 1;
	return pathArray[lastIndex];
	}

	init(entries, files, converter);
	})();
	@import url('https://fonts.googleapis.com/css?family=Caladea:400\|Nunito+Sans:400');
	.signature{
	font-family: 'Caladea', sans-serif;

	}
	#MicroBlog{
	max-width: 800px;
	margin: 0 auto;
	}

	html {font-size: 100%;} /16px/

	body{
	margin: 2.75rem 2.75rem 1.05rem;
	font-family: 'Nunito Sans', sans-serif;

	font-weight: 400;
	line-height: 1.65;
	text-align: justify;
	}

	body, a {
	background-color: #222;
	color: white;
	}

	hr{
	margin:10vh;
	}


	p {margin-bottom: 1.15rem;}

	h1, h2, h3, h4, h5 {
	text-align: left;
	margin: 2.75rem 0 1.05rem;
	font-family: 'Caladea', sans-serif;
	font-weight: 400;
	line-height: 1.15;
	}

	h1 {
	margin-top: 0;
	font-size: 2.488em;
	}

	h2 {font-size: 2.074em;}

	h3 {font-size: 1.728em;}

	h4 {font-size: 1.44em;}

	h5 {font-size: 1.2em;}

	small, .text_small {font-size: 0.833em;}