summaryrefslogtreecommitdiff
path: root/scripts/blog.js
blob: 65fc02e62056fceb5740ee6ac0ed8a5b660ad306 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
var evaluatedTags = "";
const clamp = (val, min, max) => Math.min(Math.max(val, min), max)

function postList(n = 0) {
	fetch("/data/posts.json")
		.then((response) => response.json())
		.then((data) => {
			n = clamp(n, 0, data.posts.length);
			if (n < 1) {
				n = data.posts.length;
			}

			// i ❤ for loops
			for (var i = n - 1; i >= 0; i--) {
				console.log("dkfjlaafjsdk" + i)
				postCard(data.posts[i]);
			}
		});
}

function postCard(post) {
	var blogContainer = document.getElementById("blog-container");
	
	var title = post.title;
	var date = post.date;
	var author = post.author;
	var tags = post.tags;
	var thumbnail = post.thumbnail;
	var id = post.id;

	evaluatedTags = "";
	tags.forEach(createTags)

	var template = `
					<div class="card" tabindex="9999">
						<img src="${thumbnail}"
							alt="">
						<div>
							<div class="flex-container-normal chip-container"> 
								${evaluatedTags}
							</div>
							<a href="/blog/post.html?post=${id}" class="link">${title}</a>
							<p>${date}</p>
						</div>
					</div>
		`

	blogContainer.innerHTML += template;
}

function createTags(tag) {
	evaluatedTags += `<span class="chip">${tag}</span>`
}

function getUrlVars() {
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for (var i = 0; i < hashes.length; i++) {
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}

// DEPENDENCIES
// * /scripts/scroll.js
function loadPost(n) {
	const md = markdownit({
		'html': true
	})

	fetch("/data/posts.json")
		.then((response) => response.json())
		.then((data) => {
			var post = data.posts[n];
			
			var banner = document.getElementById("banner");
			var title = document.getElementById("title");
			var date = document.getElementById("date");
			var author = document.getElementById("author");
			var tags = document.getElementById("tag-container");
			var content = document.getElementById("content");

			banner.src = post.banner;
			title.innerHTML = post.title;
			date.innerHTML = post.date;
			author.innerHTML = post.author;
			post.tags.forEach(createTags);
			tags.innerHTML = evaluatedTags;

			document.title = `Blog / ${post.title} • altaf-creator`;

			fetch(post.path)
				.then((response) => response.text())
				.then((data) => {
					data = data.replaceAll("-+-+-+", `
<section class="normal-section">
<div class="center-grid">
<div class="div-sizing" id="content">
`)
					data = data.replaceAll("+-+-+-", `
</div>
</div>
</section>
`)

					console.log(data);


					var result = md.render(data);
					result = result.replaceAll("<a", `<a class="link"`);
					result = result.replaceAll("<img", `<img style="max-width: 100%;"`);
					content.innerHTML = result;
				}).then(() => addNodes());
		});
}