[Gatsby] New Code Page

gatsby-node.js

@@ -1,14 +1,120 @@
 const path = require("path")
+const sortLibs = require("./scripts/sort-libraries")
+const globby = require('globby');
+const frontmatterParser = require('parser-front-matter');
+const { readFile } = require("fs-extra");
+const { promisify } = require('util');
 
 exports.onCreatePage = async ({ page, actions }) => {
   const { createPage, deletePage } = actions
   deletePage(page)
+  let context = {
+    ...page.context,
+    sourcePath: path.relative(__dirname, page.componentPath),
+  }
+  if (page.path === "/code" || page.path === "/code/") {
+    const markdownFilePaths = await globby('src/content/code/**/*.md');
+    const codeData = {}
+    const slugMap = require('./src/content/code/slug-map.json');
+    const parse$ = promisify(frontmatterParser.parse);
+    await Promise.all(markdownFilePaths.map(async markdownFilePath => {
+
+      const markdownFileContent = await readFile(markdownFilePath, "utf-8")
+      let {
+        data: { name, description, url, github, npm, gem },
+        content: howto,
+      } = await parse$(markdownFileContent, undefined)
+      howto = howto.trim();
+      const pathArr = markdownFilePath.split("/")
+      if (markdownFilePath.includes("language-support")) {
+        const languageSupportDirIndex = pathArr.indexOf("language-support")
+        const languageNameSlugIndex = languageSupportDirIndex + 1
+        const languageNameSlug = pathArr[languageNameSlugIndex]
+        const languageName = slugMap[languageNameSlug]
+        codeData.Languages = codeData.Languages || {}
+        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].push({
+          name,
+          description,
+          howto,
+          url,
+          github,
+          npm,
+          gem,
+          sourcePath: markdownFilePath,
+        })
+      } else {
+        const codeDirIndex = pathArr.indexOf("code")
+        const categoryNameSlugIndex = codeDirIndex + 1
+        const categoryNameSlug = pathArr[categoryNameSlugIndex]
+        const categoryName = slugMap[categoryNameSlug]
+        codeData[categoryName] = codeData[categoryName] || []
+        codeData[categoryName].push({
+          name,
+          description,
+          howto,
+          url,
+          github,
+          npm,
+          gem,
+          sourcePath: markdownFilePath,
+        })
+      }
+    }))
+    const languageList = []
+    let sortedTools = []
+    await Promise.all([
+      Promise.all(
+        Object.keys(codeData.Languages).map(async languageName => {
+          const libraryCategoryMap = codeData.Languages[languageName]
+          let languageTotalStars = 0
+          await Promise.all(
+            Object.keys(libraryCategoryMap).map(async libraryCategoryName => {
+              const libraries = libraryCategoryMap[libraryCategoryName]
+              const { sortedLibs, totalStars } = await sortLibs(libraries)
+              libraryCategoryMap[libraryCategoryName] = sortedLibs
+              languageTotalStars += totalStars || 0
+            })
+          )
+          languageList.push({
+            name: languageName,
+            totalStars: languageTotalStars,
+            categoryMap: libraryCategoryMap,
+          })
+        })
+      ),
+      sortLibs(codeData.Tools).then(({ sortedLibs }) => {
+        sortedTools = sortedLibs
+      }),
+    ])
+
+    context = {
+      ...context,
+      otherLibraries: {
+        Services: codeData.Services,
+        Tools: sortedTools,
+        "More Stuff": codeData["More Stuff"],
+      },
+      languageList: languageList.sort((a, b) => {
+        if (a.totalStars > b.totalStars) {
+          return -1
+        } else if (a.totalStars < b.totalStars) {
+          return 1
+        }
+        return 0
+      }),
+    }
+  }
   createPage({
     ...page,
-    context: {
-      ...page.context,
-      sourcePath: path.relative(__dirname, page.componentPath),
-    },
+    context,
   })
 }
 
@@ -64,7 +170,10 @@ exports.createPages = async ({ graphql, actions }) => {
         parent: { relativeDirectory, sourceInstanceName },
       } = node
 
-      if (sourceInstanceName !== "content") {
+      if (
+        sourceInstanceName !== "content" ||
+        relativeDirectory.includes("code")
+      ) {
         return
       }
 
@@ -176,7 +285,7 @@ exports.createPages = async ({ graphql, actions }) => {
         categoriesMap[currentCategory.name] = currentCategory
       }
 
-      sideBardata[folder] = Object.values(categoriesMap);
+      sideBardata[folder] = Object.values(categoriesMap)
     })
   )
 

package.json

@@ -24,13 +24,17 @@
     "gatsby-plugin-webfonts": "1.1.3",
     "gatsby-source-filesystem": "2.4.0",
     "gatsby-transformer-remark": "2.9.0",
+    "globby": "11.0.1",
     "graphql": "15.4.0",
     "marked": "1.2.2",
+    "numbro": "2.3.2",
+    "parser-front-matter": "1.6.4",
     "prism-react-renderer": "1.1.1",
     "prismjs": "1.22.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-helmet": "6.1.0"
+    "react-helmet": "6.1.0",
+    "timeago.js": "4.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "0.0.98",

scripts/sort-libraries.js

