Gatsby redesign

.gitignore

@@ -1 +1,69 @@
-.idea
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 controlsystemstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -1,9 +1,68 @@
-controlsystemstudio.github.io
-==============================
+<img src="/src/images/CSS_logo_2019_darkblue_no border_v08.svg" width="200px">
 
-cs-studio webpage
+# controlsystemstudio.org [![Netlify Status](https://api.netlify.com/api/v1/badges/8f0d3cc9-2b0b-48ea-82ac-172247bf3480/deploy-status)](https://app.netlify.com/sites/lucid-clarke-a55e88/deploys)
 
-served from:
-http://controlsystemstudio.org
+Redesign of the website for Control System Studio (CS-Studio). Made using GatsbyJS and hosted on netlify. 
 
-Most data comes from google docs and github api
+https://lucid-clarke-a55e88.netlify.com/
+
+## Developing/Testing locally
+Gatsby has a fantastic development server feature, which allows you to preview the page immediately without building it. Make sure to install all npm dependencies using `npm install` the first time you run the site.
+
+    $ npm start
+
+## Building
+To run the site on a server, it needs to be built first.
+
+    $ npm install
+    $ npm run build
+
+The website files can be found in `public`.
+
+## Editing content
+The pages can be found in the folder `src/pages`, whereas resuable parts can be found in `src/components` as React components.
+Pages are written in the JSX format, which is similar to HTML, but behaves differently in certain usecases.
+Simple paragraphs and lists can be written in the familiar HTML format, but for example images are embedded in a different way.
+Images are placed inside `src/images` and queried using GraphQL.
+
+    opi: file(
+        relativePath: { eq: "CS-Studio-OPIs_and_Keyvisual_v03_big.png" }
+      ) {
+        childImageSharp {
+          fluid(maxWidth: 3840, maxHeight: 2160) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+        }
+      }
+
+When running the development server, you can go to [localhost:8000/__graphql](http://localhost:8000/__graphql) to test out GraphQL queries.
+
+This query is included inside of the useStaticQuery hook inside of the main component of the page like this:
+
+    // First import the relevant functions and components
+    import { graphql, useStaticQuery } from 'gatsby'
+    import Img from 'gatsby-images'
+
+    // Then query inside the main component
+    const Component = () => {
+        const images = useStaticQuery(graphql`
+            query {
+                // <- image query here
+            }
+        `)
+
+        return (
+            // ...
+        )
+    }
+
+The image can then be displayed using gatsby-images' `Img` component.
+
+    <Img
+          fluid={images.opi.childImageSharp.fluid}
+    />
+
+For more detail please refer to the [Gatsby documentation](https://www.gatsbyjs.org/docs/working-with-images/).
+
+## Downloads
+Because links to downloads can be updated quite frequently, they are separated from the Download page to make editing them a little easier. You can find the file where you can define each link necessary in `src/utils/downloadinfo.js`