Misty草稿博客 - nextjs-notion-starter-kit
Search

Misty草稿博客 - nextjs-notion-starter-kit

大类
Env
Life
技术标签
云服务-白嫖
开发-HookPatch-JS
优先级
Medium
开始日期
Jan 27, 2022
状态
Accumulative
Public
Public
最后更新
Nov 13, 2022

前言

这是这个drafts.misty.moe的后端。
我的很多项目笔记就在notion里做的，我又不爱整理，所以我想着只要把这个notion页面渲染出来，就可以把我知识共享出来了。
 

迭代

第一版 - 解决notion爬取的问题

原版的 nextjs-notion-starter-kit 是直接对着公开页面爬的，所以说他根本就没过滤，就算我在页面上设置了filter只显示这些，他还是会把所有的东西都爬取一遍。
问题是：
  1. 显示上的隐私：我的很多项目是渗透、逆向之类的项目，有些是不能发的，所以我需要一个filter
  1. 请求上的鉴权：他只支持对着公开页面爬取，这导致我的全项目集也必须公开
    1. 如果我只公开带filter的table view（意思是只公开那个view而不是公开这个collection本体），那么他会什么都不显示
  1. 速度：我的很多大项目里面非常多block和页面，渲染他没有意义，干脆就不应该让他渲染
 
所以我：
  1. 加入了authToken的支持，这样能爬取一个半公开的页面
  1. 加入了filter的支持，这样他就不会爬取不显示的页面了
  1. 加入了一些sleep，可以通过环境变量控制时间和并行线程数，这样就可以避免notion 500了
  1. 显示table view的列标题，方便用户查找
  1. 经过一天的debug，最后发现他只要有一个页面拉取错误就直接整个都error了，改了一下，让他忽略错误
  1. 第一次用到yarn link来魔改package
      2. notion image
 
未完全解决问题：
  • 我的这个东西似乎不能自动更新，必须要我手动redeploy到vercel才会更新文章。
    • 按理来说Next支持动态部分更新，但是我整不出来
    • 我当时实在是缺少js的知识，力不从心，所以作罢
    • 最后用了一个折中的方案，用github CI每隔4小时 commit 并 push一下
 

第二版 - 解决自动更新问题

这次我发现我的网站有这些问题：
  1. token过期了很久了，但是我却完全没想起来，得要有个自动更新token的方案
  1. 我需要google索引我的站点，但google一直说我的站点500，虽然我这边都是200，但是确实vercel function logs那边是有错误的
  1. 网站一直都没有自动更新功能
  1. sitemap一直也用不了
 
  • 针对于第一个问题，我写了一个surge脚本，只要我打开手机上的notion，就会自动通过Vercel的RESTAPI，将token写入到vercel环境变量里面，实现自动更新token
  • 针对于第二个问题，通过debug他的function log，最后发现是yarn link的问题
      • 我之前的做法有这些问题：
      1. 我在/tmp里面clone的我的package repo，在build的时候会好好的，但是到serverless functions的时候，包就找不到了
        1. 我换到了在./node_modules下面clone，解决
      1. 因为这个代码库用的是monorepo的方案，所以必须要yarn link才能魔改。yarn link会将link指到repo外面的地方，比如node_module下面的link就会是../../.config/yarn/link/XXX，在repo外的内容同样不会被next上传，所以包又找不到了
        1. yarn 官方的方案是升级yarn 2.0，配置workspace
        2. 我选择全部转为手动在yarn install配置symlink
      1. 我之前没有link react-notion-x，这实际上导致react-notion-x根本没用上我的修改
      1. 我link了react-notion-x后，结果出现useMemo的hook错误，查询原因是因为我有两份react被打包进了webpack
        1. 通过npm ls react确实是这样
        2. 官方推荐是通过resolutions字段指定：https://classic.yarnpkg.com/en/docs/selective-version-resolutions/
        3. 民间的建议是把主app的repo里node_modules的react链接到包的repo的node_modules react里
            4. 经实验有效：）
  • 第三个问题实际上就是第二个问题，因为缺失包，自然也没法在serverless function里面更新
  • 第四个问题是因为作者比较笨，不知道如何SSG一个巨大的xml
    • nextjs只能ssg出来html，虽然针对ssg可以设置一部分header，但是不能设置content type，永远是text/html
    • 但是sitemap特别大，确实只能ssg
    • 我想了个鬼点子，把sitemap的巨大json转化成html，再在用的时候请求他读出来
      • dangerouslySetInnerHTML可以直接存原始的json，不会被用html entity转义
        • <>
  <div id="sitemapJson" dangerouslySetInnerHTML={{__html: serializeSiteMap(siteMap)}} />
</>
      • 用的时候indexOf+substr一下就可以parse JSON了
    • 工作良好：）
 

第三版：解决Notion图片与文件链接

  • Notion更新了图片的代理方式，现在不会把X-Amz-Signature公开出来了，所以图片都显示不了
  • 通过Cloudflare Worker代理了一波，这样就可以正常显示了（
Copyright 2022 Misty