created Dark mode toggle function

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es6": true,
+  },
+  "plugins": [
+    "react",
+  ],
+  "globals": {
+    "graphql": false,
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true,
+    },
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+public
+.gatsby-context.js
+.DS_Store
+.intermediate-representation/
+.cache/
+yarn.lock
+.env

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 4
+}

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+
+os:
+  - linux
+  - osx
+
+node_js:
+  - "node"
+  - "lts/*"
+  - "7"
+  - "8"
+
+script:
+  - npm install
+  - npm run lint

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,54 @@
+# Gatsby + Cosmic JS
+
+![gatsby-blog-cosmicjs](https://cdn.cosmicjs.com/fe5196f0-42c2-11ea-8d10-df553329919a-gatsby-blog-cosmic.png "The index page of the starter blog")
+
+> This repo contains an example blog website that is built with [Gatsby](https://www.gatsbyjs.org/), and [Cosmic JS](https://www.cosmicjs.com).
+
+> [See live demo hosted on Netlify](https://gatsby-blog-cosmicjs.netlify.com/)
+
+> Uses the [Cosmic JS Gatsby Source Plugin](https://www.npmjs.com/package/gatsby-source-cosmicjs)
+
+## Prerequisites
+
+- Node (I recommend using v8.2.0 or higher)
+- [Gatsby CLI](https://www.gatsbyjs.org/docs/)
+
+## Install
+
+``` bash
+# Make sure that you have the Gatsby CLI program installed
+npm install --global gatsby-cli
+
+# run from your CLI
+gatsby new gatsby-example-blog https://github.com/cosmicjs/gatsby-blog-cosmicjs
+```
+In `gatsby-config.js` you need to add configuration for your Cosmic JS Bucket
+
+``` javascript
+{
+  resolve: 'gatsby-source-cosmicjs',
+  options: {
+    bucketSlug: '', /* Find this in Your Bucket > Settings > Basic Settings after logging in at https://app.cosmicjs.com/login */
+    objectTypes: ['posts', 'settings'], /* Object types to fetch */
+    apiAccess: {
+      read_key: '', /* Find this in Your Bucket > Settings > API Access after logging in at https://app.cosmicjs.com/login */
+    },
+    localMedia: true /* Optional. If you want to enable local image for Gatsby Image */
+  }
+},
+```
+
+Then
+
+``` bash
+# Then you can run it by
+cd gatsby-example-blog
+npm run develop
+```
+
+## Deploy to Netlify
+You can deploy to Netlify in a few steps using their CLI. Run the following commands from the root folder.
+```
+npm i -g netlify-cli
+netlify deploy
+```

gatsby-config.js

@@ -0,0 +1,74 @@
+module.exports = {
+    siteMetadata: {
+        siteUrl: `https://blog.viralsangani.me`,
+    },
+    plugins: [
+        `gatsby-plugin-offline`,
+        `gatsby-plugin-react-helmet`,
+        `gatsby-transformer-sharp`,
+        `gatsby-plugin-sharp`,
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                path: `${__dirname}/src/pages`,
+                name: 'pages',
+            },
+        },
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                path: `${__dirname}/static/images`,
+                name: 'images',
+            },
+        },
+        {
+            resolve: 'gatsby-source-cosmicjs',
+            options: {
+                bucketSlug: '34de5920-96dc-11ea-85dc-25537f7a5e61',
+                objectTypes: ['projects'],
+                apiAccess: {
+                    read_key:
+                        'LtKwUj4AapzhcgVUGgoMT9sBzVQkter7B4guK74PW4p8tOQj13',
+                },
+                localMedia: true,
+            },
+        },
+        {
+            resolve: `gatsby-plugin-google-analytics`,
+            options: {
+                // The property ID; the tracking code won't be generated without it
+                trackingId: 'UA-166477510-1',
+                // Defines where to place the tracking script - `true` in the head and `false` in the body
+                head: false,
+                // Avoids sending pageview hits from custom paths
+                pageTransitionDelay: 0,
+                sampleRate: 5,
+                siteSpeedSampleRate: 10,
+            },
+        },
+        {
+            resolve: 'gatsby-plugin-typography',
+            options: {
+                pathToConfigModule: 'src/utils/typography',
+            },
+        },
+        {
+            resolve: `gatsby-plugin-nprogress`,
+        },
+        'gatsby-plugin-sitemap',
+        {
+            resolve: 'gatsby-plugin-react-svg',
+            options: {
+                rule: {
+                    include: /static/, // See below to configure properly
+                },
+            },
+        },
+        {
+            resolve: 'gatsby-source-rest-api',
+            options: {
+                endpoints: ['https://api.github.com/users/viral-sangani/repos'],
+            },
+        },
+    ],
+}

gatsby-node.js

@@ -0,0 +1,56 @@
+const each = require('lodash/each')
+const Promise = require('bluebird')
+const path = require('path')
+
+exports.createPages = ({ graphql, actions }) => {
+    const { createPage } = actions
+    const indexPage = path.resolve('./src/pages/index.js')
+    const projectHome = path.resolve('./src/templates/project-home.js')
+    createPage({
+        path: `posts`,
+        component: indexPage,
+    })
+    createPage({
+        path: `projects/`,
+        component: projectHome,
+    })
+
+    return new Promise((resolve, reject) => {
+        const projectPage = path.resolve('./src/templates/project-page.js')
+
+        resolve(
+            graphql(
+                `
+                    {
+                        allCosmicjsProjects {
+                            edges {
+                                node {
+                                    title
+                                    slug
+                                    id
+                                }
+                            }
+                        }
+                    }
+                `
+            ).then((result) => {
+                if (result.errors) {
+                    console.log(result.errors)
+                    reject(result.errors)
+                }
+
+                // Create Project pages.
+                const projects = result.data.allCosmicjsProjects.edges
+                each(projects, (project) => {
+                    createPage({
+                        path: `projects/${project.node.slug}`,
+                        component: projectPage,
+                        context: {
+                            slug: project.node.slug,
+                        },
+                    })
+                })
+            })
+        )
+    })
+}

gatsby-ssr.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { COLORS } from './src/components/utils'
+
+const MagicScriptTag = () => {
+    const codeToRunOnClient = `
+        (function() {
+            function getInitialColorMode() {
+                const persistedColorPreference = window.localStorage.getItem('color-mode')
+                const hasPersistedPreference = typeof persistedColorPreference === 'string'
+
+
+                if (hasPersistedPreference) {
+                    return persistedColorPreference
+                }
+
+                const mql = window.matchMedia('(prefers-color-scheme: dark)')
+                const hasMediaQueryPreference = typeof mql.matches === 'boolean'
+                if (hasMediaQueryPreference) {
+                    return mql.matches ? 'dark' : 'light'
+                }
+
+                return 'light'
+            }
+            const colorMode = getInitialColorMode();
+            const root = document.documentElement;
+            root.style.setProperty(
+                '--background',
+                colorMode === 'light'
+                ? '${COLORS.light.background}'
+                : '${COLORS.dark.background}'
+            );
+            root.style.setProperty(
+                '--font-color',
+                colorMode === 'light'
+                ? '${COLORS.light.font}'
+                : '${COLORS.dark.font}'
+            );
+            root.style.setProperty(
+                '--hover-color',
+                colorMode === 'light'
+                ? '${COLORS.light.hover}'
+                : '${COLORS.dark.hover}'
+            );
+            root.style.setProperty('--initial-color-mode', colorMode);
+            })()`
+    // eslint-disable-next-line react/no-danger
+    return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />
+}
+export const onRenderBody = ({ setPreBodyComponents }) => {
+    setPreBodyComponents(<MagicScriptTag />)
+}