Skip to content

Commit c4ed07f

Browse files
committed
New front page skeleton
1 parent 8b9f036 commit c4ed07f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1233
-145
lines changed

packages/nuedom/src/dom/node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function createNode(ast, data={}, opts={}, parent) {
8282
if (parent && ast.is_child) setAttributes(tag, parent.ast, parent.self)
8383

8484
const am = tag.classList.length
85-
if (am > (opts.max_class_names || 3)) {
85+
if (am > (opts.max_class_names || 5)) {
8686
console.error(`Too many class names (${am}) for ${tag.tagName} tag`)
8787
}
8888

packages/nuekit/client/hmr.js

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11

22

3-
const server = new WebSocket(`ws://${location.host}`)
3+
function createConnection() {
4+
const server = new WebSocket(`ws://${location.host}`)
5+
6+
server.onmessage = async function(e) {
7+
const asset = JSON.parse(e.data)
8+
9+
return (asset.is_yaml || asset.is_js || asset.is_ts) ? location.reload()
10+
: asset.error ? await handleError(asset)
11+
: asset.is_md ? await reloadContent(asset)
12+
: asset.is_html ? await reloadHTML(asset)
13+
: asset.is_svg ? reloadVisual(asset)
14+
: asset.is_css ? reloadCSS(asset)
15+
: null
16+
}
417

5-
let reload_count = 0
18+
// reconnect after 1 second
19+
server.onclose = function() {
20+
console.log('HMR reconnecting...')
21+
setTimeout(createConnection, 3000)
22+
}
623

7-
/*
8-
// asset properties
9-
{
10-
dir: '', base: 'index.md', ext: '.md', name: 'index', path: 'index.md', type: 'md',
11-
rootpath: 'index.md', url: '/', is_md: true,
12-
lib: [ast, ast, ...],
13-
content: '...',
24+
server.onerror = function() {
25+
server.close()
1426
}
15-
*/
16-
17-
server.onmessage = async function(e) {
18-
const asset = JSON.parse(e.data)
19-
console.log(asset)
20-
21-
return asset.error ? await handleError(asset)
22-
: asset.is_md ? await reloadContent(asset)
23-
: asset.is_html ? await reloadHTML(asset)
24-
: asset.is_svg ? reloadVisual(asset)
25-
: asset.is_css ? reloadCSS(asset)
26-
: asset.is_yaml ? location.reload()
27-
: null
2827
}
2928

29+
createConnection()
30+
31+
3032
async function handleError(asset) {
3133
const { showError } = await import('./error.js')
3234
const { error, path } = asset
@@ -36,7 +38,6 @@ async function handleError(asset) {
3638
async function reloadContent(asset) {
3739
const { url } = asset
3840

39-
4041
if (url != location.pathname) return location.href = url
4142

4243
// domdiff
@@ -61,6 +62,8 @@ async function reloadContent(asset) {
6162
}
6263

6364

65+
let reload_count = 0
66+
6467
function reloadVisual(asset) {
6568

6669
// HMR mode

packages/nuekit/client/transitions.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export async function loadPage(path) {
3030
// update page content - keep the working logic
3131
const ignoreMain = updateContent($('main'), $('main', dom))
3232
updateContent($('body'), $('body', dom), ignoreMain)
33+
34+
3335
dispatchRouteEvents()
3436
setActive(path)
3537
}
@@ -174,6 +176,8 @@ function haveSameChildren(a, b) {
174176
export function updateContent(current, incoming, ignoreMain) {
175177
if (!current || !incoming) return true
176178

179+
current.className = incoming.className
180+
177181
if (haveSameChildren(current, incoming)) {
178182
Array.from(current.children).forEach((el, i) => {
179183
if (!(ignoreMain && el.tagName == 'MAIN')) {

packages/nuekit/src/cmd/create.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export async function create(name, { dir, baseurl }) {
3737
export async function getLocalZip(name, dir) {
3838
const path = join(dir, `${name}.zip`)
3939
if (!await Bun.file(path).exists()) throw new Error(`${path} not found`)
40-
console.log(`📦 Loading local template: ${path}`)
40+
console.log(`📦 Using local template: ${path}`)
4141
return Bun.file(path)
4242
}
4343

packages/nuestate/src/state.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const api = {
5353
},
5454

5555
init() {
56-
this.set(getURLData(location), true)
56+
fire(getURLData(location))
5757
},
5858

5959
clear() {
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
tooling:
3+
- title: Nuekit
4+
desc: Standards first web framework
5+
info: Full-stack web framework based on modern HTML, CSS, and JavaScript
6+
7+
- title: Nuedom
8+
desc: HTML first UI markup
9+
info: Build reactive components with semantic HTML instead of virtual DOM abstractions
10+
11+
- title: Nuestate
12+
desc: URL first state management
13+
info: Incredibly simple state management based on native pushState and modern web storage
14+
15+
- title: Nuemark
16+
desc: Content first web development
17+
info: Build rich, interactive sites focusing purely on content
18+
19+
- title: Nueserver
20+
desc: Edge-first server development
21+
info: Write server code that works identically locally and on CloudFlare Workers
22+
23+
- title: Nueglow
24+
desc: CSS first syntax highlighting
25+
info: Semantic, design system compatible syntax blocks. Style with CSS, not class names
26+
27+
28+
features:
29+
Dev server:
30+
- Direct serving
31+
- Universal HMR
32+
- SPA development
33+
- SVG development
34+
- Instant startup
35+
- Zero config
36+
37+
Backend layer:
38+
- CloudFlare compatibiliity
39+
- SQLite/D1 databases
40+
- KV storage
41+
- API routing
42+
- Environment mocking
43+
- Testing framework
44+
45+
Static site generator:
46+
- Extended Markdown
47+
- Layout module system
48+
- Dynamic islands
49+
- View transitions
50+
- Content collections
51+
- RSS feeds & sitemaps
52+
53+
Production builds:
54+
- TypeScript transpiling
55+
- CSS inlining
56+
- JS/CSS minification
57+
- SPA optimization
58+
- Full-stack preview
59+
- Extreme performance
60+
61+
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
# Basic rules
3+
4+
- **Native HTML for 90% of things** custom components (with class names) for missing elements in the HTML spec.
5+
6+
- **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.
7+
8+
- **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.
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
@layer base, component, modifier;
3+
4+
@layer base {
5+
6+
:root {
7+
8+
/* base colors */
9+
--base-200: #E2E8F0;
10+
--base-400: #94A3B8;
11+
--base-600: #475569;
12+
--base-800: #1E293B;
13+
14+
/* bauhaus colors */
15+
--accent: #0085ff;
16+
17+
/* link colors */
18+
--link: #00e;
19+
--visited: #551a8b;
20+
21+
/* radius */
22+
--radius-s: 2px;
23+
--radius-m: 3px;
24+
25+
/* typographic grid */
26+
--s: .5rem;
27+
--m: 1.5rem;
28+
--l: 3rem;
29+
--xl: 4.5rem;
30+
--max-line-width: 45rem;
31+
32+
/* apps and UI elements */
33+
--ui-sizing: 14.5px;
34+
}
35+
}
36+
37+
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
/* Content elements (headings, paragraphs, lists, images, blockquotes, ...) */
3+
4+
@layer base {
5+
*, *:before, *:after {
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
line-height: 1.5;
11+
color: var(--base-800);
12+
font-family: helvetica neue, system-ui;
13+
}
14+
15+
img {
16+
max-width: 100%;
17+
height: auto;
18+
}
19+
20+
h1, h2, h3, h4 {
21+
margin-block: 0.5em;
22+
text-wrap: balance;
23+
line-height: 1.25;
24+
+ p { margin-top: 0 }
25+
}
26+
27+
ol, ul, table {
28+
margin-block: var(--m)
29+
}
30+
31+
a {
32+
color: var(--link);
33+
&:visited { color: var(--visited); }
34+
&[name] { color: inherit }
35+
&:target { background-color: #fff3cd }
36+
}
37+
38+
strong { color: var(--base-800) }
39+
40+
41+
p, li, td {
42+
color: var(--base-600);
43+
text-wrap: pretty;
44+
45+
code {
46+
background-color: var(--base-200);
47+
font-family: courier, monospace;
48+
padding: .125em .25em;
49+
font-size: .875em;
50+
}
51+
}
52+
53+
ol, ul { padding-left: 1em }
54+
55+
li { padding-left: .5em }
56+
57+
hr {
58+
border: 1px solid var(--base-200);
59+
margin-block: var(--l);
60+
border-width: 1px 0 0;
61+
}
62+
63+
blockquote {
64+
font-weight: bold;
65+
margin: var(--l) 0;
66+
}
67+
68+
small, figcaption {
69+
font-weight: 400;
70+
font-size: .875em;
71+
color: var(--base-600);
72+
}
73+
74+
dl {
75+
display: grid;
76+
grid-template-columns:25% 1fr;
77+
> * { margin: .25em 0 }
78+
dt { font-weight: 500 }
79+
p:first-child { margin-top: 0 }
80+
}
81+
82+
time {
83+
white-space: nowrap
84+
}
85+
}
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
/* For content heavy documents only (excluded from single-page-apps) */
3+
4+
@layer base {
5+
6+
article {
7+
flex-direction: column;
8+
display: flex;
9+
gap: var(--xl); /* section gaps */
10+
}
11+
12+
h1, h2, h3, p, li {
13+
max-width: var(--max-line-width)
14+
}
15+
16+
h1 {
17+
font-size: 2.25em;
18+
& + p, & + time + p {
19+
font-size: 1.125em;
20+
text-wrap: balance;
21+
}
22+
}
23+
24+
section > :is(h3, h4) {
25+
margin-top: var(--l)
26+
}
27+
}
28+
29+
@layer component {
30+
31+
/* place things in a row */
32+
.blocks {
33+
align-items: center;
34+
flex-direction: row;
35+
display: flex;
36+
gap: var(--m);
37+
}
38+
39+
/* columns */
40+
@media (width > 900px) {
41+
.columns {
42+
column-count: var(--column-count, 2);
43+
margin-block: var(--l);
44+
column-gap: var(--xl);
45+
div { break-inside: avoid }
46+
47+
> :first-child {
48+
&, h2, h3 {
49+
margin-top: 0
50+
}
51+
}
52+
}
53+
}
54+
55+
/* note */
56+
.note {
57+
background-color: var(--base-200);
58+
max-width: var(--max-line-width);
59+
margin-block: var(--m);
60+
padding: 1em;
61+
p { margin: 0 }
62+
}
63+
64+
}

0 commit comments

Comments
 (0)