From f0fd5498c70e894e83f2050018a7ec6d3cea4de1 Mon Sep 17 00:00:00 2001
From: nobkd <44443899+nobkd@users.noreply.github.com>
Date: Sun, 17 Nov 2024 16:39:21 +0100
Subject: [PATCH] docs: fix typos

---
 .../examples/simple-blog/@global/layout.html  |  2 +-
 packages/examples/simple-blog/README.md       |  3 +-
 packages/examples/simple-blog/blog/blog.yaml  |  2 +-
 .../blog/class-naming-strategies.md           |  6 +-
 .../simple-blog/blog/color-strategies.md      | 12 +--
 packages/examples/simple-blog/blog/hero.html  |  2 +-
 .../blog/scaleable-design-system.md           |  8 +-
 packages/examples/simple-blog/index.md        |  2 +-
 packages/examples/simple-blog/site.yaml       |  3 -
 .../nuejs.org/blog/introducing-glow/index.md  |  9 +--
 .../blog/nue-release-candidate/index.md       |  5 +-
 packages/nuejs.org/docs/content-syntax.md     | 20 +++--
 packages/nuejs.org/docs/content-tags.md       | 73 ++++++++-----------
 packages/nuejs.org/docs/custom-components.md  |  4 +-
 packages/nuejs.org/docs/index.md              |  4 +-
 packages/nuejs.org/docs/optimization.md       |  8 +-
 packages/nuejs.org/docs/scripting.md          |  5 +-
 packages/nuejs.org/docs/styling.md            |  6 +-
 18 files changed, 71 insertions(+), 103 deletions(-)

diff --git a/packages/examples/simple-blog/@global/layout.html b/packages/examples/simple-blog/@global/layout.html
index 9a39bb02..993e3808 100644
--- a/packages/examples/simple-blog/@global/layout.html
+++ b/packages/examples/simple-blog/@global/layout.html
@@ -4,4 +4,4 @@
 
 <footer>
   <navi :items="navigation.footer"/>
-</footer>
\ No newline at end of file
+</footer>
diff --git a/packages/examples/simple-blog/README.md b/packages/examples/simple-blog/README.md
index ebfef6b6..eb8cd1ba 100644
--- a/packages/examples/simple-blog/README.md
+++ b/packages/examples/simple-blog/README.md
@@ -3,7 +3,8 @@
 The default website template for `nue create` command:
 
 <a href="https://simple-blog.nuejs.org/">
-  <img src="https://nuejs.org/img/blog-hero-big.png" width="700" alt="Blog screenshots"></a>
+  <img src="https://nuejs.org/img/blog-hero-big.png" width="700" alt="Blog screenshots">
+</a>
 
 ## Links
 
diff --git a/packages/examples/simple-blog/blog/blog.yaml b/packages/examples/simple-blog/blog/blog.yaml
index 85fee40c..1d05f34d 100644
--- a/packages/examples/simple-blog/blog/blog.yaml
+++ b/packages/examples/simple-blog/blog/blog.yaml
@@ -1,2 +1,2 @@
 
-include: [ content, cards, motion ]
\ No newline at end of file
+include: [ content, cards, motion ]
diff --git a/packages/examples/simple-blog/blog/class-naming-strategies.md b/packages/examples/simple-blog/blog/class-naming-strategies.md
index 4f6151e3..3979914b 100644
--- a/packages/examples/simple-blog/blog/class-naming-strategies.md
+++ b/packages/examples/simple-blog/blog/class-naming-strategies.md
@@ -14,7 +14,7 @@ When designing for the web, keeping CSS in mind from the start prevents frustrat
 
 Designers should have a strong handle on core CSS concepts like the box model, selectors, specificity and inheritance.
 
