Skip to content

Commit eb7cbb0

Browse files
ShaneBeeeShaneBeee
committed
Website overhaul
1 parent 18eefc2 commit eb7cbb0

4 files changed

Lines changed: 666 additions & 33 deletions

File tree

‎_config.yml‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎docs/HySkript/index.html‎

Lines changed: 198 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,205 @@
1-
<html>
2-
<body>
3-
<h2>HySkript Docs</h2>
4-
<hr>
5-
<div id="list">
6-
</div>
7-
</body>
8-
</html>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
10-
integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
11-
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
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+
<title>HySkript Javadocs | SkriptDev</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
<script>
10+
tailwind.config = {
11+
darkMode: 'class',
12+
}
13+
</script>
14+
<style>
15+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
16+
17+
body {
18+
font-family: 'Inter', sans-serif;
19+
background-color: #f8fafc;
20+
}
21+
22+
.dark body {
23+
background-color: #0f172a;
24+
}
25+
26+
.hero-gradient {
27+
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
28+
}
29+
30+
.card {
31+
transition: transform 0.2s, box-shadow 0.2s;
32+
}
33+
34+
.card:hover {
35+
transform: translateY(-4px);
36+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
37+
}
38+
39+
.dark .card:hover {
40+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
41+
}
42+
</style>
43+
<script>
44+
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
45+
document.documentElement.classList.add('dark');
46+
} else {
47+
document.documentElement.classList.remove('dark')
48+
}
49+
</script>
50+
</head>
51+
<body class="text-slate-800 dark:text-slate-200">
52+
53+
<!-- Navigation -->
54+
<nav class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800">
55+
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
56+
<div class="flex justify-between h-16 items-center">
57+
<div class="flex items-center">
58+
<a href="../../index.html" class="text-2xl font-bold text-slate-900 dark:text-white">SkriptDev</a>
59+
</div>
60+
<div class="flex items-center gap-4">
61+
<div class="hidden md:block">
62+
<div class="flex items-baseline space-x-4">
63+
<a href="../../index.html#hyskript"
64+
class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">HySkript</a>
65+
<a href="../../index.html#skript-parser"
66+
class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Skript-Parser</a>
67+
</div>
68+
</div>
69+
<button id="theme-toggle"
70+
class="text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg text-sm p-2.5 transition">
71+
<i id="theme-toggle-dark-icon" class="hidden fas fa-moon text-xl"></i>
72+
<i id="theme-toggle-light-icon" class="hidden fas fa-sun text-xl"></i>
73+
</button>
74+
</div>
75+
</div>
76+
</div>
77+
</nav>
78+
79+
<!-- Hero Section -->
80+
<header class="hero-gradient text-white py-12 px-4">
81+
<div class="max-w-4xl mx-auto text-center">
82+
<h1 class="text-4xl font-extrabold mb-4 tracking-tight">HySkript Javadocs</h1>
83+
<p class="text-lg text-slate-300 max-w-2xl mx-auto">
84+
Select a version to view the documentation.
85+
</p>
86+
</div>
87+
</header>
88+
89+
<main class="max-w-4xl mx-auto px-4 py-16">
90+
<div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
91+
<div class="bg-slate-50 dark:bg-slate-900/50 px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
92+
<h2 class="font-bold text-lg text-slate-700 dark:text-slate-200">Available Versions</h2>
93+
<span id="version-count"
94+
class="bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400 text-xs font-bold px-2.5 py-0.5 rounded-full">Loading...</span>
95+
</div>
96+
<ul id="version-list" class="divide-y divide-slate-200 dark:divide-slate-700">
97+
<!-- Versions will be populated here -->
98+
<li class="px-6 py-12 text-center text-slate-500 dark:text-slate-400">
99+
<i class="fas fa-circle-notch fa-spin text-2xl mb-4 block mx-auto"></i>
100+
Fetching versions from GitHub...
101+
</li>
102+
</ul>
103+
</div>
104+
</main>
105+
106+
<footer class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 py-12">
107+
<div class="max-w-6xl mx-auto px-4 text-center">
108+
<p class="text-slate-500 dark:text-slate-400 text-sm">
109+
&copy; 2026 SkriptDev. All rights reserved.
110+
</p>
111+
<div class="mt-4 flex justify-center gap-6">
112+
<a href="https://github.com/SkriptDev"
113+
class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition">
114+
<i class="fab fa-github text-xl"></i>
115+
</a>
116+
</div>
117+
</div>
118+
</footer>
119+
120+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
12121
<script>
13122
$(document).ready(function () {
14123
$.get("https://api.github.com/repos/SkriptDev/skriptdev.github.io/contents/docs/HySkript/", function (data) {
15-
for (let dir of data) {
16-
if (dir.name == "index.html") continue;
17-
$("#list").prepend(`<p><a href="${dir.name}">${dir.name}</a></p>`);
124+
const versions = data
125+
.filter(item => item.type === 'dir' && item.name !== 'latest')
126+
.map(item => item.name);
127+
128+
if (versions.length === 0) {
129+
$("#version-list").html('<li class="px-6 py-8 text-center text-slate-500">No versions found.</li>');
130+
$("#version-count").text('0');
131+
return;
18132
}
133+
134+
// Sort versions numerically descending
135+
versions.sort((a, b) => {
136+
return b.localeCompare(a, undefined, {numeric: true, sensitivity: 'base'});
137+
});
138+
139+
$("#version-count").text(versions.length);
140+
$("#version-list").empty();
141+
142+
versions.forEach((version, index) => {
143+
const isLatest = index === 0;
144+
const latestBadge = isLatest ? '<span class="ml-3 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-bold px-2 py-0.5 rounded">Latest</span>' : '';
145+
146+
$("#version-list").append(`
147+
<li>
148+
<a href="${version}/" class="group flex items-center justify-between px-6 py-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition">
149+
<div class="flex items-center">
150+
<i class="fas fa-folder text-blue-500 mr-4"></i>
151+
<span class="font-medium text-slate-900 dark:text-white">${version}</span>
152+
${latestBadge}
153+
</div>
154+
<i class="fas fa-chevron-right text-slate-300 dark:text-slate-600 group-hover:text-blue-500 transition"></i>
155+
</a>
156+
</li>
157+
`);
158+
});
159+
}).fail(function () {
160+
$("#version-list").html('<li class="px-6 py-8 text-center text-red-500">Failed to load versions. Please try again later.</li>');
161+
$("#version-count").text('Error');
19162
});
20163
});
164+
165+
var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
166+
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
167+
168+
// Change the icons inside the button based on previous settings
169+
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
170+
themeToggleLightIcon.classList.remove('hidden');
171+
} else {
172+
themeToggleDarkIcon.classList.remove('hidden');
173+
}
174+
175+
var themeToggleBtn = document.getElementById('theme-toggle');
176+
177+
themeToggleBtn.addEventListener('click', function () {
178+
// toggle icons inside button
179+
themeToggleDarkIcon.classList.toggle('hidden');
180+
themeToggleLightIcon.classList.toggle('hidden');
181+
182+
// if set via local storage previously
183+
if (localStorage.getItem('color-theme')) {
184+
if (localStorage.getItem('color-theme') === 'light') {
185+
document.documentElement.classList.add('dark');
186+
localStorage.setItem('color-theme', 'dark');
187+
} else {
188+
document.documentElement.classList.remove('dark');
189+
localStorage.setItem('color-theme', 'light');
190+
}
191+
192+
// if NOT set via local storage previously
193+
} else {
194+
if (document.documentElement.classList.contains('dark')) {
195+
document.documentElement.classList.remove('dark');
196+
localStorage.setItem('color-theme', 'light');
197+
} else {
198+
document.documentElement.classList.add('dark');
199+
localStorage.setItem('color-theme', 'dark');
200+
}
201+
}
202+
});
21203
</script>
204+
</body>
205+
</html>

0 commit comments

Comments
 (0)