├── .gitignore ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── gatsby ├── configQuery.js └── queryAll.js ├── package.json ├── src ├── components │ ├── header.js │ ├── layout.css │ └── layout.js ├── pages │ ├── 404.js │ ├── artists.js │ ├── index.js │ ├── records.js │ └── reviews.js └── templates │ ├── artist-detail.js │ ├── record-detail.js │ └── review-detail.js ├── static ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico └── favicons │ ├── chrome-192.png │ └── chrome-512.png └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # gatsby 2 | .cache/ 3 | public/ 4 | dist/ 5 | 6 | # misc 7 | .DS_Store 8 | .idea/ 9 | 10 | # npm dev 11 | #/*.js 12 | #!index.js 13 | package-lock.json 14 | tests 15 | 16 | # Logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | # Runtime data 24 | pids 25 | *.pid 26 | *.seed 27 | *.pid.lock 28 | 29 | # Directory for instrumented libs generated by jscoverage/JSCover 30 | lib-cov 31 | 32 | # Coverage directory used by tools like istanbul 33 | coverage 34 | 35 | # nyc test coverage 36 | .nyc_output 37 | 38 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 39 | .grunt 40 | 41 | # Bower dependency directory (https://bower.io/) 42 | bower_components 43 | 44 | # node-waf configuration 45 | .lock-wscript 46 | 47 | # Compiled binary addons (http://nodejs.org/api/addons.html) 48 | build/Release 49 | 50 | # Dependency directories 51 | node_modules/ 52 | jspm_packages/ 53 | 54 | # Typescript v1 declaration files 55 | typings/ 56 | 57 | # Optional npm cache directory 58 | .npm 59 | 60 | # Optional eslint cache 61 | .eslintcache 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This example is outdated. It uses an old way to connect GraphCMS to Gatsby via the `gatsby-source-graphcms` plugin. The up to date example can be found [here](https://github.com/GraphCMS/graphcms-examples/tree/master/current/gatsby-source-plugin-blog) 2 | 3 | # gatsby-graphcms-example 4 | 5 | Example of [@GraphCMS/gatsby-source-graphcms](https://github.com/GraphCMS/gatsby-source-graphcms) 6 | 7 | ## Install 8 | 9 | 1. `git clone https://github.com/GraphCMS/gatsby-graphcms-example.git && cd gatsby-graphcms-example/` 10 | 1. `yarn && yarn develop` 11 | 12 | ## GraphiQL 13 | 14 | For an kitchen sink GraphiQL query you can run on Gatsby’s 15 | graphql debugger at , try this 16 | link to preload with `gatsby develop` running: 17 | 18 | [Preload kitchen sink GraphiQL query](http://localhost:8000/___graphql?query=%7B%0A%20%20allArtist%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20artist%3A%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20picture%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20handle%0A%20%20%20%20%20%20%20%20%20%20width%0A%20%20%20%20%20%20%20%20%20%20height%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20records%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20allRecord%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20record%3A%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20artist%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20tracks%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20aliasedLength%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20cover%20%7B%0A%20%20%20%20%20%20%20%20%20%20handle%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20reviews%20%7B%0A%20%20%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20allReview%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20review%3A%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20createdAt%0A%20%20%20%20%20%20%20%20record%20%7B%0A%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20%20%20artist%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20slug%0A%20%20%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20review%0A%20%20%20%20%20%20%20%20rating%0A%20%20%20%20%20%20%20%20comments%20%7B%0A%20%20%20%20%20%20%20%20%20%20body%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A) 19 | 20 | It puts this in the console: 21 | 22 | ``` 23 | { 24 | allArtist { 25 | edges { 26 | artist: node { 27 | id 28 | name 29 | slug 30 | picture { 31 | id 32 | handle 33 | width 34 | height 35 | } 36 | records { 37 | id 38 | slug 39 | title 40 | } 41 | } 42 | } 43 | } 44 | allRecord { 45 | edges { 46 | record: node { 47 | id 48 | slug 49 | title 50 | artist { 51 | id 52 | slug 53 | name 54 | } 55 | tracks { 56 | id 57 | title 58 | aliasedLength 59 | } 60 | cover { 61 | handle 62 | } 63 | reviews { 64 | id 65 | slug 66 | title 67 | } 68 | } 69 | } 70 | } 71 | allReview { 72 | edges { 73 | review: node { 74 | id 75 | slug 76 | createdAt 77 | record { 78 | slug 79 | title 80 | artist { 81 | slug 82 | name 83 | } 84 | } 85 | title 86 | review 87 | rating 88 | comments { 89 | body 90 | } 91 | } 92 | } 93 | } 94 | } 95 | ``` 96 | 97 | ## Deploy 98 | 99 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/GraphCMS/gatsby-graphcms-example) 100 | 101 | ## Contributors 102 | 103 | * [@redmega](https://github.com/redmega) Angel Piscola 104 | * [@rafacm](https://github.com/rafacm) Rafael Cordones 105 | * [@hmeissner](https://github.com/hmeissner) Hugo Meissner 106 | * [@rdela](https://github.com/rdela) Ricky de Laveaga 107 | 108 | …[and you](https://github.com/GraphCMS/gatsby-source-graphcms/issues)? 109 | 110 | ## [Current limitations](https://github.com/GraphCMS/gatsby-source-graphcms#current-limitations) 111 | 112 | See https://github.com/GraphCMS/gatsby-source-graphcms for more. 113 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `Gatsby Source GraphCMS Example` 4 | }, 5 | plugins: [ 6 | `gatsby-plugin-react-helmet`, 7 | { 8 | resolve: `gatsby-source-graphcms`, 9 | options: { 10 | endpoint: `https://api.graphcms.com/simple/v1/vinylbase`, 11 | query: require("./gatsby/configQuery") 12 | } 13 | }, 14 | `gatsby-transformer-remark`, 15 | { 16 | resolve: `gatsby-plugin-manifest`, 17 | options: { 18 | name: `Gatsby Source GraphCMS Example`, 19 | short_name: `Gatsby + GraphCMS`, 20 | start_url: `/`, 21 | background_color: `#fff`, 22 | theme_color: `#61045f`, 23 | display: `minimal-ui`, 24 | icons: [ 25 | { 26 | src: `/favicons/chrome-192.png`, 27 | sizes: `192x192`, 28 | type: `image/png` 29 | }, 30 | { 31 | src: `/favicons/chrome-512.png`, 32 | sizes: `512x512`, 33 | type: `image/png` 34 | } 35 | ] 36 | } 37 | }, 38 | `gatsby-plugin-offline` 39 | ] 40 | }; 41 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`); 2 | const queryAll = require(`./gatsby/queryAll.js`); 3 | 4 | exports.onCreateNode = ({ node, actions }) => { 5 | const { createNode } = actions; 6 | if (node.internal.type === `Review`) { 7 | createNode({ 8 | id: `md-${node.id}`, 9 | parent: node.id, 10 | children: [], 11 | internal: { 12 | type: `${node.internal.type}Markdown`, 13 | mediaType: `text/markdown`, 14 | content: node.review, 15 | contentDigest: node.internal.contentDigest 16 | } 17 | }); 18 | } 19 | }; 20 | 21 | exports.createPages = ({ actions, graphql }) => { 22 | const { createPage } = actions; 23 | 24 | return new Promise((resolve, reject) => { 25 | const artistDetailPageTemplate = path.resolve( 26 | `./src/templates/artist-detail.js` 27 | ); 28 | const recordDetailPageTemplate = path.resolve( 29 | `./src/templates/record-detail.js` 30 | ); 31 | const reviewDetailPageTemplate = path.resolve( 32 | `./src/templates/review-detail.js` 33 | ); 34 | 35 | resolve( 36 | graphql(queryAll).then(result => { 37 | if (result.errors) { 38 | reject(result.errors); 39 | } 40 | 41 | const artists = result.data.allArtist.edges; 42 | artists.forEach(({ artist }) => { 43 | const path = `artists/` + artist.slug; 44 | createPage({ 45 | path, 46 | component: artistDetailPageTemplate, 47 | context: { 48 | id: artist.id 49 | } 50 | }); 51 | }); 52 | 53 | const records = result.data.allRecord.edges; 54 | records.forEach(({ record }) => { 55 | const path = `records/` + record.slug; 56 | createPage({ 57 | path, 58 | component: recordDetailPageTemplate, 59 | context: { 60 | id: record.id 61 | } 62 | }); 63 | }); 64 | 65 | const reviews = result.data.allReview.edges; 66 | reviews.forEach(({ review }) => { 67 | const path = `reviews/` + review.slug; 68 | createPage({ 69 | path, 70 | component: reviewDetailPageTemplate, 71 | context: { 72 | id: review.id, 73 | mdid: `md-` + review.id 74 | } 75 | }); 76 | }); 77 | }) 78 | ); 79 | }); 80 | }; 81 | -------------------------------------------------------------------------------- /gatsby/configQuery.js: -------------------------------------------------------------------------------- 1 | module.exports = `{ 2 | allArtists { 3 | id 4 | slug 5 | name 6 | picture { 7 | id 8 | handle 9 | width 10 | height 11 | } 12 | records { 13 | id 14 | slug 15 | title 16 | } 17 | } 18 | allRecords(orderBy: createdAt_DESC) { 19 | id 20 | slug 21 | title 22 | artist { 23 | id 24 | slug 25 | name 26 | } 27 | createdAt 28 | tracks { 29 | id 30 | title 31 | aliasedLength: length 32 | } 33 | cover { 34 | handle 35 | } 36 | reviews { 37 | id 38 | slug 39 | title 40 | } 41 | } 42 | allReviews(orderBy: createdAt_DESC) { 43 | id 44 | slug 45 | createdAt 46 | record { 47 | slug 48 | title 49 | artist { 50 | slug 51 | name 52 | } 53 | } 54 | title 55 | review 56 | rating 57 | comments { 58 | body 59 | } 60 | } 61 | }` 62 | -------------------------------------------------------------------------------- /gatsby/queryAll.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | module.exports = ` 4 | { 5 | allArtist { 6 | edges { 7 | artist: node { 8 | id 9 | name 10 | slug 11 | picture { 12 | id 13 | handle 14 | width 15 | height 16 | } 17 | records { 18 | id 19 | slug 20 | title 21 | } 22 | } 23 | } 24 | } 25 | allRecord { 26 | edges { 27 | record: node { 28 | id 29 | slug 30 | title 31 | artist { 32 | id 33 | slug 34 | name 35 | } 36 | tracks { 37 | id 38 | title 39 | aliasedLength 40 | } 41 | cover { 42 | handle 43 | } 44 | reviews { 45 | id 46 | slug 47 | title 48 | } 49 | } 50 | } 51 | } 52 | allReview { 53 | edges { 54 | review: node { 55 | id 56 | slug 57 | createdAt 58 | record { 59 | slug 60 | title 61 | artist { 62 | slug 63 | name 64 | } 65 | } 66 | title 67 | review 68 | rating 69 | comments { 70 | body 71 | } 72 | } 73 | } 74 | } 75 | } 76 | ` 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "name": "gatsby-graphcms-example", 4 | "description": "Gatsby example site using the GraphCMS source plugin", 5 | "keywords": [ 6 | "data", 7 | "example", 8 | "gatsby", 9 | "graphcms", 10 | "graphql", 11 | "source" 12 | ], 13 | "homepage": "https://github.com/GraphCMS/gatsby-graphcms-example", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/GraphCMS/gatsby-graphcms-example.git" 17 | }, 18 | "license": "MIT", 19 | "contributors": [ 20 | "Rafael Cordones ", 21 | "Hugo Meissner ", 22 | "Angel Piscola ", 23 | "Ricky de Laveaga (https://rdela.com)" 24 | ], 25 | "dependencies": { 26 | "gatsby": "2.0.115", 27 | "gatsby-link": "2.0.10", 28 | "gatsby-plugin-manifest": "2.0.17", 29 | "gatsby-plugin-offline": "2.0.22", 30 | "gatsby-plugin-react-helmet": "3.0.6", 31 | "gatsby-source-graphcms": "1.0.0-alpha.3", 32 | "gatsby-transformer-remark": "2.2.4", 33 | "react": "16.7.0", 34 | "react-dom": "16.7.0", 35 | "react-helmet": "5.2.0", 36 | "react-star-rating-component": "1.4.1" 37 | }, 38 | "scripts": { 39 | "build": "gatsby build", 40 | "develop": "gatsby develop", 41 | "format": "prettier-eslint --write \"src/**/*.js\" \"gatsby-*.js\"", 42 | "lint": "npm run format", 43 | "test": "echo \"Error: no test specified\" && exit 1" 44 | }, 45 | "devDependencies": { 46 | "prettier-eslint": "8.8.2", 47 | "prettier-eslint-cli": "4.7.1" 48 | }, 49 | "renovate": { 50 | "extends": [ 51 | "config:base" 52 | ], 53 | "labels": [ 54 | "renovate" 55 | ], 56 | "assignees": [ 57 | "rdela" 58 | ], 59 | "devDependencies": { 60 | "schedule": [ 61 | "on the first day of the month" 62 | ], 63 | "automerge": true, 64 | "major": { 65 | "automerge": false 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | 4 | const Header = ({ siteTitle }) => ( 5 |
12 |
19 |

20 | 27 | {siteTitle} 28 | 29 |

30 |
31 |
32 | ); 33 | 34 | export default Header; 35 | -------------------------------------------------------------------------------- /src/components/layout.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | } 9 | article, 10 | aside, 11 | details, 12 | figcaption, 13 | figure, 14 | footer, 15 | header, 16 | main, 17 | menu, 18 | nav, 19 | section, 20 | summary { 21 | display: block; 22 | } 23 | audio, 24 | canvas, 25 | progress, 26 | video { 27 | display: inline-block; 28 | } 29 | audio:not([controls]) { 30 | display: none; 31 | height: 0; 32 | } 33 | progress { 34 | vertical-align: baseline; 35 | } 36 | [hidden], 37 | template { 38 | display: none; 39 | } 40 | a { 41 | background-color: transparent; 42 | -webkit-text-decoration-skip: ink; 43 | text-decoration-skip: objects; 44 | text-decoration-skip-ink: auto; 45 | color: rebeccapurple; 46 | } 47 | a:active, 48 | a:hover { 49 | outline-width: 0; 50 | color: #a90cfb; 51 | } 52 | a:visited { 53 | color: #0b77bc; 54 | } 55 | abbr[title] { 56 | border-bottom: none; 57 | text-decoration: underline; 58 | text-decoration: underline dotted; 59 | } 60 | b, 61 | strong { 62 | font-weight: inherit; 63 | font-weight: bolder; 64 | } 65 | dfn { 66 | font-style: italic; 67 | } 68 | h1 { 69 | font-size: 2em; 70 | margin: 0.67em 0; 71 | } 72 | mark { 73 | background-color: #ff0; 74 | color: #000; 75 | } 76 | small { 77 | font-size: 80%; 78 | } 79 | sub, 80 | sup { 81 | font-size: 75%; 82 | line-height: 0; 83 | position: relative; 84 | vertical-align: baseline; 85 | } 86 | sub { 87 | bottom: -0.25em; 88 | } 89 | sup { 90 | top: -0.5em; 91 | } 92 | img { 93 | border-style: none; 94 | } 95 | svg:not(:root) { 96 | overflow: hidden; 97 | } 98 | code, 99 | kbd, 100 | pre, 101 | samp { 102 | font-family: monospace, monospace; 103 | font-size: 1em; 104 | } 105 | figure { 106 | margin: 1em 40px; 107 | } 108 | hr { 109 | box-sizing: content-box; 110 | height: 0; 111 | overflow: visible; 112 | } 113 | button, 114 | input, 115 | optgroup, 116 | select, 117 | textarea { 118 | font: inherit; 119 | margin: 0; 120 | } 121 | optgroup { 122 | font-weight: 700; 123 | } 124 | button, 125 | input { 126 | overflow: visible; 127 | } 128 | button, 129 | select { 130 | text-transform: none; 131 | } 132 | [type='reset'], 133 | [type='submit'], 134 | button, 135 | html [type='button'] { 136 | -webkit-appearance: button; 137 | } 138 | [type='button']::-moz-focus-inner, 139 | [type='reset']::-moz-focus-inner, 140 | [type='submit']::-moz-focus-inner, 141 | button::-moz-focus-inner { 142 | border-style: none; 143 | padding: 0; 144 | } 145 | [type='button']:-moz-focusring, 146 | [type='reset']:-moz-focusring, 147 | [type='submit']:-moz-focusring, 148 | button:-moz-focusring { 149 | outline: 1px dotted ButtonText; 150 | } 151 | fieldset { 152 | border: 1px solid silver; 153 | margin: 0 2px; 154 | padding: 0.35em 0.625em 0.75em; 155 | } 156 | legend { 157 | box-sizing: border-box; 158 | color: inherit; 159 | display: table; 160 | max-width: 100%; 161 | padding: 0; 162 | white-space: normal; 163 | } 164 | textarea { 165 | overflow: auto; 166 | } 167 | [type='checkbox'], 168 | [type='radio'] { 169 | box-sizing: border-box; 170 | padding: 0; 171 | } 172 | [type='number']::-webkit-inner-spin-button, 173 | [type='number']::-webkit-outer-spin-button { 174 | height: auto; 175 | } 176 | [type='search'] { 177 | -webkit-appearance: textfield; 178 | outline-offset: -2px; 179 | } 180 | [type='search']::-webkit-search-cancel-button, 181 | [type='search']::-webkit-search-decoration { 182 | -webkit-appearance: none; 183 | } 184 | ::-webkit-input-placeholder { 185 | color: inherit; 186 | opacity: 0.54; 187 | } 188 | ::-webkit-file-upload-button { 189 | -webkit-appearance: button; 190 | font: inherit; 191 | } 192 | html { 193 | font: 112.5%/1.45em georgia, serif; 194 | box-sizing: border-box; 195 | overflow-y: scroll; 196 | } 197 | * { 198 | box-sizing: inherit; 199 | } 200 | *:before { 201 | box-sizing: inherit; 202 | } 203 | *:after { 204 | box-sizing: inherit; 205 | } 206 | body { 207 | color: hsla(0, 0%, 0%, 0.8); 208 | font-family: georgia, serif; 209 | font-weight: normal; 210 | word-wrap: break-word; 211 | font-kerning: normal; 212 | -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 213 | -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 214 | -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 215 | font-feature-settings: 'kern', 'liga', 'clig', 'calt'; 216 | } 217 | img { 218 | max-width: 100%; 219 | margin-left: 0; 220 | margin-right: 0; 221 | margin-top: 0; 222 | padding-bottom: 0; 223 | padding-left: 0; 224 | padding-right: 0; 225 | padding-top: 0; 226 | margin-bottom: 1.45rem; 227 | } 228 | h1 { 229 | margin-left: 0; 230 | margin-right: 0; 231 | margin-top: 0; 232 | padding-bottom: 0; 233 | padding-left: 0; 234 | padding-right: 0; 235 | padding-top: 0; 236 | margin-bottom: 1.45rem; 237 | color: inherit; 238 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 239 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 240 | font-weight: bold; 241 | text-rendering: optimizeLegibility; 242 | font-size: 2.25rem; 243 | line-height: 1.1; 244 | } 245 | h2 { 246 | margin-left: 0; 247 | margin-right: 0; 248 | margin-top: 0; 249 | padding-bottom: 0; 250 | padding-left: 0; 251 | padding-right: 0; 252 | padding-top: 0; 253 | margin-bottom: 1.45rem; 254 | color: inherit; 255 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 256 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 257 | font-weight: bold; 258 | text-rendering: optimizeLegibility; 259 | font-size: 1.62671rem; 260 | line-height: 1.1; 261 | } 262 | h3 { 263 | margin-left: 0; 264 | margin-right: 0; 265 | margin-top: 0; 266 | padding-bottom: 0; 267 | padding-left: 0; 268 | padding-right: 0; 269 | padding-top: 0; 270 | margin-bottom: 1.45rem; 271 | color: inherit; 272 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 273 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 274 | font-weight: bold; 275 | text-rendering: optimizeLegibility; 276 | font-size: 1.38316rem; 277 | line-height: 1.1; 278 | } 279 | h4 { 280 | margin-left: 0; 281 | margin-right: 0; 282 | margin-top: 0; 283 | padding-bottom: 0; 284 | padding-left: 0; 285 | padding-right: 0; 286 | padding-top: 0; 287 | margin-bottom: 1.45rem; 288 | color: inherit; 289 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 290 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 291 | font-weight: bold; 292 | text-rendering: optimizeLegibility; 293 | font-size: 1rem; 294 | line-height: 1.1; 295 | } 296 | h5 { 297 | margin-left: 0; 298 | margin-right: 0; 299 | margin-top: 0; 300 | padding-bottom: 0; 301 | padding-left: 0; 302 | padding-right: 0; 303 | padding-top: 0; 304 | margin-bottom: 1.45rem; 305 | color: inherit; 306 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 307 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 308 | font-weight: bold; 309 | text-rendering: optimizeLegibility; 310 | font-size: 0.85028rem; 311 | line-height: 1.1; 312 | } 313 | h6 { 314 | margin-left: 0; 315 | margin-right: 0; 316 | margin-top: 0; 317 | padding-bottom: 0; 318 | padding-left: 0; 319 | padding-right: 0; 320 | padding-top: 0; 321 | margin-bottom: 1.45rem; 322 | color: inherit; 323 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 324 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 325 | font-weight: bold; 326 | text-rendering: optimizeLegibility; 327 | font-size: 0.78405rem; 328 | line-height: 1.1; 329 | } 330 | hgroup { 331 | margin-left: 0; 332 | margin-right: 0; 333 | margin-top: 0; 334 | padding-bottom: 0; 335 | padding-left: 0; 336 | padding-right: 0; 337 | padding-top: 0; 338 | margin-bottom: 1.45rem; 339 | } 340 | ul { 341 | margin-left: 1.45rem; 342 | margin-right: 0; 343 | margin-top: 0; 344 | padding-bottom: 0; 345 | padding-left: 0; 346 | padding-right: 0; 347 | padding-top: 0; 348 | margin-bottom: 1.45rem; 349 | list-style-position: outside; 350 | list-style-image: none; 351 | } 352 | ol { 353 | margin-left: 1.45rem; 354 | margin-right: 0; 355 | margin-top: 0; 356 | padding-bottom: 0; 357 | padding-left: 0; 358 | padding-right: 0; 359 | padding-top: 0; 360 | margin-bottom: 1.45rem; 361 | list-style-position: outside; 362 | list-style-image: none; 363 | } 364 | dl { 365 | margin-left: 0; 366 | margin-right: 0; 367 | margin-top: 0; 368 | padding-bottom: 0; 369 | padding-left: 0; 370 | padding-right: 0; 371 | padding-top: 0; 372 | margin-bottom: 1.45rem; 373 | } 374 | dd { 375 | margin-left: 0; 376 | margin-right: 0; 377 | margin-top: 0; 378 | padding-bottom: 0; 379 | padding-left: 0; 380 | padding-right: 0; 381 | padding-top: 0; 382 | margin-bottom: 1.45rem; 383 | } 384 | p { 385 | margin-left: 0; 386 | margin-right: 0; 387 | margin-top: 0; 388 | padding-bottom: 0; 389 | padding-left: 0; 390 | padding-right: 0; 391 | padding-top: 0; 392 | margin-bottom: 1.45rem; 393 | } 394 | figure { 395 | margin-left: 0; 396 | margin-right: 0; 397 | margin-top: 0; 398 | padding-bottom: 0; 399 | padding-left: 0; 400 | padding-right: 0; 401 | padding-top: 0; 402 | margin-bottom: 1.45rem; 403 | } 404 | pre { 405 | margin-left: 0; 406 | margin-right: 0; 407 | margin-top: 0; 408 | padding-bottom: 0; 409 | padding-left: 0; 410 | padding-right: 0; 411 | padding-top: 0; 412 | margin-bottom: 1.45rem; 413 | font-size: 0.85rem; 414 | line-height: 1.42; 415 | background: hsla(0, 0%, 0%, 0.04); 416 | border-radius: 3px; 417 | overflow: auto; 418 | word-wrap: normal; 419 | padding: 1.45rem; 420 | } 421 | table { 422 | margin-left: 0; 423 | margin-right: 0; 424 | margin-top: 0; 425 | padding-bottom: 0; 426 | padding-left: 0; 427 | padding-right: 0; 428 | padding-top: 0; 429 | margin-bottom: 1.45rem; 430 | font-size: 1rem; 431 | line-height: 1.45rem; 432 | border-collapse: collapse; 433 | width: 100%; 434 | } 435 | fieldset { 436 | margin-left: 0; 437 | margin-right: 0; 438 | margin-top: 0; 439 | padding-bottom: 0; 440 | padding-left: 0; 441 | padding-right: 0; 442 | padding-top: 0; 443 | margin-bottom: 1.45rem; 444 | } 445 | blockquote { 446 | margin-left: 1.45rem; 447 | margin-right: 1.45rem; 448 | margin-top: 0; 449 | padding-bottom: 0; 450 | padding-left: 0; 451 | padding-right: 0; 452 | padding-top: 0; 453 | margin-bottom: 1.45rem; 454 | } 455 | form { 456 | margin-left: 0; 457 | margin-right: 0; 458 | margin-top: 0; 459 | padding-bottom: 0; 460 | padding-left: 0; 461 | padding-right: 0; 462 | padding-top: 0; 463 | margin-bottom: 1.45rem; 464 | } 465 | noscript { 466 | margin-left: 0; 467 | margin-right: 0; 468 | margin-top: 0; 469 | padding-bottom: 0; 470 | padding-left: 0; 471 | padding-right: 0; 472 | padding-top: 0; 473 | margin-bottom: 1.45rem; 474 | } 475 | iframe { 476 | margin-left: 0; 477 | margin-right: 0; 478 | margin-top: 0; 479 | padding-bottom: 0; 480 | padding-left: 0; 481 | padding-right: 0; 482 | padding-top: 0; 483 | margin-bottom: 1.45rem; 484 | } 485 | hr { 486 | margin-left: 0; 487 | margin-right: 0; 488 | margin-top: 0; 489 | padding-bottom: 0; 490 | padding-left: 0; 491 | padding-right: 0; 492 | padding-top: 0; 493 | margin-bottom: calc(1.45rem - 1px); 494 | background: hsla(0, 0%, 0%, 0.2); 495 | border: none; 496 | height: 1px; 497 | } 498 | address { 499 | margin-left: 0; 500 | margin-right: 0; 501 | margin-top: 0; 502 | padding-bottom: 0; 503 | padding-left: 0; 504 | padding-right: 0; 505 | padding-top: 0; 506 | margin-bottom: 1.45rem; 507 | } 508 | b { 509 | font-weight: bold; 510 | } 511 | strong { 512 | font-weight: bold; 513 | } 514 | dt { 515 | font-weight: bold; 516 | } 517 | th { 518 | font-weight: bold; 519 | } 520 | li { 521 | margin-bottom: calc(1.45rem / 2); 522 | } 523 | ol li { 524 | padding-left: 0; 525 | } 526 | ul li { 527 | padding-left: 0; 528 | } 529 | li > ol { 530 | margin-left: 1.45rem; 531 | margin-bottom: calc(1.45rem / 2); 532 | margin-top: calc(1.45rem / 2); 533 | } 534 | li > ul { 535 | margin-left: 1.45rem; 536 | margin-bottom: calc(1.45rem / 2); 537 | margin-top: calc(1.45rem / 2); 538 | } 539 | blockquote *:last-child { 540 | margin-bottom: 0; 541 | } 542 | li *:last-child { 543 | margin-bottom: 0; 544 | } 545 | p *:last-child { 546 | margin-bottom: 0; 547 | } 548 | li > p { 549 | margin-bottom: calc(1.45rem / 2); 550 | } 551 | code { 552 | font-size: 0.85rem; 553 | line-height: 1.45rem; 554 | } 555 | kbd { 556 | font-size: 0.85rem; 557 | line-height: 1.45rem; 558 | } 559 | samp { 560 | font-size: 0.85rem; 561 | line-height: 1.45rem; 562 | } 563 | abbr { 564 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 565 | cursor: help; 566 | } 567 | acronym { 568 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 569 | cursor: help; 570 | } 571 | abbr[title] { 572 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 573 | cursor: help; 574 | text-decoration: none; 575 | } 576 | thead { 577 | text-align: left; 578 | } 579 | td, 580 | th { 581 | text-align: left; 582 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); 583 | font-feature-settings: 'tnum'; 584 | -moz-font-feature-settings: 'tnum'; 585 | -ms-font-feature-settings: 'tnum'; 586 | -webkit-font-feature-settings: 'tnum'; 587 | padding-left: 0.96667rem; 588 | padding-right: 0.96667rem; 589 | padding-top: 0.725rem; 590 | padding-bottom: calc(0.725rem - 1px); 591 | } 592 | th:first-child, 593 | td:first-child { 594 | padding-left: 0; 595 | } 596 | th:last-child, 597 | td:last-child { 598 | padding-right: 0; 599 | } 600 | tt, 601 | code { 602 | background-color: hsla(0, 0%, 0%, 0.04); 603 | border-radius: 3px; 604 | font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', 605 | 'Liberation Mono', Menlo, Courier, monospace; 606 | padding: 0; 607 | padding-top: 0.2em; 608 | padding-bottom: 0.2em; 609 | } 610 | pre code { 611 | background: none; 612 | line-height: 1.42; 613 | } 614 | code:before, 615 | code:after, 616 | tt:before, 617 | tt:after { 618 | letter-spacing: -0.2em; 619 | content: ' '; 620 | } 621 | pre code:before, 622 | pre code:after, 623 | pre tt:before, 624 | pre tt:after { 625 | content: ''; 626 | } 627 | 628 | .dv-star-rating { 629 | padding: 0.6875rem 0.75rem; 630 | background-color: #361b50; 631 | border-radius: 2rem; 632 | } 633 | .dv-star-rating-empty-star { 634 | color: #b3b3b3 !important; 635 | } 636 | .star-wrapper.small .dv-star-rating { 637 | padding: 0.3125rem 0.5rem; 638 | } 639 | 640 | @media only screen and (max-width: 480px) { 641 | html { 642 | font-size: 100%; 643 | } 644 | } 645 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import Helmet from "react-helmet"; 4 | import { StaticQuery, graphql } from "gatsby"; 5 | 6 | import Header from "./header"; 7 | import "./layout.css"; 8 | 9 | const Layout = ({ children }) => ( 10 | ( 21 | <> 22 | 29 | 30 | 31 |
32 |
40 | {children} 41 |
42 | 43 | )} 44 | /> 45 | ); 46 | 47 | Layout.propTypes = { 48 | children: PropTypes.node.isRequired 49 | }; 50 | 51 | export default Layout; 52 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "../components/layout"; 3 | 4 | const NotFoundPage = () => ( 5 | 6 |

NOT FOUND

7 |

You just hit a route that doesn't exist... the sadness.

8 | 9 | ); 10 | 11 | export default NotFoundPage; 12 | -------------------------------------------------------------------------------- /src/pages/artists.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | 4 | import Layout from "../components/layout"; 5 | 6 | class ArtistPage extends Component { 7 | render() { 8 | const artists = this.props.data.artists.edges; 9 | return ( 10 | 11 |
12 |

Artists

13 | 71 |
72 | 73 | ); 74 | } 75 | } 76 | 77 | export default ArtistPage; 78 | 79 | export const ArtistPageQuery = graphql` 80 | query getAllArtists { 81 | artists: allArtist { 82 | edges { 83 | node { 84 | id 85 | name 86 | slug 87 | picture { 88 | id 89 | handle 90 | width 91 | height 92 | } 93 | } 94 | } 95 | } 96 | } 97 | `; 98 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | 4 | import Layout from "../components/layout"; 5 | import StarRatingComponent from "react-star-rating-component"; 6 | 7 | class IndexPage extends Component { 8 | render() { 9 | const artists = this.props.data.artists.edges; 10 | const records = this.props.data.records.edges; 11 | const reviews = this.props.data.reviews.edges; 12 | return ( 13 | 14 |
15 |
16 |

17 | Welcome to your new 18 | {` `} 19 | 20 | Gatsby example site 21 | 22 | {` `} 23 | using the 24 | {` `} 25 | 26 | GraphCMS source plugin 27 | 28 | . 29 |

30 |

31 | Artists 32 |

33 | 90 |
91 |
92 |

93 | Records 94 |

95 | 152 |
153 |
154 |

155 | Reviews 156 |

157 | 214 |
215 |
216 | 217 | ); 218 | } 219 | } 220 | 221 | export default IndexPage; 222 | 223 | export const pageQuery = graphql` 224 | query getAllArtistsRecordsReviews { 225 | artists: allArtist { 226 | edges { 227 | node { 228 | id 229 | name 230 | slug 231 | picture { 232 | id 233 | handle 234 | width 235 | height 236 | } 237 | records { 238 | id 239 | slug 240 | title 241 | } 242 | } 243 | } 244 | } 245 | records: allRecord { 246 | edges { 247 | node { 248 | id 249 | slug 250 | title 251 | artist { 252 | id 253 | slug 254 | name 255 | } 256 | tracks { 257 | id 258 | title 259 | aliasedLength 260 | } 261 | cover { 262 | handle 263 | } 264 | reviews { 265 | id 266 | slug 267 | title 268 | } 269 | } 270 | } 271 | } 272 | reviews: allReview { 273 | edges { 274 | node { 275 | id 276 | slug 277 | createdAt 278 | record { 279 | slug 280 | title 281 | artist { 282 | slug 283 | name 284 | } 285 | } 286 | title 287 | review 288 | rating 289 | comments { 290 | body 291 | } 292 | } 293 | } 294 | } 295 | } 296 | `; 297 | -------------------------------------------------------------------------------- /src/pages/records.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | 4 | import Layout from "../components/layout"; 5 | 6 | class RecordPage extends Component { 7 | render() { 8 | const records = this.props.data.records.edges; 9 | return ( 10 | 11 |
12 |

Records

13 | 70 |
71 | 72 | ); 73 | } 74 | } 75 | 76 | export default RecordPage; 77 | 78 | export const RecordPageQuery = graphql` 79 | query getAllRecords { 80 | records: allRecord { 81 | edges { 82 | node { 83 | id 84 | slug 85 | title 86 | artist { 87 | id 88 | slug 89 | name 90 | } 91 | cover { 92 | handle 93 | } 94 | } 95 | } 96 | } 97 | } 98 | `; 99 | -------------------------------------------------------------------------------- /src/pages/reviews.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | 4 | import Layout from "../components/layout"; 5 | import StarRatingComponent from "react-star-rating-component"; 6 | 7 | class ReviewPage extends Component { 8 | render() { 9 | const reviews = this.props.data.reviews.edges; 10 | return ( 11 | 12 |
13 |

Reviews

14 | 71 |
72 | 73 | ); 74 | } 75 | } 76 | 77 | export default ReviewPage; 78 | 79 | export const ReviewPageQuery = graphql` 80 | query getAllReviews { 81 | reviews: allReview { 82 | edges { 83 | node { 84 | id 85 | slug 86 | createdAt 87 | record { 88 | slug 89 | title 90 | artist { 91 | slug 92 | name 93 | } 94 | } 95 | title 96 | rating 97 | } 98 | } 99 | } 100 | } 101 | `; 102 | -------------------------------------------------------------------------------- /src/templates/artist-detail.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | import * as PropTypes from "prop-types"; 4 | 5 | import Layout from "../components/layout"; 6 | 7 | const propTypes = { 8 | data: PropTypes.object.isRequired 9 | }; 10 | 11 | class ArtistDetailTemplate extends React.Component { 12 | render() { 13 | const { artist } = this.props.data; 14 | return ( 15 | 16 |

{artist.name}

17 |
18 | {artist.name} 26 |
27 | 28 | 29 | full-size, hi-res photo: ({artist.picture.width} W × 30 | {` `} 31 | {artist.picture.height} H) 32 | 33 | 34 |
35 |
36 | {artist.records.length ? ( 37 |
44 | Records 45 |
46 | ) : null} 47 | {artist.records.map((record, i) => ( 48 |
54 |

55 | {record.title} 56 |

57 |
58 | ))} 59 |

60 | All Artists 61 |

62 | 63 | ); 64 | } 65 | } 66 | 67 | ArtistDetailTemplate.propTypes = propTypes; 68 | 69 | export default ArtistDetailTemplate; 70 | 71 | export const ArtistDetailPageQuery = graphql` 72 | query getArtistById($id: String!) { 73 | artist(id: { eq: $id }) { 74 | id 75 | slug 76 | name 77 | picture { 78 | id 79 | handle 80 | width 81 | height 82 | } 83 | records { 84 | id 85 | slug 86 | title 87 | } 88 | } 89 | } 90 | `; 91 | -------------------------------------------------------------------------------- /src/templates/record-detail.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { graphql, Link } from "gatsby"; 3 | import * as PropTypes from "prop-types"; 4 | 5 | import Layout from "../components/layout"; 6 | 7 | const propTypes = { 8 | data: PropTypes.object.isRequired 9 | }; 10 | 11 | class RecordDetailTemplate extends React.Component { 12 | render() { 13 | const { record } = this.props.data; 14 | return ( 15 | 16 |

{record.title}

17 | {record.artist ? ( 18 |

19 | 20 | {record.artist.name} 21 | 22 |

23 | ) : ( 24 |

(Compilation album, various artists)

25 | )} 26 |
27 | {record.name} 36 |
37 | {record.tracks.length ? ( 38 |
39 | Tracklist 40 |
41 | ) : null} 42 | {record.tracks.map((track, i) => ( 43 |
44 |
45 | {track.title} 46 | {` `} 47 | {new Date(1000 * track.aliasedLength).toISOString().substr(14, 5)} 48 |
49 |
50 | ))} 51 | {record.reviews.length ? ( 52 |
59 | Reviews 60 |
61 | ) : null} 62 | {record.reviews.map((review, i) => ( 63 |
69 |

70 | {review.title} 71 |

72 |
73 | ))} 74 |

75 | 76 | 77 | full-size, hi-res cover photo 78 | 79 | 80 |

81 |

88 | All Records 89 |

90 | 91 | ); 92 | } 93 | } 94 | 95 | RecordDetailTemplate.propTypes = propTypes; 96 | 97 | export default RecordDetailTemplate; 98 | 99 | export const RecordDetailPageQuery = graphql` 100 | query getRecordById($id: String!) { 101 | record(id: { eq: $id }) { 102 | id 103 | slug 104 | title 105 | artist { 106 | id 107 | slug 108 | name 109 | } 110 | tracks { 111 | id 112 | title 113 | aliasedLength 114 | } 115 | cover { 116 | handle 117 | } 118 | reviews { 119 | id 120 | slug 121 | title 122 | } 123 | } 124 | } 125 | `; 126 | -------------------------------------------------------------------------------- /src/templates/review-detail.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as PropTypes from "prop-types"; 3 | import { graphql, Link } from "gatsby"; 4 | 5 | import Layout from "../components/layout"; 6 | import StarRatingComponent from "react-star-rating-component"; 7 | 8 | const propTypes = { 9 | data: PropTypes.object.isRequired 10 | }; 11 | 12 | class ReviewDetailTemplate extends React.Component { 13 | render() { 14 | const { review, reviewMarkdown } = this.props.data; 15 | return ( 16 | 17 |
18 |
19 |

{review.title}

20 |

21 | for{" "} 22 | 23 | {review.record.title} 24 | 25 | {` `} 26 | by 27 | {` `} 28 | 29 | {review.record.artist.name} 30 | 31 |

32 | {review.rating && ( 33 |
37 | 44 |
45 | )} 46 | {reviewMarkdown.childMarkdownRemark.html && ( 47 |
52 | )} 53 | {review.comments.length ? ( 54 |
55 |

Comments

56 | {review.comments.map((comment, i) => ( 57 |

{comment.body}

58 | ))} 59 |
60 | ) : null} 61 |
62 |

69 | All Reviews 70 |

71 |
72 | 73 | ); 74 | } 75 | } 76 | 77 | ReviewDetailTemplate.propTypes = propTypes; 78 | 79 | export default ReviewDetailTemplate; 80 | 81 | export const ReviewDetailPageQuery = graphql` 82 | query getReviewById($id: String!, $mdid: String!) { 83 | review(id: { eq: $id }) { 84 | id 85 | slug 86 | createdAt 87 | record { 88 | slug 89 | title 90 | artist { 91 | slug 92 | name 93 | } 94 | } 95 | title 96 | review 97 | rating 98 | comments { 99 | body 100 | } 101 | } 102 | reviewMarkdown(id: { eq: $mdid }) { 103 | id 104 | childMarkdownRemark { 105 | html 106 | } 107 | } 108 | } 109 | `; 110 | -------------------------------------------------------------------------------- /static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/apple-touch-icon.png -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicon-96x96.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicon.ico -------------------------------------------------------------------------------- /static/favicons/chrome-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicons/chrome-192.png -------------------------------------------------------------------------------- /static/favicons/chrome-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hygraph/gatsby-graphcms-example/bd4ea88093681a8faa388b88368c91026abb0a32/static/favicons/chrome-512.png --------------------------------------------------------------------------------