@kids-reporter/routing-ui 0.1.0-alpha.5 → 0.1.0-alpha.6

package/src/constants/default-values.tsx

@@ -1,153 +0,0 @@
-import { SettingsIconSmall } from '../icons'
-import { MenuItem } from '../types'
-
-export const SUBSCRIBE_URL = 'https://solink.soundon.fm/kidstwreporter'
-export const DONATE_URL = 'https://support.twreporter.org/'
-export const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'
-export const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'
-
-export const MENU_ITEMS: MenuItem[] = [
-  {
-    label: '最新',
-    href: '/all',
-    subItems: [],
-  },
-  {
-    label: '專題',
-    href: '/topic/page',
-    subItems: [],
-  },
-  {
-    label: '新聞',
-    href: '/category/news',
-    subItems: [
-      { label: '焦點新聞', href: '/category/news/times' },
-      { label: '真的假的', href: '/category/news/knowledge' },
-      { label: '人物故事', href: '/category/news/story' },
-      { label: '文化報導', href: '/category/news/explore' },
-      { label: '專欄', href: '/category/news/column' },
-      { label: '英文新聞', href: '/categories/news/english-version' },
-    ],
-  },
-  {
-    label: '多媒體',
-    href: '/category/comics',
-    subItems: [
-      { label: '圖解新聞', href: '/category/comics/times' },
-      { label: '新聞遊戲', href: '/category/comics/test-news' },
-      { label: '圖文故事', href: '/category/comics/graphic-story' },
-    ],
-  },
-  {
-    label: '校園',
-    href: '/category/campus',
-    subItems: [
-      { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },
-      { label: '上課好好玩', href: '/category/campus/teaching' },
-      { label: '小讀者連線', href: '/category/campus/joining' },
-    ],
-  },
-  {
-    label: 'Podcast',
-    href: '/category/listening-news',
-    subItems: [
-      {
-        label: '小記者，問什麼？',
-        href: '/category/listening-news/kids-reporter-ask',
-      },
-      {
-        label: '新聞讀報',
-        href: '/category/listening-news/multilingual-listening-news',
-      },
-      {
-        label: '新聞關鍵字',
-        href: '/category/listening-news/listening-news-keywords',
-      },
-      {
-        label: '文化關鍵字',
-        href: '/category/listening-news/listening-news-culture-keywords',
-      },
-    ],
-  },
-  {
-    label: '教案',
-    href: '/category/classroom',
-    subItems: [],
-  },
-]
-
-export const ADDITIONAL_MENU_ITEMS: MenuItem[] = [
-  {
-    label: '閱讀探索設定',
-    href: '/reading-settings',
-    subItems: [],
-    showIcon: true,
-    icon: <SettingsIconSmall />,
-  },
-  {
-    label: '關於我們',
-    href: '/about',
-    subItems: [],
-  },
-  {
-    label: '呼叫報導仔流程',
-    href: '/about#callkidsreporter',
-    subItems: [],
-  },
-  {
-    label: '投稿專區',
-    href: 'https://forms.gle/49AEG8kFj7QWjgij8',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '加入小記者',
-    href: 'https://forms.gle/eGq5jagNTwriwSCX6',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '訂閱Podcast',
-    href: 'https://solink.soundon.fm/kidstwreporter',
-    subItems: [],
-    external: true,
-  },
-  {
-    label: '聯絡我們',
-    href: '/about#mail',
-    subItems: [],
-  },
-  {
-    label: '前往《報導者》',
-    href: 'https://www.twreporter.org/',
-    subItems: [],
-    external: true,
-  },
-]
-
-export const SOCIAL_MEDIA_ITEMS = [
-  {
-    label: 'Facebook',
-    href: 'https://www.facebook.com/twreporter/',
-  },
-  {
-    label: 'Instagram',
-    href: 'https://www.instagram.com/twreporter/',
-  },
-  {
-    label: 'YouTube',
-    href: 'https://www.youtube.com/@TwreporterOrg',
-  },
-  {
-    label: 'Threads',
-    href: 'https://www.threads.com/@twreporter',
-  },
-  {
-    label: 'Medium',
-    href: 'https://medium.com/twreporter',
-  },
-  {
-    label: 'RSS',
-    href: 'https://kids-storage.twreporter.org/rss/rss.xml',
-  },
-]

