Skip to content
Permalink
Browse files

use env variables for things like title, desc, url. also include inst…

…ructions in the README on how to use this site.
  • Loading branch information...
LekoArts committed Mar 20, 2019
1 parent 3446548 commit 14a62dd82e6dca6baef9355ee66c1c6846b2be4b
Showing with 24 additions and 9 deletions.
  1. +15 −0 README.md
  2. +5 −6 gatsby-config.js
  3. +3 −0 netlify.toml
  4. +1 −3 src/components/SEO.jsx
@@ -5,3 +5,18 @@ Source from [The Movie Database (TMDb)](https://www.themoviedb.org/) API (v3) in
Built with [gatsby-source-tmdb](https://github.com/LekoArts/gatsby-source-tmdb).

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/LekoArts/gatsby-source-tmdb-example)

## How to use

1. Create an account on GitHub
1. Create an account/Login on [The Movie Database](https://www.themoviedb.org/) and grab your [API Key](https://developers.themoviedb.org/3/getting-started/introduction)
1. Create your [Session ID](https://developers.themoviedb.org/3/authentication/how-do-i-generate-a-session-id)
1. Create a new [request token](https://developers.themoviedb.org/3/authentication/create-request-token) by inserting your API key into the `api_key` field on the "Try it out" tab
1. Create a new [Session ID](https://developers.themoviedb.org/3/authentication/create-session) by going to the "Try it out" tab, insert your API key into the `api_key` field and insert your _request token_ into the **Request Body** json, so:
```json
{
"request_token": "place-your-request-token-here"
}
```
1. Add films/TV shows to your watchlist/favourites or create lists
1. Click on the "Deploy to Netlify" button, connect your GitHub and insert your API key and Session ID into the corresponding fields. Those two are mandatory, the rest can be left out or changed later.
@@ -1,14 +1,13 @@
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
path: `.env`,
})

module.exports = {
siteMetadata: {
title: 'The Movie Database - Gatsby',
description: 'Source from The Movie Database (TMDb) API (v3) in Gatsby.',
url: 'https://tmdb.lekoarts.de',
title: process.env.TITLE || 'The Movie Database - LekoArts',
description: process.env.DESC || 'Source from The Movie Database (TMDb) API (v3) in Gatsby.',
url: process.env.URL || 'https://tmdb.lekoarts.de',
logo: '/logo.png',
twitter: '@lekoarts_de',
},
plugins: [
'gatsby-plugin-react-helmet',
@@ -44,7 +43,7 @@ module.exports = {
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'The Movie Database - Gatsby',
name: process.env.TITLE || 'The Movie Database - LekoArts',
short_name: 'TMDb',
start_url: '/',
background_color: '#272B35',
@@ -1,3 +1,6 @@
[template.environment]
GATSBY_API_KEY = "Your TMDb API key"
SESSION_ID = "Your TMDb session ID"
TITLE = "The website's title"
DESC = "The website's description"
URL = "The websites's main URL (without a trailing slash)"
@@ -9,7 +9,7 @@ export default class SEO extends Component {
query={query}
render={({
site: {
siteMetadata: { title, description, url, logo, twitter },
siteMetadata: { title, description, url, logo },
},
}) => (
<Helmet>
@@ -28,7 +28,6 @@ export default class SEO extends Component {
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${url}${logo}`} />
@@ -47,7 +46,6 @@ const query = graphql`
description
url
logo
twitter
}
}
}

0 comments on commit 14a62dd

Please sign in to comment.
You can’t perform that action at this time.