Merge pull request #223 from Arhell/upd

update site to v3 docusaurus
AvaloniaUI · Nov 17, 2023 · c6e8eec · c6e8eec
2 parents 0bd26d8 + cc863f9
commit c6e8eec
Show file tree

Hide file tree

Showing 71 changed files with 5,337 additions and 3,283 deletions.
diff --git a/.github/workflows/azure-static-web-apps-zealous-desert-09e073403.yml b/.github/workflows/azure-static-web-apps-zealous-desert-09e073403.yml
@@ -13,17 +13,17 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.14]
+        node-version: [20]
     name: Build and Deploy Job
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           submodules: true
       - name: Install dependencies
         run: npm ci
       - name: Build
         id: build
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm run build --if-present

diff --git a/docs/basics/index.md b/docs/basics/index.md
@@ -7,9 +7,7 @@ title: Basics
 
 This section will introduce you to the basic concepts required to build an application with Avalonia.
 
-```mdx-code-block
 import {DocsCardList} from '../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/docs/basics/user-interface/controls/creating-controls/index.md b/docs/basics/user-interface/controls/creating-controls/index.md
@@ -5,9 +5,7 @@ title: Creating Controls
 
 # Creating Controls
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/docs/basics/user-interface/styling/themes/fluent.md b/docs/basics/user-interface/styling/themes/fluent.md
@@ -95,7 +95,7 @@ FluentTheme supports only Dark and Light theme variants, and it's not possible t
 ## Creating custom color palettes with online editor
 
 Microsoft Fluent Theme Editor was ported to Avalonia and now available to be used with our FluentTheme as well.
-It is available on <https://theme.xaml.live/> page and supports following features:
+It is available on https://theme.xaml.live/ page and supports following features:
 
 1. Editing palette colors for both Light and Dark variants.
 2. Previewing of the current palette.

diff --git a/docs/concepts/services/index.md b/docs/concepts/services/index.md
@@ -5,9 +5,7 @@ title: Services
 
 This section will introduce you to the services inlcuded in an application.
 
-```mdx-code-block
 import {DocsCardList} from '../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/docs/deployment/index.md b/docs/deployment/index.md
@@ -3,9 +3,7 @@ id: index
 title: Deployment
 ---
 
-```mdx-code-block
 import {DocsCardList} from '../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/docs/get-started/index.md b/docs/get-started/index.md
@@ -1,8 +1,6 @@
 # Get Started
 
-```mdx-code-block
 import {DocsCardList} from '../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/docs/get-started/test-drive/index.md b/docs/get-started/test-drive/index.md
@@ -1,8 +1,6 @@
 # Test Drive
 
-```mdx-code-block
 import {DocsCardList} from '../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/docs/get-started/wpf/index.md b/docs/get-started/wpf/index.md
@@ -11,9 +11,7 @@ You will see how although _Avalonia UI_ is often very similar to WPF; there are
 * Styling
 * Data Templates
 
-```mdx-code-block
 import {DocsCardList} from '../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/docs/guides/custom-controls/how-to-create-a-custom-controls-library.md b/docs/guides/custom-controls/how-to-create-a-custom-controls-library.md
@@ -3,6 +3,8 @@ id: how-to-create-a-custom-controls-library
 title: How To Create a Custom Controls Library
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 import CustomControlsSolutionScreenshot from '/img/gitbook-import/assets/image (22) (3).png';
 import CustomControlNuGetScreenshot from '/img/gitbook-import/assets/image (11) (2).png';
 

diff --git a/...raphics-and-animation/how-to-use-page-transitions/cross-fade-page-transition.md b/...raphics-and-animation/how-to-use-page-transitions/cross-fade-page-transition.md
@@ -3,6 +3,9 @@ id: cross-fade-page-transition
 title: Cross Fade Page Transition
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Cross Fade Page Transition
 
 The cross fade page transition fades out the current page and fades in the new page by animating the opacity.

diff --git a/docs/guides/index.md b/docs/guides/index.md
@@ -7,9 +7,7 @@ title: How-To Guides
 
 This section has practical guidance to help you implement specific tasks using Avalonia UI. Many are at the level of "how do I do that?". This section is arranged by subject area.
 
-```mdx-code-block
 import {DocsCardList} from '../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/docs/guides/platforms/android/index.md b/docs/guides/platforms/android/index.md
@@ -3,9 +3,7 @@ id: index
 title: Android
 ---
 
-```mdx-code-block
 import {DocsCardList} from '../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/docs/reference/controls/maskedtextbox.md b/docs/reference/controls/maskedtextbox.md
@@ -20,7 +20,7 @@ You will probably use these properties most often:
 
 The mask property accepts a string that can contain a combination of  fixed characters, and the following special characters:
 
-<table><thead><tr><th width="287" align="center">Mask Character</th><th>Description</th></tr></thead><tbody><tr><td align="center">0</td><td>Digit, required. This element will accept any single digit between 0 and 9.</td></tr><tr><td align="center">9</td><td>Digit or space, optional.</td></tr><tr><td align="center">#</td><td>Digit or space, optional. If this position is blank in the mask, it will be rendered as a space in the Text property. Plus (+) and minus (-) signs are allowed.</td></tr><tr><td align="center">L</td><td>Letter, required. Restricts input to the ASCII letters a-z and A-Z</td></tr><tr><td align="center">?</td><td>Letter, optional. Restricts input to the ASCII letters a-z and A-Z</td></tr><tr><td align="center">&#x26;</td><td>Character, required. If the <code>AsciiOnly</code> property is true, this element behaves like the "L" element.</td></tr><tr><td align="center">C</td><td>Character, optional. Any non-control character. If the AsciiOnly property is set to true, this element behaves like the "?" element.</td></tr><tr><td align="center">A</td><td>Alphanumeric, required. If the AsciiOnly property is true, the only characters it will accept are the ASCII letters a-z and A-Z. This mask element behaves like the "a" element.</td></tr><tr><td align="center">a</td><td>Alphanumeric, optional. If the AsciiOnly property is set to true, the only characters it will accept are the ASCII letters a-z and A-Z. This mask element behaves like the "A" element.</td></tr><tr><td align="center">.</td><td>Decimal placeholder. The actual display character used will be the decimal symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">,</td><td>Thousands placeholder. The actual display character used will be the thousands placeholder appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">:</td><td>Time separator. The actual display character used will be the time symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">/</td><td>Date separator. The actual display character used will be the date symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">$</td><td>Currency symbol. The actual character displayed will be the currency symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">&#x3C;</td><td>Shift down. Converts all characters that follow to lowercase.</td></tr><tr><td align="center">></td><td>Shift up. Converts all characters that follow to uppercase.</td></tr><tr><td align="center">|</td><td>Disable a previous shift up or shift down.</td></tr><tr><td align="center">\</td><td>Escape. Escapes a mask character, turning it into a literal. "\"</td></tr></tbody></table>
+<table><thead><tr><th width="287" align="center">Mask Character</th><th>Description</th></tr></thead><tbody><tr><td align="center">0</td><td>Digit, required. This element will accept any single digit between 0 and 9.</td></tr><tr><td align="center">9</td><td>Digit or space, optional.</td></tr><tr><td align="center">#</td><td>Digit or space, optional. If this position is blank in the mask, it will be rendered as a space in the Text property. Plus (+) and minus (-) signs are allowed.</td></tr><tr><td align="center">L</td><td>Letter, required. Restricts input to the ASCII letters a-z and A-Z</td></tr><tr><td align="center">?</td><td>Letter, optional. Restricts input to the ASCII letters a-z and A-Z</td></tr><tr><td align="center">&#x26;</td><td>Character, required. If the <code>AsciiOnly</code> property is true, this element behaves like the "L" element.</td></tr><tr><td align="center">C</td><td>Character, optional. Any non-control character. If the AsciiOnly property is set to true, this element behaves like the "?" element.</td></tr><tr><td align="center">A</td><td>Alphanumeric, required. If the AsciiOnly property is true, the only characters it will accept are the ASCII letters a-z and A-Z. This mask element behaves like the "a" element.</td></tr><tr><td align="center">a</td><td>Alphanumeric, optional. If the AsciiOnly property is set to true, the only characters it will accept are the ASCII letters a-z and A-Z. This mask element behaves like the "A" element.</td></tr><tr><td align="center">.</td><td>Decimal placeholder. The actual display character used will be the decimal symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">,</td><td>Thousands placeholder. The actual display character used will be the thousands placeholder appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">:</td><td>Time separator. The actual display character used will be the time symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">/</td><td>Date separator. The actual display character used will be the date symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">$</td><td>Currency symbol. The actual character displayed will be the currency symbol appropriate to the format provider, as determined by the control's FormatProvider property.</td></tr><tr><td align="center">&#x3C;</td><td>Shift down. Converts all characters that follow to lowercase.</td></tr><tr><td align="center">></td><td>Shift up. Converts all characters that follow to uppercase.</td></tr><tr><td align="center">|</td><td>Disable a previous shift up or shift down.</td></tr><tr><td align="center">\<td>Escape. Escapes a mask character, turning it into a literal. "\"</td></tr></tbody></table>
 
 The escape character (backslash) can be used to include a special character as a literal. For example, to include the dollar sign:
 

