@rspress-theme-anatole/theme-default 0.7.1 → 0.7.3

package/dist/bundle.css

@@ -3590,7 +3590,8 @@ p {
 
 .topics-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    /* grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); */
+    grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 24px;
 }
@@ -3652,12 +3653,14 @@ p {
 .topics-item {
   width: 100%;
   min-width: 0;
-  height: 184;
+  /* height: 184; */
   border-radius: 8px;
   border-width: 1px;
   padding: 24px;
   background-color: #FFFFFF;
   border: 1px solid var(--Colors-Neutral-3, #D2D5DA);
+  justify-content: space-between;
+  height: 100%; 
 }
 
 .topics-item-text {
@@ -3678,6 +3681,9 @@ p {
   vertical-align: middle;
   color: #494F5A;
   margin-top: 10px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 
 .topics-item-icon {
@@ -3709,6 +3715,21 @@ p {
   margin: 45px 40px 72px 40px;
 }
 
+.topics-item-labels {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.topics-label {
+  background-color: #f1f1f1;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 12px;
+  color: #555;
+}
+
 .faqs-div {
   background-color: #F1F2F4;
 }
@@ -3802,4 +3823,79 @@ p {
 
 .rspress-nav-search-button {
   display: none;
+}
+
+.whatsnew-div {
+  margin: 45px 40px;
+}
+
+.whatsnew-title {
+  margin-bottom: 16px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #32363E;
+}
+
+.whatsnew-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+.whatsnew-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  background: #fff;
+}
+
+.whatsnew-label {
+  display: inline-block;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 12px;
+  margin-bottom: 8px;
+}
+
+.whatsnew-card-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 4px 0;
+}
+
+.whatsnew-date {
+  font-size: 16px;
+  color: #6b7280;
+  margin-bottom: 12px;
+}
+
+.whatsnew-link {
+  font-weight: 600;
+  color: #111;
+  text-decoration: none;
+}
+
+.features-tabs {
+  display: flex;
+  gap: 24px;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 16px;
+}
+
+.features-tab {
+  background: none;
+  border: none;
+  font-size: 18px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 0;
+  color: #444;
+}
+
+.features-tab.active {
+  color: #e60023;
+  border-bottom: 2px solid #e60023;
 }

package/dist/bundle.js

@@ -1443,7 +1443,7 @@ function HomepageLayout(props) {
                         frontmatter: frontmatter,
                         routePath: routePath
                     }),
-                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HomepageFeatures, {
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HomepageFeaturesTabs, {
                         frontmatter: frontmatter,
                         routePath: routePath
                     }),
@@ -1478,6 +1478,10 @@ function GettingStartLayout(props) {
                         frontmatter: frontmatter,
                         routePath: routePath
                     }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(WhatsNew, {
+                        frontmatter: frontmatter,
+                        routePath: routePath
+                    }),
                     (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HomepageFeatures, {
                         frontmatter: frontmatter,
                         routePath: routePath
@@ -2924,27 +2928,108 @@ function HomepageFeatures({ frontmatter, routePath }) {
                                         className: "topics-item-desc",
                                         children: featureItem.desc
                                     }),
+                                    featureItem.labels && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: "topics-item-labels",
+                                        children: featureItem.labels.map((label) =>
+                                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                                className: "topics-label",
+                                                children: label
+                                            }, label)
+                                        )
+                                    }),
                                 ]
                             }, featureItem.text);
                         }),
 
                         style: {
                             display: 'grid',
-                            gridTemplateColumns: 'repeat(3, 1fr)',
+                            gridTemplateColumns: 'repeat(4, 1fr)',
                             gap: '24px',
                             marginTop: '24px',
                             marginBottom: '24px',
+                            alignItems: 'stretch',
                         }
                     }, featuresRow.items[0].text);
                 }),
-                style: {
-                }
             }),
         ],
         className: "features-div",
     });
 }
 
