Skip to content

Commit 578bc5f

Browse files
wyndchymewyndchyme
committed
Wiki testing, seperated scripts for better caching
1 parent 99a2e62 commit 578bc5f

File tree

9 files changed

+279
-76
lines changed

9 files changed

+279
-76
lines changed

‎plugins/template/BLANK.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta property="og:title" content="Minecraft 3DS Community" />
7+
<meta property="og:type" content="website" />
8+
<meta property="og:url" content="https://www.minecraft3ds.org/" />
9+
<meta name="description" content="The one-stop shop for everything related to Minecraft: New Nintendo 3DS Edition." />
10+
<meta property="og:image" content="https://raw.githubusercontent.com/Minecraft-3DS-Community/Minecraft-3DS-Community.github.io/refs/heads/main/seeds/img/noimg.png" />
11+
<meta property="twitter:card" content="summary_large_image" />
12+
<meta property="twitter:url" content="https://www.minecraft3ds.org/" />
13+
<meta property="twitter:title" content="Minecraft 3DS Community" />
14+
<meta property="twitter:description" content="The one-stop shop for everything related to Minecraft: New Nintendo 3DS Edition." />
15+
<meta property="twitter:image" content="https://raw.githubusercontent.com/Minecraft-3DS-Community/Minecraft-3DS-Community.github.io/refs/heads/main/seeds/img/noimg.png" />
616
<link href="/style.css" rel="stylesheet">
717
<link rel="icon" type="image/x-icon" href="/img/favicon.ico?">
818
<link rel="stylesheet" href="/plugins/flickity/flickity.css" media="screen">

‎scripts/seeds/absort.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const containers = document.querySelectorAll('.grid-container');
2+
3+
containers.forEach(container => {
4+
const items = Array.from(container.querySelectorAll('.grid-item'));
5+
6+
items.sort((a, b) => {
7+
const descA = a.querySelector('.seedDesc').textContent.toLowerCase();
8+
const descB = b.querySelector('.seedDesc').textContent.toLowerCase();
9+
return descA.localeCompare(descB);
10+
});
11+
12+
items.forEach(item => container.appendChild(item));
13+
});

‎scripts/seeds/tabpanel.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
function stretchTabPanel() {
2+
const tabPanel = document.querySelector('.tab-panel.active');
3+
if (!tabPanel) return;
4+
5+
const top = tabPanel.getBoundingClientRect().top + window.scrollY;
6+
const height = window.innerHeight - top;
7+
tabPanel.style.height = `${height}px`;
8+
tabPanel.style.overflowY = 'auto';
9+
}
10+
11+
document.querySelectorAll('.tab-btn').forEach(button => {
12+
button.addEventListener('click', () => {
13+
const tabId = button.dataset.tab;
14+
15+
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
16+
document.querySelectorAll('.tab-panel').forEach(panel => {
17+
panel.classList.remove('active');
18+
panel.style.height = '';
19+
});
20+
21+
button.classList.add('active');
22+
const activePanel = document.getElementById(tabId);
23+
activePanel.classList.add('active');
24+
25+
stretchTabPanel();
26+
});
27+
});
28+
29+
window.addEventListener('load', stretchTabPanel);
30+
window.addEventListener('resize', stretchTabPanel);

‎scripts/seeds/tabs.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
document.querySelectorAll('.tab-btn').forEach(button => {
2+
button.addEventListener('click', () => {
3+
const tabId = button.dataset.tab;
4+
5+
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
6+
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
7+
8+
button.classList.add('active');
9+
document.getElementById(tabId).classList.add('active');
10+
});
11+
});

‎scripts/seeds/webkitfix.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
2+
document.querySelectorAll('.tab-btn').forEach(el => {
3+
el.style.transition = 'none';
4+
});
5+
}
6+

