GH pages

.github/workflows/docs.yml

@@ -0,0 +1,23 @@
+name: Publish docs via GitHub Pages
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main  
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v2
+
+      - name: Deploy docs
+        uses: mhausenblas/mkdocs-deploy-gh-pages@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+          REQUIREMENTS: requirements.txt

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "markdownlint.config": {
+        "MD028": false,
+        "MD025": {
+            "front_matter_title": ""
+        }
+    }
+}

README.md

@@ -4,15 +4,15 @@ According to the World Health Organization there are more than 200 million stray
 
 Different breeds have different needs, or react differently to people, so when a stray or lost dog is found, identifying the breed can be a great help.
 
-![The mutt matcher phone app](./images/mutt-match-app-phone.png)
+![The mutt matcher phone app](./goals/media/mutt-match-app-phone.png)
 
 Your team has been asked by a fictional animal shelter to build **Mutt Matcher** - a mobile app to help determine the breed of a dog when it has been found. To help deliver this quickly, this will be a no-code app built using an on-line low/no-code app generation tool. This app will take a photo of the dog, and then use an image classifier Machine learning (ML) model to determine the breed, then show the breed in the app.
 
 This app will help workers and volunteers to be able to quickly detect the breed and make decisions on the best way to approach and care for the dog.
 
-![Pictures of dogs](./images/dog-pictures.png)
+![Pictures of dogs](./goals/media/dog-pictures.png)
 