-> When designing for the web, keeping CSS in mind from the start prevents frustration down the road. For example, **typography and color schemes are  heavily influenced by CSS** and layered graphical elements must be broken down into achievable HTML components.
+> When designing for the web, keeping CSS in mind from the start prevents frustration down the road. For example, **typography and color schemes are heavily influenced by CSS** and layered graphical elements must be broken down into achievable HTML components.
 
 ``` js.blue
 function toggleAttr(el, name, flag) {
@@ -33,7 +33,7 @@ function restoreTabs(flags) {
 
 ## Exploit the power of selectors
 
-On the development side, CSS itself involves visual design skills.Bringing a layout to life requires not just coding, but typographic, spacing and color sensibilities. CSS skills give developers control over the final look and feel.
+On the development side, CSS itself involves visual design skills. Bringing a layout to life requires not just coding, but typographic, spacing and color sensibilities. CSS skills give developers control over the final look and feel.
 
 [! img/dashboard-1.png]
 
@@ -56,7 +56,7 @@ Overall, CSS is a uniquely visual language, with a direct impact on user-facing
 
 ## Conclusion
 
-In conclusion, thoughtfully naming CSS classes, IDs, and other selectors is an important part of keeping stylesheets scalable and maintainable. Use semantic, descriptive names that communicate what a selector is styling. Implement methodical naming conventions and structures for better organization
+In conclusion, thoughtfully naming CSS classes, IDs, and other selectors is an important part of keeping stylesheets scalable and maintainable. Use semantic, descriptive names that communicate what a selector is styling. Implement methodical naming conventions and structures for better organization.
 
 [! img/dashboard-2.png]
 
diff --git a/packages/examples/simple-blog/blog/color-strategies.md b/packages/examples/simple-blog/blog/color-strategies.md
index 651165a0..d00f0d25 100644
--- a/packages/examples/simple-blog/blog/color-strategies.md
+++ b/packages/examples/simple-blog/blog/color-strategies.md
@@ -30,21 +30,21 @@ Working with color is one of the most fun parts of web design. But if you don't
 
 Choosing the right colors for a website can be tricky. Get one wrong and your entire design can feel off. Luckily, there are some simple strategies to create a foolproof web color palette:
 
-- **Limit your palette** - Stick to just 2-4 core colors for most sites. Too many colors look disjointed.
+- **Limit your palette** — Stick to just 2-4 core colors for most sites. Too many colors look disjointed.
 
-- **Focus on one dominant hue** - Pick one main color and derive the rest of the palette from it. This creates cohesion.
+- **Focus on one dominant hue** — Pick one main color and derive the rest of the palette from it. This creates cohesion.
 
-- **Use color wheel relationships** - Choose adjacent or complementary colors on the wheel for built-in harmony.
+- **Use color wheel relationships** — Choose adjacent or complementary colors on the wheel for built-in harmony.
 
-- **Consider tone and contrast** - Include light, medium and dark tones for visual interest. Test contrast for accessibility.
+- **Consider tone and contrast** — Include light, medium and dark tones for visual interest. Test contrast for accessibility.
 
 [image img/colors-1.png]
 
-Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you need opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable.
+Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you require opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable.
 
 Following these simple tips will ensure you have a tightly edited, flexible, and foolproof palette ready for your next web project.
 
-> Focus on one dominant hue - Pick one main color and derive the rest of the palette from it. This creates cohesion.
+> Focus on one dominant hue — Pick one main color and derive the rest of the palette from it. This creates cohesion.
 
 ``` .pink
 /* Tab styling */
diff --git a/packages/examples/simple-blog/blog/hero.html b/packages/examples/simple-blog/blog/hero.html
index 58ddcd2d..b77acabf 100644
--- a/packages/examples/simple-blog/blog/hero.html
+++ b/packages/examples/simple-blog/blog/hero.html
@@ -6,4 +6,4 @@ <h1>{ title }</h1>
   </p>
 
   <img :src="og" width="1000" height="800" alt="Hero image for { title }">
-</header>
\ No newline at end of file
+</header>
diff --git a/packages/examples/simple-blog/blog/scaleable-design-system.md b/packages/examples/simple-blog/blog/scaleable-design-system.md
index c02475cd..4034b8fb 100644
--- a/packages/examples/simple-blog/blog/scaleable-design-system.md
+++ b/packages/examples/simple-blog/blog/scaleable-design-system.md
@@ -10,13 +10,13 @@ Design systems are key to managing code at scale, but creating one that’s flex
 
 1. **Respect constraints**: Construct stylistic foundations for typography, [color palettes](color-strategies.html), spacing, etc. But don’t be overly prescriptive. Leave room for one-off deviations.
 
-2. **Reusable components**: Break UI elements into reusable, abstracted components. A button should be built independently from where it’s used. This promotes consistency across properties and apps.
+2. **Reusable components**: Break UI elements into reusable, abstracted components. A button should be built independently of where it’s used. This promotes consistency across properties and apps.
 
 3. **Clear naming conventions**: Utilize consistent, semantic naming for classes, variables, mixins, etc. This improves developer efficiency and organization.
 
 ## Keep things minimal
 
-It's important to keep things lightweight: Write CSS that’s DRY, separating structure from skin using methodologies like BEM. Don't over-engineer - keep logic simple.
+It's important to keep things lightweight: Write CSS that’s DRY, separating structure from skin using methodologies like BEM. Don't over-engineer — keep logic simple.
 
 ``` html numbered
 <figure @name="img" :class="class" :id="id">
@@ -40,7 +40,7 @@ By investing in these areas, you can craft a design system that brings cohesion
 
 [! img/ui-2.png]
 
-Once a painting is underway, digital photography can also assist the process. Taking in-progress photos allows you to see compositions with fresh eyes. You can spot areas for improvement, mistakes that need correcting, or places that would benefit from increased attention. Like having an undo button, it gives the opportunity for editing mid-painting.
+Once a painting is underway, digital photography can also assist the process. Taking in-progress photos allows you to see compositions with fresh eyes. You can spot areas for improvement, mistakes that require correcting, or places that would benefit from increased attention. Like having an undo button, it gives the opportunity for editing mid-painting.
 
 > Put in the work upfront, and your system will pay dividends down the road.
 
@@ -68,6 +68,6 @@ Once a painting is underway, digital photography can also assist the process. Ta
 
 By investing in these areas, you can craft a design system that brings cohesion and consistency to products, while still being flexible enough to allow for creative solutions. The ultimate goal is scalable, maintainable CSS that matches the ever-evolving needs of organizations and developers alike. Put in the work upfront, and your system will pay dividends down the road.
 
-[image img/ui-3.png]
+[! img/ui-3.png]
 
 Using color effectively is a vital part of web design. When planned intentionally, your color palette creates visual harmony across your website or application. A cohesive color scheme boosts recognition of your brand, while making the interface feel cohesive.
diff --git a/packages/examples/simple-blog/index.md b/packages/examples/simple-blog/index.md
index 28558881..2f67e8b6 100644
--- a/packages/examples/simple-blog/index.md
+++ b/packages/examples/simple-blog/index.md
@@ -5,6 +5,6 @@ content_collection: blog
 
 # Minimalist, UX developer, designer, urban explorer
 
-I'm Emma Bennett, an user experience developer from Berlin. I build websites that are exceptionally well designed — inside, and outside.
+I'm Emma Bennett, a user experience developer from Berlin. I build websites that are exceptionally well-designed — inside, and outside.
 
 [page-list]
diff --git a/packages/examples/simple-blog/site.yaml b/packages/examples/simple-blog/site.yaml
index 0bf2fb5c..01501853 100644
--- a/packages/examples/simple-blog/site.yaml
+++ b/packages/examples/simple-blog/site.yaml
@@ -41,6 +41,3 @@ navigation:
       url: //linkedin.com/in/tipiirai
       alt: LinkedIn profile
       size: 22 x 22
-
-
-
diff --git a/packages/nuejs.org/blog/introducing-glow/index.md b/packages/nuejs.org/blog/introducing-glow/index.md
index c519dcb5..c6cd9172 100644
--- a/packages/nuejs.org/blog/introducing-glow/index.md
+++ b/packages/nuejs.org/blog/introducing-glow/index.md
@@ -20,7 +20,7 @@ Today we're launching *Glow* — a new take on syntax highlighting:
 
 *Glow is simple*: With just a few CSS variables, Glow adapts all languages to match your brand colors effortlessly.
 
-*Glow is small*: Glow is significantly smaller than mainstream alternatives—around [5KB](//pkg-size.dev/nue-glow) compared to [5MB](//pkg-size.dev/shiki). It’s the most compact implementation available.
+*Glow is small*: Glow is significantly smaller than mainstream alternatives — around [5KB](//pkg-size.dev/nue-glow) compared to [5MB](//pkg-size.dev/shiki). It’s the most compact implementation available.
 
 
 [image.tall]
@@ -67,7 +67,7 @@ Contrast this to grammar-aware theming systems, like Shiki and *Prism*, where a
 
 
 ## Unlimited possibilities
-Glow's unique, [classless design system](/docs/syntax-highlighting.html#html-markup) gives you line numbers, selections, error highlights, insertions, deletions, and much much more.
+Glow's unique, [classless design system](/docs/syntax-highlighting.html#html-markup) gives you line numbers, selections, error highlights, insertions, deletions, and much, much more.
 
 ``` .gradient.sky numbered
 <script>
@@ -199,8 +199,3 @@ Now you can enjoy goodies content hot-reloading when the code blocks are edited:
   videoId: 38caf489-74f1-416a-9f23-694baa5500bb
   caption: Nue hot-reloading in action
   poster: thumbnail_1ca1bd66.jpg
-
-
-
-
-
diff --git a/packages/nuejs.org/blog/nue-release-candidate/index.md b/packages/nuejs.org/blog/nue-release-candidate/index.md
index b94b227c..837bf22f 100644
--- a/packages/nuejs.org/blog/nue-release-candidate/index.md
+++ b/packages/nuejs.org/blog/nue-release-candidate/index.md
@@ -101,7 +101,7 @@ Surprisingly, these rich, interactive sites remain exceptionally lightweight, co
 ## New Markdown parser
 In earlier versions of Nue, we used the **Marked** library to handle basic formatting for our extended Markdown syntax — known as **Nuemark**. While Marked is a solid, general-purpose Markdown parser with excellent performance, it became clear that it couldn't fully support the direction we wanted for Nue, particularly with our content-first development model.
 
-The main issue with Marked was its lack of a mutable **abstract syntax tree** (AST). The AST is a structured representation of the Markdown content, allowing it to be easily analyzed, manipulated, and extended before rendering to HTML. With Marked, the structure was essentially immutable—meaning it wasn't possible to add new nodes, elements, or link references before rendering the document.
+The main issue with Marked was its lack of a mutable **abstract syntax tree** (AST). The AST is a structured representation of the Markdown content, allowing it to be easily analyzed, manipulated, and extended before rendering to HTML. With Marked, the structure was essentially immutable — meaning it wasn't possible to add new nodes, elements, or link references before rendering the document.
 
 Moreover, the API for creating custom extensions was overly complex, particularly for advanced features that needed to understand the document’s structure and modify parts of the syntax tree. This made implementing the more advanced components of Nue impossible.
 
@@ -202,6 +202,3 @@ Full list of improvements and breaking changes on this release:
   - **`[image]` "srcset" removed**: The `srcset` and `sizes` parameters for the `[image]` tag have been removed due to their complexity. A simpler and more powerful system for responsive images is planned for future releases.
 
   - **`[video]` tag simplified**: The `[video]` tag has been simplified to only accept the `src` parameter, removing support for multiple video sources. A more robust video player and driver support system is coming in a future update, allowing for better video handling and greater flexibility.
-
-
-
diff --git a/packages/nuejs.org/docs/content-syntax.md b/packages/nuejs.org/docs/content-syntax.md
index 76ecc15c..33a4273e 100644
--- a/packages/nuejs.org/docs/content-syntax.md
+++ b/packages/nuejs.org/docs/content-syntax.md
@@ -49,11 +49,11 @@ Nue supports common **Markdown extensions** such as **tables** and **footnotes**
 Tables are useful for presenting structured information. Here’s an example:
 
 ```md
-| Principle                | Description                                                       |
-|--------------------------|-------------------------------------------------------------------|
-| Separation of Concerns   | Dividing a system into distinct sections with specific roles.     |
-| Progressive Enhancement  | Building core functionality first, then adding enhanced features. |
-| Information Architecture | Structuring content for usability and navigation clarity.         |
+\| Principle                | Description                                                       |
+\|--------------------------|-------------------------------------------------------------------|
+\| Separation of Concerns   | Dividing a system into distinct sections with specific roles.     |
+\| Progressive Enhancement  | Building core functionality first, then adding enhanced features. |
+\| Information Architecture | Structuring content for usability and navigation clarity.         |
 ```
 
 This table provides a simple breakdown of key principles.
@@ -310,7 +310,7 @@ This allows flexible layout creation, giving you control over content structure
 
 1. **Create complex layouts with pure content**: There's literally zero bloat or extra markup needed to achieve advanced layouts such as **flex** or **grid**. Your design system’s CSS components handle the layout, keeping your Markdown clean and focused on content.
 
-2. **Supports rich, flexible designs**: You can easily render complex, visually engaging layouts like **bento-style cards** that mix videos, images, and text—**optionally enhanced** with scripting and motion. This flexibility allows you to create stunning, content-rich sections that work seamlessly across devices, without touching a line of HTML.
+2. **Supports rich, flexible designs**: You can easily render complex, visually engaging layouts like **bento-style cards** that mix videos, images, and text — **optionally enhanced** with scripting and motion. This flexibility allows you to create stunning, content-rich sections that work seamlessly across devices, without touching a line of HTML.
 
 ### Nesting
 Blocks can be nested to form more complex layouts on your richer marketing and landing pages, giving you the flexibility to create structured, multi-layered content without ever touching HTML. For example:
@@ -330,7 +330,7 @@ Blocks can be nested to form more complex layouts on your richer marketing and l
 
 This creates a flexible layout where a main **feature** block contains a nested **stack**, allowing for clean organization and structure in your content.
 
-The possibilities are endless. You can combine blocks in creative ways, stacking sections within sections to build rich, interactive landing pages. Imagine a **hero section** that introduces key features, followed by a **grid of cards**, each with its own stacked content blocks highlighting product details, testimonials, or case studies. With the power of **nesting**, you can craft visually complex layouts while keeping your Markdown easy to read and maintain. Whether you're building product showcases, multi-section promotional pages, or detailed service breakdowns, nesting unlocks a new level of creative control over your content structure—letting design systems handle the visual complexity.
+The possibilities are endless. You can combine blocks in creative ways, stacking sections within sections to build rich, interactive landing pages. Imagine a **hero section** that introduces key features, followed by a **grid of cards**, each with its own stacked content blocks highlighting product details, testimonials, or case studies. With the power of **nesting**, you can craft visually complex layouts while keeping your Markdown easy to read and maintain. Whether you're building product showcases, multi-section promotional pages, or detailed service breakdowns, nesting unlocks a new level of creative control over your content structure — letting design systems handle the visual complexity.
 
 ### Code blocks
 Code blocks in Nue are enclosed between triple backticks and can include an optional language hint for syntax highlighting using the [Glow syntax highlighter](/blog/introducing-glow/). For example, a CSS code block would look like this:
