diff --git a/.gitignore b/.gitignore
index b93267f1..851e313f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ dist
.vscode
_test
coverage
+performance.js
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index f4d42173..846fd194 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/examples/simple-blog/@global/layout.css b/packages/examples/simple-blog/@global/layout.css
index c80e279a..0960cb24 100644
--- a/packages/examples/simple-blog/@global/layout.css
+++ b/packages/examples/simple-blog/@global/layout.css
@@ -43,17 +43,18 @@ body {
/* global footer */
> footer {
border-top: 1px solid var(--gray-200);
- justify-content: space-between;
- margin-top: 6rem;
- padding: 1rem 0;
- display: flex;
+ margin-top: 8rem;
- /* social icons */
- > :last-child {
+ nav {
+ padding: 1rem 0;
display: flex;
gap: .5em;
- a:hover {
- transform: scale(1.1)
+
+ a { opacity: .8 }
+ a:hover { opacity: 1 }
+
+ a:nth-child(2) {
+ margin-left: auto;
}
}
}
diff --git a/packages/examples/simple-blog/@global/layout.html b/packages/examples/simple-blog/@global/layout.html
new file mode 100644
index 00000000..9a39bb02
--- /dev/null
+++ b/packages/examples/simple-blog/@global/layout.html
@@ -0,0 +1,7 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/examples/simple-blog/blog/color-strategies.md b/packages/examples/simple-blog/blog/color-strategies.md
index d492356a..32c3cb48 100644
--- a/packages/examples/simple-blog/blog/color-strategies.md
+++ b/packages/examples/simple-blog/blog/color-strategies.md
@@ -8,12 +8,12 @@ date: 2024-05-23
Working with color is one of the most fun parts of web design. But if you don't use them right in your CSS code, colors can also tank a site's usability and accessibility. In this post, we'll explore simple, real-world tips for effectively using color in your stylesheets.
-
+
``` css .blue
/* Tab styling */
[role=tablist] {
background: rgba(0, 0, 0, .7);
- background-size: 3.5em;
+ background-size: 3.8em;
> padding: .7em 1.3em 0;
> overflow: hidden;
> display: flex;
@@ -40,9 +40,8 @@ Choosing the right colors for a website can be tricky. Get one wrong and your en
- **Consider tone and contrast** - Include light, medium and dark tones for visual interest. Test contrast for accessibility.
-
[image img/colors-1.png]
- foo: bar
+
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.
diff --git a/packages/examples/simple-blog/blog/hero.html b/packages/examples/simple-blog/blog/hero.html
index c96d45f5..58ddcd2d 100644
--- a/packages/examples/simple-blog/blog/hero.html
+++ b/packages/examples/simple-blog/blog/hero.html
@@ -1,4 +1,3 @@
-
{ title }
diff --git a/packages/examples/simple-blog/blog/scaleable-design-system.md b/packages/examples/simple-blog/blog/scaleable-design-system.md
index e87ade9d..9ff41ed9 100644
--- a/packages/examples/simple-blog/blog/scaleable-design-system.md
+++ b/packages/examples/simple-blog/blog/scaleable-design-system.md
@@ -18,21 +18,21 @@ Design systems are key to managing code at scale, but creating one that’s flex
## 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.
-[code numbered="true"]
-
-
+``` html numbered
+
+
- - {{ caption }}
+- {{ caption }}
- +
diff --git a/packages/nuejs.org/README.md b/packages/nuejs.org/README.md
index b34a458a..3c061b7b 100644
--- a/packages/nuejs.org/README.md
+++ b/packages/nuejs.org/README.md
@@ -3,15 +3,15 @@
The source code for https://nuejs.org
-
+
### Running locally
1. [Install Nue](//nuejs.org/docs/installation.html)
-2. Clone this branch
+2. Clone this repository
3. `cd nue/packages/nuejs.org`
4. `nue`
-This should start the website at http://localhost:8080/
\ No newline at end of file
+The website runs at http://localhost:8080/
\ No newline at end of file
diff --git a/packages/nuejs.org/blog/index.md b/packages/nuejs.org/blog/index.md
index 2647c74e..df8d9f11 100644
--- a/packages/nuejs.org/blog/index.md
+++ b/packages/nuejs.org/blog/index.md
@@ -21,4 +21,4 @@ exclude:
[button.secondary href="/#roadmap" "Join mailing list"]
-[gallery]
+[page-list]
diff --git a/packages/nuejs.org/blog/introducing-glow/index.md b/packages/nuejs.org/blog/introducing-glow/index.md
index e13eb76c..c519dcb5 100644
--- a/packages/nuejs.org/blog/introducing-glow/index.md
+++ b/packages/nuejs.org/blog/introducing-glow/index.md
@@ -1,6 +1,6 @@
---
title: Introducing Glow
-hero_title: "*Introducing Glow:* Beautiful, pixel-perfect Markdown code blocks"
+hero_title: "*Introducing Glow:* Markdown code blocks for CSS developers"
desc: Beautiful, pixel-perfect Markdown code blocks
og: /img/glow-og.png
date: 2024-02-13
@@ -10,17 +10,17 @@ include: [syntax-extras]
Today we're launching *Glow* — a new take on syntax highlighting:
[image.large]
- small: /img/glow-og.png
+ caption: 30+ languages colored. Click for a standalone view.
large: /img/glow-og-big.png
- caption: 30+ languages colored. Click the image for a standalone view.
- href: /glow-demo/ # TODO: fix
+ small: /img/glow-og.png
+ href: /glow-demo/
-*Glow is different*: Instead of attempting to understand language internals, Glow focuses solely on aesthetics and how your code looks.
+*Glow is different*: Rather than parsing language internals, Glow focuses purely on aesthetics and the visual style of your code.
-*Glow is simple*: Glow makes all languages work with your brand colors by adjusting just a handful of CSS variables.
+*Glow is simple*: With just a few CSS variables, Glow adapts all languages to match your brand colors effortlessly.
-*Glow is small*: Glow is orders of magnitude smaller than the mainstream alternatives. We're talking [5K](//pkg-size.dev/nue-glow) instead of [5M](//pkg-size.dev/shiki). It's by far the smallest 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]
@@ -69,58 +69,64 @@ 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.
-[code.is-dark.browser-like wrapper="gradient sky" numbered="true"]
-
-
-
-
-
-
-
- {#if pressed}
-
+{/if}
+
+
+```
+
And when I say "unlimited", it means that:
-[code language="md" numbered="true" wrapper="live-code"]
- # There's something about Lightning CSS
- Writing future CSS today has been a massive
- •productivity boost.• You'll get nesting, `color-mix()`,
- variables, and whatnot. Natively, today.
+``` md.live-code numbered
+# There's something about Lightning CSS
+Writing future CSS today has been a massive
+•productivity boost.• You'll get nesting, `color-mix()`,
+variables, and whatnot. Natively, today.
+
+
- 
+> •After I ditched all tooling• I was able to
+> work closer to metal. Everything happened
+> sub-millisecond. I entered a new planet.
+```
- > •After I ditched all tooling• I was able to
- > work closer to metal. Everything happened
- > sub-millisecond. I entered a new planet.
+## Using together with Nue
+[Nue](/) is a web framework specializing on UX development. As of today, it has built-in support for Glow. You can easily extend your Markdown with stacks of code blocks or tabbed code panels. For example:
-## Glow + Nue = Next level
-[Nue](/) is a web framework for UX developers and other design-minded people. As of today, it has built-in support for Glow. You can do things like the following in your Markdown content:
+[.codestack.larger]
+ ### Content *YAML*
-[codeblocks.codestack.larger captions="Content *YAML* | Styling *CSS*"]
+ ``` md
# View metadata
members:
title: Members
@@ -136,8 +142,11 @@ And when I say "unlimited", it means that:
sorting:
created: Date subscribed
card: Card type
+ ```
- ---
+ ### Styling *CSS*
+
+ ``` css
/* Tab styling */
[role=tablist] {
background: rgba(0, 0, 0, .7);
@@ -153,76 +162,13 @@ And when I say "unlimited", it means that:
cursor: pointer;
}
}
-
-Or things like this:
-
-
-[codetabs "HTML | CSS | JS" wrapper="pink" numbered="1"]
-
- ---
- dialog {
- background-color: #0004;
- box-shadow: 0 0 2em #9cc;
- border-radius: 1em
- }
-
- label {
- display: block;
- margin-bottom: 1em
- input { width: 100% }
- }
-
- footer {
- margin-top: 1em;
- button { width: 100%; }
- }
- ---
- // Generic Web Component for sending data
- class HTXPost extends HTMLElement {
- constructor(options) {
- super()
- const endpoint = this.getAttribute('action')
- const formData = new FormData(this)
-
- this.onsubmit = (e) => {
- const res = await fetch(endpoint, {
- headers: { AccessKey: options.access_key },
- method: 'POST'
- })
- }
- }
- }
-
- customElements.define('htx-post', HTXPost, {
- extends: 'form'
- })
-
+ ```
## Get started with Glow
You can try Glow either as a standalone library or together with the Nue framework.
-#### Standalone library
+### Standalone library
Install [nue-glow](//github.com/nuejs/nue/tree/master/packages/glow) with npm, pnpm, or bun:
```sh
@@ -232,11 +178,9 @@ npm i nue-glow
And follow the [Glow documentation](/docs/syntax-highlighting.html)
-#### With Nue
-
-Nue has built-in support for Glow in Markdown fenced code blocks and offers [three new tags](/docs/tags.html#code): `[code]`, `[codeblocks]`, and `[codetabs]` for content creators.
+### With Nue
-You can try the tags as follows:
+Try Glow with Nue as follows:
```sh
# Install Bun (if not done yet)
@@ -246,10 +190,10 @@ curl -fsSL https://bun.sh/install | bash
bun install nuekit --global
# Start a Nue project with a Glow-powered template
-bun create nue@latest
+nue create simple-blog
```
-Choose *"Simple blog"* on the last step and you can enjoy goodies content hot-reloading when the code blocks are edited:
+Now you can enjoy goodies content hot-reloading when the code blocks are edited:
[bunny-video.larger]
videoId: 38caf489-74f1-416a-9f23-694baa5500bb
@@ -257,7 +201,6 @@ Choose *"Simple blog"* on the last step and you can enjoy goodies content hot-re
poster: thumbnail_1ca1bd66.jpg
-PS: Check out [Getting started docs](/docs/#node) if you prefer Node.
diff --git a/packages/nuejs.org/blog/introducing-nue-css/index.md b/packages/nuejs.org/blog/introducing-nue-css/index.md
index cabe926c..de0a8e84 100644
--- a/packages/nuejs.org/blog/introducing-nue-css/index.md
+++ b/packages/nuejs.org/blog/introducing-nue-css/index.md
@@ -111,9 +111,9 @@ The design is separated from the HTML structure so that the system can be contro
## 2. Cleaner way to write HTML and CSS { #minimalism }
-Nue has its own [CSS best practices](/docs/css-best-practices.html) for writing clear HTML and CSS. The key idea is to leave out all class names that relate to styling and let external CSS take care of the element and/or component look and feel:
+Nue has its own [CSS best practices](/docs/styling.html) for writing clear HTML and CSS. The key idea is to leave out all class names that relate to styling and let external CSS take care of the element and/or component look and feel:
-```html
+```
@@ -132,7 +132,9 @@ Simple means lean and well-organized CSS that is easy to maintain and scale. The
## 3. Ditch JavaScript
When everything is based on a single source of truth, it's trivial to ditch the redundant CSS-in-JS layer in front of your design system, be it Tailwind, **CSS Modules**, or Vanilla Extract. This makes a simpler stack:
-[table.small "| CSS-in-JS | Tailwind | Nue"]
+[table.small]
+ - ["", CSS-in-JS, Tailwind, Nue]
+
- - Key idea
- Local scoping
- Utility classes
@@ -155,8 +157,6 @@ When everything is based on a single source of truth, it's trivial to ditch the
-Now, onto results:
-
## Less coding needed
Sites made with Nue have extremely little CSS. For example, a basic Tailwind button has more styling than a complete Nue-powered website:
diff --git a/packages/nuejs.org/blog/layout.html b/packages/nuejs.org/blog/layout.html
index 056beb19..fc07543d 100644
--- a/packages/nuejs.org/blog/layout.html
+++ b/packages/nuejs.org/blog/layout.html
@@ -1,8 +1,4 @@
-
-
+```
+In this example, the `posts` variable is filtered to include only those entries with a specific tag (e.g., `design`). This approach lets you refine your displayed content dynamically within your custom component.
\ No newline at end of file
diff --git a/packages/nuejs.org/docs/content-syntax.md b/packages/nuejs.org/docs/content-syntax.md
new file mode 100644
index 00000000..f5e26cbf
--- /dev/null
+++ b/packages/nuejs.org/docs/content-syntax.md
@@ -0,0 +1,453 @@
+
+# Content syntax
+Nue provides an **extended Markdown syntax** for authoring rich web content. Building on top of basic Markdown, you can easily include complex elements like grids, responsive images, tables, accordions, tabbed content, and more.
+
+
+
+[image.bordered]
+ caption: Nue's extended Markdown syntax handles all varieties of content
+ small: /img/content-files.png
+ large: /img/content-files-big.png
+ size: 745 × 383
+
+This allows you to rapidly create dynamic, responsive web pages without writing any additional code. Everything is managed through simple, versionable text files that can be edited directly on your file system with your favorite text editor.
+
+
+## Basic syntax
+Nue fully supports standard [Markdown](//daringfireball.net/projects/markdown/), allowing you to work with familiar formatting options like headings, quotes, lists, and fenced code blocks. Here's an example of the basic syntax:
+
+```md
+# First level heading
+A paragraph with **bold** and *italics* and `inline code`
+
+
+
+## Second level heading
+
+> Quoted text with a [Link to docs](/docs/)
+
+1. This here
+2. is an ordered
+3. list of items
+
+Followed with:
+
+- An unordered
+- list of items
+
+
+And a horizontal line:
+
+***
+
+```
+
+## Standard Markdown extensions
+Nue supports common **Markdown extensions** such as **tables** and **footnotes**, allowing for more structured and informative content.
+
+### Tables
+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. |
+```
+
+This table provides a simple breakdown of key principles.
+
+### Footnotes
+**Footnotes** allow you to reference additional information or explanations without disrupting the main content flow. Here’s an example:
+
+```md
+Design principles like Separation of Concerns [^1], Progressive Enhancement [^2], and Information Architecture [^3] are fundamental.
+
+[^1]: Separation of Concerns (SoC) is crucial for maintaining clean and maintainable code.
+[^2]: Progressive Enhancement (PE) ensures that core functionality is available to all users, with enhanced features layered on.
+[^3]: Information Architecture (IA) involves organizing content in a way that is intuitive and accessible for users.
+```
+
+Footnotes provide a way to include more detail without cluttering the main text.
+
+
+
+## Nue-specific things
+Nue extends standard Markdown with additional formatting options and powerful features to make content richer and more dynamic, without needing complex HTML.
+
+
+### No HTML allowed
+In Nue, the focus is on **pure content**—free from HTML markup. This ensures that your content remains clean, semantic, and focused on structure, while design and styling are handled by CSS and layout modules. By separating content from presentation, Nue enforces the **Separation of Concerns (SoC)** principle, leading to better maintainability and a more consistent design system.
+
+Instead of embedding HTML, Nue provides powerful Markdown extensions like **blocks**, which let you create rich, styled content while keeping the content layer pure.
+
+
+### More formatting optionms
+Nue provides a variety of formatting options beyond standard Markdown, giving you more control over how text appears on the page. Here’s a comparison between the Markdown syntax and the corresponding HTML output:
+
+
+[table]
+ Markdown | HTML | Example
+ ------
+ `I'm **bold**` | `bold` | I'm **bold**
+ `I'm __bold__` | `bold` | I'm __bold__
+ `I'm •bold•` | `bold` | I'm •bold•
+ `I'm *italic*` | `italic` | I'm *italic*
+ `I'm _italic_` | `italic` | I'm _italic_
+ `I'm /italic/` | `italic` | I'm /italic/
+ `I'm \`code\`` | `code` | I'm `code`
+ `I'm ~striked~` | `striked` | I'm ~striked~
+ `I'm "quoted"` | `quoted` | I'm "quoted"
+ `I'm |marked|` | `marked` | I'm |marked|
+
+
+This extended set of formatting options helps you achieve more **precise styling** without needing to write raw HTML.
+
+
+### Variables
+Nue allows the use of **variables** within Markdown files, enabling dynamic content based on your application data. Variables are wrapped in curly braces (`{}`) and will be replaced with their corresponding values when the page is rendered:
+
+```md
+Package name: **{ package.name }**
+Package version: **{ package.version }**
+Complex value: **{ foo.bar[0].name }**
+```
+
+The values between curly braces are taken from the **application data** or **metadata** available on the page. This feature ensures that content can stay dynamic and up-to-date with the latest values from your site’s data and settings.
+
+
+### Heading IDs
+Enabling the `heading_ids: true` option in your configuration automatically generates anchor links for each heading. For example, a heading like:
+
+```md
+## Less is More
+```
+
+is rendered as:
+
+```html
+
+
+ Less is More
+
+```
+
+This creates a clickable link for each heading, making it easy to navigate through your content.
+
+#### Explicit IDs and Class Names
+
+You can also define IDs and class names directly within the heading. For example:
+
+```md
+## Less is More { #less.more }
+```
+
+This is rendered as:
+
+```html
+
+
+ Less is More
+
+```
+
+Here, the ID is set to `less`, and the class is set to `more`, providing more control over your heading's styling and link structure.
+
+
+
+### Expanded footnotes
+Nue enhances the standard Markdown footnote functionality by allowing you to mark entire phrases as part of the footnote. This makes it easier to create footnotes that are more descriptive and visually clear.
+
+For example, instead of just marking a single digit, you can mark an entire phrase:
+
+```md
+Design principles like [Separation of Concerns][^1], [Progressive Enhancement][^2], and [Semantic markup][^3] are fundamental.
+```
+
+This expanded capability allows you to reference full concepts or phrases, improving clarity in both technical and non-technical content, while maintaining the footnote's ease of use.
+
+
+### Sections
+You can split your content into sections with a triple dash `---` making your content render like this:
+
+```
+
+
+
+
+ ...
+
+```
+
+You can also generate the sections by setting `sections: true` in your configuration. This will generate a new section based on `
` headings so that each `
` tag starts a new section.
+
+[.note]
+ ### Horizontal rules
+ Please use `***`, `___`, or `- - -` to generate a horizontal rule (`` tag).
+
+Sections are discussed in more detail in the [styling](styling.html#sections) document.
+
+### Blocks
+**Blocks** in Nue are reusable chunks of content wrapped inside a class name, allowing you to build structured and styled sections while keeping the focus on pure content. No HTML is needed, making the content easy to manage and maintain.
+
+For example, here’s how to create a **"note" block**:
+
+```md stash
+[block.note]
+ ### Note
+ Web design is 100% content and 95% typography
+```
+
+This generates a fully styled block while keeping the content clean and semantic.
+
+#### Why blocks are great
+Nue’s block system promotes the **pure content** philosophy by:
+
+- **Keeping HTML out of Markdown**: Blocks allow you to maintain clean, readable content without the need for HTML markup, ensuring a pure content layer.
+- **Promoting clean, reusable structure**: By focusing on content, blocks make it easy to reuse consistent structures across your site, supporting both scalability and a unified design.
+- **Enforcing separation of concerns**: Blocks ensure that content remains focused on structure, while design and styling are applied externally via CSS, keeping the codebase clean and maintainable.
+
+#### HTML output
+When rendered, blocks are transformed into simple `
` elements with an associated CSS class name. For example, the "note" block generates the following HTML:
+
+```html
+
+
Note
+
Web design is 100% content and 95% typography
+
+```
+
+This keeps the structure clean and semantic, while design is handled separately through CSS.
+
+#### Simplified syntax
+You can further simplify the syntax by omitting the `block` component name and just using the class name prefixed with a dot:
+
+```md
+[.alert]
+ ### Note
+ You should avoid inline styling like black death
+```
+
+### Popovers
+Nue's block syntax makes it simple to create **popovers** that can be easily triggered using a [button](content-tags.html#button) tag. Popovers are a great way to present additional information without cluttering the main content flow.
+
+Here’s how you define a popover:
+
+```md
+[#soc-explainer popover]
+ ### Separation of concerns
+ **Separation of Concerns (SoC)** is a core principle in software and web development that promotes dividing functionality into distinct, independent sections. In web design, this means keeping content, structure, and styling isolated. By doing this, content creators can focus purely on the message and information, while designers and engineers handle the layout and styling. This approach leads to cleaner, more maintainable codebases and a better user experience.
+```
+
+This generates a `dialog` element with the standard `popover` attribute, which can be opened with a button:
+
+```md
+[button popovertarget="soc-explainer" "Learn how it works"]
+```
+
+This button is linked to the popover and opens it when clicked.
+
+#### Why this setup is great:
+1. **A new creative tool for content authors**: Popovers offer a fun, engaging way to display additional information without overwhelming the reader. Imagine creating Apple-like, sleek front-page dialogs that feel immersive, but with full SEO compatibility and a clean, content-first file. Popovers let content authors introduce rich interactive elements while maintaining complete control over the content flow.
+
+2. **No JavaScript needed**: You can wire up app-like dialog and popover functionality directly within your content using standard HTML attributes, without writing any JavaScript. This makes your content more accessible, reliable, and easy to manage.
+
+3. **Standards-based approach**: Nue uses the standard [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using), allowing the browser to handle the heavy lifting for opening, closing, and accessibility. This ensures that the popovers work even if JavaScript is disabled or fails to load,
+
+ making your content resilient and SEO-friendly.
+
+### Complex layouts
+Nue's Markdown parser automatically identifies when multiple blocks of content are placed within a single block tag and separates them using `
` tags. This makes it easy to create complex layouts directly in your content. For example, the following block:
+
+```md
+[.stack]
+ ### Design
+ Design starts with content, ensuring a natural flow and seamless navigation.
+
+ ### Engineering
+ Engineering focuses on performance, accessibility, and progressive enhancement.
+```
+
+Is rendered as:
+
+```html
+
+
+
Design
+
Design starts with content, ensuring a natural flow and seamless navigation.
+
+
+
Engineering
+
Engineering focuses on performance, accessibility, and progressive enhancement.
+
+
+```
+
+And when styled with CSS, it takes on a visually structured layout:
+
+[render]
+
+#### Separator
+Nue automatically uses the first `h2` or `h3` tag within a block as the **separator** for the content blocks. If needed, you can use a **triple-dash** (`---`) as an explicit separator to customize content divisions.
+
+For example:
+
+```md
+[.grid]
+ ### Design
+ Design blends form and function.
+
+ ---
+
+ ### Engineering
+ Code enhances the user experience while staying performant.
+```
+
+This allows flexible layout creation, giving you control over content structure and flow.
+
+#### Why this is great
+
+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.
+
+### 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:
+
+```md
+[.feature]
+ ## Hello, World!
+ Let's put a nested stack here
+
+ [.stack]
+ ### First item
+ With description
+
+ ### Second item
+ With description
+```
+
+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.
+
+### 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:
+
+```md
+\```css
+// here is a CSS code block
+:root {
+ --base-100: #f3f4f6;
+ --base-200: #e5e7eb;
+ --base-300: #d1d5db;
+ --base-400: #6b7280;
+}
+\```
+```
+
+The language hint (`css`) enables syntax highlighting for the specified language.
+
+#### Line numbering
+You can also apply custom class names and enable **line numbering** for your code blocks. Here's how to set it up:
+
+```md
+\``` •.purple numbered•
+function hello() {
+ // world
+}
+\```
+```
+
+The above example will be rendered with **purple text** and line numbers enabled:
+
+``` .purple numbered
+function hello() {
+ // world
+}
+```
+
+### Line/region highlighting
+Nue allows you to highlight specific lines or regions within your code blocks using special characters. This feature helps emphasize key parts of your code, making it easier for readers to focus on important areas.
+
+Here’s an example using JavaScript code with line numbering and highlights:
+
+```js numbered
+/* Code highlighting examples */
+
+>Highlight lines by prefixing them with ">"
+
+Here's a •highlighted region• within a single line
+
+// bring out errors
+export ••defaultt•• interpolate() {
+ return "something"
+}
+
+// prefix removed lines with -
+-const html = glow(code)
+
+// and added lines with +
++const html = glow(code, { •numbered: true• })
+```
+
+#### Highlighting options
+Use the following characters to customize how code lines and regions are highlighted:
+
+- `>` highlights an entire line with a default blue background.
+- `-` marks the line as **removed** with a red background.
+- `+` marks the line as **inserted** with a green background.
+- `|` highlights lines in Markdown syntax (similar to `>`).
+- `\` escapes the first character to prevent special treatment.
+
+To highlight specific text regions within a line, use the bullet character (`•`). For example:
+
+```md
+These •two words• are highlighted and ••these words•• are erroneous
+```
+
+This would be rendered as:
+
+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
+[.stack]
+
+ ### CSS animation setup
+
+ ``` .pink
+ @keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ .animate {
+ animation: fadeIn 2s ease-in;
+ }
+ ```
+
+ ### CSS transition setup
+
+ ``` .blue
+ .button {
+ transition: background-color 0.3s ease;
+ }
+
+ .button:hover {
+ 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
new file mode 100644
index 00000000..91e2bb8a
--- /dev/null
+++ b/packages/nuejs.org/docs/content-tags.md
@@ -0,0 +1,646 @@
+---
+include: [tabs]
+---
+
+# Content tags
+Nue offers a powerful set of built-in Markdown extensions, referred to as "tags," which significantly enhance your ability to create rich and interactive websites.
+
+
+## Tag syntax
+Tags are defined within square brackets. For example, to include an image, you would write:
+
+```md
+[image /img/cat.png]
+```
+
+The tag name (in this case, "image") can be followed by various options, which can be supplied in several ways:
+
+### Named options
+
+You can specify options using named attributes. For example:
+
+```md
+[image src="hello.png" caption="Hello, World" alt="Hello image"]
+```
+
+### Nested YAML
+
+Alternatively, you can use nested YAML to define the attributes:
+
+```md
+[image]
+| caption: Hello, World!
+| large: hello-big.png
+| small: hello.png
+| alt: Hello Image
+```
+
+### Plain values
+
+You can also use plain values without specifying attribute names:
+
+```md
+[image hello.png]
+```
+
+### ID and class name
+
+To set ID and class attributes, you can use the following syntax:
+
+```md
+[image#hero.massive /home/hero.webp]
+```
+
+### Nested content
+
+Tags can also include nested content. Here’s how you can add a caption for an image:
+
+```md
+[image explainer.png]
+| This nested content is the caption for the image.
+| You can add Markdown here like *emphasis* and `inline code`.
+```
+
+### Inline tags
+
+Finally, tags can be used inline as well. For instance, to add an inline SVG image, you can write:
+
+```md
+This is an inline [svg "/icon/meow.svg"] image.
+```
+
+- - -
+
+
+
+## Images
+To include a basic image, use:
+
+```md
+[image hello.webp]
+| This content here is the caption. Markdown *formatting* is supported.
+```
+
+You can also use a shortcut alias (`!`):
+
+```md
+[! hello.webp]
+```
+
+### Image links
+
+Nue allows you to link images to specific URLs using the `href` attribute, making them interactive:
+
+```md
+[image book.svg]
+ caption: View documentation
+ href: /docs/
+```
+
+This functionality enables you to guide users to additional resources or pages while providing visual context.
+
+### Responsive images
+
+Nue supports art direction for images, allowing you to specify different sizes based on screen dimensions. This feature ensures that users receive the best possible image for their device:
+
+```md
+[image]
+ large: ui-wide.png
+ small: ui-tall.png
+ caption: This is the image caption
+ alt: This is the alt text
+ loading: eager
+```
+
+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.
+
+### HTML output
+
+When rendered, images appear as `
` elements, enhancing the semantic structure of your content. For example, a simple image with a caption is rendered as:
+
+```html
+
+
+ This content here is the caption.
+
+```
+
+A more complex example with `href`, `small`, and `large` attributes looks like this:
+
+```html
+
+
+
+
+
+
+
+```
+
+### Inline SVG
+
+Inline SVG images can be added using the following syntax, which renders rich vector graphics directly within your content:
+
+```md
+[svg /icon/continue.svg]
+```
+
+This feature allows you to incorporate sharp, scalable images into your design easily. It’s especially useful when paired with other tags, such as buttons:
+
+```md
+[button href="/docs/"]
+ *Learn more* [svg /icon/chevron-right.svg]
+```
+
+This renders as follows, enabling smooth integration with CSS styling:
+
+```html
+
+ Learn more
+
+
+```
+
+
+## Videos
+The video tag in Nue serves as a content-focused interface for the standard HTML5 video tag, allowing you to easily incorporate video content into your pages. It is used as follows:
+
+```md
+[video /videos/hello.mp4]
+```
+
+You can also use a shortcut alias (`!`):
+
+```md
+[! /videos/hello.mp4]
+```
+
+All standard HTML5 video attributes are supported, providing flexibility and control over video playback:
+
+```md
+[video intro.mp4 autoplay controls muted loop]
+```
+
+Options can also be specified using YAML for enhanced organization:
+
+```md
+[video.heroic]
+ poster: hello.png
+ src: hello.mp4
+ width: 1000
+```
+
+[.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.
+
+### HTML output
+
+When rendered, videos appear as a native HTML5 video element, enabling smooth integration into your web pages. For example, the following code:
+
+```html
+
+```
+
+## Buttons
+
+Buttons in Nue are marked with a specific tag syntax to create interactive and accessible button elements directly from Markdown. This tag makes it easy to create buttons without requiring HTML or JavaScript, allowing for clean and maintainable content.
+
+### Basic button
+
+Buttons are marked as follows:
+
+```md
+[button label="Learn more" href="/docs/"]
+```
+
+The `button` tag allows you to specify various options to control the appearance and behavior of the button. In this example, the `label` and `href` attributes are used to define the button text and target link respectively.
+
+### Concise syntax
+
+Instead of using the `label` attribute, you can provide the button text directly as a plain value. This is a more concise way to define a button label:
+
+```md
+[button "Learn more" href="/docs/"]
+```
+
+### Styled button
+
+You can include a class name to style the button differently, using a nested body to define the button label. In this example, `.secondary` indicates a secondary button style, and the button label is provided as nested content:
+
+```md
+[button.secondary href="/docs/"]
+ Explore the docs
+```
+
+### Button with inline SVG
+
+Buttons can include inline SVG elements to provide additional visual cues, such as icons. In this example, the button includes a right-pointing arrow icon to indicate navigation:
+
+```md
+[button href="/docs/"]
+ *Learn more* [svg /icon/chevron-right.svg]
+```
+
+### Button triggering a popover
+
+Buttons in Nue can also be used to trigger popovers, allowing for additional content or explanations without cluttering the main page:
+
+```md
+[#info-popover popover]
+ ### More information
+ This popover provides extra details about the feature without leaving the current page.
+
+[button popovertarget="info-popover" "Learn more"]
+```
+
+This example creates a button labeled "Learn more" that opens a popover with extra information.
+
+[.options]
+ #### Button options
+
+ - `label` The text label for the button. This can also be provided as a plain value or defined within the body content.
+ - `href` The target link for the button. This is the URL the button will navigate to when clicked.
+ - `popovertarget` The ID of the popover to trigger when the button is clicked. This allows buttons to open additional content in popovers.
+
+
+### HTML output
+
+Buttons are rendered as follows:
+
+```html
+Learn more
+```
+
+Buttons are essentially links (`` elements) with a `role="button"` attribute. This ensures accessibility and allows the button to be styled and function like a traditional button while keeping the implementation simple and lightweight. When used with popovers, the button is rendered as a `
+ 
### Running locally
1. [Install Nue](//nuejs.org/docs/installation.html)
-2. Clone this branch
+2. Clone this repository
3. `cd nue/packages/nuejs.org`
4. `nue`
-This should start the website at http://localhost:8080/
\ No newline at end of file
+The website runs at http://localhost:8080/
\ No newline at end of file
diff --git a/packages/nuejs.org/blog/index.md b/packages/nuejs.org/blog/index.md
index 2647c74e..df8d9f11 100644
--- a/packages/nuejs.org/blog/index.md
+++ b/packages/nuejs.org/blog/index.md
@@ -21,4 +21,4 @@ exclude:
[button.secondary href="/#roadmap" "Join mailing list"]
-[gallery]
+[page-list]
diff --git a/packages/nuejs.org/blog/introducing-glow/index.md b/packages/nuejs.org/blog/introducing-glow/index.md
index e13eb76c..c519dcb5 100644
--- a/packages/nuejs.org/blog/introducing-glow/index.md
+++ b/packages/nuejs.org/blog/introducing-glow/index.md
@@ -1,6 +1,6 @@
---
title: Introducing Glow
-hero_title: "*Introducing Glow:* Beautiful, pixel-perfect Markdown code blocks"
+hero_title: "*Introducing Glow:* Markdown code blocks for CSS developers"
desc: Beautiful, pixel-perfect Markdown code blocks
og: /img/glow-og.png
date: 2024-02-13
@@ -10,17 +10,17 @@ include: [syntax-extras]
Today we're launching *Glow* — a new take on syntax highlighting:
[image.large]
- small: /img/glow-og.png
+ caption: 30+ languages colored. Click for a standalone view.
large: /img/glow-og-big.png
- caption: 30+ languages colored. Click the image for a standalone view.
- href: /glow-demo/ # TODO: fix
+ small: /img/glow-og.png
+ href: /glow-demo/
-*Glow is different*: Instead of attempting to understand language internals, Glow focuses solely on aesthetics and how your code looks.
+*Glow is different*: Rather than parsing language internals, Glow focuses purely on aesthetics and the visual style of your code.
-*Glow is simple*: Glow makes all languages work with your brand colors by adjusting just a handful of CSS variables.
+*Glow is simple*: With just a few CSS variables, Glow adapts all languages to match your brand colors effortlessly.
-*Glow is small*: Glow is orders of magnitude smaller than the mainstream alternatives. We're talking [5K](//pkg-size.dev/nue-glow) instead of [5M](//pkg-size.dev/shiki). It's by far the smallest 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]
@@ -69,58 +69,64 @@ 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.
-[code.is-dark.browser-like wrapper="gradient sky" numbered="true"]
-
-
-
-
-
-
-
- {#if pressed}
-
+ 
+