2025-01-21 12:08:45
从昨天晚上开始，发现无法直接拉取 github 上的代码仓库了。报错如下：
ssh: connect to host github.com port 22: Resource temporarily unavailable
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
我以为我的 github 账号权限出了问题。
但是换成 https 协议，会报：
Failed to connect to github.com port 443: Connection refused
说明还是网络问题。
> nslookup github.com
Server: 114.114.114.114
Address: 114.114.114.114#53
Non-authoritative answer:
Name: github.com
Address: 20.205.243.166
参考：
https://www.v2ex.com/t/1009169
GitHub 在国内会被解析到新加坡节点的 20.205.243.166 ，这个 IP 在全国范围内被空路由了，其他 GitHub 的 IP 暂时没事，也可能只是策略还没分发完毕
打开配置文件 ~/.ssh/config 添加：
# add
Host github.com
Hostname ssh.github.com
Port 443
然后，就能正常的拉取 github 代码了。
在国内写代码太痛苦了，搞得跟个小偷一样 🤣
2025-01-17 16:33:25
用 Nginx 部署了一个前端项目，发现 pdf.js 相关的功能异常。 从浏览器的 console 来看，报错信息如下：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
参考：
https://github.com/mozilla/pdf.js/issues/17296
在前端配置中增加 mjs 相关的配置即可。
server {
# ...
location / {
root /usr/share/nginx/html;
index index.html;
location ~* \.mjs$ {
# target only *.mjs files
# now we can safely override types since we are only
# targeting a single file extension.
types {
text/javascript mjs;
}
}
}
}
mjs 即，MJS（ECMAScript Modules in JavaScript）使用 .mjs 作为文件扩展名，以明确表示该文件使用 ECMAScript 模块系统。
2025-01-16 10:01:50
之前开发 app 都是基于手机系统 locale 实现多语言翻译就行。
但是在 AI 横行的时代，又多了一项需求，就是根据手机系统的语言，自动返回对应语言的聊天内容。
这样就需要传递一个语言参数给后台接口。
An IETF BCP 47 language tag without the region code. Example: 'en', 'es', 'pl'.
而 locale 则是 languageCode 和 regionCode 的组合。例如 en-US, zh-CN. 当然还有其他的 code 组合。
在 React Native 项目下执行：
npx expo install expo-localization
这个库同时支持 android, ios 和 web。
import { getLocales } from 'expo-localization';
const language = getLocales()[0].languageCode; // en / es
getLocales 返回的数据格式：
[{
"languageTag": "pl-PL",
"languageCode": "pl",
"textDirection": "ltr",
"digitGroupingSeparator": " ",
"decimalSeparator": ",",
"measurementSystem": "metric",
"currencyCode": "PLN",
"currencySymbol": "zł",
"regionCode": "PL",
"temperatureUnit": "celsius"
}]
https://docs.expo.dev/versions/latest/sdk/localization/
2025-01-12 11:32:21
https://www.npmjs.com/package/react-native-vimeo-iframe
但是直接使用 Vimeo 组件，会报错：
Video is not implemented by GiftedChat. You need to provide your own implementation by using renderMessageVideo prop.
于是增加了 gifted chat 的自定义方法：
renderMessageVideo
增加了 renderMessageVideo 还是报错：
React Native WebView does not support this platform.
npm install react-native-webview
react-native-webview 仅支持移动平台，不支持 Web 平台。对于 Web 平台，可以使用 iframe 来嵌入 Vimeo 视频。
所以区分 Platform 做不同处理：
const renderMessageVideo = (props: any) => {
const { currentMessage } = props
if (currentMessage.video) {
if (Platform.OS === 'web') {
return (
<div>
<div>
<iframe
title="Some Video"
src="https://player.vimeo.com/video/xxx"
frameborder="0"
width="300"
height="361"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
);
} else {
return (
<Vimeo
videoId={'xxx'}
params={'api=1&autoplay=0'}
/>
)
}
}
return null
}
return (
<GiftedChat
messages={messages}
onSend={msgs => onSend(msgs)}
user={user}
onQuickReply={handleQuickReply}
renderMessageText={renderMessageText}
renderMessageVideo={renderMessageVideo}
renderTime={renderTime}
/>
)
2025-01-11 22:41:18
晚上实现了 React Native Gifted Chat 中渲染 Markdown 消息，折腾完之后，我甚至感觉 React Native 的库比 React 的库都可靠。
https://www.npmjs.com/package/react-native-markdown-display
npm install react-native-markdown-display
会看到安装了最新版本的依赖
git diff .\package.json
+ "react-native-markdown-display": "^7.0.2",
主要是被官方介绍吓到了:
It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is not a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.
我以为不支持 web view。
从
npm run web
的演示结果看，是支持 web 的。
新增一个自定义的 renderMessageText 方法，然后在新建的 message 消息中，增加一个 markdown 字段，bool 类型。 如果这个值为真，就进入 markdown 的渲染逻辑：
import { GiftedChat, MessageText } from 'react-native-gifted-chat'
import { Platform, View, Text } from 'react-native'
import Markdown from 'react-native-markdown-display'
+ const renderMessageText = (props: any) => {
+ const { currentMessage } = props
+ if (currentMessage.markdown) {
+ return (
+ <View>
+ <Markdown>{currentMessage.text}</Markdown>
+ </View>
+ )
+ }
+ return <MessageText {...props} />
+ }
+
return (
<GiftedChat
messages={messages}
onSend={msgs => onSend(msgs)}
user={user}
onQuickReply={handleQuickReply}
+ renderMessageText={renderMessageText}
/>
)
}
这是第一次比较完整的跟 github copilot 合作完成一个功能的案例，所以有必要记录一下。 之前都是大部分靠自动补全实现的。而这次靠补全是很难完成的，看来 copilot pro 充值还是物有所值的。
完整的提问过程：
如果采用习惯性的做法，会先去 Google 找 React Native 支持 Markdown 渲染的库。 但是搜索结果优先推荐了一个多年不维护的库，而直接问 github copilot 则会推荐一个更为活跃，也更多采用的上面这个库。
再就是，第一次提问，给出的解决方案，并不好。因为没有考虑到其他消息类型。
我第一反应是，继续去 google 搜索，自己寻求答案。但是，期间我去打洗脚水，突然相对，为何不能继续引导 AI 给出更合理的解决方案呢？
于是又出现了后面第二个，第三个问题。最后给出的代码就能直接使用了。非常棒。