diff --git a/docs/reference/index.md b/docs/reference/index.md
@@ -1,6 +1,4 @@
-```mdx-code-block
 import {DocsCardList} from '../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/docs/tutorials/music-store-app/mock-search.md b/docs/tutorials/music-store-app/mock-search.md
@@ -37,8 +37,6 @@ At this stage, you will create two properties for the search application logic:
 * A text string that is the search criteria,&#x20;
 * A Boolean that indicates whether the search is busy.&#x20;
 
-<!---->
-
 - Add the following code to implement the above properties:
 
 ```csharp

diff --git a/docs/tutorials/todo-list-app/creating-a-view.md b/docs/tutorials/todo-list-app/creating-a-view.md
@@ -68,12 +68,12 @@ You are not going to change the code-behind file in this tutorial, but notice th
 
 To make the design-time preview look more like a mobile phone in portrait orientation, locate the design-time width and height properties for the user control and set them as shown:
 
-<pre class="language-markup"><code class="lang-markup"><strong>&#x3C;UserControl 
-</strong><strong>...
-</strong><strong>d:DesignWidth="250" d:DesignHeight="450" 
-</strong><strong>... >
-</strong><strong>
-</strong></code></pre>
+<pre class="language-markup"><code class="lang-markup">
+<strong>&#x3C;UserControl</strong>
+<strong>...</strong>
+<strong>d:DesignWidth="250" d:DesignHeight="450"</strong>
+<strong>... ></strong>
+</code></pre>
 
 Repeat the process with the main window.&#x20;
 

diff --git a/docs/tutorials/todo-list-app/inspect-the-xaml.md b/docs/tutorials/todo-list-app/inspect-the-xaml.md
@@ -47,8 +47,7 @@ The remaining two namespaces are used to communicate information to the _Avaloni
 For example, as you have already done, you can specify the width and height of the control as it is displayed in the designer preview pane:
 
 <pre class="language-xml"><code class="lang-xml">&#x3C;UserControl ...
-<strong>mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450" ... >
-</strong></code></pre>
+<strong>mc:Ignorable="d" d:DesignWidth="250" d:DesignHeight="450" ... ></strong></code></pre>
 
 The entry `mc:Ignorable="d"` tells the _Avalonia UI_ XAML engine that entries beginning with `d:` can be ignored at runtime.
 

diff --git a/docs/tutorials/todo-list-app/wiring-up-the-views.md b/docs/tutorials/todo-list-app/wiring-up-the-views.md
@@ -49,7 +49,7 @@ Take some time here to examine the code that you just added: &#x20;
 
 The items control `<ItemsControl>` repeats its display for each item in a collection source that is defined by the `ItemsSource` attribute. Here the data binding expression `{Binding ListItems}` means we are looking for a data context with this property name.&#x20;
 
