GithubHelp home page GithubHelp logo

fabe / gatsby-starter-deck Goto Github PK

View Code? Open in Web Editor NEW
520.0 520.0 79.0 593 KB

🗣 Create presentations using Gatsby, React & Markdown.

Home Page: https://gatsby-deck.netlify.com

License: MIT License

JavaScript 77.88% CSS 22.12%
gatsby gatsby-starter gatsbyjs markdown presentations react slides slideshow

gatsby-starter-deck's People

Contributors

amir-abushanab avatar anirishduck avatar dependabot[bot] avatar fabe avatar jessesingleton avatar mohammedessehemy avatar stefanprobst 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  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

gatsby-starter-deck's Issues

Hot reloading doesn't seem to be working

This is the environment where I have the issue
macOS: 10.13.6
Gatsby: 1.1.58
Node: 10.9.0
npm: 6.4.1

Currently, saving src/slides.md recompiles the Gatsby project without errors, but the rendered slides do not change. I have to stop and restart the gatsby develop server to actually see any changes.

I have tried this in an incognito session and with cache disabled, and still have the problem.

Retina images

I had to add this option in the gatsby-remark-images options (gatsby-config.js):

wrapperStyle: fluidResult => `width:${fluidResult.presentationWidth / 2}px;`,

In order for my images to be displayed at half their pixels size, so they don't appear blurry on HDPI screens.
But it's a hack and it could be improved.

Multiple Slides in one MD

Hey @fabe

