Add slide transition support and custom layout options

Author: estruyf

CHANGELOG.md

@@ -2,8 +2,9 @@
 
 ## [0.0.87] - 2025-03-xx
 
-- [#74](https://github.com/estruyf/vscode-demo-time/issues/74): Support for custom slide layouts
+- [#74](https://github.com/estruyf/vscode-demo-time/issues/74): Support for custom slide layouts with the `customLayout` property
 - [#75](https://github.com/estruyf/vscode-demo-time/issues/75): Provide a filename for the PDF export
+- [#76](https://github.com/estruyf/vscode-demo-time/issues/76): Added slide transition support with the `transition` property
 
 ## [0.0.86] - 2025-03-20
 

src/constants/SlideTransition.ts

@@ -0,0 +1,11 @@
+export enum SlideTransition {
+  fadeIn = "fadeIn",
+  slideRight = "slideRight",
+  slideLeft = "slideLeft",
+  slideUp = "slideUp",
+  slideDown = "slideDown",
+  zoomIn = "zoomIn",
+  zoomOut = "zoomOut",
+  rotateIn = "rotateIn",
+  rotateOut = "rotateOut",
+}

src/constants/index.ts

@@ -4,5 +4,6 @@ export * from "./ContextKeys";
 export * from "./General";
 export * from "./SlideLayout";
 export * from "./SlideTheme";
+export * from "./SlideTransition";
 export * from "./StateKeys";
 export * from "./WebViewMessages";

src/models/SlideMetadata.ts

@@ -0,0 +1,11 @@
+import { SlideLayout, SlideTheme, SlideTransition } from "../constants";
+
+export interface SlideMetadata {
+  theme?: SlideTheme;
+  layout?: SlideLayout;
+  transition?: SlideTransition;
+  customTheme?: string;
+  customLayout?: string;
+
+  [key: string]: any;
+}

src/models/index.ts

@@ -3,5 +3,6 @@ export * from "./CommandType";
 export * from "./DemoFileCache";
 export * from "./Demos";
 export * from "./ShellSetting";
+export * from "./SlideMetadata";
 export * from "./Subscription";
 export * from "./Theme";

src/preview/components/Markdown.tsx

@@ -4,9 +4,10 @@ import { transformImageUrl, twoColumnFormatting } from '../utils';
 import rehypePrettyCode from 'rehype-pretty-code';
 import { usePrevious } from '../hooks/usePrevious';
 import { messageHandler } from '@estruyf/vscode/dist/client/webview';
-import { WebViewMessages } from '../../constants';
+import { SlideTransition, WebViewMessages } from '../../constants';
 import { renderToString } from 'react-dom/server';
 import { convertTemplateToHtml } from '../../utils/convertTemplateToHtml';
+import { SlideMetadata } from '../../models';
 
 export interface IMarkdownProps {
   content?: string;
@@ -29,6 +30,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
   const [isReady, setIsReady] = React.useState(false);
   const [customTheme, setCustomTheme] = React.useState<string | undefined>(undefined);
   const [customLayout, setCustomLayout] = React.useState<string | undefined>(undefined);
+  const [transition, setTransition] = React.useState<SlideTransition | undefined>(undefined);
   const [template, setTemplate] = React.useState<string | undefined>(undefined);
 
   const {
@@ -55,7 +57,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
 
   const prevMatter = usePrevious(JSON.stringify(matter));
 
-  const updateCustomLayout = React.useCallback((layout: string, metadata: any) => {
+  const updateCustomLayout = React.useCallback((metadata: SlideMetadata, layout?: string) => {
     if (layout) {
       messageHandler.request<string>(WebViewMessages.toVscode.getFileContents, layout).then(async (templateHtml) => {
         if (templateHtml) {
@@ -78,7 +80,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     }
   }, [content, markdown]);
 
-  const updateCustomThemePath = React.useCallback((customThemePath: string) => {
+  const updateCustomThemePath = React.useCallback((customThemePath?: string) => {
     if (!customThemePath) {
       setCustomTheme(undefined);
       return;
@@ -108,10 +110,11 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     setIsReady(false);
     setCustomLayout(undefined);
     setCustomTheme(undefined);
+    setTransition(matter?.transition || undefined);
     setTemplate(undefined);
 
     const cLayout = matter?.customLayout || undefined;
-    updateCustomLayout(cLayout, matter);
+    updateCustomLayout(matter, cLayout);
 
     updateTheme(matter?.theme || "default");
     updateLayout(cLayout || matter?.layout || "default");
@@ -151,7 +154,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
       <>
         {customTheme && <link href={customTheme} rel="stylesheet" />}
 
-        <div className='slide__content__custom' dangerouslySetInnerHTML={{ __html: template }} />
+        <div className={`slide__content__custom ${transition}`} dangerouslySetInnerHTML={{ __html: template }} />
       </>
     );
   }
@@ -160,7 +163,7 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({
     <>
       {customTheme && <link href={customTheme} rel="stylesheet" />}
 
-      <div className='slide__content__inner'>{markdown}</div>
+      <div className={`slide__content__inner ${transition}`}>{markdown}</div>
     </>
   );
 };

src/preview/components/MarkdownPreview.tsx

@@ -70,7 +70,7 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
       <div
         key={crntFilePath}
         ref={ref}
-        className={`slide fade-in ${theme || "default"} relative w-full h-full overflow-hidden`}
+        className={`slide ${theme || "default"} relative w-full h-full overflow-hidden`}
         onMouseEnter={() => setShowControls(true)}
         onMouseLeave={() => setShowControls(false)}
         onMouseMove={handleMouseMove}

src/preview/hooks/useRemark.tsx

@@ -4,6 +4,7 @@ import { type ReactElement, useCallback, useState } from 'react';
 import { type Options as RemarkParseOptions } from 'remark-parse';
 import { type PluggableList } from 'unified';
 import { transformMarkdown } from '../../utils/transformMarkdown';
+import { SlideMetadata } from '../../models';
 
 
 export type UseRemarkOptions = {
@@ -28,12 +29,12 @@ export const useRemark = ({
   markdown: null | ReactElement,
   processMarkdown: (source: string, customPlugins?: PluggableList) => Promise<{
     reactContent: ReactElement | null,
-    metadata: any | null,
+    metadata: SlideMetadata | null,
   }>,
   setMarkdown: (source: string, customPlugins?: PluggableList) => void,
   getMarkdown: (contents: string) => string,
   getFrontMatter: (contents: string) => string,
-  matter: null | any,
+  matter: null | SlideMetadata,
 } => {
   const [reactContent, setReactContent] = useState<null | ReactElement>(null);
   const [metadata, setMetadata] = useState<null | any>(null);
@@ -51,7 +52,7 @@ export const useRemark = ({
    */
   const processMarkdown = async (source: string, customPlugins?: PluggableList): Promise<{
     reactContent: ReactElement | null,
-    metadata: any | null,
+    metadata: SlideMetadata | null,
   }> => {
     try {
       const vfile = await transformMarkdown(source, remarkParseOptions, remarRehypeOptions, remarkPlugins, [...rehypePlugins, ...(customPlugins || [])], rehypeReactOptions);

src/preview/styles.css

@@ -2,6 +2,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+:root {
+  --demotime-transition: 0.5s;
+}
+
 html,
 body,
 #root {
@@ -46,6 +50,7 @@ pre code {
   }
 }
 
+/* Transitions */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -55,8 +60,120 @@ pre code {
   }
 }
 
-.fade-in {
-  animation: fadeIn 300ms ease-in-out;
+@keyframes slideLeft {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  from {
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateOut {
+  from {
+    transform: rotate(180deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation: fadeIn var(--demotime-transition) ease-in-out;
+}
+
+.slideLeft {
+  animation: slideLeft var(--demotime-transition) ease-in-out;
+}
+
+.slideRight {
+  animation: slideRight var(--demotime-transition) ease-in-out;
+}
+
+.slideUp {
+  animation: slideUp var(--demotime-transition) ease-in-out;
+}
+
+.slideDown {
+  animation: slideDown var(--demotime-transition) ease-in-out;
+}
+
+.zoomIn {
+  animation: zoomIn var(--demotime-transition) ease-in-out;
+}
+
+.zoomOut {
+  animation: zoomOut var(--demotime-transition) ease-in-out;
+}
+
+.rotateIn {
+  animation: rotateIn var(--demotime-transition) ease-in-out;
+}
+
+.rotateOut {
+  animation: rotateOut var(--demotime-transition) ease-in-out;
 }
 
 /* Layouts */

src/services/PdfExportService.ts

@@ -53,22 +53,32 @@ export class PdfExportService {
           const page = await context.newPage();
 
           // Get all demo files
-          const demoFiles = await FileProvider.getFiles();
+          let demoFiles = await FileProvider.getFiles();
           if (!demoFiles) {
             Notifications.error("No demo files found.");
             return;
           }
 
+          // Sort the demo files by their paths
+          demoFiles = Object.keys(demoFiles)
+            .sort()
+            .reduce((sortedFiles, key) => {
+              if (demoFiles) {
+                sortedFiles[key] = demoFiles[key];
+              }
+              return sortedFiles;
+            }, {} as typeof demoFiles);
+
           // Get all slide actions
           const slideActions: Step[] = [];
           for (const demoFile of Object.values(demoFiles)) {
-            demoFile.demos.forEach((demo) => {
-              demo.steps.forEach((step) => {
+            for (const demo of demoFile.demos) {
+              for (const step of demo.steps) {
                 if (step.action === Action.OpenSlide && step.path) {
                   slideActions.push(step);
                 }
-              });
-            });
+              }
+            }
           }
 
           // Retrieving slide contents