Merge pull request #449 from code-hike/next

Update website

Author: pomber

apps/web/components/blocks-to-context.tsx

@@ -38,10 +38,12 @@ export function WithTooltip({
     ? "p-0 [&>*]:my-0 border-none overflow-auto rounded-none"
     : ""
   return (
-    <TooltipProvider>
+    <TooltipProvider delayDuration={100}>
       <Tooltip>
-        <TooltipTrigger className="underline decoration-dotted underline-offset-4 cursor-help">
-          {children}
+        <TooltipTrigger asChild>
+          <span className="underline decoration-dotted underline-offset-4 cursor-help">
+            {children}
+          </span>
         </TooltipTrigger>
         <TooltipContent className={className}>{block?.children}</TooltipContent>
       </Tooltip>

apps/web/content/blog/build-time-components.mdx

@@ -229,7 +229,7 @@ If you didn't know anything about the build process, your first thought might be
 
 Let's assume we already have a <WithTooltip name="one">_`async function scrape(url)`_</WithTooltip> that given a URL it fetches the HTML, finds the open graph image tag, and returns the `content` attribute, which is the URL of the image we want.
 
-We also have a <WithTooltip name="two">_`function LinkWithCard({ href, children, image })`_</WithTooltip> that renders a link with a hover card that shows the image (I'm using [shadcn's Hover Card](https://ui.shadcn.com/docs/components/hover-card)).
+We also have a <WithTooltip name="two">_`function LinkWithCard({ href, children, image })`_</WithTooltip> that renders a link with a hover card that shows the image.
 
 ## !one
 

apps/web/content/blog/fine-grained/scrolly.tsx

@@ -74,7 +74,7 @@ function Rich(props: ContentProps) {
         />
       </div>
       <div
-        className="flex-1 min-w-0 relative flex flex-col gap-[calc(100vh-7rem)]"
+        className="flex-1 min-w-0 flex flex-col gap-[calc(100vh-7rem)]"
         style={{ paddingTop: 32, paddingBottom: stickerHeight }}
       >
         {blocks.map((step, i) => (
@@ -90,7 +90,7 @@ function StepMessage({ step, index }: { step: Step; index: number }) {
     <Selectable
       index={index}
       selectOn={["scroll"]}
-      className="data-[selected=true]:opacity-100 opacity-50 transition-opacity duration-300 border border-[var(--ch-23)] rounded bg-[var(--ch-22)] px-4 mx-12 prose-h3:mt-4"
+      className="z-10 data-[selected=true]:opacity-100 opacity-50 transition-opacity duration-300 border border-[var(--ch-23)] rounded bg-[var(--ch-22)] px-4 mx-12 prose-h3:mt-4"
     >
       {step.children}
       {step.after?.children}