mirror of
https://github.com/fabe/gatsby-starter-deck.git
synced 2024-09-11 03:55:26 +03:00
Use single md file instead of multiple.
This commit is contained in:
parent
554ff23336
commit
bb06de9365
@ -2,30 +2,24 @@ module.exports = {
|
||||
siteMetadata: {
|
||||
name: `Fabian Schultz`,
|
||||
title: `Gatsby Deck`,
|
||||
date: `November 23, 2017`
|
||||
date: `November 23, 2017`,
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-react-helmet`,
|
||||
`gatsby-plugin-offline`,
|
||||
{
|
||||
resolve: `gatsby-transformer-remark`,
|
||||
options: {
|
||||
plugins: [`gatsby-remark-smartypants`]
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `slides`,
|
||||
path: `${__dirname}/src/pages/`
|
||||
}
|
||||
path: `${__dirname}/src`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-postcss-sass`,
|
||||
options: {
|
||||
postCssPlugins: [],
|
||||
precision: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
precision: 8,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
@ -1,4 +1,8 @@
|
||||
const path = require('path');
|
||||
const matter = require('gray-matter');
|
||||
const remark = require('remark');
|
||||
const recommended = require('remark-preset-lint-recommended');
|
||||
const html = require('remark-html');
|
||||
|
||||
// Implement the Gatsby API “onCreatePage”. This is
|
||||
// called after every page is created.
|
||||
@ -8,7 +12,7 @@ exports.onCreatePage = ({ page, boundActionCreators }) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Remove trailing slash
|
||||
const newPage = Object.assign({}, page, {
|
||||
path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``)
|
||||
path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``),
|
||||
});
|
||||
|
||||
if (newPage.path !== page.path) {
|
||||
@ -29,14 +33,8 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
||||
|
||||
return graphql(`
|
||||
{
|
||||
allMarkdownRemark {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
fileAbsolutePath
|
||||
id
|
||||
}
|
||||
}
|
||||
markdownRemark(fileAbsolutePath: { regex: "/slides/" }) {
|
||||
rawMarkdownBody
|
||||
}
|
||||
}
|
||||
`).then(result => {
|
||||
@ -44,15 +42,26 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
|
||||
return Promise.reject(result.errors);
|
||||
}
|
||||
|
||||
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
|
||||
const absolutePath = node.fileAbsolutePath;
|
||||
const fileName = path.basename(absolutePath, path.extname(absolutePath));
|
||||
console.log(result);
|
||||
|
||||
createPage({
|
||||
path: fileName,
|
||||
component: blogPostTemplate,
|
||||
context: { absolutePath }
|
||||
});
|
||||
const slides = result.data.markdownRemark.rawMarkdownBody
|
||||
.split('---\n')
|
||||
.map(rawMarkdownBody => rawMarkdownBody.trim());
|
||||
|
||||
slides.forEach((slide, index) => {
|
||||
remark()
|
||||
.use(recommended)
|
||||
.use(html)
|
||||
.process(slide, (err, file) => {
|
||||
createPage({
|
||||
path: `/${index + 1}`,
|
||||
component: blogPostTemplate,
|
||||
context: {
|
||||
html: String(file),
|
||||
absolutePath: process.cwd() + `/${index + 1}.md`,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
@ -11,12 +11,14 @@
|
||||
"gatsby-plugin-offline": "^1.0.13",
|
||||
"gatsby-plugin-postcss-sass": "^1.0.16",
|
||||
"gatsby-plugin-react-helmet": "^1.0.8",
|
||||
"gatsby-remark-smartypants": "^1.4.10",
|
||||
"gatsby-source-filesystem": "^1.5.18",
|
||||
"gatsby-transformer-remark": "^1.7.31",
|
||||
"gray-matter": "^4.0.1",
|
||||
"history": "^4.7.2",
|
||||
"react-swipeable": "^4.2.0",
|
||||
"react-transition-group": "^2.2.1"
|
||||
"react-transition-group": "^2.2.1",
|
||||
"remark": "^9.0.0",
|
||||
"remark-html": "^7.0.0",
|
||||
"remark-preset-lint-recommended": "^3.0.2"
|
||||
},
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
|
@ -30,14 +30,8 @@ class TemplateWrapper extends Component {
|
||||
navigate = ({ keyCode }) => {
|
||||
const now = parseInt(location.pathname.substr(1));
|
||||
|
||||
const slides = this.props.data.allMarkdownRemark.edges.filter(
|
||||
({ node }) => {
|
||||
const id = node.fileAbsolutePath.replace(/^.*[\\\/]/, '').split('.')[0];
|
||||
|
||||
if (id && id !== 404) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
const slides = this.props.data.markdownRemark.rawMarkdownBody.split(
|
||||
'---\n'
|
||||
);
|
||||
|
||||
if (now) {
|
||||
@ -66,8 +60,9 @@ class TemplateWrapper extends Component {
|
||||
return (
|
||||
<div>
|
||||
<Helmet
|
||||
title={`${data.site.siteMetadata.title} — ${data.site.siteMetadata
|
||||
.name}`}
|
||||
title={`${data.site.siteMetadata.title} — ${
|
||||
data.site.siteMetadata.name
|
||||
}`}
|
||||
/>
|
||||
<Header
|
||||
name={data.site.siteMetadata.name}
|
||||
@ -101,12 +96,8 @@ export const pageQuery = graphql`
|
||||
date
|
||||
}
|
||||
}
|
||||
allMarkdownRemark {
|
||||
edges {
|
||||
node {
|
||||
fileAbsolutePath
|
||||
}
|
||||
}
|
||||
markdownRemark(fileAbsolutePath: { regex: "/slides/" }) {
|
||||
rawMarkdownBody
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -1,3 +0,0 @@
|
||||
# Gatsby Deck
|
||||
|
||||
Create presentations using Gatsby & React.
|
@ -1,5 +0,0 @@
|
||||
> Inscrutable icons litter the face of the devices even though the research
|
||||
> community has long demonstrated that people cannot remember the meaning of
|
||||
> more than a small number of icons […] Who can remember what each icon
|
||||
> means? Not me.
|
||||
> <cite>Don Norman</cite>
|
@ -1 +0,0 @@
|
||||
# 🤫
|
@ -1,7 +0,0 @@
|
||||
## Slides are written in Markdown!
|
||||
|
||||
Here's the source of the first slide:
|
||||
|
||||
# Gatsby Deck
|
||||
|
||||
Create presentations using Gatsby & React.
|
@ -1,6 +0,0 @@
|
||||
![Monkey](//i.imgur.com/PnbINJ6.gif)
|
||||
|
||||
🌟 Star it on [GitHub](//github.com/fabe/gatsby-deck),
|
||||
or create your own with:
|
||||
|
||||
gatsby new my-slides https://github.com/fabe/gatsby-starter-deck
|
34
src/pages/slides.md
Normal file
34
src/pages/slides.md
Normal file
@ -0,0 +1,34 @@
|
||||
# Gatsby Deck
|
||||
|
||||
Create presentations using Gatsby & React.
|
||||
|
||||
---
|
||||
|
||||
> Inscrutable icons litter the face of the devices even though the research
|
||||
> community has long demonstrated that people cannot remember the meaning of
|
||||
> more than a small number of icons […] Who can remember what each icon
|
||||
> means? Not me.
|
||||
> <cite>Don Norman</cite>
|
||||
|
||||
---
|
||||
|
||||
# 🤫
|
||||
|
||||
---
|
||||
|
||||
## Slides are written in Markdown!
|
||||
|
||||
Here's the source of the first slide:
|
||||
|
||||
# Gatsby Deck
|
||||
|
||||
Create presentations using Gatsby & React.
|
||||
|
||||
---
|
||||
|
||||
![Monkey](//i.imgur.com/PnbINJ6.gif)
|
||||
|
||||
🌟 Star it on [GitHub](//github.com/fabe/gatsby-deck),
|
||||
or create your own with:
|
||||
|
||||
gatsby new my-slides https://github.com/fabe/gatsby-starter-deck
|
@ -3,14 +3,6 @@ import React from 'react';
|
||||
export default ({ data, pathContext, transition }) => (
|
||||
<div
|
||||
style={transition && transition.style}
|
||||
dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
|
||||
dangerouslySetInnerHTML={{ __html: pathContext.html }}
|
||||
/>
|
||||
);
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query SlideByPath($absolutePath: String!) {
|
||||
markdownRemark(fileAbsolutePath: { eq: $absolutePath }) {
|
||||
html
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user