docs(nx-dev): add blog article about new Nx TS experience

docs/blog/2023-10-13-nx-conf-2023-recap.md

@@ -199,7 +199,7 @@ The training program is there to tackle the bottleneck of missing knowledge, rig
 
 Finally the impact measurement; Nx Cloud already has graphs to measure how much time got saved in CI due to the improvements made. Michael mentions they go further, also measuring communication and productivity.
 
-An interesting part is also how they perform the repository synching (from polyrepo to monorepo). They leverage an Nx plugin that
+An interesting part is also how they perform the repository syncing (from polyrepo to monorepo). They leverage an Nx plugin that
 
 - contains shared build logic
 - has rules to run that produce actionable feedback about what is needed to sync/align the polyrepo repository s.t. it can be merged into the monorepo

nx-dev/ui-markdoc/src/lib/tags/video-player.component.tsx

@@ -16,6 +16,11 @@ export const videoPlayer: Schema = {
       type: 'String',
       required: false,
     },
+    showDescription: {
+      type: 'Boolean',
+      required: false,
+      default: false,
+    },
     showControls: {
       type: 'Boolean',
       required: false,
@@ -38,38 +43,53 @@ export function VideoPlayer({
   src,
   alt,
   link,
+  showDescription = false,
   showControls,
   autoPlay,
   loop,
 }: {
   src: string;
   alt: string;
   link?: string;
+  showDescription?: boolean;
   showControls?: boolean;
   autoPlay?: boolean;
   loop?: boolean;
 }): JSX.Element {
   return (
     <div className="mb-4 overflow-x-auto">
       <div className="rounded-lg border border-slate-200 bg-slate-50/50 dark:border-slate-700 dark:bg-slate-800/60">
-        {link ? (
-          <a href={link} target="_blank" rel="noreferrer">
+        <div
+          className={
+            showDescription && alt
+              ? 'overflow-hidden rounded-t-lg'
+              : 'overflow-hidden rounded-lg'
+          }
+        >
+          {link ? (
+            <a href={link} target="_blank" rel="noreferrer">
+              <ClientVideo
+                src={src}
+                alt={alt}
+                showControls={showControls}
+                autoPlay={autoPlay}
+                loop={loop}
+              />
+            </a>
+          ) : (
             <ClientVideo
               src={src}
               alt={alt}
               showControls={showControls}
               autoPlay={autoPlay}
               loop={loop}
             />
-          </a>
-        ) : (
-          <ClientVideo
-            src={src}
-            alt={alt}
-            showControls={showControls}
-            autoPlay={autoPlay}
-            loop={loop}
-          />
+          )}
+        </div>
+        {showDescription && alt && (
+          <div className="py-2 text-center text-sm text-slate-600 dark:text-slate-400">
+            {alt}
+          </div>
         )}
       </div>
     </div>