-How each item is displayed inside the items control is controlled by the item template <`ItemTemplate>`. This can be any combination of controls, but in this example a **data template** is being used.
+How each item is displayed inside the items control is controlled by the item template `ItemTemplate>`. This can be any combination of controls, but in this example a **data template** is being used.
 
 :::info
 You can review the data template concept [here](../../concepts/templates/).

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,8 +1,8 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer').themes.github;
+const darkCodeTheme = require('prism-react-renderer').themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/basics/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/basics/index.md
@@ -7,9 +7,7 @@ title: 基础知识
 
 本节将介绍构建使用Avalonia应用程序所需的基本概念。
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/...-content-docs/current/basics/user-interface/controls/creating-controls/index.md b/...-content-docs/current/basics/user-interface/controls/creating-controls/index.md
@@ -5,9 +5,7 @@ title: 创建控件
 
 # 创建控件
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/...urus-plugin-content-docs/current/basics/user-interface/styling/themes/fluent.md b/...urus-plugin-content-docs/current/basics/user-interface/styling/themes/fluent.md
@@ -95,7 +95,7 @@ FluentTheme 仅支持暗色和浅色主题变体，不支持为自定义变体
 ## 使用在线编辑器创建自定义颜色调色板
 
 Microsoft Fluent Theme Editor 已移植到 Avalonia，现在也可以与我们的 FluentTheme 一起使用。
-它可在 <https://theme.xaml.live/> 页面上使用，并支持以下功能：
+它可在 https://theme.xaml.live/ 页面上使用，并支持以下功能：
 
 1. 编辑浅色和暗色变体的调色板颜色。
 2. 预览当前调色板。

diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/services/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/services/index.md
@@ -5,9 +5,7 @@ title: 服务
 
 这部分将向您介绍应用程序中包含的服务。
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/deployment/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/deployment/index.md
@@ -3,9 +3,7 @@ id: index
 title: 部署
 ---
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocsCardList list={useCurrentSidebarCategory().items} />
-```
+<DocsCardList list={useCurrentSidebarCategory().items} />
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/index.md
@@ -1,8 +1,6 @@
 # 开始使用
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/.../zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/index.md b/.../zh-Hans/docusaurus-plugin-content-docs/current/get-started/test-drive/index.md
@@ -1,8 +1,6 @@
 # Test Drive
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/wpf/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/wpf/index.md
@@ -11,9 +11,7 @@ description: REFERENCE
 * 样式（Styling）
 * 数据模板（Data Templates）
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/...-docs/current/guides/custom-controls/how-to-create-a-custom-controls-library.md b/...-docs/current/guides/custom-controls/how-to-create-a-custom-controls-library.md
@@ -3,6 +3,8 @@ id: how-to-create-a-custom-controls-library
 title: 如何创建自定义控件库
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 import CustomControlsSolutionScreenshot from '/img/gitbook-import/assets/image (22) (3).png';
 import CustomControlNuGetScreenshot from '/img/gitbook-import/assets/image (11) (2).png';
 

diff --git a/...raphics-and-animation/how-to-use-page-transitions/cross-fade-page-transition.md b/...raphics-and-animation/how-to-use-page-transitions/cross-fade-page-transition.md
@@ -3,6 +3,9 @@ id: cross-fade-page-transition
 title: Cross Fade Page Transition
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Cross Fade Page Transition
 
 The cross fade page transition fades out the current page and fades in the new page by animating the opacity.

diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/index.md b/i18n/zh-Hans/docusaurus-plugin-content-docs/current/guides/index.md
@@ -7,9 +7,7 @@ title: 操作指南
 
 本节提供实用的指导，帮助您使用Avalonia UI实现特定的任务。很多人都处在“我该怎么做?”的水平。本节按学科领域排列。
 
-```mdx-code-block
 import {DocsCardList} from '../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```
diff --git a/...h-Hans/docusaurus-plugin-content-docs/current/guides/platforms/android/index.md b/...h-Hans/docusaurus-plugin-content-docs/current/guides/platforms/android/index.md
@@ -3,9 +3,8 @@ id: index
 title: Android
 ---
 
-```mdx-code-block
+
 import {DocsCardList} from '../../../../../../../src/components/DocsCard';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocsCardList list={useCurrentSidebarCategory().items} />
-```