serve: call sass, theme: work extra scss bundle

Signed-off-by: Jorge Marques <[email protected]>

adi_doctools/cli/aux_print.py

@@ -17,7 +17,7 @@ def sanitize_singlehtml(file) -> str:
     root = html.parse(file).getroot()
 
     # Remove full CSS entry to use slimer version
-    link_elements = root.xpath("//head//link[contains(@href, '_static/style.min.css')]")
+    link_elements = root.xpath("//head//link[contains(@href, '_static/app.min.css')]")
     for link in link_elements:
         link.getparent().remove(link)
 

adi_doctools/cli/custom_doc.py

@@ -892,7 +892,7 @@ def gen_pdf(index_file):
     src_dir = path.abspath(path.join(path.dirname(__file__), pardir, pardir))
     cosmic = path.join('adi_doctools', 'theme', 'cosmic')
     base_url = path.dirname(index_file)
-    css = CSS(path.join(src_dir, cosmic, 'static', 'style.min.css'),
+    css = CSS(path.join(src_dir, cosmic, 'static', 'app.min.css'),
               font_config=font_config, base_url=(path.join(base_url, '_static')))
     css_extra = CSS(path.join(src_dir, cosmic, 'style', 'weasyprint.css'),
                     font_config=font_config)

adi_doctools/cli/serve.py

@@ -21,7 +21,6 @@
     'node_': """Couldn't find {}, please install the node_modules at doctools repo root, e.g.:
     npm install rollup \\
         @rollup/plugin-terser \\
-        rollup-plugin-scss \\
         sass \\
         --save-dev""",
     'comp': "Couldn't find the minified web files.",
@@ -37,6 +36,10 @@
 # Avoid
 first_run = True
 
+theme_path = path.join('adi_doctools', 'theme', 'cosmic')
+style_path = path.join(theme_path, 'style')
+static_path = path.join(theme_path, 'static')
+
 @click.command()
 @click.option(
     '--directory',
@@ -128,8 +131,8 @@ def dir_assert(file, msg):
         from weasyprint.text.fonts import FontConfiguration
         builder = 'singlehtml'
 
-    source_files = {'app.umd.js', 'app.umd.js.map', 'style.min.css',
-                    'style.min.css.map'}
+    source_files = {'app.umd.js', 'app.umd.js.map', 'app.min.css',
+                    'app.min.css.map'}
     cwd_ = getcwd()
 
     def signal_handler(sig, frame):
@@ -141,10 +144,10 @@ def signal_handler(sig, frame):
             http_thread._stop()
         if dev:
             killpg(getpgid(rollup_p.pid), signal.SIGTERM)
+            killpg(getpgid(sass_p.pid), signal.SIGTERM)
         click.echo("Terminated")
         sys.exit()
 
-    cosmic_static = path.join('adi_doctools', 'theme', 'cosmic', 'static')
     def fetch_compiled(path_):
         req = path.join(path_, 'docs', 'requirements.txt')
         dist = path.join(path_, '.dist')
@@ -177,6 +180,11 @@ def fetch_compiled(path_):
     par_dir = path.abspath(path.join(src_dir, pardir))
     rollup_bin = path.join(par_dir, 'node_modules', '.bin', 'rollup')
     rollup_conf = path.join(par_dir, 'ci', 'rollup.config.app.mjs')
+    sass_bin = path.join(par_dir, 'node_modules', '.bin', 'sass')
+
+    sass_conf_1 = path.join(style_path, 'app.bundle.scss') + ':' + path.join(static_path, 'app.min.css')
+    sass_conf_2 = path.join(style_path, 'extra.bundle.scss') + ':' + path.join(static_path, 'extra.min.css')
+    sass_conf = sass_conf_1 + ' ' +  sass_conf_2
     if dev:
         if which("node") is None:
             click.echo(log['node'])
@@ -186,9 +194,8 @@ def fetch_compiled(path_):
         if symbolic_assert(rollup_bin, log['node_'].format(rollup_bin)):
             return
     else:
-        compiled = path.join(src_dir, 'theme', 'cosmic', 'static')
-        comp_js = path.abspath(path.join(compiled, 'app.umd.js'))
-        comp_css = path.abspath(path.join(compiled, 'style.min.css'))
+        comp_js = path.abspath(path.join(static_path, 'app.umd.js'))
+        comp_css = path.abspath(path.join(static_path, 'app.min.css'))
         if not path.isfile(comp_js) or not path.isfile(comp_css):
             click.echo(log['comp'])
             if which("node") is None:
@@ -264,8 +271,7 @@ def update_pdf():
 
         font_config = FontConfiguration()
         src_dir = path.abspath(path.join(path.dirname(__file__), pardir, pardir))
-        cosmic = path.join('adi_doctools', 'theme', 'cosmic')
-        css = CSS(path.join(src_dir, cosmic, 'static', 'style.min.css'),
+        css = CSS(path.join(src_dir, cosmic, 'static', 'app.min.css'),
                   font_config=font_config)
         css_extra = CSS(path.join(src_dir, cosmic, 'style', 'weasyprint.css'),
                         font_config=font_config)
@@ -296,6 +302,8 @@ def update_pdf():
         if not rollup_cache:
             subprocess.call(f"{rollup_bin} -c {rollup_conf}",
                             shell=True, cwd=par_dir)
+            subprocess.call(f"{sass_bin} --style compressed {sass_conf}",
+                            shell=True, cwd=par_dir)
         for t in ['*.umd.js*', '*.min.css*']:
             f = glob.glob(path.join(src_dir, 'theme', 'cosmic', 'static', t))
             w_files.extend(f)
@@ -308,10 +316,13 @@ def update_pdf():
         for f in w_files:
             watch_file_src[f] = path.getctime(f)
         if not once:
-            # Run rollup in watch mode
-            cmd = f"{rollup_bin} -c {rollup_conf} --watch"
-            rollup_p = subprocess.Popen(cmd, shell=True, cwd=par_dir,
+            # Run rollup and sass in watch mode
+            cmd_rollup = f"{rollup_bin} -c {rollup_conf} --watch"
+            cmd_sass = f"{sass_bin} --style compressed --watch {sass_conf}"
+            rollup_p = subprocess.Popen(cmd_rollup, shell=True, cwd=par_dir,
                                         stdout=subprocess.DEVNULL)
+            sass_p = subprocess.Popen(cmd_sass, shell=True, cwd=par_dir,
+                                      stdout=subprocess.DEVNULL)
         elif builder == "singlehtml":
             update_pdf()
     else:
@@ -342,6 +353,7 @@ def log_message(self, format, *args):
             click.echo(f"Could not start server on http://0.0.0.0:{port}")
             if dev:
                 killpg(getpgid(rollup_p.pid), signal.SIGTERM)
+                killpg(getpgid(sass_p.pid), signal.SIGTERM)
             return
     signal.signal(signal.SIGINT, signal_handler)
 
@@ -448,6 +460,7 @@ def check_files(scheduler):
                     click.echo("Browser disconnected")
                     if dev:
                         killpg(getpgid(rollup_p.pid), signal.SIGTERM)
+                        killpg(getpgid(sass_p.pid), signal.SIGTERM)
                     with lock:
                         http.shutdown()
                         http.server_close()

adi_doctools/lut.py

@@ -119,7 +119,7 @@ class LUT(TypedDict):
 """
 modules = Modules(
     javascript=['extra.umd.js'],
-    stylesheet=None
+    stylesheet=['extra.min.css']
 )
 
 

adi_doctools/theme/cosmic/scripts/app.js

@@ -1,4 +1,3 @@
-import '../style/bundle.scss'
 import { State } from './state.js'
 import { Fetch } from './fetch.js'
 import { Navigation } from './navigation.js'

adi_doctools/theme/cosmic/scripts/version_dropdown.js

@@ -52,8 +52,11 @@ export class VersionDropdown{
     let nav_bar = DOM.get('header #right .reverse')
     let body = DOM.get('body')
 
+    let i = Object.keys(obj).length > 10 ? 4 : 2
+    let cols = " auto".repeat(i)
     let container2 = new DOM('div', {
       'className': 'version-dropdown-list',
+      'style': `grid-template-columns:${cols}`
     })
 
     if (obj.hasOwnProperty(version)) {
@@ -65,12 +68,16 @@ export class VersionDropdown{
       let entry = new DOM('a', {
         'href': `/${this.parent.state.repository}/${key}`
       })
-      entry.innerText = obj[key][0]
-      if (obj[key][1] !== '') {
-        let label = new DOM('span')
-        label.innerText = obj[key][1]
-        entry.append(label)
-      }
+      let entry_ = new DOM('div')
+      let label_ = new DOM('div')
+      entry_.innerText = obj[key][0]
+      let label = new DOM('span', {
+        'className': obj[key][1] === '' ? "" : "label"
+      })
+      label.innerText = obj[key][1]
+      label_.append(label)
+      entry.append(entry_)
+      entry.append(label_)
       container2.append(entry)
     }
     let cancel_dropdown = new DOM('dev', {
@@ -83,11 +90,11 @@ export class VersionDropdown{
       'className': 'version-dropdown',
     })
     container.innerText = version
-    if (label !== '') {
-      let label_ = new DOM('span')
-      label_.innerText = label
-      container.append(label_)
-    }
+    let label_ = new DOM('span', {
+      'className': label === '' ? "" : "label"
+    })
+    label_.innerText = label
+    container.append(label_)
 
     toc_tree.insertAdjacentElement('afterbegin', container.$)
     let container3 = new DOM(container.$.cloneNode(true))

adi_doctools/theme/cosmic/style/code.scss

@@ -40,7 +40,7 @@ em.sig-param, em.property {
     padding: .75em;
     margin-bottom: .5em;
     user-select: text;
-    overflow-x: scroll;
+    overflow-x: auto;
 
     .highlight {
         padding: 0;

adi_doctools/theme/cosmic/style/version_dropdown.scss

@@ -59,17 +59,25 @@ header .version-dropdown {
     transform: perspective(1em) translate3d(0, -2em, -.25em);
     transition: .125s ease-out transform, .125s opacity ease;
     opacity: 0;
-    max-height: calc(100vh - 3.5em);
     overflow-y: auto;
     pointer-events: none;
-
+    display: grid;
 
     a {
-        padding: .5em;
-        display: block;
+        display: contents;
         border-radius: variable.$border-radius;
 
-        &:hover {
+        div:first-child {
+            border-radius: variable.$border-radius 0 0 variable.$border-radius;
+            padding: .5em 0 .5em .5em;
+        }
+        div:last-child {
+            border-radius: 0 variable.$border-radius variable.$border-radius 0;
+            padding: .5em .5em .5em 0;
+            text-align: center;
+        }
+
+        &:hover div {
             background-color: var(--bg-color3);
             color: var(--text-color1);
         }
@@ -82,15 +90,16 @@ header .version-dropdown {
     }
 }
 
-.version-dropdown, .version-dropdown-list a {
-    span {
+.version-dropdown, .version-dropdown-list {
+    padding-right: .5em;
+
+    span.label {
         font-size: .8em;
         border: 1px solid var(--accent-color);
         border-radius: variable.$border-radius-extra;
         padding: .2em .4em;
         margin-left: .5em;
         color: var(--accent-color);
-
     }
 }
 
@@ -104,7 +113,7 @@ header .version-dropdown {
 @media (min-width: variable.$screen-1) and (max-width: variable.$screen-3) {
     .version-dropdown-list {
         top: 3rem;
-        right: 6rem;
+        right: 7rem;
     }
 }
 
@@ -115,6 +124,18 @@ header .version-dropdown {
     }
 }
 
+@media (max-width: variable.$screen-1) {
+    .version-dropdown-list {
+        max-height: calc(100vh - 11em);
+    }
+}
+
+@media (min-width: variable.$screen-1) {
+    .version-dropdown-list {
+        max-height: calc(100vh - 4em);
+    }
+}
+
 #cancel-area-show-version-dropdown.on {
     position: fixed;
     background: rgba(0,0,0,.05);

adi_doctools/theme/cosmic/theme.conf

@@ -1,6 +1,6 @@
 [theme]
 inherit = basic
-stylesheet = style.min.css
+stylesheet = app.min.css
 sidebars =
   section/navigation.html
 

ci/rollup.config.app.mjs

@@ -1,5 +1,4 @@
 import terser from '@rollup/plugin-terser'
-import scss from "rollup-plugin-scss"
 
 let path = "adi_doctools/theme/cosmic"
 
@@ -13,13 +12,7 @@ export default [
       sourcemap: true
     },
     plugins: [
-      terser(),
-      scss({
-        fileName: `style.min.css`,
-        watch: `${path}/style`,
-        outputStyle: 'compressed',
-        sourceMap: true
-      })
+      terser()
     ]
   },
   {

docs/conf.py

@@ -6,7 +6,7 @@
 project = 'Doctools'
 copyright = '2024, Analog Devices, Inc.'
 author = 'Analog Devices, Inc.'
-version = 0.3
+version = '0.3'
 
 locale_dirs = ['locales/']  # path is relative to the source directory
 language = 'en'

docs/docs_guidelines.rst

@@ -1281,7 +1281,7 @@ To add new JavaScript modules and CSS styles:
 * Add the list of modules to :git-doctools:`adi_doctools/lut.py`.
 
 The rollup should always output to the ``static`` directory, the same as the
-base ``app.umd.js`` and ``style.min.css``.
+base ``app.umd.js`` and ``app.min.css``.
 
 Example use cases/suggestions:
 

docs/install.rst

@@ -86,7 +86,6 @@ At the repository root, install the `npm` dependencies locally:
 
    $npm install rollup \
    $    @rollup/plugin-terser \
-   $    rollup-plugin-scss \
    $    sass \
    $    --save-dev