A fast, local-first "redirection engine" for !bang users with a few extra features ^-^
chore: run prettier
+137
-138
+3
-3
.prettierrc
+3
-3
.prettierrc
+1
-2
LICENSE.md
+1
-2
LICENSE.md
+36
-36
index.html
+36
-36
index.html
···
1
1
<!doctype html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8" />
5
-
<link rel="icon" type="image/svg+xml" href="/search.svg" />
6
-
<link
7
-
rel="preconnect"
8
-
href="https://fonts.googleapis.com"
9
-
crossorigin="anonymous"
10
-
/>
11
-
<link
12
-
rel="preconnect"
13
-
href="https://fonts.gstatic.com"
14
-
crossorigin="anonymous"
15
-
/>
16
-
<link
17
-
rel="preload"
18
-
as="style"
19
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
20
-
/>
21
-
<link
22
-
rel="stylesheet"
23
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
24
-
media="print"
25
-
onload="this.media='all'"
26
-
/>
27
-
<link rel="stylesheet" href="/global.css" />
28
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
29
-
<title>Unduck</title>
30
-
<meta
31
-
name="description"
32
-
content="A better default search engine (with bangs!)"
33
-
/>
34
-
</head>
35
-
<body>
36
-
<div id="app"></div>
37
-
<script type="module" src="/src/main.ts"></script>
38
-
</body>
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<link rel="icon" type="image/svg+xml" href="/search.svg" />
6
+
<link
7
+
rel="preconnect"
8
+
href="https://fonts.googleapis.com"
9
+
crossorigin="anonymous"
10
+
/>
11
+
<link
12
+
rel="preconnect"
13
+
href="https://fonts.gstatic.com"
14
+
crossorigin="anonymous"
15
+
/>
16
+
<link
17
+
rel="preload"
18
+
as="style"
19
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
20
+
/>
21
+
<link
22
+
rel="stylesheet"
23
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
24
+
media="print"
25
+
onload="this.media='all'"
26
+
/>
27
+
<link rel="stylesheet" href="/global.css" />
28
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
29
+
<title>Unduck</title>
30
+
<meta
31
+
name="description"
32
+
content="A better default search engine (with bangs!)"
33
+
/>
34
+
</head>
35
+
<body>
36
+
<div id="app"></div>
37
+
<script type="module" src="/src/main.ts"></script>
38
+
</body>
39
39
</html>
+97
-97
public/global.css
+97
-97
public/global.css
···
2
2
3
3
/* Font fallback that closely matches Inter metrics */
4
4
@font-face {
5
-
font-family: "Inter Fallback";
6
-
size-adjust: 107%;
7
-
ascent-override: 90%;
8
-
src: local("Arial");
5
+
font-family: "Inter Fallback";
6
+
size-adjust: 107%;
7
+
ascent-override: 90%;
8
+
src: local("Arial");
9
9
}
10
10
11
11
:root {
12
-
font-family:
13
-
Inter,
14
-
"Inter Fallback",
15
-
system-ui,
16
-
-apple-system,
17
-
BlinkMacSystemFont,
18
-
"Segoe UI",
19
-
Roboto,
20
-
Oxygen,
21
-
Ubuntu,
22
-
Cantarell,
23
-
"Open Sans",
24
-
"Helvetica Neue",
25
-
sans-serif;
26
-
font-synthesis: none;
27
-
text-rendering: optimizeLegibility;
28
-
-webkit-font-smoothing: antialiased;
29
-
-moz-osx-font-smoothing: grayscale;
12
+
font-family:
13
+
Inter,
14
+
"Inter Fallback",
15
+
system-ui,
16
+
-apple-system,
17
+
BlinkMacSystemFont,
18
+
"Segoe UI",
19
+
Roboto,
20
+
Oxygen,
21
+
Ubuntu,
22
+
Cantarell,
23
+
"Open Sans",
24
+
"Helvetica Neue",
25
+
sans-serif;
26
+
font-synthesis: none;
27
+
text-rendering: optimizeLegibility;
28
+
-webkit-font-smoothing: antialiased;
29
+
-moz-osx-font-smoothing: grayscale;
30
30
31
-
/* Light mode colors */
32
-
--text-color: #1a1a1a;
33
-
--text-color-secondary: #666;
34
-
--text-color-hover: #333;
35
-
--bg-color: #fff;
36
-
--bg-color-secondary: #f5f5f5;
37
-
--bg-color-hover: #f0f0f0;
38
-
--bg-color-active: #e5e5e5;
39
-
--border-color: #ddd;
31
+
/* Light mode colors */
32
+
--text-color: #1a1a1a;
33
+
--text-color-secondary: #666;
34
+
--text-color-hover: #333;
35
+
--bg-color: #fff;
36
+
--bg-color-secondary: #f5f5f5;
37
+
--bg-color-hover: #f0f0f0;
38
+
--bg-color-active: #e5e5e5;
39
+
--border-color: #ddd;
40
40
}
41
41
42
42
@media (prefers-color-scheme: dark) {
43
-
:root {
44
-
--text-color: #e0e0e0;
45
-
--text-color-secondary: #999;
46
-
--text-color-hover: #fff;
47
-
--bg-color: #121212;
48
-
--bg-color-secondary: #1e1e1e;
49
-
--bg-color-hover: #2a2a2a;
50
-
--bg-color-active: #333;
51
-
--border-color: #444;
52
-
}
43
+
:root {
44
+
--text-color: #e0e0e0;
45
+
--text-color-secondary: #999;
46
+
--text-color-hover: #fff;
47
+
--bg-color: #121212;
48
+
--bg-color-secondary: #1e1e1e;
49
+
--bg-color-hover: #2a2a2a;
50
+
--bg-color-active: #333;
51
+
--border-color: #444;
52
+
}
53
53
}
54
54
55
55
* {
56
-
margin: 0;
57
-
padding: 0;
58
-
box-sizing: border-box;
56
+
margin: 0;
57
+
padding: 0;
58
+
box-sizing: border-box;
59
59
}
60
60
61
61
html,
62
62
body {
63
-
height: 100%;
64
-
width: 100%;
63
+
height: 100%;
64
+
width: 100%;
65
65
}
66
66
67
67
body {
68
-
line-height: 1.5;
69
-
font-weight: 400;
70
-
font-size: 16px;
71
-
color: var(--text-color);
72
-
background-color: var(--bg-color);
68
+
line-height: 1.5;
69
+
font-weight: 400;
70
+
font-size: 16px;
71
+
color: var(--text-color);
72
+
background-color: var(--bg-color);
73
73
}
74
74
75
75
h1,
···
78
78
h4,
79
79
h5,
80
80
h6 {
81
-
font-weight: 600;
82
-
line-height: 1.2;
83
-
padding: 0.75rem;
81
+
font-weight: 600;
82
+
line-height: 1.2;
83
+
padding: 0.75rem;
84
84
}
85
85
86
86
a {
87
-
color: var(--text-color-secondary);
87
+
color: var(--text-color-secondary);
88
88
}
89
89
a:hover {
90
-
color: var(--text-color-hover);
90
+
color: var(--text-color-hover);
91
91
}
92
92
93
93
button {
94
-
font: inherit;
95
-
border: none;
96
-
background: none;
97
-
cursor: pointer;
94
+
font: inherit;
95
+
border: none;
96
+
background: none;
97
+
cursor: pointer;
98
98
}
99
99
100
100
input,
101
101
textarea {
102
-
font: inherit;
102
+
font: inherit;
103
103
}
104
104
105
105
/* Add these new styles */
106
106
.url-container {
107
-
display: flex;
108
-
align-items: center;
109
-
gap: 8px;
110
-
margin-top: 16px;
107
+
display: flex;
108
+
align-items: center;
109
+
gap: 8px;
110
+
margin-top: 16px;
111
111
}
112
112
113
113
/* Add this new style */
114
114
.content-container {
115
-
max-width: 37rem;
116
-
text-align: center;
117
-
padding: 0 8px;
115
+
max-width: 37rem;
116
+
text-align: center;
117
+
padding: 0 8px;
118
118
}
119
119
120
120
/* Update url-input width to be 100% since container will control max width */
121
121
.url-input {
122
-
padding: 8px 12px;
123
-
border: 1px solid var(--border-color);
124
-
border-radius: 4px;
125
-
width: 100%;
126
-
background: var(--bg-color-secondary);
127
-
color: var(--text-color);
122
+
padding: 8px 12px;
123
+
border: 1px solid var(--border-color);
124
+
border-radius: 4px;
125
+
width: 100%;
126
+
background: var(--bg-color-secondary);
127
+
color: var(--text-color);
128
128
}
129
129
130
130
.copy-button {
131
-
padding: 8px;
132
-
color: var(--text-color-secondary);
133
-
border-radius: 4px;
134
-
transition: all 0.2s;
135
-
display: flex;
136
-
align-items: center;
137
-
justify-content: center;
131
+
padding: 8px;
132
+
color: var(--text-color-secondary);
133
+
border-radius: 4px;
134
+
transition: all 0.2s;
135
+
display: flex;
136
+
align-items: center;
137
+
justify-content: center;
138
138
}
139
139
140
140
.copy-button:hover {
141
-
background: var(--bg-color-hover);
141
+
background: var(--bg-color-hover);
142
142
}
143
143
144
144
.copy-button:active {
145
-
background: var(--bg-color-active);
145
+
background: var(--bg-color-active);
146
146
}
147
147
148
148
.copy-button img {
149
-
width: 20px;
150
-
height: 20px;
149
+
width: 20px;
150
+
height: 20px;
151
151
}
152
152
153
153
.copy-button.copied {
154
-
background: #28a745;
154
+
background: #28a745;
155
155
}
156
156
157
157
/* Add footer styles */
158
158
.footer {
159
-
position: fixed;
160
-
bottom: 16px;
161
-
left: 0;
162
-
right: 0;
163
-
text-align: center;
164
-
font-size: 14px;
165
-
color: var(--text-color-secondary);
159
+
position: fixed;
160
+
bottom: 16px;
161
+
left: 0;
162
+
right: 0;
163
+
text-align: center;
164
+
font-size: 14px;
165
+
color: var(--text-color-secondary);
166
166
}
167
167
168
168
.footer a {
169
-
color: var(--text-color-secondary);
170
-
text-decoration: none;
171
-
font-weight: 500;
169
+
color: var(--text-color-secondary);
170
+
text-decoration: none;
171
+
font-weight: 500;
172
172
}
173
173
174
174
.footer a:hover {
175
-
color: var(--text-color-hover);
175
+
color: var(--text-color-hover);
176
176
}