Removes Asciinema players with custom CommandPlayer. Closes #7130

Author: Jwaegebaert

docs/docs/index.mdx

@@ -1,11 +1,16 @@
-import AsciinemaPlayer from '@site/src/components/AsciinemaPlayer';
-import 'asciinema-player/dist/bundle/asciinema-player.css';
+import CommandPlayer from '../src/components/CommandPlayer';
 
 # CLI for Microsoft 365
 
 Using the CLI for Microsoft 365, you can manage your Microsoft 365 tenant and SharePoint Framework projects on any platform. No matter if you are on Windows, macOS or Linux, using Bash, Cmder or PowerShell, using the CLI for Microsoft 365 you can configure Microsoft 365, manage SharePoint Framework projects and build automation scripts.
 
-<AsciinemaPlayer src="/casts/home.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
+<CommandPlayer commands={[
+  { command: "m365 login", response: "To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code RB2RUD56D to authenticate." },
+  { command: "m365 status", responseFrom: "./cmd/status.mdx" },
+  { command: "m365 tenant serviceannouncement health list", responseFrom: "./cmd/tenant/serviceannouncement/serviceannouncement-health-list.mdx" },
+  { command: "m365 entra user list", responseFrom: "./cmd/entra/user/user-list.mdx" },
+  { command: "m365 todo task add --title \"New task\" --listName \"Tasks\"", responseFrom: "./cmd/todo/task/task-add.mdx" }
+]} />
 
 ## Installation
 

docs/docs/user-guide/connecting-microsoft-365.mdx

@@ -3,8 +3,7 @@ title: Log in to Microsoft 365
 sidebar_position: 3
 ---
 
-import AsciinemaPlayer from '@site/src/components/AsciinemaPlayer';
-import 'asciinema-player/dist/bundle/asciinema-player.css';
+import CommandPlayer from '../../src/components/CommandPlayer';
 
 # Log in to Microsoft 365
 
@@ -188,7 +187,7 @@ If you're logged in to Microsoft 365 using a certificate, the `status` command w
 
 To log out from Microsoft 365, use the `logout` command. Executing the `logout` command removes all connection information such as user name, refresh or access tokens stored on your computer.
 
-<AsciinemaPlayer src="/casts/logout.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
+<CommandPlayer command="m365 logout" response='Logged out from Microsoft 365' />
 
 ### Working with SharePoint Online
 

docs/docs/user-guide/installing-cli.mdx

@@ -3,8 +3,6 @@ title: Install the CLI
 sidebar_position: 1
 ---
 
-import AsciinemaPlayer from '@site/src/components/AsciinemaPlayer';
-import 'asciinema-player/dist/bundle/asciinema-player.css';
 
 # Install the CLI for Microsoft 365
 
@@ -26,10 +24,6 @@ To install the CLI for Microsoft 365, in the command line execute:
 npm install -g @pnp/cli-microsoft365
 ```
 
-<AsciinemaPlayer src="/casts/install.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
-
-<br />
-
 If you're using Yarn, you can install the CLI for Microsoft 365 by executing:
 
 ```sh

docs/docs/user-guide/using-cli.mdx

@@ -3,8 +3,7 @@ title: Use the CLI
 sidebar_position: 2
 ---
 
-import AsciinemaPlayer from '@site/src/components/AsciinemaPlayer';
-import 'asciinema-player/dist/bundle/asciinema-player.css';
+import CommandPlayer from '../../src/components/CommandPlayer';
 
 # Use the CLI for Microsoft 365
 
@@ -14,7 +13,7 @@ Information in this section will help you understand how the CLI for Microsoft 3
 
 To use CLI for Microsoft 365, execute specific commands directly from the command line.
 
-<AsciinemaPlayer src="/casts/usingCli.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
+<CommandPlayer command="m365 spo site list --type TeamSite" responseFrom="../cmd/spo/site/site-list.mdx" />
 
 <br/>
 
@@ -32,15 +31,15 @@ To list commands available with the CLI for Microsoft 365 type `help` in the CLI
 
 Commands in the CLI for Microsoft 365 are combined into groups. You can list the commands available in the particular group by typing `help <group>`, for example `help spo` to list all commands related to SharePoint Online, or `m365 help spo` directly in your shell.
 
-<AsciinemaPlayer src="/casts/listCommands.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
+<CommandPlayer command="m365 help spo" responseFrom="../../src/components/responses/help-spo.txt" />
 
 ## Get command help
 
 Each command in the CLI for Microsoft 365 comes with help describing the command's purpose, available options and any other relevant details as well as related resources. To get the basic help information with command's description and available options, type `help <command>` or `m365 help <command>` in the shell, for example to get help for the `spo cdn get` command, type in the shell `m365 help spo cdn get`.
 
 To get the complete help information including background information, examples and links to related information, use the `--help` option, for example `m365 spo cdn get --help`. This ability is also useful if you've already typed some options and don't want to lose your input but want to access the help, for example: `m365 spo cdn get --type Private --help`.
 
-<AsciinemaPlayer src="/casts/commandHelp.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
+<CommandPlayer command="m365 spo cdn get --help" responseFrom="../../src/components/responses/spo-cdn-get-help.txt" />
 
 ## Required and optional command options
 

docs/docusaurus.config.ts

@@ -4,6 +4,7 @@ import type { Options as ClientRedirectsOptions } from '@docusaurus/plugin-clien
 import LightCodeTheme from './src/config/lightCodeTheme';
 import DarkCodeTheme from './src/config/darkCodeTheme';
 import definitionList from './src/remark/definitionLists';
+import commandPlayer from './src/remark/commandPlayer';
 
 const config: Config = {
   title: 'CLI for Microsoft 365',
@@ -18,6 +19,14 @@ const config: Config = {
   organizationName: 'pnp',
   projectName: 'cli-microsoft365',
 
+  headTags: [
+    {
+      tagName: 'script',
+      attributes: { type: 'text/javascript' },
+      innerHTML: 'window.gtag=window.gtag||function(){(window.dataLayer=window.dataLayer||[]).push(arguments)};'
+    }
+  ],
+
   i18n: {
     defaultLocale: 'en',
     locales: ['en']
@@ -70,11 +79,11 @@ const config: Config = {
           sidebarPath: './src/config/sidebars.ts',
           editUrl: 'https://github.com/pnp/cli-microsoft365/blob/main/docs',
           showLastUpdateTime: true,
-          remarkPlugins: [definitionList]
+          remarkPlugins: [definitionList, commandPlayer]
         },
         blog: false,
         theme: {
-          customCss: ['./src/scss/Global.module.scss']
+          customCss: ['./src/scss/Global.module.scss', './src/scss/CommandPlayer.module.scss']
         },
         gtag: {
           trackingID: 'G-DH3T88LK5K',

docs/package-lock.json

@@ -33,7 +33,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.9.2",
     "@docusaurus/tsconfig": "^3.9.2",
-    "asciinema-player": "^3.15.1",
+    "baseline-browser-mapping": "^2.10.8",
     "typescript": "^5.9.3"
   },
   "browserslist": {