-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdebug.html
152 lines (131 loc) · 5.84 KB
/
debug.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="ko_KR">
<head>
<meta charset="UTF-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>디버그 페이지</title>
<link href="./styles/style_main.css" rel="stylesheet"/>
<link href="./styles/style_sub.css" rel="stylesheet"/>
<link href="./styles/style_comment.css" rel="stylesheet"/>
<link rel="icon" href="./resources/image/favicon.ico">
<script src="./scripts/click-script.js"></script>
<!-- https://swiperjs.com/demos#effect-coverflow -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- download fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ingrid+Darling&family=Italianno&family=Noto+Serif+KR&display=swap" rel="stylesheet">
</head>
<body>
<div class="full-page">
<!-- Page 7 : Comments -->
<div class="content-page">
<div class="header-date">7 / 13</div>
<div class="header-line"></div>
<div class="header"></div>
<div>방명록의 스타일을 아직 꾸미지 않아서 날 것 입니다. 참고 바랍니다.</div>
<section id="comments">
<div class="comment-actions">
<h1 class="titleText">방명록 <span id="comments-count"></span></h1>
<a
class="button"
href="https://github.com/hinohie/hinohie.github.io/issues/23"
>방명록 남기러 가기 (github 계정 필요)</a
>
</div>
<div id="comments-wrapper">
Loading...
</div>
</section>
<div class="footer"></div>
</div>
<!-- Comments script -->
<script>
const commentsSection = document.getElementById('comments');
const commentsWrapper = commentsSection.querySelector('#comments-wrapper');
const commentsCount = commentsSection.querySelector('#comments-count');
const commentsObserver = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
fetchComments(); // this is the important part
self.unobserve(entry.target);
}
});
}, { rootMargin: '200px 0px 0px 0px' });
commentsObserver.observe(commentsSection);
const fetchComments = async () => {
try {
const comments = await (await fetch(
'https://api.github.com/repos/hinohie/hinohie.github.io/issues/23/comments'
)).json();
initRenderComments(comments);
} catch (e) {
commentsWrapper.innerHTML = `<p>Unable to retrieve the comments for this post.</p>`;
}
}
const loadScript = (src) => {
const scriptElement = document.createElement('script');
document.body.appendChild(scriptElement);
return new Promise((resolve) => {
scriptElement.onload = resolve;
// Important to register onload before setting src
scriptElement.src = src;
});
}
const commentScripts = [
'https://unpkg.com/[email protected]/marked.min.js',
'https://unpkg.com/[email protected]/dist/purify.min.js',
'https://unpkg.com/[email protected]/dayjs.min.js',
'https://unpkg.com/[email protected]/plugin/relativeTime.js',
];
// Reminder: this gets called when the viewport intersects with the comments section
const initRenderComments = async (comments) => {
if (!comments.length) {
commentsWrapper.innerHTML = `<p>No comments yet 👀 Be the first to post!</p>`;
return;
}
// Load all comment script dependencies async
await Promise.all(commentScripts.map((script) => loadScript(script)));
renderComments(comments);
}
const renderComments = (comments) => {
// load the relativeTime plugin for dayjs so we can express dates relative to now
dayjs.extend(dayjs_plugin_relativeTime);
commentsCount.innerText = `(${comments.length})`;
const commentsList = document.createElement('ol');
commentsList.className = 'comments-list';
commentsList.setAttribute('aria-label', 'Comments on this blog post');
commentsList.innerHTML = comments
.sort((comment1, comment2) => {
return comment1.created_at < comment2.created_at ? 1 : -1;
})
.map(comment => {
const datePosted = dayjs(comment.created_at).fromNow();
const user = comment.user;
const body = DOMPurify.sanitize(marked(comment.body));
const postedByAuthor = comment.author_association === 'OWNER';
const edited = comment.created_at !== comment.updated_at;
return `<li class="comment">
<div class="commenter">
<img src="${user.avatar_url}" alt="" aria-hidden="true" class="meta_avatar" />
<a
href="https://github.com/${user.login}"
class="meta_username"
>${user.login}</a
>
<div class="meta_date-posted">commented <time datetime="${comment.created_at}">${datePosted}</time></div>
${postedByAuthor ? '<span class="meta_tag_author-badge">Author</span>' : ''}
${edited ? `<span class="meta_comment-edited">Edited</span>` : ''}
</div>
<div class="comment-body">${body}</div>
</li>`;
})
.join('');
commentsWrapper.innerHTML = '';
commentsWrapper.appendChild(commentsList);
}
</script>
</div>
</body>
</html>