fabe / gatsby-starter-deck Goto Github PK
View Code? Open in Web Editor NEW🗣 Create presentations using Gatsby, React & Markdown.
Home Page: https://gatsby-deck.netlify.com
License: MIT License
🗣 Create presentations using Gatsby, React & Markdown.
Home Page: https://gatsby-deck.netlify.com
License: MIT License
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.
Do importing component and declare on slide .md file works?
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.
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:
exports.createPages
→ search in all *.md
files my slide-separator (--s--
) and createPage
for each partslide.js
→ splice here the correct part of the html (kind'a ugly...)or do you have an other good idea?
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.
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.
$
Being able to link local images in the slides should be possible.
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.
Because of the redirect from index.js#L6 to the first slide, you can't to go back in history from there. Maybe think about using history.replace
somehow instead?
It's using md, while it could be more interesting to build this with mdx.
Large images are overflowing or cropping in height. The ability to adjust max image sizes would be nice.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.