Nuemark: ARIA- compatible tabs and codetabs

goblinfactory-forks · Feb 13, 2024 · 198eb28 · 198eb28
1 parent 5fd447b
commit 198eb28
Show file tree

Hide file tree

Showing 16 changed files with 903 additions and 322 deletions.
diff --git a/packages/glow/css/glow.css b/packages/glow/css/glow.css
@@ -67,7 +67,11 @@
     }
   }
 
+  /* error line number */
   span:has(u):before {
-    color: var(--glow-error-color, red);
+    background-color: var(--glow-error-color, red);
+    border-radius: .2em;
+    font-weight: bold;
+    color: white;
   }
 }
diff --git a/packages/glow/css/markers.css b/packages/glow/css/markers.css
@@ -40,6 +40,8 @@
   del {
     border-color: rgb(var(--glow-del-color));
     background-color: rgba(var(--glow-del-color), var(--glow-line-opacity));
+    border-radius: 0;
+
     &:before {
       content: '-';
       color: rgb(var(--glow-del-color));

diff --git a/packages/glow/minified/glow.css b/packages/glow/minified/glow.css
diff --git a/packages/glow/minified/glow.modern.css b/packages/glow/minified/glow.modern.css
diff --git a/packages/glow/minified/glow.nano.css b/packages/glow/minified/glow.nano.css
diff --git a/packages/glow/src/glow.js b/packages/glow/src/glow.js
@@ -181,7 +181,7 @@ export function renderRow(row, lang) {
 
 
 // comment start & end
-const COMMENT = [/(\/\*|^ *{#|<!--|'''|=begin)/, /(\*\/|#}|-->|'''|=end)$/]
+const COMMENT = [/(\/\*|^ *{# |<!--|'''|=begin)/, /(\*\/|#}|-->|'''|=end)$/]
 
 export function parseSyntax(str, lang) {
   const [comm_start, comm_end] = COMMENT

diff --git a/packages/glow/test/block.test.js b/packages/glow/test/block.test.js
diff --git a/packages/glow/test/generate.js b/packages/glow/test/generate.js
@@ -630,7 +630,9 @@ INNER JOIN payment_status p ON o.status_id = p.id;
 `
 
 async function renderPage(items) {
-  const html = ['<link rel="stylesheet" href="test.css">']
+  const html = ['<link rel="stylesheet" href="glow-test.css">']
+
+  html.push('<body class="is-dark">')
 
   items.forEach(opts => {
     const { title } = opts
@@ -640,25 +642,21 @@ async function renderPage(items) {
     html.push(`
       <div class="syntax ${opts.class || ''}">
         <header><h2>${opts.title || language }</h2></header>
-        <pre glow="${language}">
-          <code>${code}</code>
-        </pre>
+        <pre glow="${language}"><code>${code}</code></pre>
       </div>
     `)
   })
 
+  html.push('</body>')
+
   // save
-  const path = 'test-page.html'
+  const path = 'glow-test.html'
   await fs.writeFile(path, html.join('\n'), 'utf-8')
   console.info('wrote', path)
 }
 
 
 await renderPage([
-  { title: 'SQL', code: SQL, class: 'editing-demo' },
-  { title: 'Nuemark', code: NUEMARK, lang: 'nuemark', },
-  { title: 'MDX', code: MDX, lang: 'mdx', },
-  { title: 'Markdown', code: MARKDOWN, lang: 'md', },
   { title: 'Astro', code: ASTRO, },
   { title: 'C#', code: CSHARP },
   { title: 'C++', code: CPP, lang: 'cpp', },
@@ -676,19 +674,23 @@ await renderPage([
   { title: 'Julia', code: JULIA, lang: 'julia' },
   { title: 'Kotlin', code: KOTLIN, lang: 'java' },
   { title: 'Lua', code: LUA, lang: 'lua' },
+  { title: 'Markdown', code: MARKDOWN, lang: 'md', },
+  { title: 'MDX', code: MDX, lang: 'mdx', },
   { title: 'Nim', code: NIM, lang: 'nim' },
+  { title: 'Nuemark', code: NUEMARK, lang: 'nuemark', },
   { title: 'Perl', code: PERL, lang: 'perl' },
   { title: 'PHP', code: PHP, lang: 'php' },
   { title: 'Python', code: PYTHON, lang: 'python', },
   { title: 'Ruby', code: RUBY, lang: 'ruby' },
   { title: 'Rust', code: RUST, lang: 'rust' },
   { title: 'Shell', code: SHELL, lang: 'sh', },
+  { title: 'SQL', code: SQL, class: '_editing-demo' },
   { title: 'Styled component', code: STYLED, lang: 'jsx', },
   { title: 'Svelte', code: SVELTE },
   { title: 'TOML', code: TOML, lang: 'toml', },
   { title: 'TypeScript', code: TS, lang: 'ts', },
   { title: 'ZIG', code: ZIG, lang: 'zig', },
 
-].slice(0, 1))
+].slice(0, 100))
 
 
diff --git a/packages/glow/test/glow-test.css b/packages/glow/test/glow-test.css
@@ -0,0 +1,67 @@
+
+@import "../css/glow.css";
+@import "../css/markers.css";
+
+@import "../css/dark.css";
+
+.syntax {
+  border-radius: 6px;
+  margin-bottom: 3em;
+  header { padding: .7em 1.5em; }
+
+
+  [glow] {
+    --glow-line-opacity: 0.2;
+    --glow-padding: 1.5em;
+    padding: 0 var(--glow-padding);
+  }
+
+  h2 {
+    letter-spacing: 0.02em;
+    font-weight: 400;
+    font-size: 90%;
+    text-align: center;
+    margin: .0;
+  }
+}
+
+body {
+  font-family: sf pro display;
+  margin: 3em;
+  gap: 3em;
+  .syntax { break-inside: avoid; }
+  @media (min-width: 1000px) {
+    column-count: 2;
+  }
+}
+
+*, *::before, *::after {
+  box-sizing: border-box
+}
+
+
+.is-light {
+  background: #f3f8fa;
+  color: #444;
+
+  .syntax {
+    border: 1px solid #eee;
+    box-shadow: 0 0 .5em #eee;
+    background-color: #fff;
+    header { border-bottom: 1px solid #eee; }
+  }
+}
+
+
+.is-dark {
+  background: #111729;
+  color: #e2e8f0;
+
+  .syntax {
+    border-color:  #fff1;
+    box-shadow: none;
+    background-color: #20293A;
+    header { border-bottom: 1px solid #fff1; }
+  }
+}
+