Skip to content

Commit

Permalink
Update icons.astro
Browse files Browse the repository at this point in the history
  • Loading branch information
@sudo-adduser-jordan
sudo-adduser-jordan committed Feb 6, 2025
1 parent fcadce8 commit 6d6a876
Showing 1 changed file with 56 additions and 18 deletions.
74 changes: 56 additions & 18 deletions src/pages/database/icons.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ import { Icon } from 'astro-icon/components';

<div class="container mx-auto px-4 mt-8">
<div id="filters" class="flex mb-8 space-x-4 overflow-x-auto md:overflow-x-hidden w-full md:justify-center">
<button onclick="location.href='/themesstore'" id="allFilter" class="bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors active:shadow-lg">All</button>
<button onclick="location.href='/themesstore'" id="allFilter" class="bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors opacity-50">All</button>
<button onclick="location.href='/database/themes'" id="themesFilter" class="bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors opacity-50">Themes</button>
<button onclick="location.href='/database/icons'" id="iconsFilter" class="bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors opacity-50">Icons</button>
<button onclick="location.href='/database/configs'" id="configsFilter" class="bg-yellow-300 dark:bg-yellow-600 text-yellow-900 dark:text-yellow-100 px-4 py-2 rounded-lg hover:bg-yellow-400 dark:hover:bg-yellow-500 transition-colors opacity-50">Configs</button>
<button onclick="location.href='/database/icons'" id="iconsFilter" class="bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors active:shadow-lg">Icons</button>
<button onclick="location.href='/database/configs'" id="configsFilter" class="bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors opacity-50">Configs</button>
</div>

<div id="storeResults" class="grid grid-cols-1 md:grid-cols-3 gap-6">
Expand Down Expand Up @@ -66,7 +66,7 @@ class ThemesStore {

this.initSearch();
this.initFilters();
this.fetchInstallers();
this.fetchIcons();
}

initSearch(): void {
Expand Down Expand Up @@ -110,30 +110,62 @@ class ThemesStore {
}
}

fetchInstallers(): void {
fetch(`https://raw.githubusercontent.com/linux-themes/.themes/refs/heads/main/index.yml`)
fetchIcons(): void {
fetch(`https://raw.githubusercontent.com/linux-themes/database/refs/heads/main/icons/index.yml`)
.then((response) => response.text())
.then((data) => {
const themes: { [key: string]: Theme } = jsyaml.load(data) as { [key: string]: Theme };

const themes: { [key: string]: {[key: string]: Theme} } = jsyaml.load(data) as { [key: string]: {[key: string]: Theme} }
if (typeof themes === 'object' && this.storeResults) {
for (const item in themes) {
const theme = themes[item];
const icon = `https://github.com/linux-themes/.themes/blob/main/data/${item}/${theme.Icon}?raw=true`;
const cardHTML = this.generateCardHTML(item, theme, icon);
for (const item in themes["Themes"]) {
const theme = themes["Themes"][item];
// const icon = `https://github.com/linux-themes/themes/blob/main/data/${item}/${theme.Icon}?raw=true`;
// const cardHTML = this.generateCardHTML(item, theme, icon);
const cardHTML = this.generateCardHTML(item, theme, "/assets/logo.svg");
this.storeResults.innerHTML += cardHTML;
}
}
})
.catch((err) => console.error('Failed to fetch Installers database index!', err));
}

getsColor(category: string): string {
switch (category.toLowerCase()) {
case 'essentials':
return 'bg-green-300 text-green-900 dark:bg-green-600 dark:text-green-100';
case 'fonts':
return 'bg-yellow-300 text-yellow-900 dark:bg-yellow-600 dark:text-yellow-100';
case 'runtimes':
return 'bg-black text-white dark:bg-black dark:text-white';
case 'winebridge':
return 'bg-blue-300 text-blue-900 dark:bg-blue-600 dark:text-blue-100';
case 'runners':
return 'bg-orange-300 text-orange-900 dark:bg-orange-600 dark:text-orange-100';
case 'vkd3d':
return 'bg-green-300 text-green-900 dark:bg-green-600 dark:text-green-100';
case 'dxvk':
return 'bg-purple-300 text-purple-900 dark:bg-purple-600 dark:text-purple-100';
case 'nvapi':
return 'bg-emerald-300 text-emerald-900 dark:bg-emerald-600 dark:text-emerald-100';
case 'latencyflex':
return 'bg-sky-300 text-sky-900 dark:bg-sky-600 dark:text-sky-100';
default:
return 'bg-gray-300 text-gray-900 dark:bg-gray-600 dark:text-gray-200';
}
}




getGradeColor(grade: string): string {
switch (grade.toLowerCase()) {
case 'custom':
return 'bg-green-300 text-green-900 dark:bg-green-600 dark:text-green-100';
// return 'bg-gray-300 text-gray-900';
case 'theme':
return 'bg-gray-300 text-gray-900';
case 'icon':
return 'bg-yellow-300 text-yellow-900';
return 'bg-blue-300 text-blue-900 dark:bg-blue-600 dark:text-blue-100';
// return 'bg-yellow-300 text-yellow-900';
case 'config':
return 'bg-gray-200 text-gray-800';
default:
Expand All @@ -145,8 +177,9 @@ class ThemesStore {
switch (category.toLowerCase()) {
case 'theme':
return 'bg-blue-200 text-blue-800';
case 'icon':
return 'bg-purple-200 text-purple-800';
case 'icons':
return 'bg-blue-300 text-blue-900 dark:bg-blue-600 dark:text-blue-100';
// return 'bg-purple-200 text-purple-800';
case 'config':
return 'bg-purple-200 text-purple-800';
default:
Expand All @@ -155,12 +188,17 @@ class ThemesStore {
}

generateCardHTML(item: string, theme: Theme, icon: string): string {
theme.Grade = 'custom'
theme.Category = 'icons'
return `
<div grade="${theme.Grade.toLowerCase()}" category="${theme.Category.toLowerCase()}" class="card bg-white rounded-lg shadow-md justify-between flex flex-col relative top-0 transition-all hover:shadow-lg hover:-top-1 dark:bg-gray-800 dark:text-gray-200">
<div class="p-4">
<div class="flex gap-4">
<img src="${icon}" alt="${item}" class="w-8 h-8 self-center">
<h3 class="text-2xl font-bold mb-2">${theme.Name}</h3>
<div class="flex gap-4 justify-between">
<div>
<img src="${icon}" alt="${item}" class="w-8 h-8 self-center">
<h3 class="text-2xl font-bold mb-2">${theme.Name}</h3>
</div>
<h3 class="text-2xl font-bold mb-2">${item}</h3>
</div>
<p class="text-gray-600 mb-4 text-xl dark:text-gray-300">${theme.Description}</p>
<div class="tags flex space-x-2 mb-4">
Expand Down

0 comments on commit 6d6a876

Please sign in to comment.