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;
  }