commit 1837486e1fdda8a85fab5cd51358c6c55874a7a3 · dunkirk.sh/unduckified

+16

public/gear.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings">

     

       2
       2
       +
           <style>

     

       3
       3
       +
               @media (prefers-color-scheme: light) {

     

       4
       4
       +
                   .lucide-settings {

     

       5
       5
       +
                       stroke: #1a1a1a;

     

       6
       6
       +
                   }

     

       7
       7
       +
               }

     

       8
       8
       +
               @media (prefers-color-scheme: dark) {

     

       9
       9
       +
                   .lucide-settings {

     

       10
       10
       +
                       stroke: #e0e0e0;

     

       11
       11
       +
                   }

     

       12
       12
       +
               }

     

       13
       13
       +
           </style>

     

       14
       14
       +
           <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>

     

       15
       15
       +
           <circle cx="12" cy="12" r="3"/>

     

       16
       16
       +
       </svg>

+135 -2

public/global.css

···

       56
       56
        
       	margin: 0;

     

       57
       57
        
       	padding: 0;

     

       58
       58
        
       	box-sizing: border-box;

     

       59
       59
       +
       	outline: none;

     

       60
       60
       +
       }

     

       61
       61
       +
       

     

       62
       62
       +
       *:focus {

     

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

     

       59
       64
        
       }

     

       60
       65
        
       

     

       61
       66
        
       html,

     
