> => {
8 | return function NoSSRWrapper(props: PropsWithChildren) {
9 | const isClient = useIsClientTransition()
10 | if (!isClient) return null
11 | return
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/icons/calendar.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 | import * as React from 'react'
3 |
4 | export function MdiCalendar(props: SVGProps) {
5 | return (
6 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/(app)/categories/[slug]/query.ts:
--------------------------------------------------------------------------------
1 | import { apiClient } from '~/lib/request'
2 | import { defineQuery } from '~/queries/helper'
3 |
4 | export const getPageBySlugQuery = (slug: string) =>
5 | defineQuery({
6 | queryKey: ['category', slug],
7 | queryFn: async ({ queryKey }) => {
8 | const [, slug] = queryKey
9 |
10 | const data = await apiClient.category.getCategoryByIdOrSlug(slug)
11 |
12 | return {
13 | ...data,
14 | }
15 | },
16 | })
17 |
--------------------------------------------------------------------------------
/src/components/modules/shared/BlockLoading.tsx:
--------------------------------------------------------------------------------
1 | import { clsxm } from '~/lib/helper'
2 |
3 | export const BlockLoading: Component<{
4 | style?: React.CSSProperties
5 | }> = (props) => {
6 | return (
7 |
14 | {props.children}
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/common/use-debounce-value.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 |
3 | export default function useDebounceValue(value: T, delay: number): T {
4 | const [debouncedValue, setDebouncedValue] = useState(value)
5 |
6 | useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value)
9 | }, delay)
10 |
11 | return () => {
12 | clearTimeout(handler)
13 | }
14 | }, [value, delay])
15 |
16 | return debouncedValue
17 | }
18 |
--------------------------------------------------------------------------------
/src/hooks/common/use-sync-effect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react'
2 |
3 | type CleanupFn = () => void | undefined
4 | const noop = () => {}
5 | export const useSyncEffectOnce = (effect: (() => CleanupFn) | (() => void)) => {
6 | const ref = useRef(false)
7 | const cleanupRef = useRef<(() => void) | null>(null)
8 | useEffect(() => cleanupRef.current || noop, [])
9 |
10 | if (ref.current) return
11 | cleanupRef.current = effect() || null
12 | ref.current = true
13 | }
14 |
--------------------------------------------------------------------------------
/src/constants/env.ts:
--------------------------------------------------------------------------------
1 | import { env } from 'next-runtime-env'
2 |
3 | import { isClientSide, isDev } from '~/lib/env'
4 |
5 | export const API_URL: string = (() => {
6 | if (isDev) return env('NEXT_PUBLIC_API_URL') || ''
7 |
8 | if (isClientSide && env('NEXT_PUBLIC_CLIENT_API_URL')) {
9 | return env('NEXT_PUBLIC_CLIENT_API_URL') || ''
10 | }
11 |
12 | return env('NEXT_PUBLIC_API_URL') || '/api/v2'
13 | })() as string
14 | export const GATEWAY_URL = env('NEXT_PUBLIC_GATEWAY_URL') || ''
15 |
--------------------------------------------------------------------------------
/src/styles/image-zoom.css:
--------------------------------------------------------------------------------
1 | /* image-zoom */
2 | .medium-zoom-overlay {
3 | z-index: 99;
4 |
5 | @apply !bg-zinc-50 dark:!bg-neutral-900;
6 | }
7 |
8 | /* .medium-zoom-overlay + .medium-zoom-image {
9 | } */
10 |
11 | .medium-zoom-image {
12 | border-radius: 0.5rem;
13 | transition: border-radius 0.3s ease-in-out;
14 | }
15 | .medium-zoom-image.medium-zoom-image--opened {
16 | border-radius: 0;
17 |
18 | z-index: 100;
19 | opacity: 1;
20 | transition: all 0.5s ease-in-out;
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/common/ScrollTop.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { usePathname } from 'next/navigation'
4 | import { memo, useEffect } from 'react'
5 |
6 | import { isDev } from '~/lib/env'
7 | import { springScrollToTop } from '~/lib/scroller'
8 |
9 | export const ScrollTop = memo(() => {
10 | const pathname = usePathname()
11 | useEffect(() => {
12 | if (isDev) return
13 | springScrollToTop()
14 | }, [pathname])
15 | return null
16 | })
17 |
18 | ScrollTop.displayName = 'ScrollTop'
19 |
--------------------------------------------------------------------------------
/src/hooks/common/use-is-active.ts:
--------------------------------------------------------------------------------
1 | import { useSyncExternalStore } from 'react'
2 |
3 | const subscribe = (cb: () => void) => {
4 | document.addEventListener('visibilitychange', cb)
5 | return () => {
6 | document.removeEventListener('visibilitychange', cb)
7 | }
8 | }
9 |
10 | const getSnapshot = () => document.visibilityState === 'visible'
11 | const getServerSnapshot = () => true
12 | export const usePageIsActive = () =>
13 | useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
14 |
--------------------------------------------------------------------------------
/src/lib/fonts.ts:
--------------------------------------------------------------------------------
1 | import { Manrope, Noto_Serif_SC } from 'next/font/google'
2 |
3 | const sansFont = Manrope({
4 | subsets: ['latin'],
5 | weight: ['300', '400', '500'],
6 | variable: '--font-sans',
7 | display: 'swap',
8 | })
9 |
10 | const serifFont = Noto_Serif_SC({
11 | subsets: ['latin'],
12 | weight: ['400'],
13 | variable: '--font-serif',
14 | display: 'swap',
15 | // adjustFontFallback: false,
16 | fallback: ['Noto Serif SC'],
17 | })
18 |
19 | export { sansFont, serifFont }
20 |
--------------------------------------------------------------------------------
/storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "include": [
4 | ".",
5 | "./src"
6 | ],
7 | "exclude": [
8 | "dist",
9 | "build",
10 | "node_modules"
11 | ],
12 | "compilerOptions": {
13 | "baseUrl": ".",
14 | "paths": {
15 | "~": [
16 | "../src"
17 | ],
18 | "~/*": [
19 | "../src/*"
20 | ],
21 | },
22 | "lib": [
23 | "dom",
24 | "dom.iterable",
25 | "esnext"
26 | ]
27 | }
28 | }
--------------------------------------------------------------------------------
/src/queries/helper.ts:
--------------------------------------------------------------------------------
1 | import type { FetchQueryOptions, QueryKey } from '@tanstack/react-query'
2 |
3 | export const defineQuery = <
4 | TQueryFnData = unknown,
5 | TError = unknown,
6 | TData = TQueryFnData,
7 | TQueryKey extends QueryKey = QueryKey,
8 | >(
9 | options: FetchQueryOptions,
10 | ): Omit<
11 | FetchQueryOptions,
12 | 'queryKey'
13 | > & { queryKey: string[] } => {
14 | return options as any
15 | }
16 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true,
4 | "tailwindCSS.experimental.classRegex": [
5 | [
6 | "tv\\(([^)]*)\\)",
7 | "[\"'`]([^\"'`]*).*?[\"'`]",
8 | // match variants className
9 | ]
10 | ],
11 | // https://biomejs.dev/reference/vscode/#fix-on-save
12 | "editor.codeActionsOnSave": {
13 | "quickfix.biome": "explicit",
14 | "source.organizeImports.biome": "explicit"
15 | }
16 | }
--------------------------------------------------------------------------------
/ci-release-build.sh:
--------------------------------------------------------------------------------
1 | #!env bash
2 | set -e
3 | CWD=$(pwd)
4 |
5 | npm run build
6 | cd .next
7 | pwd
8 | rm -rf cache
9 | cp -r ../public ./standalone/public
10 |
11 | cd ./standalone
12 | echo ';process.title = "Shiro (NextJS)"' >>server.js
13 | mv ../static/ ./.next/static
14 |
15 | cp $CWD/ecosystem.standalone.config.cjs ./ecosystem.config.js
16 | cp $CWD/.env.template .env
17 |
18 | cd ..
19 |
20 | mkdir -p $CWD/assets
21 | rm -rf $CWD/assets/release.zip
22 | zip --symlinks -r $CWD/assets/release.zip ./*
23 |
--------------------------------------------------------------------------------
/src/components/modules/dashboard/note-editing/sidebar/DateInput.tsx:
--------------------------------------------------------------------------------
1 | import { SidebarDateInputField } from '../../writing/SidebarDateInputField'
2 | import { useNoteModelSingleFieldAtom } from '../data-provider'
3 |
4 | export const CustomCreatedInput = () => (
5 |
6 | )
7 |
8 | export const PublicAtInput = () => (
9 |
13 | )
14 |
--------------------------------------------------------------------------------
/src/app/api/leetcode/route.ts:
--------------------------------------------------------------------------------
1 | import type { NextRequest } from 'next/server'
2 | import { NextResponse } from 'next/server'
3 |
4 | export const POST = async (req: NextRequest) => {
5 | const requestBody = await req.json()
6 |
7 | const response = await fetch('https://leetcode.cn/graphql/', {
8 | method: 'POST',
9 | headers: {
10 | 'Content-Type': 'application/json',
11 | },
12 | body: JSON.stringify(requestBody),
13 | })
14 |
15 | return NextResponse.json(await response.json())
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/modules/comment/CommentBox/constants.ts:
--------------------------------------------------------------------------------
1 | import { sample } from '~/lib/lodash'
2 |
3 | const placeholderCopywrites = [
4 | '在这里说点什么呢。',
5 | '小可爱，你想说点什么呢？',
6 | '或许此地可以留下足迹',
7 | '你的留言是我前进的动力！',
8 | '说点什么吧，我会好好听的。',
9 | '来一发评论，送你一个小星星！',
10 | '你的评论会让我更加努力哦！',
11 | '留下你的足迹，让我知道你来过。',
12 | '我在这里等你的留言呢！',
13 | '你的评论是我最大的动力！',
14 | '来一发评论，让我知道你的想法吧！',
15 | ]
16 | export const getRandomPlaceholder = () => sample(placeholderCopywrites)
17 |
18 | export const MAX_COMMENT_TEXT_LENGTH = 500
19 |
--------------------------------------------------------------------------------
/src/components/ui/image/ZoomedImage.module.css:
--------------------------------------------------------------------------------
1 | .error,
2 | .loading {
3 | @apply opacity-0;
4 | }
5 |
6 | .loaded {
7 | animation: imageLoad 500ms ease-in-out forwards;
8 | }
9 |
10 | @keyframes imageLoad {
11 | 0% {
12 | mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 /
13 | 400% no-repeat;
14 | opacity: 0.2;
15 | }
16 | 100% {
17 | mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400%
18 | no-repeat;
19 | opacity: 1;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/constants/keys.ts:
--------------------------------------------------------------------------------
1 | export const enum EmitKeyMap {
2 | EditDataUpdate = 'editDataUpdate',
3 |
4 | Publish = 'Publish',
5 | Refetch = 'Refetch',
6 |
7 | SocketConnected = 'SocketConnected',
8 | SocketDisconnected = 'SocketDisconnected',
9 | }
10 |
11 | export const CacheKeyMap = {
12 | RootData: 'root-data',
13 | AggregateTop: 'aggregate-top',
14 | PostListWithPage: (current: number) => CacheKeyMap.PostList + current,
15 | PostList: 'post-list:',
16 | Post: (id: string) => `post-${id}`,
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/modules/dashboard/crossbell/XLogEnabled.tsx:
--------------------------------------------------------------------------------
1 | import { lazy, Suspense, useMemo } from 'react'
2 |
3 | export const XLogEnable = () =>
4 | 'ethereum' in globalThis ? : null
5 |
6 | const XlogSwitchLazy = () => {
7 | const Component = useMemo(
8 | () =>
9 | lazy(() =>
10 | import('./XlogSwitch').then((mo) => ({ default: mo.XlogSwitch })),
11 | ),
12 | [],
13 | )
14 | return (
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/ui/modal/stacked/types.tsx:
--------------------------------------------------------------------------------
1 | import type { FC, PropsWithChildren, ReactNode } from 'react'
2 |
3 | import type { ModalContentPropsInternal } from './context'
4 |
5 | export interface ModalProps {
6 | title: ReactNode
7 | CustomModalComponent?: FC
8 | content: FC
9 | clickOutsideToDismiss?: boolean
10 | modalClassName?: string
11 | modalContainerClassName?: string
12 |
13 | max?: boolean
14 |
15 | wrapper?: FC
16 |
17 | overlay?: boolean
18 | }
19 |
--------------------------------------------------------------------------------
/standalone-bundle.sh:
--------------------------------------------------------------------------------
1 | #!env bash
2 | set -e
3 | CWD=$(pwd)
4 |
5 | cd .next
6 | pwd
7 | rm -rf cache
8 | # cp ../next.config.mjs ./standalone/next.config.mjs
9 | cp -r ../public ./standalone/public
10 |
11 | cd ./standalone
12 | echo ';process.title = "Shiro (NextJS)"' >>server.js
13 | mv ../static/ ./.next/static
14 |
15 | cp $CWD/ecosystem.standalone.config.cjs ./ecosystem.config.js
16 |
17 | cd ..
18 |
19 | mkdir -p $CWD/assets
20 | rm -rf $CWD/assets/release.zip
21 | zip --symlinks -r $CWD/assets/release.zip ./*
22 |
--------------------------------------------------------------------------------
/src/components/modules/note/index.ts:
--------------------------------------------------------------------------------
1 | export * from './NoteActionAside'
2 | export * from './NoteBanner'
3 | export * from './NoteBottomTopic'
4 | export * from './NoteFooterNavigation'
5 | export * from './NoteHideIfSecret'
6 | export * from './NoteLeftSidebar'
7 | export * from './NoteMainContainer'
8 | export * from './NoteMetaBar'
9 | export * from './NotePasswordForm'
10 | export * from './NoteTimeline'
11 | export * from './NoteTopicDetail'
12 | export * from './NoteTopicInfo'
13 | export * from './NoteTopicMarkdownRender'
14 |
--------------------------------------------------------------------------------
/src/components/ui/portal/provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react'
2 |
3 | import { isClientSide } from '~/lib/env'
4 |
5 | export const useRootPortal = () => {
6 | const ctx = useContext(RootPortalContext)
7 | if (!isClientSide) {
8 | return null
9 | }
10 | return ctx.to || document.body
11 | }
12 |
13 | const RootPortalContext = createContext<{
14 | to?: HTMLElement | undefined
15 | }>({
16 | to: undefined,
17 | })
18 |
19 | export const RootPortalProvider = RootPortalContext.Provider
20 |
--------------------------------------------------------------------------------
/src/components/icons/fa-hash.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | export function FeHash(props: SVGProps) {
4 | return (
5 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/ui/modal/stacked/overlay.tsx:
--------------------------------------------------------------------------------
1 | import { m } from 'motion/react'
2 |
3 | import { RootPortal } from '../../portal'
4 |
5 | export const ModalOverlay = ({ zIndex }: { zIndex?: number }) => (
6 |
7 |
15 |
16 | )
17 |
--------------------------------------------------------------------------------
/src/components/ui/transition/typings.ts:
--------------------------------------------------------------------------------
1 | import type { HTMLMotionProps, m, TargetAndTransition } from 'motion/react'
2 |
3 | export interface BaseTransitionProps
4 | extends Omit, 'ref'> {
5 | duration?: number
6 |
7 | timeout?: {
8 | exit?: number
9 | enter?: number
10 | }
11 |
12 | delay?: number
13 |
14 | animation?: {
15 | enter?: TargetAndTransition['transition']
16 | exit?: TargetAndTransition['transition']
17 | }
18 |
19 | lcpOptimization?: boolean
20 | as?: keyof typeof m
21 | }
22 |
--------------------------------------------------------------------------------
/storybook/mock-packages/next_navigation/index.js:
--------------------------------------------------------------------------------
1 | export const useRouter = () => {
2 | return {
3 | push(path) {
4 | location.pathname = path
5 | },
6 | }
7 | }
8 |
9 | export const usePathname = () => location.pathname
10 |
11 | export const useSearchParams = () => {
12 | const params = new URLSearchParams(location.search)
13 | return {
14 | get(key) {
15 | return params.get(key)
16 | },
17 | }
18 | }
19 | export const notFound = () => {}
20 | export const nav = () => {}
21 | export const redirect = () => {}
22 |
--------------------------------------------------------------------------------
/src/app/(app)/(home)/components/types.tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | RecentComment,
3 | RecentLike,
4 | RecentNote,
5 | RecentPost,
6 | RecentRecent,
7 | } from '@mx-space/api-client'
8 |
9 | export type ReactActivityType =
10 | | ({
11 | bizType: 'comment'
12 | } & RecentComment)
13 | | ({
14 | bizType: 'note'
15 | } & RecentNote)
16 | | ({
17 | bizType: 'post'
18 | } & RecentPost)
19 | | ({
20 | bizType: 'recent'
21 | } & RecentRecent)
22 | | ({
23 | bizType: 'like'
24 | } & RecentLike)
25 |
--------------------------------------------------------------------------------
/src/components/modules/dashboard/writing/PresentComponentFab.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 |
3 | import { FABPortable } from '~/components/ui/fab'
4 | import { PresentSheet } from '~/components/ui/sheet'
5 | import { Noop } from '~/lib/noop'
6 |
7 | export const PresentComponentFab: FC<{
8 | Component: FC
9 | }> = ({ Component }) => (
10 |
11 |
12 |
13 |
14 |
15 | )
16 |
--------------------------------------------------------------------------------
/src/components/icons/pen.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | export function MdiFountainPenTip(props: SVGProps) {
4 | return (
5 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/modules/comment/CommentBox/AuthedInputSkeleton.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import clsx from 'clsx'
4 |
5 | export const CommentBoxAuthedInputSkeleton = () => {
6 | const color = 'bg-gray-200/50 dark:bg-zinc-800/50'
7 | return (
8 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/providers/root/debug-provider.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
4 | import type { PropsWithChildren, ReactElement } from 'react'
5 | import { Suspense } from 'react'
6 |
7 | export const DebugProvider = ({
8 | children,
9 | }: PropsWithChildren): ReactElement => (
10 | <>
11 |
12 |
13 |
14 |
15 |
16 | {children}
17 |
18 | )
19 |
--------------------------------------------------------------------------------
/src/components/layout/container/Normal.tsx:
--------------------------------------------------------------------------------
1 | import { clsxm } from '~/lib/helper'
2 |
3 | import { HeaderHideBg } from '../header/hooks'
4 |
5 | export const NormalContainer: Component = (props) => {
6 | const { children, className } = props
7 |
8 | return (
9 |
16 | {children}
17 |
18 |
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/layout/root/Root.tsx:
--------------------------------------------------------------------------------
1 | import { ClientOnly } from '~/components/common/ClientOnly'
2 | import { FABContainer } from '~/components/ui/fab'
3 |
4 | import { Content } from '../content/Content'
5 | import { Footer } from '../footer'
6 | import { Header } from '../header'
7 |
8 | export const Root: Component = ({ children }) => {
9 | return (
10 | <>
11 |
12 | {children}
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/hooks/common/use-is-client.ts:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { startTransition, useEffect, useState } from 'react'
4 |
5 | export const useIsClient = () => {
6 | const [isClient, setIsClient] = useState(false)
7 |
8 | useEffect(() => {
9 | setIsClient(true)
10 | }, [])
11 | return isClient
12 | }
13 |
14 | export const useIsClientTransition = () => {
15 | const [isClient, setIsClient] = useState(false)
16 |
17 | useEffect(() => {
18 | startTransition(() => {
19 | setIsClient(true)
20 | })
21 | }, [])
22 | return isClient
23 | }
24 |
--------------------------------------------------------------------------------
/storybook/src/main.tsx:
--------------------------------------------------------------------------------
1 | import './index.css'
2 | import './markdown.css'
3 | import '../../src/styles/index.css'
4 |
5 | import { LazyMotion } from 'motion/react'
6 | import ReactDOM from 'react-dom/client'
7 | import { RouterProvider } from 'react-router-dom'
8 |
9 | import { routes } from './router'
10 |
11 | const load = () => import('motion/react').then((res) => res.domMax)
12 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
13 |
14 |
15 | ,
16 | )
17 |
--------------------------------------------------------------------------------
/src/app/(app)/notes/redirect.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useRouter } from 'next/navigation'
4 | import { useLayoutEffect } from 'react'
5 |
6 | import { routeBuilder, Routes } from '~/lib/route-builder'
7 |
8 | import FullPageLoading from '../friends/loading'
9 |
10 | export default function NodeRedirect({ nid }: { nid: number }) {
11 | const router = useRouter()
12 | useLayoutEffect(() => {
13 | router.replace(
14 | routeBuilder(Routes.Note, {
15 | id: nid,
16 | }),
17 | )
18 | }, [nid])
19 | return
20 | }
21 |
--------------------------------------------------------------------------------
/src/hooks/common/use-disclosure.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react'
2 |
3 | export const useDisclosure = () => {
4 | const [isOpen, setIsOpen] = useState(false)
5 | const onClose = useCallback(() => setIsOpen(false), [])
6 | const onOpen = useCallback(() => setIsOpen(true), [])
7 | const onToggle = useCallback(() => setIsOpen((isOpen) => !isOpen), [])
8 | const onOpenChange = useCallback((open: boolean) => setIsOpen(open), [])
9 | return {
10 | isOpen,
11 | onClose,
12 | onOpen,
13 | onToggle,
14 | onOpenChange,
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/hooks/common/use-uncontrolled-input.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useLayoutEffect, useRef } from 'react'
2 |
3 | export const useUncontrolledInput = <
4 | T extends { value: string } = HTMLInputElement,
5 | >(
6 | initialValue?: string,
7 | ) => {
8 | const ref = useRef(null)
9 |
10 | useLayoutEffect(() => {
11 | if (initialValue) {
12 | ref.current && (ref.current.value = initialValue)
13 | }
14 | }, [])
15 |
16 | return [
17 | ref.current?.value,
18 | useCallback(() => ref.current?.value, []),
19 | ref,
20 | ] as const
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | import { NotFound404 } from '~/components/common/404'
2 | import { StyledButton } from '~/components/ui/button'
3 | import { sansFont } from '~/lib/fonts'
4 |
5 | export default () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | 返回首页
13 |
14 |
15 |
17 | 正在重定向到
{`/posts${data.path}`}
18 |
(Component: Component
) =>
17 | (props: P) => (
18 |
19 |
20 |
21 | )
22 |
--------------------------------------------------------------------------------
/src/components/ui/label/LabelContext.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { createContext } from 'react'
3 |
4 | const LabelPropsContext = createContext<{
5 | className?: string
6 | }>({})
7 |
8 | export const useLabelPropsContext = () => React.useContext(LabelPropsContext)
9 |
10 | export const LabelProvider: React.FC<
11 | React.ContextType & React.PropsWithChildren
12 | > = ({ children, ...props }) => {
13 | return (
14 |
15 | {children}
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/common/BizErrorPage.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 |
3 | export const BizErrorPage: FC<{
4 | bizMessage: string
5 | status: number
6 | }> = ({ bizMessage, status }) => {
7 | return (
8 |
9 |
10 |
数据接口请求出现错误
11 |
12 | HTTP Status: {status}
13 |
14 |
15 | 错误信息：{bizMessage}
16 |
17 |
18 |
18 | {children ?? }
19 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/ui/markdown/renderers/video.tsx:
--------------------------------------------------------------------------------
1 | import type { FC } from 'react'
2 |
3 | import { clsxm } from '~/lib/helper'
4 |
5 | import { VideoPlayer } from '../../media/VideoPlayer'
6 |
7 | export const Video: FC<
8 | Omit, 'src'> & { src?: string }
9 | > = (props) => {
10 | if (!props.src) return null
11 | return (
12 |
20 | )
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/ui/modal/stacked/constants.ts:
--------------------------------------------------------------------------------
1 | import type { MotionProps, TargetAndTransition } from 'motion/react'
2 |
3 | import { microReboundPreset } from '~/constants/spring'
4 |
5 | const enterStyle: TargetAndTransition = {
6 | scale: 1,
7 | opacity: 1,
8 | }
9 | const initialStyle: TargetAndTransition = {
10 | scale: 0.96,
11 | opacity: 0,
12 | }
13 |
14 | export const modalMontionConfig: MotionProps = {
15 | initial: initialStyle,
16 | animate: enterStyle,
17 | exit: initialStyle,
18 | transition: microReboundPreset,
19 | }
20 |
21 | export const MODAL_STACK_Z_INDEX = 100
22 |
--------------------------------------------------------------------------------
/src/lib/biz.ts:
--------------------------------------------------------------------------------
1 | import { getCurrentNoteData } from '~/providers/note/CurrentNoteDataProvider'
2 | import { getGlobalCurrentPostData } from '~/providers/post/CurrentPostDataProvider'
3 |
4 | import { isServerSide } from './env'
5 |
6 | export const getCurrentPageId = () => {
7 | if (isServerSide) return
8 | const { pathname } = window.location
9 |
10 | if (pathname.startsWith('/notes/')) {
11 | const noteId = getCurrentNoteData()
12 |
13 | return noteId?.data.id
14 | }
15 |
16 | if (pathname.startsWith('/posts/')) {
17 | return getGlobalCurrentPostData().id
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/layout/header/hooks.ts:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useEffect } from 'react'
4 |
5 | import { useSetHeaderShouldShowBg } from '~/components/layout/header/internal/hooks'
6 |
7 | export const useHideHeaderBgInRoute = () => {
8 | const setter = useSetHeaderShouldShowBg()
9 | useEffect(() => {
10 | setter(false)
11 | return () => {
12 | setter(true)
13 | }
14 | }, [])
15 | }
16 |
17 | export const HeaderHideBg = () => {
18 | useHideHeaderBgInRoute()
19 | return null
20 | }
21 |
22 | export { useSetHeaderMetaInfo } from '~/components/layout/header/internal/hooks'
23 |
--------------------------------------------------------------------------------
/src/components/modules/dashboard/note-editing/NoteNid.tsx:
--------------------------------------------------------------------------------
1 | import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
2 |
3 | import { useNoteModelSingleFieldAtom } from './data-provider'
4 |
5 | export const NoteNid = () => {
6 | const webUrl = location.origin
7 |
8 | const [nid] = useNoteModelSingleFieldAtom('nid')
9 |
10 | const latestNid = useAggregationSelector((s) => s.latestNoteId)
11 |
12 | return (
13 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/modules/say/Button.tsx:
--------------------------------------------------------------------------------
1 | import { MotionButtonBase } from '~/components/ui/button'
2 | import { clsxm } from '~/lib/helper'
3 |
4 | import { useSayModal } from './hooks'
5 |
6 | export const CreateSayButton: Component = ({ className }) => {
7 | const present = useSayModal()
8 | return (
9 | present()}
11 | className={clsxm(
12 | 'flex size-8 duration-200 center hover:text-accent',
13 | className,
14 | )}
15 | >
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/ui/portal/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import type { FC, PropsWithChildren } from 'react'
4 | import { createPortal } from 'react-dom'
5 |
6 | import { useIsClient } from '~/hooks/common/use-is-client'
7 |
8 | import { useRootPortal } from './provider'
9 |
10 | export const RootPortal: FC<
11 | {
12 | to?: HTMLElement
13 | } & PropsWithChildren
14 | > = (props) => {
15 | const isClient = useIsClient()
16 | const to = useRootPortal()
17 | if (!isClient) {
18 | return null
19 | }
20 |
21 | return createPortal(props.children, props.to || to || document.body)
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/ui/code-editor/index.demo.tsx:
--------------------------------------------------------------------------------
1 | import type { DocumentComponent } from 'storybook/typings'
2 |
3 | import { CodeEditor } from './CodeEditor'
4 |
5 | export const CodeEditorDemo: DocumentComponent = () => {
6 | return (
7 |
8 | `const a = ${Math.random()};\n`)
12 | .join('')}
13 | language="javascript"
14 | />
15 |
16 | )
17 | }
18 |
19 | CodeEditorDemo.meta = {
20 | title: 'CodeEditor',
21 | }
22 |
--------------------------------------------------------------------------------
/src/lib/atom.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/rules-of-hooks */
2 | /* eslint-disable react-hooks/exhaustive-deps */
3 | import type { Atom } from 'jotai'
4 | import { useAtomValue } from 'jotai'
5 | import { selectAtom } from 'jotai/utils'
6 | import { useCallback } from 'react'
7 |
8 | export const createAtomSelector = (atom: Atom) => {
9 | const hook = (selector: (a: T) => R, deps: any[] = []) =>
10 | useAtomValue(
11 | selectAtom(
12 | atom,
13 | useCallback((a) => selector(a as T), deps),
14 | ),
15 | )
16 |
17 | hook.__atom = atom
18 | return hook
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/icons/platform/XIcon.tsx:
--------------------------------------------------------------------------------
1 | export const XIcon = () => {
2 | return (
3 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/lib/upload.ts:
--------------------------------------------------------------------------------
1 | import { apiClient } from './request'
2 |
3 | export enum FileTypeEnum {
4 | Icon = 'icon',
5 | Photo = 'photo',
6 | File = 'file',
7 | Avatar = 'avatar',
8 | }
9 | export const uploadFileToServer = (type: FileTypeEnum, file: File) => {
10 | const formData = new FormData()
11 | formData.append('file', file)
12 |
13 | return apiClient.proxy.objects.upload.post<{
14 | name: string
15 | url: string
16 | }>({
17 | data: formData,
18 | headers: {
19 | 'Content-Type': 'multipart/form-data',
20 | },
21 | params: {
22 | type,
23 | },
24 | })
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/api/music/tencent/route.ts:
--------------------------------------------------------------------------------
1 | import type { NextRequest } from 'next/server'
2 | import { NextResponse } from 'next/server'
3 |
4 | export const POST = async (req: NextRequest) => {
5 | const requestBody = await req.json()
6 | const { songId } = requestBody
7 |
8 | const response = await fetch(
9 | `https://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?songmid=${songId}&platform=yqq&format=json`,
10 | {
11 | method: 'GET',
12 | headers: {
13 | 'Content-Type': 'application/json',
14 | },
15 | },
16 | )
17 |
18 | return NextResponse.json(await response.json())
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/modules/comment/index.ts:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic'
2 | import { createElement } from 'react'
3 |
4 | import { Loading } from '~/components/ui/loading'
5 |
6 | export const CommentsLazy = dynamic(
7 | () => import('./Comments').then((mod) => mod.Comments),
8 | { ssr: false },
9 | )
10 | export const CommentBoxRootLazy = dynamic(
11 | () => import('./CommentBox').then((mod) => mod.CommentBoxRoot),
12 | {
13 | ssr: false,
14 | loading: () => createElement(Loading, { useDefaultLoadingText: true }),
15 | },
16 | )
17 |
18 | export { CommentAreaRootLazy } from './CommentRootLazy'
19 |
--------------------------------------------------------------------------------
/src/app/(app)/common/deleted/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | import { NormalContainer } from '~/components/layout/container/Normal'
4 | import { StyledButton } from '~/components/ui/button'
5 |
6 | export default async function PageDeleted() {
7 | return (
8 |
9 |
10 |
此页面已被删除
11 |
12 |
13 | 返回首页
14 |
15 |
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/ui/markdown/renderers/index.module.css:
--------------------------------------------------------------------------------
1 | .link {
2 | display: inline-block;
3 | position: relative;
4 |
5 | a {
6 | cursor: alias;
7 | overflow: hidden;
8 | position: relative;
9 | color: var(--a);
10 | }
11 |
12 | a::after {
13 | content: '';
14 | position: absolute;
15 | bottom: -1.9px;
16 | height: 1px;
17 | background-color: currentColor;
18 | width: 0;
19 | transform: translateX(-50%);
20 | left: 50%;
21 | text-align: center;
22 | transition: width 0.5s ease-in-out;
23 | }
24 |
25 | a:hover::after {
26 | width: 100%;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/modules/subscribe/SubscribeTextButton.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import type { FC, PropsWithChildren } from 'react'
4 |
5 | import { useIsEnableSubscribe, usePresentSubscribeModal } from './hooks'
6 |
7 | export const SubscribeTextButton: FC = ({ children }) => {
8 | const canSubscribe = useIsEnableSubscribe()
9 | const { present } = usePresentSubscribeModal()
10 |
11 | if (!canSubscribe) {
12 | return null
13 | }
14 |
15 | return (
16 | <>
17 |
18 |
19 |
20 | {children}
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/ui/dialog/DialogOverlay.tsx:
--------------------------------------------------------------------------------
1 | import * as Dialog from '@radix-ui/react-dialog'
2 | import { m } from 'motion/react'
3 |
4 | export const DialogOverlay = ({
5 | onClick,
6 | zIndex,
7 | }: {
8 | onClick?: () => void
9 | zIndex?: number
10 | }) => {
11 | return (
12 |
13 |
21 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/common/HydrationEndDetector.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { atom } from 'jotai'
4 | import { useEffect } from 'react'
5 |
6 | import { jotaiStore } from '~/lib/store'
7 |
8 | const hydrateEndAtom = atom(false)
9 |
10 | /**
11 | * To skip page transition when first load, improve LCP
12 | */
13 | export const HydrationEndDetector = () => {
14 | useEffect(() => {
15 | // waiting for hydration end and animation end
16 | setTimeout(() => {
17 | jotaiStore.set(hydrateEndAtom, true)
18 | }, 2000)
19 | }, [])
20 | return null
21 | }
22 |
23 | export const isHydrationEnded = () => jotaiStore.get(hydrateEndAtom)
24 |
--------------------------------------------------------------------------------
/src/components/icons/mermaid.tsx:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react'
2 |
3 | export function SimpleIconsMermaid(props: SVGProps) {
4 | return (
5 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton/Skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { clsxm } from '~/lib/helper'
2 |
3 | export const Skeleton: Component = ({ className }) => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
Loading...
11 |