feat: go admin and editing

Signed-off-by: Innei <i@innei.in>

src/app/(page-detail)/[slug]/pageExtra.tsx

@@ -8,6 +8,7 @@ import type { PropsWithChildren } from 'react'
 
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
 import { Markdown } from '~/components/ui/markdown'
+import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
 import { noopArr } from '~/lib/noop'
 import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
 import { useCurrentPageDataSelector } from '~/providers/page/CurrentPageDataProvider'
@@ -63,10 +64,18 @@ export const PageSubTitle = () => {
 }
 export const PageTitle = () => {
   const title = useCurrentPageDataSelector((data) => data?.title)
+  const id = useCurrentPageDataSelector((data) => data?.id)
   return (
-    <h1 className="text-center lg:text-left">
-      <Balancer>{title}</Balancer>
-    </h1>
+    <>
+      <h1 className="text-center lg:text-left">
+        <Balancer>{title}</Balancer>
+      </h1>
+      <GoToAdminEditingButton
+        id={id!}
+        type="pages"
+        className="absolute -top-6 right-0"
+      />
+    </>
   )
 }
 export const HeaderMetaInfoSetting = () => {

src/app/friends/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-target-blank */
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
@@ -150,7 +151,6 @@ const Card: FC<{ link: LinkModel }> = ({ link }) => {
       layoutId={link.id}
       href={link.url}
       target="_blank"
-      rel="noreferrer"
       role="link"
       aria-label={`Go to ${link.name}'s website`}
       className="relative flex flex-col items-center justify-center"
@@ -183,7 +183,7 @@ const FavoriteSection: FC<FriendSectionProps> = ({ data }) => {
       {data.map((link) => {
         return (
           <li key={link.id}>
-            <a href={link.url} target="_blank" rel="noreferrer">
+            <a href={link.url} target="_blank">
               {link.name}
             </a>
             <span className="meta">{link.description || ''}</span>

src/app/notes/[id]/pageExtra.tsx

@@ -13,6 +13,7 @@ import { MdiClockOutline } from '~/components/icons/clock'
 import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { Markdown } from '~/components/ui/markdown'
+import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
 import { parseDate } from '~/lib/datetime'
 import { noopArr } from '~/lib/noop'
 import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRecordProvider'
@@ -22,9 +23,19 @@ import styles from './page.module.css'
 
 export const NoteTitle = () => {
   const title = useCurrentNoteDataSelector((data) => data?.data.title)
+  const id = useCurrentNoteDataSelector((data) => data?.data.id)
+
   if (!title) return null
   return (
-    <h1 className="mt-8 text-left font-bold text-base-content/95">{title}</h1>
+    <>
+      <h1 className="mt-8 text-left font-bold text-base-content/95">{title}</h1>
+
+      <GoToAdminEditingButton
+        type="notes"
+        id={id!}
+        className="absolute -top-6 right-0"
+      />
+    </>
   )
 }
 

src/app/posts/(post-detail)/[category]/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { PostCopyright } from '~/components/widgets/post/PostCopyright'
 import { PostOutdate } from '~/components/widgets/post/PostOutdate'
 import { PostRelated } from '~/components/widgets/post/PostRelated'
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
+import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { SubscribeBell } from '~/components/widgets/subscribe/SubscribeBell'
 import { XLogInfoForPost, XLogSummaryForPost } from '~/components/widgets/xlog'
@@ -45,6 +46,11 @@ const PostPage = () => {
           <h1 className="text-center">
             <Balancer>{title}</Balancer>
           </h1>
+          <GoToAdminEditingButton
+            id={id!}
+            type="posts"
+            className="absolute -top-6 right-0"
+          />
 
           <PostMetaBarInternal className="mb-8 justify-center" />
 

src/atoms/url.ts

@@ -29,3 +29,13 @@ export const useAppUrl = () => {
     ...url,
   }
 }
+
+export const useResolveAdminUrl = () => {
+  const { adminUrl } = useAppUrl()
+  return (path: string) => {
+    if (!adminUrl) {
+      return ''
+    }
+    return adminUrl.replace(/\/$/, '').concat(path || '')
+  }
+}

src/components/ui/link-card/LinkCard.module.css

@@ -16,7 +16,7 @@
 
   @apply cursor-pointer border font-sans no-underline;
   @apply [&_*]:!not-italic;
-  @apply border border-slate-100 bg-gray-100/80 dark:border-neutral-700 dark:bg-neutral-800;
+  @apply border border-slate-200/80 bg-gray-100/80 dark:border-neutral-700 dark:bg-zinc-800;
   @apply transition-colors duration-200;
 }
 

src/components/ui/markdown/parsers/mention.tsx

@@ -63,7 +63,7 @@ export const MentionRule: MarkdownToJSX.Rule = {
           target="_blank"
           rel="noreferrer nofollow"
           href={`${urlPrefix}${name}`}
-          className="no-underline"
+          className="underline-offset-2"
         >
           {displayName || name}
         </a>

src/components/widgets/shared/GoToAdminEditingButton.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useIsLogged, useResolveAdminUrl } from '~/atoms'
+import { clsxm } from '~/lib/helper'
+
+interface Props {
+  type: 'notes' | 'pages' | 'posts'
+  id: string
+}
+export const GoToAdminEditingButton: Component<Props> = (props) => {
+  const isLogin = useIsLogged()
+  const resolveAdminUrl = useResolveAdminUrl()
+  const { id, type, className } = props
+  if (!isLogin) return null
+
+  return (
+    <a
+      href={resolveAdminUrl(`#/${type}/edit?id=${id}`)}
+      data-hide-print
+      target="_blank"
+      className={clsxm(
+        'flex h-8 w-8 rounded-full text-accent no-underline opacity-80 ring-1 ring-slate-200 duration-200 center hover:opacity-100 dark:ring-neutral-800',
+        className,
+      )}
+      rel="noreferrer"
+    >
+      <i className="icon-[mingcute--quill-pen-line]" />
+      <span className="sr-only">编辑</span>
+    </a>
+  )
+}