formidablelabs / spectacle Goto Github PK

I can run this on EC2 without any troubles but can't access through port 3000? I tried to locate on how to configure the port but couldn't figure it out.

This way you get a little faster load I think. I know it's a minor thing but it's not that hard to setup. See my boilerplate. This might be feasible if you make it easier to customize Webpack configuration.

I'm not sure what's a neat way to solve this. Anyway, it would be cool to perhaps start from the beginning again or something.

http://spectacleapp.com/ is pretty well known and a great tool. This name might conflict since both are in the tech space?

cc @mathieudutour

That would be a better default especially if you are hosting over GitHub Pages or such (https enabled). Otherwise browser will give a warning about mixed content and fail to render the fonts.

Dual window socket.io based lookahead/notes view

Separate library into core, npm installable library and a separate boilerplate project

do it

Absolutely necessary

What's the best way to go about adding a video to a slide?

Hey, I would like to repurpose it for a project, can you put a random license on it ? 😃

This yields Cannot read property 'props' of undefined at Deck. Line:

transition: child.props.transition.length ? child.props.transition : this.props.transition,

I believe pushing /src to a separate module, such as spectacle-core, would be valuable. That would make it easier to maintain existing presentations as the core gains new features. You could still retain current spectacle as a starting point.

If you want to retain the issue related to the core maybe it would be a good idea to rename this repository and set up spectacle based on this again (push to new remote). This will give you two similar copies that can then grow separately.

In any case some kind of a split would be nice.

I was setting up a custom deployment script when I ran into this one. Simply having require('./webpack.config'); in your code is enough to remove ./dist directory contents. That's a little uncool as I was trying to get Webpack output path from the configure to deploy it.

Warning below:

