sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 11:32:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: consolidate routing logic into App.svelte; remove router.js file

Browse Source
This commit is contained in:
sHa
2025-05-17 01:55:21 +03:00
parent 6b4bada5f4
commit 7acb294fa7
2 changed files with 100 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/App.svelte
View File

@@ -1,9 +1,16 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
// Import Router component directly with explicit path import Router from "svelte-spa-router/Router.svelte";
import Router from 'svelte-spa-router/Router.svelte';
import { routes } from './router.js'; import Home from "./pages/Home.svelte";
import Preview from "./pages/Preview.svelte";
import NotFound from "./pages/NotFound.svelte";
export const routes = {
"/": Home,
"/preview/:logoName": Preview,
"*": NotFound,
};
let viewMode = "grid"; // 'grid' or 'list' let viewMode = "grid"; // 'grid' or 'list'
let searchQuery = ""; let searchQuery = "";
@@ -23,13 +30,14 @@
searchQuery = val; searchQuery = val;
console.log("App: searchQuery set to:", val); console.log("App: searchQuery set to:", val);
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.searchQuery = val; window.appData.searchQuery = val;
// Also update filtered/display logos immediately for reactive UI // Also update filtered/display logos immediately for reactive UI
window.appData.filteredLogos = window.appData.logos.filter((logo) => { window.appData.filteredLogos = window.appData.logos.filter((logo) => {
const matchesSearch = logo.name.toLowerCase().includes(val.toLowerCase()) const matchesSearch =
|| (logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase())); logo.name.toLowerCase().includes(val.toLowerCase()) ||
(logo.brand && logo.brand.toLowerCase().includes(val.toLowerCase()));
const matchesTags = const matchesTags =
!selectedTags.length || !selectedTags.length ||
(logo.tags && (logo.tags &&
@@ -39,13 +47,21 @@
return matchesSearch && matchesTags; return matchesSearch && matchesTags;
}); });
window.appData.displayLogos = (!val && compactMode) window.appData.displayLogos =
? window.appData.filteredLogos.filter((logo, idx, arr) => !val && compactMode
arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx) ? window.appData.filteredLogos.filter(
: window.appData.filteredLogos; (logo, idx, arr) =>
arr.findIndex(
(l) => (l.brand || l.name) === (logo.brand || logo.name),
) === idx,
)
: window.appData.filteredLogos;
console.log("App: Updated filtered/display logos directly:", console.log(
window.appData.filteredLogos.length, window.appData.displayLogos.length); "App: Updated filtered/display logos directly:",
window.appData.filteredLogos.length,
window.appData.displayLogos.length,
);
} }
} }
@@ -54,7 +70,7 @@
localStorage.setItem("compactMode", String(val)); localStorage.setItem("compactMode", String(val));
// Update window.appData immediately on compact mode change // Update window.appData immediately on compact mode change
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.compactMode = val; window.appData.compactMode = val;
console.log("App: Updated compactMode in window.appData to", val); console.log("App: Updated compactMode in window.appData to", val);
@@ -68,13 +84,13 @@
console.log("App: onMount start - before loading logos"); console.log("App: onMount start - before loading logos");
// Set initial empty app data // Set initial empty app data
if (typeof window !== 'undefined') { if (typeof window !== "undefined") {
window.appData = { window.appData = {
logos: [], logos: [],
filteredLogos: [], filteredLogos: [],
displayLogos: [], displayLogos: [],
theme, theme,
effectiveTheme: 'light', effectiveTheme: "light",
viewMode, viewMode,
searchQuery, searchQuery,
allTags: [], allTags: [],
@@ -93,7 +109,7 @@
closeDropdown, closeDropdown,
setCompactMode, setCompactMode,
onCopy: copyUrl, onCopy: copyUrl,
onDownload: downloadLogo onDownload: downloadLogo,
}; };
} }
@@ -121,7 +137,7 @@
); );
// Update app data immediately after logos are loaded // Update app data immediately after logos are loaded
if (typeof window !== 'undefined') { if (typeof window !== "undefined") {
window.appData = { window.appData = {
logos, logos,
filteredLogos, filteredLogos,
@@ -146,9 +162,13 @@
closeDropdown, closeDropdown,
setCompactMode, setCompactMode,
onCopy: copyUrl, onCopy: copyUrl,
onDownload: downloadLogo onDownload: downloadLogo,
}; };
console.log("App: Updated window.appData after loading with", logos.length, "logos"); console.log(
"App: Updated window.appData after loading with",
logos.length,
"logos",
);
} }
} else { } else {
console.error("Failed to load logos data", response.status); console.error("Failed to load logos data", response.status);
@@ -209,8 +229,10 @@
).sort((a, b) => a.text.localeCompare(b.text)); ).sort((a, b) => a.text.localeCompare(b.text));
$: filteredLogos = logos.filter((logo) => { $: filteredLogos = logos.filter((logo) => {
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesSearch =
|| (logo.brand && logo.brand.toLowerCase().includes(searchQuery.toLowerCase())); logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(logo.brand &&
logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
const matchesTags = const matchesTags =
!selectedTags.length || !selectedTags.length ||
(logo.tags && (logo.tags &&
@@ -220,10 +242,15 @@
return matchesSearch && matchesTags; return matchesSearch && matchesTags;
}); });
$: displayLogos = (!searchQuery && compactMode) $: displayLogos =
? filteredLogos.filter((logo, idx, arr) => !searchQuery && compactMode
arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx) ? filteredLogos.filter(
: filteredLogos; (logo, idx, arr) =>
arr.findIndex(
(l) => (l.brand || l.name) === (logo.brand || logo.name),
) === idx,
)
: filteredLogos;
// Compute the effective theme for children // Compute the effective theme for children
$: effectiveTheme = $: effectiveTheme =
@@ -234,7 +261,7 @@
: theme; : theme;
// Make app data available globally for components // Make app data available globally for components
$: if (typeof window !== 'undefined') { $: if (typeof window !== "undefined") {
window.appData = { window.appData = {
logos, logos,
filteredLogos, filteredLogos,
@@ -263,9 +290,15 @@
setCompactMode, setCompactMode,
onCopy: copyUrl, onCopy: copyUrl,
onDownload: downloadLogo, onDownload: downloadLogo,
openLogoByAnchor openLogoByAnchor,
}; };
console.log("App: Updated window.appData with", logos.length, "logos,", displayLogos.length, "display logos"); console.log(
"App: Updated window.appData with",
logos.length,
"logos,",
displayLogos.length,
"display logos",
);
} }
function setGridView() { function setGridView() {
@@ -274,7 +307,7 @@
localStorage.setItem("viewMode", "grid"); localStorage.setItem("viewMode", "grid");
// Update window.appData immediately on view change // Update window.appData immediately on view change
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.viewMode = "grid"; window.appData.viewMode = "grid";
console.log("App: Updated viewMode in window.appData to grid"); console.log("App: Updated viewMode in window.appData to grid");
} }
@@ -286,7 +319,7 @@
localStorage.setItem("viewMode", "list"); localStorage.setItem("viewMode", "list");
// Update window.appData immediately on view change // Update window.appData immediately on view change
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.viewMode = "list"; window.appData.viewMode = "list";
console.log("App: Updated viewMode in window.appData to list"); console.log("App: Updated viewMode in window.appData to list");
} }
@@ -374,19 +407,20 @@
} }
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.selectedTags = [...selectedTags]; window.appData.selectedTags = [...selectedTags];
// Update filtered logos immediately // Update filtered logos immediately
updateFilteredLogosImmediate(); updateFilteredLogosImmediate();
} }
} function addTag(tag) { }
function addTag(tag) {
console.log("App: Adding tag:", tag); console.log("App: Adding tag:", tag);
if (!selectedTags.includes(tag)) { if (!selectedTags.includes(tag)) {
selectedTags = [...selectedTags, tag]; selectedTags = [...selectedTags, tag];
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.selectedTags = [...selectedTags]; window.appData.selectedTags = [...selectedTags];
// Update filtered logos immediately // Update filtered logos immediately
@@ -397,7 +431,7 @@
tagDropdownOpen = false; tagDropdownOpen = false;
// Also update the dropdown state in window.appData // Also update the dropdown state in window.appData
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.tagDropdownOpen = false; window.appData.tagDropdownOpen = false;
console.log("App: Closed tag dropdown after adding tag"); console.log("App: Closed tag dropdown after adding tag");
} }
@@ -408,7 +442,7 @@
selectedTags = selectedTags.filter((t) => t !== tag); selectedTags = selectedTags.filter((t) => t !== tag);
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.selectedTags = [...selectedTags]; window.appData.selectedTags = [...selectedTags];
// Update filtered logos immediately // Update filtered logos immediately
@@ -418,10 +452,16 @@
// Helper function to immediately update filtered/display logos in window.appData // Helper function to immediately update filtered/display logos in window.appData
function updateFilteredLogosImmediate() { function updateFilteredLogosImmediate() {
if (typeof window !== 'undefined' && window.appData && window.appData.logos) { if (
typeof window !== "undefined" &&
window.appData &&
window.appData.logos
) {
window.appData.filteredLogos = window.appData.logos.filter((logo) => { window.appData.filteredLogos = window.appData.logos.filter((logo) => {
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase()) const matchesSearch =
|| (logo.brand && logo.brand.toLowerCase().includes(searchQuery.toLowerCase())); logo.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(logo.brand &&
logo.brand.toLowerCase().includes(searchQuery.toLowerCase()));
const matchesTags = const matchesTags =
!selectedTags.length || !selectedTags.length ||
(logo.tags && (logo.tags &&
@@ -431,13 +471,22 @@
return matchesSearch && matchesTags; return matchesSearch && matchesTags;
}); });
window.appData.displayLogos = (!searchQuery && compactMode) window.appData.displayLogos =
? window.appData.filteredLogos.filter((logo, idx, arr) => !searchQuery && compactMode
arr.findIndex(l => (l.brand || l.name) === (logo.brand || logo.name)) === idx) ? window.appData.filteredLogos.filter(
: window.appData.filteredLogos; (logo, idx, arr) =>
arr.findIndex(
(l) => (l.brand || l.name) === (logo.brand || logo.name),
) === idx,
)
: window.appData.filteredLogos;
console.log("App: Updated filtered logos:", window.appData.filteredLogos.length, console.log(
"display logos:", window.appData.displayLogos.length); "App: Updated filtered logos:",
window.appData.filteredLogos.length,
"display logos:",
window.appData.displayLogos.length,
);
} }
} }
@@ -446,9 +495,12 @@
console.log("App: Toggling tag dropdown, current state:", tagDropdownOpen); console.log("App: Toggling tag dropdown, current state:", tagDropdownOpen);
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.tagDropdownOpen = tagDropdownOpen; window.appData.tagDropdownOpen = tagDropdownOpen;
console.log("App: Updated tagDropdownOpen in window.appData to:", tagDropdownOpen); console.log(
"App: Updated tagDropdownOpen in window.appData to:",
tagDropdownOpen,
);
// Force immediate update // Force immediate update
setTimeout(() => { setTimeout(() => {
@@ -462,7 +514,7 @@
tagDropdownOpen = false; tagDropdownOpen = false;
// Update window.appData immediately // Update window.appData immediately
if (typeof window !== 'undefined' && window.appData) { if (typeof window !== "undefined" && window.appData) {
window.appData.tagDropdownOpen = false; window.appData.tagDropdownOpen = false;
console.log("App: Closed dropdown, updated in window.appData"); console.log("App: Closed dropdown, updated in window.appData");
} }
@@ -486,7 +538,7 @@
); );
if (found) { if (found) {
const previewUrl = `#/preview/${encodeURIComponent(found.name.replace(/\s+/g, '-').toLowerCase())}`; const previewUrl = `#/preview/${encodeURIComponent(found.name.replace(/\s+/g, "-").toLowerCase())}`;
console.log("App: Navigating to router URL:", previewUrl); console.log("App: Navigating to router URL:", previewUrl);
window.location.href = previewUrl; window.location.href = previewUrl;
} }

11
src/router.js
View File

@@ -1,11 +0,0 @@
// Import pages for routing
import Home from './pages/Home.svelte';
import Preview from './pages/Preview.svelte';
import NotFound from './pages/NotFound.svelte';
// Define routes
export const routes = {
'/': Home,
'/preview/:logoName': Preview,
'*': NotFound
};