📝 Add a link to the new blog

website/src/theme/BlogSidebar/Desktop/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+export default function BlogSidebarDesktop({sidebar}) {
+  const items = useVisibleBlogSidebarItems(sidebar.items);
+  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={styles.sidebarItemTitle}>
+          {"New posts (2024–)"}
+        </div>
+        <div style={{ marginBottom: "2rem", fontWeight: "bold", fontSize: "1.2rem" }}>
+          <Link to="https://chsm.dev/blog" style={{ color: "#fbb946" }}>Blog moved to chsm.dev 🢅</Link>
+        </div>
+        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+          {"Blog archive (2022–24)"}
+        </div>
+
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+          {items.map((item) => (
+            <li key={item.permalink} className={styles.sidebarItem}>
+              <Link
+                isNavLink
+                to={item.permalink}
+                className={styles.sidebarItemLink}
+                activeClassName={styles.sidebarItemLinkActive}>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

website/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -0,0 +1,38 @@
+.sidebar {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 2rem);
+}
+
+.sidebarItemTitle {
+  font-size: var(--ifm-h3-font-size);
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+.sidebarItemList {
+  font-size: 0.9rem;
+}
+
+.sidebarItem {
+  margin-top: 0.7rem;
+}
+
+.sidebarItemLink {
+  color: var(--ifm-font-color-base);
+  display: block;
+}
+
+.sidebarItemLink:hover {
+  text-decoration: none;
+}
+
+.sidebarItemLinkActive {
+  color: var(--ifm-color-primary) !important;
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}

website/src/theme/BlogSidebar/Mobile/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {useVisibleBlogSidebarItems} from '@docusaurus/theme-common/internal';
+import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+function BlogSidebarMobileSecondaryMenu({sidebar}) {
+  const items = useVisibleBlogSidebarItems(sidebar.items);
+  return (
+    <ul className="menu__list">
+
+      <div>
+        {"New posts (2024–)"}
+      </div>
+      <div style={{ marginBottom: "2rem", fontWeight: "bold", fontSize: "1.2rem", marginLeft: "1rem" }}>
+        <Link to="https://chsm.dev/blog" style={{ color: "#fbb946" }}>Blog moved to chsm.dev 🢅</Link>
+      </div>
+      <div>
+        {"Blog archive (2022–24)"}
+      </div>
+
+      {items.map((item) => (
+        <li key={item.permalink} className="menu__list-item">
+          <Link
+            isNavLink
+            to={item.permalink}
+            className="menu__link"
+            activeClassName="menu__link--active">
+            {item.title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+export default function BlogSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}

website/src/theme/BlogSidebar/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+export default function BlogSidebar({sidebar}) {
+  const windowSize = useWindowSize();
+  if (!sidebar?.items.length) {
+    return null;
+  }
+  // Mobile sidebar doesn't need to be server-rendered
+  if (windowSize === 'mobile') {
+    return <BlogSidebarMobile sidebar={sidebar} />;
+  }
+  return <BlogSidebarDesktop sidebar={sidebar} />;
+}