Thanks a lot for your work! Since I'm teaching students (part time) I'm often handling larger decks. I worked till now with reveal.js and one thing I really like is the fact that I'm able to have one MD-File and have all my slides in there. If I decide to switch one slide back or forth I just need to copy paste and not fiddle around with renaming files. I was thinking about how to implement that in gatsby with your starter. But I didn't find a good solution. One option would be:

  1. exports.createPages → search in all *.md files my slide-separator (--s--) and createPage for each part
  2. slide.js → splice here the correct part of the html (kind'a ugly...)

or do you have an other good idea?

base example breaks

after downloading and running gatsby develop i get this error:

➜  my-slides git:(master) ✗ gatsby develop
success open and validate gatsby-configs — 0.004 s
success load plugins — 0.389 s
success onPreInit — 0.010 s
success initialize cache — 0.015 s
success copy gatsby files — 0.061 s
success onPreBootstrap — 0.002 s
success source and transform nodes — 0.036 s
success building schema — 0.163 s
success createPages — 0.030 s
success createPagesStatefully — 0.024 s
success onPreExtractQueries — 0.001 s
success update schema — 0.021 s
error GraphQL Error Encountered 2 error(s):
- Unknown field 'allSlide' on type 'Query'. Source: document `IndexQuery` file: `GraphQL request`

  GraphQL request (10:9)
   9:         }
  10:         allSlide {
              ^
  11:           edges {

- Unknown field 'slide' on type 'Query'.

      file: /Users/vincent/Development/my-slides/src/templates/slide.js



success extract queries from components — 0.085 s
success run static queries — 0.001 s
⠁ (node:95935) DeprecationWarning: Passing lineNumber and colNumber is deprecated to @babel/code-frame. Please use `codeFrameColumns`.
success run page queries — 0.013 s — 10/10 807.98 queries/second
success write out page data — 0.004 s
success write out redirect data — 0.000 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 2.323 s

 ERROR  Failed to compile with 1 errors                                                                     3:54:51 PM

 error  in ./src/templates/slide.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/templates/slide.js
  15:5  error  Cannot query field "slide" on type "Query". Did you mean "site"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


 @ ./.cache/sync-requires.js 15:58-128
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

✖ 「wdm」:
ERROR in ./src/templates/slide.js
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/templates/slide.js
  15:5  error  Cannot query field "slide" on type "Query". Did you mean "site"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ./.cache/sync-requires.js 15:58-128
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ 「wdm」: Failed to compile.
 WAIT  Compiling...                                                                                         3:54:51 PM

ℹ 「wdm」: Compiling...
 ERROR  Failed to compile with 2 errors                                                                     3:54:51 PM

 error  in ./src/layouts/index.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/layouts/index.js
  98:9  error  Cannot query field "allSlide" on type "Query". Did you mean "allSite" or "allFile"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


 @ ./node_modules/gatsby-plugin-layout/wrap-page.js 12:25-62
 @ ./node_modules/gatsby-plugin-layout/gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

 error  in ./src/templates/slide.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/templates/slide.js
  15:5  error  Cannot query field "slide" on type "Query". Did you mean "site"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


 @ ./.cache/sync-requires.js 15:58-128
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

✖ 「wdm」:
ERROR in ./src/layouts/index.js
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/layouts/index.js
  98:9  error  Cannot query field "allSlide" on type "Query". Did you mean "allSite" or "allFile"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ./node_modules/gatsby-plugin-layout/wrap-page.js 12:25-62
 @ ./node_modules/gatsby-plugin-layout/gatsby-browser.js
 @ ./.cache/api-runner-browser-plugins.js
 @ ./.cache/api-runner-browser.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./src/templates/slide.js
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/vincent/Development/my-slides/src/templates/slide.js
  15:5  error  Cannot query field "slide" on type "Query". Did you mean "site"?  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

 @ ./.cache/sync-requires.js 15:58-128
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ 「wdm」: Failed to compile.

I'm super new when it comes to React so this error baffles me.

Basic Build Fails

Followed the directions but the build fails.

STEP 1

$ gatsby new mysite https://github.com/fabe/gatsby-starter-deck
info Creating new site from git: https://github.com/fabe/gatsby-starter-deck.git
Cloning into 'mysite'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 192 (delta 0), reused 0 (delta 0), pack-reused 189
Receiving objects: 100% (192/192), 385.60 KiB | 1.96 MiB/s, done.
Resolving deltas: 100% (81/81), done.
success Created starter directory layout
info Installing packages...

> [email protected] install /Users/myaccount/Desktop/THESITE/mysite/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/myaccount/Desktop/THESITE/mysite/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" is installed via remote

> [email protected] install /Users/myaccount/Desktop/THESITE/mysite/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/myaccount/.npm/_libvips/libvips-8.7.0-darwin-x64.tar.gz

> [email protected] postinstall /Users/myaccount/Desktop/THESITE/mysite/node_modules/gatsby-telemetry
> node src/postinstall.js


> [email protected] postinstall /Users/myaccount/Desktop/THESITE/mysite/node_modules/cwebp-bin
> node lib/install.js

  � cwebp pre-build test passed successfully

> [email protected] postinstall /Users/myaccount/Desktop/THESITE/mysite/node_modules/mozjpeg
> node lib/install.js

  � mozjpeg pre-build test passed successfully

> [email protected] postinstall /Users/myaccount/Desktop/THESITE/mysite/node_modules/pngquant-bin
> node lib/install.js

  � pngquant pre-build test passed successfully
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

added 1931 packages from 1034 contributors and audited 26638 packages in 79.202s
found 0 vulnerabilities

info Initialising git in mysite
Initialized empty Git repository in /Users/myaccount/Desktop/THESITE/mysite/.git/
info Create initial git commit in mysite
$
$

STEP 2

$ yarn build
yarn run v1.15.2
$ gatsby build
success open and validate gatsby-configs � 0.007 s
success load plugins � 0.987 s
success onPreInit � 0.112 s
success delete html and css files from previous builds � 0.006 s
success initialize cache � 0.008 s
success copy gatsby files � 0.064 s
success onPreBootstrap � 0.005 s
success source and transform nodes � 0.088 s
success building schema � 0.336 s
success createPages � 0.152 s
success createPagesStatefully � 0.057 s
success onPreExtractQueries � 0.009 s
success update schema � 0.058 s
error GraphQL Error Encountered 2 error(s):
- Unknown field 'allSlide' on type 'Query'. Source: document `IndexQuery` file: `GraphQL request`

  GraphQL request (10:9)
   9:         }
  10:         allSlide {
              ^
  11:           edges {

- Unknown field 'slide' on type 'Query'.

      file: /Users/myaccount/Desktop/THESITE/mysite/src/templates/slide.js



error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
$

Add hot reloading for new slides

While hot reloading works on existing slides, adding new ones to the deck doesn't create new pages. This should be possible. Adding a createPage to the onCreateNode handler doesn't work AFAIK.

Mdx ?

It's using md, while it could be more interesting to build this with mdx.

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.