Fix lint errors · kasper.space/v3.kasper.space@7d459ef

+28 -24

.eslintrc.cjs

··· 1 1 module.exports = { 2 - root: true, 3 - extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'], 4 - parser: '@typescript-eslint/parser', 5 - plugins: ['@typescript-eslint'], 6 - ignorePatterns: ['*.cjs'], 7 - parserOptions: { 8 - sourceType: 'module', 9 - ecmaVersion: 2020, 10 - extraFileExtensions: ['.svelte'], 11 - }, 12 - env: { 13 - browser: true, 14 - es2017: true, 15 - node: true, 16 - }, 17 - overrides: [ 18 - { 19 - files: ['*.svelte'], 20 - parser: 'svelte-eslint-parser', 21 - parserOptions: { 22 - parser: '@typescript-eslint/parser', 23 - }, 24 - }, 25 - ], 2 + root: true, 3 + extends: [ 4 + 'eslint:recommended', 5 + 'plugin:@typescript-eslint/recommended', 6 + 'plugin:svelte/recommended', 7 + 'prettier', 8 + ], 9 + parser: '@typescript-eslint/parser', 10 + plugins: ['@typescript-eslint'], 11 + parserOptions: { 12 + sourceType: 'module', 13 + ecmaVersion: 2020, 14 + extraFileExtensions: ['.svelte'], 15 + }, 16 + env: { 17 + browser: true, 18 + es2017: true, 19 + node: true, 20 + }, 21 + overrides: [ 22 + { 23 + files: ['*.svelte'], 24 + parser: 'svelte-eslint-parser', 25 + parserOptions: { 26 + parser: '@typescript-eslint/parser', 27 + }, 28 + }, 29 + ], 26 30 }

+8 -8

src/app.html

··· 1 - <!DOCTYPE html> 1 + <!doctype html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 6 7 - <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png"> 8 - <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png"> 9 - <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png"> 10 - <link rel="manifest" href="%sveltekit.assets%/site.webmanifest"> 11 - <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#771614"> 12 - <meta name="msapplication-TileColor" content="#b91d47"> 13 - <meta name="theme-color" content="#ffffff"> 7 + <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" /> 8 + <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" /> 9 + <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" /> 10 + <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" /> 11 + <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#771614" /> 12 + <meta name="msapplication-TileColor" content="#b91d47" /> 13 + <meta name="theme-color" content="#ffffff" /> 14 14 %sveltekit.head% 15 15 </head> 16 16 <body data-sveltekit-preload-data="hover">

+1 -3

src/routes/+layout.server.ts

··· 3 3 export const prerender = true 4 4 5 5 async function fetch_channel_yt_videos(channel_id: string) { 6 - const response = await fetch( 7 - 'https://www.youtube.com/feeds/videos.xml?channel_id='+channel_id, 8 - ) 6 + const response = await fetch('https://www.youtube.com/feeds/videos.xml?channel_id=' + channel_id) 9 7 const text = await response.text() 10 8 const parser = new XMLParser() 11 9 const xml: {

+56 -47

src/routes/+page.svelte

··· 86 86 87 87 <div class="top"> 88 88 <header class="page"> 89 - <img src="/logos/kh-transparent.png" /> 89 + <img src="/logos/kh-transparent.png" alt="Logo" /> 90 90 <p class="one">Hi.</p> 91 91 </header> 92 92 <p class="two">I make things.</p> ··· 98 98 <div class="bottom"> 99 99 <div class="spacer"> 100 100 <div class="personal-links flex-row"> 101 - <a target="_blank" class="twitter" title="Twitter" href="https://twitter.com/SpectralKH"></a> 102 - <a class="discord" title="Discord"> 101 + <a class="icon twitter" title="Twitter" href="https://twitter.com/probablykasper"> 102 + <img src="/logos/personal/twitter.png" alt="Twitter" /> 103 + </a> 104 + <div class="icon discord" title="Discord"> 103 105 <div class="popup hidden"> 104 106 <input readonly class="popup-input" value="KH | Shrive & Lacuna#6425" /> 105 107 </div> 108 + </div> 109 + <a class="icon facebook" title="Facebook" href="https://facebook.com/probablykasper"> 110 + <img src="/logos/personal/facebook.png" alt="Facebook" /> 106 111 </a> 107 - <a 108 - target="_blank" 109 - class="facebook" 110 - title="Facebook" 111 - href="https://www.facebook.com/SpectralKH" 112 - ></a> 113 - <a target="_blank" class="youtube" title="YouTube" href="https://youtube.com/SpectralKH"></a> 114 - <a 115 - target="_blank" 116 - class="soundcloud" 117 - title="SoundCloud" 118 - href="https://soundcloud.com/SpectralKH" 119 - ></a> 120 - <a target="_blank" class="github" title="GitHub" href="https://github.com/SpectralKH"></a> 121 - <a target="_blank" class="instagram" title="Instagram" href="https://www.instagram.com/spckh/" 122 - ></a> 123 - <a class="email" title="Email"> 112 + <a class="icon youtube" title="YouTube" href="https://youtube.com/probablykasper"> 113 + <img src="/logos/personal/youtube.png" alt="YouTube" /> 114 + </a> 115 + <a class="icon soundcloud" title="SoundCloud" href="https://soundcloud.com/probablykasper"> 116 + <img src="/logos/personal/soundcloud.png" alt="SoundCloud" /> 117 + </a> 118 + <a class="icon github" title="GitHub" href="https://github.com/probablykasper"> 119 + <img src="/logos/personal/github.png" alt="GitHub" /> 120 + </a> 121 + <a class="icon instagram" title="Instagram" href="https://instagram.com/probablykasper"> 122 + <img src="/logos/personal/instagram.png" alt="Instagram" /> 123 + </a> 124 + <div class="icon email" title="Email"> 124 125 <div class="popup hidden"> 125 126 <input readonly class="popup-input" value={PUBLIC_EMAIL} /> 126 127 </div> 127 - </a> 128 + </div> 128 129 </div> 129 130 </div> 130 131 131 132 <section class="shrive adjust-height"> 132 133 <header class="flex-row"> 133 - <a target="_blank" href="https://www.youtube.com/Shrive"> 134 - <img src="/logos/project/shrive.png" /> 134 + <a href="https://www.youtube.com/Shrive"> 135 + <img src="/logos/project/shrive.png" alt="Shrive logo" /> 135 136 </a> 136 137 <div class="text r"> 137 138 <p class="title"> 138 - <a target="_blank" href="https://www.youtube.com/Shrive">Shrive</a> 139 + <a href="https://www.youtube.com/Shrive">Shrive</a> 139 140 </p> 140 141 <p class="description"> 141 142 A YouTube channel where I curate all kinds of music, every Monday, Wednesday and Friday. ··· 144 145 </header> 145 146 <main class="adjust-height flex-row"> 146 147 {#each data.shrive_videos.slice(0, 8) as video} 147 - <a target="_blank" class="item" href="https://www.youtube.com/watch?v={video.id}"> 148 + <a class="item" href="https://www.youtube.com/watch?v={video.id}"> 148 149 <div class="overlay"></div> 149 150 <p class="title">{video.title}</p> 150 151 <div ··· 160 161 <header class="flex-row"> 161 162 <div class="text l"> 162 163 <p class="title"> 163 - <a target="_blank" href="https://soundcloud.com/LacunaRecords">Lacuna Records</a> 164 + <a href="https://soundcloud.com/LacunaRecords">Lacuna Records</a> 164 165 </p> 165 166 <p class="description"> 166 167 I am a co-owner of this independent indie record label, with a nice community behind it. 167 168 </p> 168 169 </div> 169 - <a target="_blank" href="https://soundcloud.com/LacunaRecords"> 170 - <img src="/logos/project/lacuna.png" /> 170 + <a href="https://soundcloud.com/LacunaRecords"> 171 + <img src="/logos/project/lacuna.png" alt="Lacuna logo" /> 171 172 </a> 172 173 </header> 173 174 <main class="flex-row"> 175 +  174 176 {#each Array(8) as _} 175 - <a target="_blank" class="item"> 177 + <a class="item" href={null}> 176 178 <div class="overlay"></div> 177 179 <p class="title"></p> 178 180 <div class="img"></div> ··· 183 185 184 186 <section class="trap-united adjust-height"> 185 187 <header class="flex-row"> 186 - <a target="_blank" href="https://www.youtube.com/TrapUnited"> 187 - <img src="/logos/project/trap-united.png" /> 188 + <a href="https://www.youtube.com/TrapUnited"> 189 + <img src="/logos/project/trap-united.png" alt="Trap United logo" /> 188 190 </a> 189 191 <div class="text r"> 190 192 <p class="title"> 191 - <a target="_blank" href="https://www.youtube.com/TrapUnited">Trap United</a> 193 + <a href="https://www.youtube.com/TrapUnited">Trap United</a> 192 194 </p> 193 195 <p class="description"> 194 196 Another music curation channel, this one with daily trap music uploads, and part of to the ··· 198 200 </header> 199 201 <main class="adjust-height flex-row"> 200 202 {#each data.trap_united_videos.slice(0, 8) as video} 201 - <a target="_blank" class="item" href="https://www.youtube.com/watch?v={video.id}"> 203 + <a class="item" href="https://www.youtube.com/watch?v={video.id}"> 202 204 <div class="overlay"></div> 203 205 <p class="title">{video.title}</p> 204 206 <div ··· 214 216 <header class="flex-row"> 215 217 <div class="text l"> 216 218 <p class="title"> 217 - <a target="_blank" href="https://github.com/SpectralKH">Dev</a> 219 + <a href="https://github.com/probablykasper">Dev</a> 218 220 </p> 219 221 <p class="description">HTML5, Sass, JS, jQuery, PHP, MySQL. It's a start.</p> 220 222 </div> 221 - <a target="_blank" href="https://github.com/SpectralKH"> 222 - <img src="/logos/project/github.png" /> 223 + <a href="https://github.com/probablykasper"> 224 + <img src="/logos/project/github.png" alt="GitHub logo" /> 223 225 </a> 224 226 </header> 225 227 <main class="adjust-height flex-row"> ··· 228 230 <p class="title">Nelation</p> 229 231 <p class="description">Website for the record label Nelation.</p> 230 232 <div class="links"> 231 - <a class="link" href=""></a> 232 - <a class="github-link" href=""></a> 233 + <span class="link"> 234 + <img src="/open-in-new.png" alt="" /> 235 + </span> 236 + <span class="github link"> 237 + <img src="/logos/project/github.png" alt="GitHub logo" /> 238 + </span> 233 239 </div> 234 240 <div class="img"></div> 235 241 </div> ··· 238 244 <p class="title">Personal Website</p> 239 245 <p class="description">I think it's self explanatory</p> 240 246 <div class="links"> 241 - <a class="link" href="http://kh.henningsen.se/"></a> 242 - <a class="github-link" href=""></a> 247 + <a class="link" href="https://kasper.space"> 248 + <img src="/open-in-new.png" alt="" /> 249 + </a> 250 + <span class="github link"> 251 + <img src="/logos/project/github.png" alt="GitHub logo" /> 252 + </span> 243 253 </div> 244 254 <div class="img"></div> 245 255 </div> ··· 248 258 249 259 <section class="video adjust-height"> 250 260 <header class="flex-row"> 251 - <a target="_blank" href="https://www.youtube.com/user/SpectralKH"> 252 - <img src="/logos/project/youtube.png" /> 261 + <a href="https://www.youtube.com/probablykasper"> 262 + <img src="/logos/project/youtube.png" alt="YouTube logo" /> 253 263 </a> 254 264 <div class="text r"> 255 265 <p class="title"> 256 - <a target="_blank" href="https://www.youtube.com/user/SpectralKH">Video</a> 266 + <a href="https://www.youtube.com/probablykasper">Video</a> 257 267 </p> 258 268 <p class="description"> 259 269 I'm experienced with After Effects and Final Cut. My personal YouTube channel has audio ··· 263 273 </header> 264 274 <main class="adjust-height flex-row"> 265 275 {#each data.personal_videos.slice(0, 8) as video} 266 - <a target="_blank" class="item" href="https://www.youtube.com/watch?v={video.id}"> 276 + <a class="item" href="https://www.youtube.com/watch?v={video.id}"> 267 277 <div class="overlay"></div> 268 278 <p class="title">{video.title}</p> 269 279 <div ··· 279 289 <header class="flex-row"> 280 290 <div class="text l"> 281 291 <p class="title"> 282 - <a target="_blank" 283 - href="http://www.planetminecraft.com/member/SpectralKH/">Minecraft</a> 292 + <a href="http://www.planetminecraft.com/member/SpectralKH/">Minecraft</a> 284 293 </p> 285 294 <p class="description">Minecraft was a big part of my life previously. I 286 295 gathered lots of friends, and had fun with different projects.</p> 287 296 </div> 288 - <a target="_blank" href="http://www.planetminecraft.com/member/SpectralKH/"> 297 + <a href="http://www.planetminecraft.com/member/SpectralKH/"> 289 298 <img src="/logos/project/minecraft.png"> 290 299 </a> 291 300 </header>

+15 -24

src/routes/global.sass

··· 80 80 transform: translateX(-50%) 81 81 // max-width: 500px 82 82 z-index: 999999 83 - a 83 + .icon 84 84 width: 26px 85 85 height: 26px 86 86 padding: 8px 87 + display: flex 88 + align-items: center 89 + justify-content: center 87 90 background-repeat: no-repeat 88 91 background-position: center 89 92 .discord, .email ··· 110 113 &.hidden 111 114 opacity: 0 112 115 pointer-events: none 113 - .twitter 114 - background-image: url("/logos/personal/twitter.png") 115 116 .discord 116 117 background-image: url("/logos/personal/discord.png") 117 118 input ··· 120 121 left: 40px 121 122 @media (max-width: 500px) 122 123 left: 60px 123 - .facebook 124 - background-image: url("/logos/personal/facebook.png") 125 - .youtube 126 - background-image: url("/logos/personal/youtube.png") 127 - .soundcloud 128 - background-image: url("/logos/personal/soundcloud.png") 129 - .github 130 - background-image: url("/logos/personal/github.png") 131 - .steam 132 - background-image: url("/logos/personal/steam.png") 133 - .instagram 134 - background-image: url("/logos/personal/instagram.png") 135 124 .email 136 125 background-image: url("/logos/personal/email.png") 137 126 input ··· 370 359 bottom: 0px 371 360 right: 0px 372 361 transition: opacity $transition-item 373 - a 362 + .link 374 363 width: 24px 375 364 height: 24px 376 365 padding: 4px 377 - background-repeat: no-repeat 378 - background-position: center 379 366 float: right 380 - .github-link 381 - background-size: 18px 382 - background-image: url("/logos/project/github.png") 367 + display: flex 368 + align-items: center 369 + justify-content: center 370 + .link.github 383 371 padding-right: 2px 384 - .link 385 - background-size: 16px 386 - background-image: url("/open-in-new.png") 372 + .link.github img 373 + width: 18px 374 + height: 18px 375 + .link img 376 + width: 16px 377 + height: 16px 387 378 padding-left: 2px 388 379 389 380 .footnote

Configure Feed

Configure Feed