@@ -414,7 +414,7 @@ These **two words** are highlighted and **these words** are erroneous.
 #### Mixing content blocks and code blocks
 Here's an example combining content blocks and code blocks. Notice how clean the syntax is, avoiding excessive coding and ugly markup that often comes with complex layouts:
 
-```md
+````md
 [.stack]
 
   ### CSS animation setup
@@ -441,13 +441,11 @@ Here's an example combining content blocks and code blocks. Notice how clean the
     background-color: #ff4081;
   }
   ```
-```
+````
 
 This simple example demonstrates how you can create a **stacked layout** with content and code blocks, all within a clean, readable format. Mixing content and code blocks in this way allows you to present complex technical concepts, tutorials, or style guides without sacrificing readability or maintainability.
 
-
 ### Content tags
 Nue offers a large amount of [tags](content-tags.html) that significantly enhance your ability to create rich and interactive websites. You can add responsive images, videos, buttons, accordions, tabs, and more.
 
 You can also extend the syntax with [custom components](custom-components.html).
-
diff --git a/packages/nuejs.org/docs/content-tags.md b/packages/nuejs.org/docs/content-tags.md
index 91e2bb8a..fefd97f8 100644
--- a/packages/nuejs.org/docs/content-tags.md
+++ b/packages/nuejs.org/docs/content-tags.md
@@ -115,17 +115,17 @@ Nue supports art direction for images, allowing you to specify different sizes b
 The `large` and `small` attributes can define images with varying aspect ratios, optimizing the visual experience on different devices.
 
 [.options]
-#### Image options
-  - `alt` - Alternate text for accessibility, describing the image's content.
-  - `src` - Source URL of the image file.
-  - `caption` - Provides context for the image, enhancing user understanding.
-  - `href` - Adds a clickable link to the image, guiding users to related content.
-  - `large` - Specifies the large version of the image, which can differ in aspect ratio from the small version, allowing for creative art direction.
-  - `loading` - Determines the loading behavior: "lazy" enables [lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) (default value) or "eager" for immediate loading.
-  - `small` - Defines the small version of the image for mobile displays, optimizing visual presentation.
-  - `offset` - Sets the screen size (in pixels) at which the small image switches to the large one, with a default of 750 pixels.
-  - `size` - A shortcut property to provide both width and height simultaneously, formatted as "width x height".
-  - `width` - Specifies the width of the image for precise layout control.
+  #### Image options
+  - `alt` — Alternate text for accessibility, describing the image's content.
+  - `src` — Source URL of the image file.
+  - `caption` — Provides context for the image, enhancing user understanding.
+  - `href` — Adds a clickable link to the image, guiding users to related content.
+  - `large` — Specifies the large version of the image, which can differ in aspect ratio from the small version, allowing for creative art direction.
+  - `loading` — Determines the loading behavior: "lazy" enables [lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) (default value) or "eager" for immediate loading.
+  - `small` — Defines the small version of the image for mobile displays, optimizing visual presentation.
+  - `offset` — Sets the screen size (in pixels) at which the small image switches to the large one, with a default of 750 pixels.
+  - `size` — A shortcut property to provide both width and height simultaneously, formatted as "width x height".
+  - `width` — Specifies the width of the image for precise layout control.
 
 ### HTML output
 
@@ -206,14 +206,14 @@ Options can also be specified using YAML for enhanced organization:
 [.options]
   #### Video options
 
-  - `autoplay` - Starts the video when the page loads, providing an engaging experience right away. Must be used together with `muted` for autoplay to work across all browsers.
-  - `controls` - Displays the built-in video controls provided by the browser, allowing users to play, pause, and adjust the volume.
-  - `loop` - Makes the video restart automatically after it reaches the end, which is useful for continuous playback in presentations or promotional content.
-  - `muted` - Plays the video without sound, enabling autoplay in browsers that restrict sound playback.
-  - `poster` - A URL for an image that will be displayed before the video begins playing, giving users a preview of the content.
-  - `preload` - Provides a [hint to the browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload) about whether to load the video data before the user plays it.
-  - `src` - Specifies the URL to the video file, directing the browser to where it can retrieve the video content.
-  - `width` - Determines the width of the video player, allowing for precise control over the layout.
+  - `autoplay` — Starts the video when the page loads, providing an engaging experience right away. Must be used together with `muted` for autoplay to work across all browsers.
+  - `controls` — Displays the built-in video controls provided by the browser, allowing users to play, pause, and adjust the volume.
+  - `loop` — Makes the video restart automatically after it reaches the end, which is useful for continuous playback in presentations or promotional content.
+  - `muted` — Plays the video without sound, enabling autoplay in browsers that restrict sound playback.
+  - `poster` — A URL for an image that will be displayed before the video begins playing, giving users a preview of the content.
+  - `preload` — Provides a [hint to the browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload) about whether to load the video data before the user plays it.
+  - `src` — Specifies the URL to the video file, directing the browser to where it can retrieve the video content.
+  - `width` — Determines the width of the video player, allowing for precise control over the layout.
 
 ### HTML output
 
@@ -314,11 +314,11 @@ Nue supports standard Markdown syntax for tables, providing a straightforward wa
 Tables are created using the standard Markdown table syntax, which is simple but sometimes cumbersome when dealing with larger tables. Here is an example:
 
 ```md
