Link fixing and Dockerfile update

1. Updated the broken link for documentation and demo
2. Updated the Dockerfile for deployment. Uncommented the
3. Updated the favicon of Planimation
4. Updated documentation for docker deployment

Author: YIDING-CODER

Dockerfile

@@ -10,5 +10,8 @@ RUN npm run build
 FROM nginx:stable-alpine
 COPY --from=build /app/build /usr/share/nginx/html
 COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
-EXPOSE 80
-CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'
+EXPOSE 8080
+CMD nginx -g 'daemon off;'
+
+# Use the below settings for deploying website on Heroku
+# CMD sed -i -e 's/$PORT/'"$PORT"'/g' /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'

ReadMe.md

@@ -7,11 +7,11 @@ planimation is a modular and extensible open source framework to visualize seque
 [1.0 Project Overview](#1.0)
 
 [2.0 Deployment](#2.0)
-    
+
 [3.0 Development Environment](#3.0)
 
 [4.0 Using the system](#4.0)
- 
+
 [5.0 Architecture and Design](#5.0)
 
 [6.0 Change Log](#6.0)
@@ -26,7 +26,7 @@ Planimation is an openSource framework to visualise sequential solutions of plan
 
 The planimation goals are:
 
-* help to debug PDDL code for Online PDDL Editor users 
+* help to debug PDDL code for Online PDDL Editor users
 
 * increases user understanding of planning problems
 
@@ -52,7 +52,7 @@ The specific goals are:
 
 <h1 id="2.0"> 2.0 Deployment </h1>
 
-## Overview 
+## Overview
 
 Before building your development environment, you’ll need:
 A code editor
@@ -98,7 +98,7 @@ git clone https://github.com/visual-heuristics/frontend-js
 
 ```
 git config user.name "Mona Lisa"
- 
+
 git config user.email "[email protected]"
 ```
 ## Install frontend development environment:
@@ -116,7 +116,7 @@ npm run start
 ```
 This will open a page on your browser, and you should see a jumping rabbit like this:
 
- 
+
 
 Now, the development environment is all set up! Start coding😊
 
@@ -127,6 +127,13 @@ yarn test  //or “npm test” or testing in Jest
 ```
 Open the link in your browser, and you should see a visualisation of block world .
 
+### Deployment with Docker
+```
+docker build -t planimation_js .
+docker run -dp 8080:8080 planimation_js
+```
+Map TCP port 8080 in the container to port 8080 on the Docker host. Please make
+sure the docker port is same as the port number in nginx.conf.
 
 <h1 id="3.0"> 3.0 Development Environment</h1>
 
@@ -148,7 +155,7 @@ https://confluence.cis.unimelb.edu.au:8443/display/VH/Development+Environment+Se
 ## 4.1. Project Homepage:
 
 In coordinator homepage: Shows the four sections of the project.
-https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook 
+https://confluence.cis.unimelb.edu.au:8443/display/VH/Design+Notebook
 
 ### 4.1.1 Go to PDDL file upload page
 
@@ -225,7 +232,7 @@ https://confluence.cis.unimelb.edu.au:8443/display/VH/Operational+Concept+Docume
 https://confluence.cis.unimelb.edu.au:8443/display/VH/Developer+Information+Frontend
 
 
-<h1 id="6.0"> 6.0 Change Log </h1> 
+<h1 id="6.0"> 6.0 Change Log </h1>
 
 
 ### 19/08/2021

nginx.conf

@@ -1,5 +1,7 @@
 server {
-    listen $PORT;
+    # Use below settings for depolying application on Heroku
+    # listen $PORT;
+    listen 8080;
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;

public/favicon.ico

@@ -39,15 +39,15 @@ const nav = {
     problem: '/problem',
     vfg: '/vfg',
     manual: 'https://planimation.github.io/documentation/ ',
-    demo: 'https://www.youtube.com/watch?v=Cj2rWdt1YQU',
+    demo: 'https://github.com/planimation/documentation/tree/master/AnimationProfiles',
     home: '/'
 };
 
 function NavigationBar() {
     const [ url , setUrl ] = useState();
     const history = useHistory();
     const classes = useStyles();
-    
+
     const handleClick = (url) => {
         setUrl(url);
         if(url==='manual'){
@@ -75,10 +75,10 @@ function NavigationBar() {
           VFG
         </Link>
         <Link variant="button" color="inherit" className={classes.link}>
-          <a href={'https://planimation.github.io/documentation/'} target='_blank' rel="noreferrer" className={classes.alink}>User Manual</a>
+          <a href={nav.manual} target='_blank' rel="noreferrer" className={classes.alink}>User Manual</a>
         </Link>
-        <Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>
-        <a href={'https://www.youtube.com/watch?v=Cj2rWdt1YQU'} target='_blank' rel="noreferrer" className={classes.alink}>Demo</a>
+        <Link variant="button" color="inherit" className={classes.link}>
+        <a href={nav.demo} target='_blank' rel="noreferrer" className={classes.alink}>Demo</a>
         </Link>
       </nav>
       <Button color="inherit" variant="outlined"onClick={()=>handleClick('home')}  className={classes.link} >
@@ -88,4 +88,4 @@ function NavigationBar() {
   </AppBar>);
 }
 
-export default NavigationBar;
+export default NavigationBar;

src/components/navigationBar/navigationBar.js

@@ -102,7 +102,7 @@ export default function Home() {
         window.open('https://planimation.github.io/documentation/')
         break;
       case 4:
-        window.open('https://www.youtube.com/watch?v=Cj2rWdt1YQU')
+        window.open('https://github.com/planimation/documentation/tree/master/AnimationProfiles')
         break;
       default: return;
     }