3 | Flat Magazine Blog 4 |
75 |
76 | After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.
77 |
--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: `Flat Magazine`,
4 | description: `A Blog Theme for Gatsby. Using Sanity.io as backend.`,
5 | author: `@damnitrahul`,
6 | siteURL: 'https://blog.damnitrahul.com',
7 | siteUrl: 'https://blog.damnitrahul.com'
8 | },
9 | plugins: [
10 | `gatsby-plugin-react-helmet`,
11 | {
12 | resolve: `gatsby-source-filesystem`,
13 | options: {
14 | name: `images`,
15 | path: `${__dirname}/src/images`
16 | }
17 | },
18 | `gatsby-plugin-sharp`,
19 | `gatsby-transformer-sharp`,
20 | {
21 | resolve: `gatsby-plugin-manifest`,
22 | options: {
23 | name: `gatsby-starter-default`,
24 | short_name: `starter`,
25 | start_url: `/`,
26 | background_color: `#663399`,
27 | theme_color: `#663399`,
28 | display: `minimal-ui`,
29 | icon: `src/images/favicon.png` // This path is relative to the root of the site.
30 | }
31 | },
32 | {
33 | resolve: 'gatsby-source-sanity',
34 | options: {
35 | projectId: process.env.GATSBY_PROJECT_ID, // Put your credentials
36 | dataset: process.env.GATSBY_PROJECT_DATASET,
37 | token: process.env.GATSBY_MY_SANITY_TOKEN
38 | }
39 | },
40 | {
41 | resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
42 | options: {
43 | // Fields to index
44 | fields: [`title`, `slug`],
45 | // How to resolve each field`s value for a supported node type
46 | resolvers: {
47 | // For any node of type MarkdownRemark, list how to resolve the fields` values
48 | SanityPost: {
49 | title: node => node.title,
50 | slug: node => node.slug.current
51 | }
52 | }
53 | }
54 | },
55 | {
56 | resolve: 'gatsby-plugin-page-progress',
57 | options: {
58 | includePaths: [{regex: '^/blog/'}],
59 | height: 3,
60 | prependToBody: false,
61 | color: `#fd413c`,
62 | footerHeight: 500
63 | }
64 | },
65 | 'gatsby-plugin-styled-components',
66 | 'gatsby-plugin-sitemap',
67 | 'gatsby-plugin-robots-txt'
68 | ]
69 | }
70 |
--------------------------------------------------------------------------------
/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 | // You can delete this file if you're not using it
8 | const path = require('path')
9 | module.exports.createPages = async ({graphql, actions}) => {
10 | const {createPage} = actions
11 | const blogTemplate = path.resolve('./src/templates/blog-post/blog-post.js')
12 | const blogPageTemplate = path.resolve(
13 | './src/templates/blog-page/blog-page.js'
14 | )
15 |
16 | const res = await graphql(`
17 | query MyQuery {
18 | allSanityPost {
19 | totalCount
20 | edges {
21 | node {
22 | title
23 | slug {
24 | current
25 | }
26 | }
27 | }
28 | }
29 | }
30 | `)
31 |
32 | res.data.allSanityPost.edges.forEach((edge, i, arr) => {
33 | createPage({
34 | path: `/blog/${edge.node.slug.current}`,
35 | component: blogTemplate,
36 | context: {
37 | prev:
38 | i === 0 ? arr[i + 2].node.slug.current : arr[i - 1].node.slug.current,
39 | prevTitle: i === 0 ? arr[i + 2].node.title : arr[i - 1].node.title,
40 | slug: edge.node.slug.current,
41 | next:
42 | i === arr.length - 1
43 | ? arr[i - 2].node.slug.current
44 | : arr[i + 1].node.slug.current,
45 | nextTitle:
46 | i === arr.length - 1 ? arr[i - 2].node.title : arr[i + 1].node.title
47 | }
48 | })
49 | })
50 |
51 | const pages = Math.ceil(res.data.allSanityPost.totalCount / 10)
52 | Array.from({length: pages}).forEach((_, i) => {
53 | createPage({
54 | path: i === 0 ? `/blog` : `/blog/${i + 1}`,
55 | component: blogPageTemplate,
56 | context: {
57 | skip: i * 10,
58 | current: i + 1,
59 | pages: pages
60 | }
61 | })
62 | })
63 | }
64 |
--------------------------------------------------------------------------------
/gatsby-ssr.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const InitialTheme = () => {
4 | let codeToRunOnClient = `
5 | (function() {
6 | function getInitialColorMode() {
7 | const persistedColorPreference = window.localStorage.getItem('color-mode');
8 | const hasPersistedPreference = typeof persistedColorPreference === 'string';
9 |
10 | if (hasPersistedPreference) {
11 | return persistedColorPreference;
12 | }
13 |
14 | const mql = window.matchMedia('(prefers-color-scheme: dark)');
15 | const hasMediaQueryPreference = typeof mql.matches === 'boolean';
16 | if (hasMediaQueryPreference) {
17 | return mql.matches ? 'dark' : 'light';
18 | }
19 | return 'light';
20 | }
21 | const colorMode = getInitialColorMode();
22 | const root = document.documentElement;
23 | root.setAttribute('data-theme', colorMode)
24 | })()`
25 | return
26 | }
27 |
28 | export const onRenderBody = ({setPreBodyComponents}) => {
29 | setPreBodyComponents({excerpt}
17 |Copyright © Rahul Raj
64 |{excerpt}
15 |120 | {authorName} {date} 121 |
122 |