sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-02-04 11:03:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor PWA caching and image generation scripts

Browse Source 
- Updated `generate-pwa-cache-list.js` to include images directory and remove duplicate file entries.
- Refactored `generate-svg-variants.js` to utilize collections from a centralized source and renamed generation directory variable.
- Modified `update-data.js` to align with new directory structure for images and variants, ensuring proper paths are used.
- Adjusted `collections.js` to standardize directory naming for variants.
- Enhanced Svelte components (`Actions.svelte`, `CardFull.svelte`, `CardMiddle.svelte`, `CardSmall.svelte`, `CardTiny.svelte`) to utilize context for collection management, simplifying image URL generation.
This commit is contained in:
sHa
2025-06-18 13:18:15 +03:00
parent d7feb6db19
commit 4a32deaeb5
12 changed files with 108 additions and 1622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Actions.svelte
View File

@@ -1,6 +1,7 @@
<script>
import { copySvgSource } from '../utils/svgSource.js';
import Notification from './Notification.svelte';
import { getContext } from 'svelte';
import { collections } from '../collections.js';
export let logo;
@@ -92,46 +93,40 @@
window.removeEventListener('click', handleClick);
}
function getCollectionByPath(path) {
return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
}
function getBaseDir(logo) {
const collection = getCollectionByPath(logo.path);
return collection ? collection.baseDir : 'images/logos';
}
function getGenDir(logo) {
const collection = getCollectionByPath(logo.path);
return collection ? collection.genDir : 'images/logos_variants';
let collection = getContext('collection');
if (!collection) {
if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
collection = collections.find(c => c.name === window.appData.collection) || collections[0];
} else {
collection = collections[0];
}
}
function getImageUrl(logo) {
const baseDir = getBaseDir(logo);
return `/${baseDir}/${logo.path.split('/').pop()}`;
return `/${collection.baseDir}/${logo.path}`;
}
function getSvgPath(logo) {
const genDir = getGenDir(logo);
if (logo._activeSet) {
return `/${genDir}/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
return `/${collection.varDir}/${getBaseName(logo.path)}__${logo._activeSet}.svg`;
}
return logo.path;
return `/${collection.baseDir}/${logo.path}`;
}
function getPngUrl(logo) {
const genDir = getGenDir(logo);
return `/${genDir}/${logo.path.split('/').pop().replace(/\.svg$/, '.png')}`;
return `/${collection.varDir}/${logo.path.replace(/\.svg$/, '.png')}`;
}
function getJpgUrl(logo) {
return `/${collection.varDir}/${logo.path.replace(/\.svg$/, '.jpg')}`;
}
function getPngLink(logo) {
const genDir = getGenDir(logo);
return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.png`;
return `${window.location.origin}/${collection.varDir}/${logo.path.replace(/\.svg$/, '.png')}`;
}
function getJpgLink(logo) {
const genDir = getGenDir(logo);
return `${window.location.origin}/${genDir}/${getBaseName(logo.path)}.jpg`;
return `${window.location.origin}/${collection.varDir}/${logo.path.replace(/\.svg$/, '.jpg')}`;
}
async function handleCopyPngUrlClick(e) {
@@ -187,8 +182,8 @@
// Download PNG using the same logic as JPG
async function handleDownloadPngClick(e) {
e.stopPropagation();
const genDir = getGenDir(logo);
const pngUrl = `/${genDir}/${getBaseName(logo.path)}.png`;
const varDir = getVarDir(logo);
const pngUrl = `/${varDir}/${getBaseName(logo.path)}.png`;
try {
const res = await fetch(pngUrl, { method: 'HEAD' });
if (res.ok) {
@@ -220,8 +215,8 @@
}
async function downloadJpg(logo) {
const genDir = getGenDir(logo);
const jpgUrl = `/${genDir}/${getBaseName(logo.path)}.jpg`;
const varDir = getVarDir(logo);
const jpgUrl = `/${varDir}/${getBaseName(logo.path)}.jpg`;
try {
const res = await fetch(jpgUrl, { method: 'HEAD' });
if (res.ok) {

21
src/components/CardFull.svelte
View File

@@ -1,5 +1,5 @@
<script>
import { onMount } from "svelte";
import { onMount, getContext } from "svelte";
import InlineSvg from "./InlineSvg.svelte";
import Actions from "./Actions.svelte";
import ColorSwitcher from "./ColorSwitcher.svelte";
@@ -129,18 +129,19 @@
return str.charAt(0).toUpperCase() + str.slice(1);
}
function getCollectionByPath(path) {
return collections.find(col => path.startsWith(col.baseDir.replace('images/', '')) || path.startsWith(col.baseDir));
}
function getBaseDir(logo) {
const collection = getCollectionByPath(logo.path);
return collection ? collection.baseDir : 'images/logos';
// Use the current collection context for baseDir
let collection = getContext('collection');
if (!collection) {
// fallback: try to infer from window.appData
if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
collection = collections.find(c => c.name === window.appData.collection) || collections[0];
} else {
collection = collections[0];
}
}
function getImageUrl(logo) {
const baseDir = getBaseDir(logo);
return `/${baseDir}/${logo.path.split('/').pop()}`;
return `/${collection.baseDir}/${logo.path}`;
}
</script>

14
src/components/CardMiddle.svelte
View File

@@ -4,6 +4,7 @@
import ColorSwitcher from "./ColorSwitcher.svelte";
import { getDefaultLogoColor } from "../utils/colorTheme.js";
import { collections } from '../collections.js';
import { getContext } from 'svelte';
export let logo;
export let theme;
@@ -31,9 +32,16 @@
return collection ? collection.baseDir : 'images/logos';
}
let collection = getContext('collection');
if (!collection) {
if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
collection = collections.find(c => c.name === window.appData.collection) || collections[0];
} else {
collection = collections[0];
}
}
function getImageUrl(logo) {
const baseDir = getBaseDir(logo);
return `/${baseDir}/${logo.path.split('/').pop()}`;
return `/${collection.baseDir}/${logo.path}`;
}
$: getLogoThemeColor = (logo) => getDefaultLogoColor(logo.colors, theme);
@@ -69,7 +77,7 @@
/>
{/key}
{:else}
<img src={getImageUrl(logo)} alt={logo.title || logo.name}/>
<img src={getImageUrl(logo)} alt={logo.title || logo.name} />
{/if}
</div>
<div class="logo-info">

12
src/components/CardSmall.svelte
View File

@@ -4,6 +4,7 @@
import ColorSwitcher from "./ColorSwitcher.svelte";
import { getDefaultLogoColor } from "../utils/colorTheme.js";
import { collections } from '../collections.js';
import { getContext } from 'svelte';
export let logo;
export let theme;
@@ -34,9 +35,16 @@
return collection ? collection.baseDir : 'images/logos';
}
let collection = getContext('collection');
if (!collection) {
if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
collection = collections.find(c => c.name === window.appData.collection) || collections[0];
} else {
collection = collections[0];
}
}
function getImageUrl(logo) {
const baseDir = getBaseDir(logo);
return `/${baseDir}/${logo.path.split('/').pop()}`;
return `/${collection.baseDir}/${logo.path}`;
}
</script>

12
src/components/CardTiny.svelte
View File

@@ -3,6 +3,7 @@
import { getDefaultLogoColor } from "../utils/colorTheme.js";
import ColorSwitcher from './ColorSwitcher.svelte';
import { collections } from '../collections.js';
import { getContext } from 'svelte';
export let logo;
export let theme;
@@ -40,9 +41,16 @@
return collection ? collection.baseDir : 'images/logos';
}
let collection = getContext('collection');
if (!collection) {
if (typeof window !== 'undefined' && window.appData && window.appData.collection) {
collection = collections.find(c => c.name === window.appData.collection) || collections[0];
} else {
collection = collections[0];
}
}
function getImageUrl(logo) {
const baseDir = getBaseDir(logo);
return `/${baseDir}/${logo.path.split('/').pop()}`;
return `/${collection.baseDir}/${logo.path}`;
}
</script>