-| Name            | Email                    | Work title         |
-| --------------- | ------------------------ | ------------------ |
-| Sarah Thompson  | sarah.thompson@demo.ai   | Graphic Designer   |
-| David Rodriguez | david.rodriguez@demo.ai  | Financial Analyst  |
-| Jessica Lee     | jessica.lee@demo.ai      | Project Manager    |
+\| Name            | Email                    | Work title         |
+\| --------------- | ------------------------ | ------------------ |
+\| Sarah Thompson  | sarah.thompson@demo.ai   | Graphic Designer   |
+\| David Rodriguez | david.rodriguez@demo.ai  | Financial Analyst  |
+\| Jessica Lee     | jessica.lee@demo.ai      | Project Manager    |
 ```
 
 ### Table tag
@@ -374,10 +374,10 @@ This allows you to render tables dynamically based on the structured data availa
 [.options]
   #### Table options
 
-  - `caption` - Defines a caption for the table, which appears above the table in HTML.
-  - `head` - Determines whether the first row should be rendered as a table head (`<th>` elements). The default is `true`.
-  - `:items` - Specifies the property name for externally defined table data that should be rendered.
-  - `wrapper` - Wraps the table inside a parent element with a class name specified on this property, typically used for adding colored backgrounds or other design elements from your design system.
+  - `caption` — Defines a caption for the table, which appears above the table in HTML.
+  - `head` — Determines whether the first row should be rendered as a table head (`<th>` elements). The default is `true`.
+  - `:items` — Specifies the property name for externally defined table data that should be rendered.
+  - `wrapper` — Wraps the table inside a parent element with a class name specified on this property, typically used for adding colored backgrounds or other design elements from your design system.
 
 
 ### HTML output
@@ -474,8 +474,8 @@ Accordions can be customized with various options to control their behavior and
 [.options]
   #### Accordion options
 
-  - `name` - Use this to name individual entries. When supplied, only one entry can be open at a time, ensuring a true accordion effect.
-  - `open` - Set the initial state of the accordion. Use this to open the first tab by default or provide a numeric value for a specific item to be initially opened.
+  - `name` — Use this to name individual entries. When supplied, only one entry can be open at a time, ensuring a true accordion effect.
+  - `open` — Set the initial state of the accordion. Use this to open the first tab by default or provide a numeric value for a specific item to be initially opened.
 
 
 ### HTML output
@@ -572,9 +572,9 @@ The use of `pointer-events: none;` ensures that only the active tab can be inter
 
 - **Works Without JavaScript**: All the tab functionality is implemented purely using CSS. The tabs continue to work seamlessly even if JavaScript is disabled or not available in the browser.
 
-- **No Extra HTML/JS Coding**: You don't need to write new JavaScript functions or HTML structures—everything is done by simply adding styles to the existing markup.
+- **No Extra HTML/JS Coding**: You don't need to write new JavaScript functions or HTML structures — everything is done by simply adding styles to the existing markup.
 
-By creatively using CSS, Nue makes it easy to craft responsive, interactive tabbed interfaces while keeping the underlying codebase clean and maintainable—proving that CSS alone can create sophisticated UI elements.
+By creatively using CSS, Nue makes it easy to craft responsive, interactive tabbed interfaces while keeping the underlying codebase clean and maintainable — proving that CSS alone can create sophisticated UI elements.
 
 
 ## Description lists
@@ -635,12 +635,3 @@ Separation of concerns [^soc] is an important strategy.
 
 [Progressive Enhancement][^pe] is good for UX.
 ```
-
-
-
-
-
-
-
-
-
diff --git a/packages/nuejs.org/docs/custom-components.md b/packages/nuejs.org/docs/custom-components.md
index 326e322e..35a1d325 100644
--- a/packages/nuejs.org/docs/custom-components.md
+++ b/packages/nuejs.org/docs/custom-components.md
@@ -121,7 +121,7 @@ In this case, Nue will first look for an implementation of the component or isla
 
 
 ## Passing data
