feat: Use Threads instead of ZhiHu

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "files.autoSave": "off"
 }

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+### v4.49.0 (2024-10-02)
+
+**Feature**
+
+- Use `Threads` instead of `ZhiHu`.
+- Use `snippets` page instead of `answers` page.
+
 ### v4.46.0 (2024-09-27)
 
 **Feature**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.48.0",
+  "version": "4.49.0",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",

src/bff.ts

@@ -15,7 +15,12 @@ import { getSitemapXml } from './server/getters/sitemap'
 import { getGTagScript } from './server/getters/gtag'
 import { getAllWallpapers } from './server/getters/wallpaper'
 import { getMyGoogleMap } from './server/getters/my-google-map'
-import { getThreadsProfile, getThreadsMedias, getThreadsMediaChildren } from './server/getters/threads'
+import {
+  getThreadsProfile,
+  getThreadsMedias,
+  getThreadsMediaChildren,
+  getThreadsMediaConversation
+} from './server/getters/threads'
 import {
   getInstagramProfile,
   getInstagramMedias,
@@ -26,7 +31,6 @@ import { getYouTubeChannelPlayLists, getYouTubeVideoListByPlayerListId } from '.
 import { getGitHubStatistic, getGitHubSponsors, getGitHubContributions } from './server/getters/github'
 import { getNPMStatistic } from './server/getters/npm'
 import { getDoubanMovies } from './server/getters/douban'
-import { getZhihuAnswers } from './server/getters/zhihu'
 import { getSongList } from './server/getters/netease-music'
 import { getWebFont, WebFontContentType } from './server/getters/webfont'
 import { enableDevRenderer } from './server/renderer/dev'
@@ -109,28 +113,6 @@ createExpressApp().then(async ({ app, server, cache }) => {
     responser(() => get163MusicCache())
   )
 
-  // Zhihu first page cache
-  const getZhihuFirstPageCache = cacher.interval(cache, {
-    key: 'zhihu_answers_offset_0',
-    ttl: hours(12),
-    interval: hours(3),
-    retry: minutes(10),
-    getter: getZhihuAnswers
-  })
-
-  // Zhihu answer route
-  app.get(`${TUN}/${TunnelModule.ZhihuAnswers}`, (request, response, next) => {
-    const offset = request.query.offset
-    if (!!offset && !Number.isInteger(Number(offset))) {
-      errorer(response, { code: BAD_REQUEST, message: 'Invalid params' })
-      return
-    }
-
-    responser(() => {
-      return offset ? getZhihuAnswers(Number(offset)) : getZhihuFirstPageCache()
-    })(request, response, next)
-  })
-
   // Threads profile
   const getThreadsProfileCache = cacher.interval(cache, {
     key: TunnelModule.ThreadsProfile,
@@ -190,6 +172,23 @@ createExpressApp().then(async ({ app, server, cache }) => {
     })(request, response, next)
   })
 
+  // Threads media conversation
+  app.get(`${TUN}/${TunnelModule.ThreadsMediaConversation}`, (request, response, next) => {
+    const mediaId = request.query.id
+    if (!mediaId || typeof mediaId !== 'string') {
+      errorer(response, { code: BAD_REQUEST, message: 'Invalid params' })
+      return
+    }
+
+    responser(() => {
+      return cacher.passive(cache, {
+        key: `threads_media_conversation_${mediaId}`,
+        ttl: days(7),
+        getter: () => getThreadsMediaConversation(mediaId)
+      })
+    })(request, response, next)
+  })
+
   // Instagram profile
   app.get(
     `${TUN}/${TunnelModule.InstagramProfile}`,

src/config/app.config.ts

@@ -44,7 +44,6 @@ export const IDENTITIES = Object.freeze({
   YOUTUBE_CHANNEL_SHORT_ID: '@surmon_v',
   MUSIC_163_BGM_ALBUM_ID: '638949385',
   DOUBAN_USER_ID: '56647958',
-  ZHIHU_USER_NAME: 'surmon',
   GITHUB_USER_NAME: 'surmon-china',
   INSTAGRAM_USERNAME: 'surmon666',
   THREADS_USER_NAME: 'surmon666',
@@ -73,8 +72,7 @@ export const VALUABLE_LINKS = Object.freeze({
   YOUTUBE_CHANNEL: `https://www.youtube.com/${IDENTITIES.YOUTUBE_CHANNEL_SHORT_ID}`,
   TELEGRAM: 'https://t.me/surmon',
   OPENSEA: 'https://opensea.io/Surmon',
-  ZHIHU: `https://www.zhihu.com/people/${IDENTITIES.ZHIHU_USER_NAME}/answers`,
-  QUORA: `https://www.quora.com/profile/Surmon/answers`,
+  ZHIHU: `https://www.zhihu.com/people/surmon/answers`,
   DOUBAN: 'https://www.douban.com/people/nocower',
   DOUBAN_MOVIE: `https://movie.douban.com/people/nocower/collect`,
   LINKEDIN: 'https://www.linkedin.com/in/surmon',

src/config/bff.yargs.ts

@@ -10,4 +10,3 @@ const argv = yargs(process.argv.slice(2)).argv
 export const YOUTUBE_API_KEY = argv.youtube_token
 export const INSTAGRAM_TOKEN = argv.instagram_token
 export const THREADS_TOKEN = argv.threads_token
-export const ZHIHU_COOKIE = argv.zhihu_cookie

src/constants/tunnel.ts

@@ -12,14 +12,14 @@ export enum TunnelModule {
   ThreadsProfile = 'threads_profile',
   ThreadsMedias = 'threads_medias',
   ThreadsMediaChildren = 'threads_media_children',
+  ThreadsMediaConversation = 'threads_media_conversation',
   InstagramProfile = 'instagram_profile',
   InstagramMedias = 'instagram_medias',
   InstagramMediaChildren = 'instagram_media_children',
   InstagramCalendar = 'instagram_calendar',
   BingWallpaper = 'bing_wallpaper',
   NetEaseMusic = 'netease_music',
   DoubanMovies = 'douban_movies',
-  ZhihuAnswers = 'zhihu_answers',
   GitHubSponsors = 'github_sponsors',
   GitHubContributions = 'github_contributions',
   StatisticGitHubJson = 'statistic_github_json',

src/pages/index/threads.vue

@@ -59,7 +59,7 @@
             </ulink>
             <div class="count">
               <p class="title">
-                <i18n en="Latest" zh="时新" />
+                <i18n en="Latest" zh="时时" />
               </p>
               <p class="secondary">
                 <i18n en="threads" zh="清静念" />

src/pages/snippets/desktop/index.vue

@@ -1,61 +1,45 @@
 <script lang="ts" setup>
-  import { shallowRef } from 'vue'
-  import { useUniversalFetch } from '/@/universal'
   import { LanguageKey } from '/@/language'
-  import { NULL } from '/@/constants/value'
   import { VALUABLE_LINKS } from '/@/config/app.config'
-  import type { ZhihuAnswerItem } from '/@/server/getters/zhihu'
   import PageBanner from '/@/components/common/banner.vue'
   import Loadmore from '/@/components/common/loadmore.vue'
-  import { i18nTitle, useSnippetsPageMeta, useSnippetsPageData } from '../shared'
-  import AnswerMasonryList from './masonry.vue'
-  import AnswerDetail from '../detail.vue'
-  import AnswerCard from '../card.vue'
-
-  const modalActiveAnswer = shallowRef<ZhihuAnswerItem | null>(null)
-  const openAnswerModal = (answer: ZhihuAnswerItem) => {
-    modalActiveAnswer.value = answer
-  }
-  const closeAnswerModal = () => {
-    modalActiveAnswer.value = NULL
-  }
+  import { useUniversalFetch } from '/@/universal'
+  import { i18nTitle, useSnippetsPageMeta } from '../shared'
+  import { useThreadsMediasData } from '../threads/shared'
+  import ThreadsCard from '../threads/card.vue'
+  import MasonryList from './masonry.vue'
 
-  const { zhihuLatestAnswers, loading, finished, allAnswers, fetchMoreAnswers } = useSnippetsPageData()
+  const { latestThreadsStore, loading, finished, allMedias, fetchMoreMedias } = useThreadsMediasData()
 
   useSnippetsPageMeta()
-  useUniversalFetch(() => zhihuLatestAnswers.fetch())
+  useUniversalFetch(() => latestThreadsStore.fetch())
 </script>
 
 <template>
-  <div class="answers-page">
+  <div class="snippets-page">
     <page-banner class="page-banner" video="/videos/clips/forest-1.mp4" :video-position="72" cdn>
       <template #title>
         <webfont><i18n v-bind="i18nTitle" /></webfont>
       </template>
       <template #description>
-        <ulink :href="VALUABLE_LINKS.ZHIHU" class="link"><i class="iconfont icon-zhihu-full"></i></ulink>
-        <divider type="vertical" size="lg" color="#ffffffcc" />
         <ulink :href="VALUABLE_LINKS.THREADS" class="link">
           <i class="iconfont icon-threads"></i>
           Threads
         </ulink>
         <divider type="vertical" size="lg" color="#ffffffcc" />
-        <ulink :href="VALUABLE_LINKS.QUORA" class="link">
-          <i class="iconfont icon-quora"></i>
-          Quora
-        </ulink>
+        <ulink :href="VALUABLE_LINKS.ZHIHU" class="link"><i class="iconfont icon-zhihu-full"></i></ulink>
       </template>
     </page-banner>
     <container class="page-bridge"></container>
     <container class="page-content">
-      <placeholder :data="zhihuLatestAnswers.data?.data" :loading="zhihuLatestAnswers.fetching">
+      <placeholder :data="latestThreadsStore.data?.data" :loading="latestThreadsStore.fetching">
         <template #placeholder>
-          <empty class="answers-empty" key="empty">
+          <empty class="data-empty" key="empty">
             <i18n :k="LanguageKey.EMPTY_PLACEHOLDER" />
           </empty>
         </template>
         <template #loading>
-          <div key="loading" class="answers-loading">
+          <div key="loading" class="data-loading">
             <div class="item" v-for="item in 3 * 3" :key="item">
               <div class="item-skeleton" v-for="i in 3" :key="i">
                 <skeleton-line />
@@ -65,19 +49,19 @@
         </template>
         <template #default>
           <div>
-            <answer-masonry-list :answers="allAnswers" :cols="3">
-              <template #answer="{ answer }">
-                <answer-card :answer="answer" @click="openAnswerModal(answer)" />
+            <masonry-list :data="allMedias" :cols="3">
+              <template #item="{ data }">
+                <threads-card :media="data" />
               </template>
-            </answer-masonry-list>
+            </masonry-list>
             <loadmore
-              v-if="!zhihuLatestAnswers.fetching && !finished"
+              v-if="!latestThreadsStore.fetching && !finished"
               class="loadmore"
               :loading="loading"
-              @loadmore="fetchMoreAnswers"
+              @loadmore="fetchMoreMedias"
             >
               <template #normal>
-                <button class="normal" @click="fetchMoreAnswers">
+                <button class="normal" @click="fetchMoreMedias">
                   <i class="iconfont icon-loadmore"></i>
                 </button>
               </template>
@@ -89,21 +73,14 @@
         </template>
       </placeholder>
     </container>
-    <client-only>
-      <popup :visible="!!modalActiveAnswer" :scroll-close="false" @close="closeAnswerModal">
-        <div class="answer-detail-wrapper">
-          <answer-detail v-if="modalActiveAnswer" :answer="modalActiveAnswer" />
-        </div>
-      </popup>
-    </client-only>
   </div>
 </template>
 
 <style lang="scss" scoped>
   @import '/src/styles/variables.scss';
   @import '/src/styles/mixins.scss';
 
-  .answers-page {
+  .snippets-page {
     min-height: $full-page-active-content-height;
 
     .page-banner {
@@ -140,7 +117,7 @@
       }
     }
 
-    .answers-loading {
+    .data-loading {
       padding: 0;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
@@ -161,7 +138,7 @@
       }
     }
 
-    .answers-empty {
+    .data-empty {
       font-weight: bold;
       font-size: $font-size-h3;
     }