### Create New Example Application (JavaScript)

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

A sequence of commands to create, install, build, and start a new example application using JavaScript. This cleans, creates, installs dependencies, builds, and starts the dev server.

```shell
# JavaScript
$ pnpm run --filter ./packages/create-spectacle examples:jsx:clean && \
  pnpm run --filter ./packages/create-spectacle examples:jsx:create && \
  pnpm run --filter ./packages/create-spectacle examples:jsx:install && \
  pnpm run --filter ./packages/create-spectacle examples:jsx:build && \
  pnpm run --filter ./packages/create-spectacle examples:jsx:start
```

--------------------------------

### Run All Example Watchers

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts development servers for all example presentations simultaneously.

```sh
# Start **ALL** the example watchers at the same time!
$ pnpm start:examples
```

--------------------------------

### Create New Example Application (One Page HTML)

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Commands to create and start a new one-page HTML example application. This process skips the build step and directly starts the development server.

```shell
# One Page (HTML-only, no build step)
$ pnpm run --filter ./packages/create-spectacle examples:onepage:clean && \
  pnpm run --filter ./packages/create-spectacle examples:onepage:create && \
  pnpm run --filter ./packages/create-spectacle examples:onepage:start
```

--------------------------------

### Create New Example Application (TypeScript)

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

A sequence of commands to create, install, build, and start a new example application using TypeScript. This cleans, creates, installs dependencies, builds, and starts the dev server.

```shell
# TypeScript
$ pnpm run --filter ./packages/create-spectacle examples:tsx:clean && \
  pnpm run --filter ./packages/create-spectacle examples:tsx:create && \
  pnpm run --filter ./packages/create-spectacle examples:tsx:install && \
  pnpm run --filter ./packages/create-spectacle examples:tsx:build && \
  pnpm run --filter ./packages/create-spectacle examples:tsx:start
```

--------------------------------

### Run MDX Example Dev Server

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts the development server for the MDX example. Open http://localhost:3300/ in your browser.

```sh
# MDX demo app (in two different terminals)
$ pnpm start:mdx
$ open http://localhost:3300/
```

--------------------------------

### Run Markdown Example Dev Server

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts the development server for the Markdown example. Open http://localhost:3200/ in your browser.

```sh
# Markdown demo app (in two different terminals)
$ pnpm start:md
$ open http://localhost:3200/
```

--------------------------------

### Run JavaScript Example Dev Server

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts the development server for the JavaScript example. Open http://localhost:3000/ in your browser.

```sh
# JavaScript demo app (in two different terminals)
$ pnpm start:js
$ open http://localhost:3000/
```

--------------------------------

### Run One-Page Example

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts the one-page example, which generates an HTML file. Open examples/one-page/index.html in your browser.

```sh
# One-page (no build, HTML page only) demo app (in two different terminals)
$ pnpm start:one-page
$ open examples/one-page/index.html
```

--------------------------------

### Manual Spectacle Installation and Basic Deck

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/index.mdx

Install Spectacle using npm and set up a basic presentation structure in your main entry file. This example demonstrates the minimal setup required to render a simple slide.

```tsx
import { Deck, Slide, Heading, DefaultTemplate } from 'spectacle';

function App() {
  return (
    <Deck template={<DefaultTemplate />}>
      <Slide>
        <Heading>Welcome to Spectacle</Heading>
      </Slide>
    </Deck>
  );
}

export default App;

```

--------------------------------

### Run TypeScript Example Dev Server

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Starts the development server for the TypeScript example. Open http://localhost:3100/ in your browser.

```sh
# TypeScript demo app (in two different terminals)
$ pnpm start:ts
$ open http://localhost:3100/
```

--------------------------------

### MDX File Setup for Spectacle Deck

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/spectacle-mdx-loader/README.md

Example of an MDX file structure and how to render it within a Spectacle deck using react-dom.

```javascript
import React from 'react';
import { render } from 'react-dom';
import { MDXProvider } from '@mdx-js/react';
import { Deck, Slide, Notes, mdxComponentMap } from 'spectacle';

import slides, { notes } from './slides.mdx';

const Deck = () => (
  <MDXProvider components={mdxComponentMap}>
    <Deck>
      {slides
        .map((MDXSlide, i) => [MDXSlide, notes[i]])
        .map(([MDXSlide, MDXNote], i) => (
          <Slide key={`slide-${i}`} slideNum={i}>
            <MDXSlide />
            <Notes>
              <MDXNote />
            </Notes>
          </Slide>
        ))}
    </Deck>
  </MDXProvider>
);

render(<Deck />, document.getElementById('root'));
```

