use new syntax

packages/examples/simple-blog/blog/scaleable-design-system.md

@@ -38,7 +38,7 @@ Use gradual rollouts: Introduce changes incrementally over time. Don't rebuild e
 
 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]
+[image]:
   src: img/ui-2.png
   alt: UI panels
   size: 700 × 525 px

packages/examples/simple-blog/contact/index.md

@@ -11,6 +11,6 @@ title: Contact me
   [contact-me]
 
   ---
-  [image]
+  [image]:
     src: /img/profile.jpg
     size: 460 x 460

packages/glow/test/generate.js

@@ -153,7 +153,7 @@ adaptogen. Iceland **chambray** raclette stumptown
 
   ![Hello](/banger.png)
 
-[image loading="eager"]
+[image loading="eager"]:
 | small: "/img/explainer-tall.png"
   src: "/img/explainer.png"
   hidden: true

packages/nuejs.org/blog/introducing-glow/index.md

@@ -9,7 +9,7 @@ include: [syntax-extras]
 
 Today we're launching *Glow* — a new take on syntax highlighting:
 
-[image.large]
+[image.large]:
   caption: 30+ languages colored. Click for a standalone view.
   large: /img/glow-og-big.png
   small: /img/glow-og.png
@@ -23,7 +23,7 @@ Today we're launching *Glow* — a new take on syntax highlighting:
 *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]
+[image.tall]:
   small: /img/shiki-vs-glow.png
   large: /img/shiki-vs-glow-big.png
   width: 600
@@ -32,7 +32,7 @@ Today we're launching *Glow* — a new take on syntax highlighting:
 ## Coloring voodoo
 Be it **Haskell**, **TypeScript**, or **Zig**. **React**, **Vue** or **Svelte**. Whatever Turing-free **Markdown** artifact is mixed with another tightly coupled language-of-the-day oddity. And they will all glow:
 
-[image.larger]
+[image.larger]:
   small: /img/glow-light.png
   large: /img/glow-light-big.png
   href: /glow-demo/light.html
@@ -195,7 +195,7 @@ nue create simple-blog
 
 Now you can enjoy goodies content hot-reloading when the code blocks are edited:
 
-[bunny-video.larger]
+[bunny-video.larger]:
   videoId: 38caf489-74f1-416a-9f23-694baa5500bb
   caption: Nue hot-reloading in action
   poster: thumbnail_1ca1bd66.jpg

packages/nuejs.org/blog/introducing-nue-css/index.md

@@ -8,7 +8,7 @@ date: 2024-03-20
 
 Here's a preview of Nue's upcoming approach to styling things on the web. The key difference is *minimalism*: You can build an entire website with the same amount of CSS that goes into a single **Tailwind** button. Or even crazier: You can fit three websites to a single **Tailwind Catalyst** button.
 
-[image.larger]
+[image.larger]:
   small: /img/nue-css-hero.webp
   large: /img/nue-css-hero-big.webp
   caption: It's possible to write three entire websites with a size of a single Tailwind button
@@ -50,7 +50,7 @@ Large codebases can draw you down: Small styling changes trigger large compilati
 ### Technical debt { #debt }
 Things work well if you can just copy/paste components and tweak settings, but it gets wild pretty easily. You end up with a codebase that only specialists can understand:
 
-[image /img/inline-styling.png width="450"]
+[image /img/inline-styling.png width="450"]:
   caption: Future technical debt
   size: 450 × 460
 
@@ -84,7 +84,7 @@ One of the key ideas of Nue is to ditch the large JavaScript ecosystem and go di
 ### Your design is based on a design system { #architecture }
 Most companies have drafted some form of design system in softwares like **Figma** or **Sketch**. This system acts as their "single source of truth":
 
-[image]
+[image]:
   small: /img/abstract-design-system.png
   large: /img/abstract-design-system-big.png
   width: 500
@@ -96,7 +96,7 @@ Design system is really a simple concept: You define the master look and feel in
 
 Nue makes sure your design is consistently applied across all the pages and components on your website. It automatically binds the correct CSS files to your pages depending on where the page resides. There is no need to tinker with path names with JS/CSS import statements.
 
-[image]
+[image]:
   small: /img/css-architecture.png
   large: /img/css-architecture-big.png
   size: 720 × 556
@@ -126,7 +126,7 @@ 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]
+[table.small]:
   - ["", CSS-in-JS, Tailwind, Nue]
 
   - - Key idea
