-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (100 loc) · 3.54 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="welcome to superstring's blog" />
<meta name="keywords" content="superstring, blog" />
<base href="./" />
<title>Superstring's Blog</title>
<link rel="shortcut icon" href="assets/moon.png" type="image/x-icon" />
<link
rel="stylesheet"
href="//unpkg.com/[email protected]/dist/paper.min.css"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/index.css" />
</head>
<body>
<nav class="split-nav">
<div class="nav-brand">
<h3><a href="#">Superstring</a></h3>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible1" />
<button>
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
<div class="collapsible-body">
<ul class="inline"></ul>
</div>
</div>
</nav>
<div class="blog"></div>
<script src="assets/js/util.js"></script>
<script>
function addCard(url, cover, title, subtitle) {
return `
<div class="card">
<img src="${cover}" alt="card image" />
<div class="card-body">
<h4 class="card-title">${title}</h4>
<h5 class="card-subtitle">${subtitle}</h5>
<button><a href="${url}">Read More</a></button>
</div>
</div>
`;
}
function addListItem(title, url) {
return `<li><a href="${url}">${title}</a></li>`;
}
function addTopic(topic = '') {
return `
<h3 class="topic title">
<span class="badge success"># ${topic.toUpperCase()}</span>
</h3>
`;
}
function addBlog(blog = {}) {
const $nav = document.querySelector('.collapsible-body > ul');
const $blog = document.querySelector('.blog');
for (let [type, topic] of Object.entries(blog)) {
// add nav
$nav.innerHTML += `<li><a href="#${type}">${capital(type)}</a></li>`;
// add blog
let $blogTopicStr = `<div class="blog-topic" id="${type}">`;
$blogTopicStr += addTopic(type);
$blogTopicStr += `<div class="blog-preview">`;
topic.card.forEach(function(card) {
$blogTopicStr += addCard(
card.url,
card.cover,
card.title,
card.subtitle
);
});
$listStr = `<div><a class="more border border-secondary shadow shadow-hover" href="./more.html?type=${type}">more</a><ul>`;
for (let i = 0; i < topic.list.length && i < 10; i++) {
const item = topic.list[i];
$listStr += `<li><a href="${item.url}">${item.title}</a></li>`;
}
$listStr += `</ul></div>`;
$blogTopicStr += $listStr;
$blogTopicStr += `</div></div>`;
$blog.innerHTML += $blogTopicStr;
}
$nav.innerHTML += `<li><a href="https://github.com/superstring">Github</a></li>`;
}
window.onload = function() {
this.simpleAjax('GET', 'index.json', null, function(data) {
addBlog(JSON.parse(data));
});
};
</script>
</body>
</html>