Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC] Nested Templates (and wrapping JavaScript with templates) #1895

Closed
wants to merge 59 commits into from
Closed
Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
561acaa
layout example structure for templates that javascript can use
jbolda Aug 19, 2017
559dc23
uncomment chunks from js template
jbolda Aug 19, 2017
296076d
rename markdown post class
jbolda Aug 20, 2017
d064183
simplify js blog post that we can get to console.log
jbolda Aug 20, 2017
03b1f9c
add query to js template
jbolda Aug 20, 2017
bf008a0
start working on nested templates
jbolda Aug 20, 2017
8e46c57
forgot to delete console.log
jbolda Aug 20, 2017
b3b0b52
update reducers to handle arrays
jbolda Aug 20, 2017
6b2ef46
change component in gatsby-node example to array
jbolda Aug 21, 2017
c59ee2f
comment on expectations in javascript template
jbolda Aug 21, 2017
39e7d32
loader will set pageComponent via syncRequires
jbolda Aug 21, 2017
f30f3f0
mututate createPages component into array always, easier to consider
jbolda Aug 23, 2017
45542c5
update page runners and writers to expect component as array
jbolda Aug 23, 2017
f73cc32
layouts are strings, and run through page-query-runner
jbolda Aug 23, 2017
1a66164
seems the component is undefined sometimes as well?
jbolda Aug 23, 2017
1169ead
Merge remote-tracking branch 'upstream/master' into templates-wrappin…
jbolda Aug 23, 2017
0d9fed7
update layout graphql for new siteMetadata format
jbolda Aug 23, 2017
fbb0303
forgot to update prop reference
jbolda Aug 23, 2017
08777c9
loader accepts component as array
jbolda Aug 23, 2017
eee56ff
nest the templates, data is missing though
jbolda Aug 23, 2017
69d612a
forgot a console.log
jbolda Aug 23, 2017
c298105
flatten component requires array
jbolda Aug 23, 2017
e326234
normalize paths otherwise match on path doesn't work
jbolda Aug 23, 2017
896db95
clean up console.log
jbolda Aug 23, 2017
e049687
update jsBlogPostTemplate to accept graphql based on page
jbolda Aug 23, 2017
5897557
add componentChunkName as an object key on josn data
jbolda Sep 3, 2017
c0dbec7
fix json file writing to add to existing json, was overwritting
jbolda Sep 4, 2017
90f63f1
add component property to look up proper json data using componentChu…
jbolda Sep 4, 2017
5c9d351
update example to use js template for blog posts, use new layouts as …
jbolda Sep 5, 2017
8457435
clarify where layouts come from
jbolda Sep 5, 2017
36a280d
add scripts to help in core dev
jbolda Sep 8, 2017
5edd70c
merge in upstream
jbolda Sep 8, 2017
6ed2242
delete files that didn't delete in the upstream merge?
jbolda Sep 8, 2017
b6798b0
sometimes dates on frontmatter are undefined which throws errors on J…
jbolda Sep 8, 2017
c2c3888
update production files, build completes, error on loader during serve
jbolda Sep 9, 2017
7d9aee7
delete console.log before I forget
jbolda Sep 9, 2017
3f84451
missed a few more console.log
jbolda Sep 9, 2017
a54f987
fixing various loader errors, still errors on js hyerate on page
jbolda Sep 13, 2017
a74bb78
simplify article variables
jbolda Sep 16, 2017
6fe38ee
now componentChunkName can be set in prod-app
jbolda Sep 16, 2017
478adb6
loader.fetchResource doesn't expect an array
jbolda Sep 16, 2017
ec15bdd
update test snapshots --build-all
jbolda Sep 17, 2017
cdf8d54
merge from upstream --build-all
jbolda Sep 17, 2017
ea011fd
update snapshot with normalized path
jbolda Sep 19, 2017
a6a505a
idk why this changed the first time...
jbolda Sep 19, 2017
dac2eec
Merge remote-tracking branch 'upstream/master' into templates-wrappin…
jbolda Sep 19, 2017
77ef756
update docjs snapshot --build-all
jbolda Sep 19, 2017
3f22be3
Merge remote-tracking branch 'upstream/master' into templates-wrappin…
jbolda Sep 20, 2017
3909cae
merge from upstream
jbolda Sep 20, 2017
b1113cd
template restructure (psuedo code because all the installs broke)
jbolda Sep 20, 2017
d17f355
finish off using-js template pseudo code
jbolda Sep 21, 2017
0c4be6d
/contact wasn't being created
jbolda Sep 21, 2017
7cb3388
fix dev 404
jbolda Sep 24, 2017
1862bea
merge from upstream
jbolda Sep 25, 2017
986a0ce
rename variable in nested, based on merge
jbolda Sep 25, 2017
e9a264d
Merge remote-tracking branch 'upstream/master' into templates-wrappin…
jbolda Sep 26, 2017
9596e2b
update transformer-docjs snapshot
jbolda Sep 26, 2017
6c1e622
test fails locally, but passes on server
jbolda Sep 26, 2017
2cefaeb
add redux page multi-component test --build-all
jbolda Sep 26, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions examples/using-javascript-transforms/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
}

exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
const { createPage, createLayout } = boundActionCreators