‎scripts/tools/absort.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
document.querySelectorAll('.toolsBody ul').forEach(ul => {
2+
const lis = Array.from(ul.querySelectorAll('li'));
3+
lis.sort((a, b) => a.textContent.localeCompare(b.textContent));
4+
lis.forEach(li => ul.appendChild(li));
5+
});
6+

‎seeds/index.html‎

Lines changed: 4 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -501,74 +501,10 @@
501501
<script src="/scripts/main/dropdown.js"></script>
502502
<script src="/scripts/main/vines.js"></script>
503503
<script src="/scripts/main/header.js"></script>
504-
<script>
505-
document.querySelectorAll('.tab-btn').forEach(button => {
506-
button.addEventListener('click', () => {
507-
const tabId = button.dataset.tab;
508-
509-
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
510-
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
511-
512-
button.classList.add('active');
513-
document.getElementById(tabId).classList.add('active');
514-
});
515-
});
516-
</script>
517-
<script>
518-
function stretchTabPanel() {
519-
const tabPanel = document.querySelector('.tab-panel.active');
520-
if (!tabPanel) return;
521-
522-
const top = tabPanel.getBoundingClientRect().top + window.scrollY;
523-
const height = window.innerHeight - top;
524-
tabPanel.style.height = `${height}px`;
525-
tabPanel.style.overflowY = 'auto';
526-
}
527-
528-
document.querySelectorAll('.tab-btn').forEach(button => {
529-
button.addEventListener('click', () => {
530-
const tabId = button.dataset.tab;
531-
532-
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
533-
document.querySelectorAll('.tab-panel').forEach(panel => {
534-
panel.classList.remove('active');
535-
panel.style.height = '';
536-
});
537-
538-
button.classList.add('active');
539-
const activePanel = document.getElementById(tabId);
540-
activePanel.classList.add('active');
541-
542-
stretchTabPanel();
543-
});
544-
});
545-
546-
window.addEventListener('load', stretchTabPanel);
547-
window.addEventListener('resize', stretchTabPanel);
548-
</script>
549-
<script>
550-
const containers = document.querySelectorAll('.grid-container');
551-
552-
containers.forEach(container => {
553-
const items = Array.from(container.querySelectorAll('.grid-item'));
554-
555-
items.sort((a, b) => {
556-
const descA = a.querySelector('.seedDesc').textContent.toLowerCase();
557-
const descB = b.querySelector('.seedDesc').textContent.toLowerCase();
558-
return descA.localeCompare(descB);
559-
});
560-
561-
items.forEach(item => container.appendChild(item));
562-
});
563-
</script>
564-
<script>
565-
if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
566-
document.querySelectorAll('.tab-btn').forEach(el => {
567-
el.style.transition = 'none';
568-
});
569-
}
570-
571-
</script>
504+
<script src="/scripts/seeds/tabs.js"></script>
505+
<script src="/scripts/seeds/tabpanel.js"></script>
506+
<script src="/scripts/seeds/absort.js"></script>
507+
<script src="/scripts/seeds/webkitfix.js"></script>
572508

573509

574510

‎tools/index.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -286,14 +286,7 @@
286286
<script src="/scripts/main/dropdown.js"></script>
287287
<script src="/scripts/main/vines.js"></script>
288288
<script src="/scripts/main/header.js"></script>
289-
<script>
290-
document.querySelectorAll('.toolsBody ul').forEach(ul => {
291-
const lis = Array.from(ul.querySelectorAll('li'));
292-
lis.sort((a, b) => a.textContent.localeCompare(b.textContent));
293-
lis.forEach(li => ul.appendChild(li)); // reinsert in sorted order
294-
});
295-
296-
</script>
289+
<script src="/scripts/tools/absort.js"></script>
297290

298291

299292
</body>