Warning: owner-based and parent-based contexts differ (values: 5 vs 3) for key (slide) while mounting Appear (see: http://fb.me/react-context-by-parent)

I suspect that might have something to do with animation. It spams a lot of these if you hit left/right while in development mode.

Basically, the same as implemented in reveal.js.

There should be more fragment types. For starters, one that switches content instead of just making it appear. Maybe a magic move? Anybody got any ideas?

It can be handy to be able to set target="_blank" if you are linking from the presentation. That might be a good default even as you probably don't want to escape a presentation by accident.

That's a handy ignore for OS X users. Simple to add and quite needed given your presentation has images.

Even though the project includes MIT license it doesn't match package.json meta. It states that it's ISC. You might want to clarify this.

Slide 7 on http://projects.formidablelabs.com/spectacle/#/?export compared to http://projects.formidablelabs.com/spectacle/#/7

Certain responsive tweaks needed (CodePane on mobile)

Optional, of course

As highlight.js supports language detection you could make lang optional. The potential problem with this is that as it's little heavy operation. To work against this you can actually provide a list of possible languages to match against. That could go to project configuration. I believe a combination like this could work quite nicely here.

The interactive slides do not sync in the presenter mode.

Open up the demo and go to the slide with the button. Open another tab and click in the preview on the button. The two states are not being synced.

layer hacking, translates, etc...

Perhaps I'm mistaken in the use case, but should the prop for slides, 'align', when set to flex-start or flex-end position the content such that it's placed in one of the corners of the area of the deck or slide or something? When I used align in multiple different spaces, it didn't change anything. Likewise, I ended up replacing the code in slide.jsx with flex-start instead of the default center, and it still didn't do anything. All content was still center justified both vertically and horizontally within the slide. Text align did justify the text properly within their box (the box that stayed in the center no matter what). Again, I'm not sure if I'm misinterpreting the purpose or not, but it's definitely not working if it's meant to justify the content box in a region of the slide/deck/dom. Otherwise, cool project!

Currently you are forced to maintain all your Slides in a single Deck. It would be useful if it was possible to defined SlideSets like this:

<Deck ...>
  <SlideSet ...>
    <Slide ...>...</Slide>
    ...
  </SlideSet>
  ...
</Deck>

After this you could push SlideSets to outside of the main file easily. As the current system expects Slides to belong directly below Deck this is hard/impossible to achieve (yup, tried many ways).

soon

Something like:

<Slide slideDuration={1000}>
  ...
</Slide>

Render without wrapper. Wrapper causing Firefox layout issues.

While probably more a configuration issue, I was exploring how to run the local dev instance on something else than localhost:3000

so, I went looking in the webpack configuration docs and found that I could run a differnt port (or even domain) all together by adding the following to my webpack.config.js

webpackConfig.devServer = {
  colors: true,
  host: 'mypresentation.local',
  port: 3333,
  hot: true
}

works perfectly but breaks something as the console gets flooded with error messages from some script trying to open a socket.io connection on localhost:3000

update: I was wrong to assume HMR was broken, since that seems to work, I'm not sure which script either webpack or spectacle is trying to open that socket connection

any ideas?

If you practice beforehand you might have some idea how long a slide should take. If you could attach this information to a slide you could then use it in presentation mode to show how well you are on track.

The bug is reproducible since 0.0.3. The problem is only during Deck mode. Presenter mode works just fine. This breaks JS on the page and controls don't work at all.

For 0.0.2 everything works fine.

The html.js end of things.

https://github.com/FormidableLabs/spectacle/blob/master/themes/default/html.js#L12 does this:

            '<link href="' + data.css + '" rel="stylesheet" type="text/css" />',

However, with inline styles, I think this is undefined which means we get an undefined for href. We should have this be a conditional instead before outputting this line.

The Source Maps end

Apparently hjs-webpack does something naive for infering the CSS bundle output. When I override a config with this:

webpackConfig.devtool = "source-map";

(Instead of default eval-source-map) The CSS link shows up as:

<link href="app.js.map" rel="stylesheet" type="text/css" />

and the dumped config data looks like:

 {
  "css": "app.js.map",
  "main": "app.js",
  // ...

When switching away from hjs-webpack, I'd suggest our dev webpack config use source-map right off the bat (because it makes inspecting the dev bundle so, so much easier...

Turning this off we get an undefined which I think is expected because we're doing inline styles...

If you are editing a presentation, looks like it can error out pretty badly if you pass an invalid language name to CodePane. I.e., just doing lang="htmlsdfs" is enough to break it. That yields

Uncaught Error: Unknown language: "htmlsdfs"

It might be a better idea to deal with a possible error somehow and perhaps give a warning instead.

This is because you have a line like

if (process.argv[1].indexOf('webpack-dev-server') !== -1) {

there. argv can be shorter than that.

Instead it would make sense to check the length before accessing

if (process.argv.length > 1 && process.argv[1].indexOf('webpack-dev-server') !== -1) {

If you get an error during npm run build, it should stop deployment. There's likely some neat Unix trick for this.

I am attempting to use the Layout tag with both 'Fit' and 'Fill' elements but Chrome is throwing an 'Uncaught ReferenceError' for the 'Fit' element.

My slide definition is:

<Slide
  transition={['zoom', 'fade']}
  bgColor="primary"
  notes="Polymer example"
>
  <Layout>
    <Fit>
      <Text>Definition:</Text>
    </Fit>
    <Fill>
      <CodePane
        lang="html"
        source={require("raw!./snippets/polymer-1.html")}
        margin="20px auto"/>
    </Fill>
  </Layout>
</Slide>

The rendered code for the slide looks like:

    _reactAddons2["default"].createElement(
      _srcSpectacle.Slide,
      {
        transition: ["zoom", "fade"],
        bgColor: "primary",
        notes: "Polymer example"
      },
      _reactAddons2["default"].createElement(
        _srcSpectacle.Layout,
        null,
        _reactAddons2["default"].createElement(
          Fit,
          null,
          _reactAddons2["default"].createElement(
            _srcSpectacle.Text,
            null,
            "Definition:"
          )
        ),
        _reactAddons2["default"].createElement(
          _srcSpectacle.Fill,
          null,
          _reactAddons2["default"].createElement(_srcSpectacle.CodePane, {
            lang: "html",
            source: __webpack_require__(473),
            margin: "20px auto" })
        )
      )
    ),

The file fit.jsx looks okay to me and it is being included in the spectacle.jsx file as far as I can tell, so I am having trouble figuring out where the issue is.

Perhaps there could be some kind of a TOC thinger (dropdown?) to make it easier to jump around.

And a switcher in the demo

The themes have a nice declaration of colors and fonts at the beginning, to be reused throughout the big style objects. However, you can't import and override easily.

For instance, this is what it took to extend default colors for index:

import theme from "spectacle/themes/default/index";

const colors = {
  primary: "#d71920",
  secondary: "black",
  tertiary: "white"
};

// Overrides
theme.colors = colors;
theme.global.body.background = colors.primary;
theme.global.body.color = colors.secondary;
theme.progress.pacman.pacmanTop.background = colors.tertiary;
theme.progress.pacman.pacmanBottom.background = colors.tertiary;
theme.progress.pacman.point.borderColor = colors.tertiary;
theme.progress.bar.bar.background = colors.tertiary;
theme.progress.number.container.color = colors.tertiary;
theme.components.quote.borderLeft = "1px solid " + colors.primary;
theme.components.quote.color = colors.primary;
theme.components.cite.color = colors.tertiary;
theme.components.heading.h1.color = colors.tertiary;
theme.components.heading.h2.color = colors.secondary;

export default theme;

What would be great is if there were some faculty to call configure({ colors, fonts }) and pass in overrides to be expanded by spectacle in all the right places.

display: -webkit-flex , thanks Safari

I noticed that when going from one slide to another in the reverse direction, the previous slide overlaps the current slide being transitioned, resulting in an undesired (?) visual effect.

Steps to reproduce:

1. Transition from 1st slide to 2nd slide.
2. Transition from 2nd slide back to 1st slide. Notice how the 1st slide is above the 2nd slide in transition, even though it was below on initial transition (which I assume is the desired visual effect).

Tested on Chrome latest.

It would be a very useful addition to have something like

<Markdown source={require("raw!./testmd.md")} />

or/and

<Markdown>#Heading 1
some text

* item 1
* item2
</Markdown>

I prototyped the first example using marked and katex for math. However, I do need to adjust the styles.

I could not get the second example working. I am a novice in terms of react and I have no idea how I can access the inner text as a raw string with the line breaks. this.props.children only returns a string without line breaks.

I would expect that I can click on the desired slide that i want to switch to.

Scaling below 0.1 makes SVG's disappear. Figure that one out....

Hi! How i can insert
tag into my presentation.jsx? Is these some out of the box
tag or i need to impelent it by my self?

Thanks!

It would be handy to show remaining time instead of the current time. One way to solve this would be to allow the user to set the presentation length at config and then use countdown based on that when presentation mode is activated.