Skip to content

Fixes asciinema player #7142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jwaegebaert merged 2 commits into from
Feb 25, 2026
Merged

Fixes asciinema player #7142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f19394f
Fixes asciinema player
milanholemans Feb 24, 2026
84a0edc
Update docs/static/casts/listCommands.cast
milanholemans Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/docs/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import 'asciinema-player/dist/bundle/asciinema-player.css';

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="https://asciinema.org/a/445653.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/home.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>

## Installation

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/user-guide/connecting-microsoft-365.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,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="https://asciinema.org/a/445658.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/logout.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>

### Working with SharePoint Online

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/user-guide/installing-cli.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To install the CLI for Microsoft 365, in the command line execute:
npm install -g @pnp/cli-microsoft365
```

<AsciinemaPlayer src="https://asciinema.org/a/445659.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/install.cast" rows={15} idleTimeLimit={3} preload={true} loop autoplay/>

<br />

Expand Down
6 changes: 3 additions & 3 deletions docs/docs/user-guide/using-cli.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,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="https://asciinema.org/a/445654.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/usingCli.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>

<br/>

Expand All @@ -32,15 +32,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="https://asciinema.org/a/445655.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/listCommands.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>

## 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="https://asciinema.org/a/445656.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>
<AsciinemaPlayer src="/casts/commandHelp.cast" rows={20} idleTimeLimit={3} preload={true} loop autoplay/>

## Required and optional command options

Expand Down
6 changes: 4 additions & 2 deletions docs/src/components/AsciinemaPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useBaseUrl from '@docusaurus/useBaseUrl';

type AsciinemaPlayerProps = {
src: string;
Expand All @@ -25,6 +26,7 @@ const AsciinemaPlayerComponent: React.FC<AsciinemaPlayerProps> = ({
}) => {
const ref = useRef<HTMLDivElement>(null);
const [isMounted, setIsMounted] = useState(false);
const resolvedSrc = useBaseUrl(src);

useEffect(() => {
setIsMounted(true);
Expand All @@ -34,12 +36,12 @@ const AsciinemaPlayerComponent: React.FC<AsciinemaPlayerProps> = ({
const loadAsciinemaPlayer = async () => {
if (ref.current && isMounted) {
const AsciinemaPlayerLibrary = await import('asciinema-player');
AsciinemaPlayerLibrary.create(src, ref.current, asciinemaOptions);
AsciinemaPlayerLibrary.create(resolvedSrc, ref.current, asciinemaOptions);
}
};

loadAsciinemaPlayer();
}, [src, asciinemaOptions, isMounted]);
}, [resolvedSrc, asciinemaOptions, isMounted]);

return (
<BrowserOnly fallback={<div />}>
Expand Down
59 changes: 59 additions & 0 deletions docs/static/casts/commandHelp.cast
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
{"version": 2, "width": 128, "height": 27, "timestamp": 1635588371, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.005581, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[1.263005, "o", "m"]
[1.647042, "o", "3"]
[1.998946, "o", "6"]
[2.062793, "o", "5"]
[2.270957, "o", " "]
[2.8071, "o", "s"]
[2.93493, "o", "p"]
[3.118955, "o", "o"]
[3.262872, "o", " "]
[3.478921, "o", "c"]
[3.622771, "o", "d"]
[3.766881, "o", "n"]
[3.910839, "o", " "]
[4.030823, "o", "g"]
[4.134884, "o", "e"]
[4.23085, "o", "t"]
[4.286829, "o", " "]
[4.494863, "o", "-"]
[4.670989, "o", "-"]
[4.902968, "o", "h"]
[5.038794, "o", "e"]
[5.158795, "o", "l"]
[5.326935, "o", "p"]
[5.614985, "o", "\r\n"]
[6.052398, "o", "\r\n"]
[7.002873, "o", "\u001b[37mspo cdn get\u001b[39m\r\n\r\nView current status of the specified Microsoft 365 CDN\r\n\r\n\u001b[37mUsage\u001b[39m\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get \u001b[38;5;102m[\u001b[39m\u001b[38;5;103moptions\u001b[38;5;102m]\u001b[39m\u001b[38;5;103m\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\n\u001b[37mOptions\u001b[39m\r\n\r\n\u001b[36m-t, --type [type]\u001b[39m\r\n Type of CDN to manage. \u001b[36mPublic,Private\u001b[39m. Default \u001b[36mPublic\u001b[39m \r\n\r\n\u001b[36m-h, --help\u001b[39m\r\n output usage information \r\n\r\n\u001b[36m--query [query]\u001b[39m\r\n JMESPath query string. See http://jmespath.org/ for more information and examples \r\n\r\n\u001b[36m-o, --output [output]\u001b[39m\r\n Output type. \u001b["]
[7.00305, "o", "36mjson,text\u001b[39m. Default \u001b[36mtext\u001b[39m \r\n\r\n\u001b[36m--verbose\u001b[39m\r\n Runs command with verbose logging \r\n\r\n\u001b[36m--debug\u001b[39m\r\n Runs command with debug logging \r\n\r\n\u001b[48;5;197m\u001b[1m \u001b[22m\u001b[49m\u001b[48;5;16m\u001b[37m Important \u001b[39m\u001b[49m\u001b[48;5;197m\u001b[1m \u001b[22m\u001b[49m\r\n To use this command you have to have permissions to access the tenant admin site.\r\n\r\n\u001b[37mRemarks\u001b[39m\r\n\r\nUsing the \u001b[36m-t, --type\u001b[39m option you can choose whether you want to manage the settings of the Public (default) or Private CDN. If you don't use the option, the command will use the Public CDN.\r\n\r\n\u001b[37mExamples\u001b[39m\r\n\r\nShow if the Public CDN is currently enabled or not\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m "]
[7.003147, "o", " \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\nShow if the Private CDN is currently enabled or not\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get --type Private\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\n\u001b[37mMore information\u001b[39m\r\n\r\n- General availability of Microsoft 365 CDN: https://dev.office.com/blogs/general-availability-of-office-365-cdn\r\n"]
[7.009051, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[8.327013, "o", "m"]
[8.566857, "o", "3"]
[8.934857, "o", "6"]
[9.00689, "o", "5"]
[9.246973, "o", " "]
[10.023023, "o", "h"]
[10.126761, "o", "e"]
[10.206926, "o", "l"]
[10.390776, "o", "p"]
[10.550896, "o", " "]
[10.702825, "o", "s"]
[10.814807, "o", "p"]
[10.990776, "o", "o"]
[11.134881, "o", " "]
[11.950999, "o", "c"]
[12.118778, "o", "d"]
[12.230816, "o", "n"]
[12.390844, "o", " "]
[12.550821, "o", "g"]
[12.65482, "o", "e"]
[12.758793, "o", "t"]
[12.95889, "o", "\r\n"]
[13.405237, "o", "\r\n"]
[14.035489, "o", "\u001b[37mspo cdn get\u001b[39m\r\n\r\nView current status of the specified Microsoft 365 CDN\r\n\r\n\u001b[37mUsage\u001b[39m\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get \u001b[38;5;102m[\u001b[39m\u001b[38;5;103moptions\u001b[38;5;102m]\u001b[39m\u001b[38;5;103m\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\n\u001b[37mOptions\u001b[39m\r\n\r\n\u001b[36m-t, --type [type]\u001b[39m\r\n Type of CDN to manage. \u001b[36mPublic,Private\u001b[39m. Default \u001b[36mPublic\u001b[39m \r\n\r\n\u001b[36m-h, --help\u001b[39m\r\n output usage information \r\n\r\n\u001b[36m--query [query]\u001b[39m\r\n JMESPath query string. See http://jmespath.org/ for more information and examples \r\n\r\n\u001b[36m-o, --output [output]\u001b[39m\r\n Output type. \u001b["]
[14.035704, "o", "36mjson,text\u001b[39m. Default \u001b[36mtext\u001b[39m \r\n\r\n\u001b[36m--verbose\u001b[39m\r\n Runs command with verbose logging \r\n\r\n\u001b[36m--debug\u001b[39m\r\n Runs command with debug logging \r\n\r\n\u001b[48;5;197m\u001b[1m \u001b[22m\u001b[49m\u001b[48;5;16m\u001b[37m Important \u001b[39m\u001b[49m\u001b[48;5;197m\u001b[1m \u001b[22m\u001b[49m\r\n To use this command you have to have permissions to access the tenant admin site.\r\n\r\n\u001b[37mRemarks\u001b[39m\r\n\r\nUsing the \u001b[36m-t, --type\u001b[39m option you can choose whether you want to manage the settings of the Public (default) or Private CDN. If you don't use the option, the command will use the Public CDN.\r\n\r\n\u001b[37mExamples\u001b[39m\r\n\r\nShow if the Public CDN is currently enabled or not\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m "]
[14.035865, "o", " \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\nShow if the Private CDN is currently enabled or not\r\n\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103mm365 spo cdn get --type Private\u001b[39m\u001b[49m\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\u001b[48;5;230m\u001b[38;5;103m \u001b[39m\u001b[49m\r\n\r\n\u001b[37mMore information\u001b[39m\r\n\r\n- General availability of Microsoft 365 CDN: https://dev.office.com/blogs/general-availability-of-office-365-cdn\r\n"]
[14.041707, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[16.094892, "o", "exit\r\n"]
62 changes: 62 additions & 0 deletions docs/static/casts/home.cast
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{"version": 2, "width": 128, "height": 27, "timestamp": 1635587824, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.005576, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[1.10731, "o", "m"]
[1.451298, "o", "3"]
[1.723263, "o", "6"]
[1.787183, "o", "5"]
[1.891131, "o", " "]
[2.027241, "o", "l"]
[2.211216, "o", "o"]
[2.283149, "o", "g"]
[2.43511, "o", "i"]
[2.52314, "o", "n"]
[2.74739, "o", "\r\n"]
[3.765533, "o", "\"To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code DSQ73T6BS to authenticate.\"\r\n"]
[14.618395, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[15.70723, "o", "m"]
[15.963249, "o", "3"]
[16.339259, "o", "6"]
[16.379164, "o", "5"]
[16.523239, "o", " "]
[17.05922, "o", "s"]
[17.219157, "o", "p"]
[17.403233, "o", "o"]
[17.58713, "o", " "]
[18.611273, "o", "c"]
[18.827161, "o", "d"]
[18.94715, "o", "n"]
[19.123236, "o", " "]
[19.235137, "o", "g"]
[19.339129, "o", "e"]
[19.435127, "o", "t"]
[19.579169, "o", "\r\n"]
[22.037077, "o", "\u001b[33mtrue\u001b[39m\r\n"]
[22.039564, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[23.32328, "o", "m"]
[23.755189, "o", "3"]
[24.10721, "o", "6"]
[24.16313, "o", "5"]
[24.307162, "o", " "]
[25.099239, "o", "s"]
[25.243099, "o", "p"]
[25.427257, "o", "o"]
[25.56314, "o", " "]
[25.771181, "o", "c"]
[26.011213, "o", "d"]
[26.123064, "o", "n"]
[26.275253, "o", " "]
[26.915238, "o", "o"]
[27.083135, "o", "r"]
[27.219084, "o", "i"]
[27.331025, "o", "g"]
[27.403063, "o", "i"]
[27.49104, "o", "n"]
[27.835269, "o", " "]
[27.971116, "o", "l"]
[28.139084, "o", "i"]
[28.171128, "o", "s"]
[28.315048, "o", "t"]
[28.523114, "o", "\r\n"]
[29.326273, "o", "[\r\n \"*/MASTERPAGE\",\r\n \"*/STYLE LIBRARY\",\r\n \"*/CLIENTSIDEASSETS\"\r\n]\r\n"]
[29.328663, "o", "\u001b]0;root@DESKTOP-5PARO7S: ~\u0007root@DESKTOP-5PARO7S:~# "]
[31.22712, "o", "exit\r\n"]
Loading