chore: update upstream dev

Signed-off-by: Innei <i@innei.in>
Innei · Apr 14, 2024 · d015c00 · d015c00
1 parent 16b43fb
commit d015c00
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,4 +40,5 @@ next-env.d.ts
 
 src/app/dev
 
-/public/static
+/public/static
+/public/pusher-sw.js
diff --git a/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx b/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx
@@ -56,9 +56,19 @@ export const ShikiHighLighterWrapper = forwardRef<
     if ($elScrollHeight >= halfWindowHeight) {
       setIsOverflow(true)
 
-      $el.querySelector('.highlighted')?.scrollIntoView({
-        block: 'center',
-      })
+      const $hightlighted = $el.querySelector('.highlighted')
+      if ($hightlighted) {
+        const lineHeight = parseInt(
+          getComputedStyle($hightlighted).height || '0',
+          10,
+        )
+        const $code = $el.querySelector('pre > code')!
+        const childIndexInParent = Array.from($code.children).indexOf(
+          $hightlighted,
+        )
+
+        $el.scrollTop = lineHeight * childIndexInParent - 30
+      }
     } else {
       setIsOverflow(false)
     }
@@ -123,13 +133,15 @@ export const ShikiHighLighterWrapper = forwardRef<
                   : '1rem',
               } as any
             }
-            dangerouslySetInnerHTML={
-              props.renderedHTML
-                ? ({
-                    __html: props.renderedHTML,
-                  } as any)
-                : undefined
-            }
+            dangerouslySetInnerHTML={useMemo(
+              () =>
+                props.renderedHTML
+                  ? ({
+                      __html: props.renderedHTML,
+                    } as any)
+                  : undefined,
+              [props.renderedHTML],
+            )}
           >
             {props.children}
           </div>

diff --git a/src/components/ui/link-card/LinkCard.tsx b/src/components/ui/link-card/LinkCard.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
-import clsx from 'clsx'
 import { m, useMotionTemplate, useMotionValue } from 'framer-motion'
 import Link from 'next/link'
 import RemoveMarkdown from 'remove-markdown'
@@ -30,17 +29,23 @@ export interface LinkCardProps {
   className?: string
 
   fallbackUrl?: string
+  placeholder: ReactNode
 }
 
-export const LinkCard = (props: LinkCardProps) => {
+export const LinkCard = (props: Omit<LinkCardProps, 'placeholder'>) => {
   const isClient = useIsClientTransition()
 
-  const placeholder = <LinkCardSkeleton />
+  const placeholder = (
+    <LinkCardSkeleton
+      className={props.source === 'tmdb' ? '!w-screen max-w-full' : ''}
+    />
+  )
+
   if (!isClient) return placeholder
 
   return (
     <LazyLoad placeholder={placeholder}>
-      <LinkCardImpl {...props} />
+      <LinkCardImpl {...props} placeholder={placeholder} />
     </LazyLoad>
   )
 }
@@ -150,11 +155,23 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
   const LinkComponent = source === 'self' ? Link : 'a'
 
   const classNames = cardInfo?.classNames || {}
+
+  if (loading) {
+    return (
+      <a
+        ref={ref}
+        href={fullUrl}
+        target={source !== 'self' ? '_blank' : '_self'}
+        rel="noreferrer"
+      >
+        {props.placeholder}
+      </a>
+    )
+  }
   return (
     <LinkComponent
       href={fullUrl}
       target={source !== 'self' ? '_blank' : '_self'}
-      ref={ref}
       className={clsxm(
         styles['card-grid'],
         (loading || isError) && styles['skeleton'],
@@ -210,9 +227,11 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
   )
 }
 
-const LinkCardSkeleton = () => {
+const LinkCardSkeleton: FC<{
+  className?: string
+}> = ({ className }) => {
   return (
-    <span className={clsx(styles['card-grid'], styles['skeleton'])}>
+    <span className={clsxm(styles['card-grid'], styles['skeleton'], className)}>
       <span className={styles['contents']}>
         <span className={styles['title']} />
         <span className={styles['desc']} />