Merge pull request #399 from nuejs/dev

Nue 1.0 (Release Candidate)

.gitignore

@@ -7,3 +7,4 @@ dist
 .vscode
 _test
 coverage
+performance.js

packages/examples/simple-blog/@global/layout.css

@@ -43,17 +43,18 @@ body {
   /* global footer */
   > footer {
     border-top: 1px solid var(--gray-200);
-    justify-content: space-between;
-    margin-top: 6rem;
-    padding: 1rem 0;
-    display: flex;
+    margin-top: 8rem;
 
-    /* social icons */
-    > :last-child {
+    nav {
+      padding: 1rem 0;
       display: flex;
       gap: .5em;
-      a:hover {
-        transform: scale(1.1)
+
+      a { opacity: .8 }
+      a:hover { opacity: 1 }
+
+      a:nth-child(2) {
+        margin-left: auto;
       }
     }
   }

packages/examples/simple-blog/@global/layout.html

@@ -0,0 +1,7 @@
+<header>
+  <navi :items="navigation.header"/>
+</header>
+
+<footer>
+  <navi :items="navigation.footer"/>
+</footer>

packages/examples/simple-blog/blog/color-strategies.md

@@ -8,12 +8,12 @@ date: 2024-05-23
 
 Working with color is one of the most fun parts of web design. But if you don't use them right in your CSS code, colors can also tank a site's usability and accessibility. In this post, we'll explore simple, real-world tips for effectively using color in your stylesheets.
 
- 
+
 ``` css .blue
 /* Tab styling */
 [role=tablist] {
   background: rgba(0, 0, 0, .7);
-  background-size: 3.5em;
+  background-size: 3.8em;
 > padding: .7em 1.3em 0;
 > overflow: hidden;
 > display: flex;
@@ -40,9 +40,8 @@ Choosing the right colors for a website can be tricky. Get one wrong and your en
 
 - **Consider tone and contrast** - Include light, medium and dark tones for visual interest. Test contrast for accessibility.
 
-
 [image img/colors-1.png]
-  foo: bar
+
 
 Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you need opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable.
 

packages/examples/simple-blog/blog/hero.html

@@ -1,4 +1,3 @@
-
 <header @name="pagehead">
   <h1>{ title }</h1>
   <p>

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

@@ -18,21 +18,21 @@ Design systems are key to managing code at scale, but creating one that’s flex
 ## Keep things minimal
 It's important to keep things lightweight: Write CSS that’s DRY, separating structure from skin using methodologies like BEM. Don't over-engineer - keep logic simple.
 
-[code numbered="true"]
-  <figure @name="img" :class="class" :id="id">
-    <img loading="lazy" :alt="alt" :src="_ || src">
+``` html numbered
+<figure @name="img" :class="class" :id="id">
+  <img loading="lazy" :alt="alt" :src="_ || src">
 
-  - <figcaption :if="caption">{{ caption }}</figcaption>
+-  <figcaption :if="caption">{{ caption }}</figcaption>
 
-  + <p :if="caption">{{ caption }}</p>
-
-    <script>
-      •constructor(data)• {
-        this.caption = data.caption || ''
-      }
-    </script>
-  </figure>
++  <p :if="caption">{{ caption }}</p>
 
+  <script>
+    •constructor(data)• {
+      this.caption = data.caption || ''
+    }
+  </script>
+</figure>
+```
 
 Use gradual rollouts: Introduce changes incrementally over time. Don't rebuild everything at once. Maintain backwards compatibility.
 

packages/examples/simple-blog/index.md

@@ -1,4 +1,3 @@
-
 ---
 include: [ gallery, motion ]
 content_collection: blog
@@ -8,4 +7,4 @@ content_collection: blog
 I’m Emma Bennett, an user experience developer from Berlin. I build websites that are exceptionally well designed — inside, and outside.
 
 
-[gallery]
+[page-list]

packages/examples/simple-blog/site.yaml

@@ -5,6 +5,7 @@ libs: ["@library"]
 view_transitions: true
 native_css_nesting: true
 inline_css: true
+sections: true
 
 title_template: "Emma Bennet / %s"
 og_image: /img/og_emma.png
@@ -17,23 +18,22 @@ port: 8083
 origin: https://simple-blog.nuejs.org
 og: /img/og.jpg
 
-header:
-  navigation:
+
+navigation:
+  header:
     - Emma Bennet: /
     - Contact: /contact/
 
-footer:
-  copyright:
+  footer:
     - © Emma Bennet: /
 
-  social:
     - image: /img/twitter.svg
       url: //x.com/tipiirai
       alt: Twitter (X) profile
       size: 22 x 22
 
     - image: /img/github.svg
-      url: //github.com/nuejs/
+      url: //github.com/nuejs/nue/
       alt: Github Projects
       size: 22 x 22
 

packages/glow/README.md

@@ -67,4 +67,3 @@ const content = '...'
 
 const html = marked.parse(content)
 ```
-

packages/glow/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nue-glow",
-  "version": "0.2.1",
-  "description": "Tiny and powerful Markdown syntax highlighter",
-  "homepage": "https://nuejs.org/blog/introducing-glow",
+  "version": "0.2.2",
+  "description": "Markdown syntax highlighter for CSS developers",
+  "homepage": "https://nuejs.org/blog/introducing-glow/",
   "license": "MIT",
   "type": "module",
   "main": "index.js",
@@ -19,7 +19,7 @@
     "test": "node --experimental-vm-modules ../../node_modules/jest/bin/jest.js --runInBand"
   },
   "devDependencies": {
-    "lightningcss": "^1.26.0"
+    "lightningcss": "^1.27.0"
   },
   "jest": {
     "setupFilesAfterEnv": [

packages/glow/src/glow.js

@@ -1,5 +1,5 @@
 
-const MIXED_HTML = ['html', 'jsx', 'php', 'astro', 'nue', 'vue', 'svelte', 'hb']
+const MIXED_HTML = ['html', 'jsx', 'php', 'astro', 'dhtml', 'vue', 'svelte', 'hb']
 const LINE_COMMENT = { clojure: ';;', lua: '--', python: '#' }
 const PREFIXES = { '+': 'ins', '-': 'del', '>': 'dfn' }
 const MARK = /(••?)([^•]+)\1/g   // ALT + q
@@ -186,7 +186,7 @@ function renderString(str) {
 
 
 // exported for testing purposes
-export function renderRow(row, lang) {
+export function renderRow(row, lang, mark=true) {
   if (!row) return ''
 
   const els = parseRow(row, lang)
@@ -211,8 +211,9 @@ export function renderRow(row, lang) {
   }
 
   ret.push(row.substring(index))
+  const res = ret.join('')
 
-  return ret.join('').replace(MARK, (_, a, b, c) => {
+  return !mark ? res : res.replace(MARK, (_, a, b, c) => {
     return elem(a[1] ? 'u' : 'mark', b)
   })
 }
@@ -221,19 +222,19 @@ export function renderRow(row, lang) {
 // comment start & end
 const COMMENT = [/(\/\*|^ *{# |<!--|'''|=begin)/, /(\*\/|#}|-->|'''|=end)$/]
 
-export function parseSyntax(str, lang) {
+export function parseSyntax(lines, lang, prefix = true) {
   const [comm_start, comm_end] = COMMENT
-  const lines = []
+  const html = []
 
   // multi-line comment
   let comment
 
   function endComment() {
-    lines.push({ comment })
+    html.push({ comment })
     comment = null
   }
 
-  str.split(/\r\n|\r|\n/).forEach((line, i) => {
+  lines.forEach((line, i) => {
     if (!comment) {
       if (comm_start.test(line)) {
         comment = [line]
@@ -242,13 +243,13 @@ export function parseSyntax(str, lang) {
 
         // highlighted line
         const c = line[0]
-        const wrap = isMD(lang) ? (c == '|' && 'dfn') : PREFIXES[c]
+        const wrap = prefix && (isMD(lang) ? (c == '|' && 'dfn') : PREFIXES[c])
         if (wrap) line = (line[1] == ' ' ? ' ' : '') + line.slice(1)
 
         // escape character
-        if (c == '\\') line = line.slice(1)
+        if (!prefix && c == '\\') line = line.slice(1)
 
-        lines.push({ line, wrap })
+        html.push({ line, wrap })
       }
 
     } else {
@@ -258,37 +259,40 @@ export function parseSyntax(str, lang) {
   })
 
 
-  return lines
+  return html
 }
 
 
 // code, { language: 'js', numbered: true }
-export function glow(str, opts = {}) {
+export function glow(str, opts = { prefix: true, mark: true }) {
   if (typeof opts == 'string') opts = { language: opts }
+  const lines = Array.isArray(str) ? str : str.trim().split(/\r\n|\r|\n/)
+
+  if (!lines[0]) return ''
 
   // language
   let lang = opts.language
-  if (!lang && str.trim()[0] == '<') lang = 'html'
-  const lines = []
+  if (!lang && lines[0][0] == '<') lang = 'html'
+  const html = []
 
   function push(line) {
-    lines.push(opts.numbered ? elem('span', line) : line)
+    html.push(opts.numbered ? elem('span', line) : line)
   }
 
-  parseSyntax(str.trim(), lang).forEach(function(block) {
+  parseSyntax(lines, lang, opts.prefix).forEach(function(block) {
     let { line, comment, wrap } = block
 
     // EOL comment
     if (comment) {
       return comment.forEach(el => push(elem('sup', encode(el))))
 
     } else {
-      line = renderRow(line, lang)
+      line = renderRow(line, lang, opts.mark)
     }
 
     if (wrap) line = elem(wrap, line)
     push(line)
   })
 
-  return `<code language="${lang || '*'}">${lines.join(NL)}</code>`
+  return `<code language="${lang || '*'}">${html.join(NL)}</code>`
 }

packages/glow/test/glow.test.js

@@ -27,28 +27,34 @@ test('Emphasis', () => {
 
 
 /* multiline comments */
-const HTML_COMMENT = `
-<div>
-  <!--
-    First
-    Second
-  -->
-</div>`
-
-const JS_COMMENT = `
-/* First */
-function() {
-  /*
-    Second
-  */
-}
-`
-
-test('extract comments', () => {
-  let blocks = parseSyntax(HTML_COMMENT.trim())
-  expect(blocks[1].comment[0]).toBe('  <!--')
-
-  blocks = parseSyntax(JS_COMMENT.trim())
+test('parse HTML comment', () => {
+  const blocks = parseSyntax(['<div>', '<!--', 'comment', '-->', '</div>'])
+  expect(blocks[1].comment[0]).toBe('<!--')
+})
+
+
+test('parse JS comment', () => {
+  const blocks = parseSyntax(['/* First */', 'function() {', '/*', 'Second', '*/'])
   expect(blocks[0].comment).toEqual(['/* First */'])
-  expect(blocks[2].comment[0]).toEqual('  /*')
+  expect(blocks[2].comment[0]).toEqual('/*')
+})
+
+
+/* prefix and mark */
+test('disable mark', () => {
+  const html = renderRow('Hey •[img]• girl', undefined, false)
+  expect(html).toInclude('Hey •')
+  expect(html).toInclude('• girl')
+})
+
+test('disable prefixes', () => {
+  const blocks = parseSyntax([
+    '+ not really adding a line',
+    '- not really removing a line',
+    '> not really marking a line'
+  ], undefined, false)
+
+  expect(blocks[0].wrap).toEqual(false)
+  expect(blocks[1].wrap).toEqual(false)
+  expect(blocks[2].wrap).toEqual(false)
 })

packages/nuejs.org/.gitignore

@@ -1,2 +1,2 @@
 .dist
-@lib/ping.js
+@lib/ping.js