‎wiki/index.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta property="og:title" content="Minecraft 3DS Community Wiki" />
7+
<meta property="og:type" content="website" />
8+
<meta property="og:url" content="https://www.minecraft3ds.org/" />
9+
<meta name="description" content="Tutorials and documentation for Minecraft: New Nintendo 3DS Edition." />
10+
<meta property="og:image" content="https://raw.githubusercontent.com/Minecraft-3DS-Community/Minecraft-3DS-Community.github.io/refs/heads/main/seeds/img/noimg.png" />
11+
<meta property="twitter:card" content="summary_large_image" />
12+
<meta property="twitter:url" content="https://www.minecraft3ds.org/" />
13+
<meta property="twitter:title" content="Minecraft 3DS Community Wiki" />
14+
<meta property="twitter:description" content="Tutorials and documentation for Minecraft: New Nintendo 3DS Edition." />
15+
<meta property="twitter:image" content="https://raw.githubusercontent.com/Minecraft-3DS-Community/Minecraft-3DS-Community.github.io/refs/heads/main/seeds/img/noimg.png" />
16+
<link href="/style.css" rel="stylesheet">
17+
<link rel="icon" type="image/x-icon" href="/img/favicon.ico?">
18+
<link rel="stylesheet" href="/plugins/flickity/flickity.css" media="screen">
19+
<script src="/plugins/flickity/flickity.pkgd.js"></script>
20+
<title>Wiki &#8226 Minecraft 3DS Community</title>
21+
<style>
22+
body {
23+
background-color: rgb(249, 239, 207);
24+
transition: 0.5s;
25+
}
26+
.wikiHeader {
27+
height: 145px;
28+
width: 100%;
29+
display: flex;
30+
flex-direction: row;
31+
align-items: flex-end;
32+
font-family: 'Minecraft Regular';
33+
background: linear-gradient(rgba(255, 240, 185, 0.4), rgba(255, 246, 165, 0.5)), url(/img/bg/chiseled_quartz_block_top.png);
34+
background-size: 32px;
35+
image-rendering: pixelated;
36+
color: rgba(0, 0, 0, 0.8);
37+
font-size: 16pt;
38+
padding: 15px;
39+
gap: 8px;
40+
border-bottom: 4px solid rgba(0, 0, 0, 0.2);
41+
margin-top: 3px;
42+
}
43+
.wikiHeader img {
44+
width: 32px;
45+
filter: drop-shadow(0 0 1px black);
46+
}
47+
.settingsButton {
48+
position: absolute;
49+
right: 15px;
50+
width: 32px;
51+
height: 32px;
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
border: none;
56+
background-color: transparent;
57+
transform: translateY(3px);
58+
}
59+
.settingsButton:hover {
60+
cursor: pointer;
61+
transition: 0.05s;
62+
background-color: rgba(0, 0, 0, 0.1);
63+
background-position: bottom;
64+
border-radius: 5px;
65+
}
66+
.settingsButton img {
67+
position: relative;
68+
bottom: 3px;
69+
}
70+
.settingsModal {
71+
display: none;
72+
position: fixed;
73+
top: 0; left: 0;
74+
width: 100%; height: 100%;
75+
background: rgba(0, 0, 0, 0.4);
76+
justify-content: center;
77+
align-items: center;
78+
z-index: 1000;
79+
color: rgba(0, 0, 0, 0.8);
80+
}
81+
.settingsContent {
82+
background-color: #eee;
83+
padding: 25px;
84+
padding-left: 14px;
85+
padding-top: 20px;
86+
box-shadow: 0 0 10px black;
87+
position: relative;
88+
font-family: 'Minecraft Regular';
89+
border: 2px solid black;
90+
outline: 2px solid rgba(255, 255, 255, 0.8);
91+
}
92+
.closeButton {
93+
position: absolute;
94+
top: 12px;
95+
right: 10px;
96+
border: none;
97+
background: none;
98+
font-size: 20px;
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
}
103+
.closeButton:hover {
104+
background-color: rgba(0, 0, 0, 0.1);
105+
cursor: pointer;
106+
color: rgba(255, 255, 255, 1);
107+
outline: 2px solid rgba(255, 255, 255, 0.8);
108+
}
109+
.dark-mode {
110+
background-color: rgb(16, 17, 24);
111+
transition: 0.5s;
112+
}
113+
.settingsContent input:hover {
114+
cursor: pointer;
115+
}
116+
</style>
117+
</head>
118+
<body>
119+
<div style="position: absolute; top: 0; left: 0; width: 100vw; height: 3.5em; display: flex; align-items: center;" class="header">
120+
<a href="/" style="text-indent: 1rem;">
121+
<span style="color: white; font-size: 20pt; filter: drop-shadow(0 3px 3px black); margin-left: 45px;" class="logo">
122+
<img src="/img/New_Nintendo_3DS_Edition.webp" style="width: 180px; vertical-align: middle; position: relative; bottom: 3px; image-rendering: auto;">
123+
<span style="position: absolute; display: inline-block; color: yellow; transform-origin: left; transform: translateX(-100px) translateY(25px) scale(0.65) rotate(-15deg); animation: scaleText 2s ease-in-out infinite;">
124+
Community
125+
</span>
126+
</span>
127+
</a>
128+
129+
<div id="vines" class="vines">
130+
</div>
131+
132+
<div class="vines" id="leftVines">
133+
<img src="/img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 0;">
134+
<img src="/img/bg/vine.png" style="width: 32px; position: absolute; left: 32px; top: 32px;">
135+
</div>
136+
<!--wyndchyme was here. These left vines will only appear on smaller video widths.-->
137+
</div>
138+
139+
140+
<div class="dropDownContainer closed">
141+
<div class="dropDown">
142+
<div id="dropDownContent"></div>
143+
</div>
144+
<div class="dropDownButton" id="dropDownToggle">
145+
<img src="/img/gui/arrow.png" style="width: 32px;" id="dropDownArrow">
146+
</div>
147+
</div>
148+
149+
<div class="wikiHeader">
150+
<img src="/img/gui/faqs.png">Wiki & Documentation
151+
<button class="settingsButton">
152+
<img src="/img/gui/config.png">
153+
</button>
154+
</div>
155+
156+
157+
<div id="settingsModal" class="settingsModal">
158+
<div class="settingsContent">
159+
<span style="font-size: 14pt; background-color: rgba(0, 0, 0, 0.2); padding: 5px; padding-left: 10px; padding-right: 10px; border: 2px solid rgba(0, 0, 0, 0.4); outline: 2px solid rgba(173, 173, 173, 0.6);">Settings</span><br><br>
160+
<button class="closeButton">&times;</button><br>
161+
<label>
162+
<input type="checkbox" id="darkModeToggle"> Enable Dark Mode<br><br>
163+
</label>
164+
</div>
165+
</div>
166+
167+
<script src="/scripts/main/dropdown.js"></script>
168+
<script src="/scripts/main/vines.js"></script>
169+
<script src="/scripts/main/header.js"></script>
170+
<script>
171+
const settingsBtn = document.querySelector('.settingsButton');
172+
const modal = document.getElementById('settingsModal');
173+
const closeBtn = document.querySelector('.closeButton');
174+
const darkToggle = document.getElementById('darkModeToggle');
175+
176+
// Open and close modal
177+
settingsBtn.onclick = () => modal.style.display = 'flex';
178+
closeBtn.onclick = () => modal.style.display = 'none';
179+
180+
// Toggle dark mode and save state
181+
darkToggle.onchange = () => {
182+
const isDark = darkToggle.checked;
183+
document.body.classList.toggle('dark-mode', isDark);
184+
localStorage.setItem('darkModeEnabled', isDark);
185+
};
186+
187+
// Load saved state on page load
188+
window.onload = () => {
189+
const saved = localStorage.getItem('darkModeEnabled') === 'true';
190+
darkToggle.checked = saved;
191+
document.body.classList.toggle('dark-mode', saved);
192+
};
193+
</script>
194+
195+
196+
197+
</body>
198+
</html>

0 commit comments

Comments
 (0)