Merge pull request graphql#1019 from graphql/migrate-foundation-website-content

Migrate foundation website content

Thank you to everyone who participated in this PR and provided feedback on the content. You're all greatly appreciated! I'll merge this now and we can iterate on it in the future.

Author: brianwarner

gatsby-config.js

@@ -16,7 +16,19 @@ module.exports = {
         path: `${__dirname}/src/content`,
       },
     },
-    `gatsby-transformer-remark`,
+    {
+      resolve: "gatsby-transformer-remark",
+      options: {
+        plugins: [
+          {
+            resolve: "@weknow/gatsby-remark-twitter",
+            options: {
+              debug: true
+            }
+          }
+        ]
+      }
+    },
     {
       resolve: `gatsby-plugin-webfonts`,
       options: {

gatsby-node.js

@@ -32,14 +32,12 @@ exports.onCreatePage = async ({ page, actions }) => {
         const languageNameSlug = pathArr[languageNameSlugIndex]
         const languageName = slugMap[languageNameSlug]
         codeData.Languages = codeData.Languages || {}
-        codeData.Languages[languageName] =
-          codeData.Languages[languageName] || {}
+        codeData.Languages[languageName] = codeData.Languages[languageName] || {}
 
         const categoryNameSlugIndex = languageSupportDirIndex + 2
         const categoryNameSlug = pathArr[categoryNameSlugIndex]
         const categoryName = slugMap[categoryNameSlug]
-        codeData.Languages[languageName][categoryName] =
-          codeData.Languages[languageName][categoryName] || []
+        codeData.Languages[languageName][categoryName] = codeData.Languages[languageName][categoryName] || []
         codeData.Languages[languageName][categoryName].push({
           name,
           description,
@@ -157,150 +155,183 @@ exports.createPages = async ({ graphql, actions }) => {
     throw result.errors
   }
 
-  const { edges } = result.data.allMarkdownRemark
+  const markdownPages = result.data.allMarkdownRemark.edges
 
-  let sideBardata = {}
+  // foundation: [
+  //   {
+  //     fileAbsolutePath: '/graphql/graphql.github.io/src/content/foundation/About.md',
+  //     parent: {},
+  //     frontmatter: {},
+  //     id: '1d502d5e-3453-56cf-ad9a-7f6bfb68d9ba'
+  //   },
+  //   ...
+  //   ]
+  // }
   let pagesGroupedByFolder = {}
-  const allPages = []
 
-  await Promise.all(
-    edges.map(async ({ node }) => {
-      const {
-        frontmatter: { permalink, next, sidebarTitle },
-        parent: { relativeDirectory, sourceInstanceName },
-      } = node
+  // {
+  //   foundation: [
+  //     { name: 'foundation', links: [{"fileAbsolutePath":"/graphql/graphql.github.io/src/content/foundation/About.md","parent":{"relativeDirectory":"foundation","sourceInstanceName":"content"},"frontmatter":{"title":"What is the GraphQL Foundation?","permalink":"/foundation/","next":"/foundation/join/","category":"GraphQL Foundation","sublinks":null,"sidebarTitle":"About the Foundation","date":null},"id":"1d502d5e-3453-56cf-ad9a-7f6bfb68d9ba"}] },
+  //     { name: 'GraphQL Foundation', links: [Array] }
+  //   ],
+  // Note that this is mutated
+  let sideBardata = {}
 
-      if (
-        sourceInstanceName !== "content" ||
-        relativeDirectory.includes("code/")
-      ) {
-        return
-      }
 
-      if (!pagesGroupedByFolder[relativeDirectory]) {
-        pagesGroupedByFolder = {
-          ...pagesGroupedByFolder,
-          [relativeDirectory]: [node],
-        }
-      } else {
-        pagesGroupedByFolder = {
-          ...pagesGroupedByFolder,
-          [relativeDirectory]: [
-            ...pagesGroupedByFolder[relativeDirectory],
-            node,
-          ],
-        }
-      }
-      allPages.push({
-        permalink,
-        relativeDirectory,
-        sidebarTitle,
-        nextPermalink: next,
-        sourcePath: path.relative(__dirname, node.fileAbsolutePath),
-      })
-    })
-  )
+  // Sidebar items to add which don't come from markdown
+  const additionalSidebarItems = {
+    foundation: [{
+      name: "GraphQL Foundation",
+      links: [{  frontmatter: {  sidebarTitle:"Foundation Members", title: "Foundation Members", permalink: "/foundation/members/", date: null, category: "GraphQL Foundation" } }]
+    }]
+  }
 
-  await Promise.all(
-    Object.entries(pagesGroupedByFolder).map(async ([folder, pages]) => {
-      let pagesByUrl = {}
-      let previousPagesMap = {}
-      let pagesByDate = pages.sort((a, b) => {
-        const aDate = new Date(a.frontmatter.date || Date.now())
-        const bDate = new Date(b.frontmatter.date || Date.now())
-        if (aDate > bDate) {
-          return -1
-        } else if (aDate < bDate) {
-          return 1
-        }
-        return 0
-      })
+  // E.g.
+  // {
+  //   permalink: '/learn/best-practices/',
+  //   relativeDirectory: 'learn',
+  //   sidebarTitle: 'Introduction',
+  //   nextPermalink: '/learn/thinking-in-graphs/',
+  //   sourcePath: 'src/content/learn/BestPractice-Introduction.md'
+  // }
+  const allPages = []
 
-      await Promise.all(
-        pagesByDate.map(async page => {
-          const {
-            frontmatter: { permalink, next },
-          } = page
-          if (next) {
-            previousPagesMap[next] = permalink
-          }
-          pagesByUrl[permalink] = page
-        })
-      )
+  // Loop through all *.md files in the repo, setting up both pagesGroupedByFolder
+  // and allPages.
+  markdownPages.map(({ node }) => {
+    const {
+      frontmatter: { permalink, next, sidebarTitle },
+      parent: { relativeDirectory, sourceInstanceName },
+    } = node
 
-      let firstPage = null
+    if (sourceInstanceName !== "content" || relativeDirectory.includes("code/")) {
+      return
+    }
 
-      await Promise.all(
-        pagesByDate.map(async page => {
-          const {
-            frontmatter: { permalink },
-          } = page
+    if (!pagesGroupedByFolder[relativeDirectory]) {
+      pagesGroupedByFolder = {
+        ...pagesGroupedByFolder,
+        [relativeDirectory]: [node],
+      }
+    } else {
+      pagesGroupedByFolder = {
+        ...pagesGroupedByFolder,
+        [relativeDirectory]: [
+          ...pagesGroupedByFolder[relativeDirectory],
+          node,
+        ],
+      }
+    }
+  
+    allPages.push({
+      permalink,
+      relativeDirectory,
+      sidebarTitle,
+      nextPermalink: next,
+      sourcePath: path.relative(__dirname, node.fileAbsolutePath),
+    })
+  })
+  
+  // Loop through the sections in the sidebar, mutating the 
+  // next and previous objects for different
+  Object.entries(pagesGroupedByFolder).map(([folder, pages]) => {
+    let pagesByUrl = {}
+    let previousPagesMap = {}
+    let pagesByDate = pages.sort((a, b) => {
+      const aDate = new Date(a.frontmatter.date || Date.now())
+      const bDate = new Date(b.frontmatter.date || Date.now())
+      if (aDate > bDate) {
+        return -1
+      } else if (aDate < bDate) {
+        return 1
+      }
+      return 0
+    })
 
-          if (!previousPagesMap[permalink] && !firstPage) {
-            firstPage = page
-            return
-          }
-        })
-      )
+    pagesByDate.forEach(page => {
+      const next = page.frontmatter.next
+      const permalink = page.frontmatter.permalink
 
-      if (!firstPage) {
-        throw new Error(`First page not found in ${folder}`)
+      if (next) {
+        previousPagesMap[next] = permalink
       }
+      pagesByUrl[permalink] = page
+    })
 
-      let categoriesMap = {}
-      let currentCategory = null
+    let firstPage = null
+    pagesByDate.forEach(page => {
+      const permalink = page.frontmatter.permalink
+      if (!previousPagesMap[permalink] && !firstPage) {
+        firstPage = page
+        return
+      }
+    })
+    
+    if (!firstPage) {
+      throw new Error(`First page not found in ${folder}`)
+    }
 
-      let page = firstPage
-      let i = 0
-      while (page && i++ < 1000) {
-        const { frontmatter } = page
-        const {
-          category: definedCategory,
-          next: definedNextPageUrl,
-        } = frontmatter
-        let category = definedCategory || folder
-        if (!currentCategory || category !== currentCategory.name) {
-          if (currentCategory) {
-            if (!(currentCategory.name in categoriesMap)) {
-              categoriesMap[currentCategory.name] = currentCategory
-            }
-          }
-          currentCategory = {
-            name: category,
-            links: [],
+    let categoriesMap = {}
+    let currentCategory = null
+
+    let page = firstPage
+    let i = 0
+    while (page && i++ < 1000) {
+      const { frontmatter } = page
+      const {
+        category: definedCategory,
+        next: definedNextPageUrl,
+      } = frontmatter
+      let category = definedCategory || folder
+      if (!currentCategory || category !== currentCategory.name) {
+        if (currentCategory) {
+          if (!(currentCategory.name in categoriesMap)) {
+            categoriesMap[currentCategory.name] = currentCategory
           }
         }
-        currentCategory.links.push(page)
-        if (definedNextPageUrl) {
-          page = pagesByUrl[definedNextPageUrl]
-        } else {
-          page = pagesByDate[pagesByDate.indexOf(page) + 1]
-        }
-        if (currentCategory.links.includes(page)) {
-          page = null
+        currentCategory = {
+          name: category,
+          links: [],
         }
       }
-
-      if (!(currentCategory.name in categoriesMap)) {
-        categoriesMap[currentCategory.name] = currentCategory
+      currentCategory.links.push(page)
+      if (definedNextPageUrl) {
+        page = pagesByUrl[definedNextPageUrl]
+      } else {
+        page = pagesByDate[pagesByDate.indexOf(page) + 1]
+      }
+      if (currentCategory.links.includes(page)) {
+        page = null
       }
+    }
+
+    if (!(currentCategory.name in categoriesMap)) {
+      categoriesMap[currentCategory.name] = currentCategory
+    }
 
-      sideBardata[folder] = Object.values(categoriesMap)
+    sideBardata[folder] = Object.values(categoriesMap) 
+  })
+
+  Object.entries(additionalSidebarItems).map(([folder, sections]) => {
+    sections.forEach(s => {
+      const originalLinks = sideBardata[folder].find(l => l.name === s.name)
+      originalLinks.links  = [...originalLinks.links, ...s.links]
     })
-  )
+  })
 
-  await Promise.all(
-    allPages.map(async page => {
-      createPage({
-        path: `${page.permalink}`,
-        component: docTemplate,
-        context: {
-          permalink: page.permalink,
-          nextPermalink: page.nextPermalink,
-          sideBarData: sideBardata[page.relativeDirectory],
-          sourcePath: page.sourcePath,
-        },
-      })
+
+  // Use all the set up data to now tell Gatsby to create pages 
+  // on the site
+  allPages.forEach(page => {
+    createPage({
+      path: `${page.permalink}`,
+      component: docTemplate,
+      context: {
+        permalink: page.permalink,
+        nextPermalink: page.nextPermalink,
+        sideBarData: sideBardata[page.relativeDirectory],
+        sourcePath: page.sourcePath,
+      },
     })
-  )
+  })
 }

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@graphql-tools/schema": "7.0.0",
+    "@weknow/gatsby-remark-twitter": "^0.2.3",
     "codemirror": "5.58.2",
     "codemirror-graphql": "0.12.3",
     "gatsby": "2.25.0",

src/assets/css/_css/docs.less

@@ -288,3 +288,19 @@
     }
   }
 }
+
+.blog-sidebar {
+  .recent-posts {
+    li {
+      border-bottom: 1px solid #DDD;
+      line-height: 18px;
+      padding: 10px 0;
+      font-weight: bold;
+      color: @rhodamine-color;
+    }
+    a {
+      font-weight: normal;
+      color: #666;
+    }
+  }
+}