From c0aa3bd1f01d62281a0c8fc0b4dc36a24a1313b8 Mon Sep 17 00:00:00 2001
From: laixingyou <laixy7@gmail.com>
Date: Mon, 30 Oct 2023 16:52:32 +0800
Subject: [PATCH] docs: updata blog page style

Signed-off-by: laixingyou <laixy7@gmail.com>
---
 modules/community                             |  2 +-
 modules/docs                                  |  2 +-
 modules_i18n/community-zh                     |  2 +-
 modules_i18n/docs-zh                          |  2 +-
 src/theme/BlogSidebar/Desktop/index.d.ts      |  9 +++
 src/theme/BlogSidebar/Desktop/index.js        | 54 +++++++++++++++
 .../BlogSidebar/Desktop/styles.module.css     | 65 +++++++++++++++++++
 src/theme/BlogSidebar/Mobile/index.d.ts       |  9 +++
 src/theme/BlogSidebar/Mobile/index.js         | 47 ++++++++++++++
 .../BlogSidebar/Mobile/styles.module.css      | 14 ++++
 10 files changed, 202 insertions(+), 4 deletions(-)
 create mode 100644 src/theme/BlogSidebar/Desktop/index.d.ts
 create mode 100644 src/theme/BlogSidebar/Desktop/index.js
 create mode 100644 src/theme/BlogSidebar/Desktop/styles.module.css
 create mode 100644 src/theme/BlogSidebar/Mobile/index.d.ts
 create mode 100644 src/theme/BlogSidebar/Mobile/index.js
 create mode 100644 src/theme/BlogSidebar/Mobile/styles.module.css

