🆕 feat(I18n): Add I18n component (#945)

* 🆕 feat(I18n): Add I18n component for library, and add contribute components for docs

* 📝 docs(i18n-component): add docs

src/Docs/Masa.Blazor.Docs/Examples/components/i18ns/Args.razor

@@ -0,0 +1,5 @@
+<span class="grey--text">
+    <MI18n Key="$masaBlazor.pagination.ariaLabel.page" />
+</span>
+<MIcon>mdi-arrow-right-bold</MIcon>
+<MI18n Key="$masaBlazor.pagination.ariaLabel.page" Args="@(new object[] { "All components" })"></MI18n>

src/Docs/Masa.Blazor.Docs/Examples/components/i18ns/Placeholder.razor

@@ -0,0 +1,15 @@
+<span class="grey--text">
+    <MI18n Key="$masaBlazor.pagination.ariaLabel.page" />
+</span>
+<MIcon>mdi-arrow-right-bold</MIcon>
+<MI18n Key="$masaBlazor.pagination.ariaLabel.page">
+    <PlaceholderContent>
+        @if (context == 0)
+        {
+            <a class="text-decoration-none primary--text font-weight-medium"
+               href="/blazor/components/all">
+                All components
+            </a>
+        }
+    </PlaceholderContent>
+</MI18n>

src/Docs/Masa.Blazor.Docs/Examples/components/i18ns/Usage.razor

@@ -0,0 +1,11 @@
+<MRow>
+    <MCol Cols="4" Class="text-center">
+        <MI18n Key="$masaBlazor.close" />
+    </MCol>
+    <MCol Cols="4" Class="text-center">
+        <MI18n Key="$masaBlazor.save" />
+    </MCol>
+    <MCol Cols="4" Class="text-center">
+        <MI18n Key="$masaBlazor.cancel" />
+    </MCol>
+</MRow>

src/Docs/Masa.Blazor.Docs/Pages/Components.razor

@@ -48,5 +48,7 @@
                 </ShowTransitionElement>
             </FadeTransition>
         }
+
+        <Contribute GithubUri="@($"https://github.com/BlazorComponent/MASA.Blazor/blob/main/src/Docs/Masa.Blazor.Docs/wwwroot/pages/components/{Page}/{Culture.Name}.md")" />
     </MResponsive>
 </MContainer>

src/Docs/Masa.Blazor.Docs/wwwroot/data/nav.json

@@ -130,6 +130,7 @@
         ]
       },
       "hover",
+      "i18ns",
       "icons",
       "image-captcha",
       "images",

src/Docs/Masa.Blazor.Docs/wwwroot/pages/components/i18ns/en-US.md

@@ -0,0 +1,29 @@
+---
+title: I18n
+desc: "The **MI18n** component that helps you use localization."
+---
+
+## Usage
+
+No manual injection of **I18n** is required.
+
+<masa-example file="Examples.components.i18ns.Usage"></masa-example>
+
+## Examples
+
+### Props
+
+#### Args
+
+The same as the `args` parameter of `String.Format`.
+
+<masa-example file="Examples.components.i18ns.Args"></masa-example>
+
+### Contents
+
+#### Placeholder
+
+Inserting strings is supported, and custom components can be inserted for each index using `PlaceholderContent`.
+
+<masa-example file="Examples.components.i18ns.Placeholder"></masa-example>
+

src/Docs/Masa.Blazor.Docs/wwwroot/pages/components/i18ns/zh-CN.md

@@ -0,0 +1,26 @@
+---
+title: I18n
+desc: "**MI18n** 组件能帮你使用本地化。"
+---
+
+## 使用
+
+不需要手动注入 **I18n**。
+
+<masa-example file="Examples.components.i18ns.Usage"></masa-example>
+
+## 示例
+
+### 属性
+
+同等于 `String.Format` 的 `args` 参数。
+
+<masa-example file="Examples.components.i18ns.Args"></masa-example>
+
+### 插槽
+
+#### 占位符
+
+插入字符串是支持的，而且可以使用 `PlaceholderContent` 对每个索引插入自定义组件。
+
+<masa-example file="Examples.components.i18ns.Placeholder"></masa-example>

src/Docs/Masa.Docs.Core/Components/Contribute.razor

@@ -0,0 +1,23 @@
+@inject I18n I18n
+
+<div class="ordinary-text d-flex align-center justify-space-between">
+    <div class="font-weight-medium d-flex align-baseline grow flex-wrap">
+        <MI18n Key="contribute.edit-page" Class="mb-2 mb-md-0">
+            <PlaceholderContent>
+                @if (context == 0)
+                {
+                    <AppLink Href="@GithubUri" Content="Github"></AppLink>
+                }
+            </PlaceholderContent>
+        </MI18n>
+
+        <MSpacer Class="hidden-sm-and-down"></MSpacer>
+    </div>
+</div>
+
+@code {
+
+    [Parameter, EditorRequired]
+    public string GithubUri { get; set; } = null!;
+
+}

src/Docs/Masa.Docs.Shared/Pages/Document.razor

@@ -8,5 +8,7 @@
                  Class="mx-auto overflow-visible">
         <DocumentMarkdownIt Source="@_md"
                             OnTocParsed="@OnTocParsed" />
+
+        <Contribute GithubUri="@GithubUri"></Contribute>
     </MResponsive>
 </MContainer>

src/Docs/Masa.Docs.Shared/Pages/Document.razor.cs

@@ -35,13 +35,29 @@ public partial class Document : IDisposable
     private string? _md;
     private CultureInfo? _prevCulture;
     private string? _prevAbsolutePath;
+
     private Dictionary<string, string[]> _projectMap = new()
     {
-        { "stack", new string[]{ "MASA Stack", "https://cdn.masastack.com/stack/images/logo/MASAStack/logo.png" } },
-        { "framework",new string[]{ "MASA Framework", "https://cdn.masastack.com/images/framework_logo.png" } },
-        { "blazor", new string[]{ "MASA Blazor", "https://cdn.masastack.com/stack/images/website/masa-blazor/miniLogo.png" } }
+        { "stack", new string[] { "MASA Stack", "https://cdn.masastack.com/stack/images/logo/MASAStack/logo.png" } },
+        { "framework", new string[] { "MASA Framework", "https://cdn.masastack.com/images/framework_logo.png" } },
+        { "blazor", new string[] { "MASA Blazor", "https://cdn.masastack.com/stack/images/website/masa-blazor/miniLogo.png" } }
     };
 
+    private string GithubUri
+    {
+        get
+        {
+            return Project switch
+            {
+                "blazor" =>
+                    $"https://github.com/BlazorComponent/MASA.Blazor/blob/main/src/Docs/Masa.Blazor.Docs/wwwroot/pages/{Category}/{Page}/{Culture.Name}.md",
+                "framework" or "stack" =>
+                    $"https://github.com/masastack/MASA.Docs/blob/main/src/Masa.{Project.ToUpperFirst()}.Docs/wwwroot/pages/{Category}/{Page}/{(string.IsNullOrWhiteSpace(SubPage) ? "" : $"{SubPage}/")}{Culture.Name}.md",
+                _ => string.Empty
+            };
+        }
+    }
+
     protected override void OnInitialized()
     {
         BaseLayout.PageInfo.PageTitle = _projectMap.GetValueOrDefault(Project)?[0];

src/Docs/Masa.Docs.Shared/wwwroot/locale/en-US.json

@@ -361,6 +361,10 @@
     "treeview": "The Treeview component is useful for displaying large amounts of nested data.",
     "virtual-scroller": "The VirtualScroller component displays a virtual、infinite list"
   },
+  "contribute": {
+    "edit-page": "Edit this page on {0}",
+    "last-updated": "Last updated:"
+  },
   "0.6.0": "0.6.0",
   "0.7.0": "0.7.0"
 }

src/Docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json

@@ -473,6 +473,10 @@
     "treeview": "适用于显示大量嵌套数据",
     "virtual-scroller": "VirtualScroller 组件显示一个虚拟、无限 的列表"
   },
+  "contribute": {
+    "edit-page": "在 {0} 上编辑此页面",
+    "last-updated": "最后更新："
+  },
   "0.6.0": "0.6.0",
   "0.7.0": "0.7.0",
   "default": "默认值",

src/Masa.Blazor/Components/I18n/MI18n.cs

@@ -0,0 +1,11 @@
+namespace Masa.Blazor;
+
+public partial class MI18n : BI18n
+{
+    protected override void SetComponentClass()
+    {
+        base.SetComponentClass();
+
+        CssProvider.Apply(cssBuilder => { cssBuilder.Add("m-i18n"); });
+    }
+}

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -748,11 +748,16 @@ input[type=number] {
     opacity: .9;
 }
 
-/* BaiduMap styles */
+/* i18n */
+.m-i18n {
+    white-space: nowrap;
+}
+
+/* BaiduMap */
 
 .m-baidumap {
     width: 100%;
     height: 100%;
     overflow: hidden;
     margin: 0;
-}
+}