diff --git a/docs/extensions.md b/docs/extensions.md index 41927981..05dafcc5 100644 --- a/docs/extensions.md +++ b/docs/extensions.md @@ -1,7 +1,7 @@ --- title: Extensions -order: 8 -sidebar_position: 8 +order: 9 +sidebar_position: 9 --- # Third Party Extensions diff --git a/docs/faq.md b/docs/faq.md index f2d5c33a..e8968081 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,7 +1,7 @@ --- title: FAQ -order: 9 -sidebar_position: 9 +order: 10 +sidebar_position: 10 --- # Frequently Asked Questions diff --git a/docs/slide-layouts.md b/docs/jsx-slide-layouts.md similarity index 99% rename from docs/slide-layouts.md rename to docs/jsx-slide-layouts.md index f3ad9082..271a9b7f 100644 --- a/docs/slide-layouts.md +++ b/docs/jsx-slide-layouts.md @@ -1,5 +1,5 @@ --- -title: Slide Layouts +title: JSX Slide Layouts order: 6 sidebar_position: 6 --- diff --git a/docs/md-slide-layouts.md b/docs/md-slide-layouts.md new file mode 100644 index 00000000..e9a246a4 --- /dev/null +++ b/docs/md-slide-layouts.md @@ -0,0 +1,89 @@ +--- +title: Markdown Slide Layouts +order: 7 +sidebar_position: 7 +--- + +# Markdown Slide Layouts + +Spectacle supports a number of layout containers for use in your Markdown slides. These containers are designed to enable more complex layouts previously not doable in Markdown without the usage of importing JSX elements into MDX. + +Spectacle uses `---` (three dashes) to delimit each slide in a Markdown file. Spectacle adds supports for a JSON-based configuration object with the slide delimiter in your Markdown file. This configuration object is used to define the layout of the slide. Currently, two types of layouts are support are `center` and `columns`. + +:::info + +Markdown-annotated slide layouts is available only with `.md` files. This feature is not available with `.mdx` files where you can use JSX-based layout primitives. + +::: + +## Columns Layout + +The columns layout is used to create a row-based column layout. The columns layout is defined by the following JSON object: + +```json +{ "layout" : "columns" } +``` + +Each column section is defined by a `::section` delimiter. The number of columns is determined by the number of `::section` annotations. + +![Column Layout Example](https://res.cloudinary.com/formidablelabs/image/upload/c_scale,w_600/v1700171469/spectacle-assets/Screenshot_2023-11-16_at_3.49.29_PM.png) + +```md + +--- { "layout" : "columns" } + +::section + +![Gastly](gastly.png) + +::section + +![Haunter](haunter.png) + +--- + +# Ghost-type Pokémon + +The Ghost-type (ゴーストタイプ Gosuto taipu in Japanese) is one of the eighteen Pokémon elemental types. + +``` + +This layout has the underlying JSX structure and divides each section into an array: + +```jsx + + {sectionsArray} + +``` + +## Center Layout + +The center layout is used to create a single column layout with the content centered. The center layout is defined by the following JSON object: + +```json +{ "layout" : "center" } +``` + +![Center Layout Example](https://res.cloudinary.com/formidablelabs/image/upload/c_scale,w_600/v1700171467/spectacle-assets/Screenshot_2023-11-16_at_3.46.39_PM.png) + +```md + +--- { "layout" : "center" } + +![Gengar](gengar.png) + +--- + +# Gengar + +Gengar is a dark purple, bipedal Pokémon with a roundish body. It has red eyes and a wide mouth that is usually curled into a sinister grin. Multiple spikes cover its back, and it has large pointed ears. Its arms and legs are short with three digits on both its hands and feet. It also has a stubby tail. + +``` + +This layout has the underlying JSX structure and passes all the slide content as chidren: + +```jsx + + {content} + +``` \ No newline at end of file diff --git a/docs/themes.md b/docs/themes.md index 6bb770f1..dc43be62 100644 --- a/docs/themes.md +++ b/docs/themes.md @@ -1,7 +1,7 @@ --- title: Themes -order: 7 -sidebar_position: 7 +order: 8 +sidebar_position: 8 --- # Theme System