feat(app): improve auchor architecture

package.json

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

src/components/comment/index.vue

@@ -16,7 +16,7 @@
  import { useCommentStore, CommentFetchParams } from '/@/stores/comment'
  import { GAEventCategories } from '/@/constants/gtag'
  import * as ANCHORS from '/@/constants/anchor'
- import * as URL_HASHS from '/@/constants/url-hash'
+ import * as URL_HASHS from '/@/constants/anchor'
  import { UNDEFINED } from '/@/constants/value'
  import { SortType } from '/@/constants/state'
  import { Author } from '/@/interfaces/comment'

src/components/comment/list/item.vue

@@ -4,7 +4,7 @@
  import { useCommentStore } from '/@/stores/comment'
  import { useIdentityStore, UserType } from '/@/stores/identity'
  import { getCommentItemElementId } from '/@/constants/anchor'
- import { getCommentUrlHashById } from '/@/constants/url-hash'
+ import { getCommentUrlHashById } from '/@/constants/anchor'
  import { LanguageKey } from '/@/language'
  import { UNDEFINED } from '/@/constants/value'
  import { Comment } from '/@/interfaces/comment'

src/components/common/markdown.vue

@@ -88,16 +88,20 @@
  font-weight: 700;
  text-indent: 0;
  &:hover {
- .anchor {
+ .anchor.static {
+ color: $text;
+ }
+ .anchor.link {
  color: $primary;
+ cursor: pointer;
  }
  }
 
  .anchor {
  margin-right: $xs-gap;
  color: $text-secondary;
+ text-decoration: none;
  user-select: none;
- cursor: pointer;
  }
  }
 

src/constants/anchor.ts

@@ -18,8 +18,15 @@ export const ARTICLE_SHARE_ELEMENT_ID = 'A_article_share'
 export const ARTICLE_RELATED_ELEMENT_ID = 'A_article_related'
 
 export const ARTICLE_CONTENT_HEADING_ELEMENT_ID_PREFIX = 'A_article_content_heading'
