feat: add deploy error tips

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://<Worker address>/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}}"

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://<Workerアドレス>/user/github/callback`である必要があります。GitHub OAuthコールバックURLが正しいか確認してください。"
+  },
   "feed_card": {
     "published$time": "{{time}} に公開",
     "updated$time": "{{time}} に更新"
@@ -206,4 +214,4 @@
   },
   "writing": "執筆",
   "year$year": "{{year}} 年"
-}
+}

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://<Worker 地址>/user/github/callback，请检查 GitHub OAuth 回调地址是否正确"
+  },
   "feed_card": {
     "published$time": "{{time}} 发布",
     "updated$time": "{{time}} 更新"

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<Profile | undefined>()
   const [config, setConfig] = useState<ConfigWrapper>(new ConfigWrapper({}, new Map()))
   useEffect(() => {
@@ -133,6 +136,30 @@ function App() {
               }}
             </RouteWithIndex>
 
+            <RouteMe path="/user/github">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.api_url')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
+            <RouteMe path="/*/user/github">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.api_url_slash')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
+            <RouteMe path="/user/github/callback">
+              {_ => (
+                <TipsPage>
+                  <Tips value={t('error.github_callback')} type='error' />
+                </TipsPage>
+              )}
+            </RouteMe>
+
             {/* Default route in a switch */}
             <Route>404: No such page!</Route>
           </Switch>

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 {

client/src/components/button.tsx

@@ -2,15 +2,15 @@ import ReactLoading from "react-loading";
 
 export function Button({ title, onClick, secondary = false }: { title: string, secondary?: boolean, onClick: () => void }) {
     return (
-        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary" : "bg-theme text-white"} text-nowrap rounded-full px-4 py-2 h-min`}>
+        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary bg-button" : "bg-theme text-white active:bg-theme-active hover:bg-theme-hover"} text-nowrap rounded-full px-4 py-2 h-min`}>
             {title}
         </button>
     );
 }
 
 export function ButtonWithLoading({ title, onClick, loading, secondary = false }: { title: string, secondary?: boolean, loading: boolean, onClick: () => void }) {
     return (
-        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary" : "bg-theme text-white"} text-nowrap rounded-full px-4 py-2 h-min space-x-2 flex flex-row items-center`}>
+        <button onClick={onClick} className={`${secondary ? "bg-secondary t-primary bg-button" : "bg-theme text-white active:bg-theme-active hover:bg-theme-hover"} text-nowrap rounded-full px-4 py-2 h-min space-x-2 flex flex-row items-center`}>
             {loading && <ReactLoading width="1em" height="1em" type="spin" color="#FFF" />}
             <span>
                 {title}

client/src/components/header.tsx

@@ -174,7 +174,7 @@ function NavBar({ menu, onClick }: { menu: boolean, onClick?: () => void }) {
             <NavItem menu={menu} onClick={onClick} when={profile?.permission == true} title={t('writing')}
                 selected={location.startsWith("/writing")} href="/writing" />
             <NavItem menu={menu} onClick={onClick} title={t('friends.title')} selected={location === "/friends"} href="/friends" />
-            <NavItem menu={menu} onClick={onClick} title={t('about')} selected={location === "/about"} href="/about" />
+            <NavItem menu={menu} onClick={onClick} title={t('about.title')} selected={location === "/about"} href="/about" />
             <NavItem menu={menu} onClick={onClick} when={profile?.permission == true} title={t('settings.title')}
                 selected={location === "/settings"}
                 href="/settings" />

client/src/components/tips.tsx

@@ -0,0 +1,52 @@
+import { useTranslation } from "react-i18next";
+import { Button } from "./button";
+
+export function Tips({ value, type = 'tips' }: { value: string, type?: 'note' | 'tips' | 'warn' | 'error' | 'info' | 'important' }) {
+    const { t } = useTranslation();
+    let className = ""
+    switch (type) {
+        case 'note':
+            className = "markdown-alert-note"
+            break;
+        case 'tips':
+            className = "markdown-alert-tip"
+            break;
+        case 'warn':
+            className = "markdown-alert-warn"
+            break;
+        case 'error':
+            className = "markdown-alert-caution"
+            break;
+        case 'info':
+            className = "markdown-alert-info"
+            break;
+        case 'important':
+            className = "markdown-alert-important"
+            break;
+    }
+
+    return (
+        <div className={`flex flex-col items-start justify-center space-y-2 ${className} p-4 rounded-xl`}>
+            <p className="markdown-alert-title"> {type.toUpperCase()} </p>
+            <p className="text-sm">
+                {t(value)}
+            </p>
+        </div>
+    );
+}
+
+export function TipsPage({ children }: { children: React.ReactNode }) {
+    const { t } = useTranslation();
+    return (
+        <div className="w-full flex flex-row justify-center ani-show">
+            <div className="flex flex-col wauto rounded-2xl bg-w m-2 p-6 items-center justify-center space-y-2">
+                <h1 className="text-xl font-bold t-primary"> Oops! </h1>
+                {children}
+                <Button
+                    title={t("index.back")}
+                    onClick={() => (window.location.href = "/")}
+                />
+            </div>
+        </div>
+    );
+}

client/src/page/feed.tsx

@@ -14,6 +14,8 @@ import { ProfileContext } from "../state/profile";
 import { headersWithAuth } from "../utils/auth";
 import { siteName } from "../utils/constants";
 import { timeago } from "../utils/timeago";
+import { Button } from "../components/button";
+import { Tips } from "../components/tips";
 
 type Feed = {
   id: number;
@@ -161,14 +163,15 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen
       <div className="w-full flex flex-row justify-center ani-show">
         {error && (
           <>
-            <div className="flex flex-col wauto rounded-2xl bg-w m-2 p-6 items-center justify-center">
+            <div className="flex flex-col wauto rounded-2xl bg-w m-2 p-6 items-center justify-center space-y-2">
               <h1 className="text-xl font-bold t-primary">{error}</h1>
-              <button
-                className="mt-2 bg-theme text-white px-4 py-2 rounded-full"
+              {error === "Not found" && id === "about" && (
+                <Tips value={t("about.notfound")} />
+              )}
+              <Button
+                title={t("index.back")}
                 onClick={() => (window.location.href = "/")}
-              >
-                {t("index.back")}
-              </button>
+                />
             </div>
           </>
         )}
@@ -227,21 +230,21 @@ export function FeedPage({ id, TOC, clean }: { id: string, TOC: () => JSX.Elemen
                         <button
                           aria-label={top > 0 ? t("untop.title") : t("top.title")}
                           onClick={topFeed}
-                          className={`flex-1 flex flex-col items-end justify-center px-2 py bg-hover rounded-full transition ${top > 0 ? "bg-theme text-white" : "bg-secondary dark:text-neutral-400"}`}
+                          className={`flex-1 flex flex-col items-end justify-center px-2 py rounded-full transition ${top > 0 ? "bg-theme text-white hover:bg-theme-hover active:bg-theme-active" : "bg-secondary bg-button dark:text-neutral-400"}`}
                         >
                           <i className="ri-skip-up-line" />
                         </button>
                         <Link
                           aria-label={t("edit")}
                           href={`/writing/${feed.id}`}
-                          className="flex-1 flex flex-col items-end justify-center px-2 py bg-secondary bg-hover bg-active rounded-full transition"
+                          className="flex-1 flex flex-col items-end justify-center px-2 py bg-secondary bg-button rounded-full transition"
                         >
                           <i className="ri-edit-2-line dark:text-neutral-400" />
                         </Link>
                         <button
                           aria-label={t("delete.title")}
                           onClick={deleteFeed}
-                          className="flex-1 flex flex-col items-end justify-center px-2 py bg-secondary bg-hover bg-active rounded-full transition"
+                          className="flex-1 flex flex-col items-end justify-center px-2 py bg-secondary bg-button rounded-full transition"
                         >
                           <i className="ri-delete-bin-7-line text-red-500" />
                         </button>

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',