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

package/components/views/SearchClient.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import ArticleList from '@/components/article/ArticleList'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import SearchHero from '@/components/search/SearchHero'
+import SearchQuickLinks from '@/components/search/SearchQuickLinks'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { useSiteNavConfig } from '@/lib/reactpress/useSiteNavConfig'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import type { ListArticle } from '@fecommunity/reactpress-toolkit/theme'
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+
+interface SearchClientProps {
+  keyword: string
+  articles: ListArticle[]
+  navConfig?: {
+    urlConfig?: unknown[]
+    searchCategories?: {
+      categories?: Array<{ key: string; label: string }>
+      subCategories?: Record<string, Array<{ key: string; label: string; url?: string }>>
+    }
+  }
+}
+
+export default function SearchClient({
+  keyword: initialKeyword = '',
+  articles: initialArticles = [],
+  navConfig,
+}: SearchClientProps) {
+  const { t, locale } = useLocale()
+  const router = useRouter()
+  const [articles, setArticles] = useState(initialArticles)
+  const hasSearchResults = Boolean(initialKeyword.trim())
+  const { footerAtBottom } = useFeedFooterPlacement({
+    itemCount: hasSearchResults ? articles.length : 0,
+  })
+
+  const { urlConfig, searchCategories } = useSiteNavConfig(navConfig)
+  const quickLinks = urlConfig as Parameters<typeof SearchQuickLinks>[0]['dataSource']
+
+  useEffect(() => {
+    setArticles(initialArticles)
+  }, [initialArticles])
+
+  const runSearch = useCallback(
+    (value: string) => {
+      const trimmed = value.trim()
+      if (!trimmed) {
+        router.push('/search')
+        return
+      }
+      router.push(`/search?keyword=${encodeURIComponent(trimmed)}`)
+    },
+    [router]
+  )
+
+  return (
+    <DoubleColumnLayout
+      className="rp-search-page"
+      fillMinHeight={footerAtBottom}
+      topNode={
+        <SearchHero
+          key={locale}
+          searchCategories={searchCategories}
+          initialKeyword={initialKeyword}
+          onLocalSearch={runSearch}
+          compact={hasSearchResults}
+        />
+      }
+      leftNode={
+        hasSearchResults ? (
+          <div className="rp-search-results">
+            <div className="rp-search-results__summary">
+              <p className="m-0 text-sm text-[var(--second-text-color)]">
+                {t('totalSearch')}{' '}
+                <span className="font-semibold text-[var(--primary-color)]">{articles.length}</span>{' '}
+                {t('piece')}
+              </p>
+              <p className="m-0 mt-1 text-base font-medium text-[var(--main-text-color)]">
+                &ldquo;{initialKeyword}&rdquo;
+              </p>
+            </div>
+            <main className="rp-search-results__list">
+              {articles.length ? (
+                <ArticleList articles={articles} />
+              ) : (
+                <div className="rounded-xl bg-[var(--bg-box)] p-10 text-center text-[var(--second-text-color)] ring-1 ring-black/5 dark:ring-white/5">
+                  {t('empty')}
+                </div>
+              )}
+            </main>
+          </div>
+        ) : (
+          <SearchQuickLinks key={locale} dataSource={quickLinks} />
+        )
+      }
+    />
+  )
+}