diff --git a/modules/community b/modules/community
index f3e7035..4bb9222 160000
--- a/modules/community
+++ b/modules/community
@@ -1 +1 @@
-Subproject commit f3e703565812ccad7806fd8775af99c892fedf33
+Subproject commit 4bb9222a290de89e3936bf30c1c8f6c897f5e8ad
diff --git a/modules/docs b/modules/docs
index 99d94b1..2fa8748 160000
--- a/modules/docs
+++ b/modules/docs
@@ -1 +1 @@
-Subproject commit 99d94b1ebb6ac536e8f87be7e94dbc7fe1647774
+Subproject commit 2fa87485ea403a82ef48f096ec265542168f79df
diff --git a/modules_i18n/community-zh b/modules_i18n/community-zh
index 9994c79..3d8a3da 160000
--- a/modules_i18n/community-zh
+++ b/modules_i18n/community-zh
@@ -1 +1 @@
-Subproject commit 9994c79ddfe78449a0fd92b701c94fdf64262f8b
+Subproject commit 3d8a3da12551c05c07e10719c5894e2dd8fba6cd
diff --git a/modules_i18n/docs-zh b/modules_i18n/docs-zh
index f6de0ec..b07c4d9 160000
--- a/modules_i18n/docs-zh
+++ b/modules_i18n/docs-zh
@@ -1 +1 @@
-Subproject commit f6de0ecf8c7549dc38fff284eb76d7dec5635f80
+Subproject commit b07c4d9045658f8585634da20dcebabfd58c2c49
diff --git a/src/theme/BlogSidebar/Desktop/index.d.ts b/src/theme/BlogSidebar/Desktop/index.d.ts
new file mode 100644
index 0000000..261cea9
--- /dev/null
+++ b/src/theme/BlogSidebar/Desktop/index.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from "@theme/BlogSidebar/Desktop";
+export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element;
diff --git a/src/theme/BlogSidebar/Desktop/index.js b/src/theme/BlogSidebar/Desktop/index.js
new file mode 100644
index 0000000..f8fd47a
--- /dev/null
+++ b/src/theme/BlogSidebar/Desktop/index.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import { translate } from '@docusaurus/Translate';
+import styles from './styles.module.css';
+
+export default function BlogSidebarDesktop ({ sidebar }) {
+  return (
+    <aside className="col col--3">
+      <nav
+        className={clsx(styles.sidebar, 'thin-scrollbar')}
+        aria-label={translate({
+          id: 'theme.blog.sidebar.navAriaLabel',
+          message: 'Blog recent posts navigation',
+          description: 'The ARIA label for recent posts in the blog sidebar',
+        })}>
+        <div className={clsx(styles.sidebarHeader, 'margin-bottom--md')}>
+          {sidebar.title}
+        </div>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+          {sidebar.items.map(item => {
+            console.log(item.permalink)
+            const postYear = item.permalink.split('/')[2] + '-' + item.permalink.split('/')[3] + '-' + item.permalink.split('/')[4];
+            const yearHeader = (
+              <div className={styles.sidebarItemTitle}>{postYear}</div>
+            );
+            return (
+              <>
+                <li key={item.permalink} className={styles.sidebarItem}>
+                  <Link
+                    isNavLink
+                    to={item.permalink}
+                    className={styles.sidebarItemLink}
+                    activeClassName={styles.sidebarItemLinkActive}>
+                    {item.title}
+                    {yearHeader}
+                  </Link>
+                </li>
+
+              </>
+            );
+          })}
+        </ul>
+      </nav>
+    </aside>
+  );
+}
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.css b/src/theme/BlogSidebar/Desktop/styles.module.css
new file mode 100644
index 0000000..1079638
--- /dev/null
+++ b/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.sidebar {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  padding: 20px 12px 0 0;
+  margin-left: -20px;
+}
+
+.sidebarHeader {
+  font-size: var(--ifm-h4-font-size);
+  font-weight: var(--ifm-font-weight-bold);
+  padding-left: 12px;
+  display: block;
+}
+
+.sidebarItemTitle {
+  color: #999;
+  margin-top: 3px;
+}
+
+.sidebarItemList {
+  font-size: 13px;
+}
+
+.sidebarItem {
+  margin-top: 0.1rem;
+  line-height: 18px;
+}
+
+.sidebarItemLink {
+  color: var(--ifm-font-color-base);
+  padding: 0.7rem 8px;
+  display: block;
+  border-left: 4px solid transparent;
+  border-radius: 0.25rem;
+  line-height: 18px;
+  border-bottom: 1px solid #eee;
+}
+
+.sidebarItemLink:hover {
+  background: var(--ifm-menu-color-background-active);
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+}
+
+.sidebarItemLinkActive {
+  color: var(--ifm-font-color-base);
+  background: var(--ifm-menu-color-background-active);
+  border-left-color: var(--ifm-menu-color-active);
+  font-weight: 700;
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/src/theme/BlogSidebar/Mobile/index.d.ts b/src/theme/BlogSidebar/Mobile/index.d.ts
new file mode 100644
index 0000000..d061ee3
--- /dev/null
+++ b/src/theme/BlogSidebar/Mobile/index.d.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from "@theme/BlogSidebar/Mobile";
+export default function BlogSidebarMobile(props: Props): JSX.Element;
diff --git a/src/theme/BlogSidebar/Mobile/index.js b/src/theme/BlogSidebar/Mobile/index.js
new file mode 100644
index 0000000..23f1e7a
--- /dev/null
+++ b/src/theme/BlogSidebar/Mobile/index.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Link from '@docusaurus/Link';
+import { NavbarSecondaryMenuFiller } from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+
+function BlogSidebarMobileSecondaryMenu ({ sidebar }) {
+  let cachedYear = null;
+  return (
+    <ul className="menu__list blog-menu__list">
+      {sidebar.items.map(item => {
+        const postYear = item.permalink.split('/')[2] + '-' + item.permalink.split('/')[3] + '-' + item.permalink.split('/')[4];
+        const yearHeader = (
+          <div className={styles.sidebarItemTitle}>{postYear}</div>
+        );
+        return (
+          <>
+            <li key={item.permalink} className="menu__list-item">
+              <Link
+                isNavLink
+                to={item.permalink}
+                className="menu__link"
+                activeClassName="menu__link--active">
+                {item.title}
+                {yearHeader}
+              </Link>
+            </li>
+          </>
+        );
+      })}
+    </ul>
+  );
+}
+export default function BlogSidebarMobile (props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
diff --git a/src/theme/BlogSidebar/Mobile/styles.module.css b/src/theme/BlogSidebar/Mobile/styles.module.css
new file mode 100644
index 0000000..783838f
--- /dev/null
+++ b/src/theme/BlogSidebar/Mobile/styles.module.css
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.sidebarItemTitle {
+  margin: 0.75rem 0 0.5rem;
+  color: var(--subtle);
+  padding-left: 12px;
+  border-bottom: 0.01rem solid var(--ifm-table-border-color);
+  padding-bottom: 4px;
+}