jekyll-theme-satellite 1.1.2 → 1.2.4

Sign up to get free protection for your applications and to get access to all the features.
data/assets/js/common.js CHANGED
@@ -10,18 +10,6 @@ document.addEventListener('DOMContentLoaded', function(){
10
10
  themeIcons.forEach((ico) => {
11
11
  ico.classList.add('active');
12
12
  });
13
- /*
14
- const moonIcons = document.querySelectorAll(".ico-dark");
15
- const sunIcons = document.querySelectorAll(".ico-light");
16
-
17
- moonIcons.forEach((ico) => {
18
- ico.classList.add('active');
19
- });
20
-
21
- sunIcons.forEach((ico) => {
22
- ico.classList.add('active');
23
- });
24
- */
25
13
  }
26
14
  else {
27
15
  isDarkMode = false;
@@ -95,6 +83,7 @@ document.addEventListener('DOMContentLoaded', function(){
95
83
 
96
84
  // Change Datk/Light Theme
97
85
  const themeButton = document.querySelectorAll("#btn-brightness");
86
+ const innerContent = document.querySelector('main');
98
87
 
99
88
  themeButton.forEach((btn) => {
100
89
  btn.addEventListener('click', function() {
@@ -114,16 +103,18 @@ document.addEventListener('DOMContentLoaded', function(){
114
103
  if (isDarkMode){
115
104
  localStorage.setItem('theme', 'default');
116
105
  // Disable highlighter dark color theme
117
- document.getElementById("highlight-default").disabled=false;
118
- document.getElementById("highlight-dark").disabled=true;
106
+ Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
107
+ codeblock.classList.remove('pre-dark');
108
+ });
119
109
  changeGiscusTheme('light');
120
110
  isDarkMode = false;
121
111
  }
122
112
  else {
123
113
  localStorage.setItem('theme', 'dark');
124
114
  // Disable highlighter default color theme
125
- document.getElementById("highlight-default").disabled=true;
126
- document.getElementById("highlight-dark").disabled=false;
115
+ Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
116
+ codeblock.classList.add('pre-dark');
117
+ });
127
118
  changeGiscusTheme('noborder_gray');
128
119
  isDarkMode = true;
129
120
  }
@@ -152,7 +143,7 @@ document.addEventListener('DOMContentLoaded', function(){
152
143
  searchButton.forEach((btn) => {
153
144
  btn.addEventListener('click', function() {
154
145
  searchPage.classList.add('active');
155
- $('#search-input').focus();
146
+ document.getElementById("search-input").focus();
156
147
  });
157
148
  });
158
149
  }
@@ -171,9 +162,191 @@ document.addEventListener('DOMContentLoaded', function(){
171
162
 
172
163
  if (cancelButton) {
173
164
  cancelButton.addEventListener('click', function() {
174
- $('.result-item').remove();
175
- $('#search-input').val("");
176
- $('#btn-clear').hide();
165
+ document.getElementById('btn-clear').style.display = 'none';
166
+ document.getElementById('search-input').value = "";
167
+
168
+ Array.from(document.querySelectorAll('.result-item')).forEach(function (item) {
169
+ item.remove();
170
+ });
171
+ });
172
+ }
173
+ });
174
+
175
+ function searchPost(pages){
176
+ document.getElementById('search-input').addEventListener('keyup', function() {
177
+ var keyword = this.value.toLowerCase();
178
+ var matchedPosts = [];
179
+ const searchResults = document.getElementById('search-result');
180
+ const prevResults = document.querySelector(".result-item");
181
+
182
+ if (keyword.length > 0) {
183
+ searchResults.style.display = 'block';
184
+ document.getElementById('btn-clear').style.display = 'block';
185
+ } else {
186
+ searchResults.style.display = 'none';
187
+ document.getElementById('btn-clear').style.display = 'none';
188
+ }
189
+
190
+ Array.from(document.querySelectorAll('.result-item')).forEach(function (item) {
191
+ item.remove();
192
+ });
193
+
194
+ for (var i = 0; i < pages.length; i++) {
195
+ var post = pages[i];
196
+
197
+ if (post.title === 'Home' && post.type == 'category') continue;
198
+
199
+ if (post.title.toLowerCase().indexOf(keyword) >= 0
200
+ || post.path.toLowerCase().indexOf(keyword) >= 0
201
+ || post.tags.toLowerCase().indexOf(keyword) >= 0){
202
+ matchedPosts.push(post);
203
+ }
204
+ }
205
+
206
+ if (matchedPosts.length === 0) {
207
+ insertItem('<span class="description">There is no search result.</span>');
208
+
209
+ return;
210
+ }
211
+
212
+ matchedPosts.sort(function (a, b) {
213
+ if (a.type == 'category') return 1;
214
+
215
+ return -1;
216
+ });
217
+
218
+ for (var i = 0; i < matchedPosts.length; i++) {
219
+ var highlighted_path = highlightKeyword(matchedPosts[i].path, keyword);
220
+
221
+ if (highlighted_path === '')
222
+ highlighted_path = "Home";
223
+
224
+ if (matchedPosts[i].type === 'post'){
225
+ var highlighted_title = highlightKeyword(matchedPosts[i].title, keyword);
226
+ var highlighted_tags = highlightKeyword(matchedPosts[i].tags, keyword);
227
+
228
+ if (highlighted_tags === '')
229
+ highlighted_tags = "none";
230
+
231
+ insertItem('<a href="' +
232
+ matchedPosts[i].url +
233
+ '"><table><thead><tr><th><svg class="ico-book"></svg></th><th>' + highlighted_title +
234
+ '</th></tr></thead><tbody><tr><td><svg class="ico-folder"></svg></td><td>' + highlighted_path +
235
+ '</td></tr><tr><td><svg class="ico-tags"></svg></td><td>' + highlighted_tags +
236
+ '</td></tr><tr><td><svg class="ico-calendar"></svg></td><td>' + matchedPosts[i].date +
237
+ '</td></tr></tbody></table></a>'
238
+ );
239
+ }
240
+ else {
241
+ insertItem('<a href="' +
242
+ matchedPosts[i].url +
243
+ '"><table><thead><tr><th><svg class="ico-folder"></svg></th><th>' + highlighted_path +
244
+ '</th></tr></thead></table></a>'
245
+ );
246
+ }
247
+ }
248
+
249
+ function insertItem(inner_html){
250
+ let contents = document.createElement("li");
251
+ contents.classList.add("result-item");
252
+ contents.innerHTML = inner_html;
253
+ searchResults.append(contents);
254
+ }
255
+ });
256
+
257
+ function highlightKeyword(txt, keyword) {
258
+ var index = txt.toLowerCase().lastIndexOf(keyword);
259
+
260
+ if (index >= 0) {
261
+ out = txt.substring(0, index) +
262
+ "<span class='highlight'>" +
263
+ txt.substring(index, index+keyword.length) +
264
+ "</span>" +
265
+ txt.substring(index + keyword.length);
266
+ return out;
267
+ }
268
+
269
+ return txt;
270
+ }
271
+ }
272
+
273
+ function searchRelated(pages){
274
+ const refBox = document.getElementById('related-box');
275
+ const refResults = document.getElementById('related-posts');
276
+
277
+ if (!refBox) return;
278
+
279
+ var relatedPosts = [];
280
+ var currPost = pages.find(obj => {return obj.url === location.pathname});
281
+
282
+ let currTags = currPost.tags.split(', ');
283
+ let currCategory = currPost.path.split(' > ').pop();
284
+
285
+ for (var i = 0; i < pages.length; i++) {
286
+ let page = pages[i];
287
+
288
+ if (page.type === 'category') continue;
289
+
290
+ if (page.title === currPost.title) continue;
291
+
292
+ let tags = page.tags.split(', ');
293
+ let category = page.path.split(' > ').pop();
294
+ let correlationScore = 0;
295
+
296
+ for (var j = 0; j < currTags.length; j++){
297
+ if (tags.indexOf(currTags[j]) != -1) correlationScore += 1;
298
+ }
299
+
300
+ if (category === currCategory) correlationScore += 1;
301
+
302
+ if (correlationScore == 0) continue;
303
+
304
+ relatedPosts.push({
305
+ 'title': page.title,
306
+ 'date': page.date,
307
+ 'category': category,
308
+ 'url': page.url,
309
+ 'thumbnail': page.image,
310
+ 'score': correlationScore
177
311
  });
178
312
  }
179
- });
313
+
314
+ relatedPosts.sort(function (a, b) {
315
+ if(a.hasOwnProperty('score')){
316
+ return b.score - a.score;
317
+ }
318
+ });
319
+
320
+ if (relatedPosts.length == 0){
321
+ refBox.style.display = 'none';
322
+ return;
323
+ }
324
+
325
+ for (var i = 0; i < Math.min(relatedPosts.length, 6); i++){
326
+ let post = relatedPosts[i];
327
+ let date = '-';
328
+ let category = 'No category';
329
+
330
+ if (post.date !== '1900-01-01'){
331
+ date = new Date(post.date);
332
+ date = date.toLocaleString('en-US', {day: 'numeric', month:'long', year:'numeric'});
333
+ }
334
+
335
+ if (post.category !== '') category = post.category;
336
+
337
+ if (post.thumbnail === ''){
338
+ post.thumbnail = "/assets/img/thumbnail/empty.jpg";
339
+ }
340
+
341
+ let contents = document.createElement("li");
342
+ contents.classList.add("related-item");
343
+ contents.innerHTML = '<a href="' + post.url +
344
+ '"><img src="' + post.thumbnail +
345
+ '"/><p class="category">' + category +
346
+ '</p><p class="title">' + post.title +
347
+ '</p><p class="date">' + date +
348
+ '</p></a>';
349
+
350
+ refResults.append(contents);
351
+ }
352
+ }
data/assets/js/post.js CHANGED
@@ -1,82 +1,175 @@
1
1
  document.addEventListener('DOMContentLoaded', function(){
2
- var content = document.querySelector('main');
2
+ var innerContent = document.querySelector('main');
3
3
  let currentTheme = localStorage.getItem('theme');
4
4
 
5
- // Lazy image loading
6
- var images = content.querySelectorAll('img');
5
+ // tocbot
6
+ var headings = innerContent.querySelectorAll('h1, h2');
7
+ var prevHead;
7
8
 
8
- images.forEach((img) => {
9
- img.setAttribute('loading', 'lazy');
10
- });
9
+ const tocBorad = document.querySelector(".toc-board");
10
+
11
+ Array.from(headings).forEach(function(heading){
12
+ let tocItem = document.createElement("li");
13
+ tocItem.classList.add("toc-list-item");
11
14
 
12
- // tocbot
13
- var headings = content.querySelectorAll('h1, h2');
14
- var headingMap = {};
15
+ let itemLink = document.createElement("a");
16
+ itemLink.classList.add("toc-link");
17
+ itemLink.id = "toc-id-" + heading.textContent;
18
+ itemLink.textContent = heading.textContent;
19
+
20
+ tocItem.append(itemLink);
15
21
 
16
- Array.prototype.forEach.call(headings, function (heading) {
17
- var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
18
- .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '');
22
+ itemLink.addEventListener('click', function(){
23
+ heading.scrollIntoView({
24
+ behavior: 'smooth'
25
+ });
26
+ });
19
27
 
20
- headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
28
+ console.log(heading.textContent, heading.getBoundingClientRect().top);
21
29
 
22
- if (headingMap[id]) {
23
- heading.id = id + '-' + headingMap[id];
24
- } else {
25
- heading.id = id;
30
+ if (heading.tagName == 'H1'){
31
+ itemLink.classList.add("node-name--H1");
32
+ prevHead = tocItem;
33
+ tocBorad.append(tocItem);
26
34
  }
27
- })
35
+ else {
36
+ itemLink.classList.add("node-name--H2");
37
+
38
+ if (prevHead == undefined) {
39
+ tocBorad.append(tocItem);
40
+ return;
41
+ }
42
+
43
+ let subList = prevHead.querySelector('ol');
44
+
45
+ if (!subList){
46
+ subList = document.createElement("ol");
47
+ subList.classList.add("toc-list");
48
+ prevHead.append(subList);
49
+ }
28
50
 
29
- tocbot.init({
30
- tocSelector: '.toc-board',
31
- contentSelector: '.inner-content',
32
- headingSelector:'h1, h2',
33
- hasInnerContainers: false
51
+ subList.append(tocItem);
52
+ }
34
53
  });
35
54
 
55
+ setInterval(function(){
56
+ var scrollPos = document.documentElement.scrollTop;
57
+
58
+ Array.from(tocBorad.querySelectorAll('.toc-link')).forEach(function(link){
59
+ link.classList.remove('is-active-link');
60
+ });
61
+
62
+ var currHead;
63
+
64
+ Array.from(headings).forEach(function(heading){
65
+ let headPos = heading.getBoundingClientRect().top + window.scrollY - 512;
66
+
67
+ if (scrollPos > headPos) currHead = heading;
68
+ });
69
+
70
+ if (currHead != undefined){
71
+ let tocLink = document.getElementById("toc-id-" + currHead.textContent);
72
+ tocLink.classList.add('is-active-link');
73
+ }
74
+ }, 200);
75
+
36
76
  // link (for hover effect)
37
- var links = content.querySelectorAll('a:not(.related-item a)');
77
+ var links = innerContent.querySelectorAll('a:not(.related-item a)');
38
78
 
39
79
  links.forEach((link) => {
40
80
  link.setAttribute('data-content', link.innerText);
41
81
  });
42
82
 
43
- // code clipboard copy button
44
- async function copyCode(block) {
45
- let code = block.querySelector("code");
46
- let text = code.innerText;
47
-
48
- await navigator.clipboard.writeText(text);
83
+ // Tag EventListener
84
+ const searchPage = document.querySelector("#search");
85
+
86
+ document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){
87
+ tagButton.addEventListener('click', function() {
88
+ const contentID = tagButton.getAttribute('contentID');
89
+ const inpuxBox = document.getElementById('search-input');
90
+ searchPage.classList.add('active');
91
+
92
+ inpuxBox.value = contentID;
93
+ inpuxBox.dispatchEvent(new KeyboardEvent('keyup'));
94
+ });
95
+ });
96
+
97
+ // Move to Top
98
+ if (document.querySelector('.thumbnail')){
99
+ const arrowButton = document.querySelector('.top-arrow');
100
+
101
+ setInterval(function(){
102
+ var scrollPos = document.documentElement.scrollTop;
103
+
104
+ if (scrollPos < 512){
105
+ arrowButton.classList.remove('arrow-open');
106
+ }
107
+ else {
108
+ arrowButton.classList.add('arrow-open');
109
+ }
110
+ }, 1000);
111
+
112
+ arrowButton.addEventListener('click', function(){
113
+ window.scroll({top:0, behavior:'smooth'});
114
+ });
49
115
  }
50
116
 
51
- let blocks = document.querySelectorAll("pre");
117
+ // Move to Comment
118
+ document.getElementById('comments-counter').addEventListener('click', function(){
119
+ document.getElementById("giscus").scrollIntoView({
120
+ behavior: 'smooth'
121
+ });
122
+ });
52
123
 
53
- blocks.forEach((block) => {
54
- // only add button if browser supports Clipboard API
55
- if (navigator.clipboard) {
56
- let clip_btn = document.createElement("button");
57
- let clip_img = document.createElement("svg");
124
+ // Code highlighter
125
+ if (currentTheme === 'dark'){
126
+ // Disable highlighter default color theme
127
+ Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
128
+ codeblock.classList.add('pre-dark');
129
+ });
130
+ }
131
+ });
58
132
 
59
- clip_btn.setAttribute('title', "Copy Code");
60
- clip_img.ariaHidden = true;
133
+ window.addEventListener('load', function(){
134
+ // Page Hits
135
+ const pageHits = document.getElementById('page-hits');
61
136
 
62
- block.appendChild(clip_btn);
63
- clip_btn.appendChild(clip_img);
137
+ if (pageHits) {
138
+ const goatcounterCode = pageHits.getAttribute('usercode');
139
+ const requestURL = 'https://'
140
+ + goatcounterCode
141
+ + '.goatcounter.com/counter/'
142
+ + encodeURIComponent(location.pathname)
143
+ + '.json';
64
144
 
65
- clip_btn.addEventListener("click", async () => {
66
- await copyCode(block, clip_btn);
67
- });
68
- }
145
+ var resp = new XMLHttpRequest();
146
+ resp.open('GET', requestURL);
147
+ resp.onerror = function() { pageHits.innerText = "0"; };
148
+ resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; };
149
+ resp.send();
150
+ }
151
+
152
+ // Highlighter
153
+ hljs.highlightAll();
154
+
155
+ // Disable code highlights to the plaintext codeblocks
156
+ document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){
157
+ codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){
158
+ $.outerHTML = $.innerHTML;
159
+ });
69
160
  });
70
161
 
71
162
  // Initialize/Change Giscus theme
72
163
  var giscusTheme = "light";
73
164
 
74
- const giscus_repo = $('meta[name="giscus_repo"]').attr("content");
75
- const giscus_repoId = $('meta[name="giscus_repoId"]').attr("content");
76
- const giscus_category = $('meta[name="giscus_category"]').attr("content");
77
- const giscus_categoryId = $('meta[name="giscus_categoryId"]').attr("content");
165
+ const giscus_repo = document.querySelector('meta[name="giscus_repo"]').content;
166
+ const giscus_repoId = document.querySelector('meta[name="giscus_repoId"]').content;
167
+ const giscus_category = document.querySelector('meta[name="giscus_category"]').content;
168
+ const giscus_categoryId = document.querySelector('meta[name="giscus_categoryId"]').content;
78
169
 
79
170
  if (giscus_repo !== undefined) {
171
+ let currentTheme = localStorage.getItem('theme');
172
+
80
173
  if (currentTheme === 'dark'){
81
174
  giscusTheme = "noborder_gray";
82
175
  }
@@ -101,91 +194,49 @@ document.addEventListener('DOMContentLoaded', function(){
101
194
  document.body.appendChild(giscusScript);
102
195
  }
103
196
 
197
+ // code clipboard copy button
198
+ async function copyCode(block) {
199
+ let code = block.querySelector("code");
200
+ let text = code.innerText;
201
+
202
+ await navigator.clipboard.writeText(text);
203
+ }
204
+
205
+ let blocks = document.querySelectorAll("pre");
206
+
207
+ blocks.forEach((block) => {
208
+ // only add button if browser supports Clipboard API
209
+ if (navigator.clipboard) {
210
+ let clip_btn = document.createElement("button");
211
+ let clip_img = document.createElement("svg");
212
+
213
+ clip_btn.setAttribute('title', "Copy Code");
214
+ clip_img.ariaHidden = true;
215
+
216
+ block.appendChild(clip_btn);
217
+ clip_btn.appendChild(clip_img);
218
+
219
+ clip_btn.addEventListener("click", async () => {
220
+ await copyCode(block, clip_btn);
221
+ });
222
+ }
223
+ });
224
+
104
225
  // Giscus IMetadataMessage event handler
105
226
  function handleMessage(event) {
106
227
  if (event.origin !== 'https://giscus.app') return;
107
228
  if (!(typeof event.data === 'object' && event.data.giscus)) return;
108
229
 
109
230
  const giscusData = event.data.giscus;
231
+ const commentCount = document.getElementById('num-comments');
110
232
 
111
233
  if (giscusData && giscusData.hasOwnProperty('discussion')) {
112
- $('#num-comments').text(giscusData.discussion.totalCommentCount);
234
+ commentCount.innerText = giscusData.discussion.totalCommentCount;
113
235
  }
114
236
  else {
115
- $('#num-comments').text('0');
237
+ commentCount.innerText = '0';
116
238
  }
117
239
  }
118
240
 
119
241
  window.addEventListener('message', handleMessage);
120
-
121
- // Tag EventListener
122
- const searchPage = document.querySelector("#search");
123
-
124
- document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){
125
- tagButton.addEventListener('click', function() {
126
- const contentID = tagButton.getAttribute('contentID');
127
- searchPage.classList.add('active');
128
-
129
- $('#search-input').val(contentID);
130
- $('#search-input').trigger('keyup');
131
- });
132
- });
133
-
134
- // Page Hits
135
- const pageHits = document.getElementById('page-hits');
136
-
137
- if (pageHits) {
138
- const goatcounterCode = pageHits.getAttribute('usercode');
139
- const requestURL = 'https://'
140
- + goatcounterCode
141
- + '.goatcounter.com/counter/'
142
- + encodeURIComponent(location.pathname)
143
- + '.json';
144
-
145
- var resp = new XMLHttpRequest();
146
- resp.open('GET', requestURL);
147
- resp.onerror = function() { pageHits.innerText = "0"; };
148
- resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; };
149
- resp.send();
150
- }
151
-
152
- // Sweat Scroll
153
- const scroller = new SweetScroll({
154
- /* some options */
155
- });
156
-
157
- // Move to Top
158
- if (document.querySelector('.thumbnail')){
159
- const arrowButton = document.querySelector('.top-arrow');
160
-
161
- setInterval(function(){
162
- var scrollPos = document.documentElement.scrollTop;
163
-
164
- if (scrollPos < 512){
165
- arrowButton.classList.remove('arrow-open');
166
- }
167
- else {
168
- arrowButton.classList.add('arrow-open');
169
- }
170
- }, 1000);
171
- }
172
-
173
- // Code highlighter
174
- if (currentTheme === 'dark'){
175
- // Disable highlighter default color theme
176
- document.getElementById("highlight-default").disabled=true;
177
- }
178
- else {
179
- // Disable highlighter dark color theme
180
- document.getElementById("highlight-dark").disabled=true;
181
- }
182
-
183
- hljs.highlightAll();
184
-
185
- // Disable code highlights to the plaintext codeblocks
186
- document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){
187
- codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){
188
- $.outerHTML = $.innerHTML;
189
- });
190
- });
191
242
  });
data/assets/js/subject.js CHANGED
@@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function(){
96
96
  }
97
97
  });
98
98
 
99
- $('html, body').scrollTop(0);
99
+ window.scrollTo({top:0});
100
100
  localStorage.setItem(pageKey, currentPage);
101
101
  };
102
102