├── gatsby-browser.js ├── .gitignore ├── src ├── .DS_Store ├── images │ ├── icon.png │ └── trials-logo.svg ├── styles │ └── global.css ├── utils │ └── dates.js ├── templates │ ├── post.js │ └── home.js ├── pages │ ├── 404.js │ └── event.js └── components │ ├── nav.js │ └── layout.js ├── postcss.config.js ├── README.md ├── tailwind.config.js ├── gatsby-config.js ├── package.json └── gatsby-node.js /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import './src/styles/global.css'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .cache/ 3 | public 4 | .env 5 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattlangtree/trials-australia-gatsby/main/src/.DS_Store -------------------------------------------------------------------------------- /src/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattlangtree/trials-australia-gatsby/main/src/images/icon.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/global.css: -------------------------------------------------------------------------------- 1 | /* ./src/styles/global.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | An example of building out Trials Australia using Gatsby. 2 | 3 | This is a demo for now and not actually powering the [TA site](https://trials.com.au/). -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ['./src/**/*.{js,jsx,ts,tsx}'], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: ['gatsby-plugin-postcss'], 11 | } 12 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config({ 2 | path: `.env`, 3 | }) 4 | 5 | module.exports = { 6 | siteMetadata: { 7 | siteUrl: "https://www.trials.com.au", 8 | title: "Trials Australia", 9 | }, 10 | plugins: [ 11 | "gatsby-plugin-postcss", 12 | `gatsby-source-craft` 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /src/utils/dates.js: -------------------------------------------------------------------------------- 1 | const shortMonthNames = [ 2 | "Jan", 3 | "Feb", 4 | "Mar", 5 | "Apr", 6 | "May", 7 | "Jun", 8 | "Jul", 9 | "Aug", 10 | "Sep", 11 | "Oct", 12 | "Nov", 13 | "Dec", 14 | ] 15 | 16 | function getPrettyDate(dateString) { 17 | const date = new Date(dateString) 18 | 19 | const year = date.getFullYear() 20 | const monthIndex = date.getMonth() 21 | const month = shortMonthNames[monthIndex] 22 | const day = date.getDate() 23 | 24 | return `${day} ${month} ${year}` 25 | } 26 | 27 | function getStandardDate(dateString) { 28 | const date = new Date(dateString) 29 | const formatted = date.toISOString().slice(0, 10) 30 | 31 | return formatted 32 | } 33 | 34 | export { getPrettyDate, getStandardDate } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trials-australia", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "Trials Australia", 6 | "author": "Matt Langtree", 7 | "keywords": [ 8 | "gatsby" 9 | ], 10 | "scripts": { 11 | "develop": "gatsby develop", 12 | "start": "gatsby develop", 13 | "build": "gatsby build", 14 | "serve": "gatsby serve", 15 | "clean": "gatsby clean" 16 | }, 17 | "dependencies": { 18 | "dotenv": "^10.0.0", 19 | "gatsby": "^3.10.2", 20 | "gatsby-source-graphql": "^3.14.0", 21 | "react": "^17.0.1", 22 | "react-dom": "^17.0.1", 23 | "react-helmet": "^6.1.0" 24 | }, 25 | "devDependencies": { 26 | "autoprefixer": "^10.3.1", 27 | "gatsby-plugin-postcss": "^4.10.0", 28 | "gatsby-source-craft": "^2.0.3", 29 | "postcss": "^8.3.6", 30 | "tailwindcss": "^2.2.7" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/templates/post.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import { graphql } from 'gatsby' 4 | import Layout from "../components/layout" 5 | 6 | import { getPrettyDate, getStandardDate } from "../utils/dates" 7 | 8 | export const query = graphql` 9 | query BlogPostQuery($slug: String!) { 10 | entry: craftPostsPostsEntry(slug: { eq: $slug }) { 11 | id 12 | title 13 | postDate 14 | postBody 15 | url 16 | author { 17 | fullName 18 | } 19 | } 20 | } 21 | ` 22 | 23 | const BlogPostPage = ({ data: { entry } }) => { 24 | return ( 25 | 26 |

{entry.title}

27 | 28 |
{entry.author.fullName}
29 | 30 | 36 | 37 |
42 | 43 | {/* {% include "_private/matrix" with {blocks: entry.bodyContent.all()} %} */} 44 | 45 | ) 46 | } 47 | 48 | export default BlogPostPage 49 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Link } from "gatsby" 3 | 4 | // styles 5 | const pageStyles = { 6 | color: "#232129", 7 | padding: "96px", 8 | fontFamily: "-apple-system, Roboto, sans-serif, serif", 9 | } 10 | const headingStyles = { 11 | marginTop: 0, 12 | marginBottom: 64, 13 | maxWidth: 320, 14 | } 15 | 16 | const paragraphStyles = { 17 | marginBottom: 48, 18 | } 19 | const codeStyles = { 20 | color: "#8A6534", 21 | padding: 4, 22 | backgroundColor: "#FFF4DB", 23 | fontSize: "1.25rem", 24 | borderRadius: 4, 25 | } 26 | 27 | // markup 28 | const NotFoundPage = () => { 29 | return ( 30 |
31 | Not found 32 |

Page not found

33 |

34 | Sorry{" "} 35 | 36 | 😔 37 | {" "} 38 | we couldn’t find what you were looking for. 39 |
40 | {process.env.NODE_ENV === "development" ? ( 41 | <> 42 |
43 | Try creating a page in src/pages/. 44 |
45 | 46 | ) : null} 47 |
48 | Go home. 49 |

50 |
51 | ) 52 | } 53 | 54 | export default NotFoundPage 55 | -------------------------------------------------------------------------------- /src/components/nav.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | import logo from "../images/trials-logo.svg" 4 | 5 | const Nav = () => { 6 | return ( 7 |
8 |
9 |
10 |
11 | 12 | {/* Trials Australia */} 13 | Motorbike rider 14 | 15 |
16 | Trials 17 | News 18 | Events 19 | Forum 20 | 21 | Sign in 22 | 24 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 | ) 34 | } 35 | 36 | export default Nav 37 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | const path = require(`path`) 8 | 9 | exports.createPages = ({ graphql, actions }) => { 10 | const { createPage } = actions 11 | const blogPostTemplate = path.resolve(`src/templates/post.js`) 12 | 13 | return graphql( 14 | ` 15 | query PostsPostsQuery { 16 | blogPosts: allCraftPostsPostsEntry { 17 | nodes { 18 | remoteId 19 | slug 20 | } 21 | } 22 | } 23 | `, 24 | { limit: 1000 } 25 | ).then(result => { 26 | if (result.errors) { 27 | throw result.errors 28 | } 29 | 30 | const posts = result.data.blogPosts.nodes 31 | 32 | // Create blog post pages. 33 | posts.forEach(post => { 34 | createPage({ 35 | // Path for this page — required 36 | path: `/post/${post.slug}`, 37 | component: blogPostTemplate, 38 | context: { 39 | slug: post.slug, 40 | }, 41 | }) 42 | }) 43 | 44 | // Create blog post list pages (for pagination) 45 | const postsPerPage = 10 46 | const numPages = Math.ceil(posts.length / postsPerPage) 47 | 48 | Array.from({ length: numPages }).forEach((_, i) => { 49 | const currentPage = i + 1 50 | const nextUrl = numPages !== currentPage ? `/p${currentPage + 1}` : null 51 | const prevUrl = 52 | currentPage !== 1 53 | ? currentPage === 2 54 | ? "/" 55 | : `/p${currentPage - 1}` 56 | : null 57 | 58 | createPage({ 59 | path: i === 0 ? `/` : `/p${currentPage}`, 60 | component: path.resolve("./src/templates/home.js"), 61 | context: { 62 | limit: postsPerPage, 63 | skip: i * postsPerPage, 64 | totalPages: numPages, 65 | currentPage: currentPage, 66 | nextUrl, 67 | prevUrl, 68 | }, 69 | }) 70 | }) 71 | }) 72 | } 73 | -------------------------------------------------------------------------------- /src/templates/home.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, Link } from "gatsby" 3 | import Layout from "../components/layout" 4 | import { getPrettyDate, getStandardDate } from "../utils/dates" 5 | 6 | export const query = graphql` 7 | query WhateverQuery($limit: Int, $skip: Int) { 8 | blogPosts: allCraftPostsPostsEntry(limit: $limit, skip: $skip) { 9 | nodes { 10 | title 11 | slug 12 | postDate 13 | } 14 | } 15 | 16 | site { 17 | siteMetadata { 18 | title 19 | } 20 | } 21 | } 22 | ` 23 | 24 | const IndexPage = ({ data: { blogPosts, site }, pageContext }) => { 25 | return ( 26 | 27 |
28 |

29 | {site.siteMetadata.title} 30 |

31 | 32 | {blogPosts.nodes.map((blogEntry, i) => ( 33 |
34 |

35 | 36 | {blogEntry.title} 37 | 38 |

39 | 45 | 46 |

47 | 48 | Read more … 49 | 50 |

51 |
52 | ))} 53 | 54 |
55 | 76 |
77 |
78 | 79 | ) 80 | } 81 | 82 | export default IndexPage 83 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout component that queries for data 3 | * with Gatsby's useStaticQuery component 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import { useStaticQuery, graphql } from "gatsby" 10 | import { Helmet } from "react-helmet" 11 | import Nav from "../components/nav" 12 | 13 | const Layout = ({ children }) => { 14 | const data = useStaticQuery(graphql` 15 | query SiteTitleQuery { 16 | site { 17 | siteMetadata { 18 | title 19 | } 20 | } 21 | } 22 | `) 23 | 24 | const currentYear = new Date().getFullYear() 25 | 26 | return ( 27 | <> 28 | 29 | 30 | 31 | {data.site.siteMetadata.title} 32 | 36 | 37 | 38 | 43 | 49 | 55 | 56 | 57 | 58 |