mirror of
https://github.com/aljazceru/awesome-nostr.git
synced 2025-02-22 14:48:59 +00:00
Aljaz Ceru
GitHub
commit
1239b3fc17
96
index.html
Normal file
96
index.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A comprehensive collection of Nostr resources, tools, clients, and protocols for developers and users.">
|
||||
<meta name="keywords" content="nostr, cryptocurrency, decentralized social, protocols, tools, clients, resources">
|
||||
<meta name="author" content="Your Name">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Open Graph / Social Media Meta Tags -->
|
||||
<meta property="og:title" content="Awesome Nostr Resources">
|
||||
<meta property="og:description" content="A comprehensive collection of Nostr resources, tools, clients, and protocols for developers and users.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://your-domain.com">
|
||||
<meta property="og:image" content="https://your-domain.com/path-to-image.jpg">
|
||||
|
||||
<!-- Twitter Card Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Awesome Nostr Resources">
|
||||
<meta name="twitter:description" content="A comprehensive collection of Nostr resources, tools, clients, and protocols for developers and users.">
|
||||
<meta name="twitter:image" content="https://your-domain.com/path-to-image.jpg">
|
||||
|
||||
<title>Awesome Nostr Resources | Comprehensive Guide to Nostr Protocol</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="top-nav">
|
||||
<div class="nav-content">
|
||||
<h1>
|
||||
<div class="logo-container">
|
||||
<img src="Logo.png" alt="Nostr Logo" class="nav-logo">
|
||||
<span class="logo-text">.NET</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="search-box">
|
||||
<input type="text" id="search" placeholder="Search resources...">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<div class="theme-controls">
|
||||
<select id="colorThemeSelect" class="theme-select" aria-label="Select color theme">
|
||||
<option value="default">Default Theme</option>
|
||||
<option value="purple">Purple Dream</option>
|
||||
<option value="nature">Nature's Touch</option>
|
||||
<option value="sunset">Sunset Vibes</option>
|
||||
<option value="grape">Grape Fusion</option>
|
||||
<option value="autumn">Autumn Warmth</option>
|
||||
<option value="midnight">Midnight Rose</option>
|
||||
<option value="rosenoir">Rose Noir</option>
|
||||
</select>
|
||||
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Move menu toggle button outside of sidebar -->
|
||||
<button id="menuToggle" class="menu-toggle" aria-label="Toggle menu">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<div class="container">
|
||||
<!-- Remove duplicate menu toggle from sidebar -->
|
||||
<nav class="sidebar" aria-label="Main navigation">
|
||||
<header class="sidebar-header">
|
||||
<h4>Nostr Resources</h4>
|
||||
</header>
|
||||
<div class="sidebar-content">
|
||||
<ul class="nav-links">
|
||||
<!-- Categories will be dynamically populated here -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content" role="main">
|
||||
<header class="content-header">
|
||||
<div class="view-controls">
|
||||
<!-- Dark mode toggle has been moved to top nav -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="resources-container" role="region" aria-label="Resource listings"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>© 2024 Awesome Nostr Resources. All rights reserved.</p>
|
||||
</footer>
|
||||
<!-- Add marked.js before your script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
789
script.js
Normal file
789
script.js
Normal file
@ -0,0 +1,789 @@
|
||||
// Dark mode toggle
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const body = document.body;
|
||||
|
||||
// Color theme definitions
|
||||
const colorThemes = {
|
||||
default: {
|
||||
light: {
|
||||
primary: '#4a314d',
|
||||
background: '#ffffff',
|
||||
text: '#1a090d',
|
||||
cardBackground: '#a8ba9a',
|
||||
sidebarBackground: '#6b6570',
|
||||
hoverColor: '#ace894'
|
||||
},
|
||||
dark: {
|
||||
background: '#1a090d',
|
||||
text: '#ace894',
|
||||
cardBackground: '#4a314d',
|
||||
sidebarBackground: '#6b6570',
|
||||
linkColor: '#a8ba9a'
|
||||
}
|
||||
},
|
||||
purple: {
|
||||
light: {
|
||||
primary: '#9c528b',
|
||||
background: '#ffffff',
|
||||
text: '#2f0147',
|
||||
cardBackground: '#e2c2c6',
|
||||
sidebarBackground: '#b9929f',
|
||||
hoverColor: '#610f7f'
|
||||
},
|
||||
dark: {
|
||||
background: '#2f0147',
|
||||
text: '#e2c2c6',
|
||||
cardBackground: '#9c528b',
|
||||
sidebarBackground: '#610f7f',
|
||||
linkColor: '#b9929f'
|
||||
}
|
||||
},
|
||||
nature: {
|
||||
light: {
|
||||
primary: '#2c5530',
|
||||
background: '#ffffff',
|
||||
text: '#1a2f1c',
|
||||
cardBackground: '#a7c4aa',
|
||||
sidebarBackground: '#718355',
|
||||
hoverColor: '#90a955'
|
||||
},
|
||||
dark: {
|
||||
background: '#1a2f1c',
|
||||
text: '#90a955',
|
||||
cardBackground: '#2c5530',
|
||||
sidebarBackground: '#718355',
|
||||
linkColor: '#a7c4aa'
|
||||
}
|
||||
},
|
||||
sunset: {
|
||||
light: {
|
||||
primary: '#cf5c36',
|
||||
background: '#ffffff',
|
||||
text: '#1f1f1f',
|
||||
cardBackground: '#eec584',
|
||||
sidebarBackground: '#c8963e',
|
||||
hoverColor: '#f3a953'
|
||||
},
|
||||
dark: {
|
||||
background: '#1f1f1f',
|
||||
text: '#eec584',
|
||||
cardBackground: '#cf5c36',
|
||||
sidebarBackground: '#c8963e',
|
||||
linkColor: '#f3a953'
|
||||
}
|
||||
},
|
||||
grape: {
|
||||
light: {
|
||||
primary: '#642ca9',
|
||||
background: '#ffffff',
|
||||
text: '#642ca9',
|
||||
cardBackground: '#ffb8de',
|
||||
sidebarBackground: '#ffdde1',
|
||||
hoverColor: '#ff36ab'
|
||||
},
|
||||
dark: {
|
||||
background: '#642ca9',
|
||||
text: '#ffdde1',
|
||||
cardBackground: '#ff36ab',
|
||||
sidebarBackground: '#ff74d4',
|
||||
linkColor: '#ffb8de'
|
||||
}
|
||||
},
|
||||
autumn: {
|
||||
light: {
|
||||
primary: '#d95d39',
|
||||
background: '#ffffff',
|
||||
text: '#0e1428',
|
||||
cardBackground: '#f0a202',
|
||||
sidebarBackground: '#7b9e89',
|
||||
hoverColor: '#f18805'
|
||||
},
|
||||
dark: {
|
||||
background: '#0e1428',
|
||||
text: '#f0a202',
|
||||
cardBackground: '#d95d39',
|
||||
sidebarBackground: '#7b9e89',
|
||||
linkColor: '#f18805'
|
||||
}
|
||||
},
|
||||
midnight: {
|
||||
light: {
|
||||
primary: '#b91372',
|
||||
background: '#ffffff',
|
||||
text: '#31081f',
|
||||
cardBackground: '#fa198b',
|
||||
sidebarBackground: '#6b0f1a',
|
||||
hoverColor: '#fa198b'
|
||||
},
|
||||
dark: {
|
||||
background: '#0e0004',
|
||||
text: '#fa198b',
|
||||
cardBackground: '#b91372',
|
||||
sidebarBackground: '#31081f',
|
||||
linkColor: '#fa198b'
|
||||
}
|
||||
},
|
||||
rosenoir: {
|
||||
light: {
|
||||
primary: '#792359',
|
||||
background: '#ffffff',
|
||||
text: '#2f2d2e',
|
||||
cardBackground: '#fd3e81',
|
||||
sidebarBackground: '#41292c',
|
||||
hoverColor: '#d72483'
|
||||
},
|
||||
dark: {
|
||||
background: '#2f2d2e',
|
||||
text: '#fd3e81',
|
||||
cardBackground: '#792359',
|
||||
sidebarBackground: '#41292c',
|
||||
linkColor: '#d72483'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize theme from localStorage or system preference
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
body.dataset.theme = savedTheme;
|
||||
} else {
|
||||
// Check system preference if no saved theme
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
body.dataset.theme = prefersDark ? 'dark' : 'light';
|
||||
localStorage.setItem('theme', body.dataset.theme);
|
||||
}
|
||||
|
||||
// Update toggle button icon
|
||||
darkModeToggle.innerHTML = body.dataset.theme === 'dark'
|
||||
? '<i class="fas fa-sun"></i>'
|
||||
: '<i class="fas fa-moon"></i>';
|
||||
|
||||
const colorThemeSelect = document.getElementById('colorThemeSelect');
|
||||
|
||||
// Initialize theme from localStorage
|
||||
const savedColorTheme = localStorage.getItem('colorTheme') || 'default';
|
||||
colorThemeSelect.value = savedColorTheme;
|
||||
applyColorTheme(savedColorTheme);
|
||||
|
||||
// Handle theme changes
|
||||
colorThemeSelect.addEventListener('change', (e) => {
|
||||
const selectedTheme = e.target.value;
|
||||
localStorage.setItem('colorTheme', selectedTheme);
|
||||
applyColorTheme(selectedTheme);
|
||||
});
|
||||
});
|
||||
|
||||
darkModeToggle.addEventListener('click', () => {
|
||||
const newTheme = body.dataset.theme === 'dark' ? 'light' : 'dark';
|
||||
body.dataset.theme = newTheme;
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
darkModeToggle.innerHTML = newTheme === 'dark'
|
||||
? '<i class="fas fa-sun"></i>'
|
||||
: '<i class="fas fa-moon"></i>';
|
||||
|
||||
// Reapply color theme with new dark/light mode
|
||||
const currentColorTheme = localStorage.getItem('colorTheme') || 'default';
|
||||
applyColorTheme(currentColorTheme);
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
const searchInput = document.getElementById('search');
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const container = document.getElementById('resources-container');
|
||||
|
||||
if (!searchTerm) {
|
||||
// If search is empty, restore current category view
|
||||
const currentCategory = document.querySelector('.nav-links a.active')?.textContent;
|
||||
if (currentCategory) {
|
||||
displaySection(currentCategory, window.parsedResources);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear current container
|
||||
container.innerHTML = '';
|
||||
|
||||
// Search through all sections
|
||||
Object.entries(window.parsedResources).forEach(([sectionName, sectionContent]) => {
|
||||
sectionContent.forEach(item => {
|
||||
if (item.type === 'resources') {
|
||||
// Search through resource lists
|
||||
Array.from(item.element.children).forEach(li => {
|
||||
const resourceName = li.querySelector('a')?.textContent || '';
|
||||
const resourceLink = li.querySelector('a')?.href || '';
|
||||
const resourceDescription = li.textContent.split('- ')[1]?.trim() || '';
|
||||
|
||||
const searchableText = [resourceName, resourceDescription, resourceLink]
|
||||
.join(' ')
|
||||
.toLowerCase();
|
||||
|
||||
if (searchableText.includes(searchTerm)) {
|
||||
const card = createResourceCard({
|
||||
name: resourceName,
|
||||
link: resourceLink,
|
||||
description: resourceDescription,
|
||||
stars: li.querySelector('img[alt="stars"]')
|
||||
? parseInt(li.querySelector('img[alt="stars"]').src.match(/stars\/(\d+)/)?.[1]) || 0
|
||||
: 0
|
||||
});
|
||||
|
||||
// Add section label to card
|
||||
const sectionLabel = document.createElement('div');
|
||||
sectionLabel.className = 'category-label';
|
||||
sectionLabel.textContent = sectionName;
|
||||
card.insertBefore(sectionLabel, card.firstChild);
|
||||
|
||||
container.appendChild(card);
|
||||
}
|
||||
});
|
||||
} else if (item.type === 'content') {
|
||||
// Search through regular content
|
||||
const contentText = item.element.textContent.toLowerCase();
|
||||
if (contentText.includes(searchTerm)) {
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'markdown-content';
|
||||
contentDiv.innerHTML = item.element.outerHTML;
|
||||
|
||||
// Add section label
|
||||
const sectionLabel = document.createElement('div');
|
||||
sectionLabel.className = 'category-label';
|
||||
sectionLabel.textContent = sectionName;
|
||||
|
||||
container.appendChild(sectionLabel);
|
||||
container.appendChild(contentDiv);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Show "no results" message if nothing found
|
||||
if (!container.children.length) {
|
||||
container.innerHTML = `
|
||||
<div class="no-results">
|
||||
No resources found matching "${searchTerm}"
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Add active class handling for navigation
|
||||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
document.querySelectorAll('.nav-links a').forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
searchInput.value = ''; // Clear search when changing categories
|
||||
});
|
||||
});
|
||||
|
||||
// Add this function to fetch contributors from GitHub API
|
||||
async function fetchContributors(owner, repo) {
|
||||
try {
|
||||
let page = 1;
|
||||
let allContributors = [];
|
||||
|
||||
while (true) {
|
||||
const response = await fetch(
|
||||
`https://api.github.com/repos/${owner}/${repo}/contributors?per_page=100&page=${page}`
|
||||
);
|
||||
|
||||
if (!response.ok) throw new Error('Failed to fetch contributors');
|
||||
|
||||
const contributors = await response.json();
|
||||
if (contributors.length === 0) break; // No more contributors
|
||||
|
||||
allContributors = [...allContributors, ...contributors];
|
||||
page++;
|
||||
|
||||
// Check if we've reached the last page
|
||||
const linkHeader = response.headers.get('Link');
|
||||
if (!linkHeader || !linkHeader.includes('rel="next"')) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Total contributors fetched: ${allContributors.length}`);
|
||||
return allContributors;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching contributors:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// Modify the parseResources function to handle contributors differently
|
||||
function parseResources(content) {
|
||||
const resources = {
|
||||
'most-popular': [],
|
||||
'protocol': [],
|
||||
'relays': [],
|
||||
'clients': [],
|
||||
'libraries': [],
|
||||
'bridges-and-gateways': [],
|
||||
'cache-services': [],
|
||||
'tools': [],
|
||||
'nip-05-identity-services': [],
|
||||
'offline-signers': [],
|
||||
'vanity-pubkey-mining': [],
|
||||
'peer-to-peer-markets': [],
|
||||
'nip-07-browser-extensions': [],
|
||||
'nip-47-nostr-wallet-connect-nwc-implementations': [],
|
||||
'nip-57-zaps-compatible-wallets-and-solutions': [],
|
||||
'nip-90-data-vending-machines': [],
|
||||
'nip-96-file-storage-servers': [],
|
||||
'nostr-web-services-nws': [],
|
||||
'adjacent-protocols': [],
|
||||
'games-on-nostr': [],
|
||||
'communities': [],
|
||||
'tutorials': [],
|
||||
'recommended-reading-watching': [],
|
||||
'podcasts': [],
|
||||
'other-links': [],
|
||||
'deprecated': [],
|
||||
'related-resources': [],
|
||||
'contributing': [],
|
||||
'contributors': []
|
||||
};
|
||||
|
||||
const lines = content.split('\n');
|
||||
let currentMainSection = '';
|
||||
let currentSubSection = '';
|
||||
let contributingContent = '';
|
||||
|
||||
// Extract repo info from contributors section
|
||||
let repoInfo = null;
|
||||
const repoRegex = /github\.com\/([\w-]+)\/([\w-]+)\/graphs\/contributors/;
|
||||
|
||||
lines.forEach(line => {
|
||||
if (line.startsWith('## ')) {
|
||||
currentMainSection = line.slice(3).trim();
|
||||
currentSubSection = '';
|
||||
console.log('Processing section:', currentMainSection); // Debug log
|
||||
} else if (currentMainSection.toLowerCase() === 'contributors') {
|
||||
const match = line.match(repoRegex);
|
||||
if (match) {
|
||||
repoInfo = {
|
||||
owner: match[1],
|
||||
repo: match[2]
|
||||
};
|
||||
}
|
||||
} else if (currentMainSection.toLowerCase() === 'contributing') {
|
||||
if (line.trim() && !line.startsWith('##')) {
|
||||
contributingContent += line + '\n';
|
||||
}
|
||||
}
|
||||
// Detect subsection headers (###)
|
||||
else if (line.startsWith('### ')) {
|
||||
currentSubSection = line.slice(4).trim();
|
||||
}
|
||||
// Parse regular resource lines (starting with '- [')
|
||||
else if (line.trim().startsWith('- [')) {
|
||||
const resource = parseResourceLine(line);
|
||||
if (resource) {
|
||||
// Convert section header to category ID format
|
||||
const categoryId = currentMainSection
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '');
|
||||
|
||||
console.log('Parsed resource:', categoryId, resource); // Debug log
|
||||
|
||||
// Add resource to appropriate category if it exists
|
||||
if (resources[categoryId]) {
|
||||
resources[categoryId].push(resource);
|
||||
} else {
|
||||
console.warn('Category not found:', categoryId); // Debug log
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add special handling for contributors and contributing sections
|
||||
resources['contributors'] = [{
|
||||
type: 'github-contributors',
|
||||
repoInfo: repoInfo
|
||||
}];
|
||||
|
||||
resources['contributing'] = [{
|
||||
type: 'markdown',
|
||||
content: contributingContent.trim()
|
||||
}];
|
||||
|
||||
// Log the parsed data for debugging
|
||||
console.log('Parsed resources:', resources);
|
||||
return resources;
|
||||
}
|
||||
|
||||
// Function to parse a single resource line
|
||||
function parseResourceLine(line) {
|
||||
// Updated regex patterns to better handle various markdown formats
|
||||
const nameRegex = /\[(.*?)\]/;
|
||||
const linkRegex = /\((.*?)\)/;
|
||||
const starsRegex = /!\[stars\].*?stars\/(.*?)\/.*?style=social/;
|
||||
// Updated description regex to handle descriptions after stars badge
|
||||
const descriptionRegex = /style=social\) - (.*?)(?=(?:\[|\n|$))|(?:\) - )(.*?)(?=(?:\[|\n|$))/;
|
||||
|
||||
try {
|
||||
const name = nameRegex.exec(line)?.[1];
|
||||
const link = linkRegex.exec(line)?.[1];
|
||||
const stars = starsRegex.exec(line)?.[1];
|
||||
|
||||
// More robust description extraction
|
||||
const descMatch = descriptionRegex.exec(line);
|
||||
const description = (descMatch?.[1] || descMatch?.[2] || '').trim();
|
||||
|
||||
if (name && link) {
|
||||
return {
|
||||
name,
|
||||
link,
|
||||
stars: stars || 0,
|
||||
description: description || '',
|
||||
raw: line.trim()
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing resource line:', error, line);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Modified createResourceCard function to display markdown links in a cleaner format
|
||||
function createResourceCard(resource) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'resource-card';
|
||||
|
||||
// Add schema.org structured data
|
||||
card.setAttribute('itemscope', '');
|
||||
card.setAttribute('itemtype', 'https://schema.org/SoftwareApplication');
|
||||
|
||||
// Extract domain for favicon
|
||||
let faviconUrl = '';
|
||||
try {
|
||||
const url = new URL(resource.link);
|
||||
// Using Google's favicon service as a fallback if the direct favicon isn't available
|
||||
faviconUrl = `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`;
|
||||
} catch (e) {
|
||||
console.warn('Invalid URL:', resource.link);
|
||||
}
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="resource-header">
|
||||
<h3 class="resource-title">
|
||||
<a href="${resource.link}"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
itemprop="name">
|
||||
${faviconUrl ? `<img src="${faviconUrl}" alt="" class="resource-favicon" />` : ''}
|
||||
${resource.name}
|
||||
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
||||
</a>
|
||||
</h3>
|
||||
${resource.stars ? `
|
||||
<div class="resource-stars" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
|
||||
<i class="fas fa-star" aria-hidden="true"></i>
|
||||
<span itemprop="ratingValue">${resource.stars}</span>
|
||||
<meta itemprop="ratingCount" content="${resource.stars}">
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
${resource.description ? `
|
||||
<div class="resource-description" itemprop="description">
|
||||
${resource.description}
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Update createSpecialSectionCard to handle GitHub contributors
|
||||
async function createSpecialSectionCard(resource) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'resource-card';
|
||||
|
||||
if (resource.type === 'github-contributors') {
|
||||
card.className += ' contributors-card';
|
||||
card.innerHTML = `
|
||||
<div class="resource-title">Contributors</div>
|
||||
<div class="contributors-grid">
|
||||
<div class="loading">Loading contributors...</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (resource.repoInfo) {
|
||||
console.log('Fetching contributors for:', resource.repoInfo); // Debug log
|
||||
const contributors = await fetchContributors(resource.repoInfo.owner, resource.repoInfo.repo);
|
||||
console.log('Number of contributors:', contributors.length); // Debug log
|
||||
const contributorsHtml = contributors.map(contributor => `
|
||||
<a href="${contributor.html_url}" target="_blank" title="${contributor.login}">
|
||||
<img src="${contributor.avatar_url}" alt="${contributor.login}" />
|
||||
<span>${contributor.login}</span>
|
||||
</a>
|
||||
`).join('');
|
||||
|
||||
const grid = card.querySelector('.contributors-grid');
|
||||
grid.innerHTML = contributorsHtml || 'No contributors found';
|
||||
}
|
||||
} else if (resource.type === 'markdown') {
|
||||
// For contributing section
|
||||
const formattedContent = resource.content
|
||||
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="resource-title">How to Contribute</div>
|
||||
<div class="resource-description">
|
||||
${formattedContent}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Update populateResources to handle both special and regular resources
|
||||
async function populateResources(categoryId, resources) {
|
||||
const container = document.getElementById('resources-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
const categoryResources = resources[categoryId];
|
||||
if (!categoryResources) return;
|
||||
|
||||
for (const resource of categoryResources) {
|
||||
let card;
|
||||
if (resource.type) {
|
||||
// Handle special sections (contributors and contributing)
|
||||
card = await createSpecialSectionCard(resource);
|
||||
} else {
|
||||
// Handle regular resource cards
|
||||
card = createResourceCard(resource);
|
||||
}
|
||||
container.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to get icon for category
|
||||
function getCategoryIcon(category) {
|
||||
const iconMap = {
|
||||
'most-popular': 'fa-star',
|
||||
'protocol': 'fa-book',
|
||||
'relays': 'fa-server',
|
||||
'clients': 'fa-mobile-alt',
|
||||
'libraries': 'fa-code',
|
||||
'bridges-and-gateways': 'fa-bridge',
|
||||
'cache-services': 'fa-database',
|
||||
'tools': 'fa-wrench',
|
||||
'nip-05-identity-services': 'fa-id-card',
|
||||
'offline-signers': 'fa-signature',
|
||||
'vanity-pubkey-mining': 'fa-hammer',
|
||||
'peer-to-peer-markets': 'fa-store',
|
||||
'nip-07-browser-extensions': 'fa-puzzle-piece',
|
||||
'nip-47-nostr-wallet-connect-nwc-implementations': 'fa-wallet',
|
||||
'nip-57-zaps-compatible-wallets-and-solutions': 'fa-bolt',
|
||||
'nip-90-data-vending-machines': 'fa-store-alt',
|
||||
'nip-96-file-storage-servers': 'fa-folder',
|
||||
'nostr-web-services-nws': 'fa-globe',
|
||||
'adjacent-protocols': 'fa-link',
|
||||
'games-on-nostr': 'fa-gamepad',
|
||||
'communities': 'fa-users',
|
||||
'tutorials': 'fa-graduation-cap',
|
||||
'recommended-reading-watching': 'fa-book-reader',
|
||||
'podcasts': 'fa-podcast',
|
||||
'other-links': 'fa-external-link-alt',
|
||||
'deprecated': 'fa-archive',
|
||||
'related-resources': 'fa-project-diagram',
|
||||
'contributing': 'fa-hands-helping',
|
||||
'contributors': 'fa-users-cog',
|
||||
// Default icon if category not found
|
||||
'default': 'fa-circle'
|
||||
};
|
||||
|
||||
const key = category.toLowerCase().replace(/[^a-z0-9]+/g, '-');
|
||||
return iconMap[key] || iconMap.default;
|
||||
}
|
||||
|
||||
// Function to generate navigation from content
|
||||
function generateNavigation(sectionNames) {
|
||||
const navList = document.querySelector('.nav-links');
|
||||
navList.innerHTML = ''; // Clear existing navigation
|
||||
|
||||
sectionNames.forEach(section => {
|
||||
// Create URL-friendly ID
|
||||
const sectionId = section
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/(^-|-$)/g, '');
|
||||
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML = `
|
||||
<a href="#${sectionId}" data-section="${section}">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
${section}
|
||||
</a>
|
||||
`;
|
||||
|
||||
// Add click handler
|
||||
li.querySelector('a').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Remove active class from all links
|
||||
document.querySelectorAll('.nav-links a').forEach(a =>
|
||||
a.classList.remove('active')
|
||||
);
|
||||
// Add active class to clicked link
|
||||
e.target.classList.add('active');
|
||||
// Display the section
|
||||
displaySection(section, window.parsedResources);
|
||||
});
|
||||
|
||||
navList.appendChild(li);
|
||||
});
|
||||
|
||||
// Set first item as active
|
||||
const firstLink = navList.querySelector('a');
|
||||
if (firstLink) {
|
||||
firstLink.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Remove the old fetch call and replace with this initialization
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Test if marked is loaded
|
||||
if (typeof marked === 'undefined') {
|
||||
console.error('marked.js is not loaded!');
|
||||
document.getElementById('resources-container').innerHTML = `
|
||||
<div class="error-message">
|
||||
Error: marked.js library is not loaded properly.
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Test marked with a simple markdown string
|
||||
console.log('marked.js test:', marked.parse('# Test\nThis is a *test* of **marked.js**'));
|
||||
|
||||
// If everything is working, proceed with main functionality
|
||||
parseAndDisplayContent()
|
||||
.then(() => console.log('Content successfully parsed and displayed'))
|
||||
.catch(error => {
|
||||
console.error('Error in main content processing:', error);
|
||||
document.getElementById('resources-container').innerHTML = `
|
||||
<div class="error-message">
|
||||
Error loading content: ${error.message}
|
||||
</div>`;
|
||||
});
|
||||
});
|
||||
|
||||
async function parseAndDisplayContent() {
|
||||
try {
|
||||
const response = await fetch('./README.md');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const content = await response.text();
|
||||
|
||||
// Parse the markdown into HTML
|
||||
const htmlContent = marked.parse(content);
|
||||
|
||||
// Create a temporary element to parse the HTML
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = htmlContent;
|
||||
|
||||
// Get all sections (h2 headers and their content)
|
||||
const sections = {};
|
||||
let currentSection = null;
|
||||
let currentSectionContent = [];
|
||||
|
||||
Array.from(tempDiv.children).forEach(element => {
|
||||
if (element.tagName === 'H2') {
|
||||
// If we have a previous section, save it
|
||||
if (currentSection) {
|
||||
sections[currentSection] = currentSectionContent;
|
||||
}
|
||||
// Start new section
|
||||
currentSection = element.textContent.trim();
|
||||
currentSectionContent = [];
|
||||
} else if (currentSection) {
|
||||
currentSectionContent.push({
|
||||
type: element.tagName === 'UL' ? 'resources' : 'content',
|
||||
element: element
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Save the last section
|
||||
if (currentSection) {
|
||||
sections[currentSection] = currentSectionContent;
|
||||
}
|
||||
|
||||
// Store sections globally
|
||||
window.parsedResources = sections;
|
||||
|
||||
// Generate navigation
|
||||
const sectionNames = Object.keys(sections);
|
||||
generateNavigation(sectionNames);
|
||||
|
||||
// Display initial section
|
||||
if (sectionNames.length > 0) {
|
||||
displaySection(sectionNames[0], sections);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing markdown:', error);
|
||||
throw error; // Re-throw to be caught by the main error handler
|
||||
}
|
||||
}
|
||||
|
||||
function displaySection(sectionName, sections) {
|
||||
const container = document.getElementById('resources-container');
|
||||
container.innerHTML = '';
|
||||
|
||||
// Add section header
|
||||
const header = document.createElement('h2');
|
||||
header.textContent = sectionName;
|
||||
container.appendChild(header);
|
||||
|
||||
// Display section content
|
||||
sections[sectionName].forEach(item => {
|
||||
if (item.type === 'content') {
|
||||
// Regular markdown content
|
||||
const contentDiv = document.createElement('div');
|
||||
contentDiv.className = 'markdown-content';
|
||||
contentDiv.innerHTML = item.element.outerHTML;
|
||||
container.appendChild(contentDiv);
|
||||
} else if (item.type === 'resources') {
|
||||
// Resource list
|
||||
Array.from(item.element.children).forEach(li => {
|
||||
const card = createResourceCard({
|
||||
name: li.querySelector('a')?.textContent || '',
|
||||
link: li.querySelector('a')?.href || '',
|
||||
description: li.textContent.split('- ')[1]?.trim() || '',
|
||||
stars: li.querySelector('img[alt="stars"]')
|
||||
? parseInt(li.querySelector('img[alt="stars"]').src.match(/stars\/(\d+)/)?.[1]) || 0
|
||||
: 0
|
||||
});
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyColorTheme(themeName) {
|
||||
const isDark = document.body.dataset.theme === 'dark';
|
||||
const theme = colorThemes[themeName][isDark ? 'dark' : 'light'];
|
||||
|
||||
// Apply theme colors to CSS variables
|
||||
const root = document.documentElement;
|
||||
Object.entries(theme).forEach(([key, value]) => {
|
||||
const cssVar = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
|
||||
root.style.setProperty(cssVar, value);
|
||||
});
|
||||
}
|
||||
700
styles.css
Normal file
700
styles.css
Normal file
@ -0,0 +1,700 @@
|
||||
:root {
|
||||
--primary-color: #4a314d;
|
||||
--background-color: #ffffff;
|
||||
--text-color: #1a090d;
|
||||
--card-background: #a8ba9a;
|
||||
--sidebar-background: #6b6570;
|
||||
--hover-color: #ace894;
|
||||
--text-primary: var(--text-color);
|
||||
--link-color: var(--primary-color);
|
||||
--star-color: #4a314d;
|
||||
}
|
||||
|
||||
/* Dark theme variables */
|
||||
[data-theme="dark"] {
|
||||
--background-color: #1a090d;
|
||||
--text-color: #ace894;
|
||||
--card-background: #4a314d;
|
||||
--sidebar-background: #6b6570;
|
||||
--text-primary: var(--text-color);
|
||||
--link-color: #a8ba9a;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
margin-top: 60px; /* Height of top nav */
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background-color: var(--sidebar-background);
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
transition: transform 0.3s ease;
|
||||
border-right: 1px solid rgba(110, 84, 148, 0.15);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
||||
top: 60px; /* Start below top nav */
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 3rem; /* Increased from 1rem to 2.5rem for more spacing */
|
||||
}
|
||||
|
||||
.sidebar-header h4 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(226, 194, 198, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-links i {
|
||||
margin-right: 0.5rem;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar Styles */
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: var(--sidebar-background);
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
opacity: 0.5;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--hover-color);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar styles */
|
||||
.sidebar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary-color) var(--sidebar-background);
|
||||
}
|
||||
|
||||
/* Main Content Styles */
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Resource Cards */
|
||||
.resource-card {
|
||||
background: var(--card-background);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.resource-title {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.resource-title a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.resource-title a:hover {
|
||||
color: var(--hover-color);
|
||||
}
|
||||
|
||||
/* Dark theme adjustment */
|
||||
[data-theme="dark"] .resource-title a {
|
||||
color: #a48ec7; /* A lighter shade of purple for dark mode */
|
||||
}
|
||||
|
||||
[data-theme="dark"] .resource-title a:hover {
|
||||
color: #b9a8d7; /* Even lighter shade for hover in dark mode */
|
||||
}
|
||||
|
||||
.resource-link {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.resource-link a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.resource-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.resource-description {
|
||||
color: var(--text-color);
|
||||
margin: 12px 0;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95em;
|
||||
padding: 8px 12px;
|
||||
background: rgba(156, 82, 139, 0.05);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.resource-stars {
|
||||
color: var(--star-color);
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fa-star {
|
||||
color: var(--star-color);
|
||||
}
|
||||
|
||||
.fa-external-link-alt {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
transform: translateX(-100%);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-content h1 {
|
||||
font-size: 1.25rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-content {
|
||||
padding: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Update contributors grid styles */
|
||||
.contributors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 100px;
|
||||
justify-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.contributors-grid a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contributors-grid img {
|
||||
border-radius: 50%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
transition: transform 0.2s;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.contributors-grid a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contributors-grid a:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.contributors-grid .loading {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: var(--text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Update the resource card for contributors */
|
||||
.resource-card.contributors-card {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.resource-description a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.resource-description a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#resources-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Category label styles */
|
||||
.category-label {
|
||||
font-size: 0.8em;
|
||||
color: var(--primary-color);
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 8px;
|
||||
padding: 2px 8px;
|
||||
background-color: rgba(156, 82, 139, 0.1);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* No results styles */
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Active nav link style */
|
||||
.nav-links a.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background-color: #fff3f3;
|
||||
border-left: 4px solid #ff4444;
|
||||
color: #dc3545;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Add H3 styling for dark mode */
|
||||
[data-theme="dark"] h3,
|
||||
[data-theme="dark"] .markdown-content h3 {
|
||||
color: #f1c40f;
|
||||
}
|
||||
|
||||
#resources-container h2 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Main content scrollbar styles */
|
||||
.main-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.main-content::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.main-content::-webkit-scrollbar-thumb {
|
||||
background: var(--primary-color);
|
||||
opacity: 0.5;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.main-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--hover-color);
|
||||
}
|
||||
|
||||
/* Firefox main content scrollbar styles */
|
||||
.main-content {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--primary-color) var(--background-color);
|
||||
}
|
||||
|
||||
/* Dark theme scrollbar adjustments */
|
||||
[data-theme="dark"] .sidebar::-webkit-scrollbar-track,
|
||||
[data-theme="dark"] .main-content::-webkit-scrollbar-track {
|
||||
background: var(--sidebar-background);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
|
||||
[data-theme="dark"] .main-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(110, 84, 148, 0.6);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
|
||||
[data-theme="dark"] .main-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(110, 84, 148, 0.8);
|
||||
}
|
||||
|
||||
/* Screen reader only class */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Improve link accessibility */
|
||||
a:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Improve button accessibility */
|
||||
button:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Add focus styles for dark mode */
|
||||
[data-theme="dark"] a:focus,
|
||||
[data-theme="dark"] button:focus {
|
||||
outline-color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
.site-footer {
|
||||
background-color: var(--sidebar-background);
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Add top navigation styles */
|
||||
.top-nav {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-content h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Remove old view-controls styling if no longer needed */
|
||||
.content-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resource-favicon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.resource-title a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
height: 50px;
|
||||
width: 200px; /* Adjust this value to your preferred width */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover; /* This will maintain aspect ratio while fitting within the container */
|
||||
}
|
||||
|
||||
/* Adjust container size for mobile */
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
height: 40px;
|
||||
width: 160px; /* Proportionally smaller for mobile */
|
||||
}
|
||||
|
||||
.nav-content h1 {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar h2:first-of-type {
|
||||
margin-top: 80px; /* Increased spacing from top nav */
|
||||
font-weight: 400; /* Reduced from default bold/600 to normal/400 */
|
||||
}
|
||||
|
||||
/* Adjust for mobile if needed */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar h2:first-of-type {
|
||||
margin-top: 70px; /* Slightly less space on mobile */
|
||||
}
|
||||
}
|
||||
|
||||
/* Update menu toggle button styles */
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem; /* Reduced from 1.5rem */
|
||||
cursor: pointer;
|
||||
padding: 0.4rem 0.6rem; /* Adjusted padding */
|
||||
position: fixed;
|
||||
top: 15px; /* Align with top nav content */
|
||||
left: 15px;
|
||||
z-index: 1002;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-toggle:hover {
|
||||
background-color: var(--hover-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.menu-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Update mobile responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.menu-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Adjust top nav padding to accommodate menu toggle */
|
||||
.nav-content {
|
||||
padding-left: 3.5rem; /* Make room for menu toggle */
|
||||
}
|
||||
|
||||
/* Rest of your mobile styles... */
|
||||
}
|
||||
|
||||
/* Theme selector styles */
|
||||
.theme-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-select:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.theme-select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.theme-select option {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.theme-controls {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user