chore: update posts to adapt the new version of geist

Author: unix

lib/components/layout.tsx

@@ -106,14 +106,17 @@ const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
 
         .container :global(h2) {
           font-size: 1.7rem;
+          margin-top: 2.25rem;
         }
 
         .container :global(h3) {
           font-size: 1.4rem;
+          margin-top: 1rem;
         }
 
         .container :global(h4) {
           font-size: 1.2rem;
+          margin-top: 1rem;
         }
 
         @media only screen and (max-width: 767px) {

next.config.js

@@ -15,19 +15,12 @@ const withMDX = require('@next/mdx')({
 const nextConfig = {
   pageExtensions: ['jsx', 'js', 'mdx', 'md', 'ts', 'tsx'],
 
-  cssModules: true,
-
   generateEtags: false,
 
   poweredByHeader: false,
 
   assetPrefix: isProd ? cdnPrefix : '',
 
-  cssLoaderOptions: {
-    importLoaders: 1,
-    localIdentName: '[local]___[hash:base64:5]',
-  },
-
   env: {
     VERSION: require('./package.json').version,
   },

package.json

@@ -15,7 +15,7 @@
     "@geist-ui/core": "^2.3.4",
     "@geist-ui/icons": "^1.0.1",
     "@geist-ui/prism": "^1.1.1",
-    "@mdx-js/react": "^2.0.0",
+    "@mdx-js/react": "^1.6.22",
     "@unix/views": "^0.2.0",
     "ms": "^2.1.3",
     "next": "^12.1.0",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@geist-ui/prettier-config": "^1.0.1",
     "@mapbox/rehype-prism": "^0.7.0",
-    "@mdx-js/loader": "^2.0.0",
+    "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^12.1.0",
     "@types/ms": "^0.7.31",
     "@types/react": "^17.0.39",

pages/_app.tsx

@@ -11,7 +11,7 @@ import { getDNSPrefetchValue } from 'lib/data-transform'
 import { BlogConfigsProvider } from 'lib/components'
 import { HybridLink, HybridCode } from 'lib/components/mdx'
 
-const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
+const Application: NextPage<AppProps<unknown>> = ({ Component, pageProps }) => {
   const [themeType, setThemeType] = useState('light')
   const domain = useMemo(() => getDNSPrefetchValue(BLOG.domain), [])
   const changeHandle = useCallback(isDark => {
@@ -21,8 +21,7 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
 
   useEffect(() => {
     if (typeof localStorage !== 'object') return
-    const themeType = localStorage.getItem('theme')
-    setThemeType(themeType === 'dark' ? 'dark' : 'light')
+    setThemeType(localStorage.getItem('theme') === 'dark' ? 'dark' : 'light')
   }, [])
   useEffect(() => localStorage.setItem('theme', themeType), [themeType])
   useDomClean()
@@ -59,16 +58,16 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
       <GeistProvider themeType={themeType}>
         <CssBaseline />
         <PrismBaseline />
-        <BlogConfigsProvider onChange={changeHandle}>
-          <MDXProvider
-            components={{
-              a: HybridLink,
-              img: Image,
-              pre: HybridCode,
-            }}>
+        <MDXProvider
+          components={{
+            a: HybridLink,
+            img: Image,
+            pre: HybridCode,
+          }}>
+          <BlogConfigsProvider onChange={changeHandle}>
             <Component {...pageProps} />
-          </MDXProvider>
-        </BlogConfigsProvider>
+          </BlogConfigsProvider>
+        </MDXProvider>
         <style global jsx>{`
           @media only screen and (max-width: 767px) {
             html {

pages/fixed/about.mdx

@@ -1,63 +1,20 @@
 import { Layout } from 'lib/components'
-import { Button, Row, Spacer, Dot, Link, useModal, Modal, Image } from '@geist-ui/core'
-import NextLink from 'next/link'
 
 export const meta = {
   title: '关于我',
   date: '2019-01-09T10:20:10.027Z',
   description: 'description',
 }
 
-export const Btc = () => {
-  const address = '1KE89oa6aMNaVEPUeQPxLTmQGmXL6W1mGi'
-  const { setVisible, bindings } = useModal()
-  return (
-    <>
-      <Button auto size="mini" onClick={() => setVisible(true)}>
-        Show address of BTC
-      </Button>
-      <Modal {...bindings}>
-        <Modal.Title>BTC</Modal.Title>
-        <Modal.Subtitle>This is Witt's BTC address</Modal.Subtitle>
-        <Modal.Content>
-          <p>{address}</p>
-        </Modal.Content>
-        <Modal.Action onClick={({ close }) => close()}>OK</Modal.Action>
-      </Modal>
-    </>
-  )
-}
-
-export const Alipay = () => {
-  const { setVisible, bindings } = useModal()
-  return (
-    <>
-      <Button auto size="mini" onClick={() => setVisible(true)}>
-        Show Alipay
-      </Button>
-      <Modal {...bindings}>
-        <Modal.Title>Alipay</Modal.Title>
-        <Modal.Subtitle>Scan code with Alipay</Modal.Subtitle>
-        <Modal.Content>
-          <Image width={150} height={150} src="/assets/alipay.png" />
-        </Modal.Content>
-        <Modal.Action onClick={({ close }) => close()}>OK</Modal.Action>
-      </Modal>
-    </>
-  )
-}
-
-你好，我是维特，一个自由主义者，<del>JavaScript 全栈?</del> 工程师。对 Serverless 与 DX (Developer experience) 很感兴趣。
-喜欢 `CoffeeScript` 与 `Ruby`，但一直在写 `TypeScript`。主要贡献是创造一些应用和类库来帮助提高开发者体验。
+你好，我是维特，一个自由主义者，<del>JavaScript 全栈?</del> 工程师。对边缘化设施 (Edge) 与开发者体验很感兴趣。
+喜欢 `CoffeeScript` 与 `Ruby`，但一直在写 `TypeScript`。
 
-我很少写博客，_Hello World_ 文章实在讨人厌，不想成为智障。但水平不够写不出好东西，所以不写。如果你发现博文更新，那就是我的工作不饱和了。
-此外这里也提供 **Review** 服务，你可以在 <Link color rel="nofollow" target="_blank" href="https://review.unix.bio">Review It</Link> 中提交自己的 `Pull Request` 链接，
-我会在收到通知后立刻帮你分析代码，并尽可能多的提出对提高你编程能力有显著帮助的建议。
+主要贡献是创造一些应用和类库来帮助提高开发者体验。
+我很少写博客，_Hello World_ 文章实在讨人厌，不想成为智障。但水平不够写不出好东西，所以不写。如果你发现博文更新，那就是我的工作又开始不饱和了。
 
-我非常乐意倾听来自你的想法，你可以通过 <Link rel="nofollow" color target="_blank" href="mailto:[email protected]">邮件</Link> 与我取得联系。
-现在你所见的站点来自我的开源项目 <Link rel="nofollow" href="https://github.com/unix/unix.bio">unix/unix.bio (MIT)</Link> ，
+我非常乐意倾听来自你的想法，你可以通过 [邮件](mailto:[email protected]) 与我取得联系。现在你所见的站点来自我的开源项目 [unix/unix.bio (MIT)](https://github.com/unix/unix.bio)，
 你可以无偿的使用它构建属于自己的博客。
 
-由于缺乏时间维护开源项目，我当前已经不再接受赞助。非常感谢 <NextLink href="/others/sponsors"><Link color>所有的赞助者</Link></NextLink>。
+由于缺乏时间维护开源项目，我当前已经不再接受赞助。非常感谢 [所有的赞助者](/others/sponsors)。
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/fixed/projects.mdx

@@ -31,7 +31,7 @@ export const Item = ({ name, git, desc, image }) => {
 }
 
 我正在创造一些能够改善开发者体验的工具和开源项目，如果你有不错的想法或正面临一些重复性的工作，
-想要有任何改进？<Link rel="nofollow" color target="_blank" href="mailto:[email protected]">请让我知道</Link>。
+想要有任何改进？[请让我知道](mailto:[email protected])。
 
 <Spacer h={1.5} />
 <Grid.Container gap={2} justify="center">
@@ -60,10 +60,10 @@ export const Item = ({ name, git, desc, image }) => {
     image="https://repository-images.githubusercontent.com/245429351/7a54a280-88d5-11ea-96ae-6a2dfaf25b1b"
   />
   <Item
-    name="want"
-    git="unix/want"
-    desc="以不下载的方式在线运行命令，无负担运维。"
-    image="https://repository-images.githubusercontent.com/180941196/b2568a00-af03-11ea-8e25-f3cf612ebb84"
+    name="secret"
+    git="unix/secret"
+    desc="用离线加密与阅后即焚分享文本信息。"
+    image="https://user-images.githubusercontent.com/11304944/109418912-a9f89d80-7a05-11eb-9d72-1fcc2faa09ed.png"
   />
   <Item
     name="views.show"
@@ -76,44 +76,43 @@ export const Item = ({ name, git, desc, image }) => {
 <Dot type="success">维护中项目</Dot>
 <Spacer h={0.5} />
 
-- [geist-vue](https://github.com/geist-org/vue) Geist UI 的 Vue 实现
+- [want](https://github.com/unix/want) 通过 Serverless 管理 shell 模板
+- [next-password](https://github.com/unix/next-password) 使用密码保护你的 Next.js 应用
 - [koa-ts](https://github.com/unix/koa-ts) Koa2 与 TS 的最佳实践，包含脚手架
 - [done](https://github.com/unix/done) 自动化、标准化的 Release 工具
 - [cdn-viewer](https://github.com/unix/cdn-viewer) 以文件树审阅任何版本时的仓库或包
 - [func-service](https://github.com/unix/func-service) 使用 func 构建的 func 脚手架
 - [store-now](https://github.com/unix/store-now) 命令行工具文件存储
-- [geist-style](https://github.com/geist-org/style) Geist UI 的 CSS 实现
 - [typographic](https://github.com/geist-org/typographic) Geist UI 字体排版的实现
-- [geist-ui/vue-icons](https://github.com/geist-org/vue-icons) Geist UI 的 Vue 图标组件
-- [geist-ui/react-icons](https://github.com/geist-org/react-icons) Geist UI 的 React 图标组件
-- [v-decorators](https://github.com/unix/v-decorators) Vue 实用 decorators 库
+- [geist-ui/react-icons](https://github.com/geist-org/icons) Geist UI 的图标库
 
 <Spacer h={3} />
 <Dot type="warning">维护频率低的项目</Dot>
 <Spacer h={0.5} />
 
 - [aliyun-logs](https://github.com/unix/aliyun-logs) - 阿里云日志 SDK
-- [docs](https://github.com/unix/docs) Geek 风格的文档中心
 - [pages](https://github.com/unix/pages) - 为每个项目生成主页
-- [euv](https://github.com/DhyanaChina/euv) Vue 的控制反转实现
 - [vue-auto](https://github.com/unix/vue-auto) Vue 自动 import 服务
 - [koa-custom-response](https://github.com/unix/koa-custom-response) Koa Restful 定制方法库
 - [cobot](https://github.com/unix/cobot) - Gitlab 机器人框架，更语义化的事件与 Git Event 提示
 - [v2ex-cli](https://github.com/unix/v2ex-cli) v2ex 命令行工具
 - [todo-live](https://github.com/unix/todo-live) todo 命令行工具
+- [v-decorators](https://github.com/unix/v-decorators) Vue 实用 decorators 库
+- [img](https://github.com/unix/img) 在线优化图片以达到更好的社交体验
 
 <Spacer h={3} />
 <Dot type="error">不再维护的项目</Dot>
 <Spacer h={0.5} />
 
-- [ng-mocker](https://github.com/DhyanaChina/ng-mocker) 适用于 Angular 的开发 mock 库
+- [simpler-paper](https://github.com/unix/simpler-paper) static site 打包工具
+- [geist-style](https://github.com/geist-org/style) Geist UI 的 CSS 实现
+- [geist-vue](https://github.com/geist-org/vue) Geist UI 的 Vue 实现
+- [geist-ui/vue-icons](https://github.com/geist-org/vue-icons) Geist UI 的 Vue 图标组件
 - [storage-angular](https://github.com/DhyanaChina/storage-angular) Angular Storage 增强
 - [back-loader](https://github.com/unix/back-loader) 预加载资源库
-- [readyLoadImg](https://github.com/unix/readyLoadImg) 预加载图片资源
 - [react-native-smartbar](https://github.com/unix/react-native-smartbar) react-native tabbar
 - [touch-dog](https://github.com/unix/touch-dog) 划词翻译 Chrome 扩展
-- [simpler-paper](https://github.com/unix/simpler-paper) static site 打包工具
-- [easy-jsdelivr](https://github.com/unix/easy-jsdelivr) jsdelivr 界面管理与包文件查找
+- [docs](https://github.com/unix/docs) Geek 风格的文档中心
 - [element-angular](https://github.com/ElemeFE/element-angular) Element UI 的 Angular 实现
 
 <Spacer h={3} />
@@ -123,8 +122,8 @@ export const Item = ({ name, git, desc, image }) => {
 - [just-fine/cs](https://github.com/just-fine/cs) coffeescript 的众多框架脚手架，包含 [coffee-vue](https://github.com/just-fine/vue-coffee)
   [coffee-sails](https://github.com/just-fine/sails-coffee) [coffee-micro](https://github.com/just-fine/micro-coffee) [coffee-react-next](https://github.com/just-fine/next-coffee)
 - [just-fine/fine.sh-cli](https://github.com/just-fine/fine.sh-cli) 一键部署文档工具
-- [now-coffee](https://github.com/unix/now-coffee) Now 的 coffeescript 编译过
-- [DungeonWatchDog](https://github.com/unix/DungeonWatchDog) 魔兽世界 Lua 插件，地下城过滤器，[用户量>40k](https://www.curseforge.com/wow/addons/dungeonwatchdog)。
-- [Nioro](https://github.com/unix/Nioro) 魔兽世界 Lua 插件，框架界面增强，[用户量>14k](https://www.curseforge.com/wow/addons/Nioro)
+- [now-coffee](https://github.com/unix/now-coffee) Now 的 coffeescript 编译过程
+- [DungeonWatchDog](https://github.com/unix/DungeonWatchDog) 魔兽世界 Lua 插件，地下城过滤器，[用户量>60k](https://www.curseforge.com/wow/addons/dungeonwatchdog)。
+- [Nioro](https://github.com/unix/Nioro) 魔兽世界 Lua 插件，框架界面增强，[用户量>20k](https://www.curseforge.com/wow/addons/Nioro)
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/others/sponsors.mdx

@@ -1,6 +1,5 @@
 import { Layout } from 'lib/components'
-import { Link, Spacer, Text, User, useTheme, Grid } from '@geist-ui/core'
-import NextLink from 'next/link'
+import { Spacer, Text, User, useTheme, Grid } from '@geist-ui/core'
 import Sponsors from '../../sponsors'
 
 export const meta = {
@@ -32,11 +31,7 @@ export const SponsorList = () => {
   )
 }
 
-非常感谢各位慷慨的赞助者帮助我确保开源项目得以维护。捐赠不是必须的，但作为礼物，如果你有需要可以邮件我，
-我可以帮助你远程解决一些问题或是 Review 代码。
-
-你可以在 <NextLink href="/fixed/about"><Link color>关于我</Link></NextLink> 的页面找到捐赠链接，
-按月赞助来自于 GitHub Sponsors。
+非常感谢各位慷慨的赞助者。
 
 <Spacer h={2} />
 <SponsorList />