Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-11-13 17:08:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate slug pages from tools

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-27 16:10:28 +05:00
parent 931ee27b05
commit 7a3498c173
35 changed files with 1436 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/routes/+layout.svelte
+4 -4
View File
@@ -4,9 +4,9 @@
import Footer from "$lib/components/layout/Footer.svelte";
import TopBar from "$lib/components/layout/TopBar.svelte";
import { initLocale } from "$lib/i18n/locale.svelte";
import { toolTitle } from "$lib/i18n/schema-tool-strings";
import { pageTitle } from "$lib/i18n/schema-tool-strings";
import { t } from "$lib/i18n/t";
import { getTool } from "$lib/registry";
import { getPageBySlug } from "$lib/registry";
import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
import type { Snippet } from "svelte";
import { onMount } from "svelte";
@@ -37,8 +37,8 @@
if (path === "/kit") return "/ " + t("header.uiKit");
const match = /^\/tools\/([^/]+)$/.exec(path);
if (match) {
const tool = getTool(match[1]);
if (tool) return "/ " + toolTitle(tool);
const page = getPageBySlug(match[1]);
if (page) return "/ " + pageTitle(page);
}
return "/ " + t("header.home");
}
web/src/routes/+page.svelte
+11 -11
View File
@@ -5,9 +5,9 @@
import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
import ToolCard from "$lib/components/ToolCard.svelte";
import {
searchTools,
toolDescription,
toolTitle,
pageDescription,
pageTitle,
searchPages,
} from "$lib/i18n/schema-tool-strings";
import { t } from "$lib/i18n/t";
import { TOOL_ICONS } from "$lib/tool-icons";
@@ -19,10 +19,10 @@
PREVIEW_GROUPS.map((g) => ({
id: g.id,
label: t(`categories.${g.id}`),
tools: searchTools(g.tools, query).filter(
pages: searchPages(g.pages, query).filter(
() => category === "all" || category === g.id,
),
})).filter((g) => g.tools.length > 0),
})).filter((g) => g.pages.length > 0),
);
</script>
@@ -31,14 +31,14 @@
<CatalogToolbar bind:query bind:category />
<div class="catalog-groups">
{#each groups as group (group.id)}
<CatalogGroup label={group.label} count={group.tools.length}>
{#each group.tools as tool, i (tool.id)}
<CatalogGroup label={group.label} count={group.pages.length}>
{#each group.pages as page, i (page.slug)}
<ToolCard
title={toolTitle(tool)}
id={tool.id}
description={toolDescription(tool)}
title={pageTitle(page)}
slug={page.slug}
description={pageDescription(page)}
index={i + 1}
icon={TOOL_ICONS[tool.id]}
icon={TOOL_ICONS[page.slug]}
/>
{/each}
</CatalogGroup>
web/src/routes/kit/+page.svelte
+8 -8
View File
@@ -23,7 +23,7 @@
import Toggle from "$lib/components/ui/Toggle.svelte";
import { Download, ImageOff, Plus, Trash2 } from "@lucide/svelte";
import { TOOLS } from "$lib/registry";
import { PAGES } from "$lib/registry";
import { TOOL_ICONS } from "$lib/tool-icons";
let mode = $state("preview");
@@ -34,8 +34,8 @@
let lossless = $state(true);
let animated = $state(false);
const showcaseTools = TOOLS.filter((tool) =>
["linear-gradient-png", "resize-png", "quantize-png"].includes(tool.id),
const showcasePages = PAGES.filter((page) =>
["linear-gradient-png", "resize-png", "quantize-png"].includes(page.slug),
);
</script>
@@ -140,13 +140,13 @@
<Panel title="Tools" eyebrow="catalog">
<div class="tool-grid">
{#each showcaseTools as tool, i (tool.id)}
{#each showcasePages as page, i (page.slug)}
<ToolCard
title={tool.title}
id={tool.id}
description={tool.description}
title={page.title}
slug={page.slug}
description={page.description}
index={i + 1}
icon={TOOL_ICONS[tool.id]}
icon={TOOL_ICONS[page.slug]}
/>
{/each}
</div>
web/src/routes/list-tools/+page.svelte
+11 -11
View File
@@ -5,9 +5,9 @@
import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
import ToolCard from "$lib/components/ToolCard.svelte";
import {
searchTools,
toolDescription,
toolTitle,
pageDescription,
pageTitle,
searchPages,
} from "$lib/i18n/schema-tool-strings";
import { t } from "$lib/i18n/t";
import { TOOL_ICONS } from "$lib/tool-icons";
@@ -19,10 +19,10 @@
PREVIEW_GROUPS.map((g) => ({
id: g.id,
label: t(`categories.${g.id}`),
tools: searchTools(g.tools, query).filter(
pages: searchPages(g.pages, query).filter(
() => category === "all" || category === g.id,
),
})).filter((g) => g.tools.length > 0),
})).filter((g) => g.pages.length > 0),
);
</script>
@@ -31,14 +31,14 @@
<CatalogToolbar bind:query bind:category />
<div class="catalog-groups">
{#each groups as group (group.id)}
<CatalogGroup label={group.label} count={group.tools.length}>
{#each group.tools as tool, i (tool.id)}
<CatalogGroup label={group.label} count={group.pages.length}>
{#each group.pages as page, i (page.slug)}
<ToolCard
title={toolTitle(tool)}
id={tool.id}
description={toolDescription(tool)}
title={pageTitle(page)}
slug={page.slug}
description={pageDescription(page)}
index={i + 1}
icon={TOOL_ICONS[tool.id]}
icon={TOOL_ICONS[page.slug]}
/>
{/each}
</CatalogGroup>
web/src/routes/tools/[id]/+page.svelte
+6 -5
View File
@@ -2,7 +2,7 @@
import EmptyState from "$lib/components/EmptyState.svelte";
import SchemaToolView from "$lib/components/SchemaToolView.svelte";
import { t } from "$lib/i18n/t";
import { getTool } from "$lib/registry";
import { getPageBySlug, getTool } from "$lib/registry";
import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
interface Props {
@@ -10,15 +10,16 @@
}
let { data }: Props = $props();
const tool = $derived(getTool(data.id));
const page = $derived(getPageBySlug(data.id));
const tool = $derived(page ? getTool(page.steps[0].id) : undefined);
</script>
<svelte:head>
<title>easy-png-tools / {tool?.title ?? t("toolPage.fallbackTitle")}</title>
<title>easy-png-tools / {page?.title ?? t("toolPage.fallbackTitle")}</title>
<meta name="robots" content="noindex, nofollow" />
</svelte:head>
{#if !tool}
{#if !page || !tool}
<div class="notfound">
<EmptyState
title={t("errors.notFound")}
@@ -27,7 +28,7 @@
/>
</div>
{:else}
<SchemaToolView {tool} />
<SchemaToolView {page} {tool} />
{/if}
<style>
web/src/routes/tools/[id]/+page.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import { TOOLS } from "$lib/registry";
import { PAGES } from "$lib/registry";
export const prerender = true;
export function entries() {
return TOOLS.map((tool) => ({ id: tool.id }));
return PAGES.map((page) => ({ id: page.slug }));
}
export function load({ params }: { params: { id: string } }) {