-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for client-only paths & example site for this
- Loading branch information
1 parent
6413cdf
commit fd0dcc3
Showing
17 changed files
with
374 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"env": { | ||
"browser": true | ||
}, | ||
"globals": { | ||
"graphql": false | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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`, | ||
], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
) | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.