📝 docs: update notices and upgrade-guides (#2251)

docs/Masa.Blazor.Docs/wwwroot/data/notifications.json

@@ -1,31 +1,50 @@
 [
   {
     "title": "v1.4.0 Release",
-    "content": "We provides a best practice example of how to integrate MAUI hybrid with MASA Blazor. You can find the repository at [Masa.Blazor.MauiDemo](https://github.com/masastack/Masa.Blazor.MauiDemo).\r\nHighlights:\r\n- **Overlay**: add fade transition animation, use *block* scroll strategy, and update the bg color of scrim.\r\n- **PageStack**: new component that provides a container similar to a page stack, mainly for mobile.\r\n- **PageTabs**: add the `Closeable` state to tabs, hover to display the close button.\r\n- **Sortable**: new component for replacing the DragZone component.",
+    "content": {
+      "en": "We provides a best practice example of how to integrate MAUI hybrid with MASA Blazor. You can find the repository at [Masa.Blazor.MauiDemo](https://github.com/masastack/Masa.Blazor.MauiDemo).\r\nHighlights:\r\n- **Overlay**: add fade transition animation, use *block* scroll strategy, and update the bg color of scrim.\r\n- **PageStack**: new component that provides a container similar to a page stack, mainly for mobile.\r\n- **PageTabs**: add the `Closeable` state to tabs, hover to display the close button.\r\n- **Sortable**: new component for replacing the DragZone component."
+    },
     "type": 0,
     "href": "/blazor/getting-started/release-notes?v=v1.4.0",
     "createdAt": "2024-04-07"
   },
   {
     "title": "v1.5.0 Release",
-    "content": "Highlights:\r\n- **Button**: add `IconName`, `LeftIconName` and `RightIconName` to simplify the usage of icon buttons.\r\n- **Card**: add sub-component parameter, includes `Title`, `Subtitle` and `Text`.\r\n- **DataTable**: add support for cell ellipsis and custom cell content in `Headers`.\r\n- **ListItem**: add sub-component parameters, includes `Title`, `Subtitle`, `PrependAvatar`, `PrependIcon`, `AppendAvatar` and `AppendIcon`.",
+    "content": {
+      "en": "Highlights:\r\n- **Button**: add `IconName`, `LeftIconName` and `RightIconName` to simplify the usage of icon buttons.\r\n- **Card**: add sub-component parameter, includes `Title`, `Subtitle` and `Text`.\r\n- **DataTable**: add support for cell ellipsis and custom cell content in `Headers`.\r\n- **ListItem**: add sub-component parameters, includes `Title`, `Subtitle`, `PrependAvatar`, `PrependIcon`, `AppendAvatar` and `AppendIcon`."
+    },
     "type": 0,
     "href": "/blazor/getting-started/release-notes?v=v1.5.0",
     "createdAt": "2024-05-07"
   },
   {
     "title": "v1.6.0",
-    "content": "Highlight:\r\n- Remove all references to BlazorComponent.\r\n- **ExpansionPanel**: add sub-component parameters, including `Title` and `Text`.\r\n- **Form**: the context object provided by `ChildContent` now offers `Validate`, `Reset`, and `ResetValidation` methods, as well as an `IsValid` property.",
+    "content": {
+      "en": "Highlights:\r\n- Remove all references to BlazorComponent.\r\n- **ExpansionPanel**: add sub-component parameters, including `Title` and `Text`.\r\n- **Form**: the context object provided by `ChildContent` now offers `Validate`, `Reset`, and `ResetValidation` methods, as well as an `IsValid` property."
+    },
     "type": 0,
     "href": "/blazor/getting-started/release-notes?v=v1.6.0",
     "createdAt": "2024-07-02"
   },
   {
     "title": "v1.7.0",
-    "content": "Highlight:\r\n- **PdfMobileViewer**: a PDF viewer designed for mobile.\r\n- **Toggle**: a wrapper that allows you to toggle between two states.\r\n- **AppThemeStylesheet**: using for avoiding the brief flicker when application is loaded, more details can ben found in the docs.\r\n- **DateTimePicker**: a default **MTextField** component is built-in now, and you can customize the MTextField component using the **PDefaultDateTimePickerActivator**.\r\n- **Form**: auto label generation, built-in complex type validation, setting the validation timing by the `ValidateOn` property.\r\n- **PageStack**: support going back to a specific page or delta, and optionally replacing it with a new page.",
+    "content": {
+      "en": "Highlights:\r\n- **PdfMobileViewer**: a PDF viewer designed for mobile.\r\n- **Toggle**: a wrapper that allows you to toggle between two states.\r\n- **AppThemeStylesheet**: using for avoiding the brief flicker when application is loaded, more details can ben found in the docs.\r\n- **DateTimePicker**: a default **MTextField** component is built-in now, and you can customize the MTextField component using the **PDefaultDateTimePickerActivator**.\r\n- **Form**: auto label generation, built-in complex type validation, setting the validation timing by the `ValidateOn` property.\r\n- **PageStack**: support going back to a specific page or delta, and optionally replacing it with a new page."
+    },
     "type": 0,
     "href": "/blazor/getting-started/release-notes?v=v1.7.0",
     "upgradeGuide": "/blazor/getting-started/upgrade-guide#upgrading-from-v1-6-x-to-v1-7-0",
     "createdAt": "2024-09-02"
+  },
+  {
+    "title": "v1.8.0",
+    "content": {
+      "en": "Highlights:\r\n- [Sticky](/blazor/labs/sticky): new component that make elements stick of the viewport when scrolling.\r\n- **NavigationDrawer** and **PageStack** supports touching to expand or collapse.\r\n- **Menu**: add `ScrollStrategy` parameter to control the behavior of menu during scrolling.\r\n- **PageStackNavController**:\r\n  - `Push` and `Replace` methods add a new `clearStack` argument that using for clear the stack.\r\n  - new **TabChanged** event for changes to currently active tab.\r\n- **TextField**: add support for setting precision for number type.",
+      "zh": "亮点:\r\n- [Sticky](/blazor/labs/sticky)：新组件，当滚动时使元素固定在视口上。\r\n- **NavigationDrawer** 和 **PageStack** 支付触摸展开或关闭。\r\n- **Menu**：添加 `ScrollStrategy` 策略以在滚动时控制菜单的行为。\r\n- **PageStackNavController**: \r\n  - `Push` 和 `Replace` 方法添加了一个新的`clearStack`参数，用于清空现有的堆栈。\r\n  - 新的 `TabChanged` 事件，激活标签更改时触发。\r\n- **TextField**: 数字类型现在支持设置精度。"
+    },
+    "type": 0,
+    "href": "/blazor/getting-started/release-notes?v=v1.8.0",
+    "upgradeGuide": "/blazor/getting-started/upgrade-guide#upgrading-from-v1-7-x-to-v1-8-0",
+    "createdAt": "2024-11-02"
   }
 ]

docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/en-US.md

@@ -1,5 +1,19 @@
 # Upgrade Guides
 
+## Upgrading form v1.7.x to v1.8.0
+
+### Components {#v1-8-0-components}
+
+#### Pagination {#v1-8-0-pagination}
+
+The way to set the shadow is changed from setting the `box-shadow` style to using the `Elevation` parameter.
+If you use custom styles, please note to modify to use the elevation style.
+
+```diff
+- <MPagination Class="css-to-hide-shadow" />
++ <MPagination Elevation="0" />
+```
+
 ## Upgrading form v1.6.x to v1.7.0
 
 ### Components {#v1-7-0-components}

docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/zh-CN.md

@@ -1,5 +1,18 @@
 # 升级指南
 
+## 从 v1.7.x 升级到 v1.8.0 {#upgrading-from-v1-7-x-to-v1-8-0}
+
+### 组件 {#v1-8-0-components}
+
+#### Pagination {#v1-8-0-pagination}
+
+应用阴影的方式从 `box-shadow`样式已经改为使用 `Elevation` 参数，如果你使用了自定义样式，请注意修改为使用 `elevation` 样式。
+
+```diff
+- <MPagination Class="css-to-hide-shadow" />
++ <MPagination Elevation="0" />
+```
+
 ## 从 v1.6.x 升级到 v1.7.0 {#upgrading-from-v1-6-x-to-v1-7-0}
 
 ### 组件 {#v1-7-0-components}

docs/Masa.Docs.Core/Components/AppHeading.razor.cs

@@ -55,7 +55,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             {
                 childBuilder.OpenElement(0, "a");
                 childBuilder.AddAttribute(1, "href", Href);
-                childBuilder.AddAttribute(2, "class", "text-decoration-none text-right text-md-left");
+                childBuilder.AddAttribute(2, "class", "text-decoration-none");
                 childBuilder.AddEventPreventDefaultAttribute(3, "onclick", true);
                 childBuilder.AddAttribute(4, "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, () => OnClick(Href!)));
                 childBuilder.AddContent(5, "#");

docs/Masa.Docs.Shared/Components/Menus/NotificationsMenu.razor

@@ -77,7 +77,7 @@
                                     @item.CreatedAt
                                 </div>
                                 <div class="text-caption">
-                                    <DocumentMarkdownIt Source="@item.Content"></DocumentMarkdownIt>
+                                    <DocumentMarkdownIt Source="@item.GetContent(I18n.Culture.TwoLetterISOLanguageName)"></DocumentMarkdownIt>
 
                                     <MChip Outlined Small Href="@item.Href" OnClick="@(() => OnClick(item))">
                                         @I18n.T($"notifications.{item.HrefText}")

docs/Masa.Docs.Shared/Components/Menus/NotificationsMenu.razor.cs

@@ -16,7 +16,7 @@ public NotificationItem()
         }
 
         public NotificationItem(string title,
-            string content,
+            Dictionary<string, string> content,
             NotificationType type,
             string href,
             string hrefAlias,
@@ -33,7 +33,7 @@ public NotificationItem(string title,
 
         public string Title { get; init; }
 
-        public string Content { get; init; }
+        public Dictionary<string, string> Content { get; init; }
 
         public NotificationType Type { get; init; }
 
@@ -56,6 +56,16 @@ public NotificationItem(string title,
             NotificationType.Release => "release-notes",
             _ => "view-details"
         };
+
+        public string GetContent(string key)
+        {
+            if (Content.TryGetValue(key, out var content))
+            {
+                return content;
+            }
+
+            return Content.First().Value;
+        }
     }
 
     [Inject] private IHttpClientFactory HttpClientFactory { get; set; } = null!;

docs/Masa.Docs.Shared/wwwroot/css/docs.css

@@ -196,12 +196,20 @@ h1+p, app-heading[level="1"]+p, .app-heading+p {
     .m-heading > a {
         bottom: 0;
         display: inline-block;
-        left: 0;
+        left: -0.7em;
         position: absolute;
-        right: -16px;
+        right: 0;
         top: 0;
     }
 
+@media (max-width: 959px) {
+    .m-heading > a {
+        text-align: right;
+        left: 0;
+        right: -0.7em;
+    }
+}
+
         .m-heading > a:not(:hover):not(:focus) {
             opacity: 0;
         }