--------------------------------

### Start Local Development Server

Source: https://github.com/formidablelabs/spectacle/blob/main/website/README.md

Starts a local development server for live preview. Changes are reflected without restarting.

```bash
yarn start
```

--------------------------------

### Install spectacle-mdx-loader

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/spectacle-mdx-loader/README.md

Install the loader using npm or yarn.

```sh
npm add --save-dev spectacle-mdx-loader
yarn add --dev spectacle-mdx-loader
```

--------------------------------

### Build and Commit Example Changes

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Build the project and check for changes in the one-page example's HTML file. If changes are detected, commit them.

```shell
pnpm run build
check + commit changes to examples/one-page/index.html
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Installs all project dependencies using pnpm. This is the first step after cloning the repository.

```sh
$ pnpm install
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/formidablelabs/spectacle/blob/main/website/README.md

Installs project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Run Example Test

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Command to run a simple Puppeteer test against the default port (3000) of the example dev server.

```shell
$ pnpm run --filter ./packages/create-spectacle examples:test
```

--------------------------------

### Build or Watch create-spectacle Files

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Commands to build the create-spectacle package or watch for changes during development. Run these after installing Puppeteer.

```shell
pnpm run --filter ./packages/create-spectacle build
```

```shell
pnpm run --filter ./packages/create-spectacle build --watch
```

--------------------------------

### Deck Template Example

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/themes.md

An example of a custom deck template function that renders a footer with progress and slide information. The template receives slide number and total slide count.

```jsx
<Deck template={({ slideNumber, numberOfSlides }) => (
  <FlexBox
    justifyContent="space-between"
    position="absolute"
    bottom={0}
    width={1}
  >
    <Box padding="0 1em">
      <FullScreen />
    </Box>
    <Box padding="1em">
      <Progress />
      Slide {slideNumber} of {numberOfSlides}
    </Box>
  </FlexBox>
)}>
```

--------------------------------

### Example: Columns Layout in Markdown

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Demonstrates a two-column layout using '::section' delimiters within a Markdown slide. The layout is configured with a JSON object.

```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.

```

--------------------------------

### URQL Client Setup for Spectacle

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/md/slides.md

Sets up a URQL client and provides it to the application using the Provider component. This is typically used for integrating GraphQL data fetching into your presentation.

```jsx
import { createClient, Provider } from 'urql';

const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });

const App = () => (
  <Provider value={client}>
    <Todos />
  </Provider>
);
```

--------------------------------

### Install Puppeteer Chromium

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Installs Chromium for use with Puppeteer, required for some slower checks on `create-spectacle`. This is a one-time step.

```sh
# Option 1 -- Do nothing! If you have the Mac Chrome app, you can skip this step!
# Option 2 -- Install chromium
# Option 2.a -- Normal binary
$ pnpm puppeteer:install
```

--------------------------------

### Install Puppeteer for M1/M2 Macs

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Use this command if you are on an M1 or M2 Mac to install Puppeteer. It sets an experimental environment variable.

```shell
PUPPETEER_EXPERIMENTAL_CHROMIUM_MAC_ARM=true pnpm puppeteer:install
```

--------------------------------

### Specify port with create-spectacle

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Use the --port or -p flag to define the port number the presentation will run on. Example uses port 8080.

```shell
yarn create spectacle -p 8080 my-presentation
```

--------------------------------

### Example: Center Layout in Markdown

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Demonstrates a centered layout for a slide using a JSON configuration object in Markdown. The content is automatically centered.

```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.

```

--------------------------------

### Stepper Output Over Slide Steps

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Illustrates the rendered HTML output of the Stepper component example across different slide steps. This shows how the content changes dynamically as the user navigates through the presentation.