-You can pass data to your components using attributes. These attributes can either be direct values or reference data from the [unstructured data](content.html) when the attribute name starts with a colon
+You can pass data to your components using attributes. These attributes can either be direct values or reference data from the [unstructured data](content.html) when the attribute name starts with a colon.
 
 #### Markdown example
 In Markdown content, you can pass data as follows:
@@ -736,4 +736,4 @@ You can add and import shared code within a top-level `<script>` tag. Here’s a
 
 
 ## Summary
-Nue opens the door to a new way of building web applications, allowing you to harness the power of Markdown extensions, server-side components, and client-side components—all with a simple and intuitive syntax. By focusing on an HTML-based approach, you can prioritize layout, structure, semantics, and accessibility, freeing yourself from the frustration of tangled JavaScript stack traces.
+Nue opens the door to a new way of building web applications, allowing you to harness the power of Markdown extensions, server-side components, and client-side components — all with a simple and intuitive syntax. By focusing on an HTML-based approach, you can prioritize layout, structure, semantics, and accessibility, freeing yourself from the frustration of tangled JavaScript stack traces.
diff --git a/packages/nuejs.org/docs/index.md b/packages/nuejs.org/docs/index.md
index 15e83ceb..eca7e8b1 100644
--- a/packages/nuejs.org/docs/index.md
+++ b/packages/nuejs.org/docs/index.md
@@ -1,4 +1,3 @@
-
 ---
 include: [compare]
 inline_css: true
@@ -114,7 +113,7 @@ Key terms mentioned in this article:
 
 [define]
   #### Asset hot-reloading
-  A feature that instantly applies changes across all asset types—content, data, layouts, styles, and components—for faster, smoother development.
+  A feature that instantly applies changes across all asset types — content, data, layouts, styles, and components — for faster, smoother development.
 
   #### Turbolinking
   A technique that speeds up navigation by loading pages with AJAX, enabling faster transitions without full page reloads.
@@ -127,4 +126,3 @@ Key terms mentioned in this article:
 
   #### JS monolith
   JavaScript bundles that pack numerous features into a single file, often leading to complexity, reduced clarity, and maintenance challenges.
-
diff --git a/packages/nuejs.org/docs/optimization.md b/packages/nuejs.org/docs/optimization.md
index 1af9de50..a4b3e407 100644
--- a/packages/nuejs.org/docs/optimization.md
+++ b/packages/nuejs.org/docs/optimization.md
@@ -12,11 +12,11 @@ Progressive enhancement opens new doors for performance optimization:
 
 ### Shift on thinking
 
-For years, the web engineering world has obsessed over JavaScript bundlers—complex, Rust/Go-based tools that slice, dice, and rearrange code in the name of performance. But for content-heavy websites, this approach is like using a sledgehammer to crack a nut. The truth is, JavaScript has minimal impact on performance for these types of sites, and all the bundling wizardry in the world won’t change that.
+For years, the web engineering world has obsessed over JavaScript bundlers — complex, Rust/Go-based tools that slice, dice, and rearrange code in the name of performance. But for content-heavy websites, this approach is like using a sledgehammer to crack a nut. The truth is, JavaScript has minimal impact on performance for these types of sites, and all the bundling wizardry in the world won’t change that.
 
 With **Nue**, we’re flipping that narrative.
 
-**What if performance didn’t depend on endless configurations and convoluted build steps?** What if, instead of wrestling with bundlers, you could simply *not need them*? That’s the radical shift Nue offers. Performance optimization doesn’t come from juggling dependencies—it comes from avoiding that complexity entirely.
+**What if performance didn’t depend on endless configurations and convoluted build steps?** What if, instead of wrestling with bundlers, you could simply *not need them*? That’s the radical shift Nue offers. Performance optimization doesn’t come from juggling dependencies — it comes from avoiding that complexity entirely.
 
 The breakthrough comes from **progressive enhancement**, which allows Nue to deliver the following:
 
@@ -47,8 +47,6 @@ inline_css: true
 This inlines all CSS directly into each page. While you might have concerns about increased page weight or needing to rebuild all pages when global CSS changes, it’s important to note that Nue’s CSS is extremely small, and the build process is so fast (sub-millisecond, even for large sites) that it has no noticeable impact on your development experience.
 
 
-
-
 ## View transitions
 
 View transitions are valuable for two main reasons. First, they make page transitions feel instant and seamless, improving the overall speed and responsiveness. Second, they allow you to add smooth transition effects between pages, similar to the animations you see in presentation software like Keynote.