+function HomepageFeaturesTabs({ frontmatter, routePath }) {
+    const [activeTab, setActiveTab] = __WEBPACK_EXTERNAL_MODULE_react__.useState(0);
+    const features = frontmatter?.features;
+
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: "features-div",
+        children: [
+            //Tabs
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "features-tabs",
+                children: features.tabs.map((tab, idx) =>
+                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                        className: "features-tab" + (idx === activeTab ? " active" : ""),
+                        onClick: () => setActiveTab(idx),
+                        children: tab.name
+                    }, tab.name)
+                )
+            }),
+
+            // Tab content
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: features.tabs[activeTab].rows.map((featuresRow) => {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(4, 1fr)',
+                            gap: '24px',
+                            marginTop: '24px',
+                            marginBottom: '24px',
+                            alignItems: 'stretch',
+                        },
+                        children: featuresRow.items.map((featureItem) =>
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: "topics-item",
+                                children: [
+                                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: "features-item-icon-div",
+                                        children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("i", {
+                                            className: featureItem.icon + " features-item-icon",
+                                        })
+                                    }),
+                                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                                        className: "topics-item-text",
+                                        children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+                                            href: featureItem.link,
+                                            children: (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                                children: featureItem.text
+                                            })
+                                        })
+                                    }),
+                                    (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                                        className: "topics-item-desc",
+                                        children: featureItem.desc
+                                    }),
+                                    featureItem.labels && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: "topics-item-labels",
+                                        children: featureItem.labels.map((label) =>
+                                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                                className: "topics-label",
+                                                children: label
+                                            }, label)
+                                        )
+                                    }),
+                                ]
+                            }, featureItem.text)
+                        )
+                    }, featuresRow.items[0].text);
+                })
+            })
+        ]
+    });
+}
+
 function HomepageFaqs({ frontmatter, routePath }) {
     const tabs = frontmatter?.faqTabs || [];
     const [activeTab, setActiveTab] = __WEBPACK_EXTERNAL_MODULE_react__.useState(tabs[0]?.title || '');
@@ -3079,6 +3164,47 @@ function NeedHelpSection({ frontmatter, routePath }) {
     });
 }
 
+function WhatsNew({ frontmatter }) {
+    const whatsNew = frontmatter?.whatsNew;
+
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: "whatsnew-div",
+        children: [
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("h2", {
+                className: "whatsnew-title",
+                children: whatsNew.title ?? "What's New"
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "whatsnew-cards",
+                children: whatsNew.items.map((item) => {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: "whatsnew-card",
+                        children: [
+                            item.label && (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                                className: "whatsnew-label",
+                                children: item.label
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("h3", {
+                                className: "whatsnew-card-title",
+                                children: item.title
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+                                className: "whatsnew-date",
+                                children: item.date
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
+                                href: item.link,
+                                className: "whatsnew-link",
+                                children: "View Details →"
+                            }),
+                        ]
+                    }, item.title);
+                })
+            })
+        ]
+    });
+}
+
 function HomeFooter() {
     const { siteData } = (0, __WEBPACK_EXTERNAL_MODULE__rspress_runtime_0abd3046__.usePageData)();
     const { group, message, links, social } = siteData.themeConfig.footer || {};
@@ -5797,4 +5923,4 @@ async function exportContentToPDF() {
     });
 }
 
-export { Aside, Badge, Button, Card, DocFooter, DocLayout, EditLink, HomeFeature, HomeFooter, HomeLayout, HomepageLayout, GettingStartLayout, HomepageTopSearch, IntroBanner, HomepageTopics, HomepageFeatures, 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, 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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rspress-theme-anatole/theme-default",
   "author": "Anatole Tong",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "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.1",
-    "@rspress-theme-anatole/shared": "0.7.1",
+    "@rspress-theme-anatole/rspress-plugin-mermaid": "0.7.3",
+    "@rspress-theme-anatole/shared": "0.7.3",
     "@rspress/runtime": "1.43.8",
     "body-scroll-lock": "4.0.0-beta.0",
     "copy-to-clipboard": "^3.3.3",