docs: add intro blog post for visualisation page

content/blog/2021-10-05-Paraview/index.mdx

@@ -2,7 +2,7 @@
 author: [Suzana Silva]
 title: Applications of ParaView
 description: "ParaView "
-date: 2021-06-15
+date: 2021-10-05
 category: [Articles]
 tag: [ParaView, Visualisation]
 thumbnail: thumb.png

content/blog/2021-11-08-New-Visualisation-Page/index.mdx

@@ -0,0 +1,30 @@
+---
+author: [Dataviz Team]
+title: Introduce the new visualisation page
+description: We are excited to announce the new visualisation page in Dataviz.Shef!
+date: 2021-11-08
+category: [News]
+tag: [Dataviz, Research]
+thumbnail: visPage.png
+---
+
+Data visualisation is a great way to create impact, in support of the University’s vision, and supports the promotion of research. Looking back over the past year, data visualisation has been an effective tool for understanding worldwide trending topics such as climate change, CoVid-19, and elections. Attractive and understandable data visualisations would allow the university’s research to become more visible to different stakeholders. In addition, by sharing any source code, data, and other resources involved in making the visualisation, others will benefit from the openness and allowing them to easily reproduce or adapt from our materials, as well as drawing inspiration from it.
+
+In the past year, we have created the website <Link to="/">Dataviz.shef</Link>, hosted several <Link to="/events">events</Link>, and provided materials such as <Link to="/#learning-path">learning paths</Link>, <Link to="/blog">blog posts</Link>, and <Link to="/blog/category/tutorial">tutorials</Link> to a range of audiences in the university. Recently, inspired by [Beautiful News](https://informationisbeautiful.net/beautifulnews/), we have created a <Link to="/visualisation/">new visualisation page</Link> for latest research news stories at the University of Sheffield. Visualisations are categorised into departments/faculties and given relevant tags to help you find items which interest you the most.
+
+![New visualisation page](visPage.png)
+
+We are committed to making research news more understandable and accessible to wider audiences. Each visualisation comes with a brief description and several tabs containing information to help you digest and absorb the data. In addition, we have tested most of the visualisations using web accessibility tools to remove as many barriers as possible which prevent people accessing the latest news via data visualisation. From time to time you might want to explore some visualisations in detail. Since data and codes are open sourced (and digitally preserved) for almost every visualisation you would not have to worry about finding underlying resources.
+
+If you would like to download and save visualisations you can use the download button just under the visualisation to download the static version of the visualisation in SVG or PNG format (if available). Most authors also provide embed code if you would like to present and share visualisations somewhere else!
+
+Another new feature comes with the new visualisation page is the Twitter card. you can share the visualisation on Twitter with pretty thumbnails by either:
+
+- click the twitter button under each visualisation, or
+- copy and paste the url of the visualisation into the tweet compose box
+
+![Twitter card](twitterCard.png)
+
+If you would like to contribute visualisations to this new page, please refer to the document - <Link to="/docs/21/07/2021/Contribute-visualisation">Contribute visualisation</Link>.
+
+We love feedback and suggestions! Please <a href="mailto:rdm@sheffield.ac.uk">get in touch</a> with us via Slack or Email.

content/docs/2021-07-21-Contribute-visualisation/index.mdx

@@ -7,6 +7,17 @@ description: "(UPDATED on 21 Jul 2021) In this document you will find out more a
 date: "2021-07-21"
 ---
 
+## Note
+
+Thank you for considering contributing visualisations to Dataviz.Shef! We are committed to <a href="https://www.sheffield.ac.uk/openresearch/university-statement-open-research">open research</a> so there are a couple of things to bear in mind before you proceed:
+
+- Are you willing to make your code open sourced for the visualisation?
+- Are other people able to access the data?
+- Are you willing to include some simple guidance on how to reproduce the visualisation?
+- Are your resources licensed?
+
+If you could answer yes to most of the questions above, please go to the next section.
+
 ## Setup
 
 The setup process is identical to the one in [contributing blog post][contributeblogpost]. You will need to install [git](https://git-scm.com/) and [Nodejs](https://nodejs.org/en/), and have a GitHub account in order to preview and submit your visualisation. Once you've set up, open git bash and run `gatsby develop` in the base directory. Now you can view the site at `http://localhost:8000/`. The website will be reloaded automatically on changes. Press `Ctrl + C` (`Command + C` on macOS) if you want to stop the server running locally. Your visualisation item page will be located at `http://localhost:8000`.

gatsby-node.js

@@ -175,23 +175,10 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
             }
             frontmatter {
               template
-              author {
-                name
-                avatar {
-                  childImageSharp {
-                    gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
-                  }
-                }
-              }
               title
               date(formatString: "dddd Do MMMM YYYY")
               category
               tag
-              thumbnail {
-                childImageSharp {
-                  gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
-                }
-              }
               d3
               type
               published

src/components/shared/queryFragment.jsx

@@ -1,4 +1,4 @@
-import { graphql } from "gatsby"
+import { graphql } from "gatsby";
 
 /**
  * fragment FragmentName on TypeName {
@@ -13,7 +13,7 @@ export const eventbriteEdge = graphql`
       node {
         id
         url
-        name{
+        name {
           text
         }
         logo {
@@ -37,44 +37,46 @@ export const eventbriteEdge = graphql`
       }
     }
   }
-`
+`;
 
-export const mdxFrontmatter = graphql`fragment MdxFrontmatter on Frontmatter {
-  type
-  title
-  date(formatString: "DD MMMM YYYY")
-  description
-  tag
-  category
-  featured
-  thumbnail {
-    childImageSharp {
-      gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
-    }
-  }
-  author {
-    name
-    avatar {
+export const mdxFrontmatter = graphql`
+  fragment MdxFrontmatter on Frontmatter {
+    type
+    title
+    date(formatString: "DD MMMM YYYY")
+    description
+    tag
+    category
+    featured
+    thumbnail {
       childImageSharp {
-        gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+        gatsbyImageData(layout: FULL_WIDTH)
+      }
+    }
+    author {
+      name
+      avatar {
+        childImageSharp {
+          gatsbyImageData(layout: FULL_WIDTH)
+        }
       }
     }
   }
-}`
+`;
 
-export const mdxFields = graphql`fragment MdxFields on MdxFields {
-  slug
-  readingTime {
-    text
+export const mdxFields = graphql`
+  fragment MdxFields on MdxFields {
+    slug
+    readingTime {
+      text
+    }
   }
-}  
-`
-
+`;
 
 export const imageSharp = graphql`
   fragment ImageSharp on File {
     childImageSharp {
       gatsbyImageData
     }
   }
-`
+`;