More example improvements

Author: bcomnes

README.md

@@ -1046,6 +1046,23 @@ export default async function markdownItSettingsOverride (md) {
 }
 ```
 
+By default, DOMStack ships with the following markdown-it plugins:
+
+- ['markdown-it'](https://github.com/markdown-it/markdown-it)
+- ['markdown-it-footnote'](https://github.com/markdown-it/markdown-it-footnote)
+- ['markdown-it-highlightjs'](https://github.com/valeriangalliat/markdown-it-highlightjs)
+- ['markdown-it-emoji'](https://github.com/markdown-it/markdown-it-emoji)
+- ['markdown-it-sub'](https://github.com/markdown-it/markdown-it-sub)
+- ['markdown-it-sup'](https://github.com/markdown-it/markdown-it-sup)
+- ['markdown-it-deflist'](https://github.com/markdown-it/markdown-it-deflist)
+- ['markdown-it-ins'](https://github.com/markdown-it/markdown-it-ins)
+- ['markdown-it-mark'](https://github.com/markdown-it/markdown-it-mark)
+- ['markdown-it-abbr'](https://github.com/markdown-it/markdown-it-abbr)
+- ['markdown-it-task-lists'](https://github.com/revin/markdown-it-task-lists)
+- ['markdown-it-anchor'](https://github.com/valeriangalliat/markdown-it-anchor)
+- ['markdown-it-attrs'](https://github.com/arve0/markdown-it-attrs)
+- ['markdown-it-table-of-contents'](https://github.com/cmaas/markdown-it-table-of-contents)
+
 ## Variables
 
 Pages, Layouts, and `postVars` all receive an object with the following parameters:

examples/css-modules/src/README.md

@@ -9,21 +9,11 @@ CSS module support is provided by esbuild, so for more information on what is an
 
 CSS modules are NOT supported in Node.js natively, so you need to import a loader to support them, or only reference them in client bundles.
 
-## What Are CSS Modules?
-
-CSS modules are CSS files where class names and animation names are scoped locally by default. This prevents style leakage and naming collisions in your application.
-
-## Features Demonstrated
-
-- Scoped CSS class names via the `.module.css` extension
-- Isomorphic component rendering with Preact
-- Integration of CSS modules with JavaScript components
-
 ## How It Works
 
 1. Create a CSS file with the `.module.css` extension
-2. Import the styles in your JavaScript component
-3. Use the imported class names as object properties
+2. Import the styles in your JavaScript components that get loaded in your client bundles.
+3. Use the imported class names as object properties on the javascript side.
 
 ## Project Structure
 
@@ -41,4 +31,4 @@ src/
 
 ## Example
 
-Check out the [Isomorphic Component Rendering](./modules/) example to see CSS modules in action.
+Check out the [CSS Modules in a Preact Component](./modules/) example to see CSS modules in action.

examples/css-modules/src/modules/client.js

@@ -137,11 +137,8 @@ const App = ({ title }) => {
   `
 }
 
-// Page component for export
-export const page = () => html`<${App} title="CSS Modules Demo" />`
-
 // Client-side rendering
 if (typeof window !== 'undefined') {
   const renderTarget = document.querySelector('.app-main')
-  render(page(), renderTarget)
+  render(html`<${App} title="CSS Modules Demo" />`, renderTarget)
 }

examples/esbuild-settings/src/README.md

@@ -10,6 +10,18 @@ This example demonstrates how to customize the bundling process in DOMStack by c
 - How to configure ESBuild plugins (in this case, for Node.js polyfills)
 - How browser code can use Node.js modules safely
 
+## Esbuild build options
+
+The settings file export defaults an async function that receives BuildOptions for esbuild.
+The function should modify, extend or replace this BuildOptions object and return it as the return value of the function.
+These options are used to build the CSS and client bundles in all of the pages.
+
+- [ESbuild BuildOptions API Docs](https://esbuild.github.io/api/#build)
+
+This is a powerful hook that you can use to modify almost anything about the build with.
+However, modifying certain parts of the build options can also break the DOMSTack build.
+Proceed with caution!
+
 ## How It Works
 
 1. The `client.js` file imports a Node.js built-in module (`os`)

examples/markdown-settings/README.md

@@ -10,18 +10,18 @@ This example demonstrates how to customize the markdown-it instance used for ren
 
 ## How it Works
 
-DOMStack now supports a `markdown-it.settings.js` file that allows you to customize the markdown-it instance. This file should export a default function that receives the default markdown-it instance and returns a modified instance.
+DOMStack now supports a `markdown-it.settings.js` file that allows you to customize the markdown-it instance. This file should export a default function that receives the default markdown-it instance and returns a modified or replaced instance.
 
 ```js
 export default async function markdownItSettingsOverride (md) {
   // Add plugins
   md.use(somePlugin)
-  
+
   // Customize renderers
   md.renderer.rules.someRule = function (tokens, idx, options, env, renderer) {
     // Custom rendering logic
   }
-  
+
   return md
 }
 ```
@@ -70,4 +70,4 @@ This content is hidden by default.
 
 ## Further Customization
 
-You can add any markdown-it plugin or customize the rendering of any markdown element by modifying the `markdown-it.settings.js` file. This provides a powerful way to extend the markdown capabilities of your DOMStack site.
+You can add any markdown-it plugin or customize the rendering of any markdown element by modifying the `markdown-it.settings.js` file. This provides a powerful way to extend the markdown capabilities of your DOMStack site.

examples/markdown-settings/package.json

@@ -12,6 +12,6 @@
   "devDependencies": {
     "@domstack/cli": "file:../../.",
     "markdown-it-container": "^4.0.0",
-    "markdown-it-admonition": "^1.0.4"
+    "markdown-it-admonition": "1.0.4"
   }
 }