From 98d7bd640079d758df358c103cedc9cdec617d3b Mon Sep 17 00:00:00 2001 From: mstfash Date: Thu, 7 Jan 2021 14:38:32 +0200 Subject: [PATCH] adding new readme --- .github/workflows/release.yml | 26 +++++++++ README.md | 17 ++++-- src/components/ui/FAQsCollapse.js | 6 ++- src/components/ui/FeaturesBlocks.js | 5 +- src/components/ui/HeroBox.js | 6 +-- src/components/ui/HeroSeciton.js | 12 +++-- src/hooks/useHome.js | 84 +++++++++++++++++++++++++++++ src/hooks/useHomeBoxes.js | 29 ---------- src/hooks/useHomeFAQ.js | 20 ------- src/hooks/useHomeFeature.js | 29 ---------- 10 files changed, 140 insertions(+), 94 deletions(-) create mode 100644 .github/workflows/release.yml create mode 100644 src/hooks/useHome.js delete mode 100644 src/hooks/useHomeBoxes.js delete mode 100644 src/hooks/useHomeFAQ.js delete mode 100644 src/hooks/useHomeFeature.js diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..508d44b --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,26 @@ +name: Production Release +on: + release: + types: published + +jobs: + deploy: + runs-on: ubuntu-latest + + env: + CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }} + CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }} + + steps: + - uses: actions/checkout@v2 + + - name: Use Node.js 12.18.0 + uses: actions/setup-node@v1 + with: + node-version: "12.18.0" + + - name: Install dependencies + run: yarn + + - name: Building and deploying production + run: yarn deploy diff --git a/README.md b/README.md index 1523a45..e33e855 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,22 @@

- - Gatsby + + Reflexer

- Gatsby's hello-world starter + Reflexer Website

-Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. +Reflexer website is built with [Gatsby](https://www.gatsbyjs.com/) and [Contentful CMS](https://www.contentful.com/). + +## Advantages of using this stack + +1. Gatsby is a framework built upon React and provides something called SSG (Static Site Generation) which means it generates HTML files at build time, and that is useful for SEO and Search Engines crawlers to rank the website since they do not read full js applications like normal react app. + +2. Gatsby connects with headless CMS called [Contentful](https://www.contentful.com/) which provides a great GUI where we can just add model and content and save it somewhere for free (Gives us 1GB of storage) also it renders GraphQL API that we use it in Gatsby to show our content. + +Bottom line is we are having the best of both, as Developer we use React like app and at the same time we are having some kind of a backend with an admin interface built for us for free to use it in content manipulation 🚀 and as non-developer I can go manipulate content from an admin interface without touching the code. _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.com/docs/gatsby-starters/)._ @@ -97,4 +105,5 @@ Looking for more guidance? Full documentation for Gatsby lives [on the website]( [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/gatsbyjs/gatsby-starter-hello-world) + # geb-website diff --git a/src/components/ui/FAQsCollapse.js b/src/components/ui/FAQsCollapse.js index 9b13e39..a604cac 100644 --- a/src/components/ui/FAQsCollapse.js +++ b/src/components/ui/FAQsCollapse.js @@ -5,12 +5,14 @@ import styled from "styled-components" import { documentToReactComponents } from "@contentful/rich-text-react-renderer" import { INLINES } from "@contentful/rich-text-types" -import useHomeFAQ from "../../hooks/useHomeFAQ" +import useHome from "../../hooks/useHome" import { ExternalLinkArrow } from "../../styles/GlobalStyle" const FAQsCollapse = () => { const [collapseIndex, setCollapseIndex] = useState(0) - const homeFAQ = useHomeFAQ().map(item => item.node) + + const { allContentfulHomeFaq } = useHome() + const homeFAQ = allContentfulHomeFaq.edges.map(item => item.node) const handleClick = i => { if (i === collapseIndex) { diff --git a/src/components/ui/FeaturesBlocks.js b/src/components/ui/FeaturesBlocks.js index bc83e5e..ef99868 100644 --- a/src/components/ui/FeaturesBlocks.js +++ b/src/components/ui/FeaturesBlocks.js @@ -1,12 +1,13 @@ import React from "react" import styled from "styled-components" import { documentToReactComponents } from "@contentful/rich-text-react-renderer" -import useHomeFeature from "../../hooks/useHomeFeature" +import useHome from "../../hooks/useHome" import { ExternalLinkArrow } from "../../styles/GlobalStyle" import getPrefixedPath from "../../utils/getPrefixPath" const FeaturesBlocks = () => { - const homeFeature = useHomeFeature().map(item => item.node) + const { allContentfulHomeFeature } = useHome() + const homeFeature = allContentfulHomeFeature.edges.map(item => item.node) return ( <> diff --git a/src/components/ui/HeroBox.js b/src/components/ui/HeroBox.js index 0dbeee4..fd85c06 100644 --- a/src/components/ui/HeroBox.js +++ b/src/components/ui/HeroBox.js @@ -1,13 +1,13 @@ import React from "react" import styled from "styled-components" -import useHomeBoxes from "../../hooks/useHomeBoxes" +import useHome from "../../hooks/useHome" import { documentToReactComponents } from "@contentful/rich-text-react-renderer" import { ExternalLinkArrow } from "../../styles/GlobalStyle" import getPrefixedPath from "../../utils/getPrefixPath" const HeroBox = () => { - const homeBoxes = useHomeBoxes().map(item => item.node) - + const { allContentfulHomeBoxes } = useHome() + const homeBoxes = allContentfulHomeBoxes.edges.map(item => item.node) return ( diff --git a/src/components/ui/HeroSeciton.js b/src/components/ui/HeroSeciton.js index 2fd5c85..f56b9f4 100644 --- a/src/components/ui/HeroSeciton.js +++ b/src/components/ui/HeroSeciton.js @@ -1,15 +1,17 @@ import React from "react" import styled from "styled-components" +import { documentToReactComponents } from "@contentful/rich-text-react-renderer" +import useHome from "../../hooks/useHome" const HeroSeciton = () => { + const { allContentfulHomeHero } = useHome() + const homeHero = allContentfulHomeHero.edges.map(item => item.node) + return ( - Leverage ETH using RAI - - A decentralized, stable and non pegged currency made for the digital - economy - + {homeHero[0].title} + {documentToReactComponents(homeHero[0].content.json)} ) diff --git a/src/hooks/useHome.js b/src/hooks/useHome.js new file mode 100644 index 0000000..0689020 --- /dev/null +++ b/src/hooks/useHome.js @@ -0,0 +1,84 @@ +import { graphql, useStaticQuery } from "gatsby" + +export default function useHome() { + const { + allContentfulHomeHero, + allContentfulHomeBoxes, + allContentfulHomeFeature, + allContentfulHomeFaq, + } = useStaticQuery(graphql` + query Home { + allContentfulHomeHero { + edges { + node { + id + title + content { + json + } + } + } + } + + allContentfulHomeBoxes(sort: { fields: order }) { + edges { + node { + id + title + link { + name + link + } + image { + file { + url + } + } + content { + json + } + } + } + } + + allContentfulHomeFeature(sort: { fields: order }) { + edges { + node { + id + title + link { + name + url + } + image { + file { + url + } + } + content { + json + } + } + } + } + + allContentfulHomeFaq(sort: { fields: order }) { + edges { + node { + id + title + content { + json + } + } + } + } + } + `) + return { + allContentfulHomeHero, + allContentfulHomeBoxes, + allContentfulHomeFeature, + allContentfulHomeFaq, + } +} diff --git a/src/hooks/useHomeBoxes.js b/src/hooks/useHomeBoxes.js deleted file mode 100644 index a01e42f..0000000 --- a/src/hooks/useHomeBoxes.js +++ /dev/null @@ -1,29 +0,0 @@ -import { graphql, useStaticQuery } from "gatsby" - -export default function useHomeBoxes() { - const { allContentfulHomeBoxes } = useStaticQuery(graphql` - query HomeBoxes { - allContentfulHomeBoxes(sort: { fields: order }) { - edges { - node { - id - title - link { - name - link - } - image { - file { - url - } - } - content { - json - } - } - } - } - } - `) - return allContentfulHomeBoxes.edges -} diff --git a/src/hooks/useHomeFAQ.js b/src/hooks/useHomeFAQ.js deleted file mode 100644 index a18c934..0000000 --- a/src/hooks/useHomeFAQ.js +++ /dev/null @@ -1,20 +0,0 @@ -import { graphql, useStaticQuery } from "gatsby" - -export default function useHomeFAQ() { - const { allContentfulHomeFaq } = useStaticQuery(graphql` - query HomeFAQ { - allContentfulHomeFaq(sort: { fields: order }) { - edges { - node { - id - title - content { - json - } - } - } - } - } - `) - return allContentfulHomeFaq.edges -} diff --git a/src/hooks/useHomeFeature.js b/src/hooks/useHomeFeature.js deleted file mode 100644 index f9ab85c..0000000 --- a/src/hooks/useHomeFeature.js +++ /dev/null @@ -1,29 +0,0 @@ -import { graphql, useStaticQuery } from "gatsby" - -export default function useHomeFeature() { - const { allContentfulHomeFeature } = useStaticQuery(graphql` - query HomeFeature { - allContentfulHomeFeature(sort: { fields: order }) { - edges { - node { - id - title - link { - name - url - } - image { - file { - url - } - } - content { - json - } - } - } - } - } - `) - return allContentfulHomeFeature.edges -}