@bbki.ng/site 0.0.17

package/src/components/video_player/index.tsx

@@ -0,0 +1,81 @@
+import React, { ReactEventHandler, useEffect, useState } from "react";
+import classnames from "classnames";
+import { useVideoControls, useVideoEleHeight, useVideoProgress } from "@/hooks";
+import { BlurCover, ProgressBar } from "@/components";
+import { BgColors, TextColors } from "@/types/color";
+import { AspectRatioBox } from "@/components/aspect_ratio_box";
+import { VIDEO_TAG_ASPECT_RATIO } from "@/constants";
+
+type videoPlayProps = {
+  src: string;
+  className?: string;
+};
+
+export const VideoPlayer = (props: videoPlayProps) => {
+  const { src, className } = props;
+  const [hovered, setHovered] = useState(false);
+  const [showPlayer, setShowPlayer] = useState(false);
+  const { videoRef, toggle, isPlay } = useVideoControls();
+  const { progress, onTimeUpdate } = useVideoProgress();
+  const VideoHeight = useVideoEleHeight(videoRef);
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+    videoRef.current.load();
+  }, []);
+
+  const onPlayerReady: ReactEventHandler = () => {
+    setShowPlayer(true);
+  };
+
+  const cls = classnames({ hidden: !showPlayer });
+
+  return (
+    <div
+      className={classnames(
+        "flex flex-col relative cursor-pointer",
+        className,
+        BgColors.LIGHT_GRAY
+      )}
+      onClick={async () => {
+        await toggle();
+        if (!isPlay) {
+          setHovered(false);
+        }
+      }}
+      onMouseEnter={() => {
+        setHovered(true);
+      }}
+      onMouseLeave={() => {
+        setHovered(false);
+      }}
+    >
+      <AspectRatioBox
+        width="100%"
+        hwRatio={VIDEO_TAG_ASPECT_RATIO}
+        className={BgColors.LIGHT_GRAY}
+      >
+        <video
+          playsInline
+          ref={videoRef}
+          src={src}
+          className={cls}
+          onTimeUpdate={onTimeUpdate}
+          onCanPlayThrough={onPlayerReady}
+        />
+      </AspectRatioBox>
+      {hovered && showPlayer && (
+        <BlurCover
+          textColor={isPlay ? TextColors.RED : TextColors.BLUE}
+          height={VideoHeight}
+          visibleOnHover
+        >
+          {isPlay ? "pause" : "play"}
+        </BlurCover>
+      )}
+      {showPlayer && <ProgressBar progress={progress} />}
+    </div>
+  );
+};

package/src/components/with_wrapper/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { FunctionComponent } from "react";
+import { ArticlePage } from "@/components/article";
+
+export const withArticleWrapper =
+  (Component: FunctionComponent<any>): FunctionComponent<any> =>
+  (props: any) => {
+    return (
+      <ArticlePage {...props}>
+        <Component />
+      </ArticlePage>
+    );
+  };

package/src/constants/cusdis.ts

@@ -0,0 +1,6 @@
+export const CUSDIS_ATTRS = {
+  host: "https://bbcusdis.vercel.app",
+  appId: "f607ddca-f13d-4a91-8203-227f062f125f",
+};
+
+export const CUSDIS_OFFICIAL_SITE_ADDRESS = "https://cusdis.com/";

package/src/constants/index.ts

@@ -0,0 +1,16 @@
+import { createClient } from "@supabase/supabase-js";
+
+export { PHOTO_PROJECTS } from "./photo_projects";
+export { VIDEO_LOGS, VIDEO_TAG_ASPECT_RATIO } from "./video_logs";
+export { ROUTES, ROUTE_NAME, GITHUB_REPO_ADDRESS } from "./routes";
+export const DEFAULT_DELAY = 200;
+export const SUPABASE: {
+  ANNO: string;
+  URL: string;
+  BB_KING_ID: string;
+} = {
+  ANNO: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN2eHFtdXNmYXh3dXl2eXV1ZWNvIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDQ4MjkwNTEsImV4cCI6MTk2MDQwNTA1MX0.lg90OVR7s6tjbDamVaI9FR2M2fc6OVfsfGd4j9MXu3M",
+  URL: "https://cvxqmusfaxwuyvyuueco.supabase.co",
+  BB_KING_ID: "e6795b1d-7ee0-4afe-be63-796670848175",
+};
+export const supabase = createClient(SUPABASE.URL, SUPABASE.ANNO);

package/src/constants/photo_projects.ts

