countableset / antora-ui Goto Github PK

Someone noted that the monospace text is hard to differentiate on a page. Comparing it to some other styles like the one for k8s, I suspect it's because:

• the font Antora uses is too similar to the variable width font
• the background is too close in contrast

looks like since release, https://github.com/countableSet/antora-ui/releases/tag/b3452341869, dark mode has been broken, but not in the preview builds...which is odd

looks like the line that broke it is
8faf0b4#diff-42e7f2e9997218fb76432a126d95e1b9ab1a2b0d7fcb96b80b0a745919679306R49

postcssVar({ preserve: preview }),

where before it was always set to true... which was set via 001090e to help preserve dark mode 🙃

When you hover over the scrollbar there's weird background color. It's more noticeable in dark mode but even light mode looks a little off compared to other sites. It might be related to this change.
dark

light

duckduckgo example

I'm still not totally happy with it. I wonder if there's some tweaks we can do to it.

The contrast between the background, sidebar, header, and text color still 'feel' off.

Switch back to old version of highlightjs 9.18.3 from 11.3.1.

Currently the callout pool ball things aren't working correctly.
Example:

Before html:

After html:

Seems asciidoc inserts that <i class="conum" data-value="1">...</i> html into the source block. However, in the newer versions of highlighjs it escapes the html for security reasons, therefore, removing that style.

You can try and strip out the html and put it back in before highlight is called, however, it's a major pain

diff --git a/src/js/vendor/highlight.bundle.js b/src/js/vendor/highlight.bundle.js
index 1277756..78ee152 100644
--- a/src/js/vendor/highlight.bundle.js
+++ b/src/js/vendor/highlight.bundle.js
@@ -2,7 +2,39 @@
   'use strict'
 
   const hljs = require('highlight.js/lib/index')
+  const regex = /<i.*class="conum".*>.*<\/b>/
   ;[].slice.call(document.querySelectorAll('pre code.hljs')).forEach(function (node) {
-    hljs.highlightElement(node)
+    const lang = Array.from(node.classList.values()).find((item) => {
+      return item.includes('language-')
+    }).replace('language-', '')
+    let content = ''
+    node.innerHTML.split('\n').forEach(function (line) {
+      console.log(line)
+      const match = line.match(regex)
+      let replace = ''
+      if (match !== null) {
+        line = line.replace(match[0], '')
+        replace = match[0]
+      }
+      const result = hljs.highlight(line, { language: lang })
+      content += result.value + replace + '\n'
+    })
+    node.innerHTML = content
   })
 })()

Also looked into using the hljs.addPlugin({...}) methods, and seems the html escaping happens before those plugin callbacks, before:highlightElement and 'before:highlight'

policy example:

default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'

errors:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). semantic-version.gradle.poolside.dev:10:1
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). semantic-version.gradle.poolside.dev:11:1
Content Security Policy: The page’s settings blocked the loading of a resource at https://semantic-version.gradle.poolside.dev/_/font/fontawesome-webfont.eot?#iefix&v=4.7.0 (“default-src”). semantic-version.gradle.poolside.dev
Content Security Policy: The page’s settings blocked the loading of a resource at https://semantic-version.gradle.poolside.dev/_/font/fontawesome-webfont.woff2?v=4.7.0 (“default-src”). semantic-version.gradle.poolside.dev
Content Security Policy: The page’s settings blocked the loading of a resource at https://semantic-version.gradle.poolside.dev/_/font/fontawesome-webfont.woff?v=4.7.0 (“default-src”). semantic-version.gradle.poolside.dev
Content Security Policy: The page’s settings blocked the loading of a resource at https://semantic-version.gradle.poolside.dev/_/font/fontawesome-webfont.ttf?v=4.7.0 (“default-src”). semantic-version.gradle.poolside.dev
Content Security Policy: The page’s settings blocked the loading of a resource at https://semantic-version.gradle.poolside.dev/_/font/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular (“default-src”). semantic-version.gradle.poolside.dev

look into fixing some of these errors with csp if needed or come up with an alternative policy

references

• default-src
• script-src
• font-src

to fix the font ones just add font-src 'self' to the policy 👍🏻

1. Preview gulp command keep rebuild in infinite loop
2. Tip/Important/etc are using font awesome now for some reason
   Before:
   
   After:
   
3. Asciidoc style has some nice admonition blocks, should try adding it (https://github.com/asciidoctor/asciidoctor-docs-ui/blob/4c387933bcb7abe51f8ffe5486dbd35596baf4b3/src/css/doc.css)
   

We may consider widening the main content pane. Someone showed me Flux which fills a landscape screen. I'm not sure if there's a reason why the default Antora style leaves a gap on the right.

Nice, no more dependency on supplemental ui via https://gitlab.com/antora/antora-lunr-extension/-/commit/2521a335800edafb7f44160400aa6777df46cf4d

Looks like the search box might not be using the correct css?

dark:

light:

Just review what's going on and make sure stuff is working ok.

Also search.css comes last, that might be an issue...

Looks like after the fix for #13, the bold face style is no longer being rendered correctly (Windows 10, Firefox 101.0.1). I discovered that removing both of the font-weight styles below appear to fix the issue. I'm not sure if this is the correct fix or not; just an experimental result.

b, dt, strong, th {
  font-weight: 500;
  font-weight: var(--body-font-weight-bold);
}

Current

Fixed