-The animal shelter has provided [a set of images](./model-images) for a range of dog breeds to get you started. These can be used to train the ML model using a service called Custom Vision.
+The animal shelter has provided [a set of images](https://github.com/microsoft/hack-workshop-power-apps/tree/main/model-images) for a range of dog breeds to get you started. These can be used to train the ML model using a service called Custom Vision.
 
 ## Prerequisites
 
@@ -43,7 +43,7 @@ For more details on [supported browsers and troubleshooting](https://docs.micros
 
 Your team should also be familiar with the following:
 
-  - [Forking](https://docs.github.com/github/getting-started-with-github/quickstart/fork-a-repo) and [cloning](https://docs.github.com/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository) repositories
+- [Forking](https://docs.github.com/github/getting-started-with-github/quickstart/fork-a-repo) and [cloning](https://docs.github.com/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository) repositories
 
 ## Resources
 
@@ -53,7 +53,7 @@ If you get stuck, you can always ask a mentor for additional help.
 
 ## Exploring the application
 
-![Custom Vision logo](./images/custom-vision-logo.png) ![Power Apps logo](./images/power-apps-logo.png) ![Power Automate logo](./images/power-automate-logo.png)
+![Custom Vision logo](./goals/media/custom-vision-logo.png) ![Power Apps logo](./goals/media/power-apps-logo.png) ![Power Automate logo](./goals/media/power-automate-logo.png)
 
 The application your team will build will consist of 2 components:
 
@@ -79,11 +79,11 @@ Your team will train the ML model, build the mobile app, build the back end logi
 
 > 💁 Each goal below defines what you need to achieve, and points you to relevant on-line resources that will show you how the cloud services or tools work. The aim here is not to provide you with detailed steps to complete the task, but allow you to explore the documentation and learn more about the services as you work out how to complete each goal.
 
-1. [Train your ML model](train-model.md): Your team will need to train the ML model in the cloud using Microsoft Custom Vision. You can train and test this model using the images that have been provided by the animal shelter.
+1. [Train your ML model](./goals/train-model.md): Your team will need to train the ML model in the cloud using Microsoft Custom Vision. You can train and test this model using the images that have been provided by the animal shelter.
 
-1. [Build your no/low-code back end](back-end.md): Your team will use Power Automate with the Custom Vision connector to build a Power Automate flow that can be called with an image. This flow will send the image to Custom Vision, and return the detected breed.
+1. [Build your no/low-code back end](./goals/back-end.md): Your team will use Power Automate with the Custom Vision connector to build a Power Automate flow that can be called with an image. This flow will send the image to Custom Vision, and return the detected breed.
 
-1. [Build your no/low-code mobile app](mobile-app.md): Your team will use Power Apps to build a mobile app. This app will interact with the camera, capture an image, send it to the Power Automate flow, then show the result.
+1. [Build your no/low-code mobile app](./goals/mobile-app.md): Your team will use Power Apps to build a mobile app. This app will interact with the camera, capture an image, send it to the Power Automate flow, then show the result.
 
 ## Validation
 

goals/back-end.md

@@ -6,11 +6,11 @@ The goal of this section is create a Power Automate flow to classify an image.
 
 ## The no/low-code Service
 
-[![Power Automate logo](./images/power-automate-logo.png)](https://flow.microsoft.com/?WT.mc_id=academic-39324-jabenn)
+[![Power Automate logo](./media/power-automate-logo.png)](https://flow.microsoft.com/?WT.mc_id=academic-39324-jabenn)
 
 [Microsoft Power Automate](https://flow.microsoft.com/?WT.mc_id=academic-39324-jabenn) is a tool for building automated processes using flow-chart style no/low-code development. You start by defining triggers that are run when events happen, such as when a Power Apps mobile app button is tapped, an email is received, a form is submitted, or at a certain time each day. You then define a flow of events that happen using logic blocks, or connectors to services such as Custom Vision, databases, IoT platforms, or productivity applications.
 
-![A power automate flow showing 4 blogs in a sequence - Power Apps, classify an image, Parse JSON and Respond to a power app or flow](./images/power-automate-flow.png)
+![A power automate flow showing 4 blogs in a sequence - Power Apps, classify an image, Parse JSON and Respond to a power app or flow](./media/power-automate-flow.png)
 
 For this workshop, you will need a Power Automate flow that is called by a Power Apps mobile app button. This will be passed an image from the mobile devices camera. This image will then be passed to the Custom Vision connector to classify an image. After the image is classified, the tag with the highest probability will be returned.
 
@@ -52,13 +52,13 @@ Your team might find these resources helpful:
   
   The *Prediction Key* and *Prediction URL* come from the **Prediction URL** dialog. For the URL, you just need the root part, ending in `microsoft.com` or `azure.com` depending on the resource used when it was created.
 
-  ![The prediction key and url dialog](./images/prediction-key-url-root.png)
+  ![The prediction key and url dialog](./media/prediction-key-url-root.png)
 
   In the dialog above, the root URL is `https://westus2.api.cognitive.microsoft.com`.
 
   The *Project ID* comes from the *Project Settings* for your Custom Vision project, available from the cog button.
 
-  ![The custom vision project settings page showing the project ID](./images/custom-vision-project-settings.png)
+  ![The custom vision project settings page showing the project ID](./media/custom-vision-project-settings.png)
 
   The *Published iteration name* is the name you used when you published the iteration.
 
@@ -115,7 +115,7 @@ Your team might find these resources helpful:
 
 ## Final result
 
-![A power automate flow showing 4 blogs in a sequence - Power Apps, classify an image, Parse JSON and Respond to a power app or flow](./images/power-automate-flow.png)
+![A power automate flow showing 4 blogs in a sequence - Power Apps, classify an image, Parse JSON and Respond to a power app or flow](./media/power-automate-flow.png)
 
 ## Next challenge
 

goals/index.md

@@ -0,0 +1,3 @@
+{%
+   include-markdown "../README.md"
+%}

goals/mobile-app.md

@@ -4,15 +4,15 @@ Your team has a trained ML model, and built a Power Automate flow to use it. The
 
 ## The no/low-code Service
 
-[![Power Apps logo](./images/power-apps-logo.png)](https://powerapps.microsoft.com/?WT.mc_id=academic-39324-jabenn)
+[![Power Apps logo](./media/power-apps-logo.png)](https://powerapps.microsoft.com/?WT.mc_id=academic-39324-jabenn)
 
 The tool for building mobile apps with no/low-code is called [Microsoft Power Apps](https://powerapps.microsoft.com/?WT.mc_id=academic-39324-jabenn). You create an application by dragging/dropping controls onto a canvas, then adding code where necessary, such as code to call the Power Automate flow.
 
 When you create a mobile app, it runs inside the Power Apps host app - you install Power Apps on your phone, then from inside that app you can access all the different apps you develop.
 
-[![Download Power Apps from the iOS app store](./images/apple-store.png)](https://aka.ms/powerappsios) [![Download Power Apps from the Google play store](./images/google-play-badge.png)](https://aka.ms/powerappsandroid)
+[![Download Power Apps from the iOS app store](./media/apple-store.png)](https://aka.ms/powerappsios) [![Download Power Apps from the Google play store](./media/google-play-badge.png)](https://aka.ms/powerappsandroid)
 
-![The mutt matcher phone app](./images/mutt-match-app-phone.png)
+![The mutt matcher phone app](./media/mutt-match-app-phone.png)
 
 For this project, you will need to design an app that connects to the phones camera, captures an image on a button tap, sends the image to your Power Automate flow, then displays the result. You can design the app any way you like, taking advantage of all the design features to layout and style your app.
 
@@ -66,4 +66,4 @@ Have a mentor check your mobile app. They should be able to point your model dev
 
 ## Final result
 
-![The mutt matcher phone app](./images/mutt-match-app-phone.png)
+![The mutt matcher phone app](./media/mutt-match-app-phone.png)

goals/train-model.md

@@ -10,11 +10,11 @@ Your team will use a cloud service that uses transfer learning to train an ML mo
 
 ## The Azure Service
 
-[![The custom vision logo](./images/custom-vision-logo.png)](https://customvision.ai?WT.mc_id=academic-39324-jabenn)
+[![The custom vision logo](./media/custom-vision-logo.png)](https://customvision.ai?WT.mc_id=academic-39324-jabenn)
 
 The transfer learning service to use is [Custom Vision](https://customvision.ai?WT.mc_id=academic-39324-jabenn). This is a service from Microsoft that can train image classifiers using only a small number of images for each tag. Once your model has been trained, it can be published to be run in the cloud, using one of the Custom Vision SDKs for programming languages such as Python, Java or C#, via a REST API, or access from Power Automate using a Custom Vision connection. You can also download your model and run it locally on an IoT device, a web page, or in an application.
 
-![An american staffordshire terrier detected with an 89.5% probability](./images/custom-vision-detect-dog.png)
+![An american staffordshire terrier detected with an 89.5% probability](./media/custom-vision-detect-dog.png)
 
 Image classifiers don't give a single fixed answer of the detected tag, instead they provide a list of all the tags that the model has been trained on with the probability that the image matches that tag. In the image above, the results show values against each tag:
 
@@ -30,11 +30,11 @@ To use Custom Vision, you will need an [Azure for Students subscription](https:/
 
 ## Image files
 
-The images you can use to train your model are in the [model-images](./model-images) folder. You will need to clone this GitHub repo (or download it as a zip file) to access these images. The images are in 2 different folders:
+The images you can use to train your model are in the [model-images](https://github.com/microsoft/hack-workshop-power-apps/tree/main/model-images) folder. You will need to clone the [Hack Workshops Power Apps GitHub repo](https://github.com/microsoft/hack-workshop-power-apps) (or download it as a zip file) to access these images. The images are in 2 different folders:
 
-- [training-images](./model-images/training-images) - these are the images to use to train the model. The filename contains the tag for the image, along with a number to make the files uniquely named. For example, `american-staffordshire-terrier-1.jpg`, `american-staffordshire-terrier-1.jpg`, and `american-staffordshire-terrier-3.jpg` are all images for the tag `american-staffordshire-terrier`.
+- [training-images](https://github.com/microsoft/hack-workshop-power-apps/tree/main/model-images/training-images) - these are the images to use to train the model. The filename contains the tag for the image, along with a number to make the files uniquely named. For example, `american-staffordshire-terrier-1.jpg`, `american-staffordshire-terrier-1.jpg`, and `american-staffordshire-terrier-3.jpg` are all images for the tag `american-staffordshire-terrier`.
 
-- [testing-images](./model-images/testing-images) - these are images you can use to test the image classifier once it is trained. These are different from the training images.
+- [testing-images](https://github.com/microsoft/hack-workshop-power-apps/tree/main/model-images/testing-images) - these are images you can use to test the image classifier once it is trained. These are different from the training images.
 
 > ⚠️ It is important that when you tag these images, you use the tag from the file name. This will allow teh validation script to work.
 
@@ -70,7 +70,7 @@ You can validate your model using a Python script inside this repo.
 
 1. When prompted, enter the prediction key and the image file URL for your published model iteration. You can get these from the prediction API dialog from the **Prediction URL** button of the published iteration. You then need the *Image file* url and prediction key.
 
-    ![The prediction key and url dialog](./images/prediction-key-url.png)
+    ![The prediction key and url dialog](./media/prediction-key-url.png)
 
 This validation script will take the testing images, and test them against the model to ensure the correct tag is found as the most probable. You will see output like the following:
 
@@ -108,7 +108,7 @@ Your team might find these resources helpful:
 
 ## Final result
 
-![A published iteration of the model](./images/published-iteration.png)
+![A published iteration of the model](./media/published-iteration.png)
 
 ## Next challenge
 

mkdocs.yml

@@ -0,0 +1,88 @@
+# Project information
+site_name: Microsoft Power Apps Workshop
+site_url: https://microsoft.github.io/hack-workshop-power-apps/
+site_author: Microsoft
+site_description: >-
+  Learn to build an low code mobile app to detect dog breeds using Azure!
+
+# Repository
+repo_name: microsoft/hack-workshop-power-apps
+repo_url: https://github.com/microsoft/hack-workshop-power-apps
+
+copyright: Copyright © Microsoft
+
+# Project structure
+docs_dir: goals
+
+# Customizations & theme
+extra_css:
+  - assets/stylesheets/extra.css
+
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/microsoft
+      name: Microsoft on GitHub
+    - icon: fontawesome/brands/linkedin
+      link: https://linkedin.com/in/Microsoft/
+      name: Microsoft on LinkedIn
+    - icon: fontawesome/brands/twitter
+      link: https://twitter.com/Microsoft
+      name: Microsoft on Twitter
+  tos:
+    - link: https://privacy.microsoft.com/
+      name: Privacy
+    - link: https://www.microsoft.com/en-us/legal/terms-of-use
+      name: Terms of Use
+    - link: https://github.com/microsoft/hack-workshop-power-apps/blob/main/LICENSE
+      name: License
+
+theme:
+  name: material
+  custom_dir: theme
+  features:
+    - navigation.indexes
+    - navigation.instant
+    - navigation.expand
+    - navigation.top
+    - toc.integrate
+  font: false
+  logo: assets/images/8_BIT.png
+  palette:
+    - media: "(prefers-color-scheme: light)" 
+      scheme: default
+      primary: teal
+      accent: teal
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)" 
+      scheme: slate
+      primary: teal
+      accent: teal
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
+    
+# Extensions
+markdown_extensions:
+  - admonition
+  - attr_list
+  - pymdownx.highlight
+  - pymdownx.superfences
+  - pymdownx.snippets
+  - smarty
+  - toc:
+      permalink: True
+
+# Plugins 
+plugins: 
+  - include-markdown
+
+# Navigation
+nav:
+    - Overview: 'index.md'
+    - 'Goals':
+      - 'train-model.md'
+      - 'back-end.md'
+      - 'mobile-app.md'

requirements.txt

@@ -0,0 +1,3 @@
+mkdocs
+mkdocs-material
+mkdocs-include-markdown-plugin

theme/assets/stylesheets/extra.css

@@ -0,0 +1,76 @@
+@font-face {
+  font-family: "SegoeUI";
+  src: local("Segoe UI"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2")
+      format("woff2"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff")
+      format("woff"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf")
+      format("ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "SegoeUI";
+  src: local("Segoe UI"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/italic/latest.woff2")
+      format("woff2"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/italic/latest.woff")
+      format("woff"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/italic/latest.ttf")
+      format("ttf");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "SegoeUI";
+  src: local("Segoe UI"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.woff2")
+      format("woff2"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.woff")
+      format("woff"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Semilight/latest.ttf")
+      format("ttf");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "SegoeUI";
+  src: local("Segoe UI"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.woff2")
+      format("woff2"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.woff")
+      format("woff"),
+    url("//c.s-microsoft.com/static/fonts/segoe-ui/west-european/Bold/latest.ttf")
+      format("ttf");
+  font-weight: 700;
+}
+
+:root {
+  --md-text-font-family: "Segoe UI", "SegoeUI","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+[data-md-color-primary=teal] {
+  --md-primary-fg-color: #004D40;
+  --md-primary-fg-color--light: #80CBC4;
+  --md-primary-fg-color--dark: #007a6c;
+  --md-primary-bg-color: #fff;
+  --md-primary-bg-color--light: hsla(0,0%,100%,0.7);
+}
+
+[data-md-color-scheme=slate] {
+  --md-typeset-a-color: var(--md-primary-fg-color--light);
+}
+
+figcaption {
+  max-width: 80% !important;
+}
+
+[class$="__repository"]{
+  overflow: unset;
+}
+
+[class $="tos__link"]{
+  padding-right: 0.25rem;
+}

theme/partials/footer.html

@@ -0,0 +1,92 @@
+{% import "partials/language.html" as lang with context %}
+
+<!-- Footer -->
+<footer class="md-footer">
+
+  <!-- Link to previous and/or next page -->
+  {% if page.previous_page or page.next_page %}
+    <nav
+      class="md-footer__inner md-grid"
+      aria-label="{{ lang.t('footer.title') }}"
+    >
+
+      <!-- Link to previous page -->
+      {% if page.previous_page %}
+        {% set direction = lang.t("footer.previous") %}
+        <a
+          href="{{ page.previous_page.url | url }}"
+          class="md-footer__link md-footer__link--prev"
+          aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
+          rel="prev"
+        >
+          <div class="md-footer__button md-icon">
+            {% include ".icons/material/arrow-left.svg" %}
+          </div>
+          <div class="md-footer__title">
+            <div class="md-ellipsis">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
+              {{ page.previous_page.title }}
+            </div>
+          </div>
+        </a>
+      {% endif %}
+
+      <!-- Link to next page -->
+      {% if page.next_page %}
+        {% set direction = lang.t("footer.next") %}
+        <a
+          href="{{ page.next_page.url | url }}"
+          class="md-footer__link md-footer__link--next"
+          aria-label="{{ direction }}: {{ page.next_page.title | e }}"
+          rel="next"
+        >
+          <div class="md-footer__title">
+            <div class="md-ellipsis">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
+              {{ page.next_page.title }}
+            </div>
+          </div>
+          <div class="md-footer__button md-icon">
+            {% include ".icons/material/arrow-right.svg" %}
+          </div>
+        </a>
+      {% endif %}
+    </nav>
+  {% endif %}
+
+  <!-- Further information -->
+  <div class="md-footer-meta md-typeset">
+    <div class="md-footer-meta__inner md-grid">
+
+      <!-- Theme information -->
+      {% if not config.extra.generator == false %}
+      <div class="md-footer-copyright">
+          Made with
+          <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
+            Material for MkDocs
+          </a>
+      </div>
+      {% endif %}
+
+      <!-- Social links -->
+      {% include "partials/social.html" %}
+
+      <!-- Copyright and other links -->
+      <div class="md-footer-copyright">
+        {% if config.copyright %}
+        <span class="md-footer-copyright__highlight">
+          {{ config.copyright }}&nbsp;|&nbsp;&nbsp;
+        </span>
+        {% endif %}
+        
+        {% include "partials/tos.html" %}
+        
+        {{ extracopyright }}
+      </div>
+    </div>
+  </div>
+</footer>

theme/partials/tos.html

@@ -0,0 +1,19 @@
+<!-- See extra.tos to configure -->
+{% if config.extra.tos %}
+    {% for tos in config.extra.tos %}
+        {% set title = tos.name %}
+        {% if not title and "//" in tos.link %}
+            {% set _,url = tos.link.split("//") %}
+            {% set title = url.split("/")[0] %}
+        {% endif %}
+        <a
+            href="{{ tos.link }}"
+            target="_blank" rel="noopener"
+            title="{{ title | e }}"
+            class="md-footer-tos__link"
+        >
+            {{ title }}
+        </a>
+        &nbsp;
+    {% endfor %}
+{% endif %}