@bbki.ng/site 5.4.21 → 5.4.24

package/src/blog/pages/extensions/txt/article.tsx

@@ -1,23 +1,13 @@
-import React, { ReactElement, useContext, useEffect } from 'react';
-import { withArticleWrapper } from '@/components';
-import { MdxArticle } from '@/types/articles';
-import { NotFound, DropZone } from '@bbki.ng/components';
-import { useLocation, useParams } from 'react-router-dom';
+import React from 'react';
+import { NotFound } from '@bbki.ng/components';
+import { useParams } from 'react-router-dom';
 import { usePosts } from '@/hooks/use_posts';
 import { ArticlePage } from '@/components/article';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
-import { useFile2Post } from '@/hooks/use_file_to_post';
-import { useAuthed } from '@/hooks/use_authed';
-import { ArticleCtxMenu } from '@/components/article_ctx_menu';
 import { useBlogScrollReset } from '@/hooks/use_blog_scroll_pos_restoration';
 
 export default () => {
   const { title } = useParams();
   const { posts, isError, isLoading } = usePosts(title);
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  const reader = useFile2Post();
-  const isKing = useAuthed();
 
   useBlogScrollReset();
 
@@ -33,15 +23,11 @@ export default () => {
     return null;
   }
 
-  const date = posts.created_at ? posts.created_at.split('T')[0] : '';
+  const date = posts.createdAt ? posts.createdAt.split('T')[0] : '';
 
   return (
-    <DropZone onDrop={reader} disabled={!isKing}>
-      <ArticlePage title={title} date={date}>
-        <ArticleCtxMenu>
-          <div dangerouslySetInnerHTML={{ __html: posts.content }} />
-        </ArticleCtxMenu>
-      </ArticlePage>
-    </DropZone>
+    <ArticlePage title={title} date={date}>
+      <div dangerouslySetInnerHTML={{ __html: posts.content }} />
+    </ArticlePage>
   );
 };

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

@@ -1,11 +1,7 @@
 import React from 'react';
-import { LinkProps, DropZone, Button } from '@bbki.ng/components';
+import { LinkProps, Button } from '@bbki.ng/components';
 import { usePosts } from '@/hooks/use_posts';
 import { CenterLinkList } from '@/components';
