New front page skeleton

Author: tipiirai

packages/nuedom/src/dom/node.js

@@ -82,7 +82,7 @@ export function createNode(ast, data={}, opts={}, parent) {
     if (parent && ast.is_child) setAttributes(tag, parent.ast, parent.self)
 
     const am = tag.classList.length
-    if (am > (opts.max_class_names || 3)) {
+    if (am > (opts.max_class_names || 5)) {
       console.error(`Too many class names (${am}) for ${tag.tagName} tag`)
     }
 

packages/nuekit/client/hmr.js

@@ -1,32 +1,34 @@
 
 
-const server = new WebSocket(`ws://${location.host}`)
+function createConnection() {
+  const server = new WebSocket(`ws://${location.host}`)
+
+  server.onmessage = async function(e) {
+    const asset = JSON.parse(e.data)
+
+    return (asset.is_yaml || asset.is_js || asset.is_ts) ? location.reload()
+      : asset.error ? await handleError(asset)
+      : asset.is_md ? await reloadContent(asset)
+      : asset.is_html ? await reloadHTML(asset)
+      : asset.is_svg ? reloadVisual(asset)
+      : asset.is_css ? reloadCSS(asset)
+      : null
+  }
 
-let reload_count = 0
+  // reconnect after 1 second
+  server.onclose = function() {
+    console.log('HMR reconnecting...')
+    setTimeout(createConnection, 3000)
+  }
 
-/*
-  // asset properties
-  {
-    dir: '', base: 'index.md', ext: '.md', name: 'index', path: 'index.md', type: 'md',
-    rootpath: 'index.md', url: '/', is_md: true,
-    lib: [ast, ast, ...],
-    content: '...',
+  server.onerror = function() {
+    server.close()
   }
-*/
-
-server.onmessage = async function(e) {
-  const asset = JSON.parse(e.data)
-  console.log(asset)
-
-  return asset.error ? await handleError(asset)
-    : asset.is_md ? await reloadContent(asset)
-    : asset.is_html ? await reloadHTML(asset)
-    : asset.is_svg ? reloadVisual(asset)
-    : asset.is_css ? reloadCSS(asset)
-    : asset.is_yaml ? location.reload()
-    : null
 }
 
+createConnection()
+
+
 async function handleError(asset) {
   const { showError } = await import('./error.js')
   const { error, path } = asset
@@ -36,7 +38,6 @@ async function handleError(asset) {
 async function reloadContent(asset) {
   const { url } = asset
 
-
   if (url != location.pathname) return location.href = url
 
   // domdiff
@@ -61,6 +62,8 @@ async function reloadContent(asset) {
 }
 
 
+let reload_count = 0
+
 function reloadVisual(asset) {
 
   // HMR mode

packages/nuekit/client/transitions.js

@@ -30,6 +30,8 @@ export async function loadPage(path) {
   // update page content - keep the working logic
   const ignoreMain = updateContent($('main'), $('main', dom))
   updateContent($('body'), $('body', dom), ignoreMain)
+
+
   dispatchRouteEvents()
   setActive(path)
 }
@@ -174,6 +176,8 @@ function haveSameChildren(a, b) {
 export function updateContent(current, incoming, ignoreMain) {
   if (!current || !incoming) return true
 
+  current.className = incoming.className
+
   if (haveSameChildren(current, incoming)) {
     Array.from(current.children).forEach((el, i) => {
       if (!(ignoreMain && el.tagName == 'MAIN')) {

packages/nuekit/src/cmd/create.js

@@ -37,7 +37,7 @@ export async function create(name, { dir, baseurl }) {
 export async function getLocalZip(name, dir) {
   const path = join(dir, `${name}.zip`)
   if (!await Bun.file(path).exists()) throw new Error(`${path} not found`)
-  console.log(`📦 Loading local template: ${path}`)
+  console.log(`📦 Using local template: ${path}`)
   return Bun.file(path)
 }
 

packages/nuestate/src/state.js

@@ -53,7 +53,7 @@ export const api = {
   },
 
   init() {
-    this.set(getURLData(location), true)
+    fire(getURLData(location))
   },
 
   clear() {

packages/www/@system/data/features.yaml

@@ -0,0 +1,61 @@
+
+tooling:
+  - title: Nuekit
+    desc: Standards first web framework
+    info: Full-stack web framework based on modern HTML, CSS, and JavaScript
+
+  - title: Nuedom
+    desc: HTML first UI markup
+    info: Build reactive components with semantic HTML instead of virtual DOM abstractions
+
+  - title: Nuestate
+    desc: URL first state management
+    info: Incredibly simple state management based on native pushState and modern web storage
+
+  - title: Nuemark
+    desc: Content first web development
+    info: Build rich, interactive sites focusing purely on content
+
+  - title: Nueserver
+    desc: Edge-first server development
+    info: Write server code that works identically locally and on CloudFlare Workers
+
+  - title: Nueglow
+    desc: CSS first syntax highlighting
+    info: Semantic, design system compatible syntax blocks. Style with CSS, not class names
+
+
+features:
+  Dev server:
+    - Direct serving
+    - Universal HMR
+    - SPA development
+    - SVG development
+    - Instant startup
+    - Zero config
+
+  Backend layer:
+    - CloudFlare compatibiliity
+    - SQLite/D1 databases
+    - KV storage
+    - API routing
+    - Environment mocking
+    - Testing framework
+
+  Static site generator:
+    - Extended Markdown
+    - Layout module system
+    - Dynamic islands
+    - View transitions
+    - Content collections
+    - RSS feeds & sitemaps
+
+  Production builds:
+    - TypeScript transpiling
+    - CSS inlining
+    - JS/CSS minification
+    - SPA optimization
+    - Full-stack preview
+    - Extreme performance
+
+

packages/www/@system/design/README.md

@@ -0,0 +1,8 @@
+
+# Basic rules
+
+- **Native HTML for 90% of things** custom components (with class names) for missing elements in the HTML spec.
+
+- **Page structure (rems)**. Page margins, section gaps, grid spacing, major layout breaks. These relate to the overall document scale and should respond to user font size preferences consistently.
+
+- **Elements/components (ems)**. Button padding, input margins, card spacing, typography margins. These relate to the element's own content and should scale with that specific text size.

packages/www/@system/design/base.css

@@ -0,0 +1,37 @@
+
+@layer base, component, modifier;
+
+@layer base {
+
+  :root {
+
+    /* base colors */
+    --base-200: #E2E8F0;
+    --base-400: #94A3B8;
+    --base-600: #475569;
+    --base-800: #1E293B;
+
+    /* bauhaus colors  */
+    --accent: #0085ff;
+
+    /* link colors */
+    --link: #00e;
+    --visited: #551a8b;
+
+    /* radius */
+    --radius-s: 2px;
+    --radius-m: 3px;
+
+    /* typographic grid */
+    --s: .5rem;
+    --m: 1.5rem;
+    --l: 3rem;
+    --xl: 4.5rem;
+    --max-line-width: 45rem;
+
+    /* apps and UI elements */
+    --ui-sizing: 14.5px;
+  }
+}
+
+

packages/www/@system/design/content.css

@@ -0,0 +1,85 @@
+
+/* Content elements (headings, paragraphs, lists, images, blockquotes, ...) */
+
+@layer base {
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  body {
+    line-height: 1.5;
+    color: var(--base-800);
+    font-family: helvetica neue, system-ui;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  h1, h2, h3, h4 {
+    margin-block: 0.5em;
+    text-wrap: balance;
+    line-height: 1.25;
+    + p { margin-top: 0 }
+  }
+
+  ol, ul, table {
+    margin-block: var(--m)
+  }
+
+  a {
+    color: var(--link);
+    &:visited { color: var(--visited); }
+    &[name] { color: inherit }
+    &:target { background-color: #fff3cd }
+  }
+
+  strong { color: var(--base-800) }
+
+
+  p, li, td {
+    color: var(--base-600);
+    text-wrap: pretty;
+
+    code {
+      background-color: var(--base-200);
+      font-family: courier, monospace;
+      padding: .125em .25em;
+      font-size: .875em;
+    }
+  }
+
+  ol, ul { padding-left: 1em }
+
+  li { padding-left: .5em }
+
+  hr {
+    border: 1px solid var(--base-200);
+    margin-block: var(--l);
+    border-width: 1px 0 0;
+  }
+
+  blockquote {
+    font-weight: bold;
+    margin: var(--l) 0;
+  }
+
+  small, figcaption {
+    font-weight: 400;
+    font-size: .875em;
+    color: var(--base-600);
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns:25% 1fr;
+    > * { margin: .25em 0 }
+    dt { font-weight: 500 }
+    p:first-child { margin-top: 0 }
+  }
+
+  time {
+    white-space: nowrap
+  }
+}

packages/www/@system/design/document.css

@@ -0,0 +1,64 @@
+
+/* For content heavy documents only (excluded from single-page-apps) */
+
+@layer base {
+
+  article {
+    flex-direction: column;
+    display: flex;
+    gap: var(--xl); /* section gaps */
+  }
+
+  h1, h2, h3, p, li {
+    max-width: var(--max-line-width)
+  }
+
+  h1 {
+    font-size: 2.25em;
+    & + p, & + time + p {
+      font-size: 1.125em;
+      text-wrap: balance;
+    }
+  }
+
+  section > :is(h3, h4) {
+    margin-top: var(--l)
+  }
+}
+
+@layer component {
+
+  /* place things in a row  */
+  .blocks {
+    align-items: center;
+    flex-direction: row;
+    display: flex;
+    gap: var(--m);
+  }
+
+  /* columns  */
+  @media (width > 900px) {
+    .columns {
+      column-count: var(--column-count, 2);
+      margin-block: var(--l);
+      column-gap: var(--xl);
+      div { break-inside: avoid }
+
+      > :first-child {
+        &, h2, h3 {
+          margin-top: 0
+        }
+      }
+    }
+  }
+
+  /* note  */
+  .note {
+    background-color: var(--base-200);
+    max-width: var(--max-line-width);
+    margin-block: var(--m);
+    padding: 1em;
+    p { margin: 0 }
+  }
+
+}