feat: update blockquote style for note

Signed-off-by: Innei <tukon479@gmail.com>

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 }