Cornell DrupalCamp 2019 Presentation

Gatsby.js and Drupal

By: Alex Cooper

Pantheon

Netlify

GitHub

	const name = 'Josh Perez';
	const element = <h1>Hello, {name}</h1>;

	ReactDOM.render(
	element,
	document.getElementById('root')
	);

	function formatName(user) {
	return user.firstName + ' ' + user.lastName;
	}

	const user = {
	firstName: 'Harper',
	lastName: 'Perez'
	};

	const element = (
	<h1>
	Hello, {formatName(user)}!
	</h1>
	);

	ReactDOM.render(
	element,
	document.getElementById('root')
	);

	function getGreeting(user) {
	if (user) {
	return <h1>Hello, {formatName(user)}!</h1>;
	}
	return <h1>Hello, Stranger.</h1>;
	}

	class Example extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	count: 0
	};
	}

	render() {
	return (
	<div>
	<p>You clicked {this.state.count} times</p>
	<button onclick="{()" ==""> this.setState({ count: this.state.count + 1 })}>
	Click me
	</button>
	</div>
	);
	}
	}

	import React, { useState } from 'react';

	function Example() {
	// Declare a new state variable, which we'll call "count"
	const [count, setCount] = useState(0);

	return (
	<div>
	<p>You clicked {count} times</p>
	<button onclick="{()" ==""> setCount(count + 1)}>
	Click me
	</button>
	</div>
	);
	}

	/**
	* Implement Gatsby's Node APIs in this file.
	*
	* See: https://www.gatsbyjs.org/docs/node-apis/
	*/

	// You can delete this file if you're not using it

	module.exports = {
	siteMetadata: {
	title: `Gatsby Default Starter`,
	description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
	author: `@gatsbyjs`,
	},
	plugins: [
	`gatsby-plugin-react-helmet`,
	{
	resolve: `gatsby-source-filesystem`,
	options: {
	name: `images`,
	path: `${__dirname}/src/images`,
	},
	},
	`gatsby-transformer-sharp`,
	`gatsby-plugin-sharp`,
	{
	resolve: `gatsby-plugin-manifest`,
	options: {
	name: `gatsby-starter-default`,
	short_name: `starter`,
	start_url: `/`,
	background_color: `#663399`,
	theme_color: `#663399`,
	display: `minimal-ui`,
	icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
	},
	},
	// this (optional) plugin enables Progressive Web App + Offline functionality
	// To learn more, visit: https://gatsby.dev/offline
	// `gatsby-plugin-offline`,
	],
	}

	import React from "react"
	import { Link } from "gatsby"

	import Layout from "../components/layout"
	import Image from "../components/image"
	import SEO from "../components/seo"

	const IndexPage = () => (
	<layout>
	<seo title="Home">
	<h1>Hi people</h1>
	<p>Welcome to your new Gatsby site.</p>
	<p>Now go build something great.</p>
	<div style="{{" maxwidth:="" `300px`,="" marginbottom:="" `1.45rem`="" }}="">
	<img>
	</div>
	<link to="/page-2/">Go to page 2
	</seo></layout>
	)

	export default IndexPage