Skip to content

Commit

Permalink
Add support for client-only paths & example site for this
Browse files Browse the repository at this point in the history
  • Loading branch information
KyleAMathews committed May 11, 2017
1 parent 6413cdf commit fd0dcc3
Show file tree
Hide file tree
Showing 17 changed files with 374 additions and 17 deletions.
8 changes: 8 additions & 0 deletions examples/client-only-paths/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"env": {
"browser": true
},
"globals": {
"graphql": false
}
}
6 changes: 6 additions & 0 deletions examples/client-only-paths/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Client-only paths

https://client-only-paths.gatsbyjs.org

Example site that demostrates how to build Gatsby sites
with paths that are client-only.
14 changes: 14 additions & 0 deletions examples/client-only-paths/gatsby-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
module.exports = {
siteMetadata: {
title: `Client only paths`,
},
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: `UA-93349937-2`,
},
},
`gatsby-plugin-offline`,
],
}
19 changes: 19 additions & 0 deletions examples/client-only-paths/gatsby-node.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)

// Implement the Gatsby API “onUpsertPage”. This is
// called after every page is created.
exports.onUpsertPage = ({ page, boundActionCreators }) => {
const { upsertPage } = boundActionCreators
return new Promise((resolve, reject) => {
// Make the front page match everything client side.
// Normally your paths should be a bit more judicious.
if (page.path === `/` && !page.matchPath) {
page.matchPath = `/:path`
upsertPage(page)
}
resolve()
})
}
29 changes: 29 additions & 0 deletions examples/client-only-paths/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "gatsby-example-using-drupal",
"private": true,
"description": "Gatsby example site using the Drupal source plugin",
"version": "1.0.0",
"author": "Kyle Mathews <[email protected]>",
"dependencies": {
"gatsby": "canary",
"gatsby-link": "canary",
"gatsby-plugin-google-analytics": "canary",
"gatsby-plugin-offline": "canary",
"gatsby-source-drupal": "canary",
"lodash": "^4.16.4",
"react-addons-css-transition-group": "^15.5.2",
"react-typography": "^0.15.0",
"slash": "^1.0.0",
"typography": "^0.15.8",
"typography-breakpoint-constants": "^0.14.0"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build"
}
}
56 changes: 56 additions & 0 deletions examples/client-only-paths/src/html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from "react"
import { TypographyStyle } from "react-typography"
import typography from "./utils/typography"

let stylesStr
if (process.env.NODE_ENV === `production`) {
try {
stylesStr = require(`!raw-loader!../public/styles.css`)
} catch (e) {
console.log(e)
}
}

module.exports = React.createClass({
render() {
let css
if (process.env.NODE_ENV === `production`) {
css = (
<style
id="gatsby-inlined-css"
dangerouslySetInnerHTML={{ __html: stylesStr }}
/>
)
}

return (
<html op="news" lang="en">
<head>
{this.props.headComponents}

<meta name="referrer" content="origin" />
<meta charSet="utf-8" />
<meta
name="description"
content="Gatsby example site demoing client only paths"
/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Gatsby Client Only Paths</title>
<TypographyStyle typography={typography} />
{css}
</head>
<body>
<div
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
},
})
30 changes: 30 additions & 0 deletions examples/client-only-paths/src/layouts/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react"
import Link from "gatsby-link"

import { rhythm } from "../utils/typography"

class DefaultLayout extends React.Component {
render() {
return (
<div
style={{
margin: `0 auto`,
marginTop: rhythm(1.5),
marginBottom: rhythm(1.5),
maxWidth: 650,
paddingLeft: rhythm(3 / 4),
paddingRight: rhythm(3 / 4),
}}
>
<Link style={{ textDecoration: `none` }} to="/">
<h3 style={{ color: `tomato`, marginBottom: rhythm(1.5) }}>
Example of adding client only paths
</h3>
</Link>
{this.props.children()}
</div>
)
}
}

export default DefaultLayout
114 changes: 114 additions & 0 deletions examples/client-only-paths/src/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import React from "react"
import Link from "gatsby-link"
import ReactCSSTransitionGroup from "react-addons-css-transition-group"
import { Route, Redirect } from "react-router-dom"

import "./main.css"

class AnimationExample extends React.Component {
render() {
return (
<div style={{ position: `relative`, minHeight: `80vh` }}>
<Route
render={({ location }) => (
<div style={styles.fill}>
<Route
exact
path="/"
render={() => <Redirect to="/10/90/50" />}
/>

<ul style={styles.nav}>
<NavLink to="/10/90/50">Red</NavLink>
<NavLink to="/120/100/40">Green</NavLink>
<NavLink to="/200/100/40">Blue</NavLink>
<NavLink to="/310/100/50">Pink</NavLink>
</ul>

<div style={styles.content}>
<ReactCSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{/* no different than other usage of
ReactCSSTransitionGroup, just make
sure to pass `location` to `Route`
so it can match the old location
as it animates out
*/}
<Route
location={location}
key={location.key}
path="/:h/:s/:l"
component={HSL}
/>
</ReactCSSTransitionGroup>
</div>
</div>
)}
/>
</div>
)
}
}

const NavLink = props => (
<li style={styles.navItem}>
<Link {...props} style={{ color: "inherit" }} />
</li>
)

const HSL = ({ match: { params } }) => (
<div
style={{
...styles.fill,
...styles.hsl,
background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`,
}}
>
hsl({params.h}, {params.s}%, {params.l}%)
</div>
)

const styles = {}

styles.fill = {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
}

styles.content = {
...styles.fill,
top: "40px",
textAlign: "center",
}

styles.nav = {
padding: 0,
margin: 0,
position: "absolute",
top: 0,
height: "40px",
width: "100%",
display: "flex",
}

styles.navItem = {
textAlign: "center",
flex: 1,
listStyleType: "none",
padding: "10px",
}

styles.hsl = {
...styles.fill,
color: "white",
paddingTop: "20px",
fontSize: "30px",
}

export default AnimationExample
10 changes: 10 additions & 0 deletions examples/client-only-paths/src/pages/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.fade-enter {
opacity: 0;
z-index: 1;
}

.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 250ms ease-in;
}

38 changes: 38 additions & 0 deletions examples/client-only-paths/src/utils/typography.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Typography from "typography"
import {
MOBILE_MEDIA_QUERY,
TABLET_MEDIA_QUERY,
} from "typography-breakpoint-constants"

const options = {
baseFontSize: `18px`,
baseLineHeight: 1.45,
blockMarginBottom: 0.75,
scaleRatio: 2.15,
overrideStyles: ({ rhythm, scale }, options) => ({
"h1,h2,h3,h4": {
lineHeight: 1.2,
},
[TABLET_MEDIA_QUERY]: {
// Make baseFontSize on mobile 17px.
html: {
fontSize: `${17 / 16 * 100}%`,
},
},
[MOBILE_MEDIA_QUERY]: {
// Make baseFontSize on mobile 16px.
html: {
fontSize: `${16 / 16 * 100}%`,
},
},
}),
}

const typography = new Typography(options)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
typography.injectStyles()
}

export default typography
2 changes: 0 additions & 2 deletions packages/gatsby/lib/cache-dir/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ if (Root.default) {
Root = Root.default
}

console.log(Root)

ReactDOM.render(
<HotContainer>
<Root />
Expand Down
Loading

0 comments on commit fd0dcc3

Please sign in to comment.