jan-leila/volpe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: added icons to page

Browse source
This commit is contained in:
Leyla Becker 2026-02-19 17:22:10 -06:00
parent 927f13b623
commit e06bdb38fe
6 changed files with 68 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

61
posts/drafts/remove-tracking-params-from-links.md
View file

@ -551,6 +551,21 @@ The most basic low tech way to remove the trackers is to just delete them yourse
margin-bottom: 0.75em;
}
/* Extension/App card icon styling */
.extension-icon,
.app-icon {
width: 2.5em;
height: 2.5em;
flex-shrink: 0;
}
.extension-icon img,
.app-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Extension card styling */
.extension-card {
display: flex;
@ -750,6 +765,7 @@ You can install browser extensions that automatically remove tracking parameters
<div class="protect-section">
<div class="browser-detected-firefox">
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
@ -758,6 +774,7 @@ You can install browser extensions that automatically remove tracking parameters
</div>
<div class="browser-detected-chrome">
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
@ -766,6 +783,7 @@ You can install browser extensions that automatically remove tracking parameters
</div>
<div class="browser-detected-edge">
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge<span class="extension-badge">Recommended for your browser</span></div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
@ -776,18 +794,21 @@ You can install browser extensions that automatically remove tracking parameters
<details class="expandable">
<summary>Show all browsers</summary>
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card browser-firefox" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card browser-chrome" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card browser-edge" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
@ -797,18 +818,21 @@ You can install browser extensions that automatically remove tracking parameters
</div>
<div class="browser-list-fallback">
<a href="https://addons.mozilla.org/en-US/firefox/addon/clearurls/" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'firefox-icon.svg' | fileHash('assets') }}" alt="Firefox"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Firefox</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://chromewebstore.google.com/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'chrome-icon.svg' | fileHash('assets') }}" alt="Chrome"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Chrome</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
</div>
</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/clearurls/mdkdmaickkfdekbjdoojfalpbkgaddei" class="extension-card" target="_blank" rel="noopener">
<div class="extension-icon"><img src="{{ 'edge-icon.svg' | fileHash('assets') }}" alt="Edge"></div>
<div class="extension-info">
<div class="extension-name">ClearURLs for Edge</div>
<p class="extension-desc">Removes tracking elements from URLs automatically</p>
@ -819,21 +843,6 @@ You can install browser extensions that automatically remove tracking parameters
[Source Code](https://github.com/ClearURLs/Addon)
### Use websites with tools to do it for you
You can also use web tools that you can give a URL and it will clean it for you:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
<div class="app-info">
<div class="app-name">LinkCleaner</div>
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
</div>
</a>
</div>
</div>
<!-- ### Desktop applications
Clipboard monitoring apps that automatically clean URLs when you copy them:
@ -859,6 +868,7 @@ There are some mobile apps that can also help remove trackers from links:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://f-droid.org/packages/com.svenjacobs.app.leon/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'android-icon.svg' | fileHash('assets') }}" alt="Android"></div>
<div class="app-info">
<div class="app-name">Leon</div>
<p class="app-desc">Android share target app that removes tracking parameters from URLs. Share any link to Leon before sharing elsewhere.</p>
@ -871,24 +881,43 @@ There are some mobile apps that can also help remove trackers from links:
</div>
</div>
### Use websites with tools to do it for you
You can also use web tools that you can give a URL and it will clean it for you:
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://linkcleaner.app/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">LinkCleaner</div>
<p class="app-desc">Paste any URL and get a clean version without tracking parameters. Works in your browser - no installation needed.</p>
</div>
</a>
</div>
</div>
### URL unshortening and redirect following tools
<div class="protect-section">
<div class="platform-list-fallback">
<a href="https://unshorten.it/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">Unshorten.It!</div>
</div>
</a>
<a href="https://wheregoes.com/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">WhereGoes</div>
</div>
</a>
<a href="https://www.expandurl.net/" class="app-card" target="_blank" rel="noopener">
<div class="app-icon"><img src="{{ 'link-icon.svg' | fileHash('assets') }}" alt="Web Tool"></div>
<div class="app-info">
<div class="app-name">ExpandURL</div>
</div>
</a>
</div>
</div>
</div>