diff --git a/docs/blog/2024-05-08-nx-19-release.md b/docs/blog/2024-05-08-nx-19-release.md index ad6185bffb..60724dd843 100644 --- a/docs/blog/2024-05-08-nx-19-release.md +++ b/docs/blog/2024-05-08-nx-19-release.md @@ -82,7 +82,7 @@ Notice how all tasks are now appropriately grouped in the `E2E (CI)` group! You can also find the same enhancements in Nx Cloud. Below is a view of all tasks in the [CI pipeline](https://staging.nx.app/runs/ctbAZfiLy3): -[![Grouped e2e tests in Nx Cloud](/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif)](https://staging.nx.app/runs/ctbAZfiLy3) +{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" link="https://staging.nx.app/runs/ctbAZfiLy3" /%} Notice how all e2e groups are collapsed by default to give a concise view, while allowing you to expand to see how each individual task is progressing! @@ -160,7 +160,7 @@ Since Nx 18 release, we also started using Project Crystal inside of the Nx repo You can find a full list of fixes and features applied in this major release [here](https://github.com/nrwl/nx/releases/tag/19.0.0). -[![Changelog for Nx 19](/blog/images/2024-05-08/fixes.gif)](https://github.com/nrwl/nx/releases/tag/19.0.0) +{% video-player src="/documentation/blog/media/2024-05-08/fixes.mp4" alt="A display listing the Github changelog" /%} With Project Crystal landed now, we're also adjusting our priorities to place a higher importance on stability. You should see this reflected in Nx 19. @@ -182,7 +182,7 @@ In February, we launched two big enhancements to Nx Cloud: the [Atomizer](/ci/fe Since then, the Atomizer has received a nice UI update (as we had seen earlier): -[![Grouped e2e tests in Nx Cloud](/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif)](https://staging.nx.app/runs/ctbAZfiLy3) +{% video-player src="/documentation/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4" alt="Showing the Atomizer in Nx Cloud" link="https://staging.nx.app/runs/ctbAZfiLy3" /%} Since February, we also revamped our task distribution algorithms. This has resulted in a 5-20% (depending on the repo) increase in both speed and cost efficiency for our users. diff --git a/docs/blog/images/2024-05-08/fixes.gif b/docs/blog/images/2024-05-08/fixes.gif deleted file mode 100644 index 4f5664ae7f..0000000000 Binary files a/docs/blog/images/2024-05-08/fixes.gif and /dev/null differ diff --git a/docs/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif b/docs/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif deleted file mode 100644 index 475166382b..0000000000 Binary files a/docs/blog/images/2024-05-08/nx-cloud-atomizer-groupings.gif and /dev/null differ diff --git a/docs/blog/media/2024-05-08/fixes.mp4 b/docs/blog/media/2024-05-08/fixes.mp4 new file mode 100644 index 0000000000..4a789b3373 Binary files /dev/null and b/docs/blog/media/2024-05-08/fixes.mp4 differ diff --git a/docs/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4 b/docs/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4 new file mode 100644 index 0000000000..121a512e05 Binary files /dev/null and b/docs/blog/media/2024-05-08/nx-cloud-atomizer-groupings.mp4 differ diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts index a69d776398..e0b23a90af 100644 --- a/nx-dev/ui-markdoc/src/index.ts +++ b/nx-dev/ui-markdoc/src/index.ts @@ -57,6 +57,7 @@ import { Pill } from './lib/tags/pill.component'; import { pill } from './lib/tags/pill.schema'; import { fence } from './lib/nodes/fence.schema'; import { FenceWrapper } from './lib/nodes/fence-wrapper.component'; +import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component'; // TODO fix this export export { GithubRepository } from './lib/tags/github-repository.component'; @@ -83,6 +84,7 @@ export const getMarkdocCustomConfig = ( graph, iframe, 'install-nx-console': installNxConsole, + 'video-player': videoPlayer, persona, personas, 'project-details': projectDetails, @@ -127,6 +129,7 @@ export const getMarkdocCustomConfig = ( Tweet, YouTube, VideoLink, + VideoPlayer, // SvgAnimation, }, }); diff --git a/nx-dev/ui-markdoc/src/lib/tags/video-player.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/video-player.component.tsx new file mode 100644 index 0000000000..6e6212adc8 --- /dev/null +++ b/nx-dev/ui-markdoc/src/lib/tags/video-player.component.tsx @@ -0,0 +1,42 @@ +import { VideoLoop } from './video-loop.component'; +import { Schema } from '@markdoc/markdoc'; + +export const videoPlayer: Schema = { + render: 'VideoPlayer', + attributes: { + src: { + type: 'String', + required: true, + }, + alt: { + type: 'String', + required: false, + }, + link: { + type: 'String', + required: false, + }, + }, +}; + +export function VideoPlayer({ + src, + alt, + link, +}: { + src: string; + alt: string; + link: string; +}): JSX.Element { + return ( +
+ {link ? ( + + + + ) : ( + + )} +
+ ); +}