Merge branch 'microsoft:main' into main

.github/workflows/pages.yml

@@ -8,6 +8,9 @@ on:
   pull_request:
     branches:
       - main
+permissions:
+  packages: write
+  contents: write
 
 jobs:
   build-app:
@@ -84,7 +87,7 @@ jobs:
       - build-documentation
     environment:
       name: pages
-      url: https://${{ github.repository_owner }}.github.io/anyonecancode
+      url: https://${{ github.repository_owner }}.github.io/everyonecancode
 
     if: github.ref == 'refs/heads/main'
 

.vuepress/config.yml

@@ -1,8 +1,8 @@
 title: Anyone Can Code
 patterns: ["**/*.md", "!**/node_modules", "!templates/**", "!frontend/**"]
-base: /anyonecancode/instructions/
+base: /everyonecancode/instructions/
 themeConfig:
-  repo: "microsoft/anyonecancode"
+  repo: "microsoft/everyonecancode"
   editLinks: true
   sidebar:
     [

README.md

@@ -10,7 +10,7 @@
 
 <hr>
 
-## [Click here to take a look at the sample app](https://microsoft.github.io/anyonecancode/)
+## [Click here to take a look at the sample app](https://microsoft.github.io/everyonecancode/)
 
 ## Agenda for the Anyone can Code workshop
 

frontend/README.md

@@ -1,24 +1,29 @@
 # female-app-innovation-frontend
 
 ## Project setup
-```
+
+```bash
 npm install
 ```
 
 ### Compiles and hot-reloads for development
-```
-npm run serve
+
+```bash
+npm run dev
 ```
 
 ### Compiles and minifies for production
-```
+
+```bash
 npm run build
 ```
 
 ### Lints and fixes files
-```
+
+```bash
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/src/components/ImageList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="tile is-ancestor" style="margin-bottom: 100px;">
+    <div class="tile is-ancestor" style="margin-bottom: 100px">
       <div class="tile is-parent is-vertical">
         <div
           class="tile is-child"

frontend/src/components/Profile.vue

@@ -4,7 +4,7 @@
       :src="profile.avatar_url"
       alt="Profile Picture of User"
       ratio="1by1"
-      style="margin-top: 100px;"
+      style="margin-top: 100px"
       rounded
     ></b-image>
     <h1>{{ profile.name }}</h1>

frontend/src/views/FaceAI.vue

@@ -149,14 +149,18 @@ export default class FaceAI extends Vue {
             ],
           })
           .then((response) => {
-            if(response.length == 0) {
-              this.$confirm("The AI could not recognize your face, make sure the gray box covers most of your face.", "AI Error", "error")
-              .then((r: boolean) => {
-                this.$router.go(0);
-              })
-              .catch(() => {
-                this.$router.push({ name: 'home' })
-              });
+            if (response.length == 0) {
+              this.$confirm(
+                "The AI could not recognize your face, make sure the gray box covers most of your face.",
+                "AI Error",
+                "error"
+              )
+                .then((r: boolean) => {
+                  this.$router.go(0);
+                })
+                .catch(() => {
+                  this.$router.push({ name: "home" });
+                });
               return;
             }
             this.faces = response.map((face) => {
@@ -199,11 +203,15 @@ export default class FaceAI extends Vue {
                 glasses,
               };
             });
-          }).catch(err => {
-                this.$alert("An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.", "Face AI not available", "warning")
-                .then(() => this.$router.go(0));
-              console.log("An error occurred:");
-              console.error(err);
+          })
+          .catch((err) => {
+            this.$alert(
+              "An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.",
+              "Face AI not available",
+              "warning"
+            ).then(() => this.$router.go(0));
+            console.log("An error occurred:");
+            console.error(err);
           });
       });
   }

instructions/day1/ApplicationPart1/README.md

@@ -15,7 +15,7 @@ Today you will learn how to:
 ## Table Of Contents
 
 1. [Create a new branch in your project](#create-a-new-branch-in-your-project)
-2. [Change the title and it's color of your App](#change-the-title-and-its-color-of-your-app)
+2. [Change the title and its color of your App](#change-the-title-and-its-color-of-your-app)
 3. [Test your changes in your codespace](#test-your-changes-in-your-codespace)
 4. [Commit & push your changes](#commit--push-your-changes)
 5. [Open a pull request and merge it](#open-a-pull-request-and-merge-it)
@@ -26,8 +26,18 @@ Go to your repository on GitHub. Click on the "main" dropdown and type in the na
 
 ![Create a new branch](./images/create-branch.png)
 
+Let's type a few git commands in the terminal to create a new branch.
+![Terminal](./images/terminal.png)
+
+<details>
+<summary>What is a terminal?</summary>
+
+You are probably used to getting things done on your computer by moving your mouse around and clicking on things. There is actually a different way with which you can use your computer: The terminal!\ Instead of moving your mouse you can type a command in the terminal and the computer will execute it. Say, you want to go to a specific folder on your computer - we have a command for that, namely, `cd <path-to-your-folder>` (cd stands for change directory). There are many other commands that can do many different things. We call the set of all commands and their combinations the Shell Scripting language. You can try them out for yourself, go to the terminal (the little box as shown in the picture) and type `help` - this will list all the built-in commands. Feel free to play around and give them a try to familiarize yourself with the environment. For some handy common commands you can try: `pwd` (outputs the path of your current directory, pwd stands for print working directory) and `ls` (lists all the files in the current repository)
+
+</details>
+
 Go back into your codespace and type into the terminal:
-    
+
     git pull
 
 and afterwards:
@@ -40,27 +50,35 @@ It should look similar to this:
 
 Congrats! You just created a new branch and switched to it successfully. Now you can start making changes to your code!
 
-## Change the title and it's color of your App
+## Change the title and its color of your App
 
-Open the file **Home.vue** from the folder **frontend/src/views**. On top you find a so called `<template>` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `<b-navbar-item>` tags.
+Open the file `Home.vue` from the folder `frontend/src/views`. On top you find a so called `<template>` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `<b-navbar-item>` tags.
 
 ![Change title](./images/juliagram.png)
 
-To change the color we need to add a new attribute to the `<b-navbar-item>` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. You can find a full list of all possible colors [here](https://htmlcolorcodes.com/color-names/).
+To change the color we need to add a new attribute to the `<b-navbar-item>` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. [You can find a full list of all possible colors here.](https://htmlcolorcodes.com/color-names/)
 
 ![Change the color of the title](./images/style-tag.png)
 
-## Test your changes in your codespace 
+## Test your changes in your codespace
 
 1. Install recommended extensions when prompted.
 2. In the terminal, navigate to the frontend folder with `cd frontend`
 3. Run `npm install` to install node packages.
-4. Build the app with this command - `npm run build`
-5. Run the app - `npm run serve`
-6. Click *browse to site* when it pops up to see the deployed test site - you should now see your changes!
+4. Build the app with this command - `npm run dev`
+5. Click _browse to site_ when it pops up to see the deployed test site, you should now see your changes
+6. Now, try to change the color of the title to another color of your choice: the color will change automatically in the browser without you having to refresh the page!
 
 ![Browse to test site](./images/browse-test.png)
 
+
+
+| :warning: Troubleshooting          |
+|:---------------------------|
+| if the `open in browser`pop-up does not show up at the bottom of your window, refresh the page and retry    |
+
+
+
 ## Commit & push your changes
 
 Click on the `+` sign on the upper right of your terminal to create a new one. We do not want to stop our app from running, so we will use a new terminal for the next steps.
@@ -71,17 +89,19 @@ After verifying your changes, it's time to commit and push. At first we want to
 
 ![Git status](./images/git-status.png)
 
-Now run first `git add .` what will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
+Now first run `git add .` this will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
 
 ![Git commit and push](./images/git-commit-push.png)
 
 ## Open a pull request and merge it
 
 Now go back into your GitHub repository. You should see a message that you have pushed your branch. Click on the **Compare & pull request** button to open a new pull request. 
 
+> If this message does not appear, click on the **Pull requests** tab and then on the **New pull request** button.
+
 ![Compare & pull request](./images/compare-pull-request.png)
 
-A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge. 
+A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
 
 Click on the **Create pull request** button on the lower left to create a new pull request.
 
@@ -96,14 +116,13 @@ Another window opens. Here you can review your changes again. Click on **Files c
 
 Click back on **Conversation** to see the conversation view. Here you can see the commit message and the description we have added.
 
-Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch. 
+Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch.
 Today we will do this ourselves. Click on the **Merge pull request** and then **Confirm merge** button to merge your recent made changes.
 
-If everything went well, you should see a message that your pull request has been merged. 
+If everything went well, you should see a message that your pull request has been merged.
 
 ![Pull request merged](./images/pull-request-merged.png)
 
-Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch. 
-
+Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.
 
 [◀ Previous challenge](../GitHub/README.md) | [🔼 Home](../../../README.md) | [Next challenge ▶](../ApplicationPart2/README.md)