commit bdbb2f0067703d5ab1609673b43c592f07495a9f · dunkirk.sh/unduckified

+2 -1

index.html

···

       24
       24
        
                   media="print"

     

       25
       25
        
                   onload="this.media='all'"

     

       26
       26
        
               />

     

       27
       27
       +
               <link rel="stylesheet" href="/global.css" />

     

       27
       28
        
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       28
       29
        
               <title>Unduck</title>

     

       29
       30
        
               <meta

     
···

       31
       32
        
                   content="A better default search engine (with bangs!)"

     

       32
       33
        
               />

     

       33
       34
        
           </head>

     

       34
       34
       -
           <body style="background-color: transparent">

     

       35
       35
       +
           <body>

     

       35
       36
        
               <div id="app"></div>

     

       36
       37
        
               <script type="module" src="/src/main.ts"></script>

     

       37
       38
        
           </body>

+17 -1

public/clipboard-check.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-clipboard-check"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>
     

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

     

       2
       2
       +
           <style>

     

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

     

       4
       4
       +
                   .lucide-clipboard-check {

     

       5
       5
       +
                       stroke: #1a1a1a;

     

       6
       6
       +
                   }

     

       7
       7
       +
               }

     

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

     

       9
       9
       +
                   .lucide-clipboard-check {

     

       10
       10
       +
                       stroke: #e0e0e0;

     

       11
       11
       +
                   }

     

       12
       12
       +
               }

     

       13
       13
       +
           </style>

     

       14
       14
       +
           <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>

     

       15
       15
       +
           <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>

     

       16
       16
       +
           <path d="m9 14 2 2 4-4"/>

     

       17
       17
       +
       </svg>

+16 -1

public/clipboard.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-clipboard"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
     

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

     

       2
       2
       +
           <style>

     

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

     

       4
       4
       +
                   .lucide-clipboard {

     

       5
       5
       +
                       stroke: #1a1a1a;

     

       6
       6
       +
                   }

     

       7
       7
       +
               }

     

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

     

       9
       9
       +
                   .lucide-clipboard {

     

       10
       10
       +
                       stroke: #e0e0e0;

     

       11
       11
       +
                   }

     

       12
       12
       +
               }

     

       13
       13
       +
           </style>

     

       14
       14
       +
           <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>

     

       15
       15
       +
           <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>

     

       16
       16
       +
       </svg>

+176

public/global.css

