npm install --save gatsby-plugin-google-analytics gatsby-plugin-stripe
References:
Dependencies
Bearer Token Command:
curl -u '[API_KEY]:[API_SECRET_KEY]' \
--data 'grant_type=client_credentials' \
'https://api.twitter.com/oauth2/token'
Should Return:
{"token_type":"bearer","access_token":"AAAABBBA%3Dybthu0AsvQzoEOlfsdflk;jlk;545645645klj4tj"}
gatsby-config.js
{
resolve: `gatsby-source-twitter`,
options: {
credentials: {
consumer_key: process.env.TWITTER_CONSUMER_KEY,
consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
bearer_token: process.env.TWITTER_BREARER_TOKEN,
},
queries: {
HackersQuery: {
endpoint: "statuses/user_timeline",
params: {
screen_name: "hackersslackers",
include_rts: false,
exclude_replies: true,
tweet_mode: "extended",
count: 5,
},
},
},
},
},
allTwitterStatusesUserTimelineHackersTweets:
This allows us to query individual tweets from the source our plugin is configured for (a Twitter profile, in our case).
Each tweet we query for actually contains a respectable number of useful fields.
In addition to the raw tweet content, we can also receive each tweet's individual hashtags, embedded tweets, user details, and so forth.
twitterStatusesUserTimelineTweetQuery:
This query is centered around high-level metadata regarding a user's profile.
This is a great way to get a snapshot of a Twitter user's profile, and can be used to display a user's number of followers, total tweets, profile photo, location, etc.
import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
const TwitterWidget = ({ data }) => {
const tweets = data.allTwitterStatusesUserTimelineHackersTweets.edges
const user = data.twitterStatusesUserTimelineHackersTweets.user
return (
<>
<div className="widget twitter">
<div className="twitter-header">
<img src={user.profile_image_url_https} className="twitter-avatar" alt="twitter-avatar"/>
<div>
<a href={user.url} className="twitter-name">{user.name}</a>
<div className="twitter-user">@{user.screen_name}</div>
</div>
</div>
<div className="tweets">
{tweets.map(({ node }) => (
<div className="tweet" key={node.id}>
<p className="tweet-content">{node.full_text.split(`#`)[0].split(`http`)[0]}</p>
{node.entities.hashtags.length > 0 ? <div className="tweet-hastags">{node.entities.hashtags.map(({ text }) => (
<a href={`https://twitter.com/hashtag/${text}`} key={text} className="hashtag">#{text}</a>
))}</div> : null }
<div className="tweet-head">
{node.entities.urls.map(({ display_url }) => (
<a href={display_url} className="tweet-link" key="1">{ display_url }</a>
))}
<span className="date">{node.created_at.split(` `, 3).join(` `)}</span>
</div>
</div>
))}
</div>
</div>
</>
)
}
TwitterWidget.propTypes = {
data: PropTypes.shape({
allTwitterStatusesUserTimelineHackersTweets: PropTypes.shape({
full_text: PropTypes.string,
favorite_count: PropTypes.number,
retweet_count: PropTypes.number,
created_at: PropTypes.string,
id: PropTypes.string,
user: PropTypes.shape({
name: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
profile_image_url: PropTypes.string.isRequired,
screen_name: PropTypes.string.isRequired,
}),
entities: PropTypes.shape({
urls: PropTypes.arrayOf(
PropTypes.shape({
url: PropTypes.string,
}),
),
hashtags: PropTypes.arrayOf(
PropTypes.shape({
text: PropTypes.string,
}),
),
}),
}).isRequired,
twitterStatusesUserTimelineHackersTweets: PropTypes.shape({
user: PropTypes.shape({
profile_image_url_https: PropTypes.string,
name: PropTypes.string.isRequired,
url: PropTypes.string,
display_url: PropTypes.string,
screen_name: PropTypes.string.isRequired,
}).isRequired,
}),
}),
}
const TwitterQuery = props => (
<StaticQuery
query={graphql`
query TweetQuery {
allTwitterStatusesUserTimelineHackersTweets {
edges {
node {
full_text
favorite_count
retweet_count
created_at
id
user {
name
url
profile_image_url
screen_name
}
entities {
urls {
display_url
}
hashtags {
text
}
}
}
}
}
twitterStatusesUserTimelineHackersTweets {
user {
profile_image_url_https
name
url
screen_name
}
}
}`
}
render={data => <TwitterWidget data={data} {...props} />}
/>
)
export default TwitterQuery
import React from "react"
const buttonStyles = {
fontSize: "13px",
textAlign: "center",
color: "#fff",
outline: "none",
padding: "12px 60px",
boxShadow: "2px 5px 10px rgba(0,0,0,.1)",
backgroundColor: "rgb(255, 178, 56)",
borderRadius: "6px",
letterSpacing: "1.5px",
}
const Checkout = class extends React.Component {
// Initialise Stripe.js with your publishable key.
// You can find your key in the Dashboard:
// https://dashboard.stripe.com/account/apikeys
componentDidMount() {
this.stripe = window.Stripe("pk_test_IO25CKyOll75V93WOyjViUyR00wcfxjKAf")
}
async redirectToCheckout(event) {
event.preventDefault()
const { error } = await this.stripe.redirectToCheckout({
items: [{ sku: "sku_FzUu8r92gYQB7U", quantity: 1 }],
successUrl: `https://alexjslessor.com/success`,
cancelUrl: `http://alexjslessor.com/canceled`,
})
if (error) {
console.warn("Error:", error)
}
}
render() {
return (
<button
style={buttonStyles}
onClick={event => this.redirectToCheckout(event)}
>
Butts
</button>
)
}
}
export default Checkout
Place component button in page.
import Checkout from "../components/checkout"
...
...
...
<Checkout />
Refs:
Plugins: