Merge pull request #69 from hasparus/remove-dead-css

* fix: drop dark mode code block background

The --shiki-dark-bg variable (e.g. #24292e from github-dark) was adding
a visible background to code blocks in dark mode. haspar.us prod had
transparent backgrounds — keep it that way.

* Restyle twoslash popup an run format

* chore: remove dead CSS selectors and unused ColorSchemeSelect

Remove ~150 lines of CSS targeting old remark-shiki-twoslash markup
(.code-container, .query, .error/.error-behind, .tag-container,
.logger, .inline-completions) — none matched in built output.

Delete ColorSchemeSelect.tsx — exported but never imported anywhere,
replaced by command palette theme switching.

* Kill the animation

* fix: use CSS anchor positioning for twoslash tooltips

Replaces absolute positioning with CSS Anchor Positioning API so
tooltips escape the pre's overflow clipping and center on the
hovered token. Includes a fallback to flip above when near the
bottom of the viewport.

* fix: add fallback for browsers without CSS anchor positioning

---------

Co-authored-by: Kurant <kuranttyka@gmail.com>

Author: hasparus

.github/workflows/ci.yml

@@ -78,7 +78,10 @@ jobs:
           --prod
 
       - name: Deploy Preview to Vercel
-        if: github.ref_name != 'main'
+        if:
+          ${{ github.event_name != 'push' && (!github.event.pull_request.head.repo.fork ||
+          (github.event_name == 'pull_request_target' &&
+          contains(github.event.pull_request.labels.*.name, 'trusted'))) }}
         run: node .github/scripts/deploy.mjs --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Debug Conditions

src/global-styles/base.css

@@ -18,13 +18,11 @@ html {
 }
 
 * {
-  @apply outline-black dark:outline-white
-  selection:bg-gray-200 selection:text-black
-  dark:selection:bg-gray-700 dark:selection:text-white;
+  @apply outline-black selection:bg-gray-200 selection:text-black dark:outline-white dark:selection:bg-gray-700 dark:selection:text-white;
 }
 
 body {
-  @apply text-gray-800 dark:text-gray-300 bg-white dark:bg-gray-900 px-0 md:px-4 pt-4 pb-20 md:pt-8 md:pb-48 relative min-h-screen;
+  @apply relative min-h-screen bg-white px-0 pb-20 pt-4 text-gray-800 dark:bg-gray-900 dark:text-gray-300 md:px-4 md:pb-48 md:pt-8;
 }
 
 body,

src/global-styles/integrations.css

@@ -7,6 +7,6 @@
   }
 
   & ol > li > p {
-    @apply inline -mx-1;
+    @apply -mx-1 inline;
   }
 }

src/global-styles/shiki.css

