@kids-reporter/routing-ui 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants/default-values.d.ts +1 -0
- package/dist/constants/default-values.d.ts.map +1 -1
- package/dist/constants/default-values.js +7 -2
- package/dist/constants/default-values.js.map +1 -1
- package/dist/header/desktop-header.d.ts +2 -1
- package/dist/header/desktop-header.d.ts.map +1 -1
- package/dist/header/desktop-header.js +4 -2
- package/dist/header/desktop-header.js.map +1 -1
- package/dist/header/index.d.ts +2 -1
- package/dist/header/index.d.ts.map +1 -1
- package/dist/header/index.js +4 -2
- package/dist/header/index.js.map +1 -1
- package/dist/header/shared-components.d.ts +2 -1
- package/dist/header/shared-components.d.ts.map +1 -1
- package/dist/header/shared-components.js +5 -3
- package/dist/header/shared-components.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ export declare const DONATE_URL = "https://support.twreporter.org/";
|
|
|
4
4
|
export declare const PRIVACY_POLICY = "https://www.twreporter.org/a/privacy-policy";
|
|
5
5
|
export declare const SEARCH_PLACEHOLDER = "\u641C\u5C0B\u66F4\u591A\u65B0\u805E\u3001\u8B70\u984C";
|
|
6
6
|
export declare const MENU_ITEMS: MenuItem[];
|
|
7
|
+
export declare const READING_SETTINGS_URL = "/custom";
|
|
7
8
|
export declare const ADDITIONAL_MENU_ITEMS: MenuItem[];
|
|
8
9
|
export declare const SOCIAL_MEDIA_ITEMS: {
|
|
9
10
|
label: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-values.d.ts","sourceRoot":"","sources":["../../src/constants/default-values.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,eAAO,MAAM,aAAa,6CAA6C,CAAA;AACvE,eAAO,MAAM,UAAU,oCAAoC,CAAA;AAC3D,eAAO,MAAM,cAAc,gDAAgD,CAAA;AAC3E,eAAO,MAAM,kBAAkB,2DAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,EAAE,QAAQ,EAoEhC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"default-values.d.ts","sourceRoot":"","sources":["../../src/constants/default-values.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEnC,eAAO,MAAM,aAAa,6CAA6C,CAAA;AACvE,eAAO,MAAM,UAAU,oCAAoC,CAAA;AAC3D,eAAO,MAAM,cAAc,gDAAgD,CAAA;AAC3E,eAAO,MAAM,kBAAkB,2DAAc,CAAA;AAE7C,eAAO,MAAM,UAAU,EAAE,QAAQ,EAoEhC,CAAA;AAED,eAAO,MAAM,oBAAoB,YAAY,CAAA;AAE7C,eAAO,MAAM,qBAAqB,EAAE,QAAQ,EAoD3C,CAAA;AAED,eAAO,MAAM,kBAAkB;;;GAyB9B,CAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.SUBSCRIBE_URL = exports.SOCIAL_MEDIA_ITEMS = exports.SEARCH_PLACEHOLDER = exports.PRIVACY_POLICY = exports.MENU_ITEMS = exports.DONATE_URL = exports.ADDITIONAL_MENU_ITEMS = void 0;
|
|
6
|
+
exports.SUBSCRIBE_URL = exports.SOCIAL_MEDIA_ITEMS = exports.SEARCH_PLACEHOLDER = exports.READING_SETTINGS_URL = exports.PRIVACY_POLICY = exports.MENU_ITEMS = exports.DONATE_URL = exports.ADDITIONAL_MENU_ITEMS = void 0;
|
|
7
7
|
var _icons = require("../icons");
|
|
8
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
const SUBSCRIBE_URL = exports.SUBSCRIBE_URL = 'https://solink.soundon.fm/kidstwreporter';
|
|
@@ -87,9 +87,10 @@ const MENU_ITEMS = exports.MENU_ITEMS = [{
|
|
|
87
87
|
href: '/category/classroom',
|
|
88
88
|
subItems: []
|
|
89
89
|
}];
|
|
90
|
+
const READING_SETTINGS_URL = exports.READING_SETTINGS_URL = '/custom';
|
|
90
91
|
const ADDITIONAL_MENU_ITEMS = exports.ADDITIONAL_MENU_ITEMS = [{
|
|
91
92
|
label: '閱讀探索設定',
|
|
92
|
-
href:
|
|
93
|
+
href: READING_SETTINGS_URL,
|
|
93
94
|
subItems: [],
|
|
94
95
|
showIcon: true,
|
|
95
96
|
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingsIconSmall, {})
|
|
@@ -101,6 +102,10 @@ const ADDITIONAL_MENU_ITEMS = exports.ADDITIONAL_MENU_ITEMS = [{
|
|
|
101
102
|
label: '呼叫報導仔流程',
|
|
102
103
|
href: '/about#callkidsreporter',
|
|
103
104
|
subItems: []
|
|
105
|
+
}, {
|
|
106
|
+
label: '小讀者觀點大集合',
|
|
107
|
+
href: '/idea-hub',
|
|
108
|
+
subItems: []
|
|
104
109
|
}, {
|
|
105
110
|
label: '投稿專區',
|
|
106
111
|
href: 'https://forms.gle/49AEG8kFj7QWjgij8',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL = 'https://solink.soundon.fm/kidstwreporter'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'\nexport const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'\n\nexport const MENU_ITEMS: MenuItem[] = [\n {\n label: '最新',\n href: '/all',\n subItems: [],\n },\n {\n label: '專題',\n href: '/topic/page',\n subItems: [],\n },\n {\n label: '新聞',\n href: '/category/news',\n subItems: [\n { label: '焦點新聞', href: '/category/news/times' },\n { label: '真的假的', href: '/category/news/knowledge' },\n { label: '人物故事', href: '/category/news/story' },\n { label: '文化報導', href: '/category/news/explore' },\n { label: '專欄', href: '/category/news/column' },\n { label: '英文新聞', href: '/categories/news/english-version' },\n ],\n },\n {\n label: '多媒體',\n href: '/category/comics',\n subItems: [\n { label: '圖解新聞', href: '/category/comics/times' },\n { label: '新聞遊戲', href: '/category/comics/test-news' },\n { label: '圖文故事', href: '/category/comics/graphic-story' },\n ],\n },\n {\n label: '校園',\n href: '/category/campus',\n subItems: [\n { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },\n { label: '上課好好玩', href: '/category/campus/teaching' },\n { label: '小讀者連線', href: '/category/campus/joining' },\n ],\n },\n {\n label: 'Podcast',\n href: '/category/listening-news',\n subItems: [\n {\n label: '小記者，問什麼？',\n href: '/category/listening-news/kids-reporter-ask',\n },\n {\n label: '新聞讀報',\n href: '/category/listening-news/multilingual-listening-news',\n },\n {\n label: '新聞關鍵字',\n href: '/category/listening-news/listening-news-keywords',\n },\n {\n label: '文化關鍵字',\n href: '/category/listening-news/listening-news-culture-keywords',\n },\n ],\n },\n {\n label: '教案',\n href: '/category/classroom',\n subItems: [],\n },\n]\n\nexport const ADDITIONAL_MENU_ITEMS: MenuItem[] = [\n {\n label: '閱讀探索設定',\n href:
|
|
1
|
+
{"version":3,"file":"default-values.js","names":["_icons","require","_jsxRuntime","SUBSCRIBE_URL","exports","DONATE_URL","PRIVACY_POLICY","SEARCH_PLACEHOLDER","MENU_ITEMS","label","href","subItems","READING_SETTINGS_URL","ADDITIONAL_MENU_ITEMS","showIcon","icon","jsx","SettingsIconSmall","external","SOCIAL_MEDIA_ITEMS"],"sources":["../../src/constants/default-values.tsx"],"sourcesContent":["import { SettingsIconSmall } from '../icons'\nimport { MenuItem } from '../types'\n\nexport const SUBSCRIBE_URL = 'https://solink.soundon.fm/kidstwreporter'\nexport const DONATE_URL = 'https://support.twreporter.org/'\nexport const PRIVACY_POLICY = 'https://www.twreporter.org/a/privacy-policy'\nexport const SEARCH_PLACEHOLDER = '搜尋更多新聞、議題'\n\nexport const MENU_ITEMS: MenuItem[] = [\n {\n label: '最新',\n href: '/all',\n subItems: [],\n },\n {\n label: '專題',\n href: '/topic/page',\n subItems: [],\n },\n {\n label: '新聞',\n href: '/category/news',\n subItems: [\n { label: '焦點新聞', href: '/category/news/times' },\n { label: '真的假的', href: '/category/news/knowledge' },\n { label: '人物故事', href: '/category/news/story' },\n { label: '文化報導', href: '/category/news/explore' },\n { label: '專欄', href: '/category/news/column' },\n { label: '英文新聞', href: '/categories/news/english-version' },\n ],\n },\n {\n label: '多媒體',\n href: '/category/comics',\n subItems: [\n { label: '圖解新聞', href: '/category/comics/times' },\n { label: '新聞遊戲', href: '/category/comics/test-news' },\n { label: '圖文故事', href: '/category/comics/graphic-story' },\n ],\n },\n {\n label: '校園',\n href: '/category/campus',\n subItems: [\n { label: '校園寶可夢', href: '/category/campus/campus-pokemon' },\n { label: '上課好好玩', href: '/category/campus/teaching' },\n { label: '小讀者連線', href: '/category/campus/joining' },\n ],\n },\n {\n label: 'Podcast',\n href: '/category/listening-news',\n subItems: [\n {\n label: '小記者，問什麼？',\n href: '/category/listening-news/kids-reporter-ask',\n },\n {\n label: '新聞讀報',\n href: '/category/listening-news/multilingual-listening-news',\n },\n {\n label: '新聞關鍵字',\n href: '/category/listening-news/listening-news-keywords',\n },\n {\n label: '文化關鍵字',\n href: '/category/listening-news/listening-news-culture-keywords',\n },\n ],\n },\n {\n label: '教案',\n href: '/category/classroom',\n subItems: [],\n },\n]\n\nexport const READING_SETTINGS_URL = '/custom'\n\nexport const ADDITIONAL_MENU_ITEMS: MenuItem[] = [\n {\n label: '閱讀探索設定',\n href: READING_SETTINGS_URL,\n subItems: [],\n showIcon: true,\n icon: <SettingsIconSmall />,\n },\n {\n label: '關於我們',\n href: '/about',\n subItems: [],\n },\n {\n label: '呼叫報導仔流程',\n href: '/about#callkidsreporter',\n subItems: [],\n },\n {\n label: '小讀者觀點大集合',\n href: '/idea-hub',\n subItems: [],\n },\n {\n label: '投稿專區',\n href: 'https://forms.gle/49AEG8kFj7QWjgij8',\n subItems: [],\n external: true,\n },\n {\n label: '加入小記者',\n href: 'https://forms.gle/eGq5jagNTwriwSCX6',\n subItems: [],\n external: true,\n },\n {\n label: '訂閱Podcast',\n href: 'https://solink.soundon.fm/kidstwreporter',\n subItems: [],\n external: true,\n },\n {\n label: '聯絡我們',\n href: '/about#mail',\n subItems: [],\n },\n {\n label: '前往《報導者》',\n href: 'https://www.twreporter.org/',\n subItems: [],\n external: true,\n },\n]\n\nexport const SOCIAL_MEDIA_ITEMS = [\n {\n label: 'Facebook',\n href: 'https://www.facebook.com/twreporter/',\n },\n {\n label: 'Instagram',\n href: 'https://www.instagram.com/twreporter/',\n },\n {\n label: 'YouTube',\n href: 'https://www.youtube.com/@TwreporterOrg',\n },\n {\n label: 'Threads',\n href: 'https://www.threads.com/@twreporter',\n },\n {\n label: 'Medium',\n href: 'https://medium.com/twreporter',\n },\n {\n label: 'RSS',\n href: 'https://kids-storage.twreporter.org/rss/rss.xml',\n },\n]\n"],"mappings":"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"}
|
|
@@ -10,7 +10,8 @@ type DesktopHeaderProps = {
|
|
|
10
10
|
menuItems: MenuItem[];
|
|
11
11
|
isLoggedIn?: boolean;
|
|
12
12
|
loginUrl?: string;
|
|
13
|
+
readingSettingsUrl: string;
|
|
13
14
|
};
|
|
14
|
-
export declare function DesktopHeader({ onHamburgerOverlayOpen, keywords, compactMode, postTitle, hide, searchPlaceholder, subscribeUrl, menuItems, isLoggedIn, loginUrl, }: DesktopHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function DesktopHeader({ onHamburgerOverlayOpen, keywords, compactMode, postTitle, hide, searchPlaceholder, subscribeUrl, menuItems, isLoggedIn, loginUrl, readingSettingsUrl, }: DesktopHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export {};
|
|
16
17
|
//# sourceMappingURL=desktop-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop-header.d.ts","sourceRoot":"","sources":["../../src/header/desktop-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AASxC,KAAK,kBAAkB,GAAG;IACxB,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;IACb,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"desktop-header.d.ts","sourceRoot":"","sources":["../../src/header/desktop-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AASxC,KAAK,kBAAkB,GAAG;IACxB,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;IACb,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,QAAQ,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,sBAAsB,EACtB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,UAAU,EACV,QAAQ,EACR,kBAAkB,GACnB,EAAE,kBAAkB,2CAgGpB"}
|
|
@@ -19,7 +19,8 @@ function DesktopHeader({
|
|
|
19
19
|
subscribeUrl,
|
|
20
20
|
menuItems,
|
|
21
21
|
isLoggedIn,
|
|
22
|
-
loginUrl
|
|
22
|
+
loginUrl,
|
|
23
|
+
readingSettingsUrl
|
|
23
24
|
}) {
|
|
24
25
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
25
26
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -64,7 +65,8 @@ function DesktopHeader({
|
|
|
64
65
|
tags: keywords,
|
|
65
66
|
hideCtaButtons: compactMode,
|
|
66
67
|
searchPlaceholder: searchPlaceholder,
|
|
67
|
-
subscribeUrl: subscribeUrl
|
|
68
|
+
subscribeUrl: subscribeUrl,
|
|
69
|
+
readingSettingsUrl: readingSettingsUrl
|
|
68
70
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
69
71
|
href: isLoggedIn ? '/member' : loginUrl ?? '/login',
|
|
70
72
|
className: "w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop-header.js","names":["Object","defineProperty","exports","value","DesktopHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","keywords","compactMode","postTitle","hide","searchPlaceholder","subscribeUrl","menuItems","isLoggedIn","loginUrl","jsxs","Fragment","children","jsx","className","cn","HamburgerButton","small","LogoLink","ActionButtons","tags","hideCtaButtons","href","LoginIcon","BottomNavigation"],"sources":["../../src/header/desktop-header.tsx"],"sourcesContent":["'use client'\n\nimport { LoginIcon } from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\nimport {\n ActionButtons,\n BottomNavigation,\n HamburgerButton,\n LogoLink,\n} from './shared-components'\n\ntype DesktopHeaderProps = {\n onHamburgerOverlayOpen: () => void\n keywords: string[]\n compactMode: boolean\n postTitle?: string\n hide: boolean\n searchPlaceholder: string\n subscribeUrl: string\n menuItems: MenuItem[]\n isLoggedIn?: boolean\n loginUrl?: string\n}\n\nexport function DesktopHeader({\n onHamburgerOverlayOpen,\n keywords,\n compactMode,\n postTitle,\n hide,\n searchPlaceholder,\n subscribeUrl,\n menuItems,\n isLoggedIn,\n loginUrl,\n}: DesktopHeaderProps) {\n return (\n <>\n <div className=\"hidden h-(--desktop-header-height) desktop:block\"></div>\n <div\n className={cn(\n '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',\n compactMode && 'bg-white',\n hide\n ? 'pointer-events-none -translate-y-full opacity-0'\n : 'translate-y-0 pointer-events-auto opacity-100'\n )}\n >\n <div className=\"px-12 hidden w-full bg-transparent desktop:block\">\n <div className=\"max-w-300 mx-auto\">\n <div\n className={cn(\n 'px-4 flex items-center justify-between py-[18px]',\n compactMode && 'py-2.5'\n )}\n >\n <div className={'flex items-center'}>\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'\n : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'\n )}\n >\n <HamburgerButton\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n small\n />\n </div>\n <div className={compactMode ? 'mr-12' : 'mr-8'}>\n <LogoLink compactMode={compactMode} />\n </div>\n {postTitle && (\n <div className=\"pr-12 block\">\n <p className=\"font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900\">\n {postTitle}\n </p>\n </div>\n )}\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'max-h-0 -translate-x-8 scale-95 opacity-0'\n : 'max-h-20 max-w-auto scale-100 opacity-100',\n postTitle && compactMode && 'max-w-0'\n )}\n >\n <span className=\"font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100\">\n 理解世界 × 參與未來\n </span>\n </div>\n </div>\n\n <div className=\"gap-4 flex items-center\">\n <ActionButtons\n tags={keywords}\n hideCtaButtons={compactMode}\n searchPlaceholder={searchPlaceholder}\n subscribeUrl={subscribeUrl}\n />\n <a\n href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}\n className=\"w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500\"\n aria-label=\"登入\"\n >\n <LoginIcon />\n </a>\n </div>\n </div>\n\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'h-0 -translate-y-4 opacity-0'\n : 'translate-y-0 h-auto opacity-100'\n )}\n >\n <BottomNavigation\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n menuItems={menuItems}\n />\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,aAAA,GAAAA,aAAA;AAEZ,IAAAC,MAAA,GAAAC,OAAA;AAEA,IAAAC,GAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAK4B,IAAAG,WAAA,GAAAH,OAAA;
|
|
1
|
+
{"version":3,"file":"desktop-header.js","names":["Object","defineProperty","exports","value","DesktopHeader","_icons","require","_cn","_sharedComponents","_jsxRuntime","onHamburgerOverlayOpen","keywords","compactMode","postTitle","hide","searchPlaceholder","subscribeUrl","menuItems","isLoggedIn","loginUrl","readingSettingsUrl","jsxs","Fragment","children","jsx","className","cn","HamburgerButton","small","LogoLink","ActionButtons","tags","hideCtaButtons","href","LoginIcon","BottomNavigation"],"sources":["../../src/header/desktop-header.tsx"],"sourcesContent":["'use client'\n\nimport { LoginIcon } from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\nimport {\n ActionButtons,\n BottomNavigation,\n HamburgerButton,\n LogoLink,\n} from './shared-components'\n\ntype DesktopHeaderProps = {\n onHamburgerOverlayOpen: () => void\n keywords: string[]\n compactMode: boolean\n postTitle?: string\n hide: boolean\n searchPlaceholder: string\n subscribeUrl: string\n menuItems: MenuItem[]\n isLoggedIn?: boolean\n loginUrl?: string\n readingSettingsUrl: string\n}\n\nexport function DesktopHeader({\n onHamburgerOverlayOpen,\n keywords,\n compactMode,\n postTitle,\n hide,\n searchPlaceholder,\n subscribeUrl,\n menuItems,\n isLoggedIn,\n loginUrl,\n readingSettingsUrl,\n}: DesktopHeaderProps) {\n return (\n <>\n <div className=\"hidden h-(--desktop-header-height) desktop:block\"></div>\n <div\n className={cn(\n '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',\n compactMode && 'bg-white',\n hide\n ? 'pointer-events-none -translate-y-full opacity-0'\n : 'translate-y-0 pointer-events-auto opacity-100'\n )}\n >\n <div className=\"px-12 hidden w-full bg-transparent desktop:block\">\n <div className=\"max-w-300 mx-auto\">\n <div\n className={cn(\n 'px-4 flex items-center justify-between py-[18px]',\n compactMode && 'py-2.5'\n )}\n >\n <div className={'flex items-center'}>\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'translate-x-0 max-w-12 mr-4 w-auto scale-100 opacity-100'\n : '-translate-x-2 w-0 max-w-0 pointer-events-none scale-95 opacity-0'\n )}\n >\n <HamburgerButton\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n small\n />\n </div>\n <div className={compactMode ? 'mr-12' : 'mr-8'}>\n <LogoLink compactMode={compactMode} />\n </div>\n {postTitle && (\n <div className=\"pr-12 block\">\n <p className=\"font-medium tracking-wide max-w-124 overflow-hidden prose-p2 text-ellipsis whitespace-nowrap text-neutral-900\">\n {postTitle}\n </p>\n </div>\n )}\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'max-h-0 -translate-x-8 scale-95 opacity-0'\n : 'max-h-20 max-w-auto scale-100 opacity-100',\n postTitle && compactMode && 'max-w-0'\n )}\n >\n <span className=\"font-medium translate-y-0 inline-block prose-p2 tracking-[2.2px]! text-nowrap text-neutral-900 opacity-100\">\n 理解世界 × 參與未來\n </span>\n </div>\n </div>\n\n <div className=\"gap-4 flex items-center\">\n <ActionButtons\n tags={keywords}\n hideCtaButtons={compactMode}\n searchPlaceholder={searchPlaceholder}\n subscribeUrl={subscribeUrl}\n readingSettingsUrl={readingSettingsUrl}\n />\n <a\n href={isLoggedIn ? '/member' : (loginUrl ?? '/login')}\n className=\"w-8 h-8 flex items-center justify-center rounded-full text-red-400 transition-colors duration-200 hover:text-red-500\"\n aria-label=\"登入\"\n >\n <LoginIcon />\n </a>\n </div>\n </div>\n\n <div\n className={cn(\n 'ease-in-out overflow-hidden transition-all duration-500',\n compactMode\n ? 'h-0 -translate-y-4 opacity-0'\n : 'translate-y-0 h-auto opacity-100'\n )}\n >\n <BottomNavigation\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n menuItems={menuItems}\n />\n </div>\n </div>\n </div>\n </div>\n </>\n )\n}\n"],"mappings":"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"}
|
package/dist/header/index.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ type HeaderProps = {
|
|
|
6
6
|
searchPlaceholder?: string;
|
|
7
7
|
subscribeUrl?: string;
|
|
8
8
|
donateUrl?: string;
|
|
9
|
+
readingSettingsUrl?: string;
|
|
9
10
|
};
|
|
10
|
-
declare function Header({ menuItems, additionalMenuItems, socialMediaHrefs, searchPlaceholder, subscribeUrl, donateUrl, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function Header({ menuItems, additionalMenuItems, socialMediaHrefs, searchPlaceholder, subscribeUrl, donateUrl, readingSettingsUrl, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export default Header;
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/header/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAM1D,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAsB,EACtB,mBAA2C,EAC3C,gBAA8D,EAC9D,iBAAsC,EACtC,YAA4B,EAC5B,SAAsB,EACtB,kBAAyC,GAC1C,EAAE,WAAW,2CAiEb;AAED,eAAe,MAAM,CAAA"}
|
package/dist/header/index.js
CHANGED
|
@@ -19,7 +19,8 @@ function Header({
|
|
|
19
19
|
socialMediaHrefs = _defaultValues.SOCIAL_MEDIA_ITEMS.map(item => item.href),
|
|
20
20
|
searchPlaceholder = _defaultValues.SEARCH_PLACEHOLDER,
|
|
21
21
|
subscribeUrl = _defaultValues.SUBSCRIBE_URL,
|
|
22
|
-
donateUrl = _defaultValues.DONATE_URL
|
|
22
|
+
donateUrl = _defaultValues.DONATE_URL,
|
|
23
|
+
readingSettingsUrl = _defaultValues.READING_SETTINGS_URL
|
|
23
24
|
}) {
|
|
24
25
|
const context = (0, _headerContext.useHeaderContext)();
|
|
25
26
|
const postTitle = context?.postTitle;
|
|
@@ -54,7 +55,8 @@ function Header({
|
|
|
54
55
|
subscribeUrl: subscribeUrl,
|
|
55
56
|
menuItems: menuItems,
|
|
56
57
|
isLoggedIn: isLoggedIn,
|
|
57
|
-
loginUrl: loginUrl
|
|
58
|
+
loginUrl: loginUrl,
|
|
59
|
+
readingSettingsUrl: readingSettingsUrl
|
|
58
60
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileHeader.MobileHeader, {
|
|
59
61
|
onCloseMenu: onCloseMenu,
|
|
60
62
|
showCloseButtonWhenMenuOpen: isMobile,
|
package/dist/header/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_defaultValues","_hooks","_desktopHeader","_headerContext","_menu","_mobileHeader","_jsxRuntime","Header","menuItems","MENU_ITEMS","additionalMenuItems","ADDITIONAL_MENU_ITEMS","socialMediaHrefs","SOCIAL_MEDIA_ITEMS","map","item","href","searchPlaceholder","SEARCH_PLACEHOLDER","subscribeUrl","SUBSCRIBE_URL","donateUrl","DONATE_URL","context","useHeaderContext","postTitle","isLoggedIn","loginUrl","isMenuOpen","openMenu","closeMenu","keywords","onHamburgerOverlayOpen","mobileBackButtonHref","onCloseMenu","isMobile","useMediaQuery","isAtTop","useIsAtTop","scrollingLevel","useScrollLevel","scrollDownDistance","throttleThreshold","isScrollingDown","ScrollLevel","DOWN_HIDDEN","jsxs","Fragment","children","jsx","DesktopHeader","hide","compactMode","undefined","MobileHeader","showCloseButtonWhenMenuOpen","isOpen","onClose","_default"],"sources":["../../src/header/index.tsx"],"sourcesContent":["'use client'\nimport {\n ADDITIONAL_MENU_ITEMS,\n DONATE_URL,\n MENU_ITEMS,\n SEARCH_PLACEHOLDER,\n SOCIAL_MEDIA_ITEMS,\n SUBSCRIBE_URL,\n} from '../constants/default-values'\nimport {\n ScrollLevel,\n useIsAtTop,\n useMediaQuery,\n useScrollLevel,\n} from '../hooks'\nimport type { MenuItem, SocialMediaHrefs } from '../types'\nimport { DesktopHeader } from './desktop-header'\nimport { useHeaderContext } from './header-context'\nimport Menu from './menu'\nimport { MobileHeader } from './mobile-header'\n\ntype HeaderProps = {\n menuItems?: MenuItem[]\n additionalMenuItems?: MenuItem[]\n socialMediaHrefs?: SocialMediaHrefs\n searchPlaceholder?: string\n subscribeUrl?: string\n donateUrl?: string\n}\n\nfunction Header({\n menuItems = MENU_ITEMS,\n additionalMenuItems = ADDITIONAL_MENU_ITEMS,\n socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),\n searchPlaceholder = SEARCH_PLACEHOLDER,\n subscribeUrl = SUBSCRIBE_URL,\n donateUrl = DONATE_URL,\n}: HeaderProps) {\n const context = useHeaderContext()\n const postTitle = context?.postTitle\n const isLoggedIn = context?.isLoggedIn || false\n const loginUrl = context?.loginUrl || '/login'\n const isMenuOpen = context?.isMenuOpen || false\n const openMenu = context?.openMenu\n const closeMenu = context?.closeMenu\n const keywords = context?.keywords || []\n const onHamburgerOverlayOpen = () => {\n openMenu?.()\n }\n const mobileBackButtonHref = context?.mobileBackButtonHref\n\n const onCloseMenu = () => {\n closeMenu?.()\n }\n\n const isMobile = useMediaQuery('(max-width: 768px)')\n\n const isAtTop = useIsAtTop()\n const scrollingLevel = useScrollLevel({\n scrollDownDistance: 150,\n throttleThreshold: 50,\n })\n\n const isScrollingDown = scrollingLevel === ScrollLevel.DOWN_HIDDEN\n\n return (\n <>\n <DesktopHeader\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n keywords={keywords}\n hide={isScrollingDown}\n compactMode={!isAtTop}\n postTitle={isAtTop ? undefined : postTitle}\n searchPlaceholder={searchPlaceholder}\n subscribeUrl={subscribeUrl}\n menuItems={menuItems}\n isLoggedIn={isLoggedIn}\n loginUrl={loginUrl}\n />\n <MobileHeader\n onCloseMenu={onCloseMenu}\n showCloseButtonWhenMenuOpen={isMobile}\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n isMenuOpen={isMenuOpen}\n isLoggedIn={isLoggedIn}\n loginUrl={loginUrl}\n mobileBackButtonHref={mobileBackButtonHref}\n />\n <Menu\n isOpen={isMenuOpen}\n onClose={closeMenu || (() => undefined)}\n keywords={keywords}\n menuItems={menuItems}\n additionalMenuItems={additionalMenuItems}\n socialMediaHrefs={socialMediaHrefs}\n donateUrl={donateUrl}\n subscribeUrl={subscribeUrl}\n searchPlaceholder={searchPlaceholder}\n />\n </>\n )\n}\n\nexport default Header\n"],"mappings":";AAAA,YAAY;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,OAAA;AACZ,IAAAC,cAAA,GAAAN,OAAA;
|
|
1
|
+
{"version":3,"file":"index.js","names":["_interopRequireDefault","require","Object","defineProperty","exports","value","default","_defaultValues","_hooks","_desktopHeader","_headerContext","_menu","_mobileHeader","_jsxRuntime","Header","menuItems","MENU_ITEMS","additionalMenuItems","ADDITIONAL_MENU_ITEMS","socialMediaHrefs","SOCIAL_MEDIA_ITEMS","map","item","href","searchPlaceholder","SEARCH_PLACEHOLDER","subscribeUrl","SUBSCRIBE_URL","donateUrl","DONATE_URL","readingSettingsUrl","READING_SETTINGS_URL","context","useHeaderContext","postTitle","isLoggedIn","loginUrl","isMenuOpen","openMenu","closeMenu","keywords","onHamburgerOverlayOpen","mobileBackButtonHref","onCloseMenu","isMobile","useMediaQuery","isAtTop","useIsAtTop","scrollingLevel","useScrollLevel","scrollDownDistance","throttleThreshold","isScrollingDown","ScrollLevel","DOWN_HIDDEN","jsxs","Fragment","children","jsx","DesktopHeader","hide","compactMode","undefined","MobileHeader","showCloseButtonWhenMenuOpen","isOpen","onClose","_default"],"sources":["../../src/header/index.tsx"],"sourcesContent":["'use client'\nimport {\n ADDITIONAL_MENU_ITEMS,\n DONATE_URL,\n MENU_ITEMS,\n READING_SETTINGS_URL,\n SEARCH_PLACEHOLDER,\n SOCIAL_MEDIA_ITEMS,\n SUBSCRIBE_URL,\n} from '../constants/default-values'\nimport {\n ScrollLevel,\n useIsAtTop,\n useMediaQuery,\n useScrollLevel,\n} from '../hooks'\nimport type { MenuItem, SocialMediaHrefs } from '../types'\nimport { DesktopHeader } from './desktop-header'\nimport { useHeaderContext } from './header-context'\nimport Menu from './menu'\nimport { MobileHeader } from './mobile-header'\n\ntype HeaderProps = {\n menuItems?: MenuItem[]\n additionalMenuItems?: MenuItem[]\n socialMediaHrefs?: SocialMediaHrefs\n searchPlaceholder?: string\n subscribeUrl?: string\n donateUrl?: string\n readingSettingsUrl?: string\n}\n\nfunction Header({\n menuItems = MENU_ITEMS,\n additionalMenuItems = ADDITIONAL_MENU_ITEMS,\n socialMediaHrefs = SOCIAL_MEDIA_ITEMS.map((item) => item.href),\n searchPlaceholder = SEARCH_PLACEHOLDER,\n subscribeUrl = SUBSCRIBE_URL,\n donateUrl = DONATE_URL,\n readingSettingsUrl = READING_SETTINGS_URL,\n}: HeaderProps) {\n const context = useHeaderContext()\n const postTitle = context?.postTitle\n const isLoggedIn = context?.isLoggedIn || false\n const loginUrl = context?.loginUrl || '/login'\n const isMenuOpen = context?.isMenuOpen || false\n const openMenu = context?.openMenu\n const closeMenu = context?.closeMenu\n const keywords = context?.keywords || []\n const onHamburgerOverlayOpen = () => {\n openMenu?.()\n }\n const mobileBackButtonHref = context?.mobileBackButtonHref\n\n const onCloseMenu = () => {\n closeMenu?.()\n }\n\n const isMobile = useMediaQuery('(max-width: 768px)')\n\n const isAtTop = useIsAtTop()\n const scrollingLevel = useScrollLevel({\n scrollDownDistance: 150,\n throttleThreshold: 50,\n })\n\n const isScrollingDown = scrollingLevel === ScrollLevel.DOWN_HIDDEN\n\n return (\n <>\n <DesktopHeader\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n keywords={keywords}\n hide={isScrollingDown}\n compactMode={!isAtTop}\n postTitle={isAtTop ? undefined : postTitle}\n searchPlaceholder={searchPlaceholder}\n subscribeUrl={subscribeUrl}\n menuItems={menuItems}\n isLoggedIn={isLoggedIn}\n loginUrl={loginUrl}\n readingSettingsUrl={readingSettingsUrl}\n />\n <MobileHeader\n onCloseMenu={onCloseMenu}\n showCloseButtonWhenMenuOpen={isMobile}\n onHamburgerOverlayOpen={onHamburgerOverlayOpen}\n isMenuOpen={isMenuOpen}\n isLoggedIn={isLoggedIn}\n loginUrl={loginUrl}\n mobileBackButtonHref={mobileBackButtonHref}\n />\n <Menu\n isOpen={isMenuOpen}\n onClose={closeMenu || (() => undefined)}\n keywords={keywords}\n menuItems={menuItems}\n additionalMenuItems={additionalMenuItems}\n socialMediaHrefs={socialMediaHrefs}\n donateUrl={donateUrl}\n subscribeUrl={subscribeUrl}\n searchPlaceholder={searchPlaceholder}\n />\n </>\n )\n}\n\nexport default Header\n"],"mappings":"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"}
|
|
@@ -13,11 +13,12 @@ type SearchInputSectionProps = {
|
|
|
13
13
|
searchPlaceholder: string;
|
|
14
14
|
};
|
|
15
15
|
export declare function SearchInputSection(props: SearchInputSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export declare function ActionButtons({ hideCtaButtons, tags, searchPlaceholder, subscribeUrl, }: {
|
|
16
|
+
export declare function ActionButtons({ hideCtaButtons, tags, searchPlaceholder, subscribeUrl, readingSettingsUrl, }: {
|
|
17
17
|
hideCtaButtons?: boolean;
|
|
18
18
|
tags: string[];
|
|
19
19
|
searchPlaceholder: string;
|
|
20
20
|
subscribeUrl: string;
|
|
21
|
+
readingSettingsUrl: string;
|
|
21
22
|
}): import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
export declare function BottomNavigation({ onHamburgerOverlayOpen, menuItems, }: {
|
|
23
24
|
onHamburgerOverlayOpen: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,
|
|
1
|
+
{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,GACnB,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,CAAA;CAC3B,2CAmEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}
|
|
@@ -155,7 +155,8 @@ function ActionButtons({
|
|
|
155
155
|
hideCtaButtons = false,
|
|
156
156
|
tags,
|
|
157
157
|
searchPlaceholder,
|
|
158
|
-
subscribeUrl
|
|
158
|
+
subscribeUrl,
|
|
159
|
+
readingSettingsUrl
|
|
159
160
|
}) {
|
|
160
161
|
const [isSearchOpen, setIsSearchOpen] = (0, _react.useState)(false);
|
|
161
162
|
const containerRef = (0, _react.useRef)(null);
|
|
@@ -212,9 +213,10 @@ function ActionButtons({
|
|
|
212
213
|
onClick: () => setIsSearchOpen(!isSearchOpen),
|
|
213
214
|
ref: buttonRef,
|
|
214
215
|
children: isSearchOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {})
|
|
215
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
216
|
-
className: "w-8 h-8 flex
|
|
216
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
217
|
+
className: "w-8 h-8 flex items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800",
|
|
217
218
|
"aria-label": "\u8A2D\u5B9A",
|
|
219
|
+
href: readingSettingsUrl,
|
|
218
220
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingsIcon, {})
|
|
219
221
|
})]
|
|
220
222
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n SettingsIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n document.body.classList.add('no-scroll')\n return\n }\n setIsFocused(false)\n document.body.classList.remove('no-scroll')\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n #{keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href=\"/about#post\">投稿</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n <button\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"設定\"\n >\n <SettingsIcon />\n </button>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","readingSettingsUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n SettingsIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n document.body.classList.add('no-scroll')\n return\n }\n setIsFocused(false)\n document.body.classList.remove('no-scroll')\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n #{keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n readingSettingsUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n readingSettingsUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href=\"/about#post\">投稿</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 mr-4 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n <a\n className=\"w-8 h-8 flex items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"設定\"\n href={readingSettingsUrl}\n >\n <SettingsIcon />\n </a>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":"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"}
|