feat: custom PrevNextPage component

packages/theme/src/plugin/theme.ts

@@ -10,6 +10,7 @@ import {
   HomeHero,
   LinkCard,
   OutlineCTA,
+  PrevNextPage,
   SwitchAppearance,
   VersionBadge,
   // @ts-ignore
@@ -63,6 +64,7 @@ export {
   HomeHero,
   LinkCard,
   OutlineCTA,
+  PrevNextPage,
   SwitchAppearance,
   VersionBadge,
 };

packages/theme/src/styles/nav.css

@@ -215,77 +215,3 @@ div.rspress-nav-appearance > div,
   font-weight: 500 !important;
 }
 
-/* 
-========================================
-Prev next page
-========================================
-*/
-
-:root {
-  --rp-prev-next-page-gap: 12px;
-}
-
-.rp-prev-next-page {
-  gap: var(--rp-prev-next-page-gap);
-
-  @media (max-width: 480px) {
-    flex-direction: column;
-  }
-}
-
-.rp-prev-next-page__item {
-  width: 100%;
-  position: relative;
-  border: 1px solid var(--rp-c-divider-light);
-  border-radius: var(--rp-radius-small) !important;
-  align-self: stretch;
-  justify-content: flex-start !important;
-}
-
-.rp-prev-next-page__item:hover {
-  background-color: initial !important;
-  opacity: initial !important;
-}
-
-.rp-prev-next-page__icon {
-  content: url("../assets/arrow-bar-right.svg?react");
-  width: 16px;
-  height: 16px;
-  padding: calc((40px - 16px) / 2);
-  background-color: var(--rp-c-divider-light);
-  border-radius: var(--rp-radius-small);
-  box-sizing: content-box;
-}
-
-.rp-prev-next-page__next {
-  align-items: flex-start !important;
-}
-
-.rp-prev-next-page__item__desc {
-  position: absolute;
-  top: 10px;
-  left: var(--rp-prev-next-page-gap);
-}
-
-.rp-prev-next-page__next .rp-prev-next-page__item__desc {
-  padding-left: 0;
-}
-
-.rp-prev-next-page__prev .rp-prev-next-page__item__desc {
-  padding-left: calc(40px + var(--rp-prev-next-page-gap));
-}
-
-.rp-prev-next-page__prev .rp-prev-next-page__item__title {
-  justify-content: flex-start;
-}
-
-.rp-prev-next-page__item__title {
-  gap: var(--rp-prev-next-page-gap) !important;
-  justify-content: space-between;
-  width: 100%;
-  align-items: flex-start !important;
-}
-
-.rp-prev-next-page__item__title > span {
-  padding-top: var(--rp-prev-next-page-gap);
-}

packages/theme/src/theme/components/index.ts

@@ -9,5 +9,6 @@ export { HomeFooter } from './home-footer';
 export { HomeHero } from './home-hero';
 export { LinkCard } from './link-card';
 export { OutlineCTA } from './outline-cta';
+export { PrevNextPage } from './prev-next-page';
 export { SwitchAppearance } from './switch-appearance';
 export { VersionBadge } from './version-badge';

packages/theme/src/theme/components/prev-next-page/index.module.scss

@@ -0,0 +1,123 @@
+.container {
+  display: flex;
+  gap: 12px;
+
+  @media (max-width: 480px) {
+    flex-direction: column;
+  }
+}
+
+.placeholder {
+  flex: 1;
+}
+
+.pagerLink {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 16px;
+  border: 1px solid var(--rp-c-divider-light);
+  border-radius: var(--rp-radius-small);
+  padding: 12px;
+  text-decoration: none;
+  background: linear-gradient(
+      to right,
+      var(--ck-foreground-primary) 50%,
+      transparent 50%
+    )
+    right bottom / 200% 100%;
+  transition: background-position 0.45s cubic-bezier(0.625, 0.05, 0, 1);
+}
+
+.pagerLink:hover,
+.pagerLink:focus {
+  border-color: var(--ck-accent);
+  background-position: left bottom;
+}
+
+.pagerLink:hover .title,
+.pagerLink:focus .title {
+  color: var(--ck-accent);
+}
+
+.pagerLink:hover .iconBox,
+.pagerLink:focus .iconBox {
+  background-color: var(--ck-accent);
+}
+
+.pagerLink:hover .icon,
+.pagerLink:focus .icon {
+  color: #ffffff;
+}
+
+.iconBox {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: var(--rp-c-divider-light);
+  border-radius: var(--rp-radius-small);
+  overflow: hidden;
+  transition: background-color 0.45s cubic-bezier(0.625, 0.05, 0, 1);
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  transition: color 0.45s cubic-bezier(0.625, 0.05, 0, 1);
+}
+
+@media (pointer: fine) {
+  .pagerLink:hover .icon {
+    animation:
+      slide-out 0.2s cubic-bezier(0.625, 0.05, 0, 1),
+      slide-in 0.25s cubic-bezier(0.625, 0.05, 0, 1) 0.2s;
+  }
+}
+
+.next .textWrap {
+  align-items: flex-end;
+}
+
+.textWrap {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.desc {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--rp-c-text-2);
+  letter-spacing: -0.24px;
+  transition: color 0.45s cubic-bezier(0.625, 0.05, 0, 1);
+}
+
+.title {
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--rp-c-text-1);
+  letter-spacing: -0.32px;
+  transition: color 0.45s cubic-bezier(0.625, 0.05, 0, 1);
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(150%);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(-150%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}

packages/theme/src/theme/components/prev-next-page/index.tsx

@@ -0,0 +1,41 @@
+import { useI18n } from '@rspress/core/runtime';
+import { Link, renderInlineMarkdown, usePrevNextPage } from '@theme';
+import IconArrowBarLeft from '../../assets/arrow-bar-left.svg?react';
+import IconArrowBarRight from '../../assets/arrow-bar-right.svg?react';
+import styles from './index.module.scss';
+
+export function PrevNextPage() {
+  const { prevPage, nextPage } = usePrevNextPage();
+  const t = useI18n();
+
+  return (
+    <div className={styles.container}>
+      {prevPage ? (
+        <Link href={prevPage.link} className={styles.pagerLink}>
+          <span className={styles.iconBox}>
+            <IconArrowBarLeft className={styles.icon} />
+          </span>
+          <span className={styles.textWrap}>
+            <span className={styles.desc}>{t('prevPageText')}</span>
+            <span className={styles.title} {...renderInlineMarkdown(prevPage.text)} />
+          </span>
+        </Link>
+      ) : (
+        <div className={styles.placeholder} />
+      )}
+      {nextPage ? (
+        <Link href={nextPage.link} className={`${styles.pagerLink} ${styles.next}`}>
+          <span className={styles.textWrap}>
+            <span className={styles.desc}>{t('nextPageText')}</span>
+            <span className={styles.title} {...renderInlineMarkdown(nextPage.text)} />
+          </span>
+          <span className={styles.iconBox}>
+            <IconArrowBarRight className={styles.icon} />
+          </span>
+        </Link>
+      ) : (
+        <div className={styles.placeholder} />
+      )}
+    </div>
+  );
+}