TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
		<meta name="theme-color" content="#ff9224">
		<script src="../../../script/jquery.min.js"></script>
		<link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
		<script src="../../../script/semantic/semantic.min.js"></script>
		<link rel="stylesheet" href="blog.css">
		<title>{{blog_title}}</title>
		<style>

		</style>
	</head>
	<body>
		<div class="ui padded attached black inverted segment">
			<br><br>
			<div class="ui container" >
				<h1 class="ui header" style="color: white;">
					{{blog_title}}
					<div class="sub header" style="color: white;">{{blog_subtitle}}</div>
				</h1>
			</div>
			<br><br>
		</div>
		<br>
		<div class="ui narrow container relaxed stackable grid">
			<div class="sixteen wide column" id="postlist">
				<!-- Post List -->
				<div class="ui segment post">
					<div class="ui teal ribbon label"> owo</div>
					<h2 class="ui header">
						<a href="" style="color: inherit;">No Posts</a> 
						<div class="sub header">
							There are no post in this blog
						</div>
					</h2>
					<p>
						The posts.json index file is not found on this server or there is no post listed in the index file. <br>
						That is all we know.
					</p>
				</div>
				
			</div>
		</div>
		
		<!-- footer -->
		<div class="ui container">
			<div class="ui divider"></div>
			{{footer}}
		</div>
		<script>
			loadPostList(0, 20);

			function loadPostList(startIndex=0, renderPostNumber = 20){
				
				$.getJSON("posts.json", function(posts){
					
					if (posts.error != undefined || posts.length == 0){
						//Error occured
					}else{
						$("#postlist").html(``);
						posts.reverse(); //From latested to oldest
						posts.forEach(post => {
							//Generate tag index
							var tags = post.summary[2];
							var tagsHTML = ``;
							for (var i = 0; i < tags.length; i++){
								tags[i] = `<a class="section">${tags[i]}</a>`;
							}
							tagsHTML = tags.join(`<span class="divider">,</span>`);

							//Generate contents 
							let tmp = document.createElement("DIV");
							tmp.innerHTML = post.summary[1];
							let strippedContent = tmp.textContent || tmp.innerText || "";

							$("#postlist").append(`<div class="ui segment post">
							<div class="ui blue ribbon label"> 2021-05-30</div>
							<h2 class="ui header">
								<a href="./posts/${post.name}.html" style="color: inherit;">${post.summary[0]}</a> 
								<div class="sub header">
									<div class="ui breadcrumb">
										${tagsHTML}
									</div>
								</div>
							</h2>
							<p>
								${strippedContent}
							</p>
							<a href="./posts/${post.name}.html">Read More</a>
						</div>`);
						});
						
					}
				});
			}
		</script>
	</body>
</html>