feat: update blockquote style for note

Signed-off-by: Innei <[email protected]>

Author: Innei

src/app/notes/[id]/page.module.css

@@ -5,6 +5,51 @@
       border-bottom: 1px solid #00b8bb41;
     }
 
+    blockquote {
+      & {
+        .paragraph > span.indent {
+          margin-left: 0 !important;
+        }
+
+        .paragraph:first-child::first-letter {
+          float: none;
+          font-size: 1em;
+          margin: 0;
+        }
+
+        .paragraph,
+        blockquote > ph {
+          padding: 10px 0;
+          margin: 0;
+        }
+      }
+
+      margin-left: calc(-3em + 2px);
+      margin-right: calc(-3em + 2px);
+      border: none;
+
+      line-height: 1.8;
+      padding: 1em 1em 1em 2em;
+      outline: none !important;
+      background: #f5fafd;
+      font-style: normal;
+
+      :global(html[data-theme='dark']) & {
+        background: theme(colors.base-100);
+      }
+
+      & span::first-letter {
+        font-size: 1em;
+        float: none;
+      }
+
+      @media screen and (max-width: 599px) {
+        margin-left: -1.25em;
+        margin-right: -1.25em;
+        padding: 1em 3em;
+      }
+    }
+
     .paragraph:not(:nth-child(1)) > span.indent {
       &:nth-child(1) {
         margin-left: 2rem;

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

@@ -25,7 +25,7 @@ import { useNoteByNidQuery, useNoteData } from '~/hooks/data/use-note'
 import { mood2icon, weather2icon } from '~/lib/meta-icon'
 import { ArticleElementProvider } from '~/providers/article/article-element-provider'
 import { MarkdownImageRecordProvider } from '~/providers/article/markdown-image-record-provider'
-import { useSetCurrentNoteId } from '~/providers/note/current-note-id-provider'
+import { CurrentNoteIdProvider, useSetCurrentNoteId } from '~/providers/note/current-note-id-provider'
 import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider'
 import { parseDate } from '~/utils/datetime'
 import { springScrollToTop } from '~/utils/scroller'
@@ -70,7 +70,7 @@ const PageImpl = () => {
   }`
 
   return (
-    <>
+    <CurrentNoteIdProvider initialNoteId={id}>
       <article
         className={clsx('prose', styles['with-indent'], styles['with-serif'])}
       >
@@ -99,17 +99,17 @@ const PageImpl = () => {
           <NoteLayoutRightSidePortal>
             <TocAside
               className="sticky top-[120px] ml-4 mt-[120px]"
-              treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)]"
+              treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
             >
-              <NoteActionAside />
+              <NoteActionAside className="translate-y-full" />
             </TocAside>
             <TocAutoScroll />
           </NoteLayoutRightSidePortal>
         </ArticleElementProvider>
       </article>
       {!!note.topic && <NoteTopic topic={note.topic} />}
       <XLogInfoForNote />
-    </>
+    </CurrentNoteIdProvider>
   )
 }
 

src/components/widgets/note/NoteActionAside.tsx

@@ -13,11 +13,17 @@ import { toast } from '~/lib/toast'
 import { urlBuilder } from '~/lib/url-builder'
 import { useAggregationData } from '~/providers/root/aggregation-data-provider'
 import { queries } from '~/queries/definition'
+import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
 
-export const NoteActionAside = () => {
+export const NoteActionAside: Component = ({ className }) => {
   return (
-    <div className="absolute bottom-0 max-h-[300px] flex-col space-y-4">
+    <div
+      className={clsxm(
+        'absolute bottom-0 max-h-[300px] flex-col space-y-4',
+        className,
+      )}
+    >
       <LikeButton />
       <ShareButton />
     </div>

src/components/widgets/toc/Toc.tsx

@@ -91,9 +91,8 @@ export const TocAside: Component<TocAsideProps> = ({
         rootDepth={rootDepth}
         containerRef={containerRef}
         className={clsxm('absolute max-h-[75vh]', treeClassName)}
-      >
-        {children}
-      </TocTree>
+      />
+      {children}
     </aside>
   )
 }
@@ -104,15 +103,7 @@ const TocTree: Component<{
   setActiveId: (id: string | null) => void
   rootDepth: number
   containerRef: React.MutableRefObject<HTMLUListElement | null>
-}> = ({
-  toc,
-  activeId,
-  setActiveId,
-  rootDepth,
-  containerRef,
-  className,
-  children,
-}) => {
+}> = ({ toc, activeId, setActiveId, rootDepth, containerRef, className }) => {
   const handleScrollTo = useCallback(
     (i: number, $el: HTMLElement | null, anchorId: string) => {
       if ($el) {
@@ -143,7 +134,6 @@ const TocTree: Component<{
           />
         )
       })}
-      {children}
     </ul>
   )
 }

src/components/widgets/xlog/XLogSummary.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import type { FC, SVGProps } from 'react'
 
 import { AutoResizeHeight } from '~/components/common/AutoResizeHeight'
+import { useIsClient } from '~/hooks/common/use-is-client'
 import { useNoteData } from '~/hooks/data/use-note'
 import { clsxm } from '~/utils/helper'
 import { apiClient } from '~/utils/request'
@@ -30,6 +31,11 @@ const XLogSummary: FC<{
     },
   )
 
+  const isClient = useIsClient()
+  if (!isClient) {
+    return null
+  }
+
   if (!cid) {
     return null
   }

src/providers/note/current-note-id-provider.tsx

@@ -1,6 +1,36 @@
 'use client'
 
-import { createContextState } from 'foxact/context-state'
+import { createContext, useContext, useState } from 'react'
+import type { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react'
 
-export const [CurrentNoteIdProvider, useCurrentNoteId, useSetCurrentNoteId] =
-  createContextState<undefined | string>(undefined)
+// export const [CurrentNoteIdProvider, useCurrentNoteId, useSetCurrentNoteId] =
+//   createContextState<undefined | string>(undefined)
+
+const CurrentNoteIdContext = createContext(undefined as undefined | string)
+
+const SetCurrentNoteIdContext = createContext<
+  Dispatch<SetStateAction<string | undefined>>
+>(() => void 0)
+
+const CurrentNoteIdProvider: FC<
+  {
+    initialNoteId?: string
+  } & PropsWithChildren
+> = ({ initialNoteId, children }) => {
+  const [currentNoteId, setCurrentNoteId] = useState(initialNoteId)
+  return (
+    <CurrentNoteIdContext.Provider value={currentNoteId}>
+      <SetCurrentNoteIdContext.Provider value={setCurrentNoteId}>
+        {children}
+      </SetCurrentNoteIdContext.Provider>
+    </CurrentNoteIdContext.Provider>
+  )
+}
+const useCurrentNoteId = () => {
+  return useContext(CurrentNoteIdContext)
+}
+const useSetCurrentNoteId = () => {
+  return useContext(SetCurrentNoteIdContext)
+}
+
+export { useCurrentNoteId, useSetCurrentNoteId, CurrentNoteIdProvider }