-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwiki.html
311 lines (279 loc) · 13.9 KB
/
wiki.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wiki - Romitagl.com</title>
<meta name="description"
content="Personal knowledge wiki containing quotes, resources, and other useful information.">
<meta name="keywords" content="wiki, quotes, knowledge base, resources">
<meta name="author" content="romitagl.com">
<!-- Open Graph / Social Media Meta Tags -->
<meta property="og:title" content="Wiki - Romitagl.com">
<meta property="og:description"
content="Personal knowledge wiki containing quotes, resources, and other useful information.">
<meta property="og:url" content="https://romitagl.com/wiki.html">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Marked.js for Markdown parsing -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="styles.css">
<!-- Component Loader Script -->
<script src="components.js"></script>
</head>
<body>
<div class="container">
<!-- Navigation will be loaded here -->
<div data-component="navigation"></div>
<!-- Hero section for Wiki -->
<section class="hero">
<div class="hero-content">
<h1>Knowledge Wiki</h1>
<p>A collection of valuable information, quotes, and resources organized in a structured way to help you
find what you need quickly.</p>
</div>
<div class="hero-image">
<img src="assets/images/wiki.svg" alt="Wiki Knowledge Base"
onerror="this.src='https://api.lorem.space/image/abstract?w=500&h=400'">
</div>
</section>
<!-- Wiki Content Section -->
<section class="wiki-section">
<div class="wiki-container">
<div class="wiki-header">
<h2>Browse Knowledge Base</h2>
<p>Explore different categories of information in the tabs below.</p>
</div>
<!-- Tabs Navigation -->
<div class="tabs-container">
<ul class="tabs-nav">
<li class="tab-item active" data-tab="quotes">Quotes</li>
<li class="tab-item" data-tab="resources">Resources</li>
<!-- <li class="tab-item" data-tab="tutorials">Tutorials</li> -->
</ul>
<!-- Tab Content -->
<div id="quotes" class="tab-content active">
<div class="quotes-container">
<div id="quotes-header">
<h3>Inspirational and Thought-Provoking Quotes</h3>
<p>A collection of quotes from various sources that provide insight, inspiration, and
wisdom.</p>
<div class="last-updated" id="quotes-updated">
Loading quotes...
<button id="refresh-quotes" class="refresh-button" style="display: none;">
<i class="fas fa-sync-alt"></i> Refresh
</button>
</div>
</div>
<div id="quotes-content" class="content-loading">
<i class="fas fa-spinner fa-spin"></i> Loading quotes...
</div>
</div>
</div>
<!-- Resources Tab -->
<div id="resources" class="tab-content">
<div class="resources-container">
<div id="resources-header">
<h3>Useful Resources & Links</h3>
<p>A curated collection of valuable resources, tools, and references.</p>
<div class="last-updated" id="resources-updated">
Loading resources...
<button id="refresh-resources" class="refresh-button" style="display: none;">
<i class="fas fa-sync-alt"></i> Refresh
</button>
</div>
</div>
<div id="resources-content" class="content-loading">
<i class="fas fa-spinner fa-spin"></i> Loading resources...
</div>
</div>
</div>
<!-- Tutorials Tab (Placeholder with structure for future implementation) -->
<!-- <div id="tutorials" class="tab-content">
<div class="tutorials-container">
<div id="tutorials-header">
<h3>Tutorials & Guides</h3>
<p>Step-by-step tutorials and comprehensive guides on various topics.</p>
<div class="last-updated" id="tutorials-updated">
Coming soon...
<button id="refresh-tutorials" class="refresh-button" style="display: none;">
<i class="fas fa-sync-alt"></i> Refresh
</button>
</div>
</div>
<div id="tutorials-content" class="content-coming-soon">
<p>Tutorials will be available soon. Check back later!</p>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!-- Footer will be loaded here -->
<div data-component="footer"></div>
</div>
<!-- Wiki Content Functionality Script -->
<script>
// Tab initialization
document.addEventListener("DOMContentLoaded", function () {
// Tab functionality
const tabItems = document.querySelectorAll('.tab-item');
const tabContents = document.querySelectorAll('.tab-content');
tabItems.forEach(item => {
item.addEventListener('click', function () {
// Remove active class from all tabs and contents
tabItems.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked tab
this.classList.add('active');
// Show corresponding content
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
// Initialize content if needed
if (tabId === 'quotes' && !window.quotesInitialized) {
initQuotes();
window.quotesInitialized = true;
} else if (tabId === 'resources' && !window.resourcesInitialized) {
initResources();
window.resourcesInitialized = true;
}
});
});
// Initialize the active tab on page load
const activeTab = document.querySelector('.tab-item.active');
if (activeTab) {
const tabId = activeTab.getAttribute('data-tab');
if (tabId === 'quotes') {
initQuotes();
window.quotesInitialized = true;
} else if (tabId === 'resources') {
initResources();
window.resourcesInitialized = true;
}
} else {
// Default to initializing quotes if no tab is active
document.querySelector('[data-tab="quotes"]').classList.add('active');
document.getElementById('quotes').classList.add('active');
initQuotes();
window.quotesInitialized = true;
}
});
// Function for quotes tab
function initQuotes() {
loadMarkdownContent(
'quotes',
'https://raw.githubusercontent.com/wiki/romitagl/www/Quotes.md',
'quotes-content',
'quotes-updated',
'refresh-quotes'
);
}
// Function for resources tab
function initResources() {
loadMarkdownContent(
'resources',
'https://raw.githubusercontent.com/wiki/romitagl/www/Resources.md',
'resources-content',
'resources-updated',
'refresh-resources'
);
}
// Simple function to load and render markdown content
function loadMarkdownContent(contentType, markdownUrl, contentElementId, updatedElementId, refreshButtonId) {
const contentElement = document.getElementById(contentElementId);
const updatedElement = document.getElementById(updatedElementId);
const refreshButton = document.getElementById(refreshButtonId);
const storageKeyContent = `${contentType}Content`;
const storageKeyTimestamp = `${contentType}Timestamp`;
contentElement.innerHTML = `<i class="fas fa-spinner fa-spin"></i> Loading ${contentType}...`;
// Show the refresh button
if (refreshButton) {
refreshButton.style.display = 'inline-flex';
}
// Function to format date
function formatDate(timestamp) {
const date = new Date(parseInt(timestamp));
return date.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
// Check cache first
const cachedContent = localStorage.getItem(storageKeyContent);
const cachedTimestamp = localStorage.getItem(storageKeyTimestamp);
if (cachedContent && cachedTimestamp && (Date.now() - cachedTimestamp < 24 * 60 * 60 * 1000)) {
// Use cached content
try {
// Just use basic marked parsing without custom renderers
contentElement.innerHTML = marked.parse(cachedContent);
updatedElement.innerHTML = 'Last updated: ' + formatDate(cachedTimestamp);
} catch (error) {
console.error(`Error parsing cached content: ${error}`);
// Fetch fresh on error
fetchMarkdown();
}
} else {
// Fetch fresh content
fetchMarkdown();
}
// Function to fetch markdown from GitHub
function fetchMarkdown() {
fetch(markdownUrl)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.text();
})
.then(markdown => {
try {
// Render markdown
contentElement.innerHTML = marked.parse(markdown);
// Cache the content
localStorage.setItem(storageKeyContent, markdown);
const now = Date.now();
localStorage.setItem(storageKeyTimestamp, now);
// Update timestamp
updatedElement.innerHTML = 'Last updated: ' + formatDate(now);
} catch (error) {
console.error(`Error parsing markdown: ${error}`);
contentElement.innerHTML = `<p>Error parsing content. Please try again later.</p>`;
}
})
.catch(error => {
console.error(`Error fetching markdown: ${error}`);
// Try to use cached content as fallback
if (cachedContent) {
contentElement.innerHTML = marked.parse(cachedContent);
updatedElement.innerHTML = 'Last updated: ' + formatDate(cachedTimestamp) +
' <span style="color: #e74c3c;">(Offline mode)</span>';
} else {
contentElement.innerHTML = `<p>Failed to load content. Please check your connection.</p>`;
}
});
}
// Add refresh button functionality
if (refreshButton) {
refreshButton.addEventListener('click', function () {
// Show loading state
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Refreshing...';
this.disabled = true;
// Fetch fresh content
fetchMarkdown();
// Reset button after delay
setTimeout(() => {
this.innerHTML = '<i class="fas fa-sync-alt"></i> Refresh';
this.disabled = false;
}, 1000);
});
}
}
</script>
</body>
</html>