refactor: scope css class (#605) · davidwindham.com/npmx.dev@123f321

+23

app/app.vue

··· 91 91 </div> 92 92 </template> 93 93 94 + <style scoped> 95 + /* Skip link */ 96 + .skip-link { 97 + position: fixed; 98 + top: -100%; 99 + inset-inline-start: 0; 100 + padding: 0.5rem 1rem; 101 + background: var(--fg); 102 + color: var(--bg); 103 + font-size: 0.875rem; 104 + z-index: 100; 105 + transition: top 0.2s ease; 106 + } 107 + 108 + .skip-link:hover { 109 + color: var(--bg); 110 + text-decoration: underline; 111 + } 112 + .skip-link:focus { 113 + top: 0; 114 + } 115 + </style> 116 + 94 117 <style> 95 118 /* Keyboard shortcut highlight on "?" key press */ 96 119 kbd {

-321

app/assets/main.css

··· 173 173 background: #404040; 174 174 } 175 175 176 - /* Skip link */ 177 - .skip-link { 178 - position: fixed; 179 - top: -100%; 180 - inset-inline-start: 0; 181 - padding: 0.5rem 1rem; 182 - background: var(--fg); 183 - color: var(--bg); 184 - font-size: 0.875rem; 185 - z-index: 100; 186 - transition: top 0.2s ease; 187 - } 188 - 189 - .skip-link:hover { 190 - color: var(--bg); 191 - text-decoration: underline; 192 - } 193 - .skip-link:focus { 194 - top: 0; 195 - } 196 - 197 176 /* Shiki theme colors */ 198 177 html.light .shiki, 199 178 html.light .shiki span { ··· 202 181 font-style: var(--shiki-light-font-style) !important; 203 182 font-weight: var(--shiki-light-font-weight) !important; 204 183 text-decoration: var(--shiki-light-text-decoration) !important; 205 - } 206 - 207 - /* README prose styling */ 208 - .readme-content { 209 - color: var(--fg-muted); 210 - line-height: 1.75; 211 - /* Prevent horizontal overflow on mobile */ 212 - overflow-wrap: break-word; 213 - word-wrap: break-word; 214 - word-break: break-word; 215 - /* Contain all children */ 216 - overflow: hidden; 217 - min-width: 0; 218 - } 219 - 220 - /* README headings - styled by visual level (data-level), not semantic level */ 221 - .readme-content h3, 222 - .readme-content h4, 223 - .readme-content h5, 224 - .readme-content h6 { 225 - color: var(--fg); 226 - @apply font-mono; 227 - font-weight: 500; 228 - margin-top: 2rem; 229 - margin-bottom: 1rem; 230 - line-height: 1.3; 231 - 232 - a { 233 - text-decoration: none; 234 - } 235 - } 236 - 237 - /* Visual styling based on original README heading level */ 238 - .readme-content [data-level='1'] { 239 - font-size: 1.5rem; 240 - } 241 - .readme-content [data-level='2'] { 242 - font-size: 1.25rem; 243 - padding-bottom: 0.5rem; 244 - border-bottom: 1px solid var(--border); 245 - } 246 - .readme-content [data-level='3'] { 247 - font-size: 1.125rem; 248 - } 249 - .readme-content [data-level='4'] { 250 - font-size: 1rem; 251 - } 252 - .readme-content [data-level='5'] { 253 - font-size: 0.925rem; 254 - } 255 - .readme-content [data-level='6'] { 256 - font-size: 0.875rem; 257 - } 258 - 259 - .readme-content p { 260 - margin-bottom: 1rem; 261 - } 262 - 263 - .readme-content a { 264 - color: var(--fg); 265 - text-decoration: underline; 266 - text-underline-offset: 4px; 267 - text-decoration-color: var(--fg-subtle); 268 - transition: text-decoration-color 0.2s ease; 269 - } 270 - 271 - .readme-content a:hover { 272 - text-decoration-color: var(--accent); 273 - } 274 - 275 - .readme-content code { 276 - @apply font-mono; 277 - font-size: 0.875em; 278 - background: var(--bg-muted); 279 - padding: 0.2em 0.4em; 280 - border-radius: 4px; 281 - border: 1px solid var(--border); 282 - } 283 - 284 - /* Code blocks - including Shiki output */ 285 - .readme-content pre, 286 - .readme-content .shiki { 287 - border: 1px solid var(--border); 288 - border-radius: 8px; 289 - padding: 1rem; 290 - overflow-x: auto; 291 - margin: 1.5rem 0; 292 - /* Fix horizontal overflow */ 293 - max-width: 100%; 294 - box-sizing: border-box; 295 - } 296 - 297 - .readme-content pre code, 298 - .readme-content .shiki code { 299 - background: transparent !important; 300 - border: none; 301 - padding: 0; 302 - @apply font-mono; 303 - font-size: 0.875rem; 304 - color: var(--fg); 305 - /* Prevent code from forcing width */ 306 - white-space: pre; 307 - word-break: normal; 308 - overflow-wrap: normal; 309 - /* Makes unicode and ascii art work properly */ 310 - line-height: 1.25; 311 - display: inline-block; 312 - } 313 - 314 - .readme-content ul, 315 - .readme-content ol { 316 - margin: 1rem 0; 317 - padding-inline-start: 1.5rem; 318 - } 319 - 320 - .readme-content ul { 321 - list-style-type: disc; 322 - } 323 - 324 - .readme-content ol { 325 - list-style-type: decimal; 326 - } 327 - 328 - .readme-content li { 329 - margin-bottom: 0.5rem; 330 - display: list-item; 331 - } 332 - 333 - .readme-content li::marker { 334 - color: var(--border-hover); 335 - } 336 - 337 - .readme-content blockquote { 338 - border-inline-start: 2px solid var(--border); 339 - padding-inline-start: 1rem; 340 - margin: 1.5rem 0; 341 - color: var(--fg-subtle); 342 - font-style: italic; 343 - } 344 - 345 - /* GitHub-style callouts/alerts */ 346 - .readme-content blockquote[data-callout] { 347 - border-inline-start-width: 3px; 348 - padding: 1rem; 349 - padding-inline-start: 1.25rem; 350 - background: var(--bg-subtle); 351 - font-style: normal; 352 - color: var(--fg-subtle); 353 - position: relative; 354 - } 355 - 356 - .readme-content blockquote[data-callout]::before { 357 - display: block; 358 - @apply font-mono; 359 - font-size: 0.75rem; 360 - font-weight: 500; 361 - text-transform: uppercase; 362 - letter-spacing: 0.05em; 363 - margin-bottom: 0.5rem; 364 - padding-inline-start: 1.5rem; 365 - } 366 - 367 - .readme-content blockquote[data-callout]::after { 368 - content: ''; 369 - width: 1.25rem; 370 - height: 1.25rem; 371 - position: absolute; 372 - top: 1rem; 373 - } 374 - 375 - .readme-content blockquote[data-callout] > p:first-child { 376 - margin-top: 0; 377 - } 378 - 379 - .readme-content blockquote[data-callout] > p:last-child { 380 - margin-bottom: 0; 381 - } 382 - 383 - /* Note - blue */ 384 - .readme-content blockquote[data-callout='note'] { 385 - border-inline-start-color: var(--syntax-str); 386 - background: rgba(59, 130, 246, 0.05); 387 - } 388 - .readme-content blockquote[data-callout='note']::before { 389 - content: 'Note'; 390 - color: #3b82f6; 391 - } 392 - .readme-content blockquote[data-callout='note']::after { 393 - background-color: #3b82f6; 394 - -webkit-mask: icon('i-lucide-info') no-repeat; 395 - mask: icon('i-lucide-info') no-repeat; 396 - } 397 - 398 - /* Tip - green */ 399 - .readme-content blockquote[data-callout='tip'] { 400 - border-inline-start-color: #22c55e; 401 - background: rgba(34, 197, 94, 0.05); 402 - } 403 - .readme-content blockquote[data-callout='tip']::before { 404 - content: 'Tip'; 405 - color: #22c55e; 406 - } 407 - .readme-content blockquote[data-callout='tip']::after { 408 - background-color: #22c55e; 409 - -webkit-mask: icon('i-lucide-lightbulb') no-repeat; 410 - mask: icon('i-lucide-lightbulb') no-repeat; 411 - } 412 - 413 - /* Important - purple */ 414 - .readme-content blockquote[data-callout='important'] { 415 - border-inline-start-color: var(--syntax-fn); 416 - background: rgba(168, 85, 247, 0.05); 417 - } 418 - .readme-content blockquote[data-callout='important']::before { 419 - content: 'Important'; 420 - color: var(--syntax-fn); 421 - } 422 - .readme-content blockquote[data-callout='important']::after { 423 - background-color: var(--syntax-fn); 424 - -webkit-mask: icon('i-lucide-pin') no-repeat; 425 - mask: icon('i-lucide-pin') no-repeat; 426 - } 427 - 428 - /* Warning - yellow/orange */ 429 - .readme-content blockquote[data-callout='warning'] { 430 - border-inline-start-color: #eab308; 431 - background: rgba(234, 179, 8, 0.05); 432 - } 433 - .readme-content blockquote[data-callout='warning']::before { 434 - content: 'Warning'; 435 - color: #eab308; 436 - } 437 - .readme-content blockquote[data-callout='warning']::after { 438 - background-color: #eab308; 439 - -webkit-mask: icon('i-lucide-triangle-alert') no-repeat; 440 - mask: icon('i-lucide-triangle-alert') no-repeat; 441 - } 442 - 443 - /* Caution - red */ 444 - .readme-content blockquote[data-callout='caution'] { 445 - border-inline-start-color: #ef4444; 446 - background: rgba(239, 68, 68, 0.05); 447 - } 448 - .readme-content blockquote[data-callout='caution']::before { 449 - content: 'Caution'; 450 - color: #ef4444; 451 - } 452 - .readme-content blockquote[data-callout='caution']::after { 453 - background-color: #ef4444; 454 - -webkit-mask: icon('i-lucide-circle-alert') no-repeat; 455 - mask: icon('i-lucide-circle-alert') no-repeat; 456 - } 457 - 458 - /* Table wrapper for horizontal scroll on mobile */ 459 - .readme-content table { 460 - display: block; 461 - width: 100%; 462 - overflow-x: auto; 463 - border-collapse: collapse; 464 - margin: 1.5rem 0; 465 - font-size: 0.875rem; 466 - word-break: keep-all; 467 - } 468 - 469 - .readme-content th, 470 - .readme-content td { 471 - border: 1px solid var(--border); 472 - padding: 0.75rem 1rem; 473 - text-align: start; 474 - } 475 - 476 - .readme-content th { 477 - background: var(--bg-subtle); 478 - color: var(--fg); 479 - font-weight: 500; 480 - } 481 - 482 - .readme-content tr:hover { 483 - background: var(--bg-subtle); 484 - } 485 - 486 - .readme-content img { 487 - max-width: 100%; 488 - height: auto; 489 - border-radius: 8px; 490 - margin: 1rem 0; 491 - } 492 - 493 - .readme-content hr { 494 - border: none; 495 - border-top: 1px solid var(--border); 496 - margin: 2rem 0; 497 - } 498 - 499 - /* Badge images inline */ 500 - .readme-content p > a > img, 501 - .readme-content p > img { 502 - display: inline-block; 503 - margin: 0 0.25rem 0.25rem 0; 504 - border-radius: 4px; 505 184 } 506 185 507 186 /* Inline code in package descriptions */

+308

app/components/Readme.vue

··· 1 +  2 + <template> 3 + <article class="readme prose prose-invert max-w-[70ch]"> 4 + <slot /> 5 + </article> 6 + </template> 7 + 8 + <style scoped> 9 + /* README prose styling */ 10 + .readme { 11 + color: var(--fg-muted); 12 + line-height: 1.75; 13 + /* Prevent horizontal overflow on mobile */ 14 + overflow-wrap: break-word; 15 + word-wrap: break-word; 16 + word-break: break-word; 17 + /* Contain all children */ 18 + overflow: hidden; 19 + min-width: 0; 20 + } 21 + 22 + /* README headings - styled by visual level (data-level), not semantic level */ 23 + .readme :deep(h3), 24 + .readme :deep(h4), 25 + .readme :deep(h5), 26 + .readme :deep(h6) { 27 + color: var(--fg); 28 + @apply font-mono; 29 + font-weight: 500; 30 + margin-top: 2rem; 31 + margin-bottom: 1rem; 32 + line-height: 1.3; 33 + 34 + a { 35 + text-decoration: none; 36 + } 37 + } 38 + 39 + /* Visual styling based on original README heading level */ 40 + .readme :deep([data-level='1']) { 41 + font-size: 1.5rem; 42 + } 43 + .readme :deep([data-level='2']) { 44 + font-size: 1.25rem; 45 + padding-bottom: 0.5rem; 46 + border-bottom: 1px solid var(--border); 47 + } 48 + .readme :deep([data-level='3']) { 49 + font-size: 1.125rem; 50 + } 51 + .readme :deep([data-level='4']) { 52 + font-size: 1rem; 53 + } 54 + .readme :deep([data-level='5']) { 55 + font-size: 0.925rem; 56 + } 57 + .readme :deep([data-level='6']) { 58 + font-size: 0.875rem; 59 + } 60 + 61 + .readme :deep(p) { 62 + margin-bottom: 1rem; 63 + } 64 + 65 + .readme :deep(a) { 66 + color: var(--fg); 67 + text-decoration: underline; 68 + text-underline-offset: 4px; 69 + text-decoration-color: var(--fg-subtle); 70 + transition: text-decoration-color 0.2s ease; 71 + } 72 + 73 + .readme a:hover { 74 + text-decoration-color: var(--accent); 75 + } 76 + 77 + .readme :deep(code) { 78 + @apply font-mono; 79 + font-size: 0.875em; 80 + background: var(--bg-muted); 81 + padding: 0.2em 0.4em; 82 + border-radius: 4px; 83 + border: 1px solid var(--border); 84 + } 85 + 86 + /* Code blocks - including Shiki output */ 87 + .readme :deep(pre), 88 + .readme :deep(.shiki) { 89 + border: 1px solid var(--border); 90 + border-radius: 8px; 91 + padding: 1rem; 92 + overflow-x: auto; 93 + margin: 1.5rem 0; 94 + /* Fix horizontal overflow */ 95 + max-width: 100%; 96 + box-sizing: border-box; 97 + } 98 + 99 + .readme :deep(pre code), 100 + .readme :deep(.shiki code) { 101 + background: transparent !important; 102 + border: none; 103 + padding: 0; 104 + @apply font-mono; 105 + font-size: 0.875rem; 106 + color: var(--fg); 107 + /* Prevent code from forcing width */ 108 + white-space: pre; 109 + word-break: normal; 110 + overflow-wrap: normal; 111 + /* Makes unicode and ascii art work properly */ 112 + line-height: 1.25; 113 + display: inline-block; 114 + } 115 + 116 + .readme :deep(ul), 117 + .readme :deep(ol) { 118 + margin: 1rem 0; 119 + padding-inline-start: 1.5rem; 120 + } 121 + 122 + .readme :deep(ul) { 123 + list-style-type: disc; 124 + } 125 + 126 + .readme :deep(ol) { 127 + list-style-type: decimal; 128 + } 129 + 130 + .readme :deep(li) { 131 + margin-bottom: 0.5rem; 132 + display: list-item; 133 + } 134 + 135 + .readme :deep(li::marker) { 136 + color: var(--border-hover); 137 + } 138 + 139 + .readme :deep(blockquote) { 140 + border-inline-start: 2px solid var(--border); 141 + padding-inline-start: 1rem; 142 + margin: 1.5rem 0; 143 + color: var(--fg-subtle); 144 + font-style: italic; 145 + } 146 + 147 + /* GitHub-style callouts/alerts */ 148 + .readme :deep(blockquote[data-callout]) { 149 + border-inline-start-width: 3px; 150 + padding: 1rem; 151 + padding-inline-start: 1.25rem; 152 + background: var(--bg-subtle); 153 + font-style: normal; 154 + color: var(--fg-subtle); 155 + position: relative; 156 + } 157 + 158 + .readme :deep(blockquote[data-callout]::before) { 159 + display: block; 160 + @apply font-mono; 161 + font-size: 0.75rem; 162 + font-weight: 500; 163 + text-transform: uppercase; 164 + letter-spacing: 0.05em; 165 + margin-bottom: 0.5rem; 166 + padding-inline-start: 1.5rem; 167 + } 168 + 169 + .readme :deep(blockquote[data-callout]::after) { 170 + content: ''; 171 + width: 1.25rem; 172 + height: 1.25rem; 173 + position: absolute; 174 + top: 1rem; 175 + } 176 + 177 + .readme :deep(blockquote[data-callout] > p:first-child) { 178 + margin-top: 0; 179 + } 180 + 181 + .readme :deep(blockquote[data-callout] > p:last-child) { 182 + margin-bottom: 0; 183 + } 184 + 185 + /* Note - blue */ 186 + .readme :deep(blockquote[data-callout='note']) { 187 + border-inline-start-color: var(--syntax-str); 188 + background: rgba(59, 130, 246, 0.05); 189 + } 190 + .readme :deep(blockquote[data-callout='note']::before) { 191 + content: 'Note'; 192 + color: #3b82f6; 193 + } 194 + .readme :deep(blockquote[data-callout='note']::after) { 195 + background-color: #3b82f6; 196 + -webkit-mask: icon('i-lucide-info') no-repeat; 197 + mask: icon('i-lucide-info') no-repeat; 198 + } 199 + 200 + /* Tip - green */ 201 + .readme :deep(blockquote[data-callout='tip']) { 202 + border-inline-start-color: #22c55e; 203 + background: rgba(34, 197, 94, 0.05); 204 + } 205 + .readme :deep(blockquote[data-callout='tip']::before) { 206 + content: 'Tip'; 207 + color: #22c55e; 208 + } 209 + .readme :deep(blockquote[data-callout='tip']::after) { 210 + background-color: #22c55e; 211 + -webkit-mask: icon('i-lucide-lightbulb') no-repeat; 212 + mask: icon('i-lucide-lightbulb') no-repeat; 213 + } 214 + 215 + /* Important - purple */ 216 + .readme :deep(blockquote[data-callout='important']) { 217 + border-inline-start-color: var(--syntax-fn); 218 + background: rgba(168, 85, 247, 0.05); 219 + } 220 + .readme :deep(blockquote[data-callout='important']::before) { 221 + content: 'Important'; 222 + color: var(--syntax-fn); 223 + } 224 + .readme :deep(blockquote[data-callout='important']::after) { 225 + background-color: var(--syntax-fn); 226 + -webkit-mask: icon('i-lucide-pin') no-repeat; 227 + mask: icon('i-lucide-pin') no-repeat; 228 + } 229 + 230 + /* Warning - yellow/orange */ 231 + .readme :deep(blockquote[data-callout='warning']) { 232 + border-inline-start-color: #eab308; 233 + background: rgba(234, 179, 8, 0.05); 234 + } 235 + .readme :deep(blockquote[data-callout='warning']::before) { 236 + content: 'Warning'; 237 + color: #eab308; 238 + } 239 + .readme :deep(blockquote[data-callout='warning']::after) { 240 + background-color: #eab308; 241 + -webkit-mask: icon('i-lucide-triangle-alert') no-repeat; 242 + mask: icon('i-lucide-triangle-alert') no-repeat; 243 + } 244 + 245 + /* Caution - red */ 246 + .readme :deep(blockquote[data-callout='caution']) { 247 + border-inline-start-color: #ef4444; 248 + background: rgba(239, 68, 68, 0.05); 249 + } 250 + .readme :deep(blockquote[data-callout='caution']::before) { 251 + content: 'Caution'; 252 + color: #ef4444; 253 + } 254 + .readme :deep(blockquote[data-callout='caution']::after) { 255 + background-color: #ef4444; 256 + -webkit-mask: icon('i-lucide-circle-alert') no-repeat; 257 + mask: icon('i-lucide-circle-alert') no-repeat; 258 + } 259 + 260 + /* Table wrapper for horizontal scroll on mobile */ 261 + .readme :deep(table) { 262 + display: block; 263 + width: 100%; 264 + overflow-x: auto; 265 + border-collapse: collapse; 266 + margin: 1.5rem 0; 267 + font-size: 0.875rem; 268 + word-break: keep-all; 269 + } 270 + 271 + .readme :deep(th), 272 + .readme :deep(td) { 273 + border: 1px solid var(--border); 274 + padding: 0.75rem 1rem; 275 + text-align: start; 276 + } 277 + 278 + .readme :deep(th) { 279 + background: var(--bg-subtle); 280 + color: var(--fg); 281 + font-weight: 500; 282 + } 283 + 284 + .readme :deep(tr:hover) { 285 + background: var(--bg-subtle); 286 + } 287 + 288 + .readme :deep(img) { 289 + max-width: 100%; 290 + height: auto; 291 + border-radius: 8px; 292 + margin: 1rem 0; 293 + } 294 + 295 + .readme :deep(hr) { 296 + border: none; 297 + border-top: 1px solid var(--border); 298 + margin: 2rem 0; 299 + } 300 + 301 + /* Badge images inline */ 302 + .readme :deep(p > a > img), 303 + .readme :deep(p > img) { 304 + display: inline-block; 305 + margin: 0 0.25rem 0.25rem 0; 306 + border-radius: 4px; 307 + } 308 + </style>

+1 -6

app/pages/[...package].vue

··· 939 939 </a> 940 940 </h2> 941 941  942 - <article 943 - v-if="readmeData?.html" 944 - class="readme-content prose prose-invert max-w-[70ch]" 945 - v-html="readmeData.html" 946 - @click="handleClick" 947 - /> 942 + <Readme v-if="readmeData?.html" v-html="readmeData.html" @click="handleClick" /> 948 943 <p v-else class="text-fg-subtle italic"> 949 944 {{ $t('package.readme.no_readme') }} 950 945 <a v-if="repositoryUrl" :href="repositoryUrl" rel="noopener noreferrer" class="link">{{

+1 -4

app/pages/code/[...path].vue

··· 439 439 v-show="markdownViewMode === 'preview'" 440 440 class="flex justify-center p-4" 441 441 > 442 - <div 443 - class="readme-content prose prose-invert max-w-[70ch]" 444 - v-html="fileContent.markdownHtml.html" 445 - ></div> 442 + <Readme v-html="fileContent.markdownHtml.html" /> 446 443 </div> 447 444 448 445 <CodeViewer

Configure Feed

Configure Feed