Fix various bugs on comment counters and pagination

content/2023-07-24-open-sourcing-flashbots-mev-share-node.mdx

@@ -4,6 +4,7 @@ title: Open sourcing the Flashbots MEV-Share Node
 authors: [flashbots]
 tags: [mev-share]
 hide_table_of_contents: false
+forum_link: https://collective.flashbots.net/t/open-sourcing-the-flashbots-mev-share-node/2045
 ---
 
 Users should be able to see and control how their transactions are processed in the MEV supply chain. In order to bring more transparency to [orderflow auctions](https://writings.flashbots.net/order-flow-auctions-and-centralisation-II), Flashbots has open sourced our implementation of a [MEV-Share Node](https://github.com/flashbots/mev-share-node).

src/components/ForumWidget/ForumWidget.tsx

@@ -24,7 +24,10 @@ const ForumWidget = () => {
     const {
       posts_count
     } = res.data
-    setCommentAmount(posts_count)
+    // Discourse topics don't have a separate count just for replies so we must
+    // get the full count of posts and subtract one, for the original post
+    // https://meta.discourse.org/t/how-to-get-accurate-reply-count-through-api/144267/2
+    setCommentAmount(posts_count - 1)
   }, [forum_link])
 
   useEffect(() => {
@@ -34,11 +37,11 @@ const ForumWidget = () => {
   }, [forum_link])
 
   return (
-    forum_link !== undefined ? 
+    forum_link ? 
       <Link to={forum_link} className={styles.root}>
         <div className={styles.icon}>
           <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4.60449 8.97677C4.47333 8.95497 4.33889 8.9863 4.23088 9.06385C3.67315 9.4643 2.98928 9.7002 2.24999 9.7002C2.17307 9.7002 2.09675 9.69764 2.02112 9.69261C2.26644 9.2902 2.41227 8.82034 2.42419 8.31719C2.42782 8.16418 2.36117 8.01793 2.2433 7.9203C1.35318 7.18294 0.799988 6.14704 0.799988 5.0002C0.799988 2.76701 2.90025 0.950195 5.49999 0.950195C8.09973 0.950195 10.2 2.76701 10.2 5.0002C10.2 7.23338 8.09973 9.05019 5.49999 9.05019C5.19375 9.05019 4.89437 9.02496 4.60449 8.97677Z" stroke="#1C1E21" strokeLinejoin="round"/>
+            <path d="M4.60449 8.97677C4.47333 8.95497 4.33889 8.9863 4.23088 9.06385C3.67315 9.4643 2.98928 9.7002 2.24999 9.7002C2.17307 9.7002 2.09675 9.69764 2.02112 9.69261C2.26644 9.2902 2.41227 8.82034 2.42419 8.31719C2.42782 8.16418 2.36117 8.01793 2.2433 7.9203C1.35318 7.18294 0.799988 6.14704 0.799988 5.0002C0.799988 2.76701 2.90025 0.950195 5.49999 0.950195C8.09973 0.950195 10.2 2.76701 10.2 5.0002C10.2 7.23338 8.09973 9.05019 5.49999 9.05019C5.19375 9.05019 4.89437 9.02496 4.60449 8.97677Z" stroke="currentColor" strokeLinejoin="round"/>
           </svg>
         </div>
         <span>
@@ -53,4 +56,4 @@ const ForumWidget = () => {
   )
 }
 
-export default ForumWidget
+export default ForumWidget

src/components/ForumWidget/styles.module.scss

@@ -1,7 +1,7 @@
 .root {
   display: flex;
   font-size: 13px;
-  border: 1px solid #CCD0D5;
+  border: 1px solid #ccd0d5;
   border-radius: 24px;
   line-height: 16px;
   display: flex;
@@ -10,28 +10,27 @@
   padding: 4px 8px 5px;
   gap: 4px;
   width: fit-content;
-  margin-top: .25rem;
+  margin-top: 0.25rem;
+  color: var(--ifm-font-color-base);
+
   & > * {
     flex: none;
     order: 1;
     flex-grow: 0;
   }
   &:hover {
     text-decoration: none;
-  }
-  & span {
-    color: #1C1E21;
+    color: unset;
   }
 }
 
 .icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 5px;
-  & img {
-    width: 100%;
-  }
 
-
-}
+  & svg {
+    position: relative;
+    top: 1px;
+  }
+}

src/scss/custom.scss

@@ -147,6 +147,10 @@ h1, h2, h3, h4, h5, h6 {
   overflow-x: scroll;
 }
 
+.pagination-nav__item {
+  cursor: pointer;
+}
+
 .container {
   max-width: var(--ifm-container-width-xl);
   width: 88vw;

src/theme/BlogListPage/index.tsx

@@ -49,11 +49,15 @@ const extractTags = ({ items }: Props) => {
   }))
 }
 
-const paginate = function (array: Array<any>[], index: number, size: number): any[] {
+const paginate = function (array: Array<any>[], index: number, size: number, tagsListRef: React.RefObject<HTMLDivElement>): any[] {
   // transform values
   index = Math.abs(index);
   index = index > 0 ? index - 1 : index;
   size = size < 1 ? 1 : size;
+
+  if (tagsListRef.current) {
+    tagsListRef.current.scrollIntoView()
+  }
   // filter
   return [...(array.filter((value, n) => {
       return (n >= (index * size)) && (n < ((index+1) * size))
@@ -71,12 +75,12 @@ function BlogListPage(props: Props): JSX.Element {
   const isBlogOnlyMode = permalink === "/"
   const title = isBlogOnlyMode ? siteTitle : blogTitle
   const tags = extractTags(props)
-
+  const tagsListRef = React.useRef(null)
   const [page, setPage] = useState(0)
 
   const currentPage = useMemo(() => {
     // @ts-ignore: Readonly prevents mutation calls
-    return paginate([...items], page + 1, POST_PER_PAGE)
+    return paginate([...items], page + 1, POST_PER_PAGE, tagsListRef)
   }, [items, page])
 
   // @ts-ignore: Destructuring doesn't ensure type fulfillment
@@ -110,7 +114,7 @@ function BlogListPage(props: Props): JSX.Element {
           </h1>
           <p>A collection of articles and papers from Flashbots.</p>
         </div>
-        <TagsListInline tags={tags} />
+        <TagsListInline tags={tags} ref={tagsListRef}/>
         <Searchbar setValue={setSearchFilter}/>
         {currentPage.filter(item => searchFilter === "" || item.content.frontMatter.title.toLowerCase().includes(searchFilter.toLowerCase())).map(({ content: BlogPostContent }) => (
           <BlogPostItem

src/theme/BlogListPage/styles.module.scss

@@ -6,7 +6,7 @@
 
 .header {
   text-align: center;
-  padding: 10em 0 6em;
+  padding-top: 10em;
 }
 .header h1 {
   font-weight: normal;
@@ -18,4 +18,4 @@
   font-style: italic;
   line-height: 1.5;
   font-family: 'CMU-Serif', Georgia, 'Times New Roman', Times, serif;
-}
+}

src/theme/TagsListInline/index.tsx

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react"
+import React, { forwardRef } from "react"
 import clsx from "clsx"
 import Translate from "@docusaurus/Translate"
 import Tag from "@theme/Tag"
 import type { Props } from "@theme/TagsListInline"
 
 import styles from "./styles.module.css"
 
-export default function TagsListInline({ tags }: Props) {
+const TagsListInline = forwardRef(function TagsListInline({ tags }: Props, tagsListRef: React.RefObject<HTMLDivElement>) {
   return (
-    <>
+    <div className={styles.tagsFilter} ref={tagsListRef}>
       <span>
         <Translate
           id="theme.tags.tagsListLabel"
@@ -37,6 +37,8 @@ export default function TagsListInline({ tags }: Props) {
           </li>
         ))}
       </ul>
-    </>
+    </div>
   )
-}
+})
+
+export default TagsListInline

src/theme/TagsListInline/styles.module.css

@@ -5,7 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.tags {
+ .tagsFilter {
+  padding-top: 6em;
+ }
+
+ .tags {
   display: inline;
 }