Revamped create-spectacle CLI and getting started documentation for…

… Spectacle. (#1306)

* Added base support for generating Markdown slide decks

* Update deps, move to TypeScript-only.

* Finish MD file writer. Clean up React template and use new Spectacle primatives.

* Start docs refactor for new CLI based getting started guide

* Finish docs and CLI copy.

* Update CLI tests for new markdown option.

* Update GH Actions to remove old JS option.

.github/workflows/create-spectacle.yml

@@ -5,14 +5,14 @@ on:
     branches:
       - main
     paths:
-      - ".github/workflows/create-spectacle.yml"
-      - "packages/create-spectacle/**"
+      - '.github/workflows/create-spectacle.yml'
+      - 'packages/create-spectacle/**'
   pull_request:
     branches:
       - main
     paths:
-      - ".github/workflows/create-spectacle.yml"
-      - "packages/create-spectacle/**"
+      - '.github/workflows/create-spectacle.yml'
+      - 'packages/create-spectacle/**'
 
 jobs:
   build:
@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         node-version: [18.x]
-        create-type: ['jsx', 'tsx', 'onepage']
+        create-type: ['tsx', 'onepage']
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

docs/faq.md

@@ -12,8 +12,8 @@ Yes - you can export your slides in PDF format. Appending your presentation URL
 
 If you want a black & white version of your slides printed to PDF, append your URL with `?exportMode=true&printMode=true` to get a printer-friendly, flattened, black & white print out of your slideshow.
 
-For more info about the query parameters Spectacle supports, please check out our section about it in the [advanced concepts documentation](./advanced-concepts.md#query-parameters).
+For more info about the query parameters Spectacle supports, please check out our section about it in the [presenting controls documentation](./presenting-controls#query-parameters).
 
 ## Can I write my presentation in TypeScript?
 
-Yes - Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import.
+Yes—Spectacle types are shipped with the package, so you can safely use Spectacle in any `.ts` or `.js` presentation without a separate type definition import. TypeScript is now the default language for Spectacle and the `create-spectacle` CLI, so you can use it without any additional configuration.

docs/index.mdx

@@ -0,0 +1,89 @@
+---
+title: Introduction
+order: 1
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import defaultDeckImg from '../website/static/img/default-deck.png'
+import presenterModeImg from '../website/static/img/presenter-mode.png'
+import animatedPresentationImg from '../website/static/img/presentation-mode.gif'
+
+Spectacle is a React-based library for creating sleek presentations using React or Markdown that gives you the ability to live demo your code and use React libraries in your slides.
+
+<img src={defaultDeckImg} style={{ width: '40rem'}} />
+
+## How to get started with Spectacle
+
+
+<Tabs>
+  <TabItem value="spectacle-cli" label="Create Spectacle CLI" default>
+  The fastest and easiest way to get started with Spectacle is to use the Create Spectacle CLI. This will create a new Spectacle project with a default deck and all the necessary dependencies.
+
+  There are four different kinds of templates you can use to create your Spectacle project:
+
+  1. ⚡️ **One Page** - A single HTML file using [htm](https://github.com/developit/htm) that self contains everything you need. Since it does not require a server to run your presentation, this is the recommended option for quickly spinning up a deck.
+  2. 📄 **Markdown** - An app that uses Markdown for your presentation’s content with support for [Markdown Slide Layouts](md-slide-layouts). This is a React app that uses webpack and imports the Markdown content using Spectacle’s [`MarkdownSlideSet`](api-reference#markdown-components) component.
+  3. 🏗️ **React using Vite** - An app that lets you build your presentation in React and uses Vite for building and running. This is the recommended option if you plan on using a number of additional npm libraries in your presentation.
+  4. 🏗️ **React using webpack** - An app that lets you build your presentation in React and uses webpack for building and running.
+
+  **To get started use `npx` or `pnpm dlx` to run the `create-spectacle` cli:**
+
+  ```bash
+
+  $ npx create-spectacle
+
+  ```
+
+  This will create a new Spectacle presentation in a directory of your deck’s name or one page file in the current directory.
+
+
+  </TabItem>
+  <TabItem value="autoPlay" label="Manual Installation" default>
+
+  1. Install Spectacle by running `npm add spectacle`.
+
+  2. In your main entry file, return the following Spectacle starter:
+
+    ```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;
+    ```
+
+    :::info
+
+    If you are using NextJS with App Router, Spectacle needs to be rendered inside a client component. You can read more about this [here](https://nextjs.org/docs/app/building-your-application/rendering/client-components).
+
+    :::
+
+
+  </TabItem>
+</Tabs>
+
+## Presenter Mode
+
+Spectacle also has a presenter mode that allows you to view your slides and notes on one screen while your audience views your slides on another. To use presenter mode, open a second browser window and visit your deck’s local server and enable it by using the key command. You can find more information about presentation controls [here](presenting-controls).
+
+<img src={presenterModeImg} style={{ width: '40rem'}} />
+<img src={animatedPresentationImg} style={{ width: '40rem'}} />
+
+
+## Documentation, Contributing, and Source
+
+For more information about Spectacle and its components, check out [the docs](https://formidable.com/open-source/spectacle).
+
+Interested in helping out or seeing what's happening under the hood? Spectacle is maintained [on Github](https://github.com/FormidableLabs/spectacle) and you can [start contributing here](https://github.com/FormidableLabs/spectacle/blob/main/CONTRIBUTING.md).
+
+For any questions, feel free to [open a new question on Github](https://github.com/FormidableLabs/spectacle/issues/new?template=question.md).

docs/advanced-concepts.md → docs/presenting-controls.mdx

@@ -1,28 +1,31 @@
 ---
-title: Advanced Concepts
+title: Presenting Controls
 order: 2
 sidebar_position: 2
 ---
 
-# Advanced Concepts
+import commandBarImage from "../website/static/img/command-bar.png"
 
-## Build & Deployment
+# Presenting Controls
 
-There are a variety of ways to host your Spectacle presentation.
+Spectacle comes with a few keyboard shortcuts to help you navigate your presentation. These shortcuts are available in both the browser and the Presenter Mode. You can also use the command bar to see all available shortcuts.
 
-1. If you are integrating this lib yourself, take your build and follow the linked instructions from any of (but not limited to) the following providers: [Netlify](https://docs.netlify.com/get-started/#deploy-a-project-to-netlify), [Vercel](https://vercel.com/docs/concepts/deployments/overview), or [Surge](https://surge.sh/help/deploying-continuously-using-git-hooks).
+## Command Bar
+
+Pressing <kbd>&#8984;</kbd>/<kbd>Ctrl</kbd> + <kbd>k</kbd> will open the command bar. This will show you all available keyboard shortcuts and common navigation options.
+
+<img src={commandBarImage} alt="Command Bar interface" style={{ width: "30rem" }} />
 
-2. If using `spectacle-cli` (either `spectacle --action build` or `spectacle-boilerplate` with `yarn clean && yarn build`) your output is `dist/` and upload that directory to any of the above static hosting providers.
 
 ## Keyboard Controls
 
 | Key Combination | Function               |
 | --------------- | ---------------------- |
-| Right Arrow     | Next Slide             |
-| Left Arrow      | Previous Slide         |
-| Alt/Option + O  | Toggle Overview Mode   |
-| Alt/Option + P  | Toggle Presenter Mode  |
-| Alt/Option + F  | Toggle Fullscreen Mode |
+| <kbd aria-label="Arrow Right Key">&#8594;</kbd>     | Next Slide             |
+| <kbd>&#8592;</kbd>      | Previous Slide         |
+| <kbd>&#8997;</kbd>/<kbd>Alt</kbd> + <kbd>&#8679;</kbd> + <kbd>O</kbd>  | Toggle Overview Mode   |
+| <kbd>&#8997;</kbd>/<kbd>Alt</kbd> + <kbd>&#8679;</kbd> + <kbd>P</kbd>  | Toggle Presenter Mode  |
+| <kbd>&#8997;</kbd>/<kbd>Alt</kbd> + <kbd>&#8679;</kbd> + <kbd>F</kbd>  | Toggle Fullscreen Mode |
 
 ## Query Parameters
 
@@ -34,4 +37,4 @@ To combine parameters, use multiple `&` to separate the parameters, e.g.: `&expo
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `exportMode`    | For exporting your presentation as a PDF. Add it to your project URL and "Save to PDF" directly from the browser                                          |
 | `printMode`     | Turns your slideshow into a printer-friendly, black & white version. Meant for use concurrently with `?exportMode` e.g. `?exportMode=true&printMode=true` |
-| `presenterMode` | Displays a Presenter Mode for ease of presentation. For more info on this mode, please see [Presenting](./index.md#presenting) in our Basic Concepts doc          |
+| `presenterMode` | Displays a Presenter Mode with slide notes, a timer, and the upcoming slide.         |

docs/jsx-slide-layouts.md → docs/react-slide-layouts.md

@@ -1,5 +1,5 @@
 ---
-title: JSX Slide Layouts
+title: React Slide Layouts
 order: 6
 sidebar_position: 6
 ---