@@ -167,7 +167,7 @@ Design-system-powered websites stay lean as the site grows:
 ## Leaner sites
 [motherfuckingwebsite.com](//motherfuckingwebsite.com/) is a developer meme from **Barry Smith** to demonstrate the power of minimalism. It's a text-only website that does not use CSS at all. It loads fast:
 
-[image]
+[image]:
   small: /img/mf-perf.png
   large: /img/mf-perf-big.png
   href: //pagespeed.web.dev/analysis/https-motherfuckingwebsite-com/jjbk58sczm
@@ -177,7 +177,7 @@ Design-system-powered websites stay lean as the site grows:
 A surprising fact is that minimal, inlined CSS gets you to the same performance levels without making compromises on design:
 
 
-[image]
+[image]:
   small: /img/nue-css-perf.png
   large: /img/nue-css-perf-big.png
   href: //pagespeed.web.dev/analysis/https-aimee-app-nuejs-org/qllf5ab934

packages/nuejs.org/blog/introducing-nue-css/size-measurement.md

@@ -30,7 +30,7 @@ CSS size details for the [comparison graphs](.#size-graphs)
 
 You can see the size details by running `nue --production stats .css` on your project directory:
 
-[image]
+[image]:
   small: /img/nue-stats.png
   large: /img/nue-stats-big.png
   width: 400

packages/nuejs.org/blog/introducing-nuemark/index.md

@@ -8,7 +8,7 @@ og: /img/nuemark-splash.jpg
 
 Today, I'm excited to release Nuemark — a Markdown-based text editing format for rich internet content. It places content at the heart of everything, and brings (back) a content-first approach to web development:
 
-[image]
+[image]:
   small: /img/nuemark-content.png
   large: /img/nuemark-content-big.jpg
   caption: A content-first approach to web development
@@ -18,7 +18,7 @@ Today, I'm excited to release Nuemark — a Markdown-based text editing format f
 ### Content hot-reloading
 Nuemark is a standalone library that works under Bun, Node, and Deno. However, it is best served together with Nuekit and its [universal hot-reloading](/docs/hot-reloading.html) capability. Just edit your content freely and see the page shaping up in your browser in real time.
 
-[bunny-video.larger]
+[bunny-video.larger]:
   videoId: 3bf8f658-185a-449c-93b9-9bd5e1ad0d05
   poster: /img/nuemark-splash.jpg
 
@@ -39,7 +39,7 @@ Nuemark is designed for content creation. It's a simple, concise syntax that is
 ```
 
 
-[image]
+[image]:
   small: /img/content-hero.png
   large: /img/content-hero-big.png
   caption: The content after applying some context-specific styling
@@ -51,7 +51,7 @@ With Nuemark, you start with pure content: Text, images, and videos and only the
 ## Built-in set of headless UI components { #components }
 Nuemark comes with a set of built-in components, which aim to tackle the most common content management use cases. There are buttons, icons, responsive images, videos, tables, tabs, and layout grids. And you can mix components to form more complex layouts.
 
-[image]
+[image]:
   small: /img/rich-content.png
   large: /img/rich-content-big.png
   caption: Nuemark content from the installable demo
@@ -62,7 +62,7 @@ All these components or "tags" are *headless* — meaning that there are no inli
 
 The semantic approach means that you can customize the look and feel of your components so that they look just right in the given context. For example, a tabbed layout may look completely different on your front page compared to what it looks like on the documentation area:
 
-[image]
+[image]:
   small: /img/tab-designs.jpg
   large: /img/tab-designs-big.jpg
   caption: Same component, different CSS module

packages/nuejs.org/blog/nue-1-beta/index.md

@@ -24,7 +24,7 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
 5. **Parents & Teachers**: who wants to educate people [how the web works](//www.websitearchitecture.co.uk/resources/examples/web-standards-model/)
 
 
-[image.larger]
+[image.larger]:
   small: img/og-blue.png
   large: img/og-blue-big.png
   size: 747 x 474
@@ -78,7 +78,7 @@ View transitions is a broad standard with tons of visual possibilities that are
 ## CSS best practices
 Nue's new [CSS best practices](/docs/styling.html) brings out the best of modern CSS:
 
-[image.larger]
+[image.larger]:
   small: /img/blog-css-hierarchy.png
   large: /img/blog-css-hierarchy-big.png
   caption: Nue offers the shortest path from Figma to code
@@ -95,7 +95,7 @@ Nue helps you build professional websites with the same amount of CSS as you can
 ## New website and documentation
 Unsurprisingly, the biggest job was the documentation area, which now focuses on [Design Engineering](/docs/how-it-works.html#design-engineering). About 80% of the documentation is completely rewritten and there are several new documents.
 
-[image.larger.shadowed]
+[image.larger.shadowed]:
   small: /img/new-docs.png
   large: /img/new-docs-big.png
   _size: 747 x 474
@@ -109,7 +109,7 @@ The most important thing, however, is that the website is generated with the pub
 
 Nue [installation](/docs/installation.html) is now simpler and the onboarding now comes with a handy `nue create` command that installs an example website and opens it on your browser. The opening screen looks like this:
 
-[image]
+[image]:
   small: /img/create-welcome.png
   large: /img/create-welcome-big.png
   caption: The welcome screen after successful setup

packages/nuejs.org/blog/nue-release-candidate/index.md

@@ -7,7 +7,7 @@ date: 2024-11-14
 
 Nue is a static site generator (SSG) built from the ground up to offer faster tooling, cleaner codebases, and better results. Today, we’re releasing the first version of Nue that earns the "release candidate" (RC) status.
 
-[image]
+[image]:
   small: /img/og-dark.png
   large: /img/og-dark-big.png
 
@@ -20,14 +20,14 @@ I know, it might sound a bit over the top... but hear me out. Let’s break it d
 ## 1. Cleaner codebases
 Nue is an ambitious engineering project designed to simplify web development through **separation of concerns** and **progressive enhancement**. This approach fundamentally redefines how websites are developed:
 
-[image]
+[image]:
   small: /img/progressive-enhancement.png
   large: /img/progressive-enhancement-big.png
   size: 650 x 174
 
 What once required a **React specialist** and a large amount of **JavaScript** can now be achieved with clean, standards-based code:
 
-[image.bordered]
+[image.bordered]:
   large: /img/clean-code-big.png
   small: /img/clean-code.png
   size: 745 × 403
@@ -38,7 +38,7 @@ This means you’re no longer bogged down with debugging complex algorithms and
 ## 2. Faster tooling
 One of Nue’s standout features is its hot-reloading mechanism, and with this version, the diff/patch system is stronger than ever. By instantly detecting changes in **content**, **data**, **layouts**, **styles**, **components**, and **islands**, Nue applies updates directly to your browser. This creates a smooth, lightning-fast feedback loop that makes the development process more exciting and fluid.
 
-[bunny-video]
+[bunny-video]:
   videoId: abb2cf75-c7f9-43e6-b126-8827d0c8721e
   style: "background-color: #282C30"
   poster: /img/blog-content-editing-big.png
@@ -57,7 +57,7 @@ With the new Markdown parser and the absence of unnecessary JavaScript abstracti
 ## 3. Better results
 Nue helps developers create **fast** and **user-friendly** websites with features like **turbolinking**, **CSS view transitions**, **interactive islands**, and **CSS inlining**:
 
-[bunny-video]
+[bunny-video]:
   videoId: 383e5c79-6747-4b1a-8d7a-9da9ae721d33
   poster: /img/hero-splash.jpg
   caption: "Nue templates preview. Hit **F** for fullscreen"

packages/nuejs.org/blog/nuekit-010/index.md

@@ -8,7 +8,7 @@ desc: A simple, minimalistic alternative to Next.js and Astro with universal hot
 
 Today I’m excited to share Nuekit: A new kind of static site generator and web application builder.
 
-[image.larger]
+[image.larger]:
   small: /img/nuekit-hero.jpg
   large: /img/nuekit-hero-big.jpg
 
@@ -23,15 +23,15 @@ In other words: Nuekit is an amazingly simple and powerful alternative to *Next.
 ## Universal hot-reloading { #uhr }
 Build entire websites without ever touching your browser. Your browser is instantly updated as you make changes to your content, styling, layout, and reactive islands:
 
-[bunny-video.larger]
+[bunny-video.larger]:
   videoId: 18714305-d2f3-453d-83a9-0bd017166949
   poster: /img/hot-reload-hero.jpg
 
 
 ## Great for websites and single-page apps { #multi }
 Use the same simple syntax and development model for content-focused websites or reactive single-page applications — while enjoying the extra boost from universal hot-reloading.
 
-[image]
+[image]:
   small: /img/simple-blog.png
   large: /img/simple-blog-big.png
   href: //simple-blog.nuejs.org
@@ -43,7 +43,7 @@ Build a simple blog: [Tutorial](/docs/tutorial.html) /
 
  
 
-[image]
+[image]:
   small: /img/simple-spa.png
   large: /img/simple-spa-big.png
   href: /@simple-admin
@@ -57,7 +57,7 @@ Build a simple SPA: [Tutorial](/docs/tutorials/build-a-simple-spa.html) /
 ## Significantly faster build times { #faster }
 Nue is an order of magnitude faster than its cousins. An identical blogging site takes around *50ms* to build with Nuekit and over *ten seconds* with Next.js:
 
-[bunny-video]
+[bunny-video]:
   videoId: 45b73e3a-3edd-47af-bcd8-49039496b107
   caption: Building blog template with Nue in 39ms ¯\_(ツ)_/¯
   width: 650
@@ -75,7 +75,7 @@ Nue is an order of magnitude faster than its cousins. An identical blogging site
 ### New, beautiful documentation area
 With lots of explainer-images and -videos:
 
-[image]
+[image]:
   small: /img/docs.png
   large: /img/docs-big.png
   href: /docs/

packages/nuejs.org/blog/perfect-web-framework/index.md

@@ -11,7 +11,7 @@ In June 2023 I had my final frontend rage quit moment. The anger was so intense
 I created a [project on GitHub](//github.com/nuejs/nue) and called it **"Nue"**. I wanted it to be the best web framework for [UX developers](//css-tricks.com/the-great-divide/) and design-led organizations. It'll consist of the following:
 
 
-[image]
+[image]:
   small: /img/perfect-banner.jpg
   large: /img/perfect-banner-big.jpg
   width: 550

packages/nuejs.org/blog/rethinking-reactivity/index.md

@@ -8,7 +8,7 @@ date: 2023-10-02
 
 [Nue JS][nuejs] is a tiny, 2.1kb min-brotlied library for building user interfaces. It's an alternative to frameworks like *Vue*, *React*, and *Svelte* — and it's the central piece of the [Nue ecosystem](/), which is a ridiculously easier alternative to *Next.js* and *Astro*
 
-[image]
+[image]:
   large: /img/meme-big.jpg
   small: /img/meme.jpg
   caption: Less is more
@@ -339,7 +339,7 @@ The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based
 
 [evan]: //github.com/yyx990803/vue-svelte-size-analysis
 
-[table head]
+[table head]:
   - Framework              | Vue     | Svelte  | Nue
   - Framework size         | 16.89kb | 1.85kb  | 2.13 kb
   - Todo MVC size          | 1.10kb  | 1.88kb  | 0.96 kb
@@ -348,7 +348,7 @@ The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based
 
 #### Nue has the smallest footprint
 
-[image]
+[image]:
   large: /img/file-sizes-big.png
   small: /img/file-sizes.png
   width: 550

packages/nuejs.org/blog/standards-first-web-framework/index.md

@@ -61,7 +61,7 @@ Here's what this enables:
 
 [Learn how Nue works →](/docs/)
 
-[image /img/standards-first.png]
+[image /img/standards-first.png]:
   alt: Standards first
   width: 600
 

packages/nuejs.org/blog/status-update-01/index.md

@@ -8,7 +8,7 @@ desc: A quick update to give you a little idea of the  past, present, and the fu
 
 The goal of Nue is to be the [perfect web framework](/blog/perfect-web-framework/) for UX developers and design-led organizations. We're not there yet, but here's how we keep the dream alive
 
-[image]
+[image]:
   small: /img/designers-vs-engineers.png
   large: /img/designers-vs-engineers-big.png
   caption:  "[The Great Divide](//css-tricks.com/the-great-divide/): UX developers are design-oriented and JS engineers are technology-oriented"
@@ -22,7 +22,7 @@ Today, there is an unexpected resistance towards vanilla JS and CSS. Nue is an a
 [Nue JS](//github.com/nuejs/nue/tree/master/packages/nuejs) is a small micro-library for building user interfaces. While still buggy and in early beta, it showcases the value of separation of concerns and an HTML-first approach. That is: Your code becomes easier to read.
 
 
-[image.floating src="/img/theo-tailwind-promoter.jpg"]
+[image.floating src="/img/theo-tailwind-promoter.jpg"]:
   href: //youtu.be/yGBjXsrwK4M
   caption: "**Theo** is a famous JS/CSS hater and a passionate Tailwind promoter"