package/components/views/TagArchiveClient.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import ArchiveBanner from '@/components/article/ArchiveBanner'
+import ArticleFeedSection from '@/components/article/ArticleFeedSection'
+import ArticleList from '@/components/article/ArticleList'
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import HomeSidebar from '@/components/widgets/HomeSidebar'
+import TagsWidget from '@/components/widgets/TagsWidget'
+import { FEED_PAGE_SIZE } from '@/lib/reactpress/feedFooterPlacement'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { ArticleProvider } from '@/lib/providers/client'
+import { getArchiveBannerImage } from '@/lib/utils/archiveBanner'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import {
+  slimArticlesForList,
+  useSiteCatalog,
+  type ListArticle,
+} from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+interface TagArchiveClientProps {
+  initialArticles: ListArticle[]
+  total: number
+  tag: { value: string; label: string }
+}
+
+const pageSize = FEED_PAGE_SIZE
+
+export default function TagArchiveClient({
+  initialArticles = [],
+  total = 0,
+  tag,
+}: TagArchiveClientProps) {
+  const { t } = useLocale()
+  const { tags } = useSiteCatalog()
+  const [page, setPage] = useState(1)
+  const [articles, setArticles] = useState(initialArticles)
+  const banner = useMemo(() => getArchiveBannerImage(articles), [articles])
+  const hasMore = page * pageSize < total
+  const { footerInSidebar, footerAtBottom } = useFeedFooterPlacement({
+    hasMore,
+    itemCount: articles.length,
+    pageSize,
+  })
+
+  useEffect(() => {
+    setArticles(initialArticles)
+    setPage(1)
+  }, [initialArticles])
+
+  const getArticles = useCallback(
+    (nextPage: number) => {
+      return ArticleProvider.getArticlesByTag(tag.value, {
+        page: nextPage,
+        pageSize,
+        status: 'publish',
+      }).then((res) => {
+        setPage(nextPage)
+        setArticles((prev) => [...prev, ...slimArticlesForList(res[0])])
+      })
+    },
+    [tag.value]
+  )
+
+  return (
+    <DoubleColumnLayout
+      fillMinHeight={footerAtBottom}
+      leftNode={
+        <>
+          <ArchiveBanner
+            imageUrl={banner.url}
+            isBrandFallback={banner.isBrandFallback}
+            title={
+              <>
+                {t('yu')} <span>{tag.label}</span> {t('tagRelativeArticles')}
+              </>
+            }
+            subtitle={
+              <>
+                {t('totalSearch')} <span>{total}</span> {t('piece')}
+              </>
+            }
+          />
+          <TagsWidget tags={tags as Parameters<typeof TagsWidget>[0]['tags']} />
+          <ArticleFeedSection
+            showCategoryMenu={false}
+            pageStart={1}
+            loadMore={getArticles}
+            hasMore={hasMore}
+          >
+            <ArticleList articles={articles} />
+          </ArticleFeedSection>
+        </>
+      }
+      rightNode={
+        <HomeSidebar
+          showTags={false}
+          showCategories
+          showAboutUs={footerInSidebar}
+          deferRecommend={false}
+        />
+      }
+    />
+  )
+}

package/components/views/TagsClient.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import DoubleColumnLayout from '@/components/layout/DoubleColumnLayout'
+import HomeSidebar from '@/components/widgets/HomeSidebar'
+import TagsWidget from '@/components/widgets/TagsWidget'
+import { FEED_PAGE_SIZE } from '@/lib/reactpress/feedFooterPlacement'
+import { useFeedFooterPlacement } from '@/lib/reactpress/useFeedFooterPlacement'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import type { ITag } from '@fecommunity/reactpress-toolkit/types'
+
+interface TagsClientProps {
+  tags: ITag[]
+}
+
+export default function TagsClient({ tags }: TagsClientProps) {
+  const { t } = useLocale()
+  const { footerInSidebar, footerAtBottom } = useFeedFooterPlacement({
+    itemCount: tags.length,
+    pageSize: FEED_PAGE_SIZE,
+  })
+
+  return (
+    <DoubleColumnLayout
+      fillMinHeight={footerAtBottom}
+      leftNode={
+        <div className="overflow-hidden rounded-lg bg-[var(--bg-box)] p-6 shadow-[var(--box-shadow)]">
+          <h1 className="m-0 text-2xl font-semibold text-[var(--main-text-color)]">
+            {t('tagTitle')}
+          </h1>
+          <p className="mt-2 text-sm text-[var(--second-text-color)]">{tags.length} tags</p>
+          <div className="mt-6">
+            <TagsWidget tags={tags} needTitle={false} />
+          </div>
+        </div>
+      }
+      rightNode={
+        <HomeSidebar
+          showTags={false}
+          showCategories
+          showAboutUs={footerInSidebar}
+          deferRecommend={false}
+        />
+      }
+    />
+  )
+}

package/components/widgets/AboutUs.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import ThemeImage from '@/components/shared/ThemeImage'
+import type { ReactNode } from 'react'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+import { useSiteSetting } from '@fecommunity/reactpress-toolkit/theme'
+
+function trimUrl(value?: string) {
+  return (value ?? '').trim()
+}
+
+function QrPopover({
+  imageUrl,
+  label,
+  children,
+}: {
+  imageUrl: string
+  label: string
+  children: ReactNode
+}) {
+  return (
+    <span className="group relative inline-flex">
+      {children}
+      <span
+        role="tooltip"
+        className="rp-glass pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden -translate-x-1/2 rounded-xl p-2 shadow-lg group-hover:block"
+      >
+        <ThemeImage
+          src={imageUrl}
+          alt={label}
+          width={300}
+          height={200}
+          className="h-auto max-h-[200px] w-auto max-w-[300px]"
+        />
+      </span>
+    </span>
+  )
+}
+
+function ContactInfo() {
+  const { t } = useLocale()
+  const setting = useSiteSetting()
+  const githubUrl = trimUrl(setting?.aboutUsGithubUrl)
+  const commentQr = trimUrl(setting?.aboutUsCommentQr)
+  const wechatQr = trimUrl(setting?.aboutUsWechatQr)
+
+  const items = [
+    <a
+      key="rss"
+      href="/rss"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="rss"
+      title={t('rssSubscribe')}
+      className="inline-flex text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+    >
+      <svg viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" aria-hidden>
+        <path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m-182.4 768C288 768 256 736 256 694.4s32-73.6 73.6-73.6 73.6 32 73.6 73.6-32 73.6-73.6 73.6z m185.6 0c0-144-115.2-259.2-259.2-259.2v-80c185.6 0 339.2 150.4 339.2 339.2h-80z m172.8 0c0-240-195.2-432-432-432V256c281.6 0 512 230.4 512 512h-80z" />
+      </svg>
+    </a>,
+    githubUrl ? (
+      <a
+        key="github"
+        href={githubUrl}
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        aria-label="Github"
+        title="Github"
+        className="inline-flex text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+      >
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden>
+          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+        </svg>
+      </a>
+    ) : null,
+    commentQr ? (
+      <QrPopover key="comment" imageUrl={commentQr} label="comment">
+        <span
+          role="img"
+          aria-label="comment"
+          title={t('comment')}
+          className="inline-flex cursor-pointer text-2xl text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+        >
+          💬
+        </span>
+      </QrPopover>
+    ) : null,
+    wechatQr ? (
+      <QrPopover key="wechat" imageUrl={wechatQr} label="wechat">
+        <span
+          role="img"
+          aria-label="wechat"
+          title="WeChat"
+          className="inline-flex cursor-pointer text-2xl text-[var(--main-text-color)] hover:text-[var(--primary-color)]"
+        >
+          💚
+        </span>
+      </QrPopover>
+    ) : null,
+  ].filter(Boolean)
+
+  if (!items.length) return null
+
+  return (
+    <div className="mt-4 border-t border-dashed border-[var(--border-color)] pt-4">
+      <ul className="m-0 flex list-none items-center justify-between p-0">
+        {items.map((item, index) => (
+          <li
+            key={index}
+            className={index > 0 ? 'ml-3 border-l border-[var(--border-color)] pl-3' : undefined}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+interface AboutUsProps {
+  variant?: 'sidebar' | 'default' | 'bottom'
+}
+
+function AboutUsBody() {
+  const { t } = useLocale()
+  const setting = useSiteSetting()
+
+  return (
+    <>
+      {setting?.systemSubTitle ? (
+        <p className="mt-0 mb-3 leading-relaxed">{setting.systemSubTitle}</p>
+      ) : null}
+      {setting?.systemFooterInfo ? (
+        <div
+          className="rp-rich-text leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: setting.systemFooterInfo }}
+        />
+      ) : (
+        <p className="m-0 leading-relaxed">{t('aboutUsFallback')}</p>
+      )}
+      <ContactInfo />
+    </>
+  )
+}
+
+export default function AboutUs({ variant = 'default' }: AboutUsProps) {
+  const { t } = useLocale()
+  const isSidebar = variant === 'sidebar'
+  const isBottom = variant === 'bottom'
+
+  if (isBottom) {
+    return (
+      <div className="rp-widget-panel overflow-hidden rounded-xl bg-[var(--bg-box)] text-[var(--second-text-color)] shadow-[var(--box-shadow)] ring-1 ring-black/5 dark:ring-white/5">
+        <div className="flex flex-col gap-4 p-4 md:flex-row md:items-start md:gap-8 md:p-6">
+          <h3 className="m-0 shrink-0 text-base font-bold text-[var(--main-text-color)] md:w-40">
+            {t('aboutUs')}
+          </h3>
+          <div className="min-w-0 flex-1 text-sm">
+            <AboutUsBody />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`rp-widget-panel overflow-hidden rounded-xl bg-[var(--bg-box)] shadow-[var(--box-shadow)] ring-1 ring-black/5 dark:ring-white/5 ${
+        isSidebar ? 'border-t-0 text-[var(--second-text-color)]' : ''
+      }`}
+    >
+      <div className="border-b border-[var(--border-color)] p-4 font-bold text-[var(--main-text-color)]">
+        {t('aboutUs')}
+      </div>
+      <div className="p-4 text-sm text-[var(--second-text-color)]">
+        <AboutUsBody />
+      </div>
+    </div>
+  )
+}

package/components/widgets/ArticleActionButton.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+export type ArticleActionVariant = 'floating' | 'inline' | 'mobile'
+
+interface ArticleActionButtonProps {
+  active?: boolean
+  disabled?: boolean
+  label: string
+  count?: number
+  onClick: () => void
+  variant?: ArticleActionVariant
+  activeClassName?: string
+  children: ReactNode
+}
+
+export default function ArticleActionButton({
+  active = false,
+  disabled = false,
+  label,
+  count,
+  onClick,
+  variant = 'floating',
+  activeClassName = 'is-liked',
+  children,
+}: ArticleActionButtonProps) {
+  const className = [
+    'rp-action-btn',
+    variant === 'inline' ? 'rp-action-btn--inline' : '',
+    variant === 'mobile' ? 'rp-action-btn--mobile' : '',
+    active ? activeClassName : '',
+    disabled ? 'is-disabled' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  if (variant === 'inline') {
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        aria-pressed={active}
+        disabled={disabled}
+        onClick={onClick}
+        className={className}
+      >
+        <span className="rp-action-btn__icon" aria-hidden>
+          {children}
+        </span>
+        <span className="rp-action-btn__label">{label}</span>
+        {count != null && count > 0 ? <span className="rp-action-btn__count">{count}</span> : null}
+      </button>
+    )
+  }
+
+  if (variant === 'mobile') {
+    return (
+      <button
+        type="button"
+        aria-label={label}
+        aria-pressed={active}
+        disabled={disabled}
+        onClick={onClick}
+        className={className}
+      >
+        <span className="rp-action-btn__icon" aria-hidden>
+          {children}
+        </span>
+        <span className="rp-action-btn__mobile-label">{label}</span>
+        {count != null && count > 0 ? (
+          <span className="rp-action-btn__mobile-count">{count}</span>
+        ) : null}
+      </button>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={active}
+      disabled={disabled}
+      onClick={onClick}
+      className={className}
+    >
+      <span className="rp-action-btn__icon" aria-hidden>
+        {children}
+      </span>
+      {count != null ? (
+        <span className="rp-action-btn__count-below">{count > 0 ? count : ''}</span>
+      ) : null}
+    </button>
+  )
+}

package/components/widgets/BookmarkWidget.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import ArticleActionButton, {
+  type ArticleActionVariant,
+} from '@/components/widgets/ArticleActionButton'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+import { useCallback, useEffect, useState } from 'react'
+
+const STORAGE_KEY = 'BOOKMARKS'
+
+interface BookmarkWidgetProps {
+  id: string
+  variant?: ArticleActionVariant
+}
+
+function readBookmarks(): string[] {
+  try {
+    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') as string[]
+  } catch {
+    return []
+  }
+}
+
+export default function BookmarkWidget({ id, variant = 'floating' }: BookmarkWidgetProps) {
+  const { locale } = useSiteCatalog()
+  const [bookmarked, setBookmarked] = useState(false)
+  const label = locale === 'zh' ? '收藏' : 'Bookmark'
+
+  useEffect(() => {
+    setBookmarked(readBookmarks().includes(id))
+  }, [id])
+
+  const toggle = useCallback(() => {
+    const stored = readBookmarks()
+    const nextStored = bookmarked ? stored.filter((item) => item !== id) : [...stored, id]
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(nextStored))
+    setBookmarked(!bookmarked)
+  }, [bookmarked, id])
+
+  return (
+    <ArticleActionButton
+      active={bookmarked}
+      label={label}
+      onClick={toggle}
+      variant={variant}
+      activeClassName="is-bookmarked"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="20"
+        height="20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        aria-hidden
+      >
+        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+      </svg>
+    </ArticleActionButton>
+  )
+}

package/components/widgets/CategoriesWidget.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import Link from '@/components/shared/Link'
+import { FolderIcon } from '@/lib/utils/icons'
+import { useLocale } from '@fecommunity/reactpress-toolkit/ui'
+
+interface Category {
+  value: string
+  label: string
+  articleCount?: number
+}
+
+interface CategoriesWidgetProps {
+  categories: Category[]
+}
+
+export default function CategoriesWidget({ categories = [] }: CategoriesWidgetProps) {
+  const { t } = useLocale()
+
+  return (
+    <div className="rp-widget-panel mb-5 overflow-hidden rounded-xl bg-[var(--bg-box)] leading-snug shadow-[var(--box-shadow)] ring-1 ring-black/5 dark:ring-white/5">
+      <div className="border-b border-[var(--border-color)] p-4 font-bold text-[var(--main-text-color)]">
+        <FolderIcon size={16} className="mr-2 inline-block text-[var(--primary-color)]" />
+        <span>{t('categoryTitle')}</span>
+      </div>
+      <ul className="m-0 list-none p-4">
+        {categories.map((category) => (
+          <li
+            key={category.value}
+            className="rp-category-item rounded-lg px-2 py-2 text-[var(--second-text-color)]"
+          >
+            <Link
+              href={`/category/${category.value}`}
+              aria-label={category.label}
+              className="flex w-full items-center justify-between text-sm no-underline hover:text-inherit"
+            >
+              <span className="text-[var(--main-text-color)]">{category.label}</span>
+              <span>
+                {t('total')} {category.articleCount ?? 0} {t('articleCountTemplate')}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/components/widgets/HomeSidebar.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import AboutUs from '@/components/widgets/AboutUs'
+import ArticleRecommend from '@/components/article/ArticleRecommend'
+import CategoriesWidget from '@/components/widgets/CategoriesWidget'
+import TagsWidget from '@/components/widgets/TagsWidget'
+import { useSiteCatalog } from '@fecommunity/reactpress-toolkit/theme'
+
+interface HomeSidebarProps {
+  showTags?: boolean
+  showCategories?: boolean
+  showRecommend?: boolean
+  showAboutUs?: boolean
+  deferRecommend?: boolean
+}
+
+export default function HomeSidebar({
+  showTags = true,
+  showCategories = false,
+  showRecommend = true,
+  showAboutUs = true,
+  deferRecommend = true,
+}: HomeSidebarProps) {
+  const { tags, categories } = useSiteCatalog()
+
+  return (
+    <div className="rp-sidebar-enter rp-sidebar-sticky sticky mb-4 w-72">
+      {showRecommend ? <ArticleRecommend mode="inline" deferFetch={deferRecommend} /> : null}
+      {showTags ? (
+        <TagsWidget tags={tags as Parameters<typeof TagsWidget>[0]['tags']} animationMode />
+      ) : null}
+      {showCategories ? (
+        <CategoriesWidget
+          categories={categories as Parameters<typeof CategoriesWidget>[0]['categories']}
+        />
+      ) : null}
+      {showAboutUs ? <AboutUs variant="sidebar" /> : null}
+    </div>
+  )
+}