feature: News site update (#362)

* News pages

* RSS feed

* Pagination

* Dates for old posts

* remove unneeded line in nav

* Articles added

* uses old template on index page

* Number of posts on index page

* press kit moved

* move worker announcement

* Nav menu for news updated

* Thumbnails added to index page

* Update Starter announcement

* News about Worker 0.4

* Better images for Worker articles

* thumbnail for Graphile Migrate

* Better image for graphile migrate

* Custom summary on index page, defaults to excerpt

* Worker 0.1 announcement

* Starter 3.0

* formatted early PostGraphile articles

* PostGraphile 4.8 announcement

* Graphile Worker 1.0

* PostGraphile 4.10

* Wroker 0.9

* PostGraphile 4.11

* Nav idea

* PostGraphile 4.12

* New real time image works better as thumbnail

* GraphQL over SSE

* Worker 0.14

* GraphQL Radio

* Events articles

* Minor articles

* Styling of pagination

* Last editorial pass

* Fix titles

* Fix links

---------

Co-authored-by: Benjie Gillam <benjie@jemjie.com>

Author: jemgillam

gatsby-config.js

@@ -1,6 +1,9 @@
 module.exports = {
   siteMetadata: {
     title: `Graphile.org`,
+    description:
+      "Community funded open source utilities to build powerful, performant and extensible applications rapidly",
+    siteUrl: "https://graphile.org",
   },
   plugins: [
     `gatsby-plugin-mdx`,
@@ -22,6 +25,13 @@ module.exports = {
         name: `data`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/src/news`,
+        name: `news`,
+      },
+    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {
@@ -38,5 +48,68 @@ module.exports = {
       },
     },
     `gatsby-transformer-json`,
+    {
+      resolve: `gatsby-plugin-feed`,
+      options: {
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
+          }
+        `,
+        feeds: [
+          {
+            serialize: ({ query: { site, allFile } }) => {
+              return allFile.nodes.map(({ post: node }) => {
+                return Object.assign({}, node.frontmatter, {
+                  description: node.excerpt,
+                  date: node.frontmatter.date,
+                  url: site.siteMetadata.siteUrl + node.fields.slug,
+                  guid: site.siteMetadata.siteUrl + node.fields.slug,
+                  custom_elements: [{ "content:encoded": node.html }],
+                });
+              });
+            },
+            query: /* GraphQL */ `
+              {
+                allFile(
+                  filter: { sourceInstanceName: { eq: "news" } }
+                  sort: {
+                    fields: childMarkdownRemark___frontmatter___date
+                    order: DESC
+                  }
+                ) {
+                  nodes {
+                    post: childMarkdownRemark {
+                      excerpt
+                      html
+                      fields {
+                        slug
+                      }
+                      frontmatter {
+                        title
+                        date
+                      }
+                    }
+                  }
+                }
+              }
+            `,
+            output: "/news/rss.xml",
+            title: "Graphile News",
+            // Which URLs to advertise on?
+            // match: "^/news($|/)",
+            // optional configuration to specify external rss feed, such as feedburner
+            // link: "https://feeds.feedburner.com/gatsby/blog",
+          },
+        ],
+      },
+    },
   ],
 };

gatsby-node.js

@@ -1,12 +1,15 @@
 const path = require("path");
 //const { createFilePath } = require(`gatsby-source-filesystem`);
 
+const postsPerPage = 8;
+
 exports.createPages = async ({ actions, graphql }) => {
   const { createPage } = actions;
 
   const layouts = {
     page: path.resolve(`src/templates/page.js`),
     marketing: path.resolve(`src/templates/marketing.js`),
+    news: path.resolve(`src/templates/news.js`),
     home: path.resolve(`src/templates/home.js`),
   };
 
@@ -26,6 +29,9 @@ exports.createPages = async ({ actions, graphql }) => {
           }
         }
       }
+      news: allFile(filter: { sourceInstanceName: { eq: "news" } }) {
+        totalCount
+      }
     }
   `);
   if (result.errors) {
@@ -51,6 +57,22 @@ exports.createPages = async ({ actions, graphql }) => {
       },
     });
   });
+
+  // Create blog-list pages
+  const postCount = result.data.news.totalCount;
+  const numPages = Math.ceil(postCount / postsPerPage);
+  Array.from({ length: numPages }).forEach((_, i) => {
+    createPage({
+      path: i === 0 ? `/news` : `/news/${i + 1}`,
+      component: path.resolve("./src/templates/news.js"),
+      context: {
+        limit: postsPerPage,
+        skip: i * postsPerPage,
+        numPages,
+        currentPage: i + 1,
+      },
+    });
+  });
 };
 
 exports.onCreateNode = ({ node, actions /*, getNode*/ }) => {

package.json

@@ -24,6 +24,7 @@
     "gatsby": "^2.18.17",
     "gatsby-link": "^2.2.11",
     "gatsby-plugin-catch-links": "^2.1.7",
+    "gatsby-plugin-feed": "2.x",
     "gatsby-plugin-mdx": "^1.0.36",
     "gatsby-plugin-react-helmet": "^3.1.6",
     "gatsby-plugin-sass": "^2.1.13",
@@ -78,5 +79,8 @@
   },
   "optionalDependencies": {
     "fsevents": "^2.0.7"
+  },
+  "engines": {
+    "node": "12.x"
   }
 }

src/components/Layout/index.scss

@@ -1031,3 +1031,7 @@ svg.MarketingDivide {
   margin: 0.5rem;
   padding: 0.5rem;
 }
+
+.text-center2 {
+  text-align: center;
+}

src/data/nav.json

@@ -4,42 +4,161 @@
     "sections": [
       {
         "id": "main",
-        "title": "Archive"
+        "title": "Releases"
       },
       {
         "id": "about",
-        "title": "About"
+        "title": "About Graphile"
+      },
+      {
+        "id": "misc",
+        "title": "Talks, Events & Podcasts"
       }
     ],
     "pages": [
+      {
+        "to": "/news/20221020-development-support/",
+        "title": "Development Support Now Available",
+        "sectionId": "about"
+      },
+      {
+        "to": "/news/20221011-worker-014/",
+        "title": "Graphile Worker 0.14 - Batch Jobs",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20220714-graphql-radio/",
+        "title": "GraphQL Radio Appearance",
+        "sectionId": "misc"
+      },
+      {
+        "to": "/news/20220704-github-readme/",
+        "title": "Jem's Discussion Panel at GitHub ReadME",
+        "sectionId": "about"
+      },
+      {
+        "to": "/news/20220607-spec-news/",
+        "title": "Spec News Pod Launch",
+        "sectionId": "misc"
+      },
+      {
+        "to": "/news/20220415-graphql-over-sse/",
+        "title": "GraphQL over SSE",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20211207-graphql-galaxy/",
+        "title": "Working Group Discussion Panel",
+        "sectionId": "misc"
+      },
+      {
+        "to": "/news/20211109-graphql-summit/",
+        "title": "What's Next for the GraphQL Spec in 2022?",
+        "sectionId": "misc"
+      },
+      {
+        "to": "/news/20210527-postgraphile-412/",
+        "title": "PostGraphile 4.12 - Awesome Aggregates",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20210129-postgraphile-411/",
+        "title": "PostGraphile 4.11 - Wonderful Websockets",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20210120-worker-09/",
+        "title": "Graphile Worker 0.9",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20201208-github-sponsors/",
+        "title": "GitHub Sponsors Now Available to Organizations",
+        "sectionId": "about"
+      },
+      {
+        "to": "/news/20201127-postgraphile-410/",
+        "title": "PostGraphile 4.10 - Framework Friends",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200922-github-readme/",
+        "title": "Benjie's Story at GitHub ReadME",
+        "sectionId": "about"
+      },
+      {
+        "to": "/news/20201127-migrate-1/",
+        "title": "Graphile Migrate Reaches 1.0 Milestone",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200805-postgraphile-48/",
+        "title": "PostGraphile 4.8 - Excellent Enums",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200721-rita/",
+        "title": "pgRITA - A Tool for Postgres",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200427-starter-30/",
+        "title": "Graphile Starter 3.0",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200317-migrate-01/",
+        "title": "Graphile Migrate 0.1",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200205-worker-04/",
+        "title": "Graphile Worker 0.4",
+        "sectionId": "main"
+      },
+      {
+        "to": "/news/20200131-fosdem/",
+        "title": "Graphile Goes to FOSDEM 2020",
+        "sectionId": "misc"
+      },
       {
         "to": "/news/graphile-starter/",
-        "title": "Graphile Starter is here",
+        "title": "Graphile Starter Released",
         "sectionId": "main"
       },
       {
         "to": "/news/postgraphile-version-4-5/",
-        "title": "Version 4.5 - Explain feature",
+        "title": "PostGraphile 4.5 - Explain Feature",
         "sectionId": "main"
       },
+      {
+        "to": "/news/20191104-reactive-conf/",
+        "title": "Increasing velocity with GraphQL and Postgres",
+        "sectionId": "misc"
+      },
       {
         "to": "/news/postgraphile-version-4-4/",
-        "title": "Version 4.4 - Real-time",
+        "title": "PostGraphile 4.4 - Real-time",
         "sectionId": "main"
       },
       {
         "to": "/news/postgraphile-version-4-1/",
-        "title": "Version 4.1 - Better Webpackability",
+        "title": "PostGraphile 4.1 - Better Webpackability",
         "sectionId": "main"
       },
+      {
+        "to": "/news/20181023-graphql-finland/",
+        "title": "Database-Driven GraphQL Development",
+        "sectionId": "misc"
+      },
       {
         "to": "/news/postgraphile-version-4/",
-        "title": "Version 4 - Fantastic Performance",
+        "title": "PostGraphile 4.0 - Fantastic Performance",
         "sectionId": "main"
       },
       {
         "to": "/news/press-kit/",
-        "title": "Press Kit",
+        "title": "Graphile Press Kit",
         "sectionId": "about"
       }
     ]

src/news/2018-10-23-graphql-finland.md

@@ -0,0 +1,40 @@
+---
+layout: post
+title: "GraphQL Finland"
+date: 2018-10-23T01:00:00Z
+path: /news/20181023-graphql-finland/
+tags: conference, talks
+thumbnail: /images/news/youtube.svg
+thumbnailAlt:
+  "A cartoon developer leans against an oversized laptop showing the YouTube
+  logo"
+
+summary:
+  "Benjie gave a talk on Database-Driven GraphQL Development at GraphQL Finland.
+  Learn how a database-centric approach to GraphQL API development can give your
+  engineers more time to focus on the important parts of your project."
+---
+
+_2018-10-23_
+
+Benjie travelled to [GraphQL Finland](https://graphql-finland.fi/2018/) to give
+a talk on Database-Driven GraphQL Development. Learn how a database-centric
+approach to GraphQL API development can give your engineers more time to focus
+on the important parts of your application. Topics covered included
+authorization, adhering to GraphQL best practices, embracing the power of
+PostgreSQL, and avoiding common pitfalls.
+
+<div class="tc">
+<iframe 
+width="560"
+height="315"
+src="https://www.youtube-nocookie.com/embed/XDOrhTXd4pE"
+title="YouTube video player"
+frameborder="1" 
+style="border: 6px solid #1b1b3d; border-radius: 10px"
+allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+allowfullscreen>
+</iframe>
+</div>
+
+[You can also find the talk on YouTube here.](https://www.youtube.com/watch?v=XDOrhTXd4pE)