Html css v2 (#565)

Closes #538

~~Notes - will include v1 changes until `html-css-v1` is merged into
`main`~~

---------

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: loiswells97 <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: magdalenajadach <[email protected]>
Co-authored-by: Magdalena Jadach <[email protected]>
Co-authored-by: Dan Halson <[email protected]>
Co-authored-by: Max Elkins <[email protected]>
Co-authored-by: danhalson <[email protected]>
Co-authored-by: Pete Simonovic <[email protected]>
Co-authored-by: PetarSimonovic <[email protected]>
Co-authored-by: sra405 <[email protected]>
Co-authored-by: Greg Annandale <[email protected]>

Author: 9 people

.github/workflows/ci-cd.yml

@@ -19,9 +19,14 @@ jobs:
       with:
         node-version: 16
         cache: 'yarn'
+        registry-url: 'https://npm.pkg.github.com'
+        # Defaults to the user or organization that owns the workflow file
+        scope: '@RaspberryPiFoundation'
 
     - name: Install code
       run: yarn install --frozen-lock-file
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: eslint
       run: yarn lint
@@ -40,9 +45,14 @@ jobs:
       with:
         node-version: 16
         cache: 'yarn'
+        registry-url: 'https://npm.pkg.github.com'
+        # Defaults to the user or organization that owns the workflow file
+        scope: '@RaspberryPiFoundation'
 
     - name: Install code
       run: yarn install --frozen-lock-file
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Run tests
       run: yarn run test --coverage --maxWorkers=4 --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
@@ -65,9 +75,14 @@ jobs:
       with:
         node-version: 16
         cache: 'yarn'
+        registry-url: 'https://npm.pkg.github.com'
+        # Defaults to the user or organization that owns the workflow file
+        scope: '@RaspberryPiFoundation'
 
     - name: Install code
       run: yarn install --frozen-lock-file
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Cypress run
       uses: cypress-io/github-action@v5

.github/workflows/deploy.yml

@@ -112,9 +112,14 @@ jobs:
       with:
         node-version: 16
         cache: 'yarn'
+        registry-url: 'https://npm.pkg.github.com'
+        # Defaults to the user or organization that owns the workflow file
+        scope: '@RaspberryPiFoundation'
 
     - name: Install code
       run: yarn install --frozen-lock-file
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Build site and WC bundle
       run: |

.npmrc

@@ -0,0 +1,4 @@
+registry=https://registry.yarnpkg.com/
+
+@RaspberryPiFoundation:registry=https://npm.pkg.github.com
+always-auth=true

CHANGELOG.md

@@ -8,10 +8,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Sidebar settings (#585)
+- Sidebar info (#566)
+- Add Projects Panel to sidebar (#564)
+
 ### Fixed
 
+- Minor fixes to the sidebar layout (#602)
+- Fixed text wrap in the files section of the Sidebar (#596)
+
 ### Changed
 
+- LandingPage and ProjectBar's Save buttons use design-system-react (#579)
+- Update colors for buttons (#579)
+
 ## [0.17.1] - 2023-07-25
 
 ### Fixed
@@ -28,17 +38,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - `hex` attribute for `p5` `Color` class (#574)
 - `hex_color` function for `py5`, including imported mode (#574)
 
+### Changed
+
+- Refactored `Header` into new `ProjectBar` component and moved to same level as sidebar (#532)
+- `Sidebar` restyling and refactor to better support multiple panels (#501)
+- Refactored and restyled project files panel and removed project images (#501)
+- Moved project images into own sidebar panel (#567)
+- Fix to close `Add File` modal when `Enter` is pressed and file is valid (#509)
+- Move eslint config to `.eslintrc.json` with prettier support (#502)
+- Add `.editorconfig` (#502)
+- Default HTML project improvement (#543)
+- Update Beta Banner copy and add a link (#550)
+
 ### Fixed
 
 - HTML/CSS minor fixes (#594)
 - Color class attributes in `p5` (#574)
 - Make `py5` imported mode sketches run when `run_sketch` is commented out (#574)
 - Allow output text to be scrollable if overflow-y (#575)
-- Landing page design review comments (#560)
 - No longer renders a blank page on 401, 403 & 404 for embedded viewer (#534)
 - Input modal help text styling in light mode (#519)
 - Propagation of key press events in modals (#519)
+- Keyboard accessibility of project file opening (#501)
 - Quick fix for Editor header on mobile # (#551)
+- Landing page design review comments (#560)
 
 ### Changed
 

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:16.13.1
 
-RUN apt-get update && apt-get install -y sudo curl wget vim git zsh docker.io
+RUN apt-get update && apt-get install -y sudo curl wget vim git less zsh nodejs docker.io
 
 RUN sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"
 

README.md

@@ -16,7 +16,6 @@ cp .env.webcomponent.example .env.webcomponent
 Variables for the web application need to go into the `.env` file.
 Variables for the web component can be placed in `.env.webcomponent`.
 
-
 ## Available Scripts
 
 In the project directory, you can run:
@@ -44,7 +43,6 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-
 ## Testing
 
 Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
@@ -57,35 +55,35 @@ The repo includes the Editor Web Component which shares components with the edit
 
 ### Embedding
 
-The web component can be included in a page by using the `<editor-wc>` HTML element.  It takes the following attributes
+The web component can be included in a page by using the `<editor-wc>` HTML element. It takes the following attributes
 
-* `code`: A preset blob of code to show in the editor pane.
-* `sense_hat_always_enabled`: Show the Astro Pi Sense HAT emulator on page load
+- `code`: A preset blob of code to show in the editor pane.
+- `sense_hat_always_enabled`: Show the Astro Pi Sense HAT emulator on page load
 
 ### `yarn start:wc`
 
-Runs the web component in development mode.  Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
+Runs the web component in development mode. Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
 
 **NB** You need to have the main `yarn start` process running too.
 
-It is possible to add query strings to control how the web component is configured.  Any HTML attribute can be set on the query string, including `class`, `style` etc.
+It is possible to add query strings to control how the web component is configured. Any HTML attribute can be set on the query string, including `class`, `style` etc.
 
 For example, to load the page with the Sense Hat always showing, add [`?sense_hat_always_enabled` to the URL](http://localhost:3001?sense_hat_always_enabled)
 
 ## Deployment
 
-Deployment is managed through Github actions.  The UI is deployed to staging and production environments via an S3 bucket.  This requires the following environment variables to be set
+Deployment is managed through Github actions. The UI is deployed to staging and production environments via an S3 bucket. This requires the following environment variables to be set
 
-* `AWS_ACCESS_KEY_ID`
-* `AWS_REGION`
-* `AWS_S3_BUCKET`
-* `AWS_SECRET_ACCESS_KEY`
+- `AWS_ACCESS_KEY_ID`
+- `AWS_REGION`
+- `AWS_S3_BUCKET`
+- `AWS_SECRET_ACCESS_KEY`
 
-Other variables that pertain to the app, rather than its deployment are set with defaults in the [build-and-deploy workflow](./.github/workflows/build-and-deploy.yml).  These are also in `.env.example`.
+Other variables that pertain to the app, rather than its deployment are set with defaults in the [build-and-deploy workflow](./.github/workflows/build-and-deploy.yml). These are also in `.env.example`.
 
 ### Review apps
 
-Currently the build is deployed to both S3 and Heroku.  The PR should get updated with the Heroku URL, and the web component demo is at `/web-component.html` on the Heroku review app domain.
+Currently the build is deployed to both S3 and Heroku. The PR should get updated with the Heroku URL, and the web component demo is at `/web-component.html` on the Heroku review app domain.
 
 ### Release Process