commit 3560afd5392644fff084ad7a51abd6a1a4a63e78 · dunkirk.sh/unduckified

.github/images/dark-history.webp

This is a binary file and will not be displayed.

.github/images/light-history.webp

This is a binary file and will not be displayed.

+3 -1

README.md

···

       26
       26
        
       - [x] Settings (for things like disabling search history and changing default bang)

     

       27
       27
        
       - [x] Search counter

     

       28
       28
        
       - [x] [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/XML/Guides/OpenSearch) support

     

       29
       29
       +
       - [x] Search History (clearable, all local, and disabled by default ofc)

     

       29
       30
        
       - [ ] ~Search suggestions~ (as far as I can tell this essentially impossible to do natively with either firefox or chrome; please correct me if I'm wrong though. In this case I would very much love to be wrong)

     

       30
       30
       -
       - [ ] Search History (clearable ofc and all local)

     

       31
       31
        
       

     

       32
       32
        
       and then some more really ambitious stuff like:

     

       33
       33
        
       

     
···

       45
       45
        
       ### Light Mode

     

       46
       46
        
       

     

       47
       47
        
       ![Light Mode](.github/images/light.webp)

     

       48
       48
       +
       ![Light Mode with Search History](.github/images/light-history.webp)

     

       48
       49
        
       

     

       49
       50
        
       ### Dark Mode 💪

     

       50
       51
        
       

     

       51
       52
        
       ![Dark Mode](.github/images/dark.webp)

     

       53
       53
       +
       ![Dark Mode with Search History](.github/images/dark-history.webp)

     

       52
       54
        
       

     

       53
       55
        
       </details>

     

       54
       56

public/click-button.mp3

This is a binary file and will not be displayed.

public/double-button.mp3

This is a binary file and will not be displayed.

public/toggle-button-off.mp3

This is a binary file and will not be displayed.

public/toggle-button-on.mp3

This is a binary file and will not be displayed.

+68 -2

src/global.css

···

       36
       36
        
       	--bg-color-secondary: #f5f5f5;

     

       37
       37
        
       	--bg-color-hover: #f0f0f0;

     

       38
       38
        
       	--bg-color-active: #e5e5e5;

     

       39
       39
       +
       	--bg-color-danger: #e9808a;

     

       39
       40
        
       	--border-color: #ddd;

     

       40
       41
        
       }

     

       41
       42
        
       

     
···

       48
       49
        
       		--bg-color-secondary: #1e1e1e;

     

       49
       50
        
       		--bg-color-hover: #2a2a2a;

     

       50
       51
        
       		--bg-color-active: #333;

     

       52
       52
       +
       		--bg-color-danger: #f15f6d;

     

       51
       53
        
       		--border-color: #444;

     

       52
       54
        
       	}

     

       53
       55
        
       }

     
···

       58
       60
        
       	box-sizing: border-box;

     

       59
       61
        
       	outline: none;

     

       60
       62
        
       }

     

       61
       61
       -
       

     

       62
       63
        
       *:focus {

     

       63
       63
       -
       	border: 2px solid var(--text-color-secondary);

     

       64
       64
       +
       	outline: 2px solid var(--text-color-secondary);

     

       64
       65
        
       }

     

       65
       66
        
       

     

       66
       67
        
       html,

     
···

       307
       308
        
       .flash-red {

     

       308
       309
        
       	animation: flash-red 0.3s ease-in-out;

     

       309
       310
        
       }

     

       311
       311
       +
       /* Settings section spacing */

     

       312
       312
       +
       .settings-section {

     

       313
       313
       +
       	margin-bottom: 1rem;

     

       314
       314
       +
       }

     

       315
       315
       +
       

     

       316
       316
       +
       /* Toggle switch styles */

     

       317
       317
       +
       .switch {

     

       318
       318
       +
       	display: flex;

     

       319
       319
       +
       	align-items: center;

     

       320
       320
       +
       	gap: 8px;

     

       321
       321
       +
       	margin: 8px 0;

     

       322
       322
       +
       }

     

       323
       323
       +
       

     

       324
       324
       +
       .switch input {

     

       325
       325
       +
       	width: 40px;

     

       326
       326
       +
       	height: 20px;

     

       327
       327
       +
       	appearance: none;

     

       328
       328
       +
       	background-color: var(--bg-color-secondary);

     

       329
       329
       +
       	border-radius: 20px;

     

       330
       330
       +
       	position: relative;

     

       331
       331
       +
       	cursor: pointer;

     

       332
       332
       +
       	transition: background-color 0.3s;

     

       333
       333
       +
       }

     

       334
       334
       +
       

     

       335
       335
       +
       .switch input:checked {

     

       336
       336
       +
       	background-color: var(--text-color);

     

       337
       337
       +
       }

     

       338
       338
       +
       

     

       339
       339
       +
       .switch input:before {

     

       340
       340
       +
       	content: "";

     

       341
       341
       +
       	width: 16px;

     

       342
       342
       +
       	height: 16px;

     

       343
       343
       +
       	background-color: var(--text-color);

     

       344
       344
       +
       	position: absolute;

     

       345
       345
       +
       	border-radius: 50%;

     

       346
       346
       +
       	top: 2px;

     

       347
       347
       +
       	left: 2px;

     

       348
       348
       +
       	transition:

     

       349
       349
       +
       		left 0.3s,

     

       350
       350
       +
       		background-color 0.3s;

     

       351
       351
       +
       }

     

       352
       352
       +
       

     

       353
       353
       +
       .switch input:checked:before {

     

       354
       354
       +
       	background-color: var(--bg-color-secondary);

     

       355
       355
       +
       	left: 22px;

     

       356
       356
       +
       }

     

       357
       357
       +
       

     

       358
       358
       +
       /* Clear history button */

     

       359
       359
       +
       .clear-history {

     

       360
       360
       +
       	margin-top: 8px;

     

       361
       361
       +
       	padding: 8px 16px;

     

       362
       362
       +
       	background-color: var(--bg-color-danger);

     

       363
       363
       +
       	color: var(--text-color);

     

       364
       364
       +
       	border-radius: 4px;

     

       365
       365
       +
       	transition: all 0.2s;

     

       366
       366
       +
       }

     

       367
       367
       +
       

     

       368
       368
       +
       .clear-history:hover {

     

       369
       369
       +
       	background-color: var(--bg-color-hover);

     

       370
       370
       +
       }

     

       371
       371
       +
       

     

       372
       372
       +
       .clear-history:active {

     

       373
       373
       +
       	background-color: var(--bg-color-active);

     

       374
       374
       +
       	transform: scale(0.98);

     

       375
       375
       +
       }

+142 -5

src/main.ts