return new Promise((resolve, reject) => {
const pages = []
const markdownTemplate = path.resolve(`src/templates/markdown.js`)
const markdownTemplate = path.resolve(`src/templates/blog-post-markdown.js`)
const javascriptTemplate = path.resolve(`src/templates/blog-post-javascript.js`)

// Query for all markdown "nodes" and for the slug we previously created.
resolve(
Expand Down Expand Up @@ -76,13 +77,21 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
// ideally we would want to use layoutType to
// decide which (nested) layout to use, but
// gatsby currently doesnt support this.
if (
frontmatter.layoutType === `post` ||
frontmatter.layoutType === `page`
) {
if (frontmatter.layoutType === `post`) {
createPage({
path: frontmatter.path, // required
component: markdownTemplate,
layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically
context: {
layoutType: frontmatter.layoutType,
slug: edge.node.fields.slug,
},
})
} else if (frontmatter.layoutType === `page`) {
createPage({
path: frontmatter.path, // required
component: markdownTemplate,
layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically
context: {
layoutType: frontmatter.layoutType,
slug: edge.node.fields.slug,
Expand All @@ -98,16 +107,17 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
result.data.allJsFrontmatter.edges.forEach(edge => {
let frontmatter = edge.node.data
// see above
if (
frontmatter.layoutType === `post` ||
frontmatter.layoutType === `page`
) {
if (frontmatter.layoutType === `post`) {
createPage({
path: frontmatter.path, // required
// Note, we can't have a template, but rather require the file directly.
// Templates are for converting non-react into react. jsFrontmatter
// picks up all of the javascript files. We have only written these in react.
component: path.resolve(edge.node.fileAbsolutePath),
component: [
javascriptTemplate,
path.resolve(edge.node.fileAbsolutePath)
],
layout: 'blogPost', // this matches the filename of src/layouts/blogPost.js, layout created automatically
context: {
layoutType: frontmatter.layoutType,
slug: edge.node.fields.slug,
Expand All @@ -117,6 +127,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
createPage({
path: `/`, // required, we don't have frontmatter for this page hence separate if()
component: path.resolve(edge.node.fileAbsolutePath),
layout: 'insetPage', // this matches the filename of src/layouts/insetPage.js, layout created automatically
context: {
slug: edge.node.fields.slug,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ class choroplethBase extends React.Component {
}

render() {
console.log(this)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why console.log here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using them to test, and forgot to delete them.

let data = this.props.data.markdownRemark
let html = data.html
let frontmatter = this.props.data.jsFrontmatter.data
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ class choroplethAltBase extends React.Component {
}

render() {
console.log(this)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why console.log here

let data = this.props.data.markdownRemark
let html = data.html
let frontmatter = this.props.data.jsFrontmatter.data
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ class SiteLinks extends React.Component {
}

render() {
const siteMetadata = this.props.siteMetadata
const siteMetadata = this.props.data.site.siteMetadata

return (
<div className="blog-social">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import SiteLinks from "../SiteLinks"
class SiteSidebar extends React.Component {
render() {
const isHome = this.props.location.pathname === `/`
const siteMetadata = this.props.siteMetadata
const siteMetadata = this.props.data.site.siteMetadata
// TODO, deal with image more nice like

let header = (
Expand Down
55 changes: 55 additions & 0 deletions examples/using-javascript-transforms/src/layouts/blogPost.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from "react"
import Link from "gatsby-link"
import Helmet from "react-helmet"
import moment from "moment"

import MasterLayout from "./master"

class BlogPostTemplate extends React.Component {
render() {
let siteMetadata = this.props.data.site.siteMetadata

const home = (
<div className="nav">
<div className="container">
<div className="nav-left">
<Link className="nav-item is-tab is-active" to={`/`}>
Home
</Link>
</div>
</div>
</div>
)

let published = <div className="date-published" />

return (
<div>
<MasterLayout {...this.props}>
{home}
<div className="container">
{this.props.children()}
</div>
</MasterLayout>
</div>
)
}
}

export default BlogPostTemplate

export const pageQuery = graphql`
query BlogPostLayoutBySlug {
site {
siteMetadata {
title
siteDescr
siteAuthor
siteEmailUrl
siteEmailPretty
siteTwitterUrl
siteTwitterPretty
}
}
}
`
65 changes: 0 additions & 65 deletions examples/using-javascript-transforms/src/layouts/index.js

This file was deleted.

27 changes: 0 additions & 27 deletions examples/using-javascript-transforms/src/layouts/inset-page.js

This file was deleted.

49 changes: 49 additions & 0 deletions examples/using-javascript-transforms/src/layouts/insetPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import React from "react"
import SiteSidebar from "../components/SiteSidebar"

import MasterLayout from "./master"
// It would be nice to have props with data that we
// that we could push down into the sidebar. We can't
// so we just cheat and pull it out of a yaml for the
// time being.

class InsetPageTemplate extends React.Component {
render() {
const siteMetadata = this.props.data.site

return (
<div className="PageTemplate">
<MasterLayout {...this.props}>
<div className="section">
<div className="columns">
<div className="column is-one-quarter">
<SiteSidebar {...this.props} />
</div>
<div className="column">
{this.props.children()}
</div>
</div>
</div>
</MasterLayout>
</div>
)
}
}

export default InsetPageTemplate

export const pageQuery = graphql`
query InsetLayoutBySlug {
site {
siteMetadata {
title
siteDescr
siteAuthor
siteEmailUrl
siteEmailPretty
siteTwitterUrl
siteTwitterPretty
}
}
}
`
26 changes: 26 additions & 0 deletions examples/using-javascript-transforms/src/layouts/master.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from "react"
import * as PropTypes from "prop-types"
import Helmet from "react-helmet"
import "../static/css/base.scss"

class MasterLayout extends React.Component {
render() {
let siteMetadata = this.props.data.site.siteMetadata
let location = this.props.location.pathname

return (
<div className="MasterLayout">
<Helmet
defaultTitle={siteMetadata.title}
meta={[
{ name: `description`, content: siteMetadata.siteDescr },
{ name: `keywords`, content: `articles` },
]}
/>
{this.props.children}
</div>
)
}
}

export default MasterLayout
Loading