Merge pull request #448 from code-hike/next

Update website

Author: pomber

apps/web/app/layout.tsx

@@ -29,7 +29,7 @@ export const metadata: Metadata = {
   title: "Code Hike",
   description:
     "Use Markdown and React to build rich content websites. Documentation, tutorials, blogs, videos, interactive walkthroughs, and more.",
-  metadataBase: new URL("https://codehike.org"),
+  // metadataBase: new URL("https://codehike.org"),
   openGraph: {
     title: "Code Hike",
     images: `https://codehike.org/codehike.png`,

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

@@ -0,0 +1,50 @@
+"use client"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import React from "react"
+
+const BlocksContext = React.createContext<any>(null)
+
+export function BlocksToContext({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode
+  rest: any
+}) {
+  return (
+    <BlocksContext.Provider value={rest}>{children}</BlocksContext.Provider>
+  )
+}
+
+export function useBlocksContext(name: string) {
+  return React.useContext(BlocksContext)[name]
+}
+
+export function WithTooltip({
+  children,
+  name,
+}: {
+  children: React.ReactNode
+  name: string
+}) {
+  const block = useBlocksContext(name)
+  const className = block.isCode
+    ? "p-0 [&>*]:my-0 border-none overflow-auto rounded-none"
+    : ""
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="underline decoration-dotted underline-offset-4 cursor-help">
+          {children}
+        </TooltipTrigger>
+        <TooltipContent className={className}>{block?.children}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

apps/web/components/code.tsx

@@ -26,7 +26,13 @@ import { tooltip } from "./annotations/tooltip"
 
 export async function InlineCode({ codeblock }: { codeblock: RawCode }) {
   const highlighted = await highlight(codeblock, theme)
-  return <Inline code={highlighted} style={highlighted.style} />
+  return (
+    <Inline
+      code={highlighted}
+      style={highlighted.style}
+      className="selection:bg-editor-selectionBackground"
+    />
+  )
 }
 
 export async function Code({

apps/web/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border border-zinc-200 bg-white p-4 text-zinc-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }