Add the ability to overwrite the slide container, 0.11.0.

nkzw-tech · Feb 19, 2024 · fa5802d · fa5802d
1 parent d7fd757
commit fa5802d
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 37 deletions.
diff --git a/examples/tokyo/package.json b/examples/tokyo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/remdx-tokyo-example",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "private": true,
   "repository": {

diff --git a/examples/tokyo/slides.re.mdx.d.ts b/examples/tokyo/slides.re.mdx.d.ts
diff --git a/packages/create-remdx/package.json b/packages/create-remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",

diff --git a/packages/create-remdx/template/slides.re.mdx.d.ts b/packages/create-remdx/template/slides.re.mdx.d.ts
diff --git a/packages/remdx/client.d.ts b/packages/remdx/client.d.ts
@@ -2,6 +2,7 @@ declare module '*.re.mdx' {
   let slides: ReadonlyArray<import('./types.jsx').ReMDXSlide>;
 
   export let Components: import('./types.jsx').MDXComponents | undefined;
+  export let Container: import('./types.jsx').SlideContainer | undefined;
   export let Themes: import('./types.jsx').Themes | undefined;
   export let Transitions:
     | Record<string, import('./types.jsx').SlideTransition>

diff --git a/packages/remdx/package.json b/packages/remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",

diff --git a/packages/remdx/src/slide.tsx b/packages/remdx/src/slide.tsx
@@ -9,14 +9,17 @@ import {
 } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useSwipeable } from 'react-swipeable';
-import { SlideTransition } from '../types.tsx';
+import { SlideContainer, SlideTransition } from '../types.tsx';
 import { DeckContext } from './deck.tsx';
 import { GOTO_FINAL_STEP } from './hooks/use-deck-state.tsx';
 import { Transitions } from './transitions.tsx';
 
 export default function Slide({
   children,
   className,
+  container: Container = ({ children, style }) => (
+    <div style={style}>{children}</div>
+  ),
   id,
   image,
   padding = 48,
@@ -25,6 +28,7 @@ export default function Slide({
 }: {
   children: ReactNode;
   className?: string;
+  container?: SlideContainer;
   id: number;
   image?: string;
   padding?: string | number;
@@ -226,7 +230,7 @@ export default function Slide({
         }}
         {...swipeHandler}
       >
-        <div
+        <Container
           style={{
             display: 'flex',
             flex: 1,
@@ -236,7 +240,7 @@ export default function Slide({
           }}
         >
           <Suspense>{children}</Suspense>
-        </div>
+        </Container>
       </div>
     </animated.div>
   );

diff --git a/packages/remdx/src/slidesToComponent.tsx b/packages/remdx/src/slidesToComponent.tsx
@@ -6,12 +6,19 @@ import Slide from './slide.tsx';
 import { Transitions as DefaultTransitions } from './transitions.tsx';
 
 export default async function slidesToComponent(module: Promise<ReMDXModule>) {
-  const { Components, Themes, Transitions, default: slides } = await module;
+  const {
+    Components,
+    Container,
+    Themes,
+    Transitions,
+    default: slides,
+  } = await module;
   return (
     <MDXProvider components={{ ...DefaultComponents, ...Components }}>
       <Deck
         slides={slides.map(({ Component, data }, index) => (
           <Slide
+            container={Container}
             id={index}
             image={data?.image}
             key={index}

diff --git a/packages/remdx/types.tsx b/packages/remdx/types.tsx
@@ -1,24 +1,33 @@
 import type { MDXComponents as _MDXComponents } from 'mdx/types.js';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export type MDXComponents = _MDXComponents;
 
 export type Themes = Record<string, CSSProperties>;
 
-export type SlideTransition = {
+export type SlideTransition = Readonly<{
   enter?: CSSProperties;
   from?: CSSProperties;
   leave?: CSSProperties;
-};
+}>;
 
-export type ReMDXSlide = {
+export type SlideContainer = ({
+  children,
+  style,
+}: {
+  children: JSX.Element;
+  style: CSSProperties;
+}) => ReactNode;
+
+export type ReMDXSlide = Readonly<{
   Component: () => JSX.Element;
   data: Record<string, string>;
-};
+}>;
 
-export type ReMDXModule = {
+export type ReMDXModule = Readonly<{
   Components?: _MDXComponents;
+  Container?: SlideContainer;
   Themes?: Themes;
   Transitions?: Record<string, SlideTransition>;
   default: ReadonlyArray<ReMDXSlide>;
-};
+}>;
diff --git a/packages/vite-plugin-remdx/package.json b/packages/vite-plugin-remdx/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nkzw/vite-plugin-remdx",
   "description": "Beautiful Minimalist React & MDX Presentations",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
   "repository": {
     "type": "git",