From 01ddfadea2c3f0f7218248f7abb39e738d109269 Mon Sep 17 00:00:00 2001 From: Xeu Date: Thu, 11 Jul 2024 18:54:22 +0800 Subject: [PATCH 01/12] fix: feed_card x space for attrs --- client/src/components/feed_card.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/src/components/feed_card.tsx b/client/src/components/feed_card.tsx index 5ad8a911..bb3691d4 100644 --- a/client/src/components/feed_card.tsx +++ b/client/src/components/feed_card.tsx @@ -22,7 +22,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht

{title}

-
+

{createdAt === updatedAt ? timeago(createdAt) : t('feed_card.published$time', { time: timeago(createdAt) })} @@ -31,14 +31,14 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht {t('feed_card.updated$time', { time: timeago(updatedAt) })} } -

- {draft === 1 && 草稿} - {listed === 0 && 未列出} - {top === 1 && - 置顶 - } -

-
+

+

+ {draft === 1 && 草稿} + {listed === 0 && 未列出} + {top === 1 && + 置顶 + } +

{summary}

From 14923290d3a783b99d13629b61a8aca30acfb37b Mon Sep 17 00:00:00 2001 From: Xeu Date: Thu, 11 Jul 2024 19:55:03 +0800 Subject: [PATCH 02/12] feat: add deploy error tips --- client/public/locales/en/translation.json | 10 ++++- client/public/locales/ja/translation.json | 12 +++++- client/public/locales/zh/translation.json | 10 ++++- client/src/App.tsx | 27 ++++++++++++ client/src/base.css | 4 +- client/src/components/button.tsx | 4 +- client/src/components/header.tsx | 2 +- client/src/components/tips.tsx | 52 +++++++++++++++++++++++ client/src/page/feed.tsx | 21 +++++---- client/tailwind.config.ts | 2 + 10 files changed, 126 insertions(+), 18 deletions(-) create mode 100644 client/src/components/tips.tsx diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index d9dc107a..d28a7ea2 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -1,5 +1,8 @@ { - "about": "About", + "about": { + "notfound": "Set the article alias to `about` to create an about page", + "title": "About" + }, "alert": "Alert", "alias": "Alias", "article": { @@ -70,6 +73,11 @@ "draft": "Draft", "draft_bin": "Draft Bin", "edit": "Edit", + "error": { + "api_url": "API_URL in Pages environment variables should be the Worker address. Please check if API_URL in Pages environment variables is correct.", + "api_url_slash": "API_URL in Pages environment variables should be the Worker address. Please check if API_URL in Pages environment variables is correct and ensure API_URL does not end with a slash (/).", + "github_callback": "GitHub OAuth callback URL should be `https:///user/github/callback`. Please check if the GitHub OAuth callback URL is correct." + }, "feed_card": { "published$time": "Published at {{time}}", "updated$time": "Updated at {{time}}" diff --git a/client/public/locales/ja/translation.json b/client/public/locales/ja/translation.json index e395ece5..15cacf17 100644 --- a/client/public/locales/ja/translation.json +++ b/client/public/locales/ja/translation.json @@ -1,5 +1,8 @@ { - "about": "概要", + "about": { + "notfound": "About ページを作成するには、記事のエイリアスを about に設定します", + "title": "概要" + }, "alert": "警告", "alias": "エイリアス", "article": { @@ -70,6 +73,11 @@ "draft": "下書き", "draft_bin": "下書き", "edit": "編集", + "error": { + "api_url": "Pages 環境変数のAPI_URLはWorkerアドレスである必要があります。Pages環境変数のAPI_URLが正しいか確認してください。", + "api_url_slash": "Pages 環境変数のAPI_URLはWorkerアドレスである必要があります。Pages環境変数のAPI_URLが正しいか、またAPI_URLの末尾にスラッシュ（/）がないか確認してください。", + "github_callback": "GitHub OAuthコールバックURLは`https:///user/github/callback`である必要があります。GitHub OAuthコールバックURLが正しいか確認してください。" + }, "feed_card": { "published$time": "{{time}} に公開", "updated$time": "{{time}} に更新" @@ -206,4 +214,4 @@ }, "writing": "執筆", "year$year": "{{year}} 年" -} +} \ No newline at end of file diff --git a/client/public/locales/zh/translation.json b/client/public/locales/zh/translation.json index e3f8e9dd..5e9d8cda 100644 --- a/client/public/locales/zh/translation.json +++ b/client/public/locales/zh/translation.json @@ -1,5 +1,8 @@ { - "about": "关于", + "about": { + "notfound": "将文章别名设置为 about 可以创建关于页面", + "title": "关于" + }, "alert": "提示", "alias": "别名", "article": { @@ -70,6 +73,11 @@ "draft": "草稿", "draft_bin": "草稿箱", "edit": "编辑", + "error": { + "api_url": "Pages 环境变量中 API_URL 应为 Worker 地址，请检查 Pages 环境变量中 API_URL 是否正确", + "api_url_slash": "Pages 环境变量中 API_URL 应为 Worker 地址，请检查 Pages 环境变量中 API_URL 是否正确，且 API_URL 末尾不能有 /", + "github_callback": "GitHub OAuth 回调地址应为 `https:///user/github/callback，请检查 GitHub OAuth 回调地址是否正确" + }, "feed_card": { "published$time": "{{time}} 发布", "updated$time": "{{time}} 更新" diff --git a/client/src/App.tsx b/client/src/App.tsx index 9b283116..7fe3ced8 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -21,9 +21,12 @@ import { Profile, ProfileContext } from './state/profile' import { headersWithAuth } from './utils/auth' import { tryInt } from './utils/int' import { SearchPage } from './page/search.tsx' +import { Tips, TipsPage } from './components/tips.tsx' +import { useTranslation } from 'react-i18next' function App() { const ref = useRef(false) + const { t } = useTranslation() const [profile, setProfile] = useState() const [config, setConfig] = useState(new ConfigWrapper({}, new Map())) useEffect(() => { @@ -133,6 +136,30 @@ function App() { }} + + {_ => ( + + + + )} + + + + {_ => ( + + + + )} + + + + {_ => ( + + + + )} + + {/* Default route in a switch */} 404: No such page! diff --git a/client/src/base.css b/client/src/base.css index 8d9dbcf0..76e26b7a 100644 --- a/client/src/base.css +++ b/client/src/base.css @@ -10,8 +10,8 @@ @apply bg-neutral-100 dark:bg-neutral-700; } - .bg-active { - @apply active:bg-neutral-200 dark:active:bg-neutral-600; + .bg-button { + @apply hover:bg-neutral-200 dark:hover:bg-neutral-600 active:bg-neutral-300 dark:active:bg-neutral-500; } .bg-hover { diff --git a/client/src/components/button.tsx b/client/src/components/button.tsx index 8480484b..0ef4f3be 100644 --- a/client/src/components/button.tsx +++ b/client/src/components/button.tsx @@ -2,7 +2,7 @@ import ReactLoading from "react-loading"; export function Button({ title, onClick, secondary = false }: { title: string, secondary?: boolean, onClick: () => void }) { return ( - ); @@ -10,7 +10,7 @@ export function Button({ title, onClick, secondary = false }: { title: string, s export function ButtonWithLoading({ title, onClick, loading, secondary = false }: { title: string, secondary?: boolean, loading: boolean, onClick: () => void }) { return ( - + /> )} @@ -227,21 +230,21 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index d3c6c822..4b17cf68 100644 --- a/client/tailwind.config.ts +++ b/client/tailwind.config.ts @@ -9,6 +9,8 @@ export default { extend: { colors: { 'theme': '#fc466b', + 'theme-hover': '#b13049', + 'theme-active': '#972038', 'background': { 'light': '#f5f5f5', 'dark': '#1c1c1e', From 72ae3c2d7c02d7b95e5ac7b4753d7a874644f53d Mon Sep 17 00:00:00 2001 From: Xeu Date: Thu, 11 Jul 2024 19:57:53 +0800 Subject: [PATCH 03/12] chore: replace all bg-active to bg-button --- client/src/components/feed_card.tsx | 2 +- client/src/components/header.tsx | 6 +++--- client/src/components/icon.tsx | 4 ++-- client/src/page/friends.tsx | 8 ++++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/src/components/feed_card.tsx b/client/src/components/feed_card.tsx index bb3691d4..16dfe22b 100644 --- a/client/src/components/feed_card.tsx +++ b/client/src/components/feed_card.tsx @@ -13,7 +13,7 @@ export function FeedCard({ id, title, avatar, draft, listed, top, summary, hasht const { t } = useTranslation() return ( <> - + {avatar &&
: <> } @@ -234,7 +234,7 @@ function SearchButton({ className, onClose }: { className?: string, onClose?: () } return (
any, hover?: boolean }) { return ( - ) @@ -8,7 +8,7 @@ export function Icon({ name, label, className, onClick, hover = true }: { name: export function IconSmall({ name, label, className, onClick, hover = true }: { name: string, label: string, className?: string, onClick: () => any, hover?: boolean }) { return ( - ) diff --git a/client/src/page/friends.tsx b/client/src/page/friends.tsx index 5cdb26ad..8ec308d4 100644 --- a/client/src/page/friends.tsx +++ b/client/src/page/friends.tsx @@ -204,7 +204,7 @@ function Friend({ friend }: { friend: FriendItem }) { ] return ( <> - +
0 ? "grayscale" : "")} src={friend.avatar} alt={friend.name} />
@@ -213,7 +213,7 @@ function Friend({ friend }: { friend: FriendItem }) { {friend.accepted !== 1 &&

{statusOption[friend.accepted + 1].label}

} {friend.health.length > 0 &&

{errorHumanize(friend.health)}

} {(profile?.permission || profile?.id === friend.uid) && <> - } @@ -276,8 +276,8 @@ function Friend({ friend }: { friend: FriendItem }) {
- - + +
From 16cee034fe3b334ae4e95ffa6e2dc32a22a61fd8 Mon Sep 17 00:00:00 2001 From: Xeu Date: Thu, 11 Jul 2024 20:55:28 +0800 Subject: [PATCH 04/12] feat: new login ui --- client/public/locales/en/translation.json | 13 +++- client/public/locales/ja/translation.json | 11 ++- client/public/locales/zh/translation.json | 11 ++- client/src/components/header.tsx | 88 ++++++++++++++--------- client/src/components/icon.tsx | 4 +- client/src/hooks/useLoginModal.tsx | 74 +++++++++++++++++++ client/src/page/feed.tsx | 37 +++++++--- 7 files changed, 188 insertions(+), 50 deletions(-) create mode 100644 client/src/hooks/useLoginModal.tsx diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index d28a7ea2..852777a1 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -109,9 +109,16 @@ }, "listed": "Listed in articles", "login": { - "required": "Login required" + "oauth_only": "Please log in to continue", + "password": { + "placeholder": "Please enter your password" + }, + "required": "Please log in to continue", + "title": "Login", + "username": { + "placeholder": "Please enter your username" + } }, - "logout": "Logout", "next": "Next Page", "preview": "Preview", "previous": "Previous Page", @@ -214,4 +221,4 @@ }, "writing": "Writing", "year$year": "{{year}}" -} +} \ No newline at end of file diff --git a/client/public/locales/ja/translation.json b/client/public/locales/ja/translation.json index 15cacf17..3ab41aa4 100644 --- a/client/public/locales/ja/translation.json +++ b/client/public/locales/ja/translation.json @@ -109,9 +109,16 @@ }, "listed": "記事にリスト", "login": { - "required": "ログインが必要です" + "oauth_only": "続行するにはログインしてください", + "password": { + "placeholder": "パスワードを入力してください" + }, + "required": "続行するにはログインしてください", + "title": "ログイン", + "username": { + "placeholder": "ユーザー名を入力してください" + } }, - "logout": "ログアウト", "next": "次のページ", "preview": "プレビュー", "previous": "前のページ", diff --git a/client/public/locales/zh/translation.json b/client/public/locales/zh/translation.json index 5e9d8cda..3b0c5904 100644 --- a/client/public/locales/zh/translation.json +++ b/client/public/locales/zh/translation.json @@ -109,9 +109,16 @@ }, "listed": "列出在文章中", "login": { - "required": "需要登录" + "oauth_only": "请登录后继续", + "password": { + "placeholder": "请输入密码" + }, + "required": "请登录后继续", + "title": "登录", + "username": { + "placeholder": "请输入用户名" + } }, - "logout": "退出登录", "next": "下一页", "preview": "预览", "previous": "上一页", diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx index f52dc6db..e90360c3 100644 --- a/client/src/components/header.tsx +++ b/client/src/components/header.tsx @@ -4,10 +4,10 @@ import ReactModal from "react-modal"; import Popup from "reactjs-popup"; import { removeCookie } from "typescript-cookie"; import { Link, useLocation } from "wouter"; -import { oauth_url } from "../main"; +import { useLoginModal } from "../hooks/useLoginModal"; import { Profile, ProfileContext } from "../state/profile"; import { Button } from "./button"; -import { Icon } from "./icon"; +import { IconSmall } from "./icon"; import { Input } from "./input"; import { Padding } from "./padding"; @@ -92,33 +92,6 @@ function NavItem({ menu, title, selected, href, when = true, onClick }: { ) } -function UserAvatar({ profile, className, mobile }: { className?: string, profile?: Profile, mobile?: boolean }) { - const { t } = useTranslation() - const githubLoginText = t('github_login') - return (
- {profile?.avatar ? <> -
- Avatar -
- { - removeCookie("token") - window.location.reload() - }} hover={false} /> -
-
- : <> - - } -
) -} - function Menu() { const profile = useContext(ProfileContext); const [isOpen, setOpen] = useState(false) @@ -152,7 +125,7 @@ function Menu() {
- +
@@ -227,7 +200,8 @@ function SearchButton({ className, onClose }: { className?: string, onClose?: () const key = `${encodeURIComponent(value)}` setTimeout(() => { setIsOpened(false) - onClose?.() + if (value.length !== 0) + onClose?.() }, 100) if (value.length !== 0) setLocation(`/search/${key}`) @@ -272,4 +246,54 @@ function SearchButton({ className, onClose }: { className?: string, onClose?: () ) -} \ No newline at end of file +} + + +function UserAvatar({ className, profile, onClose }: { className?: string, profile?: Profile, onClose?: () => void }) { + const { t } = useTranslation() + const { LoginModal, setIsOpened } = useLoginModal(onClose) + const label = t('github_login') + + return (
+ {profile?.avatar ? <> +
+ Avatar +
+ { + removeCookie("token") + window.location.reload() + }} hover={false} /> +
+
+ : <> + + } + {LoginModal} +
+ ) +} + +// function UserAvatar({ profile, className, mobile }: { className?: string, profile?: Profile, mobile?: boolean }) { +// const { t } = useTranslation() +// const githubLoginText = t('github_login') +// return (
+// {profile?.avatar ? <> +//
+// Avatar +//
+// { +// removeCookie("token") +// window.location.reload() +// }} hover={false} /> +//
+//
+// : <> +// { +// window.location.href = `${oauth_url}` +// }} hover={false} /> +// } +//
) +// } \ No newline at end of file diff --git a/client/src/components/icon.tsx b/client/src/components/icon.tsx index c324cfc4..c544b387 100644 --- a/client/src/components/icon.tsx +++ b/client/src/components/icon.tsx @@ -1,6 +1,6 @@ export function Icon({ name, label, className, onClick, hover = true }: { name: string, label: string, className?: string, onClick: () => any, hover?: boolean }) { return ( - ) @@ -8,7 +8,7 @@ export function Icon({ name, label, className, onClick, hover = true }: { name: export function IconSmall({ name, label, className, onClick, hover = true }: { name: string, label: string, className?: string, onClick: () => any, hover?: boolean }) { return ( - ) diff --git a/client/src/hooks/useLoginModal.tsx b/client/src/hooks/useLoginModal.tsx new file mode 100644 index 00000000..352249f3 --- /dev/null +++ b/client/src/hooks/useLoginModal.tsx @@ -0,0 +1,74 @@ +import { t } from "i18next"; +import { Button } from "primereact/button"; +import { useCallback, useMemo, useState } from "react"; +import ReactModal from "react-modal"; +import { Icon } from "../components/icon"; +import { Input } from "../components/input"; +import { oauth_url } from "../main"; + +export function useLoginModal(onClose?: () => void) { + const [username, setUsername] = useState('') + const [password, setPassword] = useState('') + const [isOpened, setIsOpened] = useState(false); + const onLogin = useCallback(() => { + setTimeout(() => { + setIsOpened(false) + onClose?.() + }, 100) + }, [username, password]) + const LoginModal = useMemo(() => { + return ( + setIsOpened(false)} + > +
+

{t('login.title')}

+ {false && <> + + +
+
+ + } +
+

{t('login.oauth_only')}

+
+ { + window.location.href = `${oauth_url}` + }} hover={true} /> +
+
+
+ + ) + }, [username, password, isOpened, onLogin]) + return { LoginModal, setIsOpened } +} \ No newline at end of file diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx index f966810e..dec1b3dd 100644 --- a/client/src/page/feed.tsx +++ b/client/src/page/feed.tsx @@ -16,6 +16,7 @@ import { siteName } from "../utils/constants"; import { timeago } from "../utils/timeago"; import { Button } from "../components/button"; import { Tips } from "../components/tips"; +import { useLoginModal } from "../hooks/useLoginModal"; type Feed = { id: number; @@ -171,7 +172,7 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen