GH pages

.github/workflows/docs.yml

@@ -0,0 +1,20 @@
+name: Publish docs via GitHub Pages
+on:
+  push:
+    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

.gitignore

@@ -0,0 +1,2 @@
+
+.DS_Store

goals/index.md

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

mkdocs.yml

@@ -0,0 +1,88 @@
+# Project information
+site_name: Microsoft Web Workshop
+site_url: https://microsoft.github.io/hack-workshop-web/
+site_author: Microsoft
+site_description: >-
+  Learn to build a web app for a pet shelter using Azure Static Web Apps and Cosmos DB!
+
+# Repository
+repo_name: microsoft/hack-workshop-web
+repo_url: https://github.com/microsoft/hack-workshop-web
+
+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-web/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':
+      - '1-deploy.md'
+      - '2-local.md'
+      - '3-modify.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 %}