```html
<!-- When the slide is first rendered (slide step 0) -->
<p>Hello, world!</p>
<p>The first stepper is not active. Step: -1 Value: undefined</p>
<p>The second stepper is not active. Step: -1 Value: undefined</p>

<!-- slide step 1 -->
<p>Hello, world!</p>
<p>The first stepper is active. Step: 0 Value: foo</p>
<p>The second stepper is not active. Step: -1 Value: undefined</p>

<!-- slide step 2 -->
<p>Hello, world!</p>
<p>The first stepper is active. Step: 1 Value: bar</p>
<p>The second stepper is not active. Step: -1 Value: undefined</p>

<!-- slide step 3 -->
<p>Hello, world!</p>
<p>The first stepper is active. Step: 1 Value: bar</p>
<p>The second stepper is active. Step: 0 Value: baz</p>

<!-- slide step 3 -->
<p>Hello, world!</p>
<p>The first stepper is active. Step: 1 Value: bar</p>
<p>The second stepper is active. Step: 0 Value: baz</p>

<!-- slide step 4 -->
<p>Hello, world!</p>
<p>The first stepper is active. Step: 1 Value: bar</p>
<p>The second stepper is active. Step: 1 Value: quux</p>
```

--------------------------------

### Stepper Component Usage Example

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Demonstrates how to use the Stepper component with two instances, each rendering different content based on their active state and step values. This is useful for creating multi-step interactions within a single slide.

```jsx
<Slide>
  <p>Hello, world!</p>
  <Stepper tagName="p" alwaysVisible values={['foo', 'bar']}>
    {(value, step, isActive) =>
      isActive
        ? `The first stepper is active. Step: ${step} Value: ${value}`
        : `The first stepper is not active. Step: ${step} Value: ${value}`
    }
  </Stepper>
  <Stepper tagName="p" alwaysVisible values={['baz', 'quux']}>
    {(value, step, isActive) =>
      isActive
        ? `The second stepper is active. Step: ${step} Value: ${value}`
        : `The second stepper is not active. Step: ${step} Value: ${value}`
    }
  </Stepper>
</Slide>
```

--------------------------------

### Specify HTML lang attribute with create-spectacle

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Use the --lang or -l flag to set the HTML lang attribute for your presentation. Example uses 'en' for English.

```shell
yarn create spectacle -l en my-presentation
```

--------------------------------

### ThreeUpImage Slide Layout Example

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Utilize ThreeUpImage for slides displaying three images: a primary image and two secondary images (top and bottom). Ensure all required image pane properties are provided.

```jsx
<SlideLayout.ThreeUpImage
  primary={{
    src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg',
    alt: 'Fred the dog looking at the camera',
  }}
  top={{
    src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg',
    alt: 'Fred the dog looking at the camera',
  }}
  bottom={{
    src: 'https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg',
    alt: 'Fred the dog looking at the camera',
  }}
/>
```

--------------------------------

### VerticalImage Slide Layout Example

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Use VerticalImage for slides featuring a single portrait image alongside text content. Configure image position, title, and list items.

```jsx
<SlideLayout.VerticalImage
  src="https://raw.githubusercontent.com/FormidableLabs/dogs/main/src/fred.jpg"
  alt="Fred the dog looking at the camera"
  title="Fred is a 100% pure bred good boy!"
  listItems={['brown hair', 'brown eyes', 'happy boy']}
/>
```

--------------------------------

### Manual Release: Build

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Build necessary files for release using pnpm. This step prepares the project for publishing.

```sh
$ pnpm run build
```

--------------------------------

### Basic create-spectacle commands

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Use these commands to initiate the Spectacle project creation process with interactive prompts. Choose the command based on your preferred package manager.

```shell
yarn create spectacle # yarn
```

```shell
npm create spectacle # npm
```

```shell
npx create spectacle # using npx
```

```shell
pnpm create spectacle # using pnpm
```

--------------------------------

### Create Spectacle Project with CLI

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/index.mdx

Use the Create Spectacle CLI to quickly set up a new Spectacle project. This command initiates the project creation process, allowing you to choose from various templates.

```bash
$ npx create-spectacle

```

--------------------------------

### Deploy Website using SSH

Source: https://github.com/formidablelabs/spectacle/blob/main/website/README.md

Deploys the website using SSH. Assumes SSH is configured for deployment.

```bash
USE_SSH=true yarn deploy
```

--------------------------------

### Create Spectacle Project

Source: https://github.com/formidablelabs/spectacle/wiki/Spectacle-Roadmap

