Make about.html text reflect currently enabled workloads (#381)

* make text reflect currently enabled workloads

Author: issackjohn

about.html

@@ -23,7 +23,7 @@ <h1 class="section-header">About Speedometer 3</h1>
                             web browser engine projects.
                         </p>
                         <p>
-                            The following high level user journeys are implemented in the current version. Each of these journeys has one or more workloads which test important aspects of it - for example commonly used patterns, frameworks, or
+                            The following high level user journeys are implemented in the current version. Each of these journeys has one or more workloads which test important aspects of it — for example commonly used patterns, frameworks, or
                             technologies.
                         </p>
                         <ul>
@@ -32,32 +32,36 @@ <h1 class="section-header">About Speedometer 3</h1>
                                 <li>Measures the time to add, complete, and remove 100 todo items in a basic list.</li>
                                 <li>Each example implements the same todo application (TodoMVC) using different techniques and frameworks.</li>
                                 <li>
-                                    Workloads: <a href="resources/todomvc/vanilla-examples/javascript-es5/readme.md" target="_blank">TodoMVC-JavaScript-ES5</a>,
-                                    <a href="resources/todomvc/vanilla-examples/javascript-web-components/readme.md" target="_blank">TodoMVC-WebComponents</a>,
-                                    <a href="resources/todomvc/architecture-examples/react-complex/readme.md" target="_blank">TodoMVC-React-Complex-DOM</a>,
-                                    <a href="resources/todomvc/architecture-examples/backbone/readme.md" target="_blank">TodoMVC-Backbone</a>, <a href="resources/todomvc/architecture-examples/angular/readme.md" target="_blank">TodoMVC-Angular</a>,
-                                    <a href="resources/todomvc/architecture-examples/vue/readme.md" target="_blank">TodoMVC-Vue</a>, <a href="resources/todomvc/architecture-examples/jquery/readme.md" target="_blank">TodoMVC-jQuery</a>,
-                                    <a href="resources/todomvc/architecture-examples/preact/readme.md" target="_blank">TodoMVC-Preact</a>, <a href="resources/todomvc/architecture-examples/svelte/readme.md" target="_blank">TodoMVC-Svelte</a>,
-                                    <a href="resources/todomvc/architecture-examples/lit/readme.md" target="_blank">TodoMVC-Lit</a>
+                                    Workloads: <a href="resources/todomvc/vanilla-examples/javascript-es5/README.md" target="_blank">TodoMVC-JavaScript-ES5</a>,
+                                    <a href="resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/README.md" target="_blank">TodoMVC-JavaScript-ES6-Webpack-Complex-DOM</a>,
+                                    <a href="resources/todomvc/vanilla-examples/javascript-web-components/README.md" target="_blank">TodoMVC-WebComponents</a>,
+                                    <a href="resources/todomvc/architecture-examples/react-complex/README.md" target="_blank">TodoMVC-React-Complex-DOM</a>,
+                                    <a href="resources/todomvc/architecture-examples/react-redux/README.md" target="_blank">TodoMVC-React-Redux</a>,
+                                    <a href="resources/todomvc/architecture-examples/backbone/README.md" target="_blank">TodoMVC-Backbone</a>,
+                                    <a href="resources/todomvc/architecture-examples/angular-complex/README.md" target="_blank">TodoMVC-Angular-Complex-DOM</a>,
+                                    <a href="resources/todomvc/architecture-examples/vue/README.md" target="_blank">TodoMVC-Vue</a>, <a href="resources/todomvc/architecture-examples/jquery/README.md" target="_blank">TodoMVC-jQuery</a>,
+                                    <a href="resources/todomvc/architecture-examples/preact-complex/README.md" target="_blank">TodoMVC-Preact-Complex-DOM</a>,
+                                    <a href="resources/todomvc/architecture-examples/svelte-complex/README.md" target="_blank">TodoMVC-Svelte-Complex-DOM</a>,
+                                    <a href="resources/todomvc/architecture-examples/lit-complex/README.md" target="_blank">TodoMVC-Lit-Complex-DOM</a>
                                 </li>
                             </ul>
                             <li>Editing rich text</li>
                             <ul>
                                 <li>Loading and styling text inside WYSIWYG and code editors.</li>
-                                <li>Workloads: <a href="resources/editors/readme.md" target="_blank">Editor-CodeMirror</a>, <a href="resources/editors/readme.md" target="_blank">Editor-TipTap</a></li>
+                                <li>Workloads: <a href="resources/editors/README.md" target="_blank">Editor-CodeMirror</a>, <a href="resources/editors/README.md" target="_blank">Editor-TipTap</a></li>
                             </ul>
                             <li>Rendering charts</li>
                             <ul>
                                 <li>Loading and interacting with SVG and canvas charts.</li>
                                 <li>
-                                    Workloads: <a href="resources/charts/readme.md" target="_blank">Charts-observable-plot</a>, <a href="resources/charts/readme.md" target="_blank">Charts-chartjs</a>,
-                                    <a href="resources/react-stockcharts/readme.md" target="_blank">React-Stockcharts-SVG</a>, <a href="resources/perf.webkit.org/readme.md" target="_blank">Perf-Dashboard</a>
+                                    Workloads: <a href="resources/charts/README.md" target="_blank">Charts-observable-plot</a>, <a href="resources/charts/README.md" target="_blank">Charts-chartjs</a>,
+                                    <a href="resources/react-stockcharts/README.md" target="_blank">React-Stockcharts-SVG</a>, <a href="resources/perf.webkit.org/README.md" target="_blank">Perf-Dashboard</a>
                                 </li>
                             </ul>
                             <li>Reading a news site</li>
                             <ul>
                                 <li>Navigating across pages and interacting with a typical looking news site.</li>
-                                <li>Workloads: <a href="resources/newssite/news-next/readme.md" target="_blank">NewsSite-Next</a>, <a href="resources/newssite/news-nuxt/readme.md" target="_blank">NewsSite-Nuxt</a></li>
+                                <li>Workloads: <a href="resources/newssite/news-next/README.md" target="_blank">NewsSite-Next</a>, <a href="resources/newssite/news-nuxt/README.md" target="_blank">NewsSite-Nuxt</a></li>
                             </ul>
                         </ul>
 

resources/charts/readme.md renamed to resources/charts/README.md

@@ -0,0 +1,29 @@
+# Speedometer 3.0: TodoMVC: Lit Complex DOM
+
+## Description
+
+This application embeds the Lit implementation of the TodoMVC application in a static UI shell that mimics a complex web page.
+
+Please refer to the [Lit README.md](../lit/README.md) for more information on the Lit TodoMVC implementation.
+
+Please refer to the [big-dom-generator README.md](../../big-dom-generator/README.md) for more information on the UI shell.
+
+## Build steps
+
+Big-dom-generator and standalone Lit TodoMVC need to be built before building the Lit Complex DOM TodoMVC.
+
+```
+terminal
+1. pushd ../../big-dom-generator && npm install && npm run build && popd
+2. pushd ../lit && npm install && npm run build && popd
+3. npm run build
+```
+
+## Local preview
+
+```
+terminal:
+1. npm run serve
+browser:
+1. http://localhost:8000
+```