Sync lists of demos (#83)

* sync readme > pwa w/ article

* Update README.md

Co-authored-by: Patrick Brosset <[email protected]>

* change to "PWA installer"

* change pwastore to pwa-installer

* flags wording

* remove "demo" from Desc

* format/fix links

* table headings, demo in 4th col

* technologies typo

* groupEnd()

* inc cmts

* start normalize titles

* scrub

* Console h1

* title/h1 sync

* remove cmt block

* all top dirs in main Readme

* Polish table demo names

* verbose heading

* col heading Readme

* tables above

* bold Contents:

* template row

* replace by latest main

* blank line at end

* del /pwa-web-install-api/

* correct flag

* webnn desc

* x-link webplat demos

* docs links fix

* update link text

* crash Readme link

* link to Samples articles

* link text for DevTools demos

* console table

* demo demo

* trim todos

* link Cross-browser API samples

* linkfix

* move cal up, show html filenames

* css gap playground nav

* sync-pwa-demos Readme clarify

* email client App Avail icon

* email-client See Also

---------

Co-authored-by: Diego Gonzalez <[email protected]>
Co-authored-by: Patrick Brosset <[email protected]>

Author: 3 people

1DIV/README.md

@@ -5,15 +5,17 @@
 **1DIV** is a demo web app that enables you to create multiple CSS designs by using a single HTML `div` element. Your CSS designs are only saved locally, in the browser's memory. This demo app can be installed locally as a Progressive Web App (PWA).
 
 
+<!-- ====================================================================== -->
 ## Requirements
 
-The main goal of this demo is to showcase the Window Controls Overlay (WCO) PWA feature, which is described in [Display content in the title bar](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay).  To make the most use of this demo, view it in a browser that's based on the Chromium engine, such as Microsoft Edge.
+This demo showcases the Window Controls Overlay (WCO) PWA feature.  For instructions, see [Demo app](https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/window-controls-overlay#demo-app) in _Display content in the title bar area using Window Controls Overlay_.  To make the most of this demo, view it in a browser that's based on the Chromium engine, such as Microsoft Edge.
 
 The demo app also demonstrates using [constructable stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets).  Constructable stylesheets are supported in the following web browsers:
 * Browsers that are based on the Chromium engine, such as Microsoft Edge.
 * Firefox, by enabling the `layout.css.constructable-stylesheets.enabled` flag.
 
 
+<!-- ====================================================================== -->
 ## Building locally
 
 To run this demo app as-is, you don't need to build it.
@@ -22,7 +24,7 @@ If you make a change to a file in the `src` directory of this demo app, or updat
 
 To build this demo app locally, at a command prompt such as Windows Terminal, run the following commands in the present directory:
 
-```
+```shell
 npm install
 npm run build
 ```

1DIV/dist/css.worker.js

@@ -4,7 +4,7 @@
 
 Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 
-If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://learn.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
+If you believe you have found a security vulnerability in any Microsoft-owned repository that meets Microsoft's [Definition of a Security Vulnerability](https://learn.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
 
 ## Reporting Security Issues
 
@@ -14,17 +14,17 @@ Instead, please report them to the Microsoft Security Response Center (MSRC) at
 
 If you prefer to submit without logging in, send email to [[email protected]](mailto:[email protected]).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc).
 
-You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
 
 Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
 
-  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
-  * Full paths of source file(s) related to the manifestation of the issue
-  * The location of the affected source code (tag/branch/commit or direct URL)
-  * Any special configuration required to reproduce the issue
-  * Step-by-step instructions to reproduce the issue
-  * Proof-of-concept or exploit code (if possible)
-  * Impact of the issue, including how an attacker might exploit the issue
+* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+* Full paths of source file(s) related to the manifestation of the issue
+* The location of the affected source code (tag/branch/commit or direct URL)
+* Any special configuration required to reproduce the issue
+* Step-by-step instructions to reproduce the issue
+* Proof-of-concept or exploit code (if possible)
+* Impact of the issue, including how an attacker might exploit the issue
 
 This information will help us triage your report more quickly.
 
@@ -38,4 +38,4 @@ We prefer all communications to be in English.
 
 Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd).
 
-<!-- END MICROSOFT SECURITY.MD BLOCK -->
+<!-- END MICROSOFT SECURITY.MD BLOCK -->

README.md

@@ -4,11 +4,15 @@
 
 The files in this directory are playgrounds and samples for the built-in AI APIs in Microsoft Edge.
 
-To learn more, see [Prompt a built-in language model with the Prompt API](https://learn.microsoft.com/microsoft-edge/web-platform/prompt-api) and [Summarize, write, and rewrite text with the Writing Assistance APIs](https://learn.microsoft.com/microsoft-edge/web-platform/writing-assistance-apis).
+To learn more, see:
+* [Prompt a built-in language model with the Prompt API](https://learn.microsoft.com/microsoft-edge/web-platform/prompt-api)
+* [Summarize, write, and rewrite text with the Writing Assistance APIs](https://learn.microsoft.com/microsoft-edge/web-platform/writing-assistance-apis)
 
+
+<!-- ====================================================================== -->
 ## Contributing
 
-To make changes to the playgrounds and samples source code, clone this repository and follow these steps:
+If you want to make changes to the playgrounds and samples source code, clone this repository and then follow these steps:
 
 * To make changes to the source HTML content for one of the playgrounds or samples:
 
@@ -26,9 +30,9 @@ To make changes to the playgrounds and samples source code, clone this repositor
 
   Make your changes directly to the JavaScript or CSS files in the `static` directory.
 
-To run the playgrounds locally:
+Then run the playgrounds locally:
 
 1. Run `npm run build` to generate the static site.
 1. Run `cd ../../` to go to the Demos repository's parent directory.
 1. Start a local HTTP server from that parent directory. For example: `npx http-server -p 8080`.
-1. Navigate to `http://localhost:8080/Demos/built-in-ai/` in your browser.
+1. Go to `http://localhost:8080/Demos/built-in-ai/` in your browser.

SECURITY.md

@@ -2,27 +2,46 @@
 
 This directory contains demos that showcase the use of [CSS Gap Decorations](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md), a feature proposal by the Microsoft Edge team to draw line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts.
 
+
+<!-- ====================================================================== -->
 ## Demos
 
-* [Burger Menu](https://microsoftedge.github.io/Demos/css-gap-decorations/burger-menu.html)
-* [Daily CSS News](https://microsoftedge.github.io/Demos/css-gap-decorations/daily-css-news.html)
-* [Guitar Fret Board](https://microsoftedge.github.io/Demos/css-gap-decorations/guitar-fret-board.html)
-* [Notebook](https://microsoftedge.github.io/Demos/css-gap-decorations/notebook.html)
-* [Calendar](https://microsoftedge.github.io/Demos/css-gap-decorations/calendar.html)
-* [Personal site](https://microsoftedge.github.io/Demos/css-gap-decorations/personal-site.html)
-* [The Daily Oddity](https://microsoftedge.github.io/Demos/css-gap-decorations/the-daily-oddity.html)
+* [Burger Menu](https://microsoftedge.github.io/Demos/css-gap-decorations/burger-menu.html) - `burger-menu.html`
+* [Calendar](https://microsoftedge.github.io/Demos/css-gap-decorations/calendar.html) - `calendar.html`
+* [Daily CSS News](https://microsoftedge.github.io/Demos/css-gap-decorations/daily-css-news.html) - `daily-css-news.html`
+* [Guitar Fretboard](https://microsoftedge.github.io/Demos/css-gap-decorations/guitar-fretboard.html) - `guitar-fretboard.html`
+* [Notebook](https://microsoftedge.github.io/Demos/css-gap-decorations/notebook.html) - `notebook.html`
+* [Personal site](https://microsoftedge.github.io/Demos/css-gap-decorations/personal-site.html) - `personal-site.html`
+* [The Daily Oddity](https://microsoftedge.github.io/Demos/css-gap-decorations/the-daily-oddity.html) - `the-daily-oddity.html`
+
 
+<!-- ====================================================================== -->
 ## Developer playground
 
-* [CSS Gap Decorations playground](https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html)
+* [CSS Gap Decorations playground](https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html) - `playground.html`
+
 
-## Try the feature and share feedback
+<!-- ====================================================================== -->
+## Try the feature
 
 To try the feature, follow these steps:
 
-1. Use a Chromium-based browser, such as Microsoft Edge or Chrome, and make sure the version is at least 139.
+1. Open a Chromium-based browser, such as Microsoft Edge or Chrome, and make sure the version is at least 139.
+
 1. In the browser, open a new tab and go to `about:flags`.
-1. Search for "Experimental Web Platform features" in the search box.
-1. Set the **Experimental Web Platform features** flag to **Enabled**, and then restart the browser.
+
+   In Microsoft Edge, you end up at `edge://flags`.
+
+1. In the **Search flags** box, enter **Experimental Web Platform features**.
+
+1. Set the **Experimental Web Platform features** flag to **Enabled**.
+
+1. Click the **Restart** button.
+
+   The browser restarts, with the flag applied.
+
+
+<!-- ====================================================================== -->
+## Share feedback
 
 To share feedback, please [open an issue on the MSEdgeExplainers repository](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=css-gap-decorations.md).

built-in-ai/README.md

@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Guitar Fret Board</title>
+  <title>Guitar Fretboard</title>
   <style>
-    .fret-board {
+    .fretboard {
       --string-width: 1.5px;
       --space-between-strings: 45px;
       --fret-width: 6px;
@@ -46,7 +46,7 @@
 </head>
 
 <body>
-  <div class="fret-board"></div>
+  <div class="fretboard"></div>
 </body>
 
 </html>

css-gap-decorations/README.md

@@ -254,19 +254,20 @@ <h1>CSS Gap Decorations playground</h1>
         target="_blank">
         CSS Gaps Decorations Module Level 1</a>.
       Use the controls to tweak gap, rule, and paint-order properties in real time
-      and see how they affect multicolumn, flex, and grid layouts.
+      and see how they affect <a href="#grid">grid</a>, <a href="#flex">flex</a>, and <a href="#multicolumn">multicolumn</a> layouts.
     </p>
     <p>
       This is a non-exhaustive demo. See the spec for full details on the properties and their values.
     </p>
     <p>
-      As of right now, this is only implemented for Chromium-based browsers, and a flag is needed to enable the feature:
-      <code>--enable-features=CSSGapDecoration</code>
+      As of right now, this is only implemented for Chromium-based browsers, and 
+      the "Experimental Web Platform features" flag is needed to enable the feature:<br/>
+      <code>--enable-features=enable-experimental-web-platform-features</code>
     </p>
   </div>
 
   <section>
-    <h2>Grid Layout</h2>
+    <h2 id="grid">Grid Layout</h2>
     <div class="demo-group">
       <aside class="controls" data-target=".grid">
         <label>Gap (px): <output id="grGapVal">30</output></label>
@@ -335,7 +336,7 @@ <h2>Grid Layout</h2>
   </section>
 
   <section>
-    <h2>Flex Layout</h2>
+    <h2 id="flex">Flex Layout</h2>
     <div class="demo-group">
       <aside class="controls" data-target=".flex-container">
         <label>Gap (px): <output id="fxGapVal">20</output></label>
@@ -399,7 +400,7 @@ <h2>Flex Layout</h2>
   </section>
 
   <section>
-    <h2>Multicolumn Layout</h2>
+    <h2 id="multicolumn">Multicolumn Layout</h2>
     <div class="demo-group">
       <aside class="controls">
         <label>Column-gap (px): <output id="mcColGapVal">30</output></label>

css-gap-decorations/guitar-fret-board.html renamed to css-gap-decorations/guitar-fretboard.html

@@ -1,7 +1,12 @@
 # CSS Masonry demos
 
-This directory contains demo pages that showcase the implementation of CSS Masonry in Chromium.
+This directory contains demo pages that showcase the implementation of CSS Masonry in the Chromium browser engine.
 
+See also:
+* [Masonry layout](https://developer.mozilla.org/docs/Web/CSS/CSS_grid_layout/Masonry_layout) at MDN.
+
+
+<!-- ====================================================================== -->
 ## Enable Masonry support
 
 To try the demos, first enable Masonry:
@@ -11,6 +16,8 @@ To try the demos, first enable Masonry:
 1. Search for "CSS Masonry Layout" in the search box.
 1. Set the **CSS Masonry Layout** flag to **Enabled**, and then restart the browser.
 
+
+<!-- ====================================================================== -->
 ## Demos
 
 * [Blog](https://microsoftedge.github.io/Demos/css-masonry/blog.html)
@@ -41,4 +48,4 @@ To try the demos, first enable Masonry:
   * [Custom track sizes](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/custom-track-sizes.html)
   * [Masonry shorthand](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/masonry-shorthand.html)
   * [Spanning multiple tracks](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/span-multiple-tracks.html)
-  * [Item tolerance](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/item-tolerance.html)
+  * [Item tolerance](https://microsoftedge.github.io/Demos/css-masonry/syntax-examples/item-tolerance.html)

css-gap-decorations/playground.html

@@ -6,12 +6,22 @@ This is a basic app to test the sourcemap support for CSS mirroring in [the Edge
 
 To run the app and test the functionality follow these steps:
 
-1. Make sure you have the Microsoft Edge DevTools for Visual Studio Code extension installed
-1. Clone this repo or [download the zip](demo.zip) of this app and unpack it</li>
-1. Open the folder in Visual Studio Code
-1. Run `npm i` in the Terminal
-1. Run `npm start` in the Terminal
-1. Switch VS Code to "Run and Debug" and run "Launch Edge and Attach DevTools" (the project is already configured to use [Edge Canary](https://www.microsoftedgeinsider.com/download/canary), just make sure you have it installed)
+1. Make sure you have the Microsoft Edge DevTools for Visual Studio Code extension installed.
+
+1. Clone this "MicrosoftEdge / Demos" repo.  Or, [download the zip](demo.zip) of this sourcemap demo app, and then unpack the `.zip` file.
+
+1. Open the `/Demos/css-mirroring-sourcemaps-demo/` folder in Visual Studio Code.
+
+1. Run `npm i` in the Terminal.
+
+1. Run `npm start` in the Terminal.
+
+1. Switch VS Code to "Run and Debug", and run "Launch Edge and Attach DevTools".  (The project is configured to use [Edge Canary](https://www.microsoftedgeinsider.com/download/canary), so make sure you have Edge Canary installed.)
+
 1. Start editing Styles in DevTools and watch them sync!
 
 We have an [issue open in the Extension repository](https://github.com/microsoft/vscode-edge-devtools/issues/965) and we'd love to get your feedback there!
+
+
+See also:
+* [Update .css files from within the Styles tab (CSS mirror editing)](https://learn.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab) for the DevTools extension for Visual Studio Code.