Instantiate a new Spectacle project using package managers. Supports passing creation options via flags or interactive prompts.

```shell
yarn create spectacle
npm create spectacle
pnpm create spectacle
```

--------------------------------

### Build Static Website Content

Source: https://github.com/formidablelabs/spectacle/blob/main/website/README.md

Generates static website content into the 'build' directory for hosting.

```bash
yarn build
```

--------------------------------

### Manual Release: Versioning

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Manually version packages using pnpm and a GitHub token. Ensure the GITHUB_TOKEN environment variable is set.

```sh
$ GITHUB_TOKEN=<INSERT TOKEN> pnpm run version
```

--------------------------------

### Manual Release: Publish

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Publish packages to npm using changesets. Requires an OTP code for verification. Be aware of potential rate limiting errors.

```sh
$ pnpm changeset publish --otp=<insert otp code>
```

--------------------------------

### Specify project name with create-spectacle

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Provide a project name as the main argument to set the name of your Spectacle presentation directory.

```shell
yarn create spectacle my-presentation
```

--------------------------------

### Build Libraries and UMD Distributions

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Builds the project's libraries and UMD distributions. Useful for verifying the webpack build.

```sh
# Build libraries and UMD distributions.
# Really only needed to double-check the webpack build still works.
$ pnpm run build
# ... or add in a `--watch` to watch & re-run the parts of the build that changed!
$ pnpm run build --watch
```

--------------------------------

### Watch create-spectacle CLI and Test Execution

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Watches the create-spectacle code and allows testing its CLI output. Use `node packages/create-spectacle/bin/cli.js -h` to see help.

```sh
# Watch create-spectacle code and test out (in two different terminals)
$ pnpm start:create-spectacle
$ node packages/create-spectacle/bin/cli.js -h
```

--------------------------------

### Markdown Slide Set

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

Shows how to create a set of slides using Markdown, separated by '---'.

```markdown
# This is the first slide of a Markdown Slide Set
---
# This is the second slide of a Markdown Slide Set
```

--------------------------------

### Run All Checks

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Executes all quality checks and tests for the project. This command should be run regularly during development.

```sh
# Run all checks. Re-run this command for your normal workflow.
$ pnpm run check
# ... or add in a `--watch` to watch & re-run checks for only what you change!
$ pnpm run check --watch
```

--------------------------------

### Run Unit Tests

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Executes the project's unit tests. Can be run with a `--watch` flag to re-run tests on file changes.

```sh
# Tests
$ pnpm run test
$ pnpm run test --watch
```

--------------------------------

### Using Theme Values in Components

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/themes.md

Demonstrates how components can accept theme value labels (e.g., 'primary') or raw CSS values (e.g., '#f00'). The 'backgroundColor' prop is mapped to the 'colors' theme key.

```jsx
<Box backgroundColor="primary" />
<Box backgroundColor="#f00" />
```

--------------------------------

### Specify project type with create-spectacle

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Use the --type or -t flag to choose the project structure. Supported types are 'jsx', 'tsx', or 'onepage'.

```shell
yarn create spectacle -t onepage my-presentation
```

--------------------------------

### Bypass prompts with create-spectacle flags

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/create-spectacle/README.md

Provide all necessary flags (-t, -l, -p) along with the project name to bypass interactive prompts and configure the project non-interactively.

```shell
yarn create spectacle -t jsx -l en -p 8080 my-presentation
```

--------------------------------

### Run Prettier Code Formatting Check

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Checks code formatting using Prettier. Can be run with a `--watch` flag to monitor file changes.

```sh
# Quality checks
$ pnpm run prettier
$ pnpm run prettier --watch
```

--------------------------------

### Configure webpack.config.js

Source: https://github.com/formidablelabs/spectacle/blob/main/packages/spectacle-mdx-loader/README.md

Integrate spectacle-mdx-loader into your webpack configuration to process .mdx files.

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      // `.mdx` files go through babel and mdx transforming loader.
      {
        test: /\.mdx$/,
        use: ['babel-loader', 'spectacle-mdx-loader']
      }
    ]
  }
};
```

--------------------------------

### Deploy Website without SSH

Source: https://github.com/formidablelabs/spectacle/blob/main/website/README.md

Deploys the website without using SSH. Requires specifying the GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Run All Checks

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Execute all project checks using pnpm. This command is part of the pre-submission checklist for pull requests.

```shell
pnpm run check:ci
```

--------------------------------

### Multi-Code Layout with Descriptions

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Use SlideLayout.MultiCodeLayout for presentations with multiple code blocks, each potentially having a description. Specify the number of columns for layout.

```jsx
import { Slide, SlideLayout } from 'spectacle';

