feat: word cloud for visualisation page

Add word cloud component for visualisation pages.
Fix random number function.

content/blog/2021-06-15-Visualising-Cultural-Heritage-Data/index.mdx

@@ -81,4 +81,4 @@ There was a lot of useful content in this section which is easiest to understand
 
 Personally, I found the emphasis on visual design really useful throughout the whole section. If you are interested in amplifying the impact of your visualisations or you want to get started to make visualisations, then this section should give you some inspiration and useful tips on the best practices. In summary, the design of visualisations should represent the underlying data accurately, the visualisation itself should be clear to read without ambiguity as well as concisely deliver messages or information you want to get across, and the visualisation should communicate in an attractive way depending on the type of your audiences. There are many interesting examples in this workshop, and I encourage you to explore further by watching videos or reading notes.  
 
-At the end Olivia talked and gave examples of tools you can use to create visualisation, such as ggplot2, plotly, seaborn, and D3.js. If you are keen to explore these tools, our website's <Link to="/blog">blog</Link> and <Link to="/#learning_path">learning paths</Link> could be another good starting point. We regularly update the website and if you would like specific help creating a data visualisation, please contact us.
+At the end Olivia talked and gave examples of tools you can use to create visualisation, such as ggplot2, plotly, seaborn, and D3.js. If you are keen to explore these tools, our website's <Link to="/blog">blog</Link> and <Link to="/#learning-path">learning paths</Link> could be another good starting point. We regularly update the website and if you would like specific help creating a data visualisation, please contact us.

content/visualisation/2021-06-24-Increased-snack-intake-in-UK-and-Australia/index.mdx

@@ -4,7 +4,7 @@ author: ["Yu Liang Weng"]
 title: "People turned to sweets, chocolate and salty snacks during the Covid-19 lockdowns in the UK and Australia"
 thumbnail: thumb.png
 category: ["Department of Psychology"]
-tag: ["COVID-19 lockdown", "Food intake", "Craving control"]
+tag: ["COVID-19 lockdown", "COVID-19", "Food intake", "Craving control"]
 description: A new study led by the University of Sheffield suggests that treats, such as sweets, chocolate and salty treats, increased for some people during Covid-19 lockdowns. People with low control over their cravings were most at risk of increasing their snack intake during the lockdown. Researchers warn about weight and health related issues for at-risk adults due to the impact of lockdowns on our eating behaviours.
 date: "2021-06-24"
 rowSpan: 1

gatsby-node.js

@@ -26,7 +26,7 @@ exports.onCreateWebpackConfig = ({
             use: loaders.null(),
           },
         ],
-      },
+      }
     })
   }
 };
@@ -112,6 +112,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     return a.toLowerCase().localeCompare(b.toLowerCase(), 'en', { sensitivity: 'base'})
   }
 
+
   // one query for each type of file: blog, docs, (insert any new types here)
   const queryResult = await graphql(`
     query loadMdxQuery {
@@ -210,43 +211,58 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     prev[curr] = (prev[curr] || 0) + 1
     return prev
   }, {})
-  const allVisCats = Object.keys(countVisCats).sort(compareItem)
-
   const countVisTags = visTags.reduce((prev, curr) => {
     prev[curr] = (prev[curr] || 0) + 1
     return prev
   }, {})
-  const allVisTags = Object.keys(countVisTags).sort(compareItem)
+
+  // Put tags and categories in one array 
+  const allVisCatTag = [];
+
+  for (const [key, value] of Object.entries(countVisCats)) {
+    allVisCatTag.push({
+      name: key,
+      type: "category",
+      count: value
+    })
+  }
+
+  for (const [key, value] of Object.entries(countVisTags)) {
+    allVisCatTag.push({
+      name: key,
+      type: "tag",
+      count: value
+    })
+  }
+
 
   // create page for each tag
-  allVisTags.forEach((tag) => {
-    const link = `/visualisation/tag/${kebabCase(tag)}`
+  allVisCatTag
+  .filter(item => item.type === "tag")
+  .forEach((tag) => {
+    const link = `/visualisation/tag/${kebabCase(tag.name)}`
     createPage({
       path: link,
       component: visTagTemplate,
       context: {
-        tag: tag,
-        allVisCategories: allVisCats,
-        allVisTags: allVisTags,
-        countVisTags,
-        countVisCats
+        tag: tag.name,
+        allVisCatTag: allVisCatTag
       },
     })
   })
 
   // create page for each category
-  allVisCats.forEach((cat) => {
-    const link = `/visualisation/category/${kebabCase(cat)}`
+  allVisCatTag
+  .filter(item => item.type === "category")
+  .forEach((cat) => {
+    const link = `/visualisation/category/${kebabCase(cat.name)}`
 
     createPage({
       path: link,
       component: visCategoryTemplate,
       context: {
-        category: cat,
-        allVisCategories: allVisCats,
-        allVisTags: allVisTags,
-        countVisTags,
-        countVisCats
+        category: cat.name,
+        allVisCatTag: allVisCatTag
       },
     })
   })
@@ -255,10 +271,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     path: `/visualisation`,
     component: visTemplate,
     context: {
-      allVisCategories: allVisCats,
-      allVisTags: allVisTags,
-      countVisTags,
-      countVisCats
+      allVisCatTag: allVisCatTag
     },
   })