mirror of
https://github.com/MapMakersAndProgrammers/MapMakersAndProgrammers.github.io.git
synced 2025-10-26 01:49:06 -07:00
added some functionality to the archive section
needs a lot more work
This commit is contained in:
Currency
46
subpages/archives subpages/BIN/explorer.html
Normal file
46
subpages/archives subpages/BIN/explorer.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Repository Explorer - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../css/styles.css">
|
||||
<link rel="stylesheet" href="../../../css/explorer.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../../archives.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title" id="repo-name">Repository</h1>
|
||||
</div>
|
||||
|
||||
<main class="repo-explorer">
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
<div class="file-tree" id="file-tree">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
|
||||
<div class="readme-section" id="readme-container">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="explorer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
subpages/archives subpages/BIN/explorer.js
Normal file
212
subpages/archives subpages/BIN/explorer.js
Normal file
@@ -0,0 +1,212 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Configuration
|
||||
const GITHUB_API_BASE = 'https://api.github.com/repos';
|
||||
const REPO_OWNER = 'MapMakersAndProgrammers';
|
||||
const REPO_NAME = 'tanki-bin-maps'; // Change this dynamically based on which repo is being viewed
|
||||
|
||||
// DOM Elements
|
||||
const fileTreeEl = document.getElementById('file-tree');
|
||||
const breadcrumbEl = document.getElementById('breadcrumb');
|
||||
const repoNameEl = document.getElementById('repo-name');
|
||||
const readmeContainerEl = document.getElementById('readme-container');
|
||||
|
||||
// Icons for different file types
|
||||
const icons = {
|
||||
folder: '../../../assets/icons/folder.svg',
|
||||
file: '../../../assets/icons/file.svg',
|
||||
'webp': '../../../assets/icons/webp.svg',
|
||||
'ktx': '../../../assets/icons/ktx.svg',
|
||||
'bin': '../../../assets/icons/bin.svg',
|
||||
'json': '../../../assets/icons/json.svg',
|
||||
'xml': '../../../assets/icons/xml.svg',
|
||||
'md': '../../../assets/icons/readme.svg'
|
||||
};
|
||||
|
||||
// Markdown rendering function (using GitHub's API)
|
||||
async function renderMarkdown(markdown) {
|
||||
try {
|
||||
const response = await fetch('https://api.github.com/markdown', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: markdown,
|
||||
mode: 'markdown'
|
||||
})
|
||||
});
|
||||
return await response.text();
|
||||
} catch (error) {
|
||||
console.error('Error rendering markdown:', error);
|
||||
return `<p>Error rendering README</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and display README
|
||||
*/
|
||||
async function loadReadme() {
|
||||
try {
|
||||
// Fetch README content
|
||||
const readmeResponse = await fetch(`${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/readme`);
|
||||
const readmeData = await readmeResponse.json();
|
||||
|
||||
// Decode base64 README content
|
||||
const readmeContent = atob(readmeData.content);
|
||||
|
||||
// Render markdown
|
||||
const renderedReadme = await renderMarkdown(readmeContent);
|
||||
|
||||
// Create README container
|
||||
const readmeWrapper = document.createElement('div');
|
||||
readmeWrapper.classList.add('readme-content');
|
||||
readmeWrapper.innerHTML = renderedReadme;
|
||||
|
||||
// Clear previous content and append new README
|
||||
readmeContainerEl.innerHTML = '';
|
||||
readmeContainerEl.appendChild(readmeWrapper);
|
||||
} catch (error) {
|
||||
console.error('Error loading README:', error);
|
||||
readmeContainerEl.innerHTML = `<p>No README available</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get appropriate icon for a file type
|
||||
* @param {string} name - Filename
|
||||
* @param {string} type - File type (dir or file)
|
||||
* @returns {string} Path to icon
|
||||
*/
|
||||
function getFileIcon(name, type) {
|
||||
if (type === 'dir') return icons.folder;
|
||||
const ext = name.split('.').pop().toLowerCase();
|
||||
return icons[ext] || icons.file;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string
|
||||
* @param {number} bytes - Size in bytes
|
||||
* @returns {string} Formatted file size
|
||||
*/
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Create breadcrumb navigation
|
||||
* @param {string} path - Current path in repository
|
||||
*/
|
||||
function createBreadcrumb(path) {
|
||||
breadcrumbEl.innerHTML = '';
|
||||
const parts = path.split('/').filter(p => p);
|
||||
|
||||
const homeLink = document.createElement('div');
|
||||
homeLink.classList.add('breadcrumb-item');
|
||||
homeLink.innerHTML = `<a href="#" data-path="">Repository Root</a>`;
|
||||
breadcrumbEl.appendChild(homeLink);
|
||||
|
||||
parts.forEach((part, index) => {
|
||||
const crumb = document.createElement('div');
|
||||
crumb.classList.add('breadcrumb-item');
|
||||
const fullPath = parts.slice(0, index + 1).join('/');
|
||||
crumb.innerHTML = `<a href="#" data-path="${fullPath}">${part}</a>`;
|
||||
breadcrumbEl.appendChild(crumb);
|
||||
});
|
||||
|
||||
// Add click listeners to breadcrumb items
|
||||
breadcrumbEl.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
loadRepoContents(link.dataset.path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Load and display repository contents
|
||||
* @param {string} [path=''] - Path within the repository
|
||||
*/
|
||||
async function loadRepoContents(path = '') {
|
||||
try {
|
||||
const apiUrl = `${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/contents/${path}`;
|
||||
const response = await fetch(apiUrl);
|
||||
const contents = await response.json();
|
||||
|
||||
// Filter out README.md doesnt work :(
|
||||
const filteredContents = contents.filter(item =>
|
||||
item.name.toLowerCase() !== 'readme.md'
|
||||
);
|
||||
|
||||
// Sort contents: folders first, then files
|
||||
contents.sort((a, b) => {
|
||||
if (a.type === 'dir' && b.type !== 'dir') return -1;
|
||||
if (a.type !== 'dir' && b.type === 'dir') return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Clear previous contents
|
||||
fileTreeEl.innerHTML = '';
|
||||
|
||||
// Update page title
|
||||
repoNameEl.textContent = REPO_NAME;
|
||||
|
||||
// Create breadcrumb
|
||||
createBreadcrumb(path);
|
||||
|
||||
// Render contents
|
||||
contents.forEach(item => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.classList.add('file-item');
|
||||
|
||||
const icon = document.createElement('img');
|
||||
icon.src = getFileIcon(item.name, item.type);
|
||||
icon.alt = item.type;
|
||||
icon.classList.add('file-icon');
|
||||
|
||||
const nameEl = document.createElement('div');
|
||||
nameEl.classList.add('file-name');
|
||||
nameEl.textContent = item.name;
|
||||
|
||||
const sizeEl = document.createElement('div');
|
||||
sizeEl.classList.add('file-size');
|
||||
sizeEl.textContent = item.type === 'file' ? formatBytes(item.size) : '';
|
||||
|
||||
fileItem.appendChild(icon);
|
||||
fileItem.appendChild(nameEl);
|
||||
fileItem.appendChild(sizeEl);
|
||||
|
||||
// Add click handler for folders
|
||||
if (item.type === 'dir') {
|
||||
fileItem.addEventListener('click', () => {
|
||||
loadRepoContents(`${path}/${item.name}`);
|
||||
});
|
||||
} else if (item.type === 'file') {
|
||||
// Optional: Add file preview/download logic
|
||||
fileItem.addEventListener('click', () => {
|
||||
window.open(item.html_url, '_blank');
|
||||
});
|
||||
}
|
||||
|
||||
fileTreeEl.appendChild(fileItem);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading repository contents:', error);
|
||||
fileTreeEl.innerHTML = `<p>Error loading repository contents. Please try again.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function initializeRepository() {
|
||||
await loadRepoContents();
|
||||
await loadReadme();
|
||||
}
|
||||
|
||||
// Initial load
|
||||
initializeRepository();
|
||||
});
|
||||
46
subpages/archives subpages/JSON/explorer.html
Normal file
46
subpages/archives subpages/JSON/explorer.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Repository Explorer - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../css/styles.css">
|
||||
<link rel="stylesheet" href="../../../css/explorer.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../../archives.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title" id="repo-name">Repository</h1>
|
||||
</div>
|
||||
|
||||
<main class="repo-explorer">
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
<div class="file-tree" id="file-tree">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
|
||||
<div class="readme-section" id="readme-container">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="explorer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
subpages/archives subpages/JSON/explorer.js
Normal file
212
subpages/archives subpages/JSON/explorer.js
Normal file
@@ -0,0 +1,212 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Configuration
|
||||
const GITHUB_API_BASE = 'https://api.github.com/repos';
|
||||
const REPO_OWNER = 'MapMakersAndProgrammers';
|
||||
const REPO_NAME = 'tanki-json-maps'; // Change this dynamically based on which repo is being viewed
|
||||
|
||||
// DOM Elements
|
||||
const fileTreeEl = document.getElementById('file-tree');
|
||||
const breadcrumbEl = document.getElementById('breadcrumb');
|
||||
const repoNameEl = document.getElementById('repo-name');
|
||||
const readmeContainerEl = document.getElementById('readme-container');
|
||||
|
||||
// Icons for different file types
|
||||
const icons = {
|
||||
folder: '../../../assets/icons/folder.svg',
|
||||
file: '../../../assets/icons/file.svg',
|
||||
'webp': '../../../assets/icons/webp.svg',
|
||||
'ktx': '../../../assets/icons/ktx.svg',
|
||||
'bin': '../../../assets/icons/bin.svg',
|
||||
'json': '../../../assets/icons/json.svg',
|
||||
'xml': '../../../assets/icons/xml.svg',
|
||||
'md': '../../../assets/icons/readme.svg'
|
||||
};
|
||||
|
||||
// Markdown rendering function (using GitHub's API)
|
||||
async function renderMarkdown(markdown) {
|
||||
try {
|
||||
const response = await fetch('https://api.github.com/markdown', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: markdown,
|
||||
mode: 'markdown'
|
||||
})
|
||||
});
|
||||
return await response.text();
|
||||
} catch (error) {
|
||||
console.error('Error rendering markdown:', error);
|
||||
return `<p>Error rendering README</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and display README
|
||||
*/
|
||||
async function loadReadme() {
|
||||
try {
|
||||
// Fetch README content
|
||||
const readmeResponse = await fetch(`${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/readme`);
|
||||
const readmeData = await readmeResponse.json();
|
||||
|
||||
// Decode base64 README content
|
||||
const readmeContent = atob(readmeData.content);
|
||||
|
||||
// Render markdown
|
||||
const renderedReadme = await renderMarkdown(readmeContent);
|
||||
|
||||
// Create README container
|
||||
const readmeWrapper = document.createElement('div');
|
||||
readmeWrapper.classList.add('readme-content');
|
||||
readmeWrapper.innerHTML = renderedReadme;
|
||||
|
||||
// Clear previous content and append new README
|
||||
readmeContainerEl.innerHTML = '';
|
||||
readmeContainerEl.appendChild(readmeWrapper);
|
||||
} catch (error) {
|
||||
console.error('Error loading README:', error);
|
||||
readmeContainerEl.innerHTML = `<p>No README available</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get appropriate icon for a file type
|
||||
* @param {string} name - Filename
|
||||
* @param {string} type - File type (dir or file)
|
||||
* @returns {string} Path to icon
|
||||
*/
|
||||
function getFileIcon(name, type) {
|
||||
if (type === 'dir') return icons.folder;
|
||||
const ext = name.split('.').pop().toLowerCase();
|
||||
return icons[ext] || icons.file;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string
|
||||
* @param {number} bytes - Size in bytes
|
||||
* @returns {string} Formatted file size
|
||||
*/
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Create breadcrumb navigation
|
||||
* @param {string} path - Current path in repository
|
||||
*/
|
||||
function createBreadcrumb(path) {
|
||||
breadcrumbEl.innerHTML = '';
|
||||
const parts = path.split('/').filter(p => p);
|
||||
|
||||
const homeLink = document.createElement('div');
|
||||
homeLink.classList.add('breadcrumb-item');
|
||||
homeLink.innerHTML = `<a href="#" data-path="">Repository Root</a>`;
|
||||
breadcrumbEl.appendChild(homeLink);
|
||||
|
||||
parts.forEach((part, index) => {
|
||||
const crumb = document.createElement('div');
|
||||
crumb.classList.add('breadcrumb-item');
|
||||
const fullPath = parts.slice(0, index + 1).join('/');
|
||||
crumb.innerHTML = `<a href="#" data-path="${fullPath}">${part}</a>`;
|
||||
breadcrumbEl.appendChild(crumb);
|
||||
});
|
||||
|
||||
// Add click listeners to breadcrumb items
|
||||
breadcrumbEl.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
loadRepoContents(link.dataset.path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Load and display repository contents
|
||||
* @param {string} [path=''] - Path within the repository
|
||||
*/
|
||||
async function loadRepoContents(path = '') {
|
||||
try {
|
||||
const apiUrl = `${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/contents/${path}`;
|
||||
const response = await fetch(apiUrl);
|
||||
const contents = await response.json();
|
||||
|
||||
// Filter out README.md doesnt work :(
|
||||
const filteredContents = contents.filter(item =>
|
||||
item.name.toLowerCase() !== 'readme.md'
|
||||
);
|
||||
|
||||
// Sort contents: folders first, then files
|
||||
contents.sort((a, b) => {
|
||||
if (a.type === 'dir' && b.type !== 'dir') return -1;
|
||||
if (a.type !== 'dir' && b.type === 'dir') return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Clear previous contents
|
||||
fileTreeEl.innerHTML = '';
|
||||
|
||||
// Update page title
|
||||
repoNameEl.textContent = REPO_NAME;
|
||||
|
||||
// Create breadcrumb
|
||||
createBreadcrumb(path);
|
||||
|
||||
// Render contents
|
||||
contents.forEach(item => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.classList.add('file-item');
|
||||
|
||||
const icon = document.createElement('img');
|
||||
icon.src = getFileIcon(item.name, item.type);
|
||||
icon.alt = item.type;
|
||||
icon.classList.add('file-icon');
|
||||
|
||||
const nameEl = document.createElement('div');
|
||||
nameEl.classList.add('file-name');
|
||||
nameEl.textContent = item.name;
|
||||
|
||||
const sizeEl = document.createElement('div');
|
||||
sizeEl.classList.add('file-size');
|
||||
sizeEl.textContent = item.type === 'file' ? formatBytes(item.size) : '';
|
||||
|
||||
fileItem.appendChild(icon);
|
||||
fileItem.appendChild(nameEl);
|
||||
fileItem.appendChild(sizeEl);
|
||||
|
||||
// Add click handler for folders
|
||||
if (item.type === 'dir') {
|
||||
fileItem.addEventListener('click', () => {
|
||||
loadRepoContents(`${path}/${item.name}`);
|
||||
});
|
||||
} else if (item.type === 'file') {
|
||||
// Optional: Add file preview/download logic
|
||||
fileItem.addEventListener('click', () => {
|
||||
window.open(item.html_url, '_blank');
|
||||
});
|
||||
}
|
||||
|
||||
fileTreeEl.appendChild(fileItem);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading repository contents:', error);
|
||||
fileTreeEl.innerHTML = `<p>Error loading repository contents. Please try again.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function initializeRepository() {
|
||||
await loadRepoContents();
|
||||
await loadReadme();
|
||||
}
|
||||
|
||||
// Initial load
|
||||
initializeRepository();
|
||||
});
|
||||
46
subpages/archives subpages/XML/explorer.html
Normal file
46
subpages/archives subpages/XML/explorer.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Repository Explorer - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../css/styles.css">
|
||||
<link rel="stylesheet" href="../../../css/explorer.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../../archives.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title" id="repo-name">Repository</h1>
|
||||
</div>
|
||||
|
||||
<main class="repo-explorer">
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
<div class="file-tree" id="file-tree">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
|
||||
<div class="readme-section" id="readme-container">
|
||||
<!-- loaded with script -->
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="explorer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
subpages/archives subpages/XML/explorer.js
Normal file
212
subpages/archives subpages/XML/explorer.js
Normal file
@@ -0,0 +1,212 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Configuration
|
||||
const GITHUB_API_BASE = 'https://api.github.com/repos';
|
||||
const REPO_OWNER = 'MapMakersAndProgrammers';
|
||||
const REPO_NAME = 'tanki-xml-maps'; // Change this dynamically based on which repo is being viewed
|
||||
|
||||
// DOM Elements
|
||||
const fileTreeEl = document.getElementById('file-tree');
|
||||
const breadcrumbEl = document.getElementById('breadcrumb');
|
||||
const repoNameEl = document.getElementById('repo-name');
|
||||
const readmeContainerEl = document.getElementById('readme-container');
|
||||
|
||||
// Icons for different file types
|
||||
const icons = {
|
||||
folder: '../../../assets/icons/folder.svg',
|
||||
file: '../../../assets/icons/file.svg',
|
||||
'webp': '../../../assets/icons/webp.svg',
|
||||
'ktx': '../../../assets/icons/ktx.svg',
|
||||
'bin': '../../../assets/icons/bin.svg',
|
||||
'json': '../../../assets/icons/json.svg',
|
||||
'xml': '../../../assets/icons/xml.svg',
|
||||
'md': '../../../assets/icons/readme.svg'
|
||||
};
|
||||
|
||||
// Markdown rendering function (using GitHub's API)
|
||||
async function renderMarkdown(markdown) {
|
||||
try {
|
||||
const response = await fetch('https://api.github.com/markdown', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: markdown,
|
||||
mode: 'markdown'
|
||||
})
|
||||
});
|
||||
return await response.text();
|
||||
} catch (error) {
|
||||
console.error('Error rendering markdown:', error);
|
||||
return `<p>Error rendering README</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and display README
|
||||
*/
|
||||
async function loadReadme() {
|
||||
try {
|
||||
// Fetch README content
|
||||
const readmeResponse = await fetch(`${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/readme`);
|
||||
const readmeData = await readmeResponse.json();
|
||||
|
||||
// Decode base64 README content
|
||||
const readmeContent = atob(readmeData.content);
|
||||
|
||||
// Render markdown
|
||||
const renderedReadme = await renderMarkdown(readmeContent);
|
||||
|
||||
// Create README container
|
||||
const readmeWrapper = document.createElement('div');
|
||||
readmeWrapper.classList.add('readme-content');
|
||||
readmeWrapper.innerHTML = renderedReadme;
|
||||
|
||||
// Clear previous content and append new README
|
||||
readmeContainerEl.innerHTML = '';
|
||||
readmeContainerEl.appendChild(readmeWrapper);
|
||||
} catch (error) {
|
||||
console.error('Error loading README:', error);
|
||||
readmeContainerEl.innerHTML = `<p>No README available</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get appropriate icon for a file type
|
||||
* @param {string} name - Filename
|
||||
* @param {string} type - File type (dir or file)
|
||||
* @returns {string} Path to icon
|
||||
*/
|
||||
function getFileIcon(name, type) {
|
||||
if (type === 'dir') return icons.folder;
|
||||
const ext = name.split('.').pop().toLowerCase();
|
||||
return icons[ext] || icons.file;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format bytes to human-readable string
|
||||
* @param {number} bytes - Size in bytes
|
||||
* @returns {string} Formatted file size
|
||||
*/
|
||||
function formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Create breadcrumb navigation
|
||||
* @param {string} path - Current path in repository
|
||||
*/
|
||||
function createBreadcrumb(path) {
|
||||
breadcrumbEl.innerHTML = '';
|
||||
const parts = path.split('/').filter(p => p);
|
||||
|
||||
const homeLink = document.createElement('div');
|
||||
homeLink.classList.add('breadcrumb-item');
|
||||
homeLink.innerHTML = `<a href="#" data-path="">Repository Root</a>`;
|
||||
breadcrumbEl.appendChild(homeLink);
|
||||
|
||||
parts.forEach((part, index) => {
|
||||
const crumb = document.createElement('div');
|
||||
crumb.classList.add('breadcrumb-item');
|
||||
const fullPath = parts.slice(0, index + 1).join('/');
|
||||
crumb.innerHTML = `<a href="#" data-path="${fullPath}">${part}</a>`;
|
||||
breadcrumbEl.appendChild(crumb);
|
||||
});
|
||||
|
||||
// Add click listeners to breadcrumb items
|
||||
breadcrumbEl.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
loadRepoContents(link.dataset.path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Load and display repository contents
|
||||
* @param {string} [path=''] - Path within the repository
|
||||
*/
|
||||
async function loadRepoContents(path = '') {
|
||||
try {
|
||||
const apiUrl = `${GITHUB_API_BASE}/${REPO_OWNER}/${REPO_NAME}/contents/${path}`;
|
||||
const response = await fetch(apiUrl);
|
||||
const contents = await response.json();
|
||||
|
||||
// Filter out README.md doesnt work :(
|
||||
const filteredContents = contents.filter(item =>
|
||||
item.name.toLowerCase() !== 'readme.md'
|
||||
);
|
||||
|
||||
// Sort contents: folders first, then files
|
||||
contents.sort((a, b) => {
|
||||
if (a.type === 'dir' && b.type !== 'dir') return -1;
|
||||
if (a.type !== 'dir' && b.type === 'dir') return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Clear previous contents
|
||||
fileTreeEl.innerHTML = '';
|
||||
|
||||
// Update page title
|
||||
repoNameEl.textContent = REPO_NAME;
|
||||
|
||||
// Create breadcrumb
|
||||
createBreadcrumb(path);
|
||||
|
||||
// Render contents
|
||||
contents.forEach(item => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.classList.add('file-item');
|
||||
|
||||
const icon = document.createElement('img');
|
||||
icon.src = getFileIcon(item.name, item.type);
|
||||
icon.alt = item.type;
|
||||
icon.classList.add('file-icon');
|
||||
|
||||
const nameEl = document.createElement('div');
|
||||
nameEl.classList.add('file-name');
|
||||
nameEl.textContent = item.name;
|
||||
|
||||
const sizeEl = document.createElement('div');
|
||||
sizeEl.classList.add('file-size');
|
||||
sizeEl.textContent = item.type === 'file' ? formatBytes(item.size) : '';
|
||||
|
||||
fileItem.appendChild(icon);
|
||||
fileItem.appendChild(nameEl);
|
||||
fileItem.appendChild(sizeEl);
|
||||
|
||||
// Add click handler for folders
|
||||
if (item.type === 'dir') {
|
||||
fileItem.addEventListener('click', () => {
|
||||
loadRepoContents(`${path}/${item.name}`);
|
||||
});
|
||||
} else if (item.type === 'file') {
|
||||
// Optional: Add file preview/download logic
|
||||
fileItem.addEventListener('click', () => {
|
||||
window.open(item.html_url, '_blank');
|
||||
});
|
||||
}
|
||||
|
||||
fileTreeEl.appendChild(fileItem);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading repository contents:', error);
|
||||
fileTreeEl.innerHTML = `<p>Error loading repository contents. Please try again.</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function initializeRepository() {
|
||||
await loadRepoContents();
|
||||
await loadReadme();
|
||||
}
|
||||
|
||||
// Initial load
|
||||
initializeRepository();
|
||||
});
|
||||
91
subpages/archives.html
Normal file
91
subpages/archives.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Archives - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
|
||||
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../index.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title">Archives</h1>
|
||||
</div>
|
||||
|
||||
<main class="archives-content">
|
||||
<div class="archives-grid">
|
||||
<a href="archives subpages/XML/explorer.html" class="archive-box" style="background-image: url('../assets/xml.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>XML Format Maps</h2>
|
||||
<p>Archive of XML format maps</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="archives subpages/JSON/explorer.html" class="archive-box" style="background-image: url('../assets/json.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>JSON Format Maps</h2>
|
||||
<p>Archive of JSON format maps</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="archives subpages/BIN/explorer.html" class="archive-box" style="background-image: url('../assets/bin.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>BIN Format Maps</h2>
|
||||
<p>Archive of BIN format maps</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-prop-libraries" class="archive-box" target="_blank" style="background-image: url('../assets/proplibrary.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>Prop Libraries</h2>
|
||||
<p>Archive of TO prop libraries</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/tanki-model-archive" class="archive-box" target="_blank" style="background-image: url('../assets/tankimodels.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>Tanki Models</h2>
|
||||
<p>Archive of TO models</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa3d-archive" class="archive-box" target="_blank" style="background-image: url('../assets/a3d.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>Alternativa3D Versions</h2>
|
||||
<p>Archive of various version of Alternativa3D</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/alternativaphysics-archive" class="archive-box" target="_blank" style="background-image: url('../assets/ap.png');">
|
||||
<div class="archive-overlay">
|
||||
<h2>AlternativaPhysics Versions</h2>
|
||||
<p>Archive of various versions of AlternativaPhysics</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
50
subpages/misc.html
Normal file
50
subpages/misc.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Miscellaneous - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../index.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title">Miscellaneous</h1>
|
||||
</div>
|
||||
|
||||
<main class="misc-content">
|
||||
<div class="misc-grid">
|
||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa-demos" class="misc-box" target="_blank" style="background-image: url('../assets/demo.png');">
|
||||
<div class="misc-overlay">
|
||||
<h2>Alternativa Games' Flash Demos</h2>
|
||||
<p>Demos built using the Alternativa3D engine</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa-editor" class="misc-box" target="_blank" style="background-image: url('../assets/editor.png');">
|
||||
<div class="misc-overlay">
|
||||
<h2>Alternativa Editor Source Code</h2>
|
||||
<p>AlternativaEditor source code</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
58
subpages/tools.html
Normal file
58
subpages/tools.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tools - Map Makers & Programmers</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise-overlay"></div>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="page-header">
|
||||
<a href="../index.html" class="back-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Back
|
||||
</a>
|
||||
<h1 class="page-title">Tools</h1>
|
||||
</div>
|
||||
|
||||
<main class="tools-content">
|
||||
<div class="tools-grid">
|
||||
<a href="https://github.com/MapMakersAndProgrammers/alternativa-tools" class="tool-box" target="_blank" style="background-image: url('../assets/tools.png');">
|
||||
<div class="tool-overlay">
|
||||
<h2>Alternativa Games' Tools</h2>
|
||||
<p>Various tools made by Alternativa Games</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/davidejones/alternativa3d_tools" class="tool-box" target="_blank" style="background-image: url('../assets/a3d1.png');">
|
||||
<div class="tool-overlay">
|
||||
<h2>Blender A3D 1.x and 2.x Plugin</h2>
|
||||
<p>Blender plugin to import a3d models versions 1.x and 2.x</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/MapMakersAndProgrammers/io_scene_a3d" class="tool-box" target="_blank" style="background-image: url('../assets/a3d2.png');">
|
||||
<div class="tool-overlay">
|
||||
<h2>Blender A3D 3.x Plugin</h2>
|
||||
<p>Blender plugin to import a3d models versions 3.x</p>
|
||||
<span class="github-link">View on GitHub</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2024 Map Makers & Programmers. A few rights reserved...</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user