No commit message

upvorg · Mar 18, 2024 · 4e599cd · 4e599cd
1 parent 2a741f5
commit 4e599cd
Show file tree

Hide file tree

Showing 4 changed files with 654 additions and 652 deletions.
diff --git a/package.json b/package.json
@@ -14,9 +14,9 @@
     "gen:sw": "pnpm --filter @web/sw run build"
   },
   "dependencies": {
-    "@types/node": "^20.11.26",
-    "@types/react": "^18.2.65",
-    "@types/react-dom": "^18.2.21",
+    "@types/node": "^20.11.28",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
     "bulma": "^0.9.4",
     "bulma-list": "^1.2.0",
     "bulma-switch": "^2.0.4",
@@ -42,12 +42,12 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.8.1",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.36",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^7.3.4",
-    "postcss-preset-env": "^9.5.0",
+    "postcss-preset-env": "^9.5.2",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "sass-loader": "^13.3.3",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^5.3.10",

diff --git a/packages/index/src/components/rank-list/index.tsx b/packages/index/src/components/rank-list/index.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'wouter'
 import './index.scss'
 
 export default function RankList({ list }: { list: R.Post[] | null }) {
@@ -7,14 +8,16 @@ export default function RankList({ list }: { list: R.Post[] | null }) {
         list.length > 0 ? (
           <ul className="rank-video-list__list">
             {list.map((item, i) => (
-              <a href={item.Type == 'video' ? `/v/${item.ID}` : `/p/${item.ID}`} key={i} target="_blank">
-                <li className="rank-video-list__item">
-                  <span className="rank-video-list__item--index" data-index={i}>
-                    {i + 1}
-                  </span>
-                  <h3>{item.Title}</h3>
-                </li>
-              </a>
+              <Link href={item.Type == 'video' ? `/v/${item.ID}` : `/p/${item.ID}`}>
+                <a key={i} target="_blank">
+                  <li className="rank-video-list__item">
+                    <span className="rank-video-list__item--index" data-index={i}>
+                      {i + 1}
+                    </span>
+                    <h3>{item.Title}</h3>
+                  </li>
+                </a>
+              </Link>
             ))}
           </ul>
         ) : (

diff --git a/packages/index/src/components/video-card/index.tsx b/packages/index/src/components/video-card/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react'
 import AspectRatio from '@web/shared/components/AspectRatio'
 import { getTimeDistance } from '@web/shared/utils/date'
 import classNames from 'classnames'
+import { Link } from 'wouter'
 
 const TEXT_COVER_LENGTH = 6
 
@@ -22,9 +23,7 @@ if (!nativeLazySupported) {
           const img = container.querySelector('img')!
           img.src = img.dataset.src!
           img.onload = () => {
-            container
-              .querySelector('.upv-video-card__loading')!
-              .classList.add('upv-video-card__loading--hidden')
+            container.querySelector('.upv-video-card__loading')!.classList.add('upv-video-card__loading--hidden')
           }
           img.onerror = () => {
             container.querySelector('.upv-video-card__error')!.classList.add('upv-video-card__error--show')
@@ -46,9 +45,7 @@ export default function VideoCard({ info }: { info: R.Post }) {
       return () => {
         if ($el.current) {
           _IntersectionObserver.unobserve($el.current)
-          $el.current
-            .querySelector('.upv-video-card__loading')!
-            .classList.remove('upv-video-card__loading--hidden')
+          $el.current.querySelector('.upv-video-card__loading')!.classList.remove('upv-video-card__loading--hidden')
           $el.current.querySelector('.upv-video-card__error')!.classList.remove('upv-video-card__error--show')
         }
       }
@@ -57,36 +54,38 @@ export default function VideoCard({ info }: { info: R.Post }) {
 
   return (
     <div className="upv-video-card">
-      <a href={target} ref={$el} data-cover={info.Cover} title={info.Title}>
-        <AspectRatio ratio={3 / 4}>
-          {info.Cover && (
-            <>
-              <img
-                loading="lazy"
-                className="upv-video-card__image"
-                alt={info.Title}
-                title={info.Title}
-                data-src={info.Cover}
-                src={nativeLazySupported ? info.Cover : undefined}
-              />
-              {!nativeLazySupported && [
-                <div className="upv-video-card__loading">LOADING</div>,
-                <div className="upv-video-card__error">ERROR</div>,
-              ]}
-            </>
-          )}
+      <Link href={target}>
+        <a ref={$el} data-cover={info.Cover} title={info.Title}>
+          <AspectRatio ratio={3 / 4}>
+            {info.Cover && (
+              <>
+                <img
+                  loading="lazy"
+                  className="upv-video-card__image"
+                  alt={info.Title}
+                  title={info.Title}
+                  data-src={info.Cover}
+                  src={nativeLazySupported ? info.Cover : undefined}
+                />
+                {!nativeLazySupported && [
+                  <div className="upv-video-card__loading">LOADING</div>,
+                  <div className="upv-video-card__error">ERROR</div>,
+                ]}
+              </>
+            )}
 
-          <div
-            className={classNames('upv-video-card__nocover', {
-              'upv-video-card__nocover--show': !info.Cover,
-            })}
-          >
-            <span className={classNames({ large: info.Title.length <= 4 })}>
-              {info.Title.slice(0, TEXT_COVER_LENGTH)}
-            </span>
-          </div>
-        </AspectRatio>
-      </a>
+            <div
+              className={classNames('upv-video-card__nocover', {
+                'upv-video-card__nocover--show': !info.Cover,
+              })}
+            >
+              <span className={classNames({ large: info.Title.length <= 4 })}>
+                {info.Title.slice(0, TEXT_COVER_LENGTH)}
+              </span>
+            </div>
+          </AspectRatio>
+        </a>
+      </Link>
       <div className="upv-video-card__content">
         <div className="upv-video-card__content__title">{info.Title}</div>
         <div className="upv-video-card__content__author">