···

       80
       85
        
       h6 {

     

       81
       86
        
       	font-weight: 600;

     

       82
       87
        
       	line-height: 1.2;

     

       83
       83
       -
       	padding: 0.75rem;

     

       88
       88
       +
       	padding-bottom: 0.75rem;

     

       84
       89
        
       }

     

       85
       90
        
       

     

       86
       91
        
       a {

     
···

       118
       123
        
       }

     

       119
       124
        
       

     

       120
       125
        
       /* Update url-input width to be 100% since container will control max width */

     

       121
       121
       -
       .url-input {

     

       126
       126
       +
       input {

     

       122
       127
        
       	padding: 8px 12px;

     

       123
       128
        
       	border: 1px solid var(--border-color);

     

       124
       129
        
       	border-radius: 4px;

     
···

       174
       179
        
       .footer a:hover {

     

       175
       180
        
       	color: var(--text-color-hover);

     

       176
       181
        
       }

     

       182
       182
       +
       

     

       183
       183
       +
       /* Add styles for the settings button */

     

       184
       184
       +
       .settings-button {

     

       185
       185
       +
       	padding: 8px;

     

       186
       186
       +
       	color: var(--text-color-secondary);

     

       187
       187
       +
       	border-radius: 4px;

     

       188
       188
       +
       	transition: all 0.2s;

     

       189
       189
       +
       	display: flex;

     

       190
       190
       +
       	align-items: center;

     

       191
       191
       +
       	justify-content: center;

     

       192
       192
       +
       }

     

       193
       193
       +
       

     

       194
       194
       +
       .settings-button:hover {

     

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

     

       196
       196
       +
       }

     

       197
       197
       +
       

     

       198
       198
       +
       .settings-button:hover {

     

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

     

       200
       200
       +
       }

     

       201
       201
       +
       

     

       202
       202
       +
       .settings-button:hover img {

     

       203
       203
       +
       	transform: rotate(180deg);

     

       204
       204
       +
       	transition: transform 0.6s ease;

     

       205
       205
       +
       }

     

       206
       206
       +
       

     

       207
       207
       +
       .settings-button:active {

     

       208
       208
       +
       	transform: scale(0.95);

     

       209
       209
       +
       }

     

       210
       210
       +
       

     

       211
       211
       +
       .settings {

     

       212
       212
       +
       	transition: transform 0.6s ease;

     

       213
       213
       +
       }

     

       214
       214
       +
       

     

       215
       215
       +
       .settings-button:not(:hover) .settings {

     

       216
       216
       +
       	transform: rotate(0deg);

     

       217
       217
       +
       }

     

       218
       218
       +
       

     

       219
       219
       +
       .modal {

     

       220
       220
       +
       	display: none;

     

       221
       221
       +
       	position: fixed;

     

       222
       222
       +
       	top: 0;

     

       223
       223
       +
       	left: 0;

     

       224
       224
       +
       	width: 100%;

     

       225
       225
       +
       	height: 100%;

     

       226
       226
       +
       	background-color: rgba(0, 0, 0, 0.5);

     

       227
       227
       +
       	z-index: 1000;

     

       228
       228
       +
       }

     

       229
       229
       +
       

     

       230
       230
       +
       .modal-content {

     

       231
       231
       +
       	position: relative;

     

       232
       232
       +
       	background-color: var(--bg-color);

     

       233
       233
       +
       	border: 1px solid var(--border-color);

     

       234
       234
       +
       	margin: 15% auto;

     

       235
       235
       +
       	padding: 20px;

     

       236
       236
       +
       	border-radius: 8px;

     

       237
       237
       +
       	width: 80%;

     

       238
       238
       +
       	max-width: 500px;

     

       239
       239
       +
       }

     

       240
       240
       +
       

     

       241
       241
       +
       .close-modal {

     

       242
       242
       +
       	position: absolute;

     

       243
       243
       +
       	right: 10px;

     

       244
       244
       +
       	top: 10px;

     

       245
       245
       +
       	cursor: pointer;

     

       246
       246
       +
       	font-size: 24px;

     

       247
       247
       +
       	color: var(--text-color-secondary);

     

       248
       248
       +
       	padding-left: 8px;

     

       249
       249
       +
       	padding-right: 8px;

     

       250
       250
       +
       }

     

       251
       251
       +
       

     

       252
       252
       +
       .bang-select {

     

       253
       253
       +
       	width: 100%;

     

       254
       254
       +
       	padding: 8px;

     

       255
       255
       +
       	margin-top: 10px;

     

       256
       256
       +
       	border-radius: 4px;

     

       257
       257
       +
       }

     

       258
       258
       +
       

     

       259
       259
       +
       .bang-select-container {

     

       260
       260
       +
       	position: relative;

     

       261
       261
       +
       	display: inline-block;

     

       262
       262
       +
       	width: 100%;

     

       263
       263
       +
       }

     

       264
       264
       +
       

     

       265
       265
       +
       .bang-select-container::after {

     

       266
       266
       +
       	content: "↵";

     

       267
       267
       +
       	position: absolute;

     

       268
       268
       +
       	right: 10px;

     

       269
       269
       +
       	top: 33%;

     

       270
       270
       +
       	color: var(--text-color-secondary);

     

       271
       271
       +
       	pointer-events: none;

     

       272
       272
       +
       	font-size: 1.2em;

     

       273
       273
       +
       }

     

       274
       274
       +
       

     

       275
       275
       +
       /* Update the bang-select class to account for the icon */

     

       276
       276
       +
       .bang-select {

     

       277
       277
       +
       	padding-right: 30px; /* Make room for the icon */

     

       278
       278
       +
       }

     

       279
       279
       +
       

     

       280
       280
       +
       @keyframes shake {

     

       281
       281
       +
       	0%,

     

       282
       282
       +
       	100% {

     

       283
       283
       +
       		transform: translateX(0);

     

       284
       284
       +
       	}

     

       285
       285
       +
       	25% {

     

       286
       286
       +
       		transform: translateX(-5px);

     

       287
       287
       +
       	}

     

       288
       288
       +
       	75% {

     

       289
       289
       +
       		transform: translateX(5px);

     

       290
       290
       +
       	}

     

       291
       291
       +
       }

     

       292
       292
       +
       

     

       293
       293
       +
       @keyframes flash-red {

     

       294
       294
       +
       	0%,

     

       295
       295
       +
       	100% {

     

       296
       296
       +
       		background-color: transparent;

     

       297
       297
       +
       	}

     

       298
       298
       +
       	50% {

     

       299
       299
       +
       		background-color: rgba(255, 0, 0, 0.2);

     

       300
       300
       +
       	}

     

       301
       301
       +
       }

     

       302
       302
       +
       

     

       303
       303
       +
       .shake {

     

       304
       304
       +
       	animation: shake 0.2s ease-in-out;

     

       305
       305
       +
       }

     

       306
       306
       +
       

     

       307
       307
       +
       .flash-red {

     

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

     

       309
       309
       +
       }

public/heavier-tick-sprite.mp3

This is a binary file and will not be displayed.

+131 -32

src/main.ts

···

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

     

       2
       2
        
       

     

       3
       3
       +
       function getFocusableElements(

     

       4
       4
       +
       	root: HTMLElement = document.body,

     

       5
       5
       +
       ): HTMLElement[] {

     

       6
       6
       +
       	return Array.from(

     

       7
       7
       +
       		root.querySelectorAll<HTMLElement>(

     

       8
       8
       +
       			'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])',

     

       9
       9
       +
       		),

     

       10
       10
       +
       	);

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       function setOutsideElementsTabindex(modal: HTMLElement, tabindex: number) {

     

       14
       14
       +
       	const modalElements = getFocusableElements(modal);

     

       15
       15
       +
       	const allElements = getFocusableElements();

     

       16
       16
       +
       

     

       17
       17
       +
       	for (const element of allElements) {

     

       18
       18
       +
       		if (!modalElements.includes(element)) {

     

       19
       19
       +
       			element.setAttribute("tabindex", tabindex.toString());

     

       20
       20
       +
       		}

     

       21
       21
       +
       	}

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       3
       24
        
       function noSearchDefaultPageRender() {

     

       4
       25
        
       	const app = document.querySelector<HTMLDivElement>("#app");

     

       5
       26
        
       	if (!app) throw new Error("App element not found");

     

       6
       27
        
       	app.innerHTML = `

     

       7
       7
       -
           <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">

     

       8
       8
       -
             <div class="content-container">

     

       9
       9
       -
               <h1>┐( ˘_˘ )┌</h1>

     

       10
       10
       -
               <p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>

     

       11
       11
       -
               <div class="url-container">

     

       12
       12
       -
                 <input

     

       13
       13
       -
                   type="text"

     

       14
       14
       -
                   class="url-input"

     

       15
       15
       -
                   value="https://unduck.link?q=%s"

     

       16
       16
       -
                   readonly

     

       17
       17
       -
                 />

     

       18
       18
       -
                 <button class="copy-button">

     

       19
       19
       -
                   <img src="/clipboard.svg" alt="Copy" />

     

       20
       20
       -
                 </button>

     

       28
       28
       +
       		<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">

     

       29
       29
       +
       				<header style="position: absolute; top: 1rem; right: 1rem;">

     

       30
       30
       +
       						<button class="settings-button">

     

       31
       31
       +
       								<img src="/gear.svg" alt="Settings" class="settings" />

     

       32
       32
       +
       						</button>

     

       33
       33
       +
       				</header>

     

       34
       34
       +
       				<div class="content-container">

     

       35
       35
       +
       						<h1>┐( ˘_˘ )┌</h1>

     

       36
       36
       +
       						<p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>

     

       37
       37
       +
       						<div class="url-container">

     

       38
       38
       +
       								<input

     

       39
       39
       +
       										type="text"

     

       40
       40
       +
       										class="url-input"

     

       41
       41
       +
       										value="https://unduck.link?q=%s"

     

       42
       42
       +
       										readonly

     

       43
       43
       +
       								/>

     

       44
       44
       +
       								<button class="copy-button">

     

       45
       45
       +
       										<img src="/clipboard.svg" alt="Copy" />

     

       46
       46
       +
       								</button>

     

       47
       47
       +
       						</div>

     

       48
       48
       +
       				</div>

     

       49
       49
       +
       				<footer class="footer">

     

       50
       50
       +
       						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

     

       51
       51
       +
       				</footer>

     

       52
       52
       +
       				<div class="modal" id="settings-modal">

     

       53
       53
       +
                 <div class="modal-content">

     

       54
       54
       +
                   <button class="close-modal">&times;</button>

     

       55
       55
       +
                   <h2>Settings</h2>

     

       56
       56
       +
                   <div>

     

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

     

       58
       58
       +
                     <div class="bang-select-container">

     

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

     

       60
       60
       +
                     </div>

     

       61
       61
       +
                   </div>

     

       62
       62
       +
                 </div>

     

       21
       63
        
               </div>

     

       22
       64
        
             </div>

     

       23
       23
       -
             <footer class="footer">

     

       24
       24
       -
               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

     

       25
       25
       -
             </footer>

     

       26
       26
       -
           </div>

     

       27
       27
       -
         `;

     

       65
       65
       +
       		</div>

     

       66
       66
       +
       	`;

     

       28
       67
        
       

     

       29
       68
        
       	const copyButton = app.querySelector<HTMLButtonElement>(".copy-button");

     

       30
       69
        
       	if (!copyButton) throw new Error("Copy button not found");

     
···

       32
       71
        
       	if (!copyIcon) throw new Error("Copy icon not found");

     

       33
       72
        
       	const urlInput = app.querySelector<HTMLInputElement>(".url-input");

     

       34
       73
        
       	if (!urlInput) throw new Error("URL input not found");

     

       74
       74
       +
       	const settingsButton =

     

       75
       75
       +
       		app.querySelector<HTMLButtonElement>(".settings-button");

     

       76
       76
       +
       	if (!settingsButton) throw new Error("Settings button not found");

     

       77
       77
       +
       	const modal = app.querySelector<HTMLDivElement>("#settings-modal");

     

       78
       78
       +
       	if (!modal) throw new Error("Modal not found");

     

       79
       79
       +
       	const closeModal = app.querySelector<HTMLSpanElement>(".close-modal");

     

       80
       80
       +
       	if (!closeModal) throw new Error("Close modal not found");

     

       81
       81
       +
       	const defaultBangSelect =

     

       82
       82
       +
       		app.querySelector<HTMLSelectElement>("#default-bang");

     

       83
       83
       +
       	if (!defaultBangSelect) throw new Error("Default bang select not found");

     

       84
       84
       +
       	const description =

     

       85
       85
       +
       		app.querySelector<HTMLParagraphElement>("#bang-description");

     

       86
       86
       +
       	if (!description) throw new Error("Bang description not found");

     

       35
       87
        
       

     

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

     

       37
       89
        
       

     
···

       43
       95
        
       			copyIcon.src = "/clipboard.svg";

     

       44
       96
        
       		}, 2000);

     

       45
       97
        
       	});

     

       98
       98
       +
       

     

       99
       99
       +
       	const prefersReducedMotion = window.matchMedia(

     

       100
       100
       +
       		"(prefers-reduced-motion: reduce)",

     

       101
       101
       +
       	).matches;

     

       102
       102
       +
       	if (!prefersReducedMotion) {

     

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

     

       104
       104
       +
       

     

       105
       105
       +
       		settingsButton.addEventListener("mouseenter", () => {

     

       106
       106
       +
       			audio.play();

     

       107
       107
       +
       		});

     

       108
       108
       +
       

     

       109
       109
       +
       		settingsButton.addEventListener("mouseleave", () => {

     

       110
       110
       +
       			audio.pause();

     

       111
       111
       +
       			audio.currentTime = 0;

     

       112
       112
       +
       		});

     

       113
       113
       +
       	}

     

       114
       114
       +
       

     

       115
       115
       +
       	settingsButton.addEventListener("click", () => {

     

       116
       116
       +
       		modal.style.display = "block";

     

       117
       117
       +
       		setOutsideElementsTabindex(modal, -1);

     

       118
       118
       +
       	});

     

       119
       119
       +
       

     

       120
       120
       +
       	closeModal.addEventListener("click", () => {

     

       121
       121
       +
       		modal.style.display = "none";

     

       122
       122
       +
       		setOutsideElementsTabindex(modal, 0);

     

       123
       123
       +
       	});

     

       124
       124
       +
       

     

       125
       125
       +
       	window.addEventListener("click", (event) => {

     

       126
       126
       +
       		if (event.target === modal) {

     

       127
       127
       +
       			modal.style.display = "none";

     

       128
       128
       +
       			setOutsideElementsTabindex(modal, 0);

     

       129
       129
       +
       		}

     

       130
       130
       +
       	});

     

       131
       131
       +
       

     

       132
       132
       +
       	// Save default bang

     

       133
       133
       +
       	defaultBangSelect.addEventListener("change", (event) => {

     

       134
       134
       +
       		const newDefaultBang = (event.target as HTMLSelectElement).value;

     

       135
       135
       +
       		const bang = bangs.find((b) => b.t === newDefaultBang);

     

       136
       136
       +
       

     

       137
       137
       +
       		if (!bang) {

     

       138
       138
       +
       			// Invalid bang entered

     

       139
       139
       +
       			defaultBangSelect.value = LS_DEFAULT_BANG; // Reset to previous value

     

       140
       140
       +
       			defaultBangSelect.classList.add("shake", "flash-red");

     

       141
       141
       +
       

     

       142
       142
       +
       			// Remove animation classes after animation completes

     

       143
       143
       +
       			setTimeout(() => {

     

       144
       144
       +
       				defaultBangSelect.classList.remove("shake", "flash-red");

     

       145
       145
       +
       			}, 300);

     

       146
       146
       +
       

     

       147
       147
       +
       			return;

     

       148
       148
       +
       		}

     

       149
       149
       +
       

     

       150
       150
       +
       		localStorage.setItem("default-bang", newDefaultBang);

     

       151
       151
       +
       		description.innerText = bang.s;

     

       152
       152
       +
       	});

     

       46
       153
        
       }

     

       47
       154
        
       

     

       48
       155
        
       const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "ddg";

     
···

       57
       164
        
       	}

     

       58
       165
        
       

     

       59
       166
        
       	const match = query.match(/!(\S+)/i);

     

       60
       60
       -
       

     

       61
       61
       -
       	const bangCandidate = match?.[1]?.toLowerCase();

     

       62
       62
       -
       	const selectedBang = bangs.find((b) => b.t === bangCandidate) ?? defaultBang;

     

       63
       63
       -
       

     

       64
       64
       -
       	// Remove the first bang from the query

     

       65
       65
       -
       	const cleanQuery = query.replace(/!\S+\s*/i, "").trim();

     

       167
       167
       +
       	const selectedBang = match

     

       168
       168
       +
       		? bangs.find((b) => b.t === match[1].toLowerCase())

     

       169
       169
       +
       		: defaultBang;

     

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

     

       66
       171
        
       

     

       67
       67
       -
       	// Format of the url is:

     

       68
       68
       -
       	// https://www.google.com/search?q={{{s}}}

     

       69
       69
       -
       	const searchUrl = selectedBang?.u.replace(

     

       172
       172
       +
       	return selectedBang?.u.replace(

     

       70
       173
        
       		"{{{s}}}",

     

       71
       71
       -
       		// Replace %2F with / to fix formats like "!ghr+t3dotgg/unduck"

     

       72
       174
        
       		encodeURIComponent(cleanQuery).replace(/%2F/g, "/"),

     

       73
       175
        
       	);

     

       74
       74
       -
       	if (!searchUrl) return null;

     

       75
       75
       -
       

     

       76
       76
       -
       	return searchUrl;

     

       77
       176
        
       }

     

       78
       177
        
       

     

       79
       178
        
       function doRedirect() {