@@ -0,0 +1,54 @@
+import { OSS_PHOTOS } from "@/constants/photos";
+import { PhotoProject } from "@/types/photo";
+
+export const PHOTO_PROJECTS: PhotoProject[] = [
+  {
+    name: "过去的来意",
+    description: '"往事越千年"',
+    images: [OSS_PHOTOS.quyuan, OSS_PHOTOS.weapons, OSS_PHOTOS.stone],
+  },
+  {
+    name: "敬县城",
+    description: '"早秋惊落叶，飘零似客心。翻飞未肯下，犹言忆故林。"',
+    images: [
+      OSS_PHOTOS.motorcycle,
+      OSS_PHOTOS.cycle,
+      OSS_PHOTOS.corner,
+      OSS_PHOTOS.streetGames,
+      OSS_PHOTOS.localDishes,
+    ],
+  },
+  {
+    name: "海底的家",
+    description:
+      '"河流用一生梳理 \\ 地球的表情 \\ 沿岸收集人類的喜怒哀樂 \\ 檔案堆滿了海底的家"',
+    images: [
+      OSS_PHOTOS.playWithWater,
+      OSS_PHOTOS.shopping,
+      OSS_PHOTOS.chess,
+      OSS_PHOTOS.player,
+      // OSS_PHOTOS.swimmer,
+      OSS_PHOTOS.players,
+      // OSS_PHOTOS.dragonRiver,
+      // OSS_PHOTOS.riverAndBoats,
+      OSS_PHOTOS.riverSide,
+      OSS_PHOTOS.quilt,
+      // OSS_PHOTOS.fishing,
+      OSS_PHOTOS.waterLine,
+      OSS_PHOTOS.bridge,
+      OSS_PHOTOS.building,
+      OSS_PHOTOS.smoking,
+      // OSS_PHOTOS.jzBridge,
+    ],
+  },
+  // {
+  //   name: "光前",
+  //   description: "城中村，个人深圳经历出入口。",
+  //   images: [OSS_PHOTOS.oldMan, OSS_PHOTOS.oldWomen, OSS_PHOTOS.littleChild],
+  // },
+  // {
+  //   name: "三百零一",
+  //   description: "陋室光影",
+  //   images: [OSS_PHOTOS.phone, OSS_PHOTOS.chair],
+  // },
+];

package/src/constants/photos.ts

@@ -0,0 +1,270 @@
+import { BgColors } from "@/types/color";
+import { ossProcessType } from "@/types/oss";
+
+export const OSS_PHOTOS = {
+  playWithWater: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/DSCF2203-1.jpg",
+    avgColor: BgColors.LIGHT_GRAY,
+    processType: ossProcessType.PROG,
+    width: 1879,
+    height: 1238,
+  },
+  shopping: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/shopping.jpg",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 1746,
+    height: 1746,
+  },
+  quyuan: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/from-the-past/quyuan.webp",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 4126,
+    height: 6262,
+  },
+  stone: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/from-the-past/stone.webp",
+    avgColor: BgColors.LIGHT_GRAY,
+    renderedWidth: 300,
+    width: 5536,
+    height: 4126,
+  },
+  weapons: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/from-the-past/weapon.webp",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 6155,
+    height: 4126,
+  },
+  roof: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/DSCF1807.RAF.jpg",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 6262,
+    height: 3278,
+  },
+  chess: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/checkmate.webp",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 6262,
+    height: 4126,
+  },
+  swimmer: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/swimmer.jpg",
+    avgColor: BgColors.LIGHT_GRAY,
+    width: 6081,
+    height: 4126,
+  },
+  player: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/player-min.webp",
+    width: 2692,
+    height: 3546,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  players: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/players.jpg",
+    width: 3368,
+    height: 2344,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  fishing: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2705047873.webp",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2705047873.webp?x-oss-process=style/thumbnail",
+    width: 1080,
+    height: 720,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  dragonRiver: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/164-2.jpg",
+    width: 4021,
+    height: 4021,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  waterLine: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2704851973.webp",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2704851973.webp?x-oss-process=style/thumbnail",
+    renderedWidth: 500,
+    width: 1080,
+    height: 720,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  phone: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/301/DSCF1355.RAF.min.jpg",
+    width: 924,
+    height: 619,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  riverAndBoats: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/x2705749244.jpg",
+    renderedWidth: 800,
+    width: 1080,
+    height: 830,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  riverSide: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/x2705752731.jpg",
+    renderedWidth: 400,
+    width: 1080,
+    height: 720,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  quilt: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/x2710816755.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/x2710816755.jpg?x-oss-process=style/thumbnail",
+    renderedWidth: 490,
+    width: 1080,
+    height: 832,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  bridge: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2705529760.webp",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/p2705529760.webp?x-oss-process=style/thumbnail",
+    renderedWidth: 450,
+    width: 1080,
+    height: 726,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  building: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20211025194518.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20211025194518.jpg?x-oss-process=style/thumbnail",
+    width: 3019,
+    height: 2293,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  chair: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/301/room-301.jpg",
+    renderedWidth: 490,
+    width: 970,
+    height: 745,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  smoking: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/DSCF1383.jpg",
+    width: 2023,
+    height: 2670,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  jzBridge: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/xiang-jiang-river/DSCF1401.jpg",
+    width: 5980,
+    height: 3699,
+    renderedWidth: 700,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  motorcycle: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/4688FF3F-8EF5-4F63-B726-9AC275C1A97E-50268-000009856F7D5885.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/4688FF3F-8EF5-4F63-B726-9AC275C1A97E-50268-000009856F7D5885.jpg?x-oss-process=style/thumbnail",
+    width: 1306,
+    height: 821,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  cycle: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/3922C86B-79D5-455F-9FA8-7EB405CE95A6-38852-000007863DB50E30.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/3922C86B-79D5-455F-9FA8-7EB405CE95A6-38852-000007863DB50E30.jpg?x-oss-process=style/thumbnail",
+    renderedWidth: 400,
+    width: 1501,
+    height: 1144,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  streetGames: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/B3AACBCA-807B-44C0-9CA2-E1F7E0C00C93_black.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/B3AACBCA-807B-44C0-9CA2-E1F7E0C00C93_black.jpg?x-oss-process=style/thumbnail",
+    width: 898,
+    height: 729,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  corner: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/E2FDA467-AD6D-4410-9B50-66E1624C13D6-38852-0000078630EDA7C4.jpg",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/E2FDA467-AD6D-4410-9B50-66E1624C13D6-38852-0000078630EDA7C4.jpg?x-oss-process=style/thumbnail",
+    renderedWidth: 500,
+    width: 1776,
+    height: 1184,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  localDishes: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/IMG_3869.JPG",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/county-town/IMG_3869.JPG?x-oss-process=style/thumbnail",
+    renderedWidth: 490,
+    width: 897,
+    height: 720,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  oldMan: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_1844.jpg?x-oss-process=style/webp",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_1844.jpg?x-oss-process=style/thumbnail",
+    renderedWidth: 400,
+    width: 2673,
+    height: 3564,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  oldWomen: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_E1668.JPG?x-oss-process=style/webp",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_E1668.JPG?x-oss-process=style/thumbnail",
+    width: 1325,
+    height: 1960,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  littleChild: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_E1677.JPG",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/before-the-light/IMG_E1677.JPG?x-oss-process=style/thumbnail",
+    width: 2801,
+    renderedWidth: 600,
+    height: 2801,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  logoPreview: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/favicon.png",
+    width: 640,
+    height: 640,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  validLogoExample: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/Logo-with-image.png",
+    width: 1092,
+    height: 1386,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  logoVariants: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/valid-variations.png",
+    width: 2800,
+    height: 640,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  badLogoExamples: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/Bad-Examples.png",
+    width: 2801,
+    height: 1362,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  logoColors: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/colors.png",
+    thumbnailSrc:
+      "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/colors.png?x-oss-process=style/thumbnail",
+    width: 2466,
+    height: 640,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+  logoExcludesZone: {
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/image/illustration/illustration/Logo-Clear-Area.png",
+    width: 1000,
+    height: 1000,
+    avgColor: BgColors.LIGHT_GRAY,
+  },
+};
+
+export const PHOTOS_FOR_DEMO = [
+  OSS_PHOTOS.riverSide,
+  OSS_PHOTOS.stone,
+  OSS_PHOTOS.chair,
+  OSS_PHOTOS.weapons,
+];

package/src/constants/routes.ts

@@ -0,0 +1,24 @@
+export const ROUTES = {
+  INDEX: "/",
+  CONTENT: "/blog",
+  HELP: "/blog/说明书",
+  TAGS: "/tags",
+  BLOG: "/blog",
+};
+
+export const ROUTE_NAME = {
+  [ROUTES.CONTENT]: "目录",
+  [ROUTES.BLOG]: "文章",
+  unknown: "未知",
+};
+
+export const GITHUB_REPO_ADDRESS = "https://github.com/bbbottle/bbki.ng";
+export const OSS_ADDRESS = "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com";
+export const API_ENDPOINT = "https://api.bbki.ng";
+export const API = {
+  PROJECTS: "projects",
+  UPLOAD_IMG: "upload",
+  MOVIES: "movies",
+  IMAGES: "images",
+  BOOKS: "books",
+};

package/src/constants/video_logs.ts

@@ -0,0 +1,16 @@
+export const VIDEO_LOGS = [
+  {
+    name: "2021-09-10",
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/video/2021-09-10",
+  },
+  {
+    name: "2020-09-18",
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/video/2021-09-18.mov",
+  },
+  {
+    name: "2020-09-28",
+    src: "https://zjh-im-res.oss-cn-shenzhen.aliyuncs.com/video/2021-09-28-4k30H.mov",
+  },
+];
+
+export const VIDEO_TAG_ASPECT_RATIO = 0.5624910522548318;

package/src/demo/DemoBox.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+
+export const DemoBox = (props: {
+  children?: ReactNode;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <div
+      className="grid place-items-center md:p-32 border-gray-400 aspect-square border border-dotted"
+      style={props.style || {}}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/demo/ImgDemo.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { Button, Img, ImgProps } from "@bbki.ng/components";
+import { PHOTOS_FOR_DEMO } from "@/constants/photos";
+import { DemoBox } from "@/demo/DemoBox";
+import { Photo } from "@/types/photo";
+
+const ImgWrapper = (props: ImgProps) => {
+  return (
+    <DemoBox>
+      <Img {...props} />
+    </DemoBox>
+  );
+};
+
+export const ImgDemo = () => {
+  const [count, setCount] = useState(0);
+  const refresh = () => {
+    setCount(count + 1);
+  };
+
+  const images: Photo[] = PHOTOS_FOR_DEMO;
+
+  return (
+    <div>
+      <ImgWrapper
+        {...images[count % images.length]}
+        key={count}
+      />
+      <Button onClick={refresh} className="mx-32 my-16">
+        刷新
+      </Button>
+    </div>
+  );
+};

package/src/demo/SpinnerDemo.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { DemoBox } from "@/demo/DemoBox.js";
+import { Spinner } from "@/components/Spinner";
+
+export const SpinnerDemo = () => {
+  return (
+    <DemoBox style={{ background: "#dc5530", borderColor: "white" }}>
+      <Spinner
+        disableDotIndicator
+        offset={0}
+        length={0.4}
+        color={[255, 255, 255, 1]}
+        multiplier={20000}
+      />
+    </DemoBox>
+  );
+};

package/src/global/mdx.d.ts

@@ -0,0 +1,8 @@
+declare module "*.mdx" {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+  export const meta: {
+    tags?: string[];
+    title: string;
+  };
+}

package/src/global_loading_state_provider.tsx

@@ -0,0 +1,27 @@
+import React, {
+  createContext,
+  ReactNode,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from "react";
+
+type LoadingContext = {
+  isLoading: boolean;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+};
+
+export const GlobalLoadingContext = createContext<LoadingContext>({
+  isLoading: false,
+  setIsLoading: () => false,
+});
+
+export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {props.children}
+    </GlobalLoadingContext.Provider>
+  );
+};

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+import { buildSimpleApiHooks } from "@/utils";
+import { API } from "@/constants/routes";
+
+export { usePaths } from "./use_paths";
+export { useRouteName } from "./use_route_name";
+export { useImgLoading } from "./use_img_loading";
+
+export {
+  useVideoControls,
+  useVideoProgress,
+  useVideoEleHeight,
+} from "./use_video_controls";
+
+export const useMovies = buildSimpleApiHooks(API.MOVIES, "movies");
+export const useBooks = buildSimpleApiHooks(API.BOOKS, "books");

package/src/hooks/useScrollToTop.ts

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+export const useScrollToTop = (excludePath = "") => {
+  const { pathname } = useLocation();
+
+  const resetScroll = () => {
+    if (excludePath && pathname.includes(excludePath)) {
+      return;
+    }
+    setTimeout(() => {
+      window.scrollTo(0, 0);
+    }, 0);
+  };
+
+  useEffect(() => {
+    window.addEventListener("popstate", resetScroll);
+    return () => {
+      window.removeEventListener("popstate", resetScroll);
+    };
+  }, []);
+
+  useEffect(resetScroll, [pathname]);
+};

package/src/hooks/useTransitionCls.ts

@@ -0,0 +1,36 @@
+import React, { useEffect } from "react";
+import classnames from "classnames";
+
+interface TransOption {
+  originCls?: string;
+  opacity?: boolean;
+  offset?: boolean;
+  blur?: boolean;
+}
+
+const defaultOpt = {
+  originCls: "",
+  opacity: true,
+  offset: true,
+  blur: true,
+};
+
+export const useTransitionCls = (options: TransOption = defaultOpt) => {
+  const [visible, setVisible] = React.useState(false);
+  const { originCls, opacity, offset, blur } = options;
+
+  const cls = classnames(originCls, "transition-all", "duration-500", {
+    "blur-sm": !visible && blur,
+    "blur-none": visible && blur,
+    "translate-y-0": visible && offset,
+    "translate-y-8": !visible && offset,
+    "opacity-10": !visible && opacity,
+    "opacity-100": visible && opacity,
+  });
+
+  useEffect(() => {
+    setVisible(true);
+  }, []);
+
+  return cls;
+};