chore: ASide BEM

Author: SoonIter

packages/theme-default/src/components/Aside/ProgressCircle.scss

@@ -0,0 +1,3 @@
+.rp-aside__progress-circle {
+  display: inline-flex;
+}

packages/theme-default/src/components/Aside/ProgressCircle.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type React from 'react';
-import * as styles from './ProgressCircle.module.scss';
+import './ProgressCircle.scss';
 
 interface CircleProgressProps {
   percent: number;
@@ -28,7 +28,7 @@ export const ProgressCircle: React.FC<CircleProgressProps> = ({
     <svg
       width={size}
       height={size}
-      className={clsx(styles.progressCircle, className)}
+      className={clsx('rp-aside__progress-circle', className)}
     >
       <circle
         cx={size / 2}

packages/theme-default/src/components/Aside/ScrollToTop.scss

@@ -0,0 +1,13 @@
+.rp-aside__scroll-to-top {
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--rp-c-text-2);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+}

packages/theme-default/src/components/Aside/ScrollToTop.tsx

@@ -1,4 +1,4 @@
-import * as styles from './ScrollToTop.module.scss';
+import './ScrollToTop.scss';
 
 export function ScrollToTop() {
   const scrollToTop = () => {
@@ -9,7 +9,7 @@ export function ScrollToTop() {
   };
 
   return (
-    <button className={`${styles.scrollToTop}`} onClick={scrollToTop}>
+    <button className="rp-aside__scroll-to-top" onClick={scrollToTop}>
       <svg
         width="16"
         height="16"

packages/theme-default/src/components/Aside/TocItem.scss

@@ -0,0 +1,28 @@
+.rp-aside__toc-item {
+  display: flex;
+  line-height: 24px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  position: relative;
+  color: var(--rp-c-text-2);
+  font-weight: 400;
+  font-size: 14px;
+
+  &--active {
+    color: var(--rp-c-link);
+
+    &::before {
+      content: '';
+      display: block;
+      height: 100%;
+      width: 1px;
+      background-color: var(--rp-c-brand);
+      position: absolute;
+      left: -20px;
+      top: 0px;
+    }
+  }
+}

packages/theme-default/src/components/Aside/TocItem.tsx

@@ -5,7 +5,7 @@ import {
   renderInlineMarkdown,
 } from '../../logic/utils';
 import { Link } from '../Link';
-import * as styles from './TocItem.module.scss';
+import './TocItem.scss';
 
 export const TocItem = ({
   header,
@@ -21,16 +21,15 @@ export const TocItem = ({
       <Link
         href={`#${header.id}`}
         title={parseInlineMarkdownText(header.text)}
-        className={clsx('aside-link', styles.tocItem, {
-          [styles.active]: active,
-          'aside-link-active': active,
+        className={clsx('rp-aside__toc-item', {
+          'rp-aside__toc-item--active': active,
         })}
         style={{
           paddingLeft: (header.depth - baseHeaderLevel) * 12,
         }}
       >
         <span
-          className="aside-link-text"
+          className="rp-aside__toc-text"
           {...renderInlineMarkdown(header.text)}
         ></span>
       </Link>

packages/theme-default/src/components/Aside/index.scss

@@ -0,0 +1,34 @@
+.rp-aside {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--rp-c-divider-light);
+  padding-left: 20px;
+
+  &__title {
+    font-size: 14px;
+    font-weight: 700;
+    height: 32px;
+    line-height: 32px;
+    font-family: Inter;
+    font-style: normal;
+    color: var(--rp-c-text-1);
+    margin-bottom: 4px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__divider {
+    height: 1px;
+    background: var(--rp-c-divider-light);
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  &__toc {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 6px;
+  }
+}

packages/theme-default/src/components/Aside/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo } from 'react';
 import { scrollToTarget } from '../../logic/sideEffects';
 import { type UISwitchResult, useUISwitch } from '../../logic/useUISwitch.js';
 
-import * as styles from './index.module.scss';
+import './index.scss';
 import { ProgressCircle } from './ProgressCircle';
 import { ScrollToTop } from './ScrollToTop';
 import { TocItem } from './TocItem';
@@ -55,13 +55,13 @@ export function Aside() {
   }
 
   return (
-    <div className={styles.asideContainer}>
-      <div className={styles.outlineTitle}>
+    <div className="rp-aside">
+      <div className="rp-aside__title">
         {outlineTitle}
         <ProgressCircle percent={readPercent} size={14} strokeWidth={2} />
       </div>
       <nav>
-        <ul className={styles.tocContainer}>
+        <ul className="rp-aside__toc">
           {headers.map((header, index) => (
             <TocItem
               key={`${header.depth}_${header.text}_${header.id}_${index}`}
@@ -74,7 +74,7 @@ export function Aside() {
       </nav>
 
       <div style={{ display: readPercent !== 0 ? '' : 'none' }}>
-        <div className={styles.divider} />
+        <div className="rp-aside__divider" />
         <ScrollToTop />
       </div>
     </div>