change releases data call from graphql plugin to createNode (#50)

- change from graphql soruce plugin to createNode method
- explain GITHUB_TOKEN in readme
- add dotenv to handle the env vars in gatsby config
- replace release description with links to github and NPM
- don't show WhatsNew if no releases

README.md

@@ -15,5 +15,7 @@ npm install
 npm run start
 ```
 
+If you want to see data from GitHub (releases) locally, you need to add `GITHUB_TOKEN` environment variable to the .env file. This is a private access token that you can generate in Github settings.
+
 Then visit http://localhost:8000/ - Gatsby will automatically reload CSS or
 refresh the page when stylesheets or content changes.

gatsby-config.js

@@ -1,8 +1,8 @@
 const fs = require('fs');
 const yaml = require('js-yaml');
+require('dotenv').config({ path: '.env' })
 
 const pkg = require('./package.json');
-
 const staticConfig = yaml.load(fs.readFileSync('./site.yml', 'utf8'));
 
 module.exports = {

gatsby-node.js

@@ -1,5 +1,26 @@
 const path = require('path');
 const { createFilePath } = require('gatsby-source-filesystem');
+const fetch = (...args) =>
+  import(`node-fetch`).then(({ default: fetch }) => fetch(...args))
+
+exports.sourceNodes = async ({
+  actions: { createNode },
+  createContentDigest,
+}) => {
+  const result = await fetch(`https://api.github.com/repos/decaporg/decap-cms/releases?per_page=3`)
+  const resultData = await result.json()
+
+  createNode({
+    releases: resultData,
+    id: `decap-releases`,
+    parent: null,
+    children: [],
+    internal: {
+      type: `DecapReleases`,
+      contentDigest: createContentDigest(resultData),
+    },
+  })
+}
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions;

src/components/release.js

@@ -1,67 +1,87 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import dayjs from 'dayjs';
 import styled from '@emotion/styled';
 
 import theme from '../theme';
 
-const ReleaseLink = styled.a`
+const ReleaseCard = styled.div`
   display: block;
-  padding: ${theme.space[4]} ${theme.space[3]};
+  padding: ${theme.space[4]} ${theme.space[3]} ${theme.space[2]};
   border-radius: ${theme.radii[1]};
   background: ${theme.colors.lighterGray};
   transition: background 0.2s ease;
   color: ${theme.colors.gray};
   height: 100%;
   margin-bottom: ${theme.space[3]};
+  flex: 1;
 
   h2,
   h3 {
     font-size: ${theme.fontsize[3]};
   }
 
-  &:hover {
-    background: ${theme.colors.white};
+  li {
+    list-style: disc inside;
   }
 `;
 
-const Version = styled.span`
+const Version = styled.a`
   background: ${theme.colors.shadeBlue};
   font-size: ${theme.fontsize[3]};
   padding: ${theme.space[1]};
   border-radius: ${theme.radii[1]};
   font-weight: 700;
   margin-right: ${theme.space[2]};
+  margin-bottom: ${theme.space[3]};
+  display: inline-block;
   color: ${theme.colors.gray};
+
+  &:hover {
+    color: ${theme.colors.primaryDark} !important;
+  }
+`;
+
+const DisplayDate = styled.p`
+  font-size: ${theme.fontsize[1]};
+`;
+
+const Links = styled.div`
+  margin-top: ${theme.space[3]};
+
+  a {
+    font-weight: 700;
+    text-decoration: none;
+    margin-right: ${theme.space[3]};
+    color: ${theme.colors.gray};
+
+    &:hover {
+      color: ${theme.colors.primaryDark};
+    }
+
+    &::after {
+      content: '↗';
+      margin-left: ${theme.space[1]};
+      font-size: ${theme.fontsize[1]};
+      color: ${theme.colors.lightishGray};
+    }
+  }
 `;
 
-function Release({ publishedAt, url, name, shortDescriptionHTML }) {
-  const displayDate = dayjs(publishedAt).format('MMMM D, YYYY');
+function Release({ published_at, url, name }) {
+  const displayDate = dayjs(published_at).format('MMMM D, YYYY');
 
   return (
-    <li css={css`
-      flex: 1;
-    `}>
-      <ReleaseLink href={url}>
-        <div css={css`
-          margin-bottom: ${theme.space[3]};
-        `}>
-          <Version>{name}</Version>
-          <span css={css`
-            font-size: ${theme.fontsize[1]};
-          `}>
-            {displayDate}
-          </span>
-        </div>
-        <span
-          css={css`
-            font-size: ${theme.fontsize[2]};
-          `}
-        >
-          <div dangerouslySetInnerHTML={{__html: shortDescriptionHTML }} />
-        </span>
-      </ReleaseLink>
-    </li>
+    <ReleaseCard>
+      <Version href={url}>{name}</Version>
+      <DisplayDate>
+        {displayDate}
+      </DisplayDate>
+      <Links>
+        <a href={url} target="_blank" rel="noreferrer">GitHub</a>
+        <a href={`https://www.npmjs.com/package/decap-cms/v/${name.split('@')[1]}`} target="_blank" rel="noreferrer">NPM</a>
+      </Links>
+    </ReleaseCard>
   );
 }
 

src/components/whats-new.js

@@ -20,7 +20,7 @@ function WhatsNew({ releases }) {
           text-align: center;
         `}>Latest Releases</h2>
 
-        <Grid as="ol" cols={3} css={css`
+        <Grid cols={3} css={css`
           grid-gap: ${theme.space[5]} !important;
         `}>
           {releases.length > 0 && releases.map((item, idx) => (

src/pages/index.js

@@ -48,7 +48,7 @@ const MarkdownButton = styled.span`
 
 function HomePage({ data }) {
   const landing = data.landing.childDataYaml;
-  const releases = data.github?.repository?.releases?.nodes || [];
+  const releases = data.releases.nodes[0].releases || [];
 
   return (
     <Layout hasPageHero>
@@ -137,7 +137,7 @@ function HomePage({ data }) {
         </div>
       </section>
 
-      <WhatsNew releases={releases} />
+      {releases.length > 0 && <WhatsNew releases={releases} />}
 
       <HomeSection
         css={css`
@@ -208,15 +208,12 @@ function HomePage({ data }) {
 
 export const pageQuery = graphql`
   query homeQuery {
-    github {
-      repository(name: "decap-cms", owner: "decaporg") {
-        releases(first: 3) {
-          nodes {
-            publishedAt
-            url
-            name
-            shortDescriptionHTML
-          }
+    releases: allDecapReleases {
+      nodes {
+        releases {
+          published_at
+          url
+          name
         }
       }
     }