@@ -8,7 +8,7 @@
 
 html.dark .astro-code-themes {
   color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
+  background-color: transparent !important;
 }
 
 html.dark .astro-code-themes span {
@@ -61,14 +61,33 @@ pre.twoslash:hover .twoslash-hover {
   position: absolute;
   transform: translate(0, 1rem);
   z-index: 100;
+  width: max-content;
+  max-width: 80vw;
 
-  @apply bg-white text-gray-900 border border-gray-200 shadow-sm px-3 p-2 rounded-sm
-         dark:bg-black dark:text-gray-50 dark:border-gray-700 dark:shadow-md;
+  @apply rounded-sm border border-gray-200 bg-white p-2 px-3 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-black dark:text-gray-50 dark:shadow-md;
 
   text-align: left;
   white-space: pre-wrap;
 }
 
+@supports (anchor-name: --x) {
+  .twoslash-hover:hover {
+    anchor-name: --twoslash-hover;
+  }
+
+  .twoslash-popup-container {
+    position: fixed;
+    transform: none;
+    position-anchor: --twoslash-hover;
+    position-area: bottom;
+    position-try-fallbacks: --above;
+  }
+
+  @position-try --above {
+    position-area: top;
+  }
+}
+
 .twoslash-hover:hover > .twoslash-popup-container {
   display: block;
 }
@@ -102,150 +121,10 @@ pre .twoslash-error-line {
   @apply bg-gray-100 dark:bg-gray-800 dark:text-white;
 }
 
-/* --- Code container --- */
-
-pre .code-container {
-  overflow: auto;
-}
-
 pre code {
   white-space: pre;
   -webkit-overflow-scrolling: touch;
 }
 pre code a {
   text-decoration: none;
 }
-
-/* --- Query/Error blocks --- */
-
-pre .query {
-  margin-bottom: 10px;
-  color: #137998;
-  display: inline-block;
-}
-
-pre .error,
-pre .error-behind {
-  margin-top: 0.5em;
-  padding: 0.5em 1em;
-  width: var(--container-width);
-  white-space: pre-wrap;
-  display: block;
-}
-pre .error {
-  @apply bg-gray-100 dark:bg-gray-800 dark:text-white;
-  position: absolute;
-  border-left: 2px solid #bf1818;
-  display: flex;
-  align-items: center;
-}
-pre .error .code {
-  display: none;
-}
-pre .error-behind {
-  user-select: none;
-  visibility: transparent;
-  color: #fee;
-}
-
-/* --- Annotations --- */
-
-.tag-container {
-  position: relative;
-}
-.tag-container .twoslash-annotation {
-  position: absolute;
-  font-family: "JetBrains Mono", Menlo, Monaco, Consolas, Courier New, monospace;
-  right: -10px;
-  width: 200px;
-  color: #187abf;
-  background-color: #fcf3d9bb;
-}
-.tag-container .twoslash-annotation p {
-  text-align: left;
-  font-size: 0.8rem;
-  line-height: 0.9rem;
-}
-.tag-container .twoslash-annotation svg {
-  float: left;
-  margin-left: -44px;
-}
-.tag-container .twoslash-annotation.left {
-  right: auto;
-  left: -200px;
-}
-.tag-container .twoslash-annotation.left svg {
-  float: right;
-  margin-right: -5px;
-}
-
-/* --- Console log/warn/error --- */
-
-pre .logger {
-  display: flex;
-  align-items: center;
-  color: black;
-  padding: 6px;
-  padding-left: 8px;
-  width: calc(100% - 19px);
-  white-space: pre-wrap;
-}
-pre .logger svg {
-  margin-right: 9px;
-}
-pre .logger.error-log {
-  background-color: #fee;
-  border-left: 2px solid #bf1818;
-}
-pre .logger.warn-log {
-  background-color: #ffe;
-  border-left: 2px solid #eae662;
-}
-pre .logger.log-log {
-  background-color: #e9e9e9;
-  border-left: 2px solid #ababab;
-}
-pre .logger.log-log svg {
-  margin-left: 6px;
-  margin-right: 9px;
-}
-
-/* --- Completions --- */
-
-pre .inline-completions ul.dropdown {
-  display: inline-block;
-  position: absolute;
-  width: 240px;
-  background-color: gainsboro;
-  color: grey;
-  padding-top: 4px;
-  font-family: var(--code-font);
-  font-size: 0.8rem;
-  margin: 0;
-  padding: 0;
-  border-left: 4px solid #4b9edd;
-}
-pre .inline-completions ul.dropdown::before {
-  background-color: #4b9edd;
-  width: 2px;
-  position: absolute;
-  top: -1.2rem;
-  left: -3px;
-  content: " ";
-}
-pre .inline-completions ul.dropdown li {
-  overflow-x: hidden;
-  padding-left: 4px;
-  margin-bottom: 4px;
-}
-pre .inline-completions ul.dropdown li.deprecated {
-  text-decoration: line-through;
-}
-pre .inline-completions ul.dropdown li span.result-found {
-  color: #4b9edd;
-}
-pre .inline-completions ul.dropdown li span.result {
-  width: 100px;
-  color: black;
-  display: inline-block;
-}

src/layouts/BaseLayout.astro

@@ -25,7 +25,10 @@ interface Props {
 
 const { title, description, ogImage } = Astro.props;
 
-const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>("../../posts/**/*.mdx", { eager: true });
+const postModules = import.meta.glob<{ frontmatter: PostFrontmatter }>(
+  "../../posts/**/*.mdx",
+  { eager: true },
+);
 const posts = Object.values(postModules)
   .filter((p) => (import.meta.env.PROD ? !p.frontmatter.draft : true))
   .map((p) => ({
@@ -64,9 +67,9 @@ posts.sort((a, b) => {
     <InitColorScheme />
   </head>
   <body>
-    <div class="max-w-container mx-auto px-4">
+    <div class="mx-auto max-w-container px-4">
       <header
-        class="flex justify-between items-center -mt-2"
+        class="-mt-2 flex items-center justify-between"
         style={{ height: "37.5px" }}
       >
         <slot name="header-content">

src/lib/GrainOverlay/GrainOverlay.astro

@@ -10,6 +10,6 @@ const { opacity } = Astro.props;
 
 <div
   style={{ opacity, background: `url(${grainSvg})` }}
-  class="absolute inset-0 mix-blend-difference pointer-events-none select-none"
+  class="pointer-events-none absolute inset-0 select-none mix-blend-difference"
 >
 </div>

src/lib/Kbd.tsx

@@ -18,11 +18,11 @@ export function Kbd(props: KbdProps) {
       ref={ref}
       {...props}
       class={
-        "p-1 border border-b-2 rounded-md bg-gray-50" +
+        "rounded-md border border-b-2 bg-gray-50 p-1" +
         " dark:border-gray-700 dark:bg-gray-800" +
-        " tracking-tighter leading-none text-xs" +
+        " text-xs leading-none tracking-tighter" +
         " group-hover:border-b group-hover:shadow-[inset_0_1px_1px_0_rgba(0,0,0,0.025)] group-focus:outline" +
-        " [&[data-pressed]]:border-b [&[data-pressed]]" +
+        " [&[data-pressed]] [&[data-pressed]]:border-b" +
         (props.class ? ` ${props.class}` : "")
       }
     />

src/lib/TableOfContents/PostProgressBar.tsx

@@ -30,10 +30,10 @@ export function PostProgressBar(props: { children: JSX.Element }) {
 
   return (
     <div class="relative">
-      <div class="absolute h-full w-[2px] -left-4 rounded-sm bg-gray-100 dark:bg-gray-800 overflow-hidden">
+      <div class="absolute -left-4 h-full w-[2px] overflow-hidden rounded-sm bg-gray-100 dark:bg-gray-800">
         <div
           class={
-            "bg-gray-300 dark:bg-gray-700 absolute h-full w-full rounded-sm " +
+            "absolute h-full w-full rounded-sm bg-gray-300 dark:bg-gray-700 " +
             "-translate-y-[var(--y,100%)] transition-transform duration-300 ease-linear"
           }
           ref={progressThumb}

src/lib/color-scheme/ColorSchemeSelect.tsx

@@ -23,7 +23,7 @@
 
   &:after,
   &:before {
-    @apply text-4xl leading-none text-gray-300 font-black;
+    @apply text-4xl font-black leading-none text-gray-300;
     position: absolute;
 
     :global(.dark) & {