docs: updata blog page style

Signed-off-by: laixingyou <[email protected]>

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;

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>
+  );
+}

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;
+  }
+}

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;

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}
+    />
+  );
+}

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;
+}