Giter VIP home page Giter VIP logo

spectacle-boilerplate-mdx's Introduction

Spectacle Boilerplate (MDX)

⚠️ Deprecated: This project has been deprecated. Please install spectacle-cli and use spectacle-boilerplate to generate your presentations with ease!

Generate a Spectacle presentation

First, install spectacle-cli:

$ npm install -g spectacle-cli

ℹ️ Note: If you would like to avoid a global install, you can use npx -p spectacle-cli spectacle-boilerplate in the place of the spectacle-boilerplate command below.

Then generate a new boilerplate Spectacle project!

$ spectacle-boilerplate -m mdx

# ... or with options! ...
$ spectacle-boilerplate \
  --mode "mdx" \
  --name "deck-o-awesomeness" \
  --description "My fantastic Spectacle presentation" \
  --dir "PATH/TO/NEW/DECK/DIRECTORY"

# Check out the full usage
$ spectacle-boilerplate -h

Author and build your project!

See the boilerplate guide for full instructions. As a quick starter:

# Install your dependencies
$ yarn

# Start development server at localhost:8080
$ yarn start

# Create a production build for publishing
$ yarn build

spectacle-boilerplate-mdx's People

Contributors

alanfoster avatar boygirl avatar chihhunglin avatar danecando avatar ebrillhart avatar faultless avatar fbarrailla avatar heel avatar hhsnopek avatar iamdustan avatar jojoee avatar julioxavierr avatar jumace avatar juristr avatar kenwheeler avatar mattmarcello avatar nicholasboll avatar nogsmpls avatar pallinder avatar ryan-roemer avatar stefvhuynh avatar threeve avatar toddmotto avatar tteltrab avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spectacle-boilerplate-mdx's Issues

Code block ignores extra lines

The code block

const obj = {};

console.log(obj);

renders as

I can get the extra line I want by writing the code block as

const obj = {};\n
console.log(obj);

which also differs from expected behavior: I'd expect to be able to write \n as part of a literal in a code block.

Relates to #16.

Failed to run `npm run build`

Hi guys,

Run the build command raised these error:

ERROR in ./presentation/index.mdx 5:0
Module parse failed: Unexpected character '#' (5:0)
You may need an appropriate loader to handle this file type.
| import RegularComponent from './regular-component';
|
> # Spectacle MDX!
|
| **open the presentation/index.mdx file to get started**
 @ ./index.js 31:13-48
 @ multi babel-polyfill ./index
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Thanks for awesome works.

Unsure how to apply custom content styles in MDX

Hello,

I am experimenting with spectacle for use with a developer workshop, and it isn't quite apparent to me how I would go about specifying a custom style for inner content in the MDX file.

For example, I want to style the ".spectacle-content" element such that textAlign: left. How do I target that property in the MDX file directly to make this modification for one slide?

Code block actually tries to run code

I have the following piece of markdown:

image

It's a screenshot because github tries to render it as a code block…


I get the following error in my slides:

ERROR in ./presentation/reducers.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: ENOENT: no such file or directory, open '/Users/jordyvandomselaar/workspace/redux-meetup/presentation/reducers.js'

It actually tries to import the file? I just want it to display the code.

formatOnSave buggy

The boilerplate is great.
Although, I think we shouldn't have vscode configs as a part of the project. If I execute the code and simply save the file index.mdx without modifying anything, after the format I get the error:

captura de tela 2018-12-08 as 00 29 57

Add prettierrc, ensure eslint plays nicely

It'd be rad if this shipped with a base .prettierrc, to make writing presentations in MDX even easier. MDX support has existed in prettier since this release https://prettier.io/blog/2018/11/07/1.15.0.html

On a fresh clone/install there are some cases where linting/prettier auto-saving has been problematic. Specifically:

  • Semicolons following imports in MDX are added by prettier, which breaks the compiler
  • There is no .prettierrc file to indicate single/double quotes
  • A few eslint errors appearing on clone, like Filename 'createTheme.js' does not match the naming convention

Sorry this issue isn't super descriptive, it's mostly a feature enhancement and to list out some cases where my local editor runs into walls. I can likely help with this unless someone else wants a good first issue :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.