docs(learning-path): add glueviz and paraview to learning paths

Add more contents to CONTRIBUTING guidelines.
Fix tailwindcss content option comma problems.
Remove the limit for number of blog posts, docs, and visualisation that can be build in the dev mode.

CONTRIBUTING.md

@@ -6,7 +6,7 @@ This is your community around interactive data visualisation at TUoS and we woul
 - [Issues, Bugs, Feedback!](#issue)
 - [Commit Message Guidelines](#commit)
 - [Contribute to the core website](#website)
-- [Contribute blog posts](#blogpost)
+- [Contribute contents](#contents)
 
 ## <a name="coc"></a> Code of Conduct
 
@@ -98,9 +98,28 @@ This repository comes with the following workflows:
 - **Deploy** - Deploy a new production build to the live environment from the master branch
 - **Deploy-QA** - Deploy a new production build to the QA environment from the development branch
 
-## <a name="blogpost"></a> Contribute blog post
+## <a name="contents"></a> Contribute contents
 
-To contribute, please visit the [guide](https://dataviz.shef.ac.uk/docs/22/03/2020/contribute-blog-post) for more information, if you have any questions raise an [issue](https://github.com/researchdata-sheffield/dataviz-hub2/issues) under this repository.
+To contribute contents such as blog posts, visualisations, and documentation, please click the links in each section for more information, if you have any questions raise an [issue](https://github.com/researchdata-sheffield/dataviz-hub2/issues) under this repository.
+
+### Blog post
+
+- [Guide on contribute blog posts](https://dataviz.shef.ac.uk/docs/22/03/2020/contribute-blog-post)
+
+### Documentation
+
+Documentation includes contents like learning paths, or document that can't be classified as blog posts nor visualisations. Writing a document is exactly the same as to writing a blog post but there are some extra properties you can specify:
+
+- `learningPath` (type: `boolean`) - `true` or `false`, this should set to `true` if this is the first part of a learning path you are writing. The remaining part of this learning path should not specify this property otherwise it will also be included in the learning path section in the home page.
+- `learningPathBtn` (type: `string`) - This is the text to be shown on the button after hovering over the learning path on the home page
+- `learningPathTitle` (type: `string`) - the title of the learning path to be shown on the home page
+- `learningPathDescription` (type: `string`) - the description of the learning path to be shown on the home page
+
+All markdown files and resources for the document should be placed under the directory `/content/docs/yourFolderName`.
+
+### Visualisation
+
+- [How to contribute visualisation?](https://dataviz.shef.ac.uk/docs/21/07/2021/Contribute-visualisation)
 
 [coc]: https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/CODE-OF-CONDUCT.md
 [issue]: https://github.com/researchdata-sheffield/dataviz-hub2/issues

content/blog/2022-02-18-Glue-Viz-for-Heterogeneous-Data/index.mdx

@@ -4,7 +4,7 @@ title: GlueViz for Heterogeneous data
 description: An open-sourced Python library with graphical user interace. Built on top of well known packages such as Numpy, Scipy, and Matplotlib.
 date: 2022-02-18
 category: [Articles]
-tag: [Heterogeneous, Python]
+tag: [Heterogeneous, Python, GlueViz]
 thumbnail: thumb.png
 ---
 

gatsby-node.js

@@ -189,13 +189,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     return obj.node.frontmatter.type === "visualisation";
   });
 
-  if (process.env.NODE_ENV == "development") {
-    visMdx = visMdx.slice(0, 10);
-    console.log(
-      `MESSAGE: Create only first ${visMdx.length} visualisations in development.`
-    );
-  }
-
   const visCategories = [];
   const visTags = [];
 
@@ -303,13 +296,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     return obj.node.frontmatter.type === "docs";
   });
 
-  if (process.env.NODE_ENV == "development") {
-    docsMdx = docsMdx.slice(0, 10);
-    console.log(
-      `MESSAGE: Create only first ${docsMdx.length} docs in development.`
-    );
-  }
-
   docsMdx.forEach(({ node }, index, arr) => {
     const prevDoc = arr[index - 1];
     const nextDoc = arr[index + 1];

src/components/home/learningPath.jsx

@@ -152,7 +152,14 @@ const LearningPath = () => {
         </div>
       </Fade>
 
-      <div className="max-w-6xl 2xl:max-w-7xl mx-auto mt-4 mb-16 lg:mb-56 overflow-hidden">
+      <div
+        className="mx-auto mt-4 mb-16 lg:mb-56 overflow-hidden"
+        style={{
+          overflow: "hidden",
+          width: "100%",
+          maxWidth: "1280px"
+        }}
+      >
         <Slider {...carouselSettings}>
           {data.allMdx &&
             data.allMdx.edges.map(({ node }, index, arr) => {

tailwind.config.js

@@ -4,11 +4,12 @@ const colors = require("tailwindcss/colors");
 module.exports = {
   important: "#website", //Make tailwind have highest specificity over other styling plugin (e.g. styled components)
   content: [
-    "./src/components/**/*.{jsx, js}",
-    "./src/pages/**/*.{jsx, js}",
-    "./src/templates/**/*.{jsx, js}",
-    "./content/**/*.{jsx, js, mdx}"
+    "./src/components/**/*.{jsx,js}", //no spaces between commas
+    "./src/pages/**/*.{jsx,js}",
+    "./src/templates/**/*.{jsx,js}",
+    "./content/**/*.{jsx,mdx,md}"
   ],
+
   theme: {
     extend: {
       screens: {