Check webp support

_posts/repost/2020-10-29-写一篇公众号文字发不出来，是什么感受.md

@@ -8,6 +8,8 @@ date: 2020-10-29 +0800
 description: 我倾向不谈论政治，自知尚未形成能自洽的判断体系。有时候翻看新闻留言，每当有人提起“言论自由”都会引发争论，这个问题我不觉得有什么可争论的，答案显而易见，但是这样的答案却不可以被发表出来，所以答案本来就是显而易见的。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/repost/20201029/1984_thumb.jpg
 tags: 转载 赵瑜 微信公众号 思维 审查
+sitemap: false
+blockFromSearchEngine: true
 ---
 
 > 我倾向不谈论政治，自知尚未形成能自洽的判断体系。有时候翻看新闻留言，每当有人提起“言论自由”都会引发争论，这个问题我不觉得有什么可争论的，答案显而易见，但是这样的答案却不可以被发表出来，所以答案本来就是显而易见的。

_posts/repost/2022-05-27-为什么「师兄」是我最讨厌的称谓.md

@@ -7,6 +7,8 @@ mention: 门第 平等
 date: 2022-05-27 +0800
 description: “当一个人喜欢逛某些论坛或社交媒体时，小心自己被拉到一种低层次的集体心理状态”。
 tags: 转载 冷金乘 思维 门第 平等
+sitemap: false
+blockFromSearchEngine: true
 ---
 
 > “当一个人喜欢逛某些论坛或社交媒体时，小心自己被拉到一种低层次的集体心理状态”。

npm/package.json

@@ -31,12 +31,13 @@
     "@types/react-dom": "^18.0.6",
     "highlight.js": "^11.10.0",
     "long-press-event": "^2.4.4",
+    "masonry-layout": "^4.2.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-animate-height": "^3.2.3",
     "react-dom": "^18.2.0",
     "react-masonry-css": "^1.0.16",
-    "masonry-layout": "^4.2.2"
+    "supports-webp": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",

npm/src/page/scaffold.ts

@@ -1,5 +1,5 @@
 // import "./scaffold.scss"
-import { isDebug, isWriting, runOnHtmlDone, runOnPageBackFromCache, runOnPageDone } from "../util/tools"
+import { checkWebpSupport, isDebug, isWriting, runOnHtmlDone, runOnPageBackFromCache, runOnPageDone } from "../util/tools"
 import { blockTopbarKeyFrameAnimation, initTopbar } from "../component/topbar"
 import { initDrawer } from "../component/drawer"
 import { checkUserTheme, initTheme } from "../component/theme"
@@ -31,6 +31,7 @@ runOnHtmlDone(() => {
 })
 
 runOnPageDone(() => {
+    checkWebpSupport()
     loadGoogleAnalytics()
 })
 

npm/src/util/tools.ts

@@ -1,4 +1,6 @@
+import supportsWebP from "supports-webp"
 import { consoleDebug, consoleObjDebug } from "./log"
+import { showAlertDialog } from "../component/dialog/CommonAlertDialog"
 
 /**
  * 当HTML元素加载完成后执行指定的任务
@@ -50,7 +52,7 @@ export function runOnPageBackFromCache(task: () => void) {
  * 为React生成可以加载的HTMl类型的数据
  */
 export function createHtmlContent(html: string) {
-    return {__html: html}
+    return { __html: html }
 }
 
 export function toggleClassWithEnable(e: Element, className: string, enable: boolean) {
@@ -91,19 +93,19 @@ export function isSafari(): boolean {
     return check
 }
 
-var debugMode:boolean = undefined
-var writingMode:boolean = undefined
+var debugMode: boolean = undefined
+var writingMode: boolean = undefined
 
 export function isDebug(): boolean {
-    if(debugMode != undefined) return debugMode
+    if (debugMode != undefined) return debugMode
     // 读取head里的debug标志
     const debugStr: string = document.querySelector("meta[name=debug]").getAttribute("content")
     debugMode = JSON.parse(debugStr)
     return debugMode
 }
 
 export function isWriting(): boolean {
-    if(writingMode != undefined) return writingMode
+    if (writingMode != undefined) return writingMode
     // 读取head里的writing标志
     const writingStr: string = document.querySelector("meta[name=writing]").getAttribute("content")
     writingMode = JSON.parse(writingStr)
@@ -148,4 +150,17 @@ export function runAfterMinimalTime(startTime: number, func: () => void, _minima
 export const clearFocusListener: (e: Event) => void = (e) => {
     const target = e.target as HTMLElement
     target.blur()
+}
+
+export function checkWebpSupport() {
+    supportsWebP.then(supported => {
+        if (!supported) {
+            const urlLink = `
+            当前浏览器不支持<a href="https://caniuse.com/?search=webp" target="_blank">WebP</a>格式，部分图片可能无法显示，请更新浏览器版本。
+            `
+            showAlertDialog("提示", urlLink, "关闭", () => {
+
+            })
+        } 
+    })
 }