feat: Atom feed generation

.github/workflows/repo/build-page/action.yaml

@@ -1,9 +1,14 @@
 name: Repository nue page build
+description: |
+  Internal composite action to install dependencies, register the `nue` command, and build a Nue project.
 
 inputs:
   root:
+    description: |
+      The root directory of the Nue project to build.
+      This is passed to the `--root` option of the `nue build` command.
     default: '.'
-    type: string
+    required: false
 
 runs:
   using: composite

packages/examples/simple-mpa/app/model/users.js

@@ -42,7 +42,7 @@ const THREADS = [
   ],
   [
     'Can you tell me what you were doing when it happened?',
-    'I was on the customer view, clicked on the notitication icon, and selected "never". The system did not respond. I\'m on latest Chrome',
+    'I was on the customer view, clicked on the notification icon, and selected "never". The system did not respond. I\'m on latest Chrome',
     'We found the issue and pushed a fix to production. Please reload the app.',
     'Thank you! Works now 🎉🎉',
   ],

packages/hyper/README.md

@@ -3,6 +3,6 @@
 # Hyper (Developer Preview)
 Hyper is a simple markup language for building user interfaces. It enables developers (and AI models) to generate complex UIs with amazingly clean syntax.
 
-[Launch post](https://nuejs.org/blog/introducing-hyper/) • [Docs](https://nuejs.org/hyper/)
+[Launch post](https://nuejs.org/blog/standards-first-react-alternative/) • [Docs](https://nuejs.org/hyper/)
 
-<img src="https://nuejs.org/blog/introducing-hyper/img/hyper-banner-dark-big.png" width="800">
+<img src="https://nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-dark-big.png" width="800">

packages/hyper/demo/table/builds/table.js

@@ -16,7 +16,7 @@ export const lib = [ { tag: 'div',
          children:
           [ { tag: 'h1', children: [ { text: 'Table example' } ] },
             { tag: 'p',
-              children: [ { text: 'A more compex table with filtering and sortable columns' } ] },
+              children: [ { text: 'A more complex table with filtering and sortable columns' } ] },
             { tag: 'input',
               attr:
                [ { name: 'type', val: 'search' },

packages/hyper/demo/table/table-component.html

@@ -4,7 +4,7 @@
 <div class="card">
   <header>
     <h1>Table example</h1>
-    <p>A more compex table with filtering and sortable columns</p>
+    <p>A more complex table with filtering and sortable columns</p>
     <input type="search" :input="filter" placeholder="Filter by name...">
   </header>
 

packages/hyper/package.json

@@ -2,11 +2,10 @@
   "name": "nue-hyper",
   "version": "0.1.1",
   "description": "Hyper is HTML markup for building user interfaces",
-  "homepage": "https://nuejs.org/blog/introducing-hyper/",
+  "homepage": "https://nuejs.org/blog/standards-first-react-alternative/",
   "main": "src/index.js",
   "license": "MIT",
   "type": "module",
-
   "repository": {
     "url": "https://github.com/nuejs/nue",
     "directory": "packages/hyper",

packages/nuejs.org/@global/global.css

@@ -5,6 +5,7 @@
 
 html {
   scroll-behavior: smooth;
+  hyphens: auto;
   overflow-x: hidden;
 }
 
@@ -14,8 +15,8 @@ body {
   font-family: system-ui;
   margin: 0;
 
-  @media (width < 900) { font-size: 15px }
-  @media (width < 600) { font-size: 14px }
+  @media (width < 900px) { font-size: 15px }
+  @media (width < 600px) { font-size: 14px }
 
 }
 

packages/nuejs.org/@global/navigation.css

@@ -80,14 +80,14 @@ body > header {
     nav:first-child {
       display: flex;
 
-      @media (width < 650) {
+      @media (width < 650px) {
         gap: .75rem;
         a:not(.nav-home, .pill) { display: none }
       }
     }
 
   }
-  @media (width < 500) {
+  @media (width < 500px) {
     .pill { display: none }
   }
 }
@@ -143,7 +143,7 @@ body > footer {
     font-size: .9rem;
     gap: 2rem;
 
-    @media (width < 600) {
+    @media (width < 600px) {
       flex-direction: column;
       gap: 1.5rem;
     }

packages/nuejs.org/@global/navigation.yaml

@@ -7,15 +7,15 @@ globalnav:
     - Docs: /docs/
     - Blog: /blog/
     - Vision: /vision/
-    - url: /blog/introducing-hyper/
-      label: "*Introducing Hyper* A simple React alternative ›"
+    - url: /blog/standards-first-react-alternative/
+      label: "*Hyper* Standards first React alternative ›"
       class: news pill
 
 
   # header toolbar (complementary)
   toolbar:
     - Slack: //join.slack.com/t/nuejs/shared_invite/zt-2wf8ozu5i-N2Y9PA_D17weIWuN2QPOqQ "slack"
-    - 8.5k: //github.com/nuejs/nue "github pill"
+    - 8.7k: //github.com/nuejs/nue "github pill"
 
   # burger menu
   menu:

packages/nuejs.org/@global/popover.css

@@ -80,7 +80,7 @@ dialog {
     figure { margin: 0 }
   }
 
-  @media(width < 900) {
+  @media(width < 900px) {
     max-height: 96vh;
     flex-direction: column;
     h3 span { display: none }

packages/nuejs.org/@global/variables.css

@@ -43,7 +43,7 @@
 }
 
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   :root { --body-padding: 1.2em; }
 }
 

packages/nuejs.org/@lib/syntax-extras.css

@@ -88,7 +88,7 @@
 
   h3 { color: var(--gray-200) }
 
-  @media (max-width: 750px) {
+  @media (width <= 750px) {
     flex-direction: column;
   }
 }

packages/nuejs.org/@lib/technical-content.css

@@ -142,6 +142,7 @@ article {
   > video {
     border-radius: 6px;
     cursor: pointer;
+    max-width: 100%;
 
     &:active {
       transform: scale(.995);
@@ -234,7 +235,7 @@ h2[id], section > h3[id] {
       display: none;
     }
 
-    @media(width > 800) {
+    @media(width > 800px) {
       &:hover:before {
         display: inline;
       }

packages/nuejs.org/blog/blog.css

@@ -72,7 +72,7 @@ h1 {
 
 
 /* image.large, image.larger */
-@media (min-width: 950px) {
+@media (width >= 950px) {
   .large, .larger {
     margin-inline: -12vw;
     img { width: 999% }

packages/nuejs.org/blog/introducing-glow/pair-coding-demo.css

@@ -53,7 +53,7 @@
     }
   }
 
-  @media (max-width: 500px) {
+  @media (width <= 500px) {
     overflow-x: auto;
     padding: .5em;
     [glow] { border-radius: .5em; }

packages/nuejs.org/blog/lib/blog-index.css

@@ -82,7 +82,7 @@ li {
     color: white;
   }
 
-  @media (width > 800) {
+  @media (width > 800px) {
     flex-direction: row;
     margin-bottom: 0;
     gap: 1.5em;

packages/nuejs.org/blog/introducing-hyper/complex-table.md → packages/nuejs.org/blog/standards-first-react-alternative/complex-table.md

@@ -1,6 +1,6 @@
 
 ---
-back_to: introducing-hyper/
+back_to: standards-first-react-alternative/
 pagehead: false
 unlisted: true
 ---
@@ -309,7 +309,7 @@ export default function DataTable({ data }: DataTableProps) {
 
 
 ## With Hyper
-Uses only about 40 lines of code, roughly 75% reduction in code to impolement the same features.
+Uses only about 40 lines of code, roughly 75% reduction in code to implement the same features.
 
 
 ``` html
@@ -353,9 +353,3 @@ Uses only about 40 lines of code, roughly 75% reduction in code to impolement th
   </script>
 </div>
 ```
-
-
-
-
-
-

packages/nuejs.org/blog/introducing-hyper/index.md → packages/nuejs.org/blog/standards-first-react-alternative/index.md

@@ -255,7 +255,7 @@ Estimate: 4-5 months.
 
 
 ### How can a small library challenge React's dominance?
-Gradually. To succeed, we particularly need to address the following:
+Gradually. To succeed, we need to address the following:
 
 1. **Developer perception**: Many frontend developers have come to view abstraction layers as essential. As Hyper demonstrates how professional UIs can be built without these complexities, this perception will shift.
 

packages/nuejs.org/blog/introducing-hyper/simple-table.md → packages/nuejs.org/blog/standards-first-react-alternative/simple-table.md

@@ -1,6 +1,6 @@
 
 ---
-back_to: introducing-hyper/
+back_to: standards-first-react-alternative/
 pagehead: false
 unlisted: true
 ---

packages/nuejs.org/blog/status-update-01/status-update.css

@@ -5,13 +5,13 @@
   img {
     width: 200px;
   }
-  @media (min-width: 700px) {
+  @media (width >= 700px) {
     margin: 0 0 0 3em;
     text-align: right;
     float: right;
   }
 
-  @media (min-width: 900px) {
+  @media (width >= 900px) {
     margin-right: -4em
   }
 }

packages/nuejs.org/docs/content-focused-apps.md

@@ -31,7 +31,6 @@ This generates a styled, interactive grid — say, a responsive bento-box layout
 
 Nue begins with content in its specialized Markdown dialect, delivering a semantic, accessible baseline. From there, it layers enhancements like interactive islands, and motion to create a robust user experience. Each step builds on the content-first foundation, using web standards to keep the process simple and maintainable.
 
-
 ### Layout modules
 
 Layout modules are clean, semantic HTML templates attached to specific "slots" in the page layout. A header module might slot in navigation, while a footer includes a `<join-list/>` custom tag for a mailing list submissions. Defined once and reused across pages, they structure Markdown content consistently without burdening creators with markup.
@@ -53,19 +52,13 @@ In content-heavy sites, JavaScript is optional, unlike in SPAs where it’s cent
 Motion enhances the experience through modern CSS, reducing reliance on JavaScript-heavy solutions common in frameworks. Scroll-linked effects via `[.progress]` or view transitions — enabled in `site.yaml` — add fluidity and engagement. These standards-based techniques progressively build on the content-first foundation with minimal overhead.
 
 
-You’re right — “unify” feels abrupt and doesn’t fully capture the intent. I’ll revise the *Multipage applications* section to clarify how Nue supports developing both content-focused apps (e.g., docs, blogs, products) and SPAs within the same cohesive environment, choosing the best development model for each task. Here’s the updated version: 
-
-
 ## Multipage applications
 
 Nue enables developers to build content-focused applications — like documentation, blogs, or product pages — alongside single-page applications (SPAs) within a single, cohesive development environment. Each type uses the right model for the job: Markdown-driven simplicity for content apps and logic-focused templates for SPAs. This flexibility ties everything together with a shared design system and seamless navigation.
 
 For example, a site might include a blog and docs as content-focused pages, authored in Markdown, and an SPA dashboard built with HTML templates. Nue’s routing manages transitions across both, enhanced by view transitions defined in CSS, like a smooth scale effect between pages. The shared design system ensures visual consistency, making the site feel integrated without forcing a one-size-fits-all approach.
 
 
-Fair point — limiting it to React devs narrows the scope unnecessarily. I’ll generalize it to reflect that the standards-first model might be new to developers from various backgrounds. Here’s the updated *Templates* section:
-
-
 ## Templates
 
 This website — featuring rich marketing pages, documentation, and a blog — is built with Nue, showcasing its standards-first approach. For developers used to framework-heavy workflows, this model may feel unfamiliar. We’re crafting templates to ease that transition, spanning the full frontend spectrum: standards-first UI libraries, SPAs, and content-rich MPAs, all integrated with your chosen design system. These templates will highlight what’s achievable with browser-native tools. Join our mailing list to get notified when they’re released.

packages/nuejs.org/docs/css/doc-layout.css

@@ -26,7 +26,7 @@ article + aside {
 }
 
 /* small screens  */
-@media (max-width: 1000px) {
+@media (width <= 1000px) {
 
   /* left sidebar */
   aside:first-child {
@@ -42,7 +42,7 @@ article + aside {
 }
 
 /* medium screens ( < 1300px) */
-@media (width > 1000) {
+@media (width > 1000px) {
   body > header {
     position: fixed;
     top: 0;
@@ -74,6 +74,7 @@ article + aside {
 
     /* left sidebar */
     &[popover] {
+      max-width: 18em;
       margin: auto 0 0 2em;
       padding-right: 4em;
       button { display: none }
@@ -82,7 +83,7 @@ article + aside {
 }
 
 /* big screens */
-@media (width > 1300) {
+@media (width > 1300px) {
   article {
     max-width: 50vw;
 

packages/nuejs.org/docs/index.md

@@ -51,7 +51,7 @@ Build times consistently run in milliseconds, even for large-scale apps, deliver
 
 ### For software architects
 
-Nue brings back the good practices of software engineering: simple, testable functions, modular design, minimal dependencies, and an architecture-first approach. Build computation engines with the language of your choice (JavaScript, Rust, Go, or TypeScript) and reach new levels of performance and architectural clarity. Nue is for developers who wish to bulid on classic algorithms and data structures over React idioms.
+Nue brings back the good practices of software engineering: simple, testable functions, modular design, minimal dependencies, and an architecture-first approach. Build computation engines with the language of your choice (JavaScript, Rust, Go, or TypeScript) and reach new levels of performance and architectural clarity. Nue is for developers who wish to build on classic algorithms and data structures over React idioms.
 
 ### For design engineers
 

packages/nuejs.org/home/css/_roadmap.css

@@ -41,7 +41,7 @@
     margin: 0 0 var(--gap);
   }
 
-  @media (800 < width < 1100) {
+  @media (800px < width < 1100px) {
     .panel:last-child {
       max-width: 100%;
       ul {

packages/nuejs.org/hyper/index.md

@@ -5,11 +5,11 @@ include: [technical-content]
 # Hyper documentation
 Hyper is a simple markup language for building user interfaces. Currently in **development preview**, it enables developers (and AI models) to generate complex UIs with a clean syntax.
 
-[Read the launch post](/blog/introducing-hyper/) for the backstory an FAQ
+[Read the launch post](/blog/standards-first-react-alternative/) for the backstory an FAQ
 
 [image.bordered]
-  large: /blog/introducing-hyper/img/hyper-banner-big.png
-  small: /blog/introducing-hyper/img/hyper-banner.png
+  large: /blog/standards-first-react-alternative/img/hyper-banner-big.png
+  small: /blog/standards-first-react-alternative/img/hyper-banner.png
   size: 598 × 237
 
 
@@ -59,7 +59,7 @@ The most significant change is the strict separation between components and CSS-
 
 For 3 and 4 Hyper currently issues a warning, but on the official releases there will be a configurable strict mode for production environments that throws an error.
 
-Read the [launch post](/blog/introducing-hyper/) for the complete rationale.
+Read the [launch post](/blog/standards-first-react-alternative/) for the complete rationale.
 
 
 
@@ -123,7 +123,7 @@ Render a compiled JavaScript on the browser
 ```
 
 ### Just-in-time (JIT) rendering
-Compiles the template directly on the browser befor rendering. Check `demo/table/simple-table.html` for a demo:
+Compiles the template directly on the browser before rendering. Check `demo/table/simple-table.html` for a demo:
 
 ```
 <script type="text/hyper">
@@ -391,8 +391,8 @@ Hyper extends standard HTML with expressions, loops, conditionals, and custom co
   Import statements are not working on server side in developer preview.
 
 
-### Passtrough JavaScript
-Scripts with `type` or `src` attributes are passed direclty to the client
+### Passthrough JavaScript
+Scripts with `type` or `src` attributes are passed directly to the client
 
 ```
 <footer>
@@ -411,4 +411,3 @@ Pass arguments to CSS components without inline styling:
 <!-- renders as style="--gap: 3px" -->
 <div --gap="3px">...</div>
 ```
-