jekyll-theme-satellite 1.1.2 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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