Update contents after Russell's review

.Rprofile

@@ -0,0 +1 @@
+source("renv/activate.R")

.gitignore

@@ -7,4 +7,11 @@ rsconnect/**
 
 .DS_Store
 
-*.html
+*.html
+
+# posit publisher deployment folder
+.posit/
+
+# renv
+renv/library/
+renv/staging/

README.md

@@ -1,2 +1,75 @@
 # python-training
-An interactive, online introduction to python training for employees in Public Health Scotland.
+This is an interactive, online introduction to python training for employees 
+in Public Health Scotland.
+
+## Running in Posit Workbench
+
+This project has a renv (R environment) and you can recreate the needed packages following these steps:
+1. Install renv in your current R session:
+``` r
+install.packages("renv")
+```
+2. Restart your R session
+3. Run this command in R console:
+``` r
+renv::restore()
+```
+4. All the required packages will be installed.
+5. If the restore process fails you can install required R packages running these lines of code in your R console:
+``` r
+install.packages("learnr")
+install.packages("reticulate")
+```
+
+### R required packages
+
+
+| Package | Description |
+|---------|---------|
+| learnr | It is required to build the shiny app |
+| reticulate | It is required for running embedded python sessions |
+
+### Python required packages
+
+The required Python are available in requirements.txt file. No need to install since reticulate R package manages the required virtual environment installation.
+
+| Package | Description |
+|---------|---------|
+| pandas | It is required to read files (e.g. CSV) and wrangle its content |
+
+
+### Troubleshooting
+
+- If PWB has been updated it means there are new Python versions. So you have to 
+check if your previously created pyenv is still there. Run this command in the 
+terminal tab: `ls -l ~/.virtualenvs`
+- If you see pyenv folder, you have to delete it using this command: 
+`rm -rf ~/.virtualenvs/pyenv`
+- The previous pyenv gets obsolete because of a PWB update with new Python 
+versions.
+- We will be able to run this project because it will create a new pyenv 
+(with the new Python version).
+
+## Deployment
+This project can be deployed in Posit connect using Posit Publisher Positron extension. Go to the following repo [vscode_prep](https://github.com/Public-Health-Scotland/vscode_prep) and go to Deployment folder. This folder contains general steps to deploy a project.
+
+-  You will need an API token to authenticate your permissions (Viewer/Publisher) in Posit Connect
+-  Ask for the current Posit connect project URL if it has already been deployed.
+-  Check Folder content table to see which files are required for deployment (if you upload everything you will waste space)
+
+### Folder content
+
+This project contains the following folders and files:
+
+| Folder/File | Description | To deploy | On GitHub |
+|--------------|-----------------------------|--------------|--------------|
+| data/ | This folder contains all CSV files used in this project | ✅ | ✅ |
+| images/ | This folder contains all required images | ✅ | ✅ |
+| css/ | This folder contains CSS to style the project | ✅ | ✅ |
+| .gitignore | This file contains a list of files/folders which are not uploaded to GitHub | ❌ | ✅ |
+| intro.Rmd | This is the entry point file which contains the main R shiny application | ✅ | ✅ |
+| README.md | This file contains the project description | ❌ | ✅ |
+| requirements.txt | This file is essencial to create your Python virtual environment using Reticulate R package | ✅ | ✅ |
+| .Rprofile | R project file generated by R studio | ❌ | ✅ |
+| renv/ and renv.lock | R environmet to recreated needed packages | ❌ | ✅ |
+| .posit | Temporary folder created when using posit publisher extension for deployment | ❌ | ❌ |

css/style.css

@@ -1,37 +1,121 @@
 @import url("https://fonts.googleapis.com/css?family=Open Sans");
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
 
-body, h1, h2, h3, h4, h5, h6, p, button {
-  font-family: 'Open Sans';
+@media (prefers-color-scheme: dark) {
+  :root {
+    --phs-logo: url("../images/phs-logo-white.svg");
+    --phs-color-bg: #1a1a2e;
+    --phs-color-fg: #e8e8e8;
+    --phs-h: #80BCEA;
+    --phs-code-bg: #252542;
+    --phs-btn-primary: #252542;  
+    --phs-btn-success: #252542;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --phs-logo: url("../images/phs-logo.svg");
+    --phs-color-bg: #ffffff;
+    --phs-color-fg: #333333;
+    --phs-h: #433683;
+    --phs-code-bg: #ffffff;
+    --phs-btn-primary:#0097d7;
+    --phs-btn-success: #80ba27;
+  }
+}
+
+.custom-navbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.phs-logo {
+  background-image: var(--phs-logo);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right center;
+  width: 300px;
+  height: 100px;
 }
 
-h1, h2 {
-  color: #433683;
+.tutorial-exercise-code-editor {
+  background-color: var(--phs-code-bg) !important;
+  color: var(--phs-color-fg);
 }
 
-h3, h4, h5 {
-  color: #bd27b9;
+pre, code {
+  background-color: var(--phs-code-bg) !important;
+  color: var(--phs-color-fg);
+}
+
+.topicsList .topic .nav-link {
+  color: #808080;
+	font-weight: bold;
+}
+
+.topicsList .topic.current {
+  background-color: var(--phs-color-fg);
+  color: var(--phs-color-bg) !important;
+}
+
+body {
+  background-color: var(--phs-color-bg);
+  color: var(--phs-color-fg);
+}
+
+body, h1, h2, h3, h4, h5, h6, p, button {
+  font-family: 'Open Sans';
+}
+
+h1, h2, h3, h4, h5 {
+  color: var(--phs-h);
+  font-weight: bold;
 }
 
 code {
   font-family: 'Source Code Pro';
 }
 
 th {
-  color: #433683;
+  color: var(--phs-h);
 }
 
 .panel-heading {
-  color: #bd27b9;
+  color: var(--phs-h);
   padding-bottom: 10px;
 }
 
 .btn-primary {
-  background-color: #0097d7;
+  background-color: var(--phs-btn-primary);
+  color: var(--phs-color-fg);
+  border-color: var(--phs-color-fg);
 }
 
 .btn-success {
-  background-color: #80ba27;
+  background-color: var(--phs-btn-success);
+  color: var(--phs-color-fg);
+  border-color: var(--phs-color-fg);
+}
+
+.btn-default {
+  background-color: var(--phs-btn-success);
+  color: var(--phs-color-fg);
+  border-color: var(--phs-color-fg);
+}
+
+.btn-default:hover {
+  background-color: var(--phs-code-bg);
+  color: var(--phs-color-fg);
+  border-color: var(--phs-color-fg);
+}
+
+.btn:hover, .btn:focus, .btn.focus {
+  background-color: var(--phs-code-bg);
+  color: var(--phs-color-fg);
+  border-color: var(--phs-color-fg);
 }
 
 .tidyverse-logo {
@@ -56,4 +140,10 @@ img {
   border-color: #bd27b9;
   border-radius: 5px;
   padding: 10px;
+}
+
+.supporting-image-left {
+  float: left;
+  width: 400px;
+  padding-top: 10px;
 }