pre release:v0.1.3 (#47)

* fix element overflow for lang "de" (#43) * fix some overflow for de * add todo * update readme * refactor scroll bar (#46) * update scroll * use auto * update with auto scroll * fix dialog overflow * fix overflow scroll * fix warning dialog style * trigger on main branch
zizdlp · Sep 21, 2024 · 6f1f4a2 · 6f1f4a2
1 parent 8ff7f27
commit 6f1f4a2
Show file tree

Hide file tree

Showing 44 changed files with 274 additions and 127 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -13,8 +13,3 @@
 - [ ] New language support
 - [ ] Bug fix
 - [ ] Other
-
-### New Language Support
-
-If you are submitting new language support, please first refer to the documentation [Language Support](https://github.com/zizdlp/zbook-docs/blob/main/Development/LanguageSupport.md) and follow the necessary procedures. You can refer to these commits: `ec05f3a1d75d3f88619489a44f77104a37295ba3`,
-`92e4b2933a9e23d08c15042b9b9085f4fea556f7`
diff --git a/README.md b/README.md
@@ -69,6 +69,9 @@ We encourage you to contribute to ZBook to help us build the best tool for docum
 
 The ZBook UI is rendered using a set of translation files found in [`zbook_frontend/messages`](/zbook_frontend/messages/). We welcome all additional translations for the UI.
 
+If you are submitting new language support, please first refer to the documentation [Language Support](https://github.com/zizdlp/zbook-docs/blob/main/Development/LanguageSupport.md) and follow the necessary procedures. You can refer to these commits: `ec05f3a1d75d3f88619489a44f77104a37295ba3`,
+`92e4b2933a9e23d08c15042b9b9085f4fea556f7`
+
 #### Bugs
 
 Encounter a bug or find an issue you'd like to fix? Helping us fix issues related to ZBook greatly improves the experience for everyone. Head to the issues section of this repository to learn more about the types of bugs you can already help out with.
@@ -87,6 +90,15 @@ Not Support:
 
 ZBook does **not support online editing**. We believe that tools like Git in local environments such as VS Code and Typora are sufficient for editing and collaborating on content. **Online editing is not essential** in our view. Additionally, enabling online editing would require granting write permissions to Git repositories, which could pose **security risks**.
 
+### TODO
+
+ZBook plans to support the following features:
+
+- [ ] Branch switching, allowing users to preview specific branches before merging into the main branch.
+- [ ] MkDocs-style theme extensions.
+- [ ] GitHub-style admonitions.
+- [ ] MkDocs-style collapsible admonitions.
+
 ## Deployment
 
 For privacy and other reasons (for private repositories, you may need to input an access token; although GitHub supports fine-grained access tokens that can grant specific permissions to specific repositories, such as read-only), we encourage you to deploy ZBook yourself. You can use docker-compose or a k8s cluster for deployment. For details, please refer to the [ZBook Documentation](https://github.com/zizdlp/zbook-docs).

diff --git a/README_zh.md b/README_zh.md
@@ -70,6 +70,9 @@ ZBook 完全开源，并建立在 [Next.js](https://nextjs.org/)，[Golang](http
 
 ZBook 的用户界面使用一组翻译文件进行渲染，这些文件可以在 [`zbook_frontend/messages`](/zbook_frontend/messages/) 中找到。我们欢迎所有 UI 的额外翻译。
 
+如果您想提交新的语言支持，请首先参考文档 [语言支持](https://github.com/zizdlp/zbook-docs/blob/main/Development/LanguageSupport.md)，跟随其中的相关步骤修改代码。此外，可以参考这些提交: `ec05f3a1d75d3f88619489a44f77104a37295ba3`,
+`92e4b2933a9e23d08c15042b9b9085f4fea556f7`
+
 #### 错误
 
 遇到错误或找到你想修复的问题？帮助我们修复与 ZBook 相关的问题可以极大地改善所有人的体验。前往本仓库的问题部分，了解你可以帮助解决的错误类型。
@@ -88,6 +91,15 @@ ZBook 的用户界面使用一组翻译文件进行渲染，这些文件可以
 
 ZBook 不支持**在线编辑**。我们认为 Git 在本地环境如 VS Code 和 Typora 中的工具足以用于编辑和协作内容。在线编辑不是必需的。此外，启用在线编辑需要授予 Git 仓库写权限，这可能带来**安全风险**。
 
+### TODO
+
+zbook计划支持如下功能：
+
+- [ ] 分支切换，动机是合并main分支之前，可以先查看特定分支的显示效果
+- [ ] 类似mkdocs的风格扩展
+- [ ] github 风格的admonition
+- [ ] mkdocs 风格的折叠式admonition
+
 ## 部署
 
 由于隐私和其他原因（对于私人仓库，你可能需要输入访问令牌；虽然 GitHub 支持细粒度访问令牌，可以授予特定仓库的特定权限，例如只读），我们鼓励你自行部署 ZBook。你可以使用 Docker Compose 或 k8s 集群进行部署。详情请参阅 [ZBook 文档](https://github.com/zizdlp/zbook-docs)。

diff --git a/zbook_frontend/src/app/[locale]/cases/page.tsx b/zbook_frontend/src/app/[locale]/cases/page.tsx
@@ -19,7 +19,9 @@ export default async function CasesPage({
   return (
     <div
       className="z-30 px-4 xl:px-12 mx-auto xl:max-w-6xl pt-10
-    overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-md scrollbar-track-rounded-md  bg-white dark:bg-gray-900"
+    overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]  bg-white dark:bg-gray-900"
     >
       <ListPageWrapper
         params={params}

diff --git a/zbook_frontend/src/app/[locale]/page.tsx b/zbook_frontend/src/app/[locale]/page.tsx
@@ -150,7 +150,12 @@ export default async function Home() {
           <div className="relative pt-10 bg-gradient-to-t from-[#96c4a5]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent background-animate text-center">
             <div className="relative z-10">
               <div className="px-6 py-16">
-                <div className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 ">
+                <div
+                  className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 overflow-x-auto
+                scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] "
+                >
                   <h1>{t("MultiUserSection")}</h1>
                   <h1>{t("HomeSloganB")}</h1>
                 </div>
@@ -171,7 +176,7 @@ export default async function Home() {
         </MotionBounce>
       </section>
 
-      <section className=" py-20 sm:py-32 bg-gradient-to-t from-[#e3d5b1]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent">
+      <section className="py-20 sm:py-32 bg-gradient-to-t from-[#e3d5b1]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent">
         <MotionBounce direction="y">
           <div className="my-12 px-6 md:px-0 mx-auto max-w-5xl text-center">
             <div className="w-full text-center">

diff --git a/..._frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx b/..._frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx
@@ -89,7 +89,11 @@ export default async function AdminOverviewPage({
                   <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
                     {visitors?.length ?? 0}
                   </h5>
-                  <p className="text-base font-normal text-gray-500 dark:text-gray-400">
+                  <p
+                    className="text-base font-normal text-gray-500 dark:text-gray-400 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                  scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                  dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+                  >
                     {t("VisitorRegion")}
                   </p>
                 </div>

diff --git a/zbook_frontend/src/components/DialogComponent.tsx b/zbook_frontend/src/components/DialogComponent.tsx
@@ -22,12 +22,20 @@ export default function DialogComponent(props: DialogCompentProps) {
           leaveFrom="opacity-100 scale-100"
           leaveTo="opacity-0 scale-50"
         >
-          <div className="fixed inset-0 overflow-y-auto dark:text-slate-300 md:p-20 flex flex-col justify-start pt-4 md:justify-center lg:p-28">
-            <div className="mx-4 md:mx-[max(0px,calc(50%-25rem))] ">
-              <Dialog.Panel className="flex overflow-hidden flex-col  border rounded-md md:rounded-lg bg-white/85 dark:bg-slate-800/85 border-white/85 dark:border-slate-800/85">
+          <div
+            className="fixed inset-0 overflow-y-auto
+          scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
+          dark:text-slate-300 flex flex-col py-4"
+          >
+            <div className="grow hidden md:block"></div>
+            <div className="mx-4 md:mx-[max(0px,calc(50%-25rem))]">
+              <Dialog.Panel className="border rounded-md md:rounded-lg bg-white/85 dark:bg-slate-800/85 border-white/85 dark:border-slate-800/85">
                 {props.children}
               </Dialog.Panel>
             </div>
+            <div className="grow hidden md:block"></div>
           </div>
         </Transition.Child>
       </Dialog>

diff --git a/zbook_frontend/src/components/TableOfContent.tsx b/zbook_frontend/src/components/TableOfContent.tsx
@@ -133,11 +133,13 @@ export default function TableOfContent(props: TableOfContentProps) {
             <a
               {...props}
               onClick={handleClick}
-              className={`group flex items-start py-1   ${hoverClass} overflow-scroll ${
-                get_act() === props.href.substring(1)
-                  ? activeClass
-                  : "dark:text-slate-400"
-              }`}
+              className={`group flex items-start py-1   ${hoverClass} overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] ${
+          get_act() === props.href.substring(1)
+            ? activeClass
+            : "dark:text-slate-400"
+        }`}
             >
               {domToReact(domNode.children, html_parser_options_list)}
             </a>
@@ -147,11 +149,13 @@ export default function TableOfContent(props: TableOfContentProps) {
           <a
             {...props}
             onClick={handleClick}
-            className={`group flex items-start py-1  ${hoverClass} overflow-scroll ${
-              get_act() === props.href.substring(1)
-                ? activeClass
-                : "dark:text-slate-400"
-            }`}
+            className={`group flex items-start py-1  ${hoverClass} overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16] ${
+          get_act() === props.href.substring(1)
+            ? activeClass
+            : "dark:text-slate-400"
+        }`}
           >
             {domToReact(domNode.children, html_parser_options_list)}
           </a>
@@ -163,7 +167,9 @@ export default function TableOfContent(props: TableOfContentProps) {
   return (
     <RightSideBarWrapper>
       <div
-        className="fixed overflow-auto w-[16rem]"
+        className="fixed overflow-y-auto w-[16rem] scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
         style={{ height: "calc(100vh - 128px)" }}
       >
         {/* 确保父元素具有固定高度或最大高度 */}

diff --git a/zbook_frontend/src/components/TimeElement.tsx b/zbook_frontend/src/components/TimeElement.tsx
@@ -44,5 +44,5 @@ export default function TimeElement({ timeInfo }: { timeInfo: string }) {
       }
     }
   }
-  return <>{convertTime(timeInfo)}</>;
+  return <span className="whitespace-nowrap">{convertTime(timeInfo)}</span>;
 }
diff --git a/zbook_frontend/src/components/WarningDialog.tsx b/zbook_frontend/src/components/WarningDialog.tsx
@@ -18,34 +18,36 @@ export default function WarngingDialog({
 }) {
   return (
     <DialogComponent showDialog={showDialog} setShowDialog={setShowDialog}>
-      <header className="justify-center px-4 py-4 overflow-auto relative flex  text-slate-700 flex-row items-center border-b border-slate-300/75 dark:border-slate-800/75">
-        <div className="flex lg:block md:overflow-hidden grow  justify-center overflow-auto  items-center ">
-          <div className="sm:overflow-hidden sm:rounded-md">
-            <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
-              <div className="col-span-6 justify-center flex-center">
-                <label
-                  htmlFor="post_title"
-                  className="block text-center pt-2 pb-6 text-2xl font-bold text-gray-700 dark:text-slate-50"
-                >
-                  {title}
-                </label>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 sm:gap-x-6 lg:gap-x-4 xl:gap-x-6 p-4 sm:px-6 sm:py-5 lg:p-4 xl:px-6 xl:py-5">
-              <button
-                className="text-base font-medium rounded-lg bg-white border-[0.05rem] dark:border-0 border-slate-300/50 text-slate-900 py-3 text-center cursor-pointer dark:bg-gray-700/75 dark:text-slate-200 dark:highlight-white/10"
-                onClick={cancelFunc}
-              >
-                {cancelTitle}
-              </button>
-              <button
-                className="text-base font-medium rounded-lg bg-sky-500 dark:bg-sky-800 text-white py-3 text-center cursor-pointer dark:highlight-white/20"
-                onClick={submitFunc}
+      <header
+        className="justify-center px-4 py-4 overflow-x-auto relative flex  text-slate-700 flex-row items-center border-b border-slate-300/75 dark:border-slate-800/75 scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
+        <div className="sm:rounded-md">
+          <div className="grid grid-cols-6 gap-4 gap-x-8 p-2">
+            <div className="col-span-6 justify-center flex-center">
+              <label
+                htmlFor="post_title"
+                className="block text-center pt-2 pb-6 text-2xl font-bold text-gray-700 dark:text-slate-50"
               >
-                {submitTitle}
-              </button>
+                {title}
+              </label>
             </div>
           </div>
+          <div className="grid grid-cols-2 gap-x-4 sm:gap-x-6 lg:gap-x-4 xl:gap-x-6 p-4 sm:px-6 sm:py-5 lg:p-4 xl:px-6 xl:py-5">
+            <button
+              className="text-base font-medium rounded-lg bg-white border-[0.05rem] dark:border-0 border-slate-300/50 text-slate-900 py-3 text-center cursor-pointer dark:bg-gray-700/75 dark:text-slate-200 dark:highlight-white/10"
+              onClick={cancelFunc}
+            >
+              {cancelTitle}
+            </button>
+            <button
+              className="text-base font-medium rounded-lg bg-sky-500 dark:bg-sky-800 text-white py-3 text-center cursor-pointer dark:highlight-white/20"
+              onClick={submitFunc}
+            >
+              {submitTitle}
+            </button>
+          </div>
         </div>
       </header>
     </DialogComponent>

diff --git a/zbook_frontend/src/components/charts/AreaUserChart.tsx b/zbook_frontend/src/components/charts/AreaUserChart.tsx
@@ -58,6 +58,7 @@ export default function AreaUserChart({
     }).then((data) => {
       setActiveUserCounts(data.counts);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const t = useTranslations("AdminOverView");
@@ -82,7 +83,11 @@ export default function AreaUserChart({
         <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
           {t("DailyUsers")}
         </h5>
-        <div className="flex space-x-2">
+        <div
+          className="flex space-x-2 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+        >
           <EnableElement
             config_name="allow_login"
             label={t("allow_login")}

diff --git a/zbook_frontend/src/components/charts/AreaVisitorChart.tsx b/zbook_frontend/src/components/charts/AreaVisitorChart.tsx
@@ -40,6 +40,7 @@ export default function AreaVisitorChart({
       ).reverse();
       setDates(generatedDates);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const totalCount = counts.reduce((sum, count) => sum + count, 0);

diff --git a/zbook_frontend/src/components/charts/EnableElement.tsx b/zbook_frontend/src/components/charts/EnableElement.tsx
@@ -31,7 +31,7 @@ export default function EnableElement({
                   : t("TipInviation")
             }
           >
-            <div>{label}</div>
+            <span className="whitespace-nowrap">{label}</span>
           </ToolTip>
         </Switch.Label>
         <Switch

diff --git a/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx b/zbook_frontend/src/components/elements/details/ListAdminCommentElement.tsx
@@ -31,13 +31,19 @@ export default function ListAdminCommentElement({
             <div className="flex flex-col justify-begin">
               <Link href={`/workspace/${username}`} className="cursor-pointer">
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {username}
                 </span>
               </Link>
-              <span className=" text-slate-700 dark:text-slate-400 text-xs overflow-scroll">
+              <span
+                className=" text-slate-700 dark:text-slate-400 text-xs overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+              >
                 {email}
               </span>
             </div>

diff --git a/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx b/zbook_frontend/src/components/elements/details/ListCommentReportElement.tsx
@@ -42,7 +42,9 @@ export default function ListCommentReportElement({
                 className="cursor-pointer"
               >
                 <span
-                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-scroll
+                  className="text-sky-700 dark:text-sky-600 font-semibold text-lg whitespace-nowrap overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+                              scrollbar-thumb-slate-200 scrollbar-track-slate-100
+                              dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]
                                 hover:underline underline-offset-4 hover:text-sky-500 hover:dark:text-sky-500"
                 >
                   {t("Comment")}

diff --git a/zbook_frontend/src/components/elements/details/ListElementCard.tsx b/zbook_frontend/src/components/elements/details/ListElementCard.tsx
@@ -15,7 +15,11 @@ export default function ListElementCard({
       <div className="flex-none flex justify-between items-center">
         {header}
       </div>
-      <div className="flex-1 text-slate-700 dark:text-slate-400 text-xs my-2 overflow-scroll">
+      <div
+        className="flex-1 text-slate-700 dark:text-slate-400 text-xs my-2 overflow-x-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-h-[6px]
+        scrollbar-thumb-slate-200 scrollbar-track-slate-100
+        dark:scrollbar-thumb-slate-500/50 dark:scrollbar-track-slate-500/[0.16]"
+      >
         {content}
       </div>
       <div className="flex-none flex justify-between items-center">