package/src/footer.tsx

@@ -1,149 +0,0 @@
-'use client'
-
-import Button from './components/button'
-import {
-  ADDITIONAL_MENU_ITEMS,
-  DONATE_URL,
-  PRIVACY_POLICY,
-  SOCIAL_MEDIA_ITEMS,
-} from './constants/default-values'
-import { MenuItem, SocialMediaHrefs } from './types'
-import { generateSocialMediaConfig } from './utils/generate-social-media-config'
-
-type FooterProps = {
-  socialMediaHrefs?: SocialMediaHrefs
-  additionalMenuItems?: MenuItem[]
-  donateUrl?: string
-  privacyPolicyUrl?: string
-}
-
-const Footer = ({
-  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
-  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
-  donateUrl = DONATE_URL,
-  privacyPolicyUrl = PRIVACY_POLICY,
-}: FooterProps) => {
-  const socialMediaConfig = generateSocialMediaConfig(socialMediaHrefs)
-
-  return (
-    <footer className="w-full bg-neutral-white">
-      {/* Main Footer Content */}
-      <div className="py-12 desktop:py-14 w-full bg-neutral-white px-(--margin-mobile) desktop:px-(--margin-desktop)">
-        <div className="max-w-300 mx-auto">
-          <div className="gap-8 flex flex-col items-center desktop:flex-row desktop:justify-between">
-            {/* Logo and Description */}
-            <div className="max-w-100 gap-6 flex w-full flex-col items-center desktop:items-start">
-              <div className="flex items-center">
-                <a href="/" className="flex items-center">
-                  <img
-                    src="/assets/images/footer-logo.svg"
-                    alt="少年報導者"
-                    loading="lazy"
-                    width={238}
-                    height={26}
-                  />
-                </a>
-              </div>
-              <p className="w-full prose-p2 text-neutral-900">
-                《少年報導者》是由非營利媒體《報導者》針對兒少打造的深度新聞報導品牌，與兒童和少年一起理解世界，參與未來。
-              </p>
-              <Button size={44} variant="secondary" asChild className="w-75">
-                <a href={donateUrl} target="_blank" rel="noreferrer">
-                  贊助我們
-                </a>
-              </Button>
-            </div>
-
-            <div className="gap-6 flex flex-row">
-              <div className="gap-2 flex flex-col">
-                {additionalMenuItems.slice(0, 4).map((link) => (
-                  <a
-                    key={link.label}
-                    href={link.href}
-                    className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
-                    target={link.external ? '_blank' : undefined}
-                    rel={link.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-              </div>
-              <div className="gap-2 flex flex-col">
-                {additionalMenuItems.slice(4).map((link) => (
-                  <a
-                    key={link.label}
-                    href={link.href}
-                    className="min-w-30 prose-p2-bold text-neutral-900 transition-colors duration-200 hover:text-red-400"
-                    target={link.external ? '_blank' : undefined}
-                    rel={link.external ? 'noopener noreferrer' : undefined}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="py-6 w-full bg-red-400 px-(--margin-mobile) desktop:px-(--margin-desktop)">
-        <div className="max-w-300 mx-auto">
-          <div className="gap-5 desktop:gap-4 flex flex-col items-center desktop:flex-row desktop:justify-between">
-            <div className="gap-4 order-1 flex items-center desktop:order-2">
-              {socialMediaConfig.map((social) => {
-                const IconComponent = social.icon
-                return (
-                  <a
-                    key={social.label}
-                    href={social.href}
-                    className="relative text-neutral-white transition-colors duration-200 hover:text-neutral-200"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={social.label}
-                  >
-                    <div className="peer w-6 h-6 relative z-10 flex items-center justify-center rounded-full text-neutral-white transition-all duration-200 hover:text-red-500">
-                      {IconComponent && <IconComponent />}
-                    </div>
-                    <div className="p-2 peer-hover:bg-white absolute top-1/2 left-1/2 z-1 flex h-[23px] w-[23px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-all duration-200"></div>
-                  </a>
-                )
-              })}
-            </div>
-
-            <div className="text-center prose-p3 text-neutral-white desktop:order-1 desktop:text-left">
-              <p className="desktop:inline">
-                衛部救字第1131363879號｜勸募期間 2025/1/1~12/31
-                <span className="hidden desktop:inline">｜</span>
-              </p>
-              <p className="desktop:inline">
-                <a
-                  href={privacyPolicyUrl}
-                  target="_blank"
-                  className="desktop:ml-1 text-neutral-white underline"
-                  rel="noopener noreferrer"
-                >
-                  隱私政策
-                </a>
-                ｜
-                <a
-                  href="https://www.twreporter.org/a/license-footer"
-                  target="_blank"
-                  className="desktop:ml-1 text-neutral-white underline"
-                  rel="noopener noreferrer"
-                >
-                  許可協議
-                </a>
-              </p>
-              <p className="hidden desktop:inline">｜</p>
-              <p className="desktop:inline">
-                Copyright © {new Date().getFullYear()} The Reporter
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  )
-}
-
-export default Footer

package/src/header/desktop-header.tsx

@@ -1,132 +0,0 @@
-'use client'
-
-import { LoginIcon } from '../icons'
-import type { MenuItem } from '../types'
-import { cn } from '../utils/cn'
-import {
-  ActionButtons,
-  BottomNavigation,
-  HamburgerButton,
-  LogoLink,
-} from './shared-components'
-
-type DesktopHeaderProps = {
-  onHamburgerOverlayOpen: () => void
-  keywords: string[]
-  compactMode: boolean
-  postTitle?: string
-  hide: boolean
-  searchPlaceholder: string
-  subscribeUrl: string
-  menuItems: MenuItem[]
-  isLoggedIn?: boolean
-  loginUrl?: string
-}
-
-export function DesktopHeader({
-  onHamburgerOverlayOpen,
-  keywords,
-  compactMode,
-  postTitle,
-  hide,
-  searchPlaceholder,
-  subscribeUrl,
-  menuItems,
-  isLoggedIn,
-  loginUrl,
-}: DesktopHeaderProps) {
-  return (
-    <>
-      <div className="hidden h-(--desktop-header-height) desktop:block"></div>
-      <div
-        className={cn(
-          'top-0 ease-in-out fixed left-1/2 z-1000 hidden w-full -translate-x-1/2 transform transition-all duration-500 desktop:block',
-          compactMode && 'bg-white',
-          hide
-            ? 'pointer-events-none -translate-y-full opacity-0'
-            : 'translate-y-0 pointer-events-auto opacity-100'
-        )}
-      >
-        <div className="px-12 hidden w-full bg-transparent desktop:block">
-          <div className="max-w-300 mx-auto">
-            <div
-              className={cn(
-                'px-4 flex items-center justify-between py-[18px]',
-                compactMode && 'py-2.5'
-              )}
-            >
-              <div className={'flex items-center'}>
-                <div
-                  className={cn(
-                    'ease-in-out overflow-hidden transition-all duration-500',
-                    compactMode
-                      ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'
-                      : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'
-                  )}
-                >
-                  <HamburgerButton
-                    onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-                    small
-                  />
-                </div>
-                <div className={compactMode ? 'mr-12' : 'mr-8'}>
-                  <LogoLink compactMode={compactMode} />
-                </div>
-                {postTitle && (
-                  <div className="pr-12 block">
-                    <p className="font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900">
-                      {postTitle}
-                    </p>
-                  </div>
-                )}
-                <div
-                  className={cn(
-                    'ease-in-out overflow-hidden transition-all duration-500',
-                    compactMode
-                      ? 'max-h-0 -translate-x-8 scale-95 opacity-0'
-                      : 'max-h-20 max-w-auto scale-100 opacity-100',
-                    postTitle && compactMode && 'max-w-0'
-                  )}
-                >
-                  <span className="font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100">
-                    理解世界 × 參與未來
-                  </span>
-                </div>
-              </div>
-
-              <div className="gap-4 flex items-center">
-                <ActionButtons
-                  tags={keywords}
-                  hideCtaButtons={compactMode}
-                  searchPlaceholder={searchPlaceholder}
-                  subscribeUrl={subscribeUrl}
-                />
-                <a
-                  href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}
-                  className="w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500"
-                  aria-label="登入"
-                >
-                  <LoginIcon />
-                </a>
-              </div>
-            </div>
-
-            <div
-              className={cn(
-                'ease-in-out overflow-hidden transition-all duration-500',
-                compactMode
-                  ? 'h-0 -translate-y-4 opacity-0'
-                  : 'translate-y-0 h-auto opacity-100'
-              )}
-            >
-              <BottomNavigation
-                onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-                menuItems={menuItems}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

package/src/header/header-context.tsx

@@ -1,82 +0,0 @@
-'use client'
-import {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react'
-
-type HeaderContextType = {
-  postTitle?: string
-  setPostTitle: (title?: string) => void
-  isMenuOpen: boolean
-  openMenu: () => void
-  closeMenu: () => void
-  keywords: string[]
-  isLoggedIn: boolean
-  setIsLoggedIn: (isLoggedIn: boolean) => void
-  mobileBackButtonHref?: string
-  setMobileBackButtonHref: (href?: string) => void
-  loginUrl?: string
-  setLoginUrl: (url?: string) => void
-}
-
-const HeaderContext = createContext<HeaderContextType | undefined>(undefined)
-
-export function HeaderProvider({
-  children,
-  keywords,
-}: {
-  children: ReactNode
-  keywords: string[]
-}) {
-  const [postTitle, setPostTitle] = useState<string | undefined>(undefined)
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isLoggedIn, setIsLoggedIn] = useState(false)
-  const [mobileBackButtonHref, setMobileBackButtonHref] = useState<
-    string | undefined
-  >(undefined)
-  const [loginUrl, setLoginUrl] = useState<string | undefined>(undefined)
-  const openMenu = useCallback(() => setIsMenuOpen(true), [])
-  const closeMenu = useCallback(() => setIsMenuOpen(false), [])
-
-  const contextValue = useMemo(
-    () => ({
-      postTitle,
-      setPostTitle,
-      isMenuOpen,
-      openMenu,
-      closeMenu,
-      keywords,
-      isLoggedIn,
-      setIsLoggedIn,
-      mobileBackButtonHref,
-      setMobileBackButtonHref,
-      loginUrl,
-      setLoginUrl,
-    }),
-    [
-      postTitle,
-      isMenuOpen,
-      openMenu,
-      closeMenu,
-      keywords,
-      isLoggedIn,
-      mobileBackButtonHref,
-      loginUrl,
-    ]
-  )
-
-  return (
-    <HeaderContext.Provider value={contextValue}>
-      {children}
-    </HeaderContext.Provider>
-  )
-}
-
-export function useHeaderContext() {
-  const context = useContext(HeaderContext)
-  return context
-}

package/src/header/index.tsx

@@ -1,104 +0,0 @@
-'use client'
-import {
-  ADDITIONAL_MENU_ITEMS,
-  DONATE_URL,
-  MENU_ITEMS,
-  SEARCH_PLACEHOLDER,
-  SOCIAL_MEDIA_ITEMS,
-  SUBSCRIBE_URL,
-} from '../constants/default-values'
-import {
-  ScrollLevel,
-  useIsAtTop,
-  useMediaQuery,
-  useScrollLevel,
-} from '../hooks'
-import type { MenuItem, SocialMediaHrefs } from '../types'
-import { DesktopHeader } from './desktop-header'
-import { useHeaderContext } from './header-context'
-import Menu from './menu'
-import { MobileHeader } from './mobile-header'
-
-type HeaderProps = {
-  menuItems?: MenuItem[]
-  additionalMenuItems?: MenuItem[]
-  socialMediaHrefs?: SocialMediaHrefs
-  searchPlaceholder?: string
-  subscribeUrl?: string
-  donateUrl?: string
-}
-
-function Header({
-  menuItems = MENU_ITEMS,
-  additionalMenuItems = ADDITIONAL_MENU_ITEMS,
-  socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),
-  searchPlaceholder = SEARCH_PLACEHOLDER,
-  subscribeUrl = SUBSCRIBE_URL,
-  donateUrl = DONATE_URL,
-}: HeaderProps) {
-  const context = useHeaderContext()
-  const postTitle = context?.postTitle
-  const isLoggedIn = context?.isLoggedIn || false
-  const loginUrl = context?.loginUrl || '/login'
-  const isMenuOpen = context?.isMenuOpen || false
-  const openMenu = context?.openMenu
-  const closeMenu = context?.closeMenu
-  const keywords = context?.keywords || []
-  const onHamburgerOverlayOpen = () => {
-    openMenu?.()
-  }
-  const mobileBackButtonHref = context?.mobileBackButtonHref
-
-  const onCloseMenu = () => {
-    closeMenu?.()
-  }
-
-  const isMobile = useMediaQuery('(max-width: 768px)')
-
-  const isAtTop = useIsAtTop()
-  const scrollingLevel = useScrollLevel({
-    scrollDownDistance: 150,
-    throttleThreshold: 50,
-  })
-
-  const isScrollingDown = scrollingLevel === ScrollLevel.DOWN_HIDDEN
-
-  return (
-    <>
-      <DesktopHeader
-        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-        keywords={keywords}
-        hide={isScrollingDown}
-        compactMode={!isAtTop}
-        postTitle={isAtTop ? undefined : postTitle}
-        searchPlaceholder={searchPlaceholder}
-        subscribeUrl={subscribeUrl}
-        menuItems={menuItems}
-        isLoggedIn={isLoggedIn}
-        loginUrl={loginUrl}
-      />
-      <MobileHeader
-        onCloseMenu={onCloseMenu}
-        showCloseButtonWhenMenuOpen={isMobile}
-        onHamburgerOverlayOpen={onHamburgerOverlayOpen}
-        isMenuOpen={isMenuOpen}
-        isLoggedIn={isLoggedIn}
-        loginUrl={loginUrl}
-        mobileBackButtonHref={mobileBackButtonHref}
-      />
-      <Menu
-        isOpen={isMenuOpen}
-        onClose={closeMenu || (() => undefined)}
-        keywords={keywords}
-        menuItems={menuItems}
-        additionalMenuItems={additionalMenuItems}
-        socialMediaHrefs={socialMediaHrefs}
-        donateUrl={donateUrl}
-        subscribeUrl={subscribeUrl}
-        searchPlaceholder={searchPlaceholder}
-      />
-    </>
-  )
-}
-
-export default Header

package/src/header/is-logged-in-setter.tsx

@@ -1,27 +0,0 @@
-import { useEffect } from 'react'
-
-import { useHeaderContext } from './header-context'
-
-type IsLoggedInSetterProps = {
-  isLoggedIn: boolean
-  loginUrl: string
-}
-
-function IsLoggedInSetter({ isLoggedIn, loginUrl }: IsLoggedInSetterProps) {
-  const context = useHeaderContext()
-  const setIsLoggedIn = context?.setIsLoggedIn
-  const setLoginUrl = context?.setLoginUrl
-
-  useEffect(() => {
-    setIsLoggedIn?.(isLoggedIn)
-    setLoginUrl?.(loginUrl)
-    return () => {
-      setIsLoggedIn?.(false)
-      setLoginUrl?.(undefined)
-    }
-  }, [isLoggedIn, setIsLoggedIn, loginUrl, setLoginUrl])
-
-  return null
-}
-
-export default IsLoggedInSetter

package/src/header/menu/header-menu-item-group.tsx

@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { MenuItem } from '../../types'
-import HeaderMenuItem from './header-menu-item'
-
-function MenuItemGroup({
-  isMenuOpen,
-  menuItems,
-}: {
-  isMenuOpen: boolean
-  menuItems: MenuItem[]
-}) {
-  const [currentExpandedItem, setCurrentExpandedItem] = useState<string | null>(
-    null
-  )
-
-  const handleClick = (label: string | null) => {
-    setCurrentExpandedItem(label)
-  }
-
-  useEffect(() => {
-    if (!isMenuOpen) {
-      setCurrentExpandedItem(null)
-    }
-  }, [isMenuOpen])
-
-  return menuItems.map((item) => (
-    <HeaderMenuItem
-      key={item.label}
-      {...item}
-      isExpanded={currentExpandedItem === item.label}
-      onExpand={handleClick}
-    />
-  ))
-}
-
-export default MenuItemGroup