@@ -0,0 +1,209 @@
+const fetch = require(`node-fetch`);
+const numbro = require("numbro");
+const timeago = require('timeago.js');
+
+const getGitHubStats = async githubRepo => {
+  const [owner, repoName] = githubRepo.split("/")
+  const accessToken = process.env.GITHUB_ACCESS_TOKEN
+  if (!accessToken) {
+    return {};
+  }
+  const query = /* GraphQL */ `
+    fragment defaultBranchRefFragment on Ref {
+      target {
+        ... on Commit {
+          history(since: $since) {
+            edges {
+              node {
+                author {
+                  name
+                }
+                pushedDate
+              }
+            }
+          }
+        }
+      }
+    }
+    query($owner: String!, $repoName: String!, $since: GitTimestamp!) {
+      repositoryOwner(login: $owner) {
+        repository(name: $repoName) {
+          defaultBranchRef {
+            ...defaultBranchRefFragment
+          }
+          stargazers {
+            totalCount
+          }
+          updatedAt
+          forkCount
+          pullRequests {
+            totalCount
+          }
+          description
+          licenseInfo {
+            name
+          }
+          releases(last: 1) {
+            nodes {
+              publishedAt 
+            }
+          }
+          tags: refs(refPrefix: "refs/tags/", first: 1, orderBy: {field: TAG_COMMIT_DATE, direction: DESC}) {
+            nodes {
+              name
+              target {
+                ... on Tag {
+                  target {
+                    ... on Commit {
+                      pushedDate
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+  const lastMonth = new Date()
+  lastMonth.setMonth(lastMonth.getMonth() - 3)
+  const response = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    body: JSON.stringify({
+      query,
+      variables: { owner, repoName, since: lastMonth },
+    }),
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      "Content-Type": "application/json",
+    },
+  })
+  const responseJson = await response.json()
+  if (responseJson && responseJson.errors) {
+    throw JSON.stringify(responseJson.errors);
+  }
+  if (!responseJson || !responseJson.data) {
+    throw `GitHub returned empty response for ${owner}/${repoName}`
+  }
+  const { repositoryOwner } = responseJson.data
+  if (!repositoryOwner) {
+    throw `No GitHub user found for ${owner}/${repoName}`
+  }
+  const { repository: repo } = repositoryOwner
+  if (!repo) {
+    throw `No GitHub repo found ${owner}/${repoName}`
+  }
+  const stars = repo.stargazers.totalCount
+  const commitHistory = repo.defaultBranchRef.target.history.edges
+
+  let hasCommitsInLast3Months = false;
+  commitHistory.forEach(commit => {
+    if (!commit.node.author.name.match(/bot/i)) {
+      hasCommitsInLast3Months = true;
+    }
+  })
+  const formattedStars = numbro(stars).format({
+    average: true,
+  });
+
+  const releases = [];
+  if (repo.tags && repo.tags.nodes && repo.tags.nodes.length && repo.tags.nodes[0].target.target && repo.tags.nodes[0].target.target.pushedDate) {
+    releases.push(repo.tags.nodes[0].target.target.pushedDate);
+  }
+  if (repo.releases && repo.releases.nodes && repo.releases.nodes.length) {
+    releases.push(repo.releases.nodes[0].publishedAt)
+  }
+  if(owner.includes("graphql")) {
+    console.log({ releases, repoName })
+  }
+
+  const lastRelease = releases.filter(Boolean).sort().reverse()[0]
+
+  return {
+    hasCommitsInLast3Months,
+    stars,
+    formattedStars,
+    license: repo.licenseInfo && repo.licenseInfo.name,
+    lastRelease,
+    formattedLastRelease: lastRelease && timeago.format(lastRelease),
+  }
+}
+
+const getNpmStats = async packageName => {
+  const response = await fetch(
+    `https://api.npmjs.org/downloads/point/last-week/${encodeURIComponent(
+      packageName
+    )}`
+  )
+  const responseJson = await response.json()
+  const downloadCount = responseJson.downloads
+  return { downloadCount }
+}
+
+const getGemStats = async packageName => {
+  const response = await fetch(
+    `https://rubygems.org/api/v1/gems/${encodeURIComponent(packageName)}.json`
+  )
+  const responseJson = await response.json()
+  const downloadCount = responseJson.downloads
+  return { downloadCount }
+}
+
+const sortLibs = async libs => {
+  let totalStars = 0;
+  const libsWithScores = await Promise.all(
+    libs.map(async lib => {
+      const [
+        npmStats = {},
+        gemStars = {},
+        githubStats = {},
+      ] = await Promise.all([
+        lib.npm && getNpmStats(lib.npm),
+        lib.gem && getGemStats(lib.gem),
+        lib.github && getGitHubStats(lib.github),
+      ])
+      const result = {
+        ...lib,
+        ...npmStats,
+        ...gemStars,
+        ...githubStats,
+      }
+      totalStars += result.stars || 0;
+      return result;
+    })
+  )
+  const sortedLibs = libsWithScores.sort((a, b) => {
+    let aScore = 0,
+      bScore = 0
+    if ("downloadCount" in a && 'downloadCount' in b) {
+      if (a.downloadCount > b.downloadCount) {
+        aScore += 40
+      } else if (b.downloadCount > a.downloadCount) {
+        bScore += 40
+      }
+    }
+    if ("hasCommitsInLast3Months" in a && a.hasCommitsInLast3Months) {
+      aScore += 30
+    }
+    if ("hasCommitsInLast3Months" in b && b.hasCommitsInLast3Months) {
+      bScore += 30
+    }
+    if ('stars' in a && 'stars' in b) {
+      if (a.stars > b.stars) {
+        aScore += 40
+      } else if (a.stars < b.stars) {
+        bScore += 40
+      }
+    }
+    if (bScore > aScore) {
+      return 1
+    } else if (bScore < aScore) {
+      return -1
+    }
+    return 0
+  })
+  return { sortedLibs, totalStars }
+}
+
+module.exports = sortLibs