`--` syntax wrapped with Prettier proseWrap option

[Karl Horky]

The -- syntax for adding front matter to each slide is made invalid by the Prettier Prose Wrap option, when it is set to 'never' or 'always':

prettier.config.mjs

/** @type {import('prettier').Config} */
const prettierConfig = {
  proseWrap: 'always', // 💥 destroys in-slide front matter
  singleQuote: true,
};

export default prettierConfig;

Before

import sights from './sights.tsx';

export { Components } from './Components.tsx';
export { Themes } from './Themes.tsx';

--
image: tokyo.jpg
--

# Welcome to ReMDXx

---

# Slide 2

After

import sights from './sights.tsx';

export { Components } from './Components.tsx';
export { Themes } from './Themes.tsx';

-- image: tokyo.jpg --

# Welcome to ReMDXx

---

# Slide 2

Kapture.2024-02-10.at.15.12.58.mp4

This causes the slide front matter to become visible text in the slide:

[Karl Horky]

Workaround

Add a new Prettier config file in the slide deck directory without a proseWrap option:

slides/prettier.config.mjs

/** @type {import('prettier').Config} */
const prettierConfig = {
  singleQuote: true,
};

export default prettierConfig;

[Christoph Nakazawa]

This is not really a ReMDX concern since it pertains to how prettier formats Markdown. The template doesn't ship with prettier at this time, so unless we add it to the template it doesn't really make sense to ship a default prettier config.

I actually have to admit I didn't know this was configurable. I ran into this a few times while making slide decks. My recommendation is to always leave an empty newline before and after config entries.

[Karl Horky]

Workaround 2

always leave an empty newline before and after config entries

Ah great! So this is another workaround - adding empty lines after the opening -- and before the closing --:

 import sights from './sights.tsx';

 export { Components } from './Components.tsx';
 export { Themes } from './Themes.tsx';

 --
+
 image: tokyo.jpg
+
 --

 # Welcome to ReMDXx

 ---

 # Slide 2

[Karl Horky]

Also opened a PR to switch the template to also use these newlines:

• #15