diff --git a/packages/hyper/package.json b/packages/hyper/package.json
index 66369fb7c..6e7fa560c 100644
--- a/packages/hyper/package.json
+++ b/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",
diff --git a/packages/nuejs.org/@global/global.css b/packages/nuejs.org/@global/global.css
index cc0d0ef9f..879e3f224 100644
--- a/packages/nuejs.org/@global/global.css
+++ b/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 }
}
diff --git a/packages/nuejs.org/@global/navigation.css b/packages/nuejs.org/@global/navigation.css
index 2df743f4f..59d86e4a6 100644
--- a/packages/nuejs.org/@global/navigation.css
+++ b/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;
}
diff --git a/packages/nuejs.org/@global/navigation.yaml b/packages/nuejs.org/@global/navigation.yaml
index 6c54d7ddc..bd49ec918 100644
--- a/packages/nuejs.org/@global/navigation.yaml
+++ b/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:
diff --git a/packages/nuejs.org/@global/popover.css b/packages/nuejs.org/@global/popover.css
index 6ee703b8b..f2bf4c2da 100644
--- a/packages/nuejs.org/@global/popover.css
+++ b/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 }
diff --git a/packages/nuejs.org/@global/variables.css b/packages/nuejs.org/@global/variables.css
index 3a8146f5f..3ced1a7e8 100644
--- a/packages/nuejs.org/@global/variables.css
+++ b/packages/nuejs.org/@global/variables.css
@@ -43,7 +43,7 @@
}
-@media (max-width: 600px) {
+@media (width <= 600px) {
:root { --body-padding: 1.2em; }
}
diff --git a/packages/nuejs.org/@lib/form.htm b/packages/nuejs.org/@lib/form.dhtml
similarity index 100%
rename from packages/nuejs.org/@lib/form.htm
rename to packages/nuejs.org/@lib/form.dhtml
diff --git a/packages/nuejs.org/@lib/syntax-extras.css b/packages/nuejs.org/@lib/syntax-extras.css
index b5d93b1aa..0455156b7 100644
--- a/packages/nuejs.org/@lib/syntax-extras.css
+++ b/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;
}
}
diff --git a/packages/nuejs.org/@lib/technical-content.css b/packages/nuejs.org/@lib/technical-content.css
index 81082564b..8e011e7d3 100644
--- a/packages/nuejs.org/@lib/technical-content.css
+++ b/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;
}
diff --git a/packages/nuejs.org/blog/blog.css b/packages/nuejs.org/blog/blog.css
index c23a3d597..b4fe8853b 100644
--- a/packages/nuejs.org/blog/blog.css
+++ b/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% }
diff --git a/packages/nuejs.org/blog/introducing-glow/pair-coding-demo.css b/packages/nuejs.org/blog/introducing-glow/pair-coding-demo.css
index 656aab5b4..6eeea4f8c 100644
--- a/packages/nuejs.org/blog/introducing-glow/pair-coding-demo.css
+++ b/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; }
diff --git a/packages/nuejs.org/blog/lib/blog-index.css b/packages/nuejs.org/blog/lib/blog-index.css
index 25c15c5c4..4811621e3 100644
--- a/packages/nuejs.org/blog/lib/blog-index.css
+++ b/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;
diff --git a/packages/nuejs.org/blog/introducing-hyper/complex-table.md b/packages/nuejs.org/blog/standards-first-react-alternative/complex-table.md
similarity index 99%
rename from packages/nuejs.org/blog/introducing-hyper/complex-table.md
rename to packages/nuejs.org/blog/standards-first-react-alternative/complex-table.md
index 175940527..42fcb1e20 100644
--- a/packages/nuejs.org/blog/introducing-hyper/complex-table.md
+++ b/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
```
-
-
-
-
-
-
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/branding-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/branding-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/branding-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/branding-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/branding.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/branding.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/branding.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/branding.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/complex-table-1.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-1.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/complex-table-1.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-1.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/complex-table-2.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-2.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/complex-table-2.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-2.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/complex-table-3.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-3.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/complex-table-3.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/complex-table-3.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-dark-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-dark-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-dark-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-dark-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-dark.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-dark.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/hyper-banner-dark.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner-dark.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/hyper-banner.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/hyper-banner.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-banner.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/hyper-og.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-og.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/hyper-og.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/hyper-og.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/minimalist-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/minimalist-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/minimalist-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/minimalist-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/minimalist.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/minimalist.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/minimalist.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/minimalist.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/ramsian-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/ramsian-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/ramsian-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/ramsian-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/ramsian.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/ramsian.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/ramsian.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/ramsian.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/shadcn-typo-big.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/shadcn-typo-big.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/shadcn-typo-big.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/shadcn-typo-big.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/shadcn-typo.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/shadcn-typo.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/shadcn-typo.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/shadcn-typo.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/simple-table-1.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-1.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/simple-table-1.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-1.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/simple-table-2.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-2.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/simple-table-2.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-2.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/img/simple-table-3.png b/packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-3.png
similarity index 100%
rename from packages/nuejs.org/blog/introducing-hyper/img/simple-table-3.png
rename to packages/nuejs.org/blog/standards-first-react-alternative/img/simple-table-3.png
diff --git a/packages/nuejs.org/blog/introducing-hyper/index.md b/packages/nuejs.org/blog/standards-first-react-alternative/index.md
similarity index 99%
rename from packages/nuejs.org/blog/introducing-hyper/index.md
rename to packages/nuejs.org/blog/standards-first-react-alternative/index.md
index b443fcc5a..5cf238d2e 100644
--- a/packages/nuejs.org/blog/introducing-hyper/index.md
+++ b/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.
diff --git a/packages/nuejs.org/blog/introducing-hyper/simple-table.md b/packages/nuejs.org/blog/standards-first-react-alternative/simple-table.md
similarity index 98%
rename from packages/nuejs.org/blog/introducing-hyper/simple-table.md
rename to packages/nuejs.org/blog/standards-first-react-alternative/simple-table.md
index accbc0dbc..63cd818bc 100644
--- a/packages/nuejs.org/blog/introducing-hyper/simple-table.md
+++ b/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
---
diff --git a/packages/nuejs.org/blog/status-update-01/status-update.css b/packages/nuejs.org/blog/status-update-01/status-update.css
index ef327712a..351ced42a 100644
--- a/packages/nuejs.org/blog/status-update-01/status-update.css
+++ b/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
}
}
diff --git a/packages/nuejs.org/docs/content-focused-apps.md b/packages/nuejs.org/docs/content-focused-apps.md
index b7dd712dc..5323c847f 100644
--- a/packages/nuejs.org/docs/content-focused-apps.md
+++ b/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 `
\ No newline at end of file
+
diff --git a/packages/hyper/demo/table/builds/table.js b/packages/hyper/demo/table/builds/table.js
index aec0dc6d6..51f7742d3 100644
--- a/packages/hyper/demo/table/builds/table.js
+++ b/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' },
diff --git a/packages/hyper/demo/table/builds/table.min.js b/packages/hyper/demo/table/builds/table.min.js
index 2a9b8fdb0..ab1d20563 100644
--- a/packages/hyper/demo/table/builds/table.min.js
+++ b/packages/hyper/demo/table/builds/table.min.js
@@ -1 +1 @@
-var n=[{tag:"div",attr:[{name:"class",val:"card"}],script:function(){this.sort=function(t){this.by=this.by==t?this.by:t,this.dir=this.by==t?-this.dir||-1:1,this.users.sort((e,a)=>(e[t]>a[t]?1:-1)*this.dir)},this.filter=function(t){let e=t.target.value.trim().toLowerCase();this.subset=e?this.users.filter((a)=>a.name.toLowerCase().includes(e)):null}},children:[{tag:"header",children:[{tag:"h1",children:[{text:"Table example"}]},{tag:"p",children:[{text:"A more compex table with filtering and sortable columns"}]},{tag:"input",attr:[{name:"type",val:"search"},{name:"placeholder",val:"Filter by name..."}],handlers:[{name:"oninput",h_fn:(t,e)=>t.filter(e)}]}]},{tag:"table",children:[{tag:"tr",children:[{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("name")}],children:[{text:"Name"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("email")}],children:[{text:"Email"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("age")}],children:[{text:"Age"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("total")}],children:[{text:"Total"}]}]}]},{tag:"tr",for:{fn:(t)=>t.subset||t.users,keys:["user"],is_entries:!1},attr:[{name:"key",fn:(t)=>t.user.id}],children:[{tag:"td",children:[{fn:(t)=>t.user.name}]},{tag:"td",children:[{fn:(t)=>t.user.email}]},{tag:"td",children:[{fn:(t)=>t.user.age}]},{tag:"td",children:[{fn:(t)=>new Intl.NumberFormat("en-US").format(t.user.total)}]}]},{some:[{tag:"tr",if:"_.subset && !_.subset[0]",children:[{tag:"td",attr:[{name:"colspan",val:"4"}],children:[{text:"No results"}]}]}]},{tag:"caption",children:[{fn:(t)=>t.users.length},{text:" people in total"}]}]}]}];export{n as lib};
+var n=[{tag:"div",attr:[{name:"class",val:"card"}],script:function(){this.sort=function(t){this.by=this.by==t?this.by:t,this.dir=this.by==t?-this.dir||-1:1,this.users.sort((e,a)=>(e[t]>a[t]?1:-1)*this.dir)},this.filter=function(t){let e=t.target.value.trim().toLowerCase();this.subset=e?this.users.filter((a)=>a.name.toLowerCase().includes(e)):null}},children:[{tag:"header",children:[{tag:"h1",children:[{text:"Table example"}]},{tag:"p",children:[{text:"A more complex table with filtering and sortable columns"}]},{tag:"input",attr:[{name:"type",val:"search"},{name:"placeholder",val:"Filter by name..."}],handlers:[{name:"oninput",h_fn:(t,e)=>t.filter(e)}]}]},{tag:"table",children:[{tag:"tr",children:[{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("name")}],children:[{text:"Name"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("email")}],children:[{text:"Email"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("age")}],children:[{text:"Age"}]}]},{tag:"th",children:[{tag:"a",handlers:[{name:"onclick",h_fn:(t,e)=>t.sort("total")}],children:[{text:"Total"}]}]}]},{tag:"tr",for:{fn:(t)=>t.subset||t.users,keys:["user"],is_entries:!1},attr:[{name:"key",fn:(t)=>t.user.id}],children:[{tag:"td",children:[{fn:(t)=>t.user.name}]},{tag:"td",children:[{fn:(t)=>t.user.email}]},{tag:"td",children:[{fn:(t)=>t.user.age}]},{tag:"td",children:[{fn:(t)=>new Intl.NumberFormat("en-US").format(t.user.total)}]}]},{some:[{tag:"tr",if:"_.subset && !_.subset[0]",children:[{tag:"td",attr:[{name:"colspan",val:"4"}],children:[{text:"No results"}]}]}]},{tag:"caption",children:[{fn:(t)=>t.users.length},{text:" people in total"}]}]}]}];export{n as lib};
diff --git a/packages/hyper/demo/table/table-component.html b/packages/hyper/demo/table/table-component.html
index ae0f4f061..a7821bffd 100644
--- a/packages/hyper/demo/table/table-component.html
+++ b/packages/hyper/demo/table/table-component.html
@@ -4,7 +4,7 @@