Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(icons): use npm module for sprite generation and add draft usage #186

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

refactor(icons): use npm module for sprite generation and add draft usage #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0f738be
refactor(icons): use npm module to handle sprite generation and add d…
escapedcat Feb 26, 2025
26c2ac7
fix(icons): missing/broken social icons - update npm package
escapedcat Feb 28, 2025
7558d49
refactor(icons): export apps icons, move back to static folder
escapedcat Feb 28, 2025
451e638
refactor(icons): export mobile-nav icons
escapedcat Feb 28, 2025
bd7f671
refactor(icons): export popup icons
escapedcat Feb 28, 2025
600d2bd
refactor(icons): switch popup icons
escapedcat Mar 2, 2025
c16638e
style: format
escapedcat Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
},
"devDependencies": {
"@resvg/resvg-js": "^2.6.2",
"@spiriit/vite-plugin-svg-spritemap": "^4.0.0",
"@sveltejs/adapter-netlify": "^4.4.0",
"@sveltejs/kit": "^2.15.2",
"@sveltejs/vite-plugin-svelte": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions src/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<SocialLink url={$socials.nostr} social="nostr" />
<SocialLink url={$socials.twitter} social="twitter" />
</div>

<div class="flex flex-wrap justify-center xl:block">
{#each links as link}
<a
Expand Down
3 changes: 1 addition & 2 deletions src/components/Icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
export let h: string;
export let style: undefined | string = undefined;
export let icon: string;
export let type: 'apps' | 'material' | 'mobile-nav' | 'popup' | 'socials';
</script>

<svg width="{w}px" height="{h}px" class={style}>
<use width="{w}px" height="{h}px" href="/icons/{type}/spritesheet.svg#{icon}" />
<use width="{w}px" height="{h}px" href="/__spritemap#sprite-{icon}" />
</svg>
2 changes: 1 addition & 1 deletion src/components/MerchantButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
>
<div>
<svg width="30px" height="30px" class="mx-auto">
<use width="30px" height="30px" href="/icons/popup/spritesheet.svg#{icon}" />
<use width="30px" height="30px" href="/__spritemap#sprite-#{icon}" />
</svg>
<span class="mt-1 block text-center text-xs font-semibold">{text}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MerchantLink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
>
<div>
<svg width="30px" height="30px" class="mx-auto">
<use width="30px" height="30px" href="/icons/popup/spritesheet.svg#{icon}" />
<use width="30px" height="30px" href="/__spritemap#sprite-#{icon}" />
</svg>
<span class="mt-1 block text-center text-xs font-semibold">{text}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SocialLink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
>
<Icon w="28" h="28" icon={social} type="socials" />
<Icon w="28" h="28" icon={social} />
</a>
2 changes: 1 addition & 1 deletion src/components/Socials.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
{#if nostr}
<a href="https://nostr.com/{nostr}" target="_blank" rel="noreferrer" class="m-1">
<span class="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-nostr">
<Icon w="28" h="28" icon="nostr" type="socials" style="text-white" />
<Icon w="28" h="28" icon="nostr" style="text-white" />
</span>
</a>
{/if}
Expand Down
30 changes: 5 additions & 25 deletions src/error.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3795,59 +3795,39 @@ <h2 class="text-xl font-semibold text-primary dark:text-white">
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
><svg width="28px" height="28px">
<use
width="28px"
height="28px"
href="/icons/socials/spritesheet.svg#twitter"
></use></svg
<use width="28px" height="28px" href="/__spritemap#sprite-twitter"></use></svg
></a>
<a
href="https://nostr.com/npub1864jglrrhv6alguwql9pqtmd5296nww5dpcewapmmcazk8vq4mks0tt2tq"
target="_blank"
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
><svg width="28px" height="28px">
<use
width="28px"
height="28px"
href="/icons/socials/spritesheet.svg#nostr"
></use></svg
<use width="28px" height="28px" href="/__spritemap#sprite-nostr"></use></svg
></a>
<a
href="https://discord.gg/wPqva83uzq"
target="_blank"
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
><svg width="28px" height="28px">
<use
width="28px"
height="28px"
href="/icons/socials/spritesheet.svg#discord"
></use></svg
<use width="28px" height="28px" href="/__spritemap#sprite-discord"></use></svg
></a>
<a
href="https://github.com/teambtcmap"
target="_blank"
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
><svg width="28px" height="28px">
<use
width="28px"
height="28px"
href="/icons/socials/spritesheet.svg#github"
></use></svg
<use width="28px" height="28px" href="/__spritemap#sprite-github"></use></svg
></a>
<a
href="https://amboss.space/community/edf8d227-9bc7-4cb2-af2a-66c1b455109a"
target="_blank"
rel="noreferrer"
class="inline-block rounded-full bg-link p-2 text-white transition-colors hover:bg-hover dark:bg-white/[0.15] dark:hover:bg-link"
><svg width="28px" height="28px">
<use
width="28px"
height="28px"
href="/icons/socials/spritesheet.svg#amboss"
></use></svg
<use width="28px" height="28px" href="/__spritemap#sprite-amboss"></use></svg
></a>
</footer>
</div>
Expand Down
38 changes: 19 additions & 19 deletions src/lib/map/setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,7 @@ export const generateMarker = (
element.tags && element.tags['opening_hours']
? `<div class='my-1 w-full max-w-[300px]' title='Opening hours'>
<svg width='16px' height='16px' class='inline text-primary dark:text-white'>
<use width='16px' height='16px' href="/icons/popup/spritesheet.svg#clock"></use>
<use width='16px' height='16px' href="/__spritemap#sprite-clock"></use>
</svg>
<span class='text-body dark:text-white'>${element.tags['opening_hours']}</span>
</div>`
Expand All @@ -645,7 +645,7 @@ export const generateMarker = (
<div class='flex space-x-2 mt-2.5 mb-1'>
<a id='navigate' href='geo:${lat},${long}' class='border border-mapBorder hover:border-link !text-primary dark:!text-white hover:!text-link dark:hover:!text-link rounded-lg py-1 w-full transition-colors'>
<svg width='24px' height='24px' class='mx-auto'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#compass"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-compass"></use>
</svg>
<span class='block text-xs text-center mt-1'>Navigate</span>
</a>
Expand All @@ -654,7 +654,7 @@ export const generateMarker = (
element.id
}' target="_blank" rel="noreferrer" class='border border-mapBorder hover:border-link !text-primary dark:!text-white hover:!text-link dark:hover:!text-link rounded-lg py-1 w-full transition-colors'>
<svg width='24px' height='24px' class='mx-auto'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#pencil"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-pencil"></use>
</svg>
<span class='block text-xs text-center mt-1'>Edit</span>
</a>
Expand All @@ -663,15 +663,15 @@ export const generateMarker = (
element.id
}' target="_blank" rel="noreferrer" class='border border-mapBorder hover:border-link !text-primary dark:!text-white hover:!text-link dark:hover:!text-link rounded-lg py-1 w-full transition-colors'>
<svg width='24px' height='24px' class='mx-auto'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#share"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-share"></use>
</svg>
<span class='block text-xs text-center mt-1'>Share</span>
</a>

<div class='relative w-full'>
<button id='more-button' class='border border-mapBorder hover:border-link !text-primary dark:!text-white hover:!text-link dark:hover:!text-link rounded-lg py-1 w-full transition-colors'>
<svg width='24px' height='24px' class='mx-auto'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#dots-horizontal"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-dots-horizontal"></use>
</svg>
<span class='block text-xs text-center mt-1'>More</span>
</button>
Expand All @@ -689,7 +689,7 @@ export const generateMarker = (
: '#'
}" target="_blank" rel="noreferrer" class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#bolt"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-bolt"></use>
</svg>
Pay Merchant
</a>`
Expand All @@ -700,7 +700,7 @@ export const generateMarker = (
phone
? `<a href='tel:${phone}' class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#phone"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-phone"></use>
</svg>
Call
</a>`
Expand All @@ -711,7 +711,7 @@ export const generateMarker = (
email
? `<a href='mailto:${email}' class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#email"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-email"></use>
</svg>
Email
</a>`
Expand All @@ -724,7 +724,7 @@ export const generateMarker = (
website.startsWith('http') ? website : `https://${website}`
} target="_blank" rel="noreferrer" class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#globe"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-globe"></use>
</svg>
Website
</a>`
Expand All @@ -737,7 +737,7 @@ export const generateMarker = (
twitter.startsWith('http') ? twitter : `https://twitter.com/${twitter}`
} target="_blank" rel="noreferrer" class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#twitter"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-twitter"></use>
</svg>
Twitter
</a>`
Expand All @@ -752,7 +752,7 @@ export const generateMarker = (
: `https://instagram.com/${instagram}`
} target="_blank" rel="noreferrer" class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#instagram"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-instagram"></use>
</svg>
Instagram
</a>`
Expand All @@ -765,7 +765,7 @@ export const generateMarker = (
facebook.startsWith('http') ? facebook : `https://facebook.com/${facebook}`
} target="_blank" rel="noreferrer" class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#facebook"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-facebook"></use>
</svg>
Facebook
</a>`
Expand All @@ -778,7 +778,7 @@ export const generateMarker = (
id='show-tags'
class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#tags"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-tags"></use>
</svg>
Show Tags
</button>
Expand All @@ -787,7 +787,7 @@ export const generateMarker = (
id='tagging-issues'
class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#issues"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-issues"></use>
</svg>
Tag Issues
</button>`
Expand All @@ -800,7 +800,7 @@ export const generateMarker = (
rel="noreferrer"
class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#info-circle"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-info-circle"></use>
</svg>
Map Legend
</a>
Expand All @@ -811,7 +811,7 @@ export const generateMarker = (
rel="noreferrer"
class='flex items-center !text-primary dark:!text-white hover:!text-link dark:hover:!text-link text-xs transition-colors'>
<svg width='24px' height='24px' class='mr-2'>
<use width='24px' height='24px' href="/icons/popup/spritesheet.svg#external"></use>
<use width='24px' height='24px' href="/__spritemap#sprite-external"></use>
</svg>
View OSM
</a>
Expand Down Expand Up @@ -907,10 +907,10 @@ ${
? `${verified[0]} ${
Date.parse(verified[0]) > verifiedDate
? `<span title="Verified within the last year"><svg width='16px' height='16px' class='inline text-primary dark:text-white'>
<use width='16px' height='16px' href="/icons/popup/spritesheet.svg#verified"></use>
<use width='16px' height='16px' href="/__spritemap#sprite-verified"></use>
</svg></span>`
: `<span title="Outdated please re-verify"><svg width='16px' height='16px' class='inline text-primary dark:text-white'>
<use width='16px' height='16px' href="/icons/popup/spritesheet.svg#outdated"></use>
<use width='16px' height='16px' href="/__spritemap#sprite-outdated"></use>
</svg></span>`
}`
: '<span title="Not verified">---</span>'
Expand Down Expand Up @@ -938,7 +938,7 @@ ${
extraButtons
? `<button title='Boost' id='boost-button' class='flex justify-center items-center space-x-2 text-primary dark:text-white hover:text-link dark:hover:text-link border border-mapBorder hover:border-link rounded-lg px-3 h-[32px] transition-colors'>
<svg width='16px' height='16px'>
<use width='16px' height='16px' href="/icons/popup/spritesheet.svg#boost"></use>
<use width='16px' height='16px' href="/__spritemap#sprite-boost"></use>
</svg>
<span class='text-xs'>${boosted ? 'Extend' : 'Boost'}</span>
</button>`
Expand Down
8 changes: 1 addition & 7 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,7 @@
rel={app.type === 'Web' ? null : 'noreferrer'}
class="block rounded-full bg-link p-3 text-white transition-colors hover:bg-hover"
>
<Icon
w="32"
h="32"
style={app.icon === 'play' ? 'pl-0.5' : ''}
icon={app.icon}
type="apps"
/>
<Icon w="32" h="32" style={app.icon === 'play' ? 'pl-0.5' : ''} icon={app.icon} />
</a>
</div>
{/each}
Expand Down
1 change: 0 additions & 1 deletion src/routes/community/[area]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
<Breadcrumbs {routes} />
<div class="mx-auto w-10/12 xl:w-[1200px]">
<AreaPage type="community" {data} />

<Footer />
</div>
</div>
2 changes: 1 addition & 1 deletion src/service-worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ sw.addEventListener('install', (event) => {
// Create a new cache and add offline file to it
async function addFileToCache() {
const cache = await caches.open(CACHE);
await cache.addAll(['/offline.html', '/images/logo.svg', '/icons/socials/spritesheet.svg']);
await cache.addAll(['/offline.html', '/images/logo.svg']);
}

event.waitUntil(addFileToCache());
Expand Down
4 changes: 4 additions & 0 deletions static/icons/apps/android.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions static/icons/apps/f-droid.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading