@bbki.ng/site 1.1.28 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.2.1
+
+## 1.2.0
+
 ## 1.1.28
 
 ## 1.1.27

package/dev-dist/workbox-baccbcc1.js

@@ -832,7 +832,7 @@ define(["exports"], function (exports) {
     }
     /**
      * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
-     * method name ('GET', etc.) to an array of all the corresponding `Route`
+     * method title ('GET', etc.) to an array of all the corresponding `Route`
      * instances that are registered.
      */
 
@@ -1958,7 +1958,7 @@ define(["exports"], function (exports) {
         url,
         timestamp,
         cacheName: this._cacheName,
-        // Creating an ID from the URL and cache name won't be necessary once
+        // Creating an ID from the URL and cache title won't be necessary once
         // Edge switches to Chromium and all browsers we support work with
         // array keyPaths.
         id: this._getId(url),
@@ -2055,7 +2055,7 @@ define(["exports"], function (exports) {
      */
 
     _getId(url) {
-      // Creating an ID from the URL and cache name won't be necessary once
+      // Creating an ID from the URL and cache title won't be necessary once
       // Edge switches to Chromium and all browsers we support work with
       // array keyPaths.
       return this._cacheName + "|" + normalizeURL(url);
@@ -2276,7 +2276,7 @@ define(["exports"], function (exports) {
    * It can only be used with `workbox-strategy` instances that have a
    * [custom `cacheName` property set](/web/tools/workbox/guides/configure-workbox#custom_cache_names_in_strategies).
    * In other words, it can't be used to expire entries in strategy that uses the
-   * default runtime cache name.
+   * default runtime cache title.
    *
    * Whenever a cached response is used or updated, this plugin will look
    * at the associated cache and remove any old or extra responses.
@@ -2435,7 +2435,7 @@ define(["exports"], function (exports) {
     }
     /**
      * A simple helper method to return a CacheExpiration instance for a given
-     * cache name.
+     * cache title.
      *
      * @param {string} cacheName
      * @return {CacheExpiration}
@@ -2523,7 +2523,7 @@ define(["exports"], function (exports) {
      * metadata is also cleanly removed and open IndexedDB instances are deleted.
      *
      * Note that if you're *not* using cache expiration for a given cache, calling
-     * `caches.delete()` and passing in the cache's name should be sufficient.
+     * `caches.delete()` and passing in the cache's title should be sufficient.
      * There is no Workbox-specific method needed for cleanup in that case.
      */
 
@@ -2911,7 +2911,7 @@ define(["exports"], function (exports) {
       /**
        * The request the strategy is performing (passed to the strategy's
        * `handle()` or `handleAll()` method).
-       * @name request
+       * @title request
        * @instance
        * @type {Request}
        * @memberof workbox-strategies.StrategyHandler
@@ -2919,7 +2919,7 @@ define(["exports"], function (exports) {
 
       /**
        * The event associated with this request.
-       * @name event
+       * @title event
        * @instance
        * @type {ExtendableEvent}
        * @memberof workbox-strategies.StrategyHandler
@@ -2930,7 +2930,7 @@ define(["exports"], function (exports) {
        * `handle()` or `handleAll()` method).
        * Note: the `url` param will be present if the strategy was invoked
        * from a workbox `Route` object.
-       * @name url
+       * @title url
        * @instance
        * @type {URL|undefined}
        * @memberof workbox-strategies.StrategyHandler
@@ -2943,7 +2943,7 @@ define(["exports"], function (exports) {
        * from a workbox `Route` object and the
        * {@link workbox-routing~matchCallback} returned
        * a truthy value (it will be that value).
-       * @name params
+       * @title params
        * @instance
        * @type {*|undefined}
        * @memberof workbox-strategies.StrategyHandler
@@ -3305,7 +3305,7 @@ define(["exports"], function (exports) {
      * Returns true if the strategy has at least one plugin with the given
      * callback.
      *
-     * @param {string} name The name of the callback to check for.
+     * @param {string} name The title of the callback to check for.
      * @return {boolean}
      */
 
@@ -3319,7 +3319,7 @@ define(["exports"], function (exports) {
       return false;
     }
     /**
-     * Runs all plugin callbacks matching the given name, in order, passing the
+     * Runs all plugin callbacks matching the given title, in order, passing the
      * given param object (merged ith the current plugin state) as the only
      * argument.
      *
@@ -3329,7 +3329,7 @@ define(["exports"], function (exports) {
      * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
      * below for how to handle that case.
      *
-     * @param {string} name The name of the callback to run within each plugin.
+     * @param {string} name The title of the callback to run within each plugin.
      * @param {Object} param The object to pass as the first (and only) param
      *     when executing each callback. This object will be merged with the
      *     current plugin state prior to callback execution.
@@ -3348,7 +3348,7 @@ define(["exports"], function (exports) {
      * you call each callback, whatever object parameter you pass it will
      * be merged with the plugin's current state).
      *
-     * @param {string} name The name fo the callback to run
+     * @param {string} name The title fo the callback to run
      * @return {Array<Function>}
      */
 
@@ -3497,7 +3497,7 @@ define(["exports"], function (exports) {
      * constructor.
      *
      * @param {Object} [options]
-     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * @param {string} [options.cacheName] Cache title to store and retrieve
      * requests. Defaults to the cache names provided by
      * {@link workbox-core.cacheNames}.
      * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
@@ -3512,7 +3512,7 @@ define(["exports"], function (exports) {
      */
     constructor(options = {}) {
       /**
-       * Cache name to store and retrieve
+       * Cache title to store and retrieve
        * requests. Defaults to the cache names provided by
        * {@link workbox-core.cacheNames}.
        *
@@ -3728,7 +3728,7 @@ define(["exports"], function (exports) {
    * cache, cache options, fetch options and plugins are used (per the current
    * strategy instance).
    *
-   * @name _handle
+   * @title _handle
    * @instance
    * @abstract
    * @function
@@ -4263,7 +4263,7 @@ define(["exports"], function (exports) {
     /**
      *
      * @param {Object} [options]
-     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * @param {string} [options.cacheName] Cache title to store and retrieve
      * requests. Defaults to the cache names provided by
      * {@link workbox-core.cacheNames}.
      * @param {Array<Object>} [options.plugins] {@link https://developers.google.com/web/tools/workbox/guides/using-plugins|Plugins}
@@ -4777,7 +4777,7 @@ define(["exports"], function (exports) {
      * [`cache.match()`](https://developer.mozilla.org/en-US/docs/Web/API/Cache/match)
      * with the following differences:
      *
-     * - It knows what the name of the precache is, and only checks in that cache.
+     * - It knows what the title of the precache is, and only checks in that cache.
      * - It allows you to pass in an "original" URL without versioning parameters,
      * and it will automatically look up the correct cache key for the currently
      * active revision of that URL.
@@ -4866,7 +4866,7 @@ define(["exports"], function (exports) {
    *
    * @param {URL} urlObject The original URL.
    * @param {Array<RegExp>} ignoreURLParametersMatching RegExps to test against
-   * each search parameter name. Matches mean that the search parameter should be
+   * each search parameter title. Matches mean that the search parameter should be
    * ignored.
    * @return {URL} The URL with any ignored search parameters removed.
    *
@@ -5118,7 +5118,7 @@ define(["exports"], function (exports) {
    * This should be safe to use as long as you don't include `substringToFind`
    * (defaulting to `-precache-`) in your non-precache cache names.
    *
-   * @param {string} currentPrecacheName The cache name currently in use for
+   * @param {string} currentPrecacheName The cache title currently in use for
    * precaching. This cache won't be deleted.
    * @param {string} [substringToFind='-precache-'] Cache names which include this
    * substring will be deleted (excluding `currentPrecacheName`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.1.28",
+  "version": "1.2.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.1.43",
+    "@bbki.ng/components": "workspace:2.2.0",
     "@supabase/supabase-js": "^1.30.6",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -25,10 +25,10 @@
     "react-hotkeys-hook": "^3.4.3",
     "react-router-dom": "6",
     "sonner": "1.4.0",
-    "swr": "^1.2.1"
+    "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.0.22",
+    "@bbki.ng/stylebase": "workspace:0.1.0",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/articles/loading.mdx

@@ -10,15 +10,18 @@ import { SpinnerDemo } from "@/demo/SpinnerDemo";
 import { DemoBox } from "@/demo/DemoBox";
 
 <SpinnerDemo />
-## 前言
->《她》是讲述在不远的未来人与人工智能相爱的科幻爱情电影。主人公西奥多（杰昆·菲尼克斯 Joaquin Phoenix 饰）是一位信件撰写人，心思细腻而深邃，能写出最感人肺腑的信件。他刚结束与妻子凯瑟琳（鲁妮·玛拉 Rooney Mara 饰）的婚姻，还没走出心碎的阴影。一次偶然机会让他接触到最新的人工智能系统 OS1 ……
+## 前言 >《她》是讲述在不远的未来人与人工智能相爱的科幻爱情电影。主人公西奥多（杰昆·菲尼克斯
+Joaquin Phoenix 饰）是一位信件撰写人，心思细腻而深邃，能写出最感人肺腑的信件。他刚结束与妻子凯瑟琳（鲁妮·玛拉
+Rooney Mara 饰）的婚姻，还没走出心碎的阴影。一次偶然机会让他接触到最新的人工智能系统
+OS1 ……
 
 相信大多数人，在看这部电影的时候，不仅仅会被剧情打动，也会被电影的镜头美学吸引。《她》呈现出一个没有被冷酷金属主导的科幻世界，那里光线柔和，色调温暖。人们的着装跟我们并没有太大区别，但是人工智能操作系统能完成的事情以及普及程度，现在看来很难想象。有意思的是，技术的发展并没有消灭「加载时间」，OS1 在安装的时候，西奥多依然需要等待。屏幕上精美的加载动画给我留下深刻的印象，从那时候起，就希望动画能出现在我的网站上。
 
 ## 灵感
+
 根据 Atwood's Law
 
-> Any application that _can_ be written in JavaScript, _will_ eventually be written in JavaScript.
+> Any application that *can* be written in JavaScript, *will* eventually be written in JavaScript.
 
 肯定有人已经用 JS 实现 OS1 系统的加载动画。没错，这个人是 [@psyonline](https://codepen.io/psyonline)，他的[在线示例](https://codepen.io/psyonline/pen/yayYWg)也非常惊艳。
 那么，直接复制粘贴过来可以吗？该示例使用 Three.js 实现，写这篇文章的时候，根据 [bundlephobia](https://bundlephobia.com/package/three@0.142.0) 显示，`three@142.0` 压缩后仍然有 `596.9kB`。对于个人网站，仅仅用来实现一个加载动画，无疑很不划算。
@@ -29,16 +32,21 @@ import { DemoBox } from "@/demo/DemoBox";
 - [W](https://xem.github.io/W/)
 
 前者压缩后，只有 `5.4KB`。正是我想找的工具。接下来，只需要 3 步就能实现文首的动画：
+
 1. 熟悉 phenomenon 的 API
 2. 用 phenomenon 绘制曲线
 3. 让曲线动起来
 
 ## 行动
+
 ### WebGL
+
 进行第一步时，发现自己还完全不了解 WebGL。看完 [The Book of Shaders](https://thebookofshaders.com/) 后，能基本理解 phenomenon 的[示例](https://codepen.io/collection/AOpMrm/)。至此，已经可以复制粘贴示例并修修改改，验证书中的概念和自己的理解。直到手痒痒想绘制自己想要的曲线，就进行到下一步。
 
 ### Curve
+
 @psyonline [示例](https://codepen.io/psyonline/pen/yayYWg)中不难找到绘制曲线的代码：
+
 ```
 function(percent) {
   var x = length*Math.sin(pi2*percent)
@@ -61,6 +69,7 @@ function(percent) {
 ```
 
 我的主要目标变成移植这段代码，其中 `pi2`, `length` 和 `radius` 均为常量，原文取值:
+
 ```
 const length = 30;
 const radius = 5.6;
@@ -68,10 +77,11 @@ const pi2 = Math.PI * 2;
 ```
 
 还有一个比较重要的参数 `percent`，打印发现取值范围为 0 到 1。有了这些，我愉快的写好 phenomenon 的 attributes:
+
 ```
 const attributes = [
   {
-    name: 'pos',
+    title: 'pos',
     data: (index: number, total: number) => {
       const percent = index / total;
       // ...
@@ -84,13 +94,17 @@ const attributes = [
   },
 ]
 ```
+
 然后得到一个空白的画布
+
 <DemoBox />
 
 因为对 WebGL 的了解依然接近于 0 在胡乱猜测并修改一通后，画布依然一片空白，于是沮丧放弃。直到晚上，突然想着将半径和长度都降低两个数量级，画布中终于出现一个扭曲的麻花。上次这么开心还是上一次。
 
 ### Matrix
+
 现在可以回想一下大学课堂线性代数中矩阵运算的知识。回想不起来也没关系，如果有一个正在念大学的弟弟的话，他会帮助写出 `rotate` 方法。
+
 ```
 export const VERTEX_SHADER = `
   attribute vec3 pos;
@@ -121,6 +135,7 @@ export const VERTEX_SHADER = `
 这些碎片代码，和碎片想法，最终组装出心心念念的动画。
 
 ## 参考链接
+
 1. https://codepen.io/psyonline/pen/yayYWg
 2. https://twitter.com/shuding_/status/1475916082875666441
 3. https://thebookofshaders.com/

package/src/constants/photo_projects.ts

@@ -42,12 +42,12 @@ export const PHOTO_PROJECTS: PhotoProject[] = [
     ],
   },
   // {
-  //   name: "光前",
+  //   title: "光前",
   //   description: "城中村，个人深圳经历出入口。",
   //   images: [OSS_PHOTOS.oldMan, OSS_PHOTOS.oldWomen, OSS_PHOTOS.littleChild],
   // },
   // {
-  //   name: "三百零一",
+  //   title: "三百零一",
   //   description: "陋室光影",
   //   images: [OSS_PHOTOS.phone, OSS_PHOTOS.chair],
   // },

package/src/constants/routes.ts

@@ -20,6 +20,7 @@ export const API_ENDPOINT = "https://api.bbki.ng";
 export const API = {
   PROJECTS: "projects",
   UPLOAD_IMG: "upload",
+  POST: "post",
   MOVIES: "movies",
   IMAGES: "images",
   BOOKS: "books",

package/src/hooks/use_authed.ts

@@ -0,0 +1,7 @@
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+
+export const useAuthed = (): boolean => {
+  const { access_token: token, isKing } = useSupabaseSession() || {};
+
+  return !(!token || !isKing);
+};

package/src/hooks/use_authed_fetcher.ts

@@ -0,0 +1,8 @@
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+import { apiFetcher, withToken } from "@/utils";
+import { useCallback } from "react";
+
+export const useAuthedFetcher = () => {
+  const { access_token: token } = useSupabaseSession() || {};
+  return useCallback(withToken(apiFetcher)(token), [token]);
+};

package/src/hooks/use_file_to_post.ts

@@ -0,0 +1,33 @@
+import { useTextPlainFile } from "@/hooks/use_text_plain_file";
+import { useContext, useEffect } from "react";
+import { usePost } from "@/hooks/use_post";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
+
+export type fileReader = (f: File) => void;
+export const useFile2Post = (): fileReader => {
+  const { content, title, reader } = useTextPlainFile();
+
+  const { setIsLoading } = useContext(GlobalLoadingContext);
+
+  const post = usePost();
+
+  useEffect(() => {
+    if (!content || !title) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    post(title, content)
+      .then((r) => {
+        console.log(r);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [title, content]);
+
+  return (f: File) => {
+    reader(f);
+  };
+};

package/src/hooks/use_post.ts

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { API } from "@/constants/routes";
+import { useAuthedFetcher } from "@/hooks/use_authed_fetcher";
+
+export const usePost = () => {
+  const authedFetcher = useAuthedFetcher();
+
+  const req = useCallback(
+    async (
+      url: string,
+      { arg }: { arg: { title: string; content: string } }
+    ) => {
+      return authedFetcher(url, {
+        method: "POST",
+        body: JSON.stringify(arg),
+      });
+    },
+    [authedFetcher]
+  );
+
+  return useCallback(
+    (title: string, content: string) =>
+      req(API.POSTS, { arg: { title, content } }),
+    [req]
+  );
+};

package/src/hooks/use_projects.ts

@@ -26,7 +26,9 @@ export const useProjects = (name: string = "", suspense?: boolean) => {
     if (!n) {
       return;
     }
-    return cache.get("projects")?.find((p: { name: string }) => p.name === n);
+    return cache
+      .get("projects")
+      ?.data.find((p: { name: string }) => p.name === n);
   };
 
   const refresh = useCallback(() => {

package/src/hooks/use_text_plain_file.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+export type Result = {
+  content: string;
+  title: string;
+  reader: (f: File) => void;
+};
+
+export const useTextPlainFile = (): Result => {
+  const [content, setContent] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+
+  const reader = new FileReader();
+
+  useEffect(() => {
+    if (file != null) {
+      reader.readAsText(file, "utf-8");
+    }
+
+    reader.onload = function () {
+      setContent(reader.result as string);
+    };
+
+    return () => {
+      reader.onload = null;
+    };
+  }, [file]);
+
+  return {
+    content,
+    title: file?.name ?? "",
+    reader: (f: File) => {
+      setFile(f);
+    },
+  };
+};

package/src/pages/extensions/txt/index.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { ArticleList } from "./consts";
-import { LinkList, LinkProps } from "@bbki.ng/components";
+import { LinkProps, DropZone } from "@bbki.ng/components";
 import { useRouteName } from "@/hooks";
 import { usePosts } from "@/hooks/use_posts";
-import { CenterLinkList, MySuspense } from "@/components";
+import { CenterLinkList } from "@/components";
+import { useAuthed } from "@/hooks/use_authed";
+import { useFile2Post } from "@/hooks/use_file_to_post";
 
 type TxtProps = {
   title?: string;
@@ -30,9 +32,12 @@ const Posts = (props: TxtProps) => {
 };
 
 export default (props: TxtProps) => {
+  const reader = useFile2Post();
+  const isKing = useAuthed();
+
   return (
-    // <MySuspense>
-    <Posts {...props} />
-    // </MySuspense>
+    <DropZone onDrop={reader} disabled={!isKing}>
+      <Posts {...props} />
+    </DropZone>
   );
 };

package/src/utils/index.ts

@@ -2,7 +2,9 @@ import { Photo } from "@/types/photo";
 import { ossProcessType } from "@/types/oss";
 import { API_ENDPOINT, OSS_ADDRESS } from "@/constants/routes";
 import { DEFAULT_DELAY } from "@/constants";
-import useSWR, { Fetcher } from "swr";
+import useSWR from "swr";
+
+type Fetcher = (resource: string, init?: any) => Promise<any>;
 
 export const floatNumberToPercentageString = (num: number): string => {
   return `${num * 100}%`;
@@ -96,7 +98,7 @@ export const withToken =
   };
 
 export const withBBApi =
-  (fetcher: Fetcher<Promise<void>>) =>
+  (fetcher: Fetcher) =>
   (apiEndPoint = API_ENDPOINT): Fetcher =>
   async (resource: string, init: RequestInit = {}) =>
     fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: "cors" });