-import { useAuthed } from '@/hooks/use_authed';
-import { useFile2Post } from '@/hooks/use_file_to_post';
-import { useClipboardToPost } from '@/hooks/use_clipboard_to_post';
-import { useLocation } from 'react-router-dom';
 import { useBlogScroll, useBlogScrollRestoration } from '@/hooks/use_blog_scroll_pos_restoration';
 
 type TxtProps = {
@@ -13,7 +9,7 @@ type TxtProps = {
   articleList?: LinkProps[];
 };
 
-const Posts = (props: TxtProps) => {
+export default (props: TxtProps) => {
   const { titleList, isLoading, isError } = usePosts();
 
   useBlogScrollRestoration();
@@ -28,11 +24,9 @@ const Posts = (props: TxtProps) => {
     return <CenterLinkList links={props.articleList} />;
   }
 
-  const links = [...titleList];
-
   return (
     <CenterLinkList
-      links={props.articleList || links}
+      links={props.articleList || titleList}
       loading={isLoading}
       footer={
         <Button onClick={gotoTop} className="mt-128">
@@ -55,14 +49,3 @@ const Posts = (props: TxtProps) => {
     />
   );
 };
-
-export default (props: TxtProps) => {
-  const reader = useFile2Post();
-  const isKing = useAuthed();
-
-  return (
-    <DropZone onDrop={reader} disabled={!isKing}>
-      <Posts {...props} />
-    </DropZone>
-  );
-};

package/src/blog/pages/login/index.tsx

@@ -1,48 +1,24 @@
-import React, { useContext, useState } from "react";
-import { Button, ButtonType } from "@bbki.ng/components";
-import { OauthProvider } from "@/types/supabase";
-import { supabase } from "@/constants";
-import { ArticlePage } from "@/components/article";
-import { useSupabaseSession } from "@/hooks/use_supa_session";
-import { Navigate } from "react-router-dom";
-import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+import React from 'react';
+import { ArticlePage } from '@/components/article';
 
+/**
+ * Login page
+ * Note: OAuth authentication has been removed. Authentication is now handled
+ * via API keys in the CLI tool. Frontend authentication may be re-implemented
+ * in the future.
+ */
 export const Login = () => {
-  const { isLoading, setIsLoading } = useContext(GlobalLoadingContext);
-
-  const session = useSupabaseSession();
-  if (session) {
-    return <Navigate to="/" />;
-  }
-
   return (
-    <ArticlePage title="第三方账号登录">
-      <>
-        <Button
-          type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY}
-          className="ml-8"
-          onClick={async () => {
-            setIsLoading(true);
-            return supabase.auth.signIn({
-              provider: OauthProvider.GITHUB,
-            });
-          }}
-        >
-          GitHub
-        </Button>
-        <Button
-          type={isLoading ? ButtonType.DISABLED : ButtonType.PRIMARY}
-          className="ml-8"
-          onClick={async () => {
-            setIsLoading(true);
-            return supabase.auth.signIn({
-              provider: OauthProvider.Spotify,
-            });
-          }}
-        >
-          Spotify
-        </Button>
-      </>
+    <ArticlePage title="登录">
+      <div className="prose dark:prose-invert">
+        <p className="text-gray-600 dark:text-gray-400">网页登录功能已暂时禁用。</p>
+        <p className="text-gray-600 dark:text-gray-400">
+          如需管理内容，请使用 CLI 工具并通过 API Key 进行认证：
+        </p>
+        <pre className="bg-gray-100 dark:bg-gray-800 p-4 rounded">
+          <code>bbking login</code>
+        </pre>
+      </div>
     </ArticlePage>
   );
 };

package/src/blog/swr.tsx

@@ -1,15 +1,12 @@
-import React from "react";
-import { SWRConfig } from "swr";
-import { apiFetcher, withToken } from "@/utils";
-import { useSupabaseSession } from "@/hooks/use_supa_session";
+import React from 'react';
+import { SWRConfig } from 'swr';
+import { cfApiFetcher } from '@/utils';
 
 export const SWR = (props: { children: any }) => {
-  const { access_token: token } = useSupabaseSession() || {};
-  const authedApiFetcher = withToken(apiFetcher)(token);
   return (
     <SWRConfig
       value={{
-        fetcher: authedApiFetcher,
+        fetcher: cfApiFetcher,
       }}
     >
       {props.children}

package/src/blog/utils/index.ts

@@ -1,10 +1,5 @@
-import { Photo } from "@/types/photo";
-import { ossProcessType } from "@/types/oss";
-import { API_CF_ENDPOINT, API_ENDPOINT, OSS_ADDRESS } from "@/constants/routes";
-import { DEFAULT_DELAY } from "@/constants";
-import useSWR from "swr";
-import { toast } from "sonner";
-import { FontType } from "@/types/font";
+import { API_ENDPOINT } from '@/constants/routes';
+import { FontType } from '@/types/font';
 
 type Fetcher = (resource: string, init?: any) => Promise<any>;
 
@@ -12,183 +7,25 @@ export const floatNumberToPercentageString = (num: number): string => {
   return `${num * 100}%`;
 };
 
-export const delay = (time: number) => {
-  return new Promise((resolve) => {
-    setTimeout(resolve, time);
-  });
-};
-
-export const minDelay = async (
-  promise: Promise<any>,
-  time: number = DEFAULT_DELAY
-): Promise<any> => {
-  const delayPromise = delay(time);
-  await Promise.all([delayPromise, promise]);
-  return promise;
-};
-
-export const addOssWebpProcessStyle = (
-  originUrl: string,
-  style: ossProcessType
-): string => {
-  const isInvalidOSSImgUrl = !originUrl.startsWith(OSS_ADDRESS);
-  const isProcessedOssImg = /x-oss-process=style\/\w+/.test(originUrl);
-  const isWebpImg = /webp$/.test(originUrl);
-
-  if (
-    isInvalidOSSImgUrl ||
-    isProcessedOssImg ||
-    (isWebpImg && style === ossProcessType.WEBP) ||
-    style === ossProcessType.NULL
-  ) {
-    return originUrl;
-  }
-  return `${originUrl}?x-oss-process=style/${style}`;
-};
-
-export const calcDefaultImgSize = (
-  img: Photo,
-  defaultWidth?: number,
-  scale?: number
-): { width: number; height: number } => {
-  const { width, height } = img;
-  const whRatio = width / height;
-  const isHorizontal = width > height;
-
-  const finalWidth =
-    (defaultWidth || (isHorizontal ? 576 : 384)) * (scale || 1);
-
-  return {
-    width: finalWidth,
-    height: finalWidth / whRatio,
-  };
-};
-
-export const getEnv = () => {
-  return /^http:\/\/localhost/.test(location.href)
-    ? "development"
-    : "production";
-};
-
 export const baseFetcher = (resource: string, init: RequestInit = {}) =>
-  fetch(resource, init).then((res) => {
+  fetch(resource, init).then(res => {
     if (!res.ok) {
-      throw new Error("An error occurred while fetching the data.");
+      throw new Error('An error occurred while fetching the data.');
     }
 
     return res.json();
   });
 
-export const withToken =
-  (fetcher: Fetcher) =>
-  (token?: string) =>
-  (resource: string, init: RequestInit = {}) => {
-    const { headers = {} } = init;
-    const tokenHeaders = token
-      ? {
-          "X-Supabase-Auth": token,
-        }
-      : {};
-    const finalHeaders = {
-      ...headers,
-      ...tokenHeaders,
-    };
-    return fetcher(resource, {
-      ...init,
-      headers: finalHeaders,
-    });
-  };
-
 export const withBBApi =
   (fetcher: Fetcher) =>
-  (apiEndPoint = API_ENDPOINT): Fetcher =>
+  (apiEndPoint: string): Fetcher =>
   async (resource: string, init: RequestInit = {}) =>
-    fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: "cors" });
-
-export const apiFetcher = withBBApi(baseFetcher)(API_ENDPOINT);
-
-export const cfApiFetcher = withBBApi(baseFetcher)(API_CF_ENDPOINT);
-
-export const getImageFileSize = (
-  file: File
-): Promise<{ width: number; height: number }> => {
-  const url = URL.createObjectURL(file);
-  const img = new Image();
-  return new Promise((resolve) => {
-    img.src = url;
-    img.onload = function (e) {
-      resolve({
-        width: img.naturalWidth,
-        height: img.naturalHeight,
-      });
-    };
-  });
-};
-
-export const buildSimpleApiHooks = (api: string, payloadKey: string) => {
-  return () => {
-    const { data, error } = useSWR(api);
-    return {
-      [payloadKey]: data,
-      isError: error,
-      isLoading: !data && !error,
-    };
-  };
-};
-
-export const imageFormatter = (image: any) => {
-  const { rendered_width, thumbnail_src, avg_color, process_type, ...rest } =
-    image;
-  return {
-    renderedWidth: rendered_width,
-    thumbnailSrc: thumbnail_src,
-    avgColor: avg_color,
-    processType: process_type,
-    ...rest,
-  };
-};
-
-export const getRandomInt = (min: number, max: number) => {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-
-export const copyToClipboard = async (value: string) => {
-  await navigator.clipboard.writeText(value);
-};
-
-export const confirm = (message: string, exec: () => void) => {
-  toast("", {
-    description: message,
-    actionButtonStyle: {
-      backgroundColor: "#fff",
-      color: "rgb(37,99,235)",
-    },
-    position: "bottom-right",
-    action: {
-      label: "是",
-      onClick: () => {
-        exec();
-      },
-    },
-  });
-};
-
-export const splitPost= (wholeString: string ) => {
-  const firstLine = wholeString ? wholeString .split("\n")[0] : "";
-  const title = firstLine ? firstLine.trim() : "";
-
-  const restContent = wholeString ? wholeString.slice(title.length).trim() : "";
+    fetcher(`${apiEndPoint}/${resource}`, { ...init, mode: 'cors' });
 
-    return {
-        title,
-        content: restContent,
-    };
-}
+export const cfApiFetcher = withBBApi(baseFetcher)(API_ENDPOINT);
 
 export const changeFont = (type: FontType) => {
-  const rootDiv = document.getElementById("root");
+  const rootDiv = document.getElementById('root');
   if (rootDiv == null) {
     return;
   }
@@ -205,5 +42,5 @@ export const changeFont = (type: FontType) => {
   rootDiv.classList.add(type);
 
   // save font type to local storage
-  localStorage.setItem("font", type);
+  localStorage.setItem('font', type);
 };

package/vite.config.js

@@ -31,7 +31,7 @@ const options = {
 export default defineConfig({
   server: {
     proxy: {
-      '/api/streaming': {
+      '/api': {
         target: 'http://localhost:8787',
         rewrite: path => path.replace(/^\/api/, ''),
       },
@@ -71,6 +71,7 @@ export default defineConfig({
     tailwindcss(),
     VitePWA({
       injectRegister: 'auto',
+      registerType: 'autoUpdate',
       includeAssets: ['favicon.svg', 'robots.txt', 'apple-touch-icon.png', 'Logo.svg'],
       devOptions: {
         enabled: true,

package/src/blog/articles/anti-logic.mdx

@@ -1,61 +0,0 @@
----
-title: 与或非禁区
----
-
-**1. 古老的小区**
-
-我搬进 \
-一个古老的小区的胃里
-
-堆积的法国梧桐树叶 \
-和我的过往 \
-加重了它消化不良的症状
-
-北方的冷空气穿过冲积平原 \
-匍匐在小区旁的江面休息 \
-玩闹
-
-手拉着手的山脉远在南边等候 \
-胃壁从此有水珠渗出
-
-我的浴巾不再干燥
-
-**2. 信**
-
-被子折叠成信封 \
-身体干瘪成信纸
-
-睡梦邮递心事。
-
-**3. 梦里的事**
-
-梦里一群恒星散落在 \
-外婆家屋后的草丛
-
-梦里在摩天大楼上空蛙泳
-
-梦里变成凶杀犯被通缉
-
-梦里牙齿全部脱落 \
-一点也不痛
-
-**3. 清明后**
-
-左手是右手的手写板 \
-五官不是心脏的显示屏 \
-面无表情 \
-手指划着手心
-
-键盘上有飞蛾的卵 \
-地毯下是腐烂的地板 \
-没有把的拖把 \
-已被晒干
-
-通话质量不佳 \
-扬声器变得沙哑 \
-Siri 把熊仔念成了熊子 \
-乘着吹进车窗的 \
-横风飘过副驾驶 \
-飘进山谷带着 \
-笑声、雾 \
-消失在海拔五百二十米的高度

package/src/blog/articles/bbking-manual.mdx

@@ -1,7 +0,0 @@
----
-title: 说明书
-tags:
-  - bbki.ng
----
-
-301 -> https://docs.bbki.ng

package/src/blog/articles/black-river.mdx

@@ -1,8 +0,0 @@
----
-title: 六月
-tags:
-  - 随笔
-  - 梦
----
-
-梦见一条巨大、扭曲、干涸的黑色河流，它穿过城市，充斥着整个视野。梦中只有我，和河边篮球场玩滑板的一群陌生孩子。

package/src/blog/articles/celebration.mdx

@@ -1,21 +0,0 @@
----
-title: 庆典
-tags:
-  - 摘抄
-  - 诗歌
----
-
-```
-我把我的孤伶展在
-桌上，像一张地图。
-我绘制路线
-去往我迎风的住处。
-到达的人遇不见我。
-我等的人不存在。
-
-我喝下暴怒的烈酒
-为了把那些面孔变成
-一个天使，变成空杯子
-
-—— 摘自《夜的命名术》
-```

package/src/blog/articles/cloth.mdx

@@ -1,11 +0,0 @@
----
-title: 衣服
-tags:
-  - 随笔
----
-
-衣服干了，没叠
-
-白天我把它堆在床上
-
-晚上把它挪到沙发上

package/src/blog/articles/cooking.mdx

@@ -1,7 +0,0 @@
----
-title: 做饭
-tags:
-  - 随笔
----
-
-自己做饭好玩的事情之一是吃饭的时候，面对食物有种熟悉的感觉：原来这是我切菜时犹豫要不要扔掉，最终留下来的辣椒屁股。

package/src/blog/articles/cooldown.mdx

@@ -1,12 +0,0 @@
----
-title: 降温
-tags:
-  - 随笔
-  - 天气
----
-
-跟去年一样，第一时间感受到了降温。不同的是，去年是走在路上突然反应过来，与低温偶遇。今年像被大队人马包围，为首的用喇叭喊话告知，你应该向低温投降。国庆跟朋友还不止一次聊起，记得某年国庆室友结婚我们已经在烤电火炉，为什么现在还是短袖呢？几天后，气温骤降。低温劈头盖脸而来。
-
-越来越喜欢描述气候特点的词汇：四季分明，雨热同期，春秋短促，冬夏绵长，低温寡照，阴雨连绵。像朴素的大道理，包罗万象。「越冬作物可安全越冬，缓慢生长」，提到作物的句子也充满关心像母亲的语气。
-
-作为湖南人自己会经常忘了这片土地大部分位于洞庭湖以南的事实。湘赣交界诸山和武陵山脉、雪峰山脉、南岭山脉，把东西南三面围住，唯独北边是冲积平原，洞开接收来自北方的寒意。

package/src/blog/articles/cousin.mdx

@@ -1,15 +0,0 @@
----
-title: 堂兄
-tags:
-  - 随笔
----
-
-春节假过完回长沙，堂兄开车送我去高铁站。
-
-车内循环播放着《冻结》。这首歌出现在林俊杰首张专辑《乐行者》中，发行于 2003 年。当时我在堂兄家过暑假。那张专辑里堂兄循环最多的歌曲是《就是我》。他循环太多遍，还是小学生的我无意间听会，二十年后还是能想起一些歌词、旋律。
-
-2003 年过暑假、堂兄长大的地方叫种蓄场。有大片橘树林，兔舍，猪舍，小鸡孵化厂房。还有只在学校见过的铁门和围墙。在老家，一到天黑小孩会被催着回家；在这里，天黑后大人也放心小孩出门结伴玩耍。他们围着空地烧火，抽烟，吹牛。他们在磨坊里躲迷藏，那里一袋袋玉米在二楼一直堆到天花板上。我记得停在门口的大卡车，和它散发出的橡胶轮胎和灰尘金属味道。
-
-种蓄场倒闭，伯父去世，伯母改嫁，堂兄结婚生子、大病入院、妻子失踪。全部发生在这二十年间。「弟弟来你家要把你的菜全吃光了」，二十年前，种蓄场的职员这样逗堂兄玩。晚餐的时候，堂兄用筷子截住我伸出的筷子，不让我夹菜。
-
-曾经父母宠爱，无忧无虑的堂兄，现在沉默寡言。

package/src/blog/articles/fall.mdx

@@ -1,8 +0,0 @@
----
-title: 大雪
-tags:
-  - 随笔
-  - 天气
----
-
-大雪节气过后，气温更低、起床变得更加困难。去吃粉的途中，发现街道两边的车顶和挡风玻璃上都铺满了落叶，地面上的落叶也铺得很厚。想要把落叶拢到一起，已经不能用常规的扫地动作。店家握着扫把一端，用小腹抵住往前推，人和扫把模拟出一辆简易版推土机。往前推进很短的距离，落叶便隆成一个小丘。地铁口的自动扶梯前有一片落叶，黄叶孤零零躺在不锈钢面板上，听着扶梯传动系统发出的枯燥声音。当代艺术中心大楼前的人工水池里也泡着落叶，有大叔用网兜打捞。不远处的草坪有人和银杏落叶合影。落叶和落雪给人们带来类似的烦恼和喜悦。

package/src/blog/articles/img.mdx

@@ -1,104 +0,0 @@
----
-title: 图片展示
-tags:
-  - bbki.ng
-  - web
-  - 图片
----
-
-import { ImgDemo } from "@/demo/ImgDemo";
-
-图片是 BBKi.ng 的主要内容之一，友好地展示图片是必须考虑的问题。
-
-先写下第一行代码：
-
-```html
-<img src="my-awesome-picture.jpg" />
-```
-
-这样就完成了图片展示。但是这种极简的做法存在一些问题，还谈不上友好。比如：
-
-1. 布局偏移问题。我们没有为 `img` 标签设定尺寸，导致图片加载期间，浏览器没有在文档中为其分配正确的空间。加载完成后，图片突然撑开。
-2. 性能问题。没有惰性渲染、惰性加载，多图页面会有潜在性能问题。
-3. 逐行渲染问题。标准 JPEG 格式压缩的图片，下载时基线 JPEG 算法会逐行渲染图片，影响体验。
-
-## 布局偏移
-
-对于问题 1. 我们为图片设置好宽高即可：
-
-```html
-<style>
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-</style>
-<img height="853" width="1280" … />
-```
-
-## 性能相关
-
-### `content-visibility: auto`
-
-该 CSS 属性会告知浏览器，在图片接近屏幕前，先不要为其布局。浏览器也不会去解码用户暂时看不见的图片，节省 CPU。
-
-### `loading="lazy"`
-
-该属性会告知浏览器，在图片接近屏幕前，先不要去请求图片资源。
-
-### `decoding="async"`
-
-该属性会给浏览器脱离主线程解码图片的权限，避免用来解码图片的 CPU 时间影响用户。
-
-## 呈现相关
-
-### 渐进加载
-
-直观体验：
-
-- [Medium](https://medium.com/cucumbertown-magazine/the-beginners-guide-to-composition-in-food-photography-how-to-transform-your-food-photos-from-good-39613ab78bf2)
-- [Polymer shop project](https://shop.polymer-project.org/)
-
-上边两个例子在加载大图时，都用到了低质量图片占位（Low Quality Image Placeholder, LQIP）。在大图加载时，展示模糊的低质量图片，在加载低质量图片时，展示背景色。图片加载成功时，配合 transition 效果，整个过程显得顺滑流畅。
-[José M. Pérez](https://jmperezperez.com/about-me/) 在 2015 年写了[一篇文章](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)详细分析了 Medium 图片渐进加载细节。
-
-了解基本思路后，实现方式可以有很多种。其中关键，需要准备高清图对应的低质量图片，以及对低质量图片进行模糊处理。
-
-### 低质量图片
-
-BBKi.ng 所有图片均存放在阿里云 OSS 中。OSS 数据处理下的图片处理功能可以创建样式。不同样式对应不同的图片处理细节，如图片格式转换、图片质量、缩略等。我们可以新建名为 `LQIP` 的样式，将原图压缩为低质量图片。假设上传原图后得到的地址为：`url/to/my-awesome-picture.jpg`, 那么通过地址 `url/to/my-awesome-picture.jpg?x-oss-process=style/LQIP` 即能获取低质量图片。
-
-### 模糊效果
-
-实现图片模糊有很多种方式。比如
-
-1. CSS [滤镜](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
-2. CSS [背景滤镜](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop)
-3. Canvas 渲染（[blurhash](https://blurha.sh/)）
-
-```
-img {
-  filter: blur(2px)
-}
-
-.cover {
-  backdrop-filter: blur(2px);
-}
-```
-
-以上几种方式都各有优缺点。CSS 滤镜优点是写法比较简单，也无需引入新的元素。缺点是，边缘也会模糊掉。可以增加一个包裹元素，设置 `overflow: hidden` 解决，但是模糊半径较大时，图片边缘的模糊效果始终不是很理想（[效果对比](https://codepen.io/z-j-h/pen/ZEJPEWq)）；用 CSS 背景滤镜可以得到锐利清晰的边缘，同时图片内容区域模糊效果也很好，缺点是效果是应用在元素背后的区域，因此我们需要引入额外的元素，同时该样式会影响图层合成时间、默认不兼容火狐浏览器；Blurhash 方法的优点是模糊图片只需要用简洁哈希字符串表示，节省空间。缺点是编码解码过程稍显繁琐。同时客户端解码大尺寸图片时也存在性能问题。
-
-综合考虑后，最终使用背景滤镜对图片进行模糊处理。
-
-**示例**
-
-<ImgDemo />
-
-## 参考链接
-
-- https://web.dev/optimize-cls/
-- https://medium.com/hd-pro/jpeg-formats-progressive-vs-baseline-73b3938c2339
-- https://www.industrialempathy.com/posts/image-optimizations/
-- https://www.guypo.com/introducing-lqip-low-quality-image-placeholders
-- https://jmperezperez.com/medium-image-progressive-loading-placeholder/
-- https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx