@rspress-theme-anatole/theme-default 0.7.24 → 0.7.25

package/dist/bundle.css

@@ -3757,6 +3757,15 @@ p {
   display: flex;
 }
 
+.faqs-item-question.faqs-item-link {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.faqs-item-question.faqs-item-link:hover {
+  color: #e63946;
+}
+
 .faqs-item-answer {
   font-weight: 400;
   font-size: 16px;
@@ -4043,4 +4052,107 @@ p {
     margin: 2px 0 16px 0;
     color: #737373;
     font-size: 14px;
+}
+
+/* Popular Topics Section */
+.popular-topics-section {
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 40px 48px;
+}
+
+.popular-topics-title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    color: #333;
+    margin-bottom: 24px;
+}
+
+.popular-topics-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}
+
+.popular-topics-card {
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px;
+    background: #fff;
+    text-decoration: none;
+    transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.popular-topics-card:hover {
+    border-color: #d5d5d5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.popular-topics-card-title {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+    color: #333;
+    margin: 0 0 8px 0;
+}
+
+.popular-topics-card-desc {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #666;
+    margin: 0;
+    line-height: 1.5;
+}
+
+.popular-topics-show-more {
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
+}
+
+.popular-topics-show-more-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+    color: #666;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.popular-topics-show-more-link:hover {
+    color: #333;
+}
+
+.popular-topics-chevron {
+    font-size: 12px;
+    display: inline-block;
+    transition: transform 0.3s ease;
+}
+
+.popular-topics-chevron.expanded {
+    transform: rotate(180deg);
+}
+
+@media (max-width: 900px) {
+    .popular-topics-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .popular-topics-section {
+        padding: 0 20px 32px;
+    }
+    
+    .popular-topics-grid {
+        grid-template-columns: 1fr;
+    }
 }

package/dist/bundle.js

@@ -1732,6 +1732,10 @@ function HomepageLayout(props) {
                         frontmatter: frontmatter,
                         routePath: routePath
                     }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PopularTopicsSection, {
+                        frontmatter: frontmatter,
+                        routePath: routePath
+                    }),
                     (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HomepageFeaturesTabs, {
                         frontmatter: frontmatter,
                         routePath: routePath
@@ -1775,6 +1779,10 @@ function GettingStartLayout(props) {
                         frontmatter: frontmatter,
                         routePath: routePath
                     }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PopularTopicsSection, {
+                        frontmatter: frontmatter,
+                        routePath: routePath
+                    }),
                     (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(NeedHelpSection, {
                         frontmatter: frontmatter,
                         routePath: routePath
@@ -3278,6 +3286,70 @@ function HomepageFeatures({ frontmatter, routePath }) {
     });
 }
 
+function PopularTopicsSection({ frontmatter, routePath }) {
+    const [isExpanded, setIsExpanded] = __WEBPACK_EXTERNAL_MODULE_react__.useState(false);
+    const popularTopics = frontmatter?.popularTopics;
+    const DEFAULT_VISIBLE_COUNT = 3;
+
+    if (!popularTopics || !popularTopics.items || popularTopics.items.length === 0) {
+        return null;
+    }
+
+    const allItems = popularTopics.items;
+    const hasMoreItems = allItems.length > DEFAULT_VISIBLE_COUNT;
+    const visibleItems = isExpanded ? allItems : allItems.slice(0, DEFAULT_VISIBLE_COUNT);
+
+    const handleToggle = (e) => {
+        e.preventDefault();
+        setIsExpanded(!isExpanded);
+    };
+
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: "popular-topics-section",
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("h2", {
+                className: "popular-topics-title",
+                children: popularTopics.title ?? "Browse by popular topics"
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "popular-topics-grid",
+                children: visibleItems.map((item, index) =>
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+                        href: item.link || "#",
+                        className: "popular-topics-card",
+                        children: [
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("h3", {
+                                className: "popular-topics-card-title",
+                                children: item.title
+                            }),
+                            item.desc && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                                className: "popular-topics-card-desc",
+                                children: item.desc
+                            })
+                        ]
+                    }, item.title || index)
+                )
+            }),
+            hasMoreItems && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "popular-topics-show-more",
+                children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+                    href: "#",
+                    onClick: handleToggle,
+                    className: "popular-topics-show-more-link",
+                    children: [
+                        isExpanded 
+                            ? (popularTopics.showLessText ?? "Show less topics")
+                            : (popularTopics.showMoreText ?? "Show more topics"),
+                        (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("i", {
+                            className: isExpanded ? "fa-solid fa-chevron-up popular-topics-chevron" : "fa-solid fa-chevron-down popular-topics-chevron"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
 function HomepageFeaturesTabs({ frontmatter, routePath }) {
     const [activeTab, setActiveTab] = __WEBPACK_EXTERNAL_MODULE_react__.useState(0);
     const featureTab = frontmatter?.featureTabs;
@@ -3358,6 +3430,70 @@ function HomepageFaqs({ frontmatter, routePath }) {
     
     const activeFaqs = tabs.find(tab => tab.title === activeTab);
 
+    const renderFaqItem = (faqItem) => {
+        // If item has a link, render as a clickable link row (same style as FAQ question)
+        if (faqItem.link) {
+            return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "faqs-box-item",
+                children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+                    href: faqItem.link,
+                    className: "faqs-item-question faqs-item-link",
+                    children: [
+                        (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            children: faqItem.title || faqItem.question
+                        }),
+                        (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("i", {
+                                className: "fa-solid fa-arrow-up-right-from-square"
+                            })
+                        })
+                    ]
+                })
+            }, faqItem.title || faqItem.question);
+        }
+        
+        // Otherwise render as expandable FAQ
+        return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            children: [
+                (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    children: [
+                        (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            children: faqItem.question,
+                        }),
+                        (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("i", {
+                                className: "fa-solid fa-chevron-down",
+                            }),
+                            onClick: (e) => {
+                                if (document.querySelector('.faqs-item-answer')) {
+                                    if (e.currentTarget.parentElement.nextElementSibling.style.display === 'none') {
+                                        e.currentTarget.parentElement.nextElementSibling.style.display = 'block';
+                                        e.currentTarget.querySelector('i').className = "fa-solid fa-chevron-up";
+                                    }
+                                    else {
+                                        e.currentTarget.parentElement.nextElementSibling.style.display = 'none';
+                                        e.currentTarget.querySelector('i').className = "fa-solid fa-chevron-down";
+                                    }
+                                }
+                            },
+                        }),
+                    ],
+                    className: "faqs-item-question",
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                    dangerouslySetInnerHTML: {
+                        __html: faqItem.answer
+                    },
+                    className: "faqs-item-answer",
+                    style: {
+                        display: "none",
+                    }
+                }),
+            ],
+            className: "faqs-box-item",
+        }, faqItem.question);
+    };
+
     return tabs.length > 0 ? (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: "faqs-div",
         children: [
@@ -3374,47 +3510,7 @@ function HomepageFaqs({ frontmatter, routePath }) {
             }),
             // Content FAQ
             activeFaqs ? (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        children: activeFaqs.items.map((faqItem) => {
-                            return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                                children: [
-                                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
-                                        children: [
-                                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                                                children: faqItem.question,
-                                            }),
-                                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                                                children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("i", {
-                                                    className: "fa-solid fa-chevron-down",
-                                                }),
-                                                onClick: (e) => {
-                                                    if (document.querySelector('.faqs-item-answer')) {
-                                                        if (e.currentTarget.parentElement.nextElementSibling.style.display === 'none') {
-                                                            e.currentTarget.parentElement.nextElementSibling.style.display = 'block';
-                                                            e.currentTarget.querySelector('i').className = "fa-solid fa-chevron-up";
-                                                        }
-                                                        else {
-                                                            e.currentTarget.parentElement.nextElementSibling.style.display = 'none';
-                                                            e.currentTarget.querySelector('i').className = "fa-solid fa-chevron-down";
-                                                        }
-                                                    }
-                                                },
-                                            }),
-                                        ],
-                                        className: "faqs-item-question",
-                                    }),
-                                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
-                                        dangerouslySetInnerHTML: {
-                                            __html: faqItem.answer
-                                        },
-                                        className: "faqs-item-answer",
-                                        style: {
-                                            display: "none",
-                                        }
-                                    }),
-                                ],
-                                className: "faqs-box-item",
-                            }, faqItem.question);
-                        }),
+                        children: activeFaqs.items.map((faqItem) => renderFaqItem(faqItem)),
                         className: "faqs-box"
                     }) : null,
         ],
