@fecommunity/reactpress-theme-starter 1.0.0-beta.0

package/components/views/KnowledgeBookClient.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import KnowledgeList from '@/components/knowledge/KnowledgeList'
+import Link from '@/components/shared/Link'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { Image, LocaleTime } from '@fecommunity/reactpress-toolkit/ui/content'
+import type { IKnowledge } from '@fecommunity/reactpress-toolkit/types'
+import { useCallback, useMemo } from 'react'
+
+type KnowledgeBook = IKnowledge & { children?: IKnowledge[] }
+
+interface KnowledgeBookClientProps {
+  pId: string
+  book: KnowledgeBook
+  otherBooks: KnowledgeBook[]
+}
+
+export default function KnowledgeBookClient({
+  pId,
+  book,
+  otherBooks = [],
+}: KnowledgeBookClientProps) {
+  const { t, locale } = useLocale()
+  const chapters = useMemo(() => book.children ?? [], [book])
+
+  const startReading = useCallback(() => {
+    const chapter = chapters[0]
+    if (chapter) {
+      window.location.href = `/knowledge/${pId}/${chapter.id}`
+    }
+  }, [chapters, pId])
+
+  return (
+    <DoubleColumnLayout
+      topNode={
+        <nav className="mb-4 text-sm text-[var(--second-text-color)]">
+          <Link
+            href="/knowledge"
+            className="text-[var(--primary-color)] no-underline hover:underline"
+          >
+            {t('knowledgeBooks')}
+          </Link>
+          <span className="mx-2">/</span>
+          <span className="text-[var(--main-text-color)]">{book.title}</span>
+        </nav>
+      }
+      leftNode={
+        <div className="overflow-hidden rounded-lg bg-[var(--bg-box)] shadow-[var(--box-shadow)]">
+          <header className="border-b border-[var(--border-color)] px-4 py-4 text-lg font-semibold text-[var(--main-text-color)]">
+            {book.title}
+          </header>
+          <main className="p-4">
+            <section className="flex flex-col gap-4 sm:flex-row">
+              {book.cover ? (
+                <div className="h-40 w-full shrink-0 overflow-hidden rounded-lg sm:w-48">
+                  <Image url={book.cover} size="medium" alt="cover" />
+                </div>
+              ) : null}
+              <div className="min-w-0 flex-1">
+                <h1 className="m-0 text-xl font-semibold text-[var(--main-text-color)]">
+                  {book.title}
+                </h1>
+                {book.summary ? (
+                  <p className="mt-2 text-sm leading-relaxed text-[var(--second-text-color)]">
+                    {book.summary}
+                  </p>
+                ) : null}
+                <p className="mt-3 text-xs text-[var(--second-text-color)]">
+                  <span>
+                    {book.views} {t('readingCount')}
+                  </span>
+                  <span className="mx-2">·</span>
+                  <LocaleTime date={book.publishAt} locale={locale} />
+                </p>
+                <button
+                  type="button"
+                  onClick={startReading}
+                  disabled={!chapters.length}
+                  className="mt-4 rounded-lg bg-[var(--primary-color)] px-5 py-2 text-sm text-white disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {t('startReading')}
+                </button>
+              </div>
+            </section>
+
+            {chapters.length ? (
+              <ul className="m-0 mt-6 list-none border-t border-[var(--border-color)] p-0 pt-2">
+                {chapters.map((chapter) => (
+                  <li
+                    key={chapter.id}
+                    className="border-b border-[var(--border-color)] last:border-b-0"
+                  >
+                    <Link
+                      href={`/knowledge/${pId}/${chapter.id}`}
+                      className="flex items-center justify-between gap-3 px-2 py-3 text-sm no-underline hover:bg-[var(--bg-second)]"
+                    >
+                      <span className="min-w-0 truncate text-[var(--main-text-color)]">
+                        {chapter.title}
+                      </span>
+                      <span className="flex shrink-0 items-center gap-2 text-xs text-[var(--second-text-color)]">
+                        <LocaleTime date={chapter.createAt} locale={locale} />
+                        <span aria-hidden>›</span>
+                      </span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <div className="mt-6 py-8 text-center text-sm text-[var(--second-text-color)]">
+                {t('pleaseWait')}
+              </div>
+            )}
+          </main>
+        </div>
+      }
+      rightNode={
+        <div className="rp-sidebar-sticky sticky mb-4 w-72 overflow-hidden rounded-lg bg-[var(--bg-box)] shadow-[var(--box-shadow)]">
+          <header className="border-b border-[var(--border-color)] px-4 py-3 font-semibold text-[var(--main-text-color)]">
+            {t('otherKnowledges')}
+          </header>
+          <KnowledgeList knowledges={otherBooks} small />
+        </div>
+      }
+    />
+  )
+}

package/components/views/KnowledgeChapterClient.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import CommentSection from '@/components/comment/CommentSection'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import ArticleCopyrightBar from '@/components/article/ArticleCopyrightBar'
+import ReadingContent from '@/components/article/ReadingContent'
+import Link from '@/components/shared/Link'
+import { KnowledgeProvider } from '@/lib/providers/client'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import {
+  ArticleToc,
+  ImageViewer,
+  LocaleTime,
+  parseArticleToc,
+} from '@fecommunity/reactpress-toolkit/ui/content'
+import type { IKnowledge } from '@fecommunity/reactpress-toolkit/types'
+import { useEffect, useMemo } from 'react'
+
+type KnowledgeNode = IKnowledge & { children?: IKnowledge[] }
+
+interface KnowledgeChapterClientProps {
+  pId: string
+  id: string
+  book: KnowledgeNode
+  chapter: KnowledgeNode
+}
+
+export default function KnowledgeChapterClient({
+  pId,
+  id,
+  book,
+  chapter,
+}: KnowledgeChapterClientProps) {
+  const { t, locale } = useLocale()
+  const chapters = useMemo(() => book.children ?? [], [book.children])
+  const tocs = parseArticleToc(chapter.toc ?? '')
+  const idx = chapters.findIndex((item) => item.id === chapter.id)
+
+  const prev = useMemo(() => (idx > 0 ? chapters[idx - 1] : null), [chapters, idx])
+  const next = useMemo(
+    () => (idx >= 0 && idx < chapters.length - 1 ? chapters[idx + 1] : null),
+    [chapters, idx]
+  )
+
+  useEffect(() => {
+    KnowledgeProvider.updateKnowledgeViews(pId)
+    KnowledgeProvider.updateKnowledgeViews(id)
+  }, [pId, id])
+
+  useEffect(() => {
+    const el = document.getElementById(`js-toc-item-wrapper-${id}`)
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [id])
+
+  return (
+    <DoubleColumnLayout
+      likesProps={{
+        defaultCount: chapter.likes,
+        id: chapter.id,
+        api: (chapterId, type) =>
+          KnowledgeProvider.updateKnowledgeLikes(chapterId, type).then((res) => res.likes),
+      }}
+      showComment={book.isCommentable}
+      leftNode={
+        <>
+          <nav className="mb-4 text-sm text-[var(--second-text-color)]">
+            <Link
+              href="/knowledge"
+              className="text-[var(--primary-color)] no-underline hover:underline"
+            >
+              {t('knowledgeBooks')}
+            </Link>
+            <span className="mx-2">/</span>
+            <Link
+              href={`/knowledge/${pId}`}
+              className="text-[var(--primary-color)] no-underline hover:underline"
+            >
+              {book.title}
+            </Link>
+            <span className="mx-2">/</span>
+            <span className="text-[var(--main-text-color)]">{chapter.title}</span>
+          </nav>
+          <ImageViewer containerSelector="#js-knowledge-content">
+            <div
+              id="js-knowledge-content"
+              className="overflow-hidden rounded-lg bg-[var(--bg-box)] p-4 shadow-[var(--box-shadow)] md:p-6"
+            >
+              <article>
+                <div className="mb-6 border-b border-[var(--border-color)] pb-4">
+                  <h1 className="m-0 text-2xl font-semibold text-[var(--main-text-color)]">
+                    {chapter.title}
+                  </h1>
+                  <p className="mt-2 text-sm text-[var(--second-text-color)]">
+                    <span>
+                      {t('publishAt')}
+                      <LocaleTime date={chapter.publishAt} locale={locale} />
+                    </span>
+                    <span> • </span>
+                    <span>
+                      {t('readings')} {chapter.views}
+                    </span>
+                  </p>
+                </div>
+                <ReadingContent content={chapter.html || chapter.content} />
+                <ArticleCopyrightBar publishAt={chapter.publishAt} />
+                <div className="mt-6 flex flex-wrap gap-4">
+                  {prev ? (
+                    <Link
+                      href={`/knowledge/${pId}/${prev.id}`}
+                      className="flex min-w-0 items-center gap-2 rounded-lg border border-[var(--border-color)] px-4 py-3 text-sm no-underline hover:border-[var(--primary-color)]"
+                      style={{ width: next ? '45%' : '100%' }}
+                    >
+                      <span aria-hidden>‹</span>
+                      <span className="truncate text-[var(--main-text-color)]">{prev.title}</span>
+                    </Link>
+                  ) : null}
+                  {next ? (
+                    <Link
+                      href={`/knowledge/${pId}/${next.id}`}
+                      className="ml-auto flex min-w-0 items-center justify-end gap-2 rounded-lg border border-[var(--border-color)] px-4 py-3 text-sm no-underline hover:border-[var(--primary-color)]"
+                      style={{ width: prev ? '45%' : '100%' }}
+                    >
+                      <span className="truncate text-[var(--main-text-color)]">{next.title}</span>
+                      <span aria-hidden>›</span>
+                    </Link>
+                  ) : null}
+                </div>
+              </article>
+              {book.isCommentable ? (
+                <div className="rp-comment-wrap mt-8 border-t border-[var(--border-color)] pt-6">
+                  <p className="rp-cms-section-title">{t('comment')}</p>
+                  <div className="rp-comment-panel">
+                    <CommentSection hostId={chapter.id} />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </ImageViewer>
+        </>
+      }
+      rightNode={
+        <div className="rp-sidebar-sticky sticky mb-4 w-72 overflow-hidden rounded-lg bg-[var(--bg-box)] shadow-[var(--box-shadow)]">
+          <header className="border-b border-[var(--border-color)] px-4 py-3 font-semibold text-[var(--main-text-color)]">
+            {book.title}
+          </header>
+          <ul className="m-0 max-h-[70vh] list-none overflow-y-auto p-0">
+            {chapters.map((item) => (
+              <li
+                key={item.id}
+                id={`js-toc-item-wrapper-${item.id}`}
+                className="border-b border-[var(--border-color)] last:border-b-0"
+              >
+                <Link
+                  href={`/knowledge/${pId}/${item.id}`}
+                  className={`block px-4 py-2.5 text-sm no-underline ${
+                    item.id === id
+                      ? 'bg-[var(--bg-second)] font-medium text-[var(--primary-color)]'
+                      : 'text-[var(--main-text-color)] hover:bg-[var(--bg-second)]'
+                  }`}
+                >
+                  {item.title}
+                </Link>
+                {item.id === id && tocs.length ? (
+                  <div className="border-t border-[var(--border-color)] px-2 py-2">
+                    <ArticleToc items={tocs} showTitle={false} maxHeight="40vh" />
+                  </div>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </div>
+      }
+    />
+  )
+}

package/components/views/KnowledgeClient.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import ArticleRecommend from '@/components/article/ArticleRecommend'
+import CategoriesWidget from '@/components/widgets/CategoriesWidget'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import KnowledgeList from '@/components/knowledge/KnowledgeList'
+import LoadMore from '@/components/article/LoadMore'
+import { KnowledgeProvider } from '@/lib/providers/client'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import type { IKnowledge } from '@fecommunity/reactpress-toolkit/types'
+import { useCallback, useEffect, useState } from 'react'
+
+interface KnowledgeClientProps {
+  initialBooks: Array<IKnowledge & { children?: IKnowledge[] }>
+  total: number
+}
+
+const pageSize = 12
+
+export default function KnowledgeClient({ initialBooks = [], total = 0 }: KnowledgeClientProps) {
+  const { t } = useLocale()
+  const { categories } = useSiteCatalog()
+  const [page, setPage] = useState(1)
+  const [books, setBooks] = useState(initialBooks)
+
+  useEffect(() => {
+    setBooks(initialBooks)
+    setPage(1)
+  }, [initialBooks])
+
+  const loadMore = useCallback((nextPage: number) => {
+    return KnowledgeProvider.getKnowledges({
+      page: nextPage,
+      pageSize,
+      status: 'publish',
+    }).then((res) => {
+      setPage(nextPage)
+      setBooks((prev) => [...prev, ...res[0]])
+    })
+  }, [])
+
+  return (
+    <DoubleColumnLayout
+      leftNode={
+        <LoadMore
+          pageStart={1}
+          loadMore={loadMore}
+          hasMore={page * pageSize < total}
+          loader={
+            <div className="py-6 text-center text-sm text-[var(--second-text-color)]">
+              {t('gettingKnowledge')}
+            </div>
+          }
+        >
+          <KnowledgeList knowledges={books} />
+        </LoadMore>
+      }
+      rightNode={
+        <div className="rp-sidebar-sticky sticky mb-4 w-72">
+          <ArticleRecommend mode="inline" deferFetch />
+          <CategoriesWidget
+            categories={categories as Parameters<typeof CategoriesWidget>[0]['categories']}
+          />
+        </div>
+      }
+    />
+  )
+}

package/components/views/LoginClient.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import AuthPageClient from '@/components/auth/AuthPageClient'
+import { normalizeSessionUser } from '@/lib/auth/sessionUser'
+import { UserProvider } from '@/lib/providers/client'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import type { IUser } from '@fecommunity/reactpress-toolkit/types'
+import { useSiteSetting, useSiteUser } from '@fecommunity/reactpress-toolkit/theme'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+interface LoginClientProps {
+  code?: string
+  from?: string
+}
+
+export default function LoginClient({ code = '', from = '/' }: LoginClientProps) {
+  const { t } = useLocale()
+  const { setUser } = useSiteUser()
+  const setting = useSiteSetting()
+  const router = useRouter()
+  const [githubError, setGithubError] = useState('')
+
+  useEffect(() => {
+    if (!code) return
+
+    UserProvider.loginWithGithub(code)
+      .then((response) => {
+        const sessionUser = normalizeSessionUser(response)
+        if (!sessionUser?.token) {
+          throw new Error(t('wrongPasswd'))
+        }
+        setUser?.(sessionUser as IUser & { token: string })
+        router.replace(from || '/')
+      })
+      .catch((error: unknown) => {
+        const message =
+          error && typeof error === 'object' && 'message' in error
+            ? String((error as { message?: unknown }).message || '')
+            : ''
+        setGithubError(message || t('wrongPasswd'))
+      })
+  }, [code, from, router, setUser, t])
+
+  if (code) {
+    if (githubError) {
+      return (
+        <div className="rp-auth-page">
+          <div className="rp-auth-card">
+            <header className="rp-auth-card__header">
+              <p className="rp-auth-card__eyebrow">{setting.systemTitle}</p>
+              <h1 className="rp-auth-card__title">{t('pageTitleLogin')}</h1>
+            </header>
+            <div className="rp-auth-alert is-error" role="alert">
+              {githubError}
+            </div>
+            <a
+              href={`/login?from=${encodeURIComponent(from || '/')}`}
+              className="rp-auth-submit rp-auth-submit--link"
+            >
+              {t('commentNamespace.loginNow')}
+            </a>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="rp-auth-page">
+        <div className="rp-auth-card rp-auth-card--loading">
+          <div className="rp-auth-spinner" role="status" aria-label={t('logingWithGithub')} />
+          <p className="rp-auth-loading-text">{t('logingWithGithub')}</p>
+          <p className="rp-auth-loading-subtext">{setting.systemTitle}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return <AuthPageClient mode="login" from={from} />
+}

package/components/views/NavDetailClient.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import ArticleRecommend from '@/components/article/ArticleRecommend'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import Link from '@/components/shared/Link'
+import ThemeImage from '@/components/shared/ThemeImage'
+import SectionHeading from '@/components/shared/SectionHeading'
+import { ChevronLeftIcon, ChevronRightIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import { useRouter } from 'next/navigation'
+import { useCallback, useMemo, useState } from 'react'
+
+interface NavChild {
+  key: string
+  label: string
+  description?: string
+  url?: string
+  icon?: string
+}
+
+interface NavDetailClientProps {
+  siteKey: string
+  navConfig?: {
+    urlConfig?: Array<{ children?: NavChild[] }>
+  }
+}
+
+function getIconUrl(item: { icon?: string; url?: string }) {
+  if (item?.icon?.trim()) return item.icon.trim()
+  if (item?.url) return `${item.url.replace(/\/$/, '')}/favicon.ico`
+  return ''
+}
+
+function plainDescription(value?: string) {
+  if (!value?.trim()) return ''
+  return value
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function SiteIcon({ src, label }: { src: string; label: string }) {
+  const [failed, setFailed] = useState(false)
+
+  if (!src || failed) {
+    return (
+      <span className="rp-nav-detail__icon-fallback" aria-hidden>
+        {label.slice(0, 1)}
+      </span>
+    )
+  }
+
+  return (
+    <ThemeImage
+      src={src}
+      alt=""
+      width={56}
+      height={56}
+      className="rp-nav-detail__icon-img"
+      onError={() => setFailed(true)}
+    />
+  )
+}
+
+export default function NavDetailClient({ siteKey, navConfig }: NavDetailClientProps) {
+  const { t, locale } = useLocale()
+  const router = useRouter()
+  const { siteConfig, globalSetting } = useSiteCatalog()
+  const backLabel = locale === 'zh' ? '返回' : 'Back'
+
+  const handleBack = useCallback(() => {
+    if (typeof window !== 'undefined' && window.history.length > 1) {
+      router.back()
+      return
+    }
+    router.push('/search')
+  }, [router])
+
+  const article = useMemo(() => {
+    const urlConfig =
+      navConfig?.urlConfig ??
+      siteConfig?.nav?.urlConfig ??
+      (globalSetting as { globalConfig?: { urlConfig?: Array<{ children?: NavChild[] }> } })
+        ?.globalConfig?.urlConfig ??
+      []
+    const urlItem = urlConfig
+      .flatMap((item) => item.children ?? [])
+      .find((item) => item.key === siteKey)
+    return {
+      id: siteKey,
+      title: urlItem?.label ?? t('unknownTitle'),
+      cover: getIconUrl(urlItem ?? {}),
+      summary: plainDescription(urlItem?.description),
+      url: urlItem?.url ?? '',
+    }
+  }, [navConfig?.urlConfig, siteConfig?.nav?.urlConfig, globalSetting, siteKey, t])
+
+  const displayUrl = article.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
+
+  return (
+    <DoubleColumnLayout
+      className="rp-nav-detail-page"
+      topNode={
+        <nav className="rp-nav-detail__crumb" aria-label="breadcrumb">
+          <Link href="/search" className="rp-nav-detail__crumb-link">
+            {t('searchArticle')}
+          </Link>
+          <ChevronRightIcon size={14} className="rp-nav-detail__crumb-sep" aria-hidden />
+          <span className="rp-nav-detail__crumb-current">{article.title}</span>
+        </nav>
+      }
+      leftNode={
+        <div className="rp-nav-detail">
+          <article className="rp-nav-detail__card">
+            <header className="rp-nav-detail__header">
+              <div className="rp-nav-detail__header-main">
+                <div className="rp-nav-detail__icon">
+                  <SiteIcon src={article.cover} label={article.title} />
+                </div>
+                <div className="rp-nav-detail__meta">
+                  <h1 className="rp-nav-detail__title">{article.title}</h1>
+                  {displayUrl ? (
+                    <p className="rp-nav-detail__url" title={article.url}>
+                      {displayUrl}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+              <div className="rp-nav-detail__actions">
+                {article.url ? (
+                  <button
+                    type="button"
+                    onClick={() => window.open(article.url, '_blank', 'noopener,noreferrer')}
+                    className="rp-nav-detail__btn rp-nav-detail__btn--primary"
+                  >
+                    {t('navOpenSite')}
+                  </button>
+                ) : null}
+                <button
+                  type="button"
+                  onClick={handleBack}
+                  className="rp-nav-detail__btn rp-nav-detail__btn--ghost"
+                >
+                  <ChevronLeftIcon size={14} aria-hidden />
+                  {backLabel}
+                </button>
+              </div>
+            </header>
+
+            {article.summary ? <p className="rp-nav-detail__summary">{article.summary}</p> : null}
+
+            <div className="rp-nav-detail__disclaimer" role="note">
+              {t('navPreviewDisclaimer')}
+            </div>
+
+            {article.url ? (
+              <div className="rp-nav-detail__preview">
+                <iframe
+                  title={article.title}
+                  src={article.url}
+                  className="rp-nav-detail__iframe"
+                  allowFullScreen
+                />
+              </div>
+            ) : null}
+          </article>
+
+          <section className="rp-nav-detail__recommend">
+            <SectionHeading>{t('recommendToReading')}</SectionHeading>
+            <ArticleRecommend articleId={article.id} needTitle={false} />
+          </section>
+        </div>
+      }
+    />
+  )
+}