const MySlide = () => (
  <SlideLayout.MultiCodeLayout
    title="Show me the code!"
    numColumns={2}
    codeBlocks={[
      {
        code: 'console.log("hello world!")',
        language: 'jsx',
        description: 'Say hello',
        codePaneProps: { theme: 'light' },
      },
      {
        code: 'const anotherExample = () => {};',
        language: 'jsx',
        description: 'Another example',
      },
    ]}
  />
);
```

--------------------------------

### React Component Integration in MDX

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/mdx/slides.mdx

Shows how to import and use a React component within an MDX file for a Spectacle presentation. Ensure the component and its props are correctly defined.

```jsx
import Test from './test-component';
export const testProp = 50;

<Test height={testProp} />
```

--------------------------------

### Manual Release: Dry Run Publish

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Perform a dry run of the package publish process using pnpm. This allows testing the publish command without actually uploading packages.

```sh
$ pnpm -r publish --dry-run
```

--------------------------------

### Markdown Slide with Component Props

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

Illustrates how to use the MarkdownSlide component and pass down props to all elements on the slide using `componentProps`.

```markdown
# This is a Markdown Slide - You can pass props down to all elements on the slide.
- Just use the `componentProps` prop.
```

--------------------------------

### Using Scaled Spacing in Text Component

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/themes.md

Illustrates how to use the scaled spacing values by passing the index of the value as a numeric prop to space-related properties like 'padding'.

```jsx
<Text padding={2}>Hello World</Text>
```

--------------------------------

### CodePane with Highlighted Ranges

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Demonstrates using the CodePane component to display JavaScript code with specific line ranges highlighted. Ensure you import the desired theme and specify the language.

```jsx
import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow';

() => (
  <Slide>
    <CodePane language="javascript" theme={tomorrow} highlightRanges={[1, 3]}>
      {
      `
      const App = () => (
        <Provider value={client}>
          <Todos />
        </Provider>
      );
      `
      }
    </CodePane>
  </Slide>
);
```

--------------------------------

### Simple Custom Theme Object

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/themes.md

Define a basic theme object with custom colors and font sizes. This object is passed directly to the Deck component.

```javascript
const theme = {
  colors: {
    primary: '#f00',
    secondary: '#00f'
  },
  fontSizes: {
    header: '64px',
    paragraph: '28px'
  }
};
```

--------------------------------

### Deck

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Wraps the entire presentation and manages overarching slide logic such as theme and template. It also provides props for print and export modes, controlling page size, orientation, and scaling.

```APIDOC
## Deck

### Description
Wraps the entire presentation and carries most of the overarching slide logic, like `theme` and `template` context. The last three props are for print and export mode only.

### Props