···

       1
       1
       +
       /* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */

     

       2
       2
       +
       

     

       3
       3
       +
       /* Font fallback that closely matches Inter metrics */

     

       4
       4
       +
       @font-face {

     

       5
       5
       +
           font-family: "Inter Fallback";

     

       6
       6
       +
           size-adjust: 107%;

     

       7
       7
       +
           ascent-override: 90%;

     

       8
       8
       +
           src: local("Arial");

     

       9
       9
       +
       }

     

       10
       10
       +
       

     

       11
       11
       +
       :root {

     

       12
       12
       +
           font-family:

     

       13
       13
       +
               Inter,

     

       14
       14
       +
               "Inter Fallback",

     

       15
       15
       +
               system-ui,

     

       16
       16
       +
               -apple-system,

     

       17
       17
       +
               BlinkMacSystemFont,

     

       18
       18
       +
               "Segoe UI",

     

       19
       19
       +
               Roboto,

     

       20
       20
       +
               Oxygen,

     

       21
       21
       +
               Ubuntu,

     

       22
       22
       +
               Cantarell,

     

       23
       23
       +
               "Open Sans",

     

       24
       24
       +
               "Helvetica Neue",

     

       25
       25
       +
               sans-serif;

     

       26
       26
       +
           font-synthesis: none;

     

       27
       27
       +
           text-rendering: optimizeLegibility;

     

       28
       28
       +
           -webkit-font-smoothing: antialiased;

     

       29
       29
       +
           -moz-osx-font-smoothing: grayscale;

     

       30
       30
       +
       

     

       31
       31
       +
           /* Light mode colors */

     

       32
       32
       +
           --text-color: #1a1a1a;

     

       33
       33
       +
           --text-color-secondary: #666;

     

       34
       34
       +
           --text-color-hover: #333;

     

       35
       35
       +
           --bg-color: #fff;

     

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

     

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

     

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

     

       39
       39
       +
           --border-color: #ddd;

     

       40
       40
       +
       }

     

       41
       41
       +
       

     

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

     

       43
       43
       +
           :root {

     

       44
       44
       +
               --text-color: #e0e0e0;

     

       45
       45
       +
               --text-color-secondary: #999;

     

       46
       46
       +
               --text-color-hover: #fff;

     

       47
       47
       +
               --bg-color: #121212;

     

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

     

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

     

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

     

       51
       51
       +
               --border-color: #444;

     

       52
       52
       +
           }

     

       53
       53
       +
       }

     

       54
       54
       +
       

     

       55
       55
       +
       * {

     

       56
       56
       +
           margin: 0;

     

       57
       57
       +
           padding: 0;

     

       58
       58
       +
           box-sizing: border-box;

     

       59
       59
       +
       }

     

       60
       60
       +
       

     

       61
       61
       +
       html,

     

       62
       62
       +
       body {

     

       63
       63
       +
           height: 100%;

     

       64
       64
       +
           width: 100%;

     

       65
       65
       +
       }

     

       66
       66
       +
       

     

       67
       67
       +
       body {

     

       68
       68
       +
           line-height: 1.5;

     

       69
       69
       +
           font-weight: 400;

     

       70
       70
       +
           font-size: 16px;

     

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

     

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

     

       73
       73
       +
       }

     

       74
       74
       +
       

     

       75
       75
       +
       h1,

     

       76
       76
       +
       h2,

     

       77
       77
       +
       h3,

     

       78
       78
       +
       h4,

     

       79
       79
       +
       h5,

     

       80
       80
       +
       h6 {

     

       81
       81
       +
           font-weight: 600;

     

       82
       82
       +
           line-height: 1.2;

     

       83
       83
       +
           padding: 0.75rem;

     

       84
       84
       +
       }

     

       85
       85
       +
       

     

       86
       86
       +
       a {

     

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

     

       88
       88
       +
       }

     

       89
       89
       +
       a:hover {

     

       90
       90
       +
           color: var(--text-color-hover);

     

       91
       91
       +
       }

     

       92
       92
       +
       

     

       93
       93
       +
       button {

     

       94
       94
       +
           font: inherit;

     

       95
       95
       +
           border: none;

     

       96
       96
       +
           background: none;

     

       97
       97
       +
           cursor: pointer;

     

       98
       98
       +
       }

     

       99
       99
       +
       

     

       100
       100
       +
       input,

     

       101
       101
       +
       textarea {

     

       102
       102
       +
           font: inherit;

     

       103
       103
       +
       }

     

       104
       104
       +
       

     

       105
       105
       +
       /* Add these new styles */

     

       106
       106
       +
       .url-container {

     

       107
       107
       +
           display: flex;

     

       108
       108
       +
           align-items: center;

     

       109
       109
       +
           gap: 8px;

     

       110
       110
       +
           margin-top: 16px;

     

       111
       111
       +
       }

     

       112
       112
       +
       

     

       113
       113
       +
       /* Add this new style */

     

       114
       114
       +
       .content-container {

     

       115
       115
       +
           max-width: 37rem;

     

       116
       116
       +
           text-align: center;

     

       117
       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
       122
       +
           padding: 8px 12px;

     

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

     

       124
       124
       +
           border-radius: 4px;

     

       125
       125
       +
           width: 100%;

     

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

     

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

     

       128
       128
       +
       }

     

       129
       129
       +
       

     

       130
       130
       +
       .copy-button {

     

       131
       131
       +
           padding: 8px;

     

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

     

       133
       133
       +
           border-radius: 4px;

     

       134
       134
       +
           transition: all 0.2s;

     

       135
       135
       +
           display: flex;

     

       136
       136
       +
           align-items: center;

     

       137
       137
       +
           justify-content: center;

     

       138
       138
       +
       }

     

       139
       139
       +
       

     

       140
       140
       +
       .copy-button:hover {

     

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

     

       142
       142
       +
       }

     

       143
       143
       +
       

     

       144
       144
       +
       .copy-button:active {

     

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

     

       146
       146
       +
       }

     

       147
       147
       +
       

     

       148
       148
       +
       .copy-button img {

     

       149
       149
       +
           width: 20px;

     

       150
       150
       +
           height: 20px;

     

       151
       151
       +
       }

     

       152
       152
       +
       

     

       153
       153
       +
       .copy-button.copied {

     

       154
       154
       +
           background: #28a745;

     

       155
       155
       +
       }

     

       156
       156
       +
       

     

       157
       157
       +
       /* Add footer styles */

     

       158
       158
       +
       .footer {

     

       159
       159
       +
           position: fixed;

     

       160
       160
       +
           bottom: 16px;

     

       161
       161
       +
           left: 0;

     

       162
       162
       +
           right: 0;

     

       163
       163
       +
           text-align: center;

     

       164
       164
       +
           font-size: 14px;

     

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

     

       166
       166
       +
       }

     

       167
       167
       +
       

     

       168
       168
       +
       .footer a {

     

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

     

       170
       170
       +
           text-decoration: none;

     

       171
       171
       +
           font-weight: 500;

     

       172
       172
       +
       }

     

       173
       173
       +
       

     

       174
       174
       +
       .footer a:hover {

     

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

     

       176
       176
       +
       }