@@ -6976,4 +7072,4 @@ async function exportContentToPDF() {
     });
 }
 
-export { Aside, Badge, Button, Card, DocFooter, DocLayout, EditLink, HomeFeature, HomeFooter, HomeLayout, HomepageLayout, GettingStartLayout, RequestArticleLayout, HomepageTopSearch, IntroBanner, HomepageTopics, HomepageFeatures, HomepageFeaturesTabs, WhatsNew, HomepageFaqs, LastUpdated, Layout, Link, LinkCard, Nav, NotFoundLayout, Overview, PackageManagerTabs, PrevNextPage, types_RenderType as RenderType, ScrollToTop, Search, SearchPanel, Sidebar, SidebarList, SocialLinks, SourceCode, Steps, SwitchAppearance, Tab, Tabs, Tag, Toc, bindingAsideScroll, src_rslib_entry_ as default, getCustomMDXComponent, isMobileDevice, parseInlineMarkdownText, renderHtmlOrText, renderInlineMarkdown, scrollToTarget, setup, useEditLink, useEnableNav, useFullTextSearch, useHiddenNav, useLocaleSiteData, usePathUtils, usePrevNextPage, useRedirect4FirstVisit, useSidebarData, useThemeState };
+export { Aside, Badge, Button, Card, DocFooter, DocLayout, EditLink, HomeFeature, HomeFooter, HomeLayout, HomepageLayout, GettingStartLayout, RequestArticleLayout, HomepageTopSearch, IntroBanner, HomepageTopics, HomepageFeatures, HomepageFeaturesTabs, PopularTopicsSection, WhatsNew, HomepageFaqs, LastUpdated, Layout, Link, LinkCard, Nav, NotFoundLayout, Overview, PackageManagerTabs, PrevNextPage, types_RenderType as RenderType, ScrollToTop, Search, SearchPanel, Sidebar, SidebarList, SocialLinks, SourceCode, Steps, SwitchAppearance, Tab, Tabs, Tag, Toc, bindingAsideScroll, src_rslib_entry_ as default, getCustomMDXComponent, isMobileDevice, parseInlineMarkdownText, renderHtmlOrText, renderInlineMarkdown, scrollToTarget, setup, useEditLink, useEnableNav, useFullTextSearch, useHiddenNav, useLocaleSiteData, usePathUtils, usePrevNextPage, useRedirect4FirstVisit, useSidebarData, useThemeState };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspress-theme-anatole/theme-default",
   "author": "Anatole Tong",
-  "version": "0.7.24",
+  "version": "0.7.25",
   "license": "MIT",
   "sideEffects": [
     "*.css",
@@ -21,8 +21,8 @@
   "types": "./dist/bundle.d.ts",
   "dependencies": {
     "@mdx-js/react": "2.3.0",
-    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.24",
-    "@rspress-theme-anatole/shared": "0.7.24",
+    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.25",
+    "@rspress-theme-anatole/shared": "0.7.25",
     "@rspress/runtime": "1.43.8",
     "body-scroll-lock": "4.0.0-beta.0",
     "copy-to-clipboard": "^3.3.3",