@@ -65,5 +63,3 @@ When enabled, view transitions only add a minimal 1.9kB (minified and gzipped) s
 ## Page Weight
 
 Nue always generates clean, semantic HTML with zero clutter. For guidance on writing efficient, modern CSS that remains lean as your site grows, refer to the [styling](styling.html) document.
-
-
diff --git a/packages/nuejs.org/docs/scripting.md b/packages/nuejs.org/docs/scripting.md
index 0a726f46..b17eb249 100644
--- a/packages/nuejs.org/docs/scripting.md
+++ b/packages/nuejs.org/docs/scripting.md
@@ -6,7 +6,7 @@ Not all interactivity happens in isolated "islands." Vanilla JavaScript offers s
 
 1. **Global scripts**: Unlike islands, global scripts can control the entire site, working across pages and sections. This makes them ideal for seamless, site-wide functionality.
 
-1. **Non-UI functionality**: JavaScript has access to APIs for features beyond the visible interface, such as tracking user behavior or managing local storage through  `localStorage`, `sessionStorage`, or `IndexedDB`.
+1. **Non-UI functionality**: JavaScript has access to APIs for features beyond the visible interface, such as tracking user behavior or managing local storage through `localStorage`, `sessionStorage`, or `IndexedDB`.
 
 
 
@@ -218,7 +218,7 @@ This signals that all the imports in files named `index` will be bundled.
 ## TypeScript
 Nue supports TypeScript out of the box. Simply add `.ts` files, and they will automatically be transpiled to JavaScript using either Bun.build or ESBuild, depending on whether Nue is running under Bun or Node.js.
 
-TypeScript is a great choice for larger projects, especially when dealing with complex APIs or collaborating with multiple team members. However, for simpler projects—especially content-heavy websites—TypeScript might be unnecessary for two reasons:
+TypeScript is a great choice for larger projects, especially when dealing with complex APIs or collaborating with multiple team members. However, for simpler projects — especially content-heavy websites — TypeScript might be unnecessary for two reasons:
 
 1. **Small role of scripting**:
   In content-heavy sites, the focus is on delivering static or server-rendered content with minimal interactivity. Simple tasks like toggling elements or form validation can be handled efficiently with plain JavaScript.
@@ -227,4 +227,3 @@ TypeScript is a great choice for larger projects, especially when dealing with c
   Much of frontend development involves untyped elements like the DOM and CSS. While TypeScript excels in managing complex logic, its benefits are limited when working heavily with these untyped constructs.
 
 For most content-heavy sites, JavaScript is simpler and more efficient. However, if your project becomes more complex, such as a single-page application with multiple engineers, TypeScript is a good option.
-
diff --git a/packages/nuejs.org/docs/styling.md b/packages/nuejs.org/docs/styling.md
index a25961f0..7bfd6931 100644
--- a/packages/nuejs.org/docs/styling.md
+++ b/packages/nuejs.org/docs/styling.md
@@ -64,7 +64,6 @@ Global styles typically include:
 The `@` prefix for directory names is optional but serves as a useful convention to signify that the folder contains global assets rather than application-specific files like `blog`.
 
 
-
 ### UI libraries
 UI libraries are defined in your `site.yaml` configuration file like this:
 
@@ -81,7 +80,6 @@ Unlike global styles, these styles are included on demand. Typical **library fil
   caption: Global styles and library files
 
 
-
 ### Area-specific styles
 
 In Nue, **area-specific styles** allow you to apply unique design elements to different sections of your site, such as a blog, documentation, or store. These styles override or refine global rules while still adhering to the overall design system, ensuring consistency across your site.
@@ -97,7 +95,6 @@ include: [ form, card, motion ]
 When organizing your CSS with area-specific files, there is no need for class name prefixing (e.g., `.blog .card`). The styles within an area-specific file are automatically scoped to that section of your site, making class names like `.blog .card` redundant.
 
 
-
 ### Page-specific styles
 
 **Page-specific styles** give you precise control over individual pages, allowing for unique design treatments that do not affect the rest of your site. These styles are ideal for one-off pages like landing pages or special content that requires custom design.
@@ -419,5 +416,4 @@ Limiting options reduces the potential for errors and ensures the design remains
 
 ## Templates
 
-For many engineers, design can feel like a foreign concept—something abstract and difficult to master. The same often goes for CSS, which many find confusing or tricky to get right. Some even avoid it entirely. Nue’s **Templates** aim to bridge that gap. [Join the mailing](/index.html#roadmap) list to get notified when they are released.
-
+For many engineers, design can feel like a foreign concept — something abstract and difficult to master. The same often goes for CSS, which many find confusing or tricky to get right. Some even avoid it entirely. Nue’s **Templates** aim to bridge that gap. [Join the mailing](/index.html#roadmap) list to get notified when they are released.