#### Main Props
- **theme** ([Styled-system theme object](./themes)) - Description: The theme for the presentation.
- **template** ([Templates](#templates)) - Description: A template to apply to all subsequent Slides.

#### Print/Export Props
- **pageSize** (PropTypes.string) - Default: `"13.66in 7.68in"` - Description: Corresponds to the size values for the CSS media print size selector. Automatically set based on the deck theme slide size for a best-fit using export to PDF mode. If you need to print your deck, supply your paper size using this prop.
- **pageOrientation** (string) - Default: `"landscape"` - Description: Either `"landscape"` or `"portrait"`.
- **printScale** (PropTypes.number) - Default: `0.959` - Description: The ratio for the selected page size, orientation, and slide size. `0.958` is the best ratio to ensure the PDF export fits the slide theme size.

#### Behavior Props
- **autoPlay** (PropTypes.bool) - Default: `false` - Description: Enables autoplay for the presentation.
- **autoPlayLoop** (PropTypes.bool) - Default: `false` - Description: Enables looping for autoplay.
- **autoPlayInterval** (PropTypes.number) - Default: `1000` - Description: The interval in milliseconds between slides during autoplay.
- **transition** ([**Transition**](./props#transition-object)) - Default: `slideTransition` - Description: The default transition effect for slides.
- **backgroundImage** (PropTypes.string) - Description: A background image for the entire presentation.
```

--------------------------------

### Markdown Slide with Animated List Items

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Create a full slide using Markdown with the `<MarkdownSlide />` component. The `animateListItems` prop animates the list items sequentially.

```jsx
<MarkdownSlide animateListItems>
  # Use Markdown to write a slide

  This is a single slide composed using Markdown.

  - It uses the `animateListItems` prop so...
  - it's list items...
  - will animate in, one at a time.
</MarkdownSlide>
```

--------------------------------

### Add a Changeset

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Command to add a changeset for versioning packages. This is used when your PR requires a version change for any packages in the repo.

```shell
pnpm changeset
```

--------------------------------

### Run ESLint Code Linting Check

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Performs code linting using ESLint. Can be run with a `--watch` flag to monitor file changes.

```sh
$ pnpm run lint
$ pnpm run lint --watch
```

--------------------------------

### View Uncommitted Changeset File

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

After running 'pnpm changeset', a new uncommitted file will appear in the .changeset directory. Review and adjust this file before committing.

```shell
$ git status
# ....
Untracked files:
  (use "git add <file>..." to include in what will be committed)
	.changeset/flimsy-pandas-marry.md
```

--------------------------------

### Manual Release: Push Git Tags

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Push git tags to the remote repository after a successful publish. This ensures tags are updated.

```sh
$ git push && git push --tags
```

--------------------------------

### Markdown Slide with Animated List Items

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

Demonstrates a MarkdownSlide that animates its list items one at a time using the `animateListItems` prop.

```markdown
# This is also a Markdown Slide
It uses the `animateListItems` prop.
- Its list items...
- ...will appear...
- ...one at a time.
```

--------------------------------

### CodePane with Line Numbers (JSX)

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

Demonstrates how to use the CodePane component to display JSX code with line numbers enabled.

```jsx
import { createClient, Provider } from 'urql';
const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });
const App = () => (
  <Provider value={client}>
    <Todos />
  </Provider>
);
```

--------------------------------

### Markdown Slide Set with Delimiters

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Use `<MarkdownSlideSet />` to author a series of slides using Markdown. The `---` delimiter separates content into distinct slides within the set.

```jsx
<MarkdownSlideSet>
  # Markdown Slide Sets

  Let you write a sequence of slides using Markdown.

  ---

  # This is the Second Slide in the Set

  Using the `---` delimiter creates a new slide in the set.

  Notes: The easiest way to always display up-to-date data is to set the requestPolicy to 'cache-and-network'.
```

--------------------------------

### Define Columns Layout

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Use this JSON object to define a columns layout for a slide. Each column is delimited by '::section'.

```json
{ "layout" : "columns" }
```

--------------------------------

### Slide with Presenter Notes

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Include presenter notes within a slide using the `<Notes />` component. These notes are only visible in Presenter mode and do not appear on the main deck.

```jsx
<Slide>
  <Heading>Urql</Heading>
  <Text>A highly customizable and versatile GraphQL client</Text>
  <Notes>
    Urql is a GraphQL client that exposes a set of React components and hooks.
  </Notes>
</Slide>
```

--------------------------------

### Columns Layout JSX Structure

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Illustrates the underlying JSX structure for the columns layout, which uses FlexBox to arrange sections.

```jsx
<FlexBox flexDirection="row" alignItems="start" flex={1}>
  {sectionsArray}
</FlexBox>
```

--------------------------------

### Basic Markdown in a Slide

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Use the `<Markdown />` component to embed Markdown content within a `<Slide />`. This allows for rich text formatting and structure inside individual slides.

```jsx
<Slide>
  <Markdown>
    # Urql
    A highly customizable and versatile GraphQL client
  </Markdown>
  <Text>Made by Formidable</Text>
</Slide>
```

--------------------------------

### Slide

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

Wraps a single slide within the presentation, defining the content for a single view. It can override the Deck's transition effects with its own specified transition.

```APIDOC
## Slide

### Description
Wraps a single slide within your presentation; identifies what is contained to a single view. If a transition effect is applied to this slide, it will override the Deck-specified transition.

### Props

- **backgroundColor** (PropTypes.string) - Description: The background color for the slide.
- **backgroundImage** (PropTypes.string) - Description: A background image for the slide.
- **backgroundOpacity** (PropTypes.number) - Description: The opacity of the background image.
- **backgroundPosition** (PropTypes.string) - Description: The position of the background image.
- **backgroundRepeat** (PropTypes.string) - Description: The repeat property for the background image.
- **backgroundSize** (PropTypes.string) - Description: The size of the background image.
- **scaleRatio** (PropTypes.number) - Description: A scaling ratio for the slide content.
- **slideNum** (PropTypes.number) - Description: The slide number.
- **template** (PropTypes.func) - Description: A custom template function for the slide.
- **textColor** (PropTypes.string) - Description: The text color for the slide.
- **transition** ([**Transition**](./props#transition-object)) - Description: The transition effect for this specific slide, overriding the Deck's default.
```

--------------------------------

### Clean Tooling Caches

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Clears various caches used by the project's tooling, such as ESLint or Prettier caches.

```sh
# Clean out everything
$ yarn clean:cache

# Individually
$ yarn clean:cache:lint      # eslint cache
$ yarn clean:cache:wireit    # wireit task cache
$ yarn clean:cache:modules   # caches in node_modules (prettier, etc.)
```

--------------------------------

### Code Slide Layout

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Use SlideLayout.Code for slides featuring a single code pane. The 'children' prop is the code content, and 'language' specifies the syntax highlighting.

```jsx
import { Slide, SlideLayout } from 'spectacle';

const MySlide = () => (
  <SlideLayout.Code language="jsx" title="Show me the code!">
    const Component = (props: componentProps): JSX.Element => {...}
  </SlideLayout.Code>
);
```

--------------------------------

### Spectacle Default Template Usage

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/api-reference.md

This snippet shows how to import and use the DefaultTemplate component within a Spectacle Deck. The template can be customized with a 'color' prop.

```tsx
import { Deck, DefaultTemplate } from 'spectacle'

const Presentation = () => (
  <Deck theme={theme} template={<DefaultTemplate />}>
    {/* Your presentation here */}
  </Deck>
)
```

--------------------------------

### Run TypeScript Type Checking

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Checks for TypeScript type errors in the project. Can be run with a `--watch` flag to monitor file changes.

```sh
$ pnpm run types:check
$ pnpm run types:check --watch
```

--------------------------------

### CodePane without Line Numbers (Java)

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

Shows how to use the CodePane component to display Java code with line numbers disabled.

```java
public class NoLineNumbers {
public static void main(String[] args) {
System.out.println("Hello");
}
}
```

--------------------------------

### Center Layout JSX Structure

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Shows the JSX structure for the center layout, which uses FlexBox to center content vertically and horizontally.

```jsx
<FlexBox justifyContent="center" alignItems="center" height="100%">
  {content}
</FlexBox>
```

--------------------------------

### Define a Transition Object

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/props.md

Use a transition object to define animatable CSS properties for 'from', 'enter', and 'leave' states of a component. 'from' sets the initial styles, 'enter' applies styles when the component is visible, and 'leave' applies styles when it's out of view.

```javascript
const transition = {
  from: {
    opacity: 0,
    transform: 'rotate(45deg)'
  },
  enter: {
    opacity: 1,
    transform: 'rotate(0)'
  },
  leave: {
    opacity: 0,
    transform: 'rotate(315deg)'
  }
};
```

--------------------------------

### Custom Space Scale Theme

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/themes.md

Defines a theme with a custom 'space' scale using an array of integer values. This scale is used for margins, paddings, and grid gaps.

```jsx
let theme = {
  space: [16, 24, 32]
};
```

--------------------------------

### Define Center Layout

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/md-slide-layouts.md

Use this JSON object to define a center layout for a slide, which centers all content within a single column.

```json
{ "layout" : "center" }
```

--------------------------------

### Quote Slide Layout

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Use SlideLayout.Quote for slides displaying a quote and its attribution. Both children (the quote) and attribution are required.

```jsx
import { Slide, SlideLayout } from 'spectacle';

const MySlide = () => (
  <SlideLayout.Quote
    attribution="William Shakespeare"
    quoteProps={{ fontSize: '100px' }}
    attributionProps={{ fontSize: '48px' }}
  >
    To be, or not to be
  </SlideLayout.Quote>
);
```

--------------------------------

### Fix Fixable Code Issues

Source: https://github.com/formidablelabs/spectacle/blob/main/CONTRIBUTING.md

Automatically fixes issues identified by Prettier and ESLint.

```sh
pnpm run prettier:fix
pnpm run lint:fix
```

--------------------------------

### ImagePane Type Definition

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

Defines the structure for an image pane within slide layouts, specifying image source, alt text, and optional styling properties.

```typescript
type ImagePane = {
  src: string;
  alt: string;
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  imgContainerProps?: ComponentProps<typeof FlexBox>;
  objectFit?: React.CSSProperties['objectFit'];
}
```

--------------------------------

### CodeBlock Type Definition

Source: https://github.com/formidablelabs/spectacle/blob/main/docs/react-slide-layouts.md

This TypeScript type defines the structure for individual code blocks within the MultiCodeLayout, including code content, language, and optional descriptions.

```typescript
type CodeBlock = Omit<CodePaneProps, 'children'> & {
  code: CodePaneProps['children'];
  description?: string | ReactNode;
  descriptionProps?: ComponentProps<typeof Text>;
};
```

--------------------------------

### Spectacle Presentation Component

Source: https://github.com/formidablelabs/spectacle/blob/main/examples/one-page/index.html

The main presentation component using Spectacle and htm for JSX rendering. It defines the overall structure of the presentation, including slides, themes, and templates.

```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { FlexBox, Heading, SpectacleLogo, UnorderedList, CodeSpan, OrderedList, ListItem, Appear, Slide, Deck, Text, FitText, Grid, Box, Image, CodePane, MarkdownSlide, MarkdownSlideSet, Notes, DefaultTemplate, SlideLayout } from 'spectacle';
import htm from 'htm';
const html = htm.bind(React.createElement);
const formidableLogo = 'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';
// SPECTACLE_CLI_THEME_START
const theme = {
  fonts: {
    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif'
  }
};
// SPECTACLE_CLI_THEME_END
const SlideFragments = () => html` <${Slide} key="slide-fragment-1">
    <${Text}>This is a slide fragment.</${Text}>
  </${Slide}>
  <${Slide} key="slide-fragment-2">
    <${Text}>This is also a slide fragment.</${Text}>
    <${Appear}>
      <${Text}>This item shows up!</${Text}>
    </${Appear}>
    <${Appear}>
      <${Text}>This item also shows up!</${Text}>
    </${Appear}>
  </${Slide}>
`;
const template = html` <${DefaultTemplate} />`
const Presentation = () => html`<${Deck} theme=${theme} template=${template}>
    <${Slide}>
      <${FlexBox} height="100%">
        <${SpectacleLogo} size={500} />
      </${FlexBox>
      <${Notes}>Spectacle supports notes per slide.<ol>
          <li>Notes can now be HTML markup!</li>
          <li>Lists can make it easier to make points.</li>
        </ol>
      </${Notes}>
    </${Slide}>
    <${Slide}>
      <${FlexBox} height="100%" flexDirection="column">
        <${Heading} margin="0px" fontSize="150px">✨<i>Spectacle</i> ✨</${Heading}>
        <${Heading} margin="0px" fontSize="h2">A ReactJS Presentation Library</${Heading}>
        <${Heading} margin="0px 32px" color="primary" fontSize="h3">Where you can write your decks in JSX, Markdown, or MDX!</${Heading}>
      </${FlexBox}>
    </${Slide}>
    <${Slide} transition=${{ from: { transform: 'scale(0.5) rotate(45deg)', opacity: 0 }, enter: { transform: 'scale(1) rotate(0)', opacity: 1 }, leave: { transform: 'scale(0.2) rotate(315deg)', opacity: 0 } }} backgroundColor="tertiary" backgroundImage="url(https://github.com/FormidableLabs/dogs/blob/main/src/beau.jpg?raw=true)" backgroundOpacity={0.5}>
      <${Heading}>Custom Backgrounds</${Heading}>
      <${UnorderedList}>
        <${ListItem}>
          <${CodeSpan}>backgroundColor</${CodeSpan}>
        </${ListItem}>
        <${ListItem}>
          <${CodeSpan}>backgroundImage</${CodeSpan}>
        </${ListItem}>
        <${ListItem}>
          <${CodeSpan}>back
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.