-export const getArticleContentHeadingElementId = (level: number, heading: string) => {
- return `${ARTICLE_CONTENT_HEADING_ELEMENT_ID_PREFIX}_${level}_${heading}`
+export const getArticleContentHeadingElementId = (level: number, anchor: string) => {
+ return `${ARTICLE_CONTENT_HEADING_ELEMENT_ID_PREFIX}_${level}_${anchor}`
+}
+
+export const getArticleHeadingUrlHash = (heading: string) => {
+ return heading
+ .replace(/[^\p{L}\d\s\-_]/gu, '')
+ .toLowerCase()
+ .replace(/\s+/g, '-')
 }
 
 export const COMMENT_ELEMENT_ID = 'A_comment_warpper'
@@ -30,3 +37,14 @@ export const COMMENT_ITEM_ELEMENT_ID_PREFIX = 'A_comment_content_item'
 export const getCommentItemElementId = (commentId: string | number) => {
  return `${COMMENT_ITEM_ELEMENT_ID_PREFIX}_${commentId}`
 }
+
+export const COMMENTS_URL_HASH = 'comments'
+export const COMMENT_ITEM_URL_HASH_PREFIX = 'comment-'
+
+export const getCommentIdByUrlHash = (hash: string) => {
+ return hash.replace(COMMENT_ITEM_URL_HASH_PREFIX, '')
+}
+
+export const getCommentUrlHashById = (commentId: string | number) => {
+ return `${COMMENT_ITEM_URL_HASH_PREFIX}${commentId}`
+}

src/pages/article/index.vue

@@ -5,7 +5,7 @@
  import { useUniversalFetch } from '/@/universal'
  import { useStores } from '/@/stores'
  import * as ANCHORS from '/@/constants/anchor'
- import * as URL_HASHS from '/@/constants/url-hash'
+ import * as URL_HASHS from '/@/constants/anchor'
  import { GAEventCategories } from '/@/constants/gtag'
  import { LanguageKey } from '/@/language'
  import { CUSTOM_ELEMENTS } from '/@/effects/elements'
@@ -129,7 +129,7 @@
  const elementID =
  urlHash === URL_HASHS.COMMENTS_URL_HASH
  ? ANCHORS.COMMENT_ELEMENT_ID
- : articleHeadings.find(({ text }) => text === urlHash)?.id
+ : articleHeadings.find(({ anchor }) => anchor === urlHash)?.id
 
  if (elementID && document.getElementById(elementID)) {
  // Allow a certain amount of time to ensure that the browser is rendered.

src/stores/_fetch.ts

@@ -15,7 +15,7 @@ export interface FetchStoreOptions<Data> {
  shallow?: boolean
 }
 
-export const useFetchStore = <Data>(options: FetchStoreOptions<Data>) => {
+export const createFetchStore = <Data>(options: FetchStoreOptions<Data>) => {
  // default: shallow
  const isShallow = isUndefined(options.shallow) ? true : options.shallow
  const refWrapper = isShallow ? shallowRef : ref

src/stores/announcement.ts

@@ -5,13 +5,13 @@
  */
 
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { Announcement } from '/@/interfaces/announcement'
 import { PaginationList } from '/@/interfaces/common'
 import nodepress from '/@/services/nodepress'
 
 export const useAnnouncementStore = defineStore('announcement', () => {
- return useFetchStore<Announcement[]>({
+ return createFetchStore<Announcement[]>({
  data: [],
  preclean: true,
  async fetcher(params?: any) {

src/stores/archive.ts

@@ -6,7 +6,7 @@
 
 import { computed } from 'vue'
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { Archive } from '/@/interfaces/archive'
 import { Article } from '/@/interfaces/article'
 import { dateToHuman, HumanDate } from '/@/transforms/moment'
@@ -21,7 +21,7 @@ export type ArchiveTreeList = Array<{
 }>
 
 export const useArchiveStore = defineStore('archive', () => {
- const fetchStore = useFetchStore<Archive | null>({
+ const fetchStore = createFetchStore<Archive | null>({
  data: null,
  once: true,
  async fetcher() {

src/stores/article.ts

@@ -6,15 +6,15 @@
 
 import { ref, shallowRef, computed } from 'vue'
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { useIdentityStore } from './identity'
 import { useCDNDomain } from '/@/app/context'
+import { SortType } from '/@/constants/state'
 import { Article } from '/@/interfaces/article'
 import { Pagination, PaginationList } from '/@/interfaces/common'
-import { SortType } from '/@/constants/state'
-import { getArticleContentHeadingElementId } from '/@/constants/anchor'
-import { getStaticURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
+import { getArticleContentHeadingElementId, getArticleHeadingUrlHash } from '/@/constants/anchor'
 import { markdownToHTML, getMarkdownSplitIndex, MarkdownRenderOption } from '/@/transforms/markdown'
+import { getStaticURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
 import { delayPromise } from '/@/utils/delayer'
 import { isClient } from '/@/app/environment'
 import { RENDER_LONG_ARTICLE_THRESHOLD } from '/@/config/app.config'
@@ -23,7 +23,7 @@ import nodepress from '/@/services/nodepress'
 export const ARTICLE_API_PATH = '/article'
 
 const createSpecialArticleListStore = (_params: Record<string, any>, perPage: number = 8) => {
- return useFetchStore<Article[]>({
+ return createFetchStore<Article[]>({
  once: true,
  data: [],
  async fetcher() {
@@ -86,8 +86,9 @@ export const useArticleListStore = defineStore('articleList', () => {
 })
 
 interface ArticleHeading {
- text: string
  level: number
+ text: string
+ anchor: string
  id: string
 }
 
@@ -97,11 +98,11 @@ const renderArticleMarkdown = (markdown: string, imageSourceGetter: MarkdownRend
  const html = markdownToHTML(markdown, {
  sanitize: false,
  imageSourceGetter,
- headingIdGetter: (_, level, raw) => {
- const escaped = raw.toLowerCase().replace(/[^a-zA-Z0-9\u4E00-\u9FA5]+/g, '-')
- const id = getArticleContentHeadingElementId(level, escaped)
- headings.push({ level, id, text: raw })
- return id
+ headingIdentifierGetter: (_, level, raw) => {
+ const anchor = getArticleHeadingUrlHash(raw)
+ const id = getArticleContentHeadingElementId(level, anchor)
+ headings.push({ level, text: raw, id, anchor })
+ return { id, anchor }
  }
  })
 
@@ -143,7 +144,6 @@ export const useArticleDetailStore = defineStore('articleDetail', () => {
  if (!isOriginalStaticURL(src)) {
  return src
  }
-
  const cdnDomain = useCDNDomain()
  const path = getStaticPath(src)
  return getStaticURL(cdnDomain, path)

src/stores/basic.ts

@@ -6,15 +6,15 @@
 
 import { computed } from 'vue'
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { CommentPostId } from '/@/constants/state'
 import { UNDEFINED } from '/@/constants/value'
 import { AdminInfo, AppOption, AppAdConfig } from '/@/interfaces/option'
 import { useIdentityStore, UserType } from './identity'
 import nodepress from '/@/services/nodepress'
 
 export const useAdminInfoStore = defineStore('adminInfo', () => {
- return useFetchStore<AdminInfo | null>({
+ return createFetchStore<AdminInfo | null>({
  data: null,
  async fetcher() {
  const response = await nodepress.get<AdminInfo>('/auth/admin')
@@ -24,7 +24,7 @@ export const useAdminInfoStore = defineStore('adminInfo', () => {
 })
 
 export const useAppOptionStore = defineStore('appOption', () => {
- const fetchStore = useFetchStore<AppOption | null>({
+ const fetchStore = createFetchStore<AppOption | null>({
  shallow: false,
  data: null,
  async fetcher() {

src/stores/calendar.ts

@@ -6,15 +6,15 @@
 
 import { computed } from 'vue'
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { TunnelModule } from '/@/constants/tunnel'
 import nodepress from '/@/services/nodepress'
 import tunnel from '/@/services/tunnel'
 
 type CalendarDay = { date: string; count: number }
 
 export const useArticleCalendarStore = defineStore('articleCalendar', () => {
- return useFetchStore<CalendarDay[]>({
+ return createFetchStore<CalendarDay[]>({
  once: true,
  data: [],
  async fetcher() {
@@ -27,7 +27,7 @@ export const useArticleCalendarStore = defineStore('articleCalendar', () => {
 })
 
 export const useInstagramCalendarStore = defineStore('instagramCalendar', () => {
- return useFetchStore<CalendarDay[]>({
+ return createFetchStore<CalendarDay[]>({
  once: true,
  data: [],
  fetcher: () => {
@@ -37,7 +37,7 @@ export const useInstagramCalendarStore = defineStore('instagramCalendar', () =>
 })
 
 export const useGitHubCalendarStore = defineStore('githubContributionsCalendar', () => {
- const fetchStore = useFetchStore({
+ const fetchStore = createFetchStore({
  once: true,
  data: null,
  fetcher: () => tunnel.dispatch(TunnelModule.GitHubContributions)

src/stores/category.ts

@@ -5,13 +5,13 @@
  */
 
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { Category } from '/@/interfaces/category'
 import { PaginationList } from '/@/interfaces/common'
 import nodepress from '/@/services/nodepress'
 
 export const useCategoryStore = defineStore('category', () => {
- return useFetchStore<Category[]>({
+ return createFetchStore<Category[]>({
  data: [],
  once: true,
  fetcher() {

src/stores/media.ts

@@ -5,7 +5,7 @@
  */
 
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import { TunnelModule } from '/@/constants/tunnel'
 import { isClient } from '/@/app/environment'
 import { delayPromise } from '/@/utils/delayer'
@@ -15,7 +15,7 @@ import tunnel from '/@/services/tunnel'
 
 // Douban movies
 export const useDoubanMoviesStore = defineStore('doubanMovies', () => {
- return useFetchStore({
+ return createFetchStore({
  once: true,
  data: null,
  fetcher: () => tunnel.dispatch(TunnelModule.DoubanMovies)
@@ -24,7 +24,7 @@ export const useDoubanMoviesStore = defineStore('doubanMovies', () => {
 
 // Instagram timeline
 export const useInstagramTimelineStore = defineStore('instagramTimeline', () => {
- return useFetchStore<InstagramMediaListResponse | null>({
+ return createFetchStore<InstagramMediaListResponse | null>({
  data: null,
  fetcher: () => {
  const request = tunnel.dispatch<InstagramMediaListResponse>(TunnelModule.InstagramMedias)
@@ -35,15 +35,15 @@ export const useInstagramTimelineStore = defineStore('instagramTimeline', () =>
 
 // Instagram profile
 export const useInstagramProfileStore = defineStore('instagramProfile', () => {
- return useFetchStore<InstagramProfile | null>({
+ return createFetchStore<InstagramProfile | null>({
  data: null,
  fetcher: () => tunnel.dispatch<InstagramProfile>(TunnelModule.InstagramProfile)
  })
 })
 
 // YouTube playlist
 export const useYouTubePlayListStore = defineStore('youtubePlaylist', () => {
- return useFetchStore<Array<any>>({
+ return createFetchStore<Array<any>>({
  data: [],
  async fetcher() {
  const response = await tunnel.dispatch<Array<any>>(TunnelModule.YouTubePlaylist)
@@ -55,7 +55,7 @@ export const useYouTubePlayListStore = defineStore('youtubePlaylist', () => {
 
 // Twitter userinfo
 export const useTwitterStore = defineStore('twitterAggregate', () => {
- return useFetchStore<TwitterAggregate | null>({
+ return createFetchStore<TwitterAggregate | null>({
  data: null,
  fetcher: () => {
  return tunnel.dispatch<TwitterAggregate>(TunnelModule.TwitterAggregate)
@@ -65,7 +65,7 @@ export const useTwitterStore = defineStore('twitterAggregate', () => {
 
 // My Google map
 export const useMyGoogleMapStore = defineStore('myGoogleMap', () => {
- return useFetchStore({
+ return createFetchStore({
  once: true,
  data: null,
  fetcher: () => tunnel.dispatch(TunnelModule.MyGoogleMap)

src/stores/sponsor.ts

@@ -6,13 +6,13 @@
 
 import { computed } from 'vue'
 import { defineStore } from 'pinia'
-import { useFetchStore } from './_fetch'
+import { createFetchStore } from './_fetch'
 import type { GitHubSponsorsResponse, GitHubSponsorUser } from '/@/server/getters/github'
 import { TunnelModule } from '/@/constants/tunnel'
 import tunnel from '/@/services/tunnel'
 
 export const useSponsorStore = defineStore('githubSponsor', () => {
- const fetchStore = useFetchStore<GitHubSponsorsResponse | null>({
+ const fetchStore = createFetchStore<GitHubSponsorsResponse | null>({
  fetcher: () => tunnel.dispatch<GitHubSponsorsResponse>(TunnelModule.GitHubSponsors),
  once: true,
  data: null