···

       1
       1
        
       import { bangs } from "./bang";

     

       2
       2
        
       import "./global.css";

     

       3
       3
        
       

     

       4
       4
       +
       function addToSearchHistory(

     

       5
       5
       +
       	query: string,

     

       6
       6
       +
       	bang: { bang: string; name: string; url: string },

     

       7
       7
       +
       ) {

     

       8
       8
       +
       	const history = getSearchHistory();

     

       9
       9
       +
       	history.unshift({

     

       10
       10
       +
       		query,

     

       11
       11
       +
       		bang: bang.bang,

     

       12
       12
       +
       		name: bang.name,

     

       13
       13
       +
       		timestamp: Date.now(),

     

       14
       14
       +
       	});

     

       15
       15
       +
       	// Keep only last 500 searches

     

       16
       16
       +
       	history.splice(500);

     

       17
       17
       +
       	localStorage.setItem("search-history", JSON.stringify(history));

     

       18
       18
       +
       }

     

       19
       19
       +
       

     

       20
       20
       +
       function getSearchHistory(): Array<{

     

       21
       21
       +
       	query: string;

     

       22
       22
       +
       	bang: string;

     

       23
       23
       +
       	name: string;

     

       24
       24
       +
       	timestamp: number;

     

       25
       25
       +
       }> {

     

       26
       26
       +
       	try {

     

       27
       27
       +
       		return JSON.parse(localStorage.getItem("search-history") || "[]");

     

       28
       28
       +
       	} catch {

     

       29
       29
       +
       		return [];

     

       30
       30
       +
       	}

     

       31
       31
       +
       }

     

       32
       32
       +
       

     

       33
       33
       +
       function clearSearchHistory() {

     

       34
       34
       +
       	localStorage.setItem("search-history", "[]");

     

       35
       35
       +
       }

     

       36
       36
       +
       

     

       4
       37
        
       function getFocusableElements(

     

       5
       38
        
       	root: HTMLElement = document.body,

     

       6
       39
        
       ): HTMLElement[] {

     
···

       24
       57
        
       

     

       25
       58
        
       function noSearchDefaultPageRender() {

     

       26
       59
        
       	const searchCount = localStorage.getItem("search-count") || "0";

     

       60
       60
       +
       	const historyEnabled = localStorage.getItem("history-enabled") === "true";

     

       61
       61
       +
       	const searchHistory = getSearchHistory();

     

       27
       62
        
       	const app = document.querySelector<HTMLDivElement>("#app");

     

       28
       63
        
       	if (!app) throw new Error("App element not found");

     

       29
       64
        
       	app.innerHTML = `

     
···

       50
       85
        
       										<img src="/clipboard.svg" alt="Copy" />

     

       51
       86
        
       								</button>

     

       52
       87
        
       						</div>

     

       88
       88
       +
       						${

     

       89
       89
       +
       							historyEnabled

     

       90
       90
       +
       								? `

     

       91
       91
       +
       									<h2 style="margin-top: 24px;">Recent Searches</h2>

     

       92
       92
       +
       									<div style="max-height: 200px; overflow-y: auto; text-align: left;">

     

       93
       93
       +
       									${

     

       94
       94
       +
       										searchHistory.length === 0

     

       95
       95
       +
       											? `<div style="padding: 8px; text-align: center;">No search history</div>`

     

       96
       96
       +
       											: searchHistory

     

       97
       97
       +
       													.map(

     

       98
       98
       +
       														(search) => `

     

       99
       99
       +
       															<div style="padding: 8px; border-bottom: 1px solid var(--border-color);">

     

       100
       100
       +
       																	<a href="?q=!${search.bang} ${search.query}">${search.name}: ${search.query}</a>

     

       101
       101
       +
       																	<span style="float: right; color: var(--text-color-secondary);">

     

       102
       102
       +
       																			${new Date(search.timestamp).toLocaleString()}

     

       103
       103
       +
       																	</span>

     

       104
       104
       +
       															</div>

     

       105
       105
       +
       													`,

     

       106
       106
       +
       													)

     

       107
       107
       +
       													.join("")

     

       108
       108
       +
       									}

     

       109
       109
       +
       									</div>

     

       110
       110
       +
       								`

     

       111
       111
       +
       								: ""

     

       112
       112
       +
       						}

     

       53
       113
        
       				</div>

     

       54
       114
        
       				<footer class="footer">

     

       55
       115
        
       						made with ♥ by <a href="https://github.com/taciturnaxolotl" target="_blank">Kieran Klukas</a> as <a href="https://github.com/taciturnaxolotl/unduck" target="_blank">open source</a> software

     
···

       58
       118
        
                 <div class="modal-content">

     

       59
       119
        
                   <button class="close-modal">&times;</button>

     

       60
       120
        
                   <h2>Settings</h2>

     

       61
       61
       -
                   <div>

     

       121
       121
       +
                   <div class="settings-section">

     

       62
       122
        
                     <label for="default-bang" id="bang-description">${bangs.find((b) => b.t === LS_DEFAULT_BANG)?.s || "Unknown bang"}</label>

     

       63
       123
        
                     <div class="bang-select-container">

     

       64
       124
        
                       <input type="text" id="default-bang" class="bang-select" value="${LS_DEFAULT_BANG}">

     

       65
       125
        
                     </div>

     

       66
       126
        
                   </div>

     

       127
       127
       +
                   <div class="settings-section">

     

       128
       128
       +
                     <h3>Search History (${searchHistory.length}/500)</h3>

     

       129
       129
       +
                     <div style="display: flex; justify-content: space-between; align-items: center;">

     

       130
       130
       +
                       <label class="switch">

     

       131
       131
       +
                         <label for="history-toggle">Enable Search History</label>

     

       132
       132
       +
                         <input type="checkbox" id="history-toggle" ${historyEnabled ? "checked" : ""}>

     

       133
       133
       +
                         <span class="slider round"></span>

     

       134
       134
       +
                       </label>

     

       135
       135
       +
                       <button class="clear-history">Clear History</button>

     

       136
       136
       +
                     </div>

     

       137
       137
       +
                   </div>

     

       67
       138
        
                 </div>

     

       68
       139
        
               </div>

     

       69
       140
        
             </div>

     
···

       89
       160
        
       	const description =

     

       90
       161
        
       		app.querySelector<HTMLParagraphElement>("#bang-description");

     

       91
       162
        
       	if (!description) throw new Error("Bang description not found");

     

       163
       163
       +
       	const historyToggle = app.querySelector<HTMLInputElement>("#history-toggle");

     

       164
       164
       +
       	if (!historyToggle) throw new Error("History toggle not found");

     

       165
       165
       +
       	const clearHistory = app.querySelector<HTMLButtonElement>(".clear-history");

     

       166
       166
       +
       	if (!clearHistory) throw new Error("Clear history button not found");

     

       92
       167
        
       

     

       93
       168
        
       	urlInput.value = `${window.location.protocol}//${window.location.host}?q=%s`;

     

       94
       169
        
       

     
···

       105
       180
        
       		"(prefers-reduced-motion: reduce)",

     

       106
       181
        
       	).matches;

     

       107
       182
        
       	if (!prefersReducedMotion) {

     

       108
       108
       -
       		const audio = new Audio("/heavier-tick-sprite.mp3");

     

       183
       183
       +
       		const spinAudio = new Audio("/heavier-tick-sprite.mp3");

     

       184
       184
       +
       		const toggleOffAudio = new Audio("/toggle-button-off.mp3");

     

       185
       185
       +
       		const toggleOnAudio = new Audio("/toggle-button-on.mp3");

     

       186
       186
       +
       		const clickAudio = new Audio("/click-button.mp3");

     

       187
       187
       +
       		const warningAudio = new Audio("/double-button.mp3");

     

       109
       188
        
       

     

       110
       189
        
       		settingsButton.addEventListener("mouseenter", () => {

     

       111
       111
       -
       			audio.play();

     

       190
       190
       +
       			spinAudio.play();

     

       112
       191
        
       		});

     

       113
       192
        
       

     

       114
       193
        
       		settingsButton.addEventListener("mouseleave", () => {

     

       115
       115
       -
       			audio.pause();

     

       116
       116
       -
       			audio.currentTime = 0;

     

       194
       194
       +
       			spinAudio.pause();

     

       195
       195
       +
       			spinAudio.currentTime = 0;

     

       196
       196
       +
       		});

     

       197
       197
       +
       

     

       198
       198
       +
       		historyToggle.addEventListener("change", () => {

     

       199
       199
       +
       			if (historyToggle.checked) {

     

       200
       200
       +
       				toggleOffAudio.pause();

     

       201
       201
       +
       				toggleOffAudio.currentTime = 0;

     

       202
       202
       +
       				toggleOnAudio.currentTime = 0;

     

       203
       203
       +
       				toggleOnAudio.play();

     

       204
       204
       +
       			} else {

     

       205
       205
       +
       				toggleOnAudio.pause();

     

       206
       206
       +
       				toggleOnAudio.currentTime = 0;

     

       207
       207
       +
       				toggleOffAudio.currentTime = 0;

     

       208
       208
       +
       				toggleOffAudio.play();

     

       209
       209
       +
       			}

     

       210
       210
       +
       		});

     

       211
       211
       +
       

     

       212
       212
       +
       		clearHistory.addEventListener("click", () => {

     

       213
       213
       +
       			warningAudio.play();

     

       214
       214
       +
       		});

     

       215
       215
       +
       

     

       216
       216
       +
       		defaultBangSelect.addEventListener("bangError", () => {

     

       217
       217
       +
       			warningAudio.currentTime = 0;

     

       218
       218
       +
       			warningAudio.play();

     

       219
       219
       +
       		});

     

       220
       220
       +
       

     

       221
       221
       +
       		defaultBangSelect.addEventListener("bangSuccess", () => {

     

       222
       222
       +
       			clickAudio.currentTime = 0;

     

       223
       223
       +
       			clickAudio.play();

     

       117
       224
        
       		});

     

       118
       225
        
       	}

     

       119
       226
        
       

     
···

       144
       251
        
       			defaultBangSelect.value = LS_DEFAULT_BANG; // Reset to previous value

     

       145
       252
        
       			defaultBangSelect.classList.add("shake", "flash-red");

     

       146
       253
        
       

     

       254
       254
       +
       			// Dispatch error event

     

       255
       255
       +
       			defaultBangSelect.dispatchEvent(new CustomEvent("bangError"));

     

       256
       256
       +
       

     

       147
       257
        
       			// Remove animation classes after animation completes

     

       148
       258
        
       			setTimeout(() => {

     

       149
       259
        
       				defaultBangSelect.classList.remove("shake", "flash-red");

     
···

       152
       262
        
       			return;

     

       153
       263
        
       		}

     

       154
       264
        
       

     

       265
       265
       +
       		defaultBangSelect.dispatchEvent(new CustomEvent("bangSuccess"));

     

       266
       266
       +
       

     

       155
       267
        
       		localStorage.setItem("default-bang", newDefaultBang);

     

       156
       268
        
       		description.innerText = bang.s;

     

       157
       269
        
       	});

     

       270
       270
       +
       

     

       271
       271
       +
       	// Enable/disable search history

     

       272
       272
       +
       	historyToggle.addEventListener("change", (event) => {

     

       273
       273
       +
       		localStorage.setItem(

     

       274
       274
       +
       			"history-enabled",

     

       275
       275
       +
       			(event.target as HTMLInputElement).checked.toString(),

     

       276
       276
       +
       		);

     

       277
       277
       +
       	});

     

       278
       278
       +
       	clearHistory.addEventListener("click", () => {

     

       279
       279
       +
       		clearSearchHistory();

     

       280
       280
       +
       		if (!prefersReducedMotion)

     

       281
       281
       +
       			setTimeout(() => {

     

       282
       282
       +
       				window.location.reload();

     

       283
       283
       +
       			}, 375);

     

       284
       284
       +
       		else window.location.reload();

     

       285
       285
       +
       	});

     

       158
       286
        
       }

     

       159
       287
        
       

     

       160
       288
        
       const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "ddg";

     
···

       179
       307
        
       		? bangs.find((b) => b.t === match[1].toLowerCase())

     

       180
       308
        
       		: defaultBang;

     

       181
       309
        
       	const cleanQuery = match ? query.replace(/!\S+\s*/i, "").trim() : query;

     

       310
       310
       +
       

     

       311
       311
       +
       	// Add search to history

     

       312
       312
       +
       	if (localStorage.getItem("history-enabled") === "true") {

     

       313
       313
       +
       		addToSearchHistory(cleanQuery, {

     

       314
       314
       +
       			bang: selectedBang?.t || "",

     

       315
       315
       +
       			name: selectedBang?.s || "",

     

       316
       316
       +
       			url: selectedBang?.u || "",

     

       317
       317
       +
       		});

     

       318
       318
       +
       	}

     

       182
       319
        
       

     

       183
       320
        
       	return selectedBang?.u.replace(

     

       184
       321
        
       		"{{{s}}}",