-1

public/search.svg

···

       1
       1
        
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
        
       <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">

     

       3
       3
       -
        <rect width="1200" height="1200" fill="black"/>

     

       4
       3
        
        <path fill="white" d="m980.48 905.76-198.84-199.08c89.203-125.34 77.953-300.14-34.406-412.64-125.26-125.44-328.03-125.44-453.32 0-125.26 125.44-125.26 328.45 0 453.84 112.36 112.5 286.97 123.74 412.18 34.406l198.84 199.08c53.25 53.297 132.05-19.078 75.562-75.609zm-610.87-233.58c-83.391-83.531-83.391-218.86 0-302.39s218.58-83.531 302.02 0c83.391 83.531 83.391 218.86 0 302.39-83.438 83.484-218.63 83.484-302.02 0z"/>

     

       5
       4
        
       </svg>

-151

src/global.css

···

       1
       1
       -
       /* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */

     

       2
       2
       -
       

     

       3
       3
       -
       /* Font fallback that closely matches Inter metrics */

     

       4
       4
       -
       @font-face {

     

       5
       5
       -
       	font-family: "Inter Fallback";

     

       6
       6
       -
       	size-adjust: 107%;

     

       7
       7
       -
       	ascent-override: 90%;

     

       8
       8
       -
       	src: local("Arial");

     

       9
       9
       -
       }

     

       10
       10
       -
       

     

       11
       11
       -
       :root {

     

       12
       12
       -
       	font-family:

     

       13
       13
       -
       		Inter,

     

       14
       14
       -
       		"Inter Fallback",

     

       15
       15
       -
       		system-ui,

     

       16
       16
       -
       		-apple-system,

     

       17
       17
       -
       		BlinkMacSystemFont,

     

       18
       18
       -
       		"Segoe UI",

     

       19
       19
       -
       		Roboto,

     

       20
       20
       -
       		Oxygen,

     

       21
       21
       -
       		Ubuntu,

     

       22
       22
       -
       		Cantarell,

     

       23
       23
       -
       		"Open Sans",

     

       24
       24
       -
       		"Helvetica Neue",

     

       25
       25
       -
       		sans-serif;

     

       26
       26
       -
       	font-synthesis: none;

     

       27
       27
       -
       	text-rendering: optimizeLegibility;

     

       28
       28
       -
       	-webkit-font-smoothing: antialiased;

     

       29
       29
       -
       	-moz-osx-font-smoothing: grayscale;

     

       30
       30
       -
       }

     

       31
       31
       -
       

     

       32
       32
       -
       * {

     

       33
       33
       -
       	margin: 0;

     

       34
       34
       -
       	padding: 0;

     

       35
       35
       -
       	box-sizing: border-box;

     

       36
       36
       -
       }

     

       37
       37
       -
       

     

       38
       38
       -
       html,

     

       39
       39
       -
       body {

     

       40
       40
       -
       	height: 100%;

     

       41
       41
       -
       	width: 100%;

     

       42
       42
       -
       }

     

       43
       43
       -
       

     

       44
       44
       -
       body {

     

       45
       45
       -
       	line-height: 1.5;

     

       46
       46
       -
       	font-weight: 400;

     

       47
       47
       -
       	font-size: 16px;

     

       48
       48
       -
       	color: #1a1a1a;

     

       49
       49
       -
       }

     

       50
       50
       -
       

     

       51
       51
       -
       h1,

     

       52
       52
       -
       h2,

     

       53
       53
       -
       h3,

     

       54
       54
       -
       h4,

     

       55
       55
       -
       h5,

     

       56
       56
       -
       h6 {

     

       57
       57
       -
       	font-weight: 600;

     

       58
       58
       -
       	line-height: 1.2;

     

       59
       59
       -
       	padding: 0.75rem;

     

       60
       60
       -
       }

     

       61
       61
       -
       

     

       62
       62
       -
       a {

     

       63
       63
       -
       	color: #444444;

     

       64
       64
       -
       }

     

       65
       65
       -
       a:hover {

     

       66
       66
       -
       	color: #888888;

     

       67
       67
       -
       }

     

       68
       68
       -
       

     

       69
       69
       -
       button {

     

       70
       70
       -
       	font: inherit;

     

       71
       71
       -
       	border: none;

     

       72
       72
       -
       	background: none;

     

       73
       73
       -
       	cursor: pointer;

     

       74
       74
       -
       }

     

       75
       75
       -
       

     

       76
       76
       -
       input,

     

       77
       77
       -
       textarea {

     

       78
       78
       -
       	font: inherit;

     

       79
       79
       -
       }

     

       80
       80
       -
       

     

       81
       81
       -
       /* Add these new styles */

     

       82
       82
       -
       .url-container {

     

       83
       83
       -
       	display: flex;

     

       84
       84
       -
       	align-items: center;

     

       85
       85
       -
       	gap: 8px;

     

       86
       86
       -
       	margin-top: 16px;

     

       87
       87
       -
       }

     

       88
       88
       -
       

     

       89
       89
       -
       /* Add this new style */

     

       90
       90
       -
       .content-container {

     

       91
       91
       -
       	max-width: 37rem;

     

       92
       92
       -
       	text-align: center;

     

       93
       93
       -
       	padding: 0 8px;

     

       94
       94
       -
       }

     

       95
       95
       -
       

     

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

     

       97
       97
       -
       .url-input {

     

       98
       98
       -
       	padding: 8px 12px;

     

       99
       99
       -
       	border: 1px solid #ddd;

     

       100
       100
       -
       	border-radius: 4px;

     

       101
       101
       -
       	width: 100%;

     

       102
       102
       -
       	background: #f5f5f5;

     

       103
       103
       -
       }

     

       104
       104
       -
       

     

       105
       105
       -
       .copy-button {

     

       106
       106
       -
       	padding: 8px;

     

       107
       107
       -
       	color: #666;

     

       108
       108
       -
       	border-radius: 4px;

     

       109
       109
       -
       	transition: all 0.2s;

     

       110
       110
       -
       	display: flex;

     

       111
       111
       -
       	align-items: center;

     

       112
       112
       -
       	justify-content: center;

     

       113
       113
       -
       }

     

       114
       114
       -
       

     

       115
       115
       -
       .copy-button:hover {

     

       116
       116
       -
       	background: #f0f0f0;

     

       117
       117
       -
       }

     

       118
       118
       -
       

     

       119
       119
       -
       .copy-button:active {

     

       120
       120
       -
       	background: #e5e5e5;

     

       121
       121
       -
       }

     

       122
       122
       -
       

     

       123
       123
       -
       .copy-button img {

     

       124
       124
       -
       	width: 20px;

     

       125
       125
       -
       	height: 20px;

     

       126
       126
       -
       }

     

       127
       127
       -
       

     

       128
       128
       -
       .copy-button.copied {

     

       129
       129
       -
       	background: #28a745;

     

       130
       130
       -
       }

     

       131
       131
       -
       

     

       132
       132
       -
       /* Add footer styles */

     

       133
       133
       -
       .footer {

     

       134
       134
       -
       	position: fixed;

     

       135
       135
       -
       	bottom: 16px;

     

       136
       136
       -
       	left: 0;

     

       137
       137
       -
       	right: 0;

     

       138
       138
       -
       	text-align: center;

     

       139
       139
       -
       	font-size: 14px;

     

       140
       140
       -
       	color: #666;

     

       141
       141
       -
       }

     

       142
       142
       -
       

     

       143
       143
       -
       .footer a {

     

       144
       144
       -
       	color: #666;

     

       145
       145
       -
       	text-decoration: none;

     

       146
       146
       -
       	font-weight: 500;

     

       147
       147
       -
       }

     

       148
       148
       -
       

     

       149
       149
       -
       .footer a:hover {

     

       150
       150
       -
       	color: #333;

     

       151
       151
       -
       }

-1

src/main.ts

···

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

     

       2
       2
       -
       import "./global.css";

     

       3
       2
        
       

     

       4
       3
        
       function noSearchDefaultPageRender() {

     

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