Skip to content

Commit 6c3772d

Browse files
iasonliuiasonliu
authored
Merge pull request #40 from 42devops/perf-optimization
chore: optimize script loading and math rendering
2 parents 0862f44 + 17cfdb4 commit 6c3772d

3 files changed

Lines changed: 97 additions & 92 deletions

File tree

‎_layouts/default.html‎

Lines changed: 4 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
<link rel="stylesheet" href="/css/syntax.css?v={{ site.time | date: '%s' }}" type="text/css" />
1616
<link rel="stylesheet" href="/css/screen.css?v={{ site.time | date: '%s' }}" type="text/css" />
1717

18+
{% if page.math %}
1819
<!-- KaTeX CSS & JS for Math equations -->
1920
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" crossorigin="anonymous">
2021
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" crossorigin="anonymous"></script>
2122
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" crossorigin="anonymous"
22-
onload="renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\\[', right: '\\\]', display: true}, {left: '\\\(', right: '\\\)', display: false}], throwOnError: false});"></script>
23+
onload="renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\\\[', right: '\\\\]', display: true}, {left: '\\\\(', right: '\\\\)', display: false}], throwOnError: false});"></script>
24+
{% endif %}
2325

2426
<!-- Theme Initialization Script (Avoid Flash of Unstyled Theme) -->
2527
<script>
@@ -87,73 +89,6 @@
8789

8890
<!-- Interactive Scripts: Theme Toggle, Code Block Copy, Rich Note Engine -->
8991
<script src="/js/rich-note.js?v={{ site.time | date: '%s' }}" defer></script>
90-
<script>
91-
document.addEventListener('DOMContentLoaded', function() {
92-
// Theme Switcher Logic
93-
const toggleBtn = document.getElementById('theme-toggle');
94-
const themeIconContainer = document.getElementById('theme-icon-container');
95-
const themeLabel = document.getElementById('theme-label');
96-
97-
const sunSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`;
98-
const moonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`;
99-
100-
function updateThemeUI(theme) {
101-
if (theme === 'dark') {
102-
if (themeIconContainer) themeIconContainer.innerHTML = sunSVG;
103-
themeLabel.textContent = 'Light';
104-
} else {
105-
if (themeIconContainer) themeIconContainer.innerHTML = moonSVG;
106-
themeLabel.textContent = 'Dark';
107-
}
108-
}
109-
110-
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
111-
updateThemeUI(currentTheme);
112-
113-
toggleBtn.addEventListener('click', function() {
114-
const activeTheme = document.documentElement.getAttribute('data-theme');
115-
const newTheme = activeTheme === 'dark' ? 'light' : 'dark';
116-
document.documentElement.setAttribute('data-theme', newTheme);
117-
localStorage.setItem('42devops-theme', newTheme);
118-
updateThemeUI(newTheme);
119-
});
120-
121-
// Code Block Enhancement: Wrap with Header & Copy Button
122-
const highlightBlocks = document.querySelectorAll('.highlight, pre:not(.highlight pre)');
123-
highlightBlocks.forEach(function(block) {
124-
// Avoid double wrapping
125-
if (block.closest('.code-wrapper')) return;
126-
127-
const wrapper = document.createElement('div');
128-
wrapper.className = 'code-wrapper';
129-
130-
const header = document.createElement('div');
131-
header.className = 'code-header';
132-
133-
const dots = document.createElement('div');
134-
dots.className = 'code-dots';
135-
dots.innerHTML = '<span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>';
136-
137-
const copyBtn = document.createElement('button');
138-
copyBtn.className = 'copy-btn';
139-
copyBtn.textContent = 'Copy';
140-
141-
copyBtn.addEventListener('click', function() {
142-
const codeText = block.querySelector('code') ? block.querySelector('code').innerText : block.innerText;
143-
navigator.clipboard.writeText(codeText).then(function() {
144-
copyBtn.textContent = 'Copied!';
145-
setTimeout(function() { copyBtn.textContent = 'Copy'; }, 2000);
146-
});
147-
});
148-
149-
header.appendChild(dots);
150-
header.appendChild(copyBtn);
151-
152-
block.parentNode.insertBefore(wrapper, block);
153-
wrapper.appendChild(header);
154-
wrapper.appendChild(block);
155-
});
156-
});
157-
</script>
92+
<script src="/js/main.js?v={{ site.time | date: '%s' }}" defer></script>
15893
</body>
15994
</html>

‎index.html‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -87,27 +87,4 @@ <h2 class="section-title">Featured Projects</h2>
8787
</div>
8888
</section>
8989

90-
<script>
91-
document.addEventListener('DOMContentLoaded', function() {
92-
const filterPills = document.querySelectorAll('.filter-pill');
93-
const postCards = document.querySelectorAll('.post-card');
9490

95-
filterPills.forEach(pill => {
96-
pill.addEventListener('click', function() {
97-
filterPills.forEach(p => p.classList.remove('active'));
98-
this.classList.add('active');
99-
100-
const filter = this.getAttribute('data-filter');
101-
102-
postCards.forEach(card => {
103-
const categories = (card.getAttribute('data-categories') || '').split(/\s+/);
104-
if (filter === 'all' || categories.includes(filter)) {
105-
card.style.display = 'block';
106-
} else {
107-
card.style.display = 'none';
108-
}
109-
});
110-
});
111-
});
112-
});
113-
</script>

‎js/main.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
// Theme Switcher Logic
3+
const toggleBtn = document.getElementById('theme-toggle');
4+
const themeIconContainer = document.getElementById('theme-icon-container');
5+
const themeLabel = document.getElementById('theme-label');
6+
7+
const sunSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`;
8+
const moonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`;
9+
10+
function updateThemeUI(theme) {
11+
if (!toggleBtn) return;
12+
if (theme === 'dark') {
13+
if (themeIconContainer) themeIconContainer.innerHTML = sunSVG;
14+
if (themeLabel) themeLabel.textContent = 'Light';
15+
} else {
16+
if (themeIconContainer) themeIconContainer.innerHTML = moonSVG;
17+
if (themeLabel) themeLabel.textContent = 'Dark';
18+
}
19+
}
20+
21+
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
22+
updateThemeUI(currentTheme);
23+
24+
if (toggleBtn) {
25+
toggleBtn.addEventListener('click', function() {
26+
const activeTheme = document.documentElement.getAttribute('data-theme');
27+
const newTheme = activeTheme === 'dark' ? 'light' : 'dark';
28+
document.documentElement.setAttribute('data-theme', newTheme);
29+
localStorage.setItem('42devops-theme', newTheme);
30+
updateThemeUI(newTheme);
31+
});
32+
}
33+
34+
// Code Block Enhancement: Wrap with Header & Copy Button
35+
const highlightBlocks = document.querySelectorAll('.highlight, pre:not(.highlight pre)');
36+
highlightBlocks.forEach(function(block) {
37+
// Avoid double wrapping
38+
if (block.closest('.code-wrapper')) return;
39+
40+
const wrapper = document.createElement('div');
41+
wrapper.className = 'code-wrapper';
42+
43+
const header = document.createElement('div');
44+
header.className = 'code-header';
45+
46+
const dots = document.createElement('div');
47+
dots.className = 'code-dots';
48+
dots.innerHTML = '<span class="code-dot code-dot-red"></span><span class="code-dot code-dot-yellow"></span><span class="code-dot code-dot-green"></span>';
49+
50+
const copyBtn = document.createElement('button');
51+
copyBtn.className = 'copy-btn';
52+
copyBtn.textContent = 'Copy';
53+
54+
copyBtn.addEventListener('click', function() {
55+
const codeText = block.querySelector('code') ? block.querySelector('code').innerText : block.innerText;
56+
navigator.clipboard.writeText(codeText).then(function() {
57+
copyBtn.textContent = 'Copied!';
58+
setTimeout(function() { copyBtn.textContent = 'Copy'; }, 2000);
59+
});
60+
});
61+
62+
header.appendChild(dots);
63+
header.appendChild(copyBtn);
64+
65+
block.parentNode.insertBefore(wrapper, block);
66+
wrapper.appendChild(header);
67+
wrapper.appendChild(block);
68+
});
69+
70+
// Homepage Filters
71+
const filterPills = document.querySelectorAll('.filter-pill');
72+
const postCards = document.querySelectorAll('.post-card');
73+
74+
if (filterPills.length > 0 && postCards.length > 0) {
75+
filterPills.forEach(pill => {
76+
pill.addEventListener('click', function() {
77+
filterPills.forEach(p => p.classList.remove('active'));
78+
this.classList.add('active');
79+
80+
const filter = this.getAttribute('data-filter');
81+
82+
postCards.forEach(card => {
83+
const categories = (card.getAttribute('data-categories') || '').split(/\s+/);
84+
if (filter === 'all' || categories.includes(filter)) {
85+
card.style.display = 'block';
86+
} else {
87+
card.style.display = 'none';
88+
}
89+
});
90+
});
91+
});
92+
}
93+
});

0 commit comments

Comments
 (0)