update code components

Author: davemooreuws

src/components/code/CodeContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const CodeContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
-    <div className="w-full">
+    <div className="w-full max-w-full">
       <div
         tabIndex={0}
         className={

src/components/code/CodeSwitcher.tsx

@@ -3,21 +3,25 @@ import { highlight, RawCode } from 'codehike/code'
 import CodeContainer from './CodeContainer'
 import { CodeSwitcherSelect } from './CodeSwitcherSelect'
 import CODE_THEME from './theme'
-import { HandlerProps } from './Pre'
+import Pre, { HandlerProps } from './Pre'
 
 export async function CodeSwitcher({
   code,
   ...props
-}: { code: RawCode[]; showPanel?: boolean } & HandlerProps) {
+}: {
+  code: RawCode[]
+  showPanel?: boolean
+  className?: string
+} & HandlerProps) {
   const highlighted = await Promise.all(
     code.map((codeblock) => highlight(codeblock, CODE_THEME)),
   )
 
-  console.log(highlighted)
-
   return (
     <CodeContainer>
-      <Suspense fallback={null}>
+      <Suspense
+        fallback={<Pre highlighted={highlighted[0]} {...props} showPanel />}
+      >
         <CodeSwitcherSelect highlighted={highlighted} {...props} />
       </Suspense>
     </CodeContainer>

src/components/code/CodeSwitcherSelect.tsx

@@ -30,6 +30,7 @@ export function CodeSwitcherSelect({
   ...props
 }: {
   highlighted: HighlightedCode[]
+  className?: string
   showPanel?: boolean
 } & HandlerProps) {
   const { currentLanguage, setCurrentLanguage } = useLang()
@@ -51,7 +52,13 @@ export function CodeSwitcherSelect({
     <>
       {showPanel && (
         <>
-          <Select value={selectedLang} onValueChange={setCurrentLanguage}>
+          <Select
+            value={selectedLang}
+            onValueChange={(lang) => {
+              // This is necessary to fix a ui update delay causing 200ms lag
+              setTimeout(() => setCurrentLanguage(lang as LanguageId), 0)
+            }}
+          >
             <SelectTrigger
               aria-label="Switch code language"
               className="absolute right-20 top-1.5 hidden h-8 w-[120px] bg-white/5 text-2xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5 md:flex"

src/components/code/CodeWithTabs.tsx

@@ -7,13 +7,8 @@ import Pre from './Pre'
 import CodeContainer from './CodeContainer'
 import CODE_THEME from './theme'
 
-export interface CodeTabsProps extends React.PropsWithChildren {
-  title?: string
-  tabs: RawCode[]
-}
-
 const Schema = Block.extend({ tabs: z.array(CodeBlock) })
-export async function CodeWithTabs(props: CodeTabsProps) {
+export async function CodeWithTabs(props: unknown) {
   const { tabs } = parseProps(props, Schema)
   return <CodeTabs tabs={tabs} />
 }
@@ -46,11 +41,7 @@ export async function CodeTabs(props: { tabs: RawCode[] }) {
           >
             <Pre
               highlighted={highlighted[i]}
-              // check meta exists and has a file extension
-              showPanel={
-                !!highlighted[i].meta &&
-                highlighted[i].meta.split('.').length > 1
-              }
+              showPanel={!!highlighted[i].meta}
             />
           </TabsContent>
         ))}

src/components/code/Pre.tsx

@@ -9,6 +9,8 @@ import {
   collapseContent,
   collapseTrigger,
 } from './annotations/collapse'
+import { tokenTransitions } from './annotations/token-transitions'
+import { cn } from '@/lib/utils'
 
 export interface HandlerProps {
   enableTransitions?: boolean
@@ -17,27 +19,22 @@ export interface HandlerProps {
 type Props = {
   highlighted: HighlightedCode
   showPanel?: boolean
+  className?: string
 } & HandlerProps
 
 const Pre: React.FC<Props> = ({
   highlighted,
   showPanel,
   enableTransitions,
+  className,
 }) => {
   const fileName = highlighted.meta
 
-  const handlers = [
-    callout,
-    className,
-    fold,
-    collapse,
-    collapseTrigger,
-    collapseContent,
-  ]
+  let handlers = [callout, fold, collapse, collapseTrigger, collapseContent]
   // TODO: Fix transitions, they currently break colours in the code when switching languages
-  // if (enableTransitions) {
-  //   handlers = [...handlers, tokenTransitions]
-  // }
+  if (enableTransitions) {
+    handlers = [...handlers, tokenTransitions]
+  }
 
   return (
     <>
@@ -53,7 +50,7 @@ const Pre: React.FC<Props> = ({
       <CodeHikePre
         code={highlighted}
         handlers={handlers}
-        className="overflow-auto overscroll-x-contain p-4"
+        className={cn('overflow-auto overscroll-x-contain p-4', className)}
         style={{
           ...highlighted.style,
           fontSize: '0.875rem',

src/components/code/annotations/token-transitions.client.tsx

@@ -43,7 +43,7 @@ export class SmoothPre extends React.Component<CustomPreProps> {
         duration: options.duration * MAX_TRANSITION_DURATION,
         delay: options.delay * MAX_TRANSITION_DURATION,
         easing: options.easing,
-        fill: 'both',
+        fill: 'backwards',
       })
     })
   }

src/hooks/useLang.ts

@@ -1,4 +1,5 @@
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
+import { useCallback } from 'react'
 
 export type LanguageId =
   | 'javascript'
@@ -26,36 +27,34 @@ const languages = ['javascript', 'python', 'go', 'typescript', 'dart']
 
 const useLang = () => {
   const searchParams = useSearchParams()
-  const router = useRouter()
-  const pathname = usePathname()
 
   const queryParamLang = searchParams.get('lang') as LanguageId
 
   const currentLanguage = languages.includes(queryParamLang)
     ? queryParamLang
     : languages[0]
 
-  const setLanguage = (id: LanguageId) => {
-    // Recommended to use the Link component <Link href={`?lang=${id}`} scroll={false} />
-    // Apparently this nonsense is necessary to update the URL.
-    //  See: https://github.com/vercel/next.js/discussions/47583
-    const currentParams = new URLSearchParams(
-      Array.from(searchParams.entries()),
-    )
+  const setLanguage = useCallback(
+    (id: LanguageId) => {
+      // Apparently this nonsense is necessary to update the URL.
+      //  See: https://github.com/vercel/next.js/discussions/47583
+      const currentParams = new URLSearchParams(
+        Array.from(searchParams.entries()),
+      )
 
-    if (!id) {
-      currentParams.delete('lang')
-    } else {
-      currentParams.set('lang', id)
-    }
+      if (!id) {
+        currentParams.delete('lang')
+      } else {
+        currentParams.set('lang', id)
+      }
 
-    const search = currentParams.toString()
-    const query = search ? `?${search}` : ''
-    router.push(`${pathname}${query}`, {
-      // Don't return to the top of the page
-      scroll: false,
-    })
-  }
+      const search = currentParams.toString()
+      const query = search ? `?${search}` : ''
+
+      window.history.pushState(null, '', query)
+    },
+    [searchParams],
+  )
 
   return {
     languages,