hexo-theme-stellar 1.44.0 → 2.0.0-rc.2

package/layout/_partial/regions/widgets.ejs

@@ -0,0 +1,84 @@
+<%
+var regionId = typeof region !== 'undefined' ? region : 'leftbar'
+var regionState = typeof state === 'object' && state ? state : {}
+var regionWidgets = Array.isArray(widgets) ? widgets : []
+var activeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+
+function renderWidget(widget, options) {
+  options = options || {}
+  var item = widget.item || {}
+  var body = ''
+  if (widget.system) {
+    if (widget.layout === 'menu') {
+      body = partial('../sidebar/menu', {
+        where: regionId,
+        menu: regionState.menu,
+        activeMenu: activeViewModel?.item.navigation.menu,
+        viewModel: activeViewModel
+      })
+    } else if (widget.layout === 'settings') {
+      body = partial('../widgets/settings', {item: item, viewModel: activeViewModel, placement: regionId})
+    } else if (widget.layout === 'spacer') {
+      body = '<span class="topbar-spacer" aria-hidden="true"></span>'
+    }
+  } else if (regionId === 'topbar' && widget.layout === 'toc') {
+    var tocContent = activeViewModel?.collection?.profile === 'wiki'
+      ? activeViewModel.item.content
+      : page.content
+    var tocBody = toc(tocContent || '', {
+      list_number: item.list_number,
+      min_depth: item.min_depth,
+      max_depth: item.max_depth
+    })
+    if (tocBody.trim().length > 0) {
+      tocBody = tocBody.replace('class="toc"', 'class="toc ui-collection-adapter"')
+      tocBody = tocBody.replace(/class="toc-link/g, 'class="' + ui_classes('toc-link', 'interactive'))
+      body = `<details class="topbar-toc"><summary class="${ui_classes('region-compact-action')}" aria-label="${escape_html(__('btn.toc'))}"><span class="ui-icon">${icon('default:rightbar', '', true)}</span></summary><div class="topbar-toc-popover">${tocBody}</div></details>`
+    }
+  } else {
+    body = partial('../widgets/' + widget.layout, {item: item, viewModel: activeViewModel})
+  }
+  if (!body || body.trim().length === 0) return ''
+  var rail = widget.presentations?.includes('leftbarRail') ? ' data-leftbar-rail' : ''
+  return `<div class="widget-instance widget-instance--${widget.layout}" data-widget-id="${escape_html(widget.instanceId)}" data-presentation="${widget.presentation}"${rail}>${body}</div>`
+}
+function stack(items, zone, options) {
+  if (!items.length) return ''
+  return `<div class="widgets widget-stack widget-stack--${regionId} widget-stack--${zone}">${items.map(function(widget) { return renderWidget(widget, options) }).join('')}</div>`
+}
+%>
+<% if (regionId === 'topbar') {
+  var topbarBrandBody = regionState.brand === false ? '' : partial('../sidebar/brand', {
+    placement: 'topbar',
+    brandModel: regionState.brand,
+    viewModel: activeViewModel
+  })
+%>
+  <% if (topbarBrandBody.trim().length > 0) { %><div class="widget-instance widget-instance--brand" data-widget-id="topbar:fixed:brand" data-presentation="topbar"><%- topbarBrandBody %></div><% } %>
+  <%- stack(regionWidgets, 'topbar') %>
+<% } else if (regionId === 'leftbar') {
+  var leftbarBrandBody = regionState.brand === false ? '' : partial('../sidebar/brand', {
+    placement: 'leftbar',
+    brandModel: regionState.brand,
+    viewModel: activeViewModel
+  })
+  var menuItems = Array.isArray(regionState.menu) ? regionState.menu : []
+  var actionItems = Array.isArray(regionState.footer?.actions) ? regionState.footer.actions : []
+%>
+  <header class="site-region__header site-region__zone site-region__zone--top">
+    <% if (leftbarBrandBody.trim().length > 0) { %><div class="widget-instance widget-instance--brand" data-widget-id="leftbar:fixed:brand" data-presentation="leftbar" data-leftbar-rail><%- leftbarBrandBody %></div><% } %>
+  </header>
+  <div class="site-region__body site-region__zone site-region__zone--body">
+    <% if (menuItems.length > 0) { %><div class="widget-instance widget-instance--menu" data-widget-id="leftbar:fixed:menu" data-presentation="leftbar" data-leftbar-rail><%- partial('../sidebar/menu', {where: 'leftbar', menu: menuItems, activeMenu: activeViewModel?.item.navigation.menu, viewModel: activeViewModel}) %></div><% } %>
+    <%- stack(regionWidgets, 'body') %>
+  </div>
+  <footer class="site-region__footer">
+    <% if (actionItems.length > 0) { %><div class="site-region__footer-actions"><div class="widget-instance widget-instance--actions" data-widget-id="leftbar:fixed:actions" data-presentation="leftbar"><%- partial('../widgets/actions', {actions: actionItems, viewModel: activeViewModel}) %></div></div><% } %>
+    <div class="site-region__system ui-collection" data-layout="inline" data-variant="nav" data-density="compact">
+      <div class="site-region__settings"><div class="widget-instance widget-instance--settings" data-widget-id="leftbar:fixed:settings" data-presentation="leftbar" data-leftbar-rail><%- partial('../widgets/settings', {viewModel: activeViewModel, placement: 'leftbar'}) %></div></div>
+      <button type="button" class="<%- ui_classes('leftbar-state-toggle', 'collectionItem', 'is-icon-only') %>" aria-label="Collapse leftbar" aria-expanded="true" data-shell-action="toggle-leftbar"><span class="ui-icon"><%- icon('default:leftbar-toggle', '', true) %></span></button>
+    </div>
+  </footer>
+<% } else { %>
+  <%- stack(regionWidgets, regionId) %>
+<% } %>

package/layout/_partial/scripts/defines.ejs

@@ -1,11 +1,24 @@
 <%
-  const canonical = theme.canonical || {}
-  const encoded = Buffer.from(canonical.originalHost || '').toString('base64');
-  const canonicalWithEncoded = Object.assign({}, canonical, {
+  var canonical = stellar_config('canonical')
+  var encoded = Buffer.from(canonical.host || '').toString('base64');
+  var canonicalWithEncoded = Object.assign({}, canonical, {
     encoded: encoded
   });
-  const permalink = page.permalink || canonical.originalHost;
-  const checklink = theme.data_services.video.js
+  var permalink = page.permalink || canonical.host;
+  var extensions = {
+    search: stellar_config('search'),
+    comments: stellar_config('comments'),
+    tags: stellar_config('tags'),
+    features: stellar_config('features'),
+    services: stellar_config('services')
+  }
+  var assets = extension_assets()
+  var checklink = assets.services.video.js
+  var clientServices = JSON.parse(JSON.stringify(assets.services))
+  var siteInfoService = service_provider(extensions.services.siteInfo)
+  clientServices.siteinfo.api = siteInfoService ? siteInfoService.endpoint : null
+  var localSearch = extensions.search.local
+  var searchProvider = extensions.search.provider === 'local' ? 'local_search' : extensions.search.provider
 %>
 
 <script type="text/javascript">
@@ -45,55 +58,12 @@
             });
             observer.observe({ entryTypes: ['resource'] });
           } catch (e) {}
-          // 统计进行中的 fetch/XHR 请求，异步组件（timeline 等）未完成前不判定布局稳定
-          let pendingRequests = 0;
-          const trackRequest = (fn) => {
-            pendingRequests++;
-            try {
-              const result = fn();
-              if (result && typeof result.finally === 'function') {
-                result.finally(function () {
-                  pendingRequests = Math.max(0, pendingRequests - 1);
-                });
-              } else {
-                pendingRequests = Math.max(0, pendingRequests - 1);
-              }
-              return result;
-            } catch (e) {
-              pendingRequests = Math.max(0, pendingRequests - 1);
-              throw e;
-            }
-          };
-          if (typeof window.fetch === 'function') {
-            const origFetch = window.fetch.bind(window);
-            window.fetch = function () {
-              const args = arguments;
-              return trackRequest(function () {
-                return origFetch.apply(window, args);
-              });
-            };
-          }
-          if (window.XMLHttpRequest) {
-            const origOpen = window.XMLHttpRequest.prototype.open;
-            const origSend = window.XMLHttpRequest.prototype.send;
-            window.XMLHttpRequest.prototype.open = function () {
-              this.__anchorTracked = true;
-              return origOpen.apply(this, arguments);
-            };
-            window.XMLHttpRequest.prototype.send = function () {
-              if (this.__anchorTracked) {
-                pendingRequests++;
-                const done = () => {
-                  if (this.__anchorTracked) {
-                    this.__anchorTracked = false;
-                    pendingRequests = Math.max(0, pendingRequests - 1);
-                  }
-                };
-                this.addEventListener('loadend', done);
-              }
-              return origSend.apply(this, arguments);
-            };
-          }
+          // 只跟踪主题 request/cache 客户端，不替换浏览器原生 fetch/XHR。
+          const pendingRequests = new Set();
+          const onRequestStart = event => pendingRequests.add(event.detail.key);
+          const onRequestEnd = event => pendingRequests.delete(event.detail.key);
+          document.addEventListener('stellar:request-start', onRequestStart);
+          document.addEventListener('stellar:request-end', onRequestEnd);
           const cancel = () => {
             if (timer !== null) {
               clearInterval(timer);
@@ -104,6 +74,8 @@
                 observer.disconnect();
               } catch (e) {}
             }
+            document.removeEventListener('stellar:request-start', onRequestStart);
+            document.removeEventListener('stellar:request-end', onRequestEnd);
           };
           const adjust = () => {
             const y = targetY();
@@ -118,7 +90,7 @@
             attempts++;
             const resourceQuiet = performance.now() - lastResourceTime > 3000;
             // 位置连续 1.8 秒无变化、无进行中的请求且最近 3 秒无资源加载才视为稳定；最长等待 30 秒
-            if ((quiet >= 3 && pendingRequests === 0 && resourceQuiet) || attempts >= 50) {
+            if ((quiet >= 3 && pendingRequests.size === 0 && resourceQuiet) || attempts >= 50) {
               cancel();
             }
           };
@@ -150,38 +122,37 @@
     },
     root : `<%- config.root %>`,
     tag_plugins: {
-      chat: Object.assign(<%- JSON.stringify(theme.tag_plugins.chat) %>),
+      chat: {api: <%- JSON.stringify(assets.services.chat.endpoint) %>},
     },
     // 图标由构建期生成的 /js/stellar-icons.js 填充（defer，早于 DOMContentLoaded 就绪）
     icons: {},
-    services: <%- JSON.stringify(theme.data_services || {}) %>,
+    ui: { classes: <%- JSON.stringify(ui_capabilities()) %> },
+    services: <%- JSON.stringify(clientServices) %>,
   };
 
   // required plugins (only load if needs)
-  if (`<%- theme.search.service %>`) {
+  if (`<%- searchProvider || '' %>`) {
     ctx.search = {};
-    ctx.search.service = `<%- theme.search.service %>`;
+    ctx.search.service = `<%- searchProvider || '' %>`;
     if (ctx.search.service == 'local_search') {
-      let service_obj = Object.assign({}, `<%- JSON.stringify(theme.search.local_search) %>`);
+      let service_obj = <%- JSON.stringify({
+        field: localSearch.scope,
+        path: '/search.json',
+        content: localSearch.includeContent,
+        lazy_load: true,
+        cache_ttl: localSearch.cacheTtlSeconds
+      }) %>;
       ctx.search[ctx.search.service] = service_obj;
+      ctx.search.path = service_obj.path;
     }
   }
   const def = {
-    avatar: `<%- theme.default.avatar %>`,
-    cover: `<%- theme.default.cover %>`,
-    data_cache: <%- JSON.stringify(theme.data_cache || {}) %>,
-  };
-  const deps = {
-    marked: `<%- url_for(theme.dependencies.marked) %>`,
-    lazyload: `<%- url_for(theme.dependencies.lazyload.js) %>`
-  }
-
-  // 主题切换提示文案（供 /js/theme.js 使用）
-  window.__STELLAR_I18N__ = {
-    light: `<%- __('message.theme_switched.light') %>`,
-    dark: `<%- __('message.theme_switched.dark') %>`,
-    auto: `<%- __('message.theme_switched.auto') %>`,
+    avatar: `<%- stellar_config('fallbacks.avatar') %>`,
+    cover: `<%- stellar_config('fallbacks.cover') %>`,
   };
+  // 经典脚本仍消费这些只读投影。
+  window.ctx = ctx;
+  window.def = def;
 
   // 搜索跳转高亮：URL 带 ?kw= 时按需加载，定位正文中的匹配词
   (function () {
@@ -189,8 +160,7 @@
       if (!window.location.search) return;
       if (!new URLSearchParams(window.location.search).has('kw')) return;
       document.addEventListener('DOMContentLoaded', function () {
-        // utils 由 /js/utils.js 定义（同时暴露 window.utils）；
-        // 未就绪时由 bootstrap 队列兜底，此处按就绪状态判断
+        // utils 由前置 /js/utils.js 同步定义（同时暴露 window.utils）。
         if (typeof utils === 'object' && typeof utils.js === 'function') {
           utils.js('<%- url_for('/js/search/highlight.js') %>', { defer: true }).catch(function () {});
         }

package/layout/_partial/scripts/runtime.ejs

@@ -0,0 +1,55 @@
+<%
+var runtimeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+var runtimeRender = content_config(page).render || {}
+var runtimeExtensions = {
+  search: stellar_config('search'),
+  comments: stellar_config('comments'),
+  tags: stellar_config('tags'),
+  features: stellar_config('features'),
+  services: stellar_config('services')
+}
+var runtimeAssets = extension_assets()
+var runtimeMathProvider = runtimeRender.math || runtimeExtensions.features.math.provider
+var runtimeCommentOverrides = null
+var runtimeHomeComments = stellar_config('profiles.home.comments')
+if (!runtimeViewModel && runtimeHomeComments && runtimeHomeComments !== false && is_home_first_page()) {
+  runtimeCommentOverrides = typeof runtimeHomeComments === 'object' ? runtimeHomeComments : {enabled: true}
+}
+var runtimeErrorComments = stellar_config('profiles.error.comments')
+if (!runtimeViewModel && page.layout === '404' && runtimeErrorComments && runtimeErrorComments !== false) {
+  runtimeCommentOverrides = typeof runtimeErrorComments === 'object' ? runtimeErrorComments : {enabled: true}
+}
+var runtimeComments = runtimeViewModel?.render?.article?.comments || comments_model(page, runtimeCommentOverrides)
+var runtimeProfile = runtimeViewModel?.collection?.profile
+  || (page.notebookIndex?.mode === 'notes' ? 'notebook' : page.layout || '')
+var runtimeMessages = {
+  copy: {
+    label: __('btn.copy'),
+    copied: __('message.copied'),
+    denied: __('message.copy_denied'),
+    unsupported: __('message.copy_unsupported')
+  }
+}
+if (runtimeExtensions.features.colorSchemeSwitch.enabled) {
+  runtimeMessages.colorScheme = {
+    light: __('message.color_scheme_switched.light'),
+    dark: __('message.color_scheme_switched.dark'),
+    auto: __('message.color_scheme_switched.auto')
+  }
+}
+var runtimeJson = browser_runtime_manifest({
+  root: config.root,
+  extensions: runtimeExtensions,
+  assets: runtimeAssets,
+  render: runtimeRender,
+  comments: runtimeComments,
+  profile: runtimeProfile,
+  colorScheme: stellar_config('appearance.colorScheme'),
+  messages: runtimeMessages
+})
+%>
+<% if (runtimeMathProvider === 'katex') { %>
+<link rel="stylesheet" href="<%- url_for(runtimeAssets.features.katexCss) %>" integrity="sha384-//SZkxyB7axjCAopkAL1E1rve+ZSPKapD89Lo/lLhcsXR+zOYl5z6zJZEFXil+q0" crossorigin="anonymous">
+<% } %>
+<script type="application/json" id="stellar-runtime-config"><%- runtimeJson %></script>
+<script type="module" src="<%- url_for(runtimeAssets.runtime.bootstrap) %>?v=<%- stellar_info('version') %>&runtime=1"></script>

package/layout/_partial/scripts.ejs

@@ -1,31 +1,25 @@
 <%
+var renderViewModel = typeof viewModel !== 'undefined' ? viewModel : null
 
 function custom_inject() {
-  var el = '';
-  for (let item of (config.inject?.script || [])) {
-    el += item;
-  }
-  for (let item of (theme.inject?.script || [])) {
-    el += item;
-  }
-  for (let item of (page.inject?.script || [])) {
-    el += item;
-  }
-  return el;
+  return stellar_inject('bodyEnd', renderViewModel ? renderViewModel.render.document.bodyEndInject : content_config(page).inject?.bodyEnd)
 }
 
-// tagtree 脚本仅在与 tagtree 小部件渲染相同的条件下加载（见 _partial/sidebar/index_leftbar.ejs）
+// tagtree 脚本仅在最终 Region 实例包含 tagtree 时加载。
 function tagtreeWidgetOnPage() {
-  const leftbar = page && page.leftbar;
-  if (!Array.isArray(leftbar)) {
+  var layout = renderViewModel?.render.layout
+    || page.notebookIndex?.collection?.layout
+    || {};
+  var regions = [layout.topbar, layout.leftbar, layout.rightbar];
+  var widgets = regions.flatMap(function (region) {
+    return Array.isArray(region?.widgets) ? region.widgets : []
+  })
+  if (!Array.isArray(widgets)) {
     return false;
   }
-  return leftbar.some(function (w) {
-    if (typeof w === 'string') {
-      return w === 'tagtree';
-    }
+  return widgets.some(function (w) {
     if (w && typeof w === 'object') {
-      return w.override === 'tagtree' || w.layout === 'tagtree';
+      return w.id === 'tagtree' || w.layout === 'tagtree' || w.override === 'tagtree';
     }
     return false;
   });
@@ -34,36 +28,18 @@ function tagtreeWidgetOnPage() {
 %>
 <%- partial('scripts/defines') %>
 
-<%- partial('scripts/bootstrap') %>
-
-<!-- core: utils 必须同步加载（页尾内联插件片段在解析期即调用 utils.initPlugin） -->
+<!-- core: 迁移期 DOM/资源兼容工具；Extension 注册与生命周期由 ESM runtime 所有 -->
 <script src="<%- url_for('/js/utils.js') %>?v=<%- stellar_info('version') %>"></script>
-<script>
-  // 解析期检测 utils 是否已就绪；未就绪时同步补载，
-  // 保证「utils 先于页尾插件片段定义」的不变量。
-  if (typeof utils === 'undefined') {
-    document.write('<script src="<%- url_for('/js/utils.js') %>?v=<%- stellar_info('version') %>"><\/script>');
-  }
-</script>
 <script defer src="<%- url_for('/js/stellar-icons.js') %>?v=<%- stellar_info('version') %>"></script>
-<!-- 非首屏图标异步加载：占位符替换依赖构建期生成的 js/icons/{ns}.json -->
-<script defer src="<%- url_for('/js/icons.js') %>?v=<%- stellar_info('version') %>" data-version="<%- stellar_info('version') %>"></script>
-<script defer src="<%- url_for('/js/plugins/dropdown.js') %>?v=<%- stellar_info('version') %>"></script>
-<script src="<%- url_for(`${theme.stellar.main_js}?v=${stellar_info('version')}`) %>" defer></script>
-<script defer src="<%- url_for('/js/theme.js') %>?v=<%- stellar_info('version') %>"></script>
+<script src="<%- url_for(`${stellar_info('main_js')}?v=${stellar_info('version')}`) %>" defer></script>
+<script defer src="<%- url_for('/js/profile.js') %>?v=<%- stellar_info('version') %>"></script>
 
 <% if (tagtreeWidgetOnPage()) { %>
-  <script>window.__STELLAR_TAGTREE__ = { expand_active: <%- JSON.stringify(!!(theme.widgets.tagtree && theme.widgets.tagtree.expand_active)) %> };</script>
+  <script>window.__STELLAR_TAGTREE__ = { expand_active: <%- JSON.stringify(!!(stellar_data('widgets').tagtree && stellar_data('widgets').tagtree.expand_active)) %> };</script>
   <script defer src="<%- url_for('/js/tagtree.js') %>?v=<%- stellar_info('version') %>"></script>
 <% } %>
 
-<%- partial('scripts/lazyload') %>
-
-<!-- optional -->
-<%- partial('comments/script') %>
-
-<script defer src="<%- url_for('/js/services.js') %>?v=<%- stellar_info('version') %>"></script>
-<%- partial('../_plugins/index') %>
+<%- partial('scripts/runtime', {viewModel: typeof viewModel !== 'undefined' ? viewModel : null}) %>
 
 <!-- inject -->
 <%- custom_inject() %>

package/layout/_partial/search/dialog.ejs

@@ -0,0 +1,33 @@
+<%
+var localSearch = stellar_config('search.provider') === 'local'
+%>
+<dialog class="search-dialog" id="site-search-dialog" aria-labelledby="site-search-title">
+  <div class="search-dialog__panel search-wrapper" id="site-search-wrapper" searching="false">
+    <div class="search-dialog__header">
+      <div class="search-form" role="search">
+        <span class="search-button" aria-hidden="true"><%- icon('default:search', '', true) %></span>
+        <input type="search" class="search-input" id="site-search-input" aria-labelledby="site-search-title" placeholder="<%- escape_html(__('btn.search')) %>">
+      </div>
+      <button type="button" class="search-dialog__close" data-shell-action="close-search" aria-label="<%- escape_html(__('search.close')) %>">×</button>
+    </div>
+    <% if (localSearch) { %>
+      <div class="search-dialog__scope" role="radiogroup" aria-labelledby="site-search-title" hidden>
+        <label class="search-dialog__scope-option" data-search-scope-option="all">
+          <input class="ui-radio" type="radio" name="site-search-scope" value="all">
+          <span><%- __('search.scope_all') %></span>
+        </label>
+        <label class="search-dialog__scope-option" data-search-scope-option="blog" hidden>
+          <input class="ui-radio" type="radio" name="site-search-scope" value="blog">
+          <span><%- __('search.scope_blog') %></span>
+        </label>
+        <label class="search-dialog__scope-option" data-search-scope-option="current" hidden>
+          <input class="ui-radio" type="radio" name="site-search-scope" value="current">
+          <span data-search-scope-current-label></span>
+        </label>
+      </div>
+    <% } %>
+    <h2 class="search-dialog__title" id="site-search-title"><%- __('search.search') %></h2>
+    <div class="search-result" id="site-search-result"></div>
+    <div class="search-no-result"><%- __('search.no_results') %></div>
+  </div>
+</dialog>

package/layout/_partial/search/shortcut.ejs

@@ -0,0 +1 @@
+<kbd class="search-shortcut" data-search-shortcut aria-hidden="true"></kbd>

package/layout/_partial/sidebar/brand.ejs

@@ -0,0 +1,127 @@
+<%
+var brand = (typeof brandModel !== 'undefined' ? brandModel : null) || {}
+var brandPlacement = typeof placement !== 'undefined' ? placement : 'leftbar'
+var activeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+var brandStyle = brandPlacement === 'topbar'
+  ? 'topbar'
+  : brand.style === 'compact' ? 'compact' : 'regular'
+
+function layoutBrandNavigation() {
+  if (brandPlacement !== 'leftbar' || brand.source !== 'collection' || brand.backButton !== true) return ''
+  const href = brand.backHref
+  if (!href) return ''
+  return `<div class="brand-navigation"><a class="brand-navigation__back cap" href="${pretty_url(href)}"><span class="ui-icon">${icon('default:back', '', true)}</span><span>${__(brand.backLabel)}</span></a></div>`
+}
+
+function layoutBrandSearch() {
+  if (brandPlacement !== 'leftbar' || brand.source !== 'collection' || brand.search !== true) return ''
+  if (!stellar_config('search.provider')) return ''
+  var body = partial('_partial/sidebar/search', {
+    item: {algoliaFilterPath: 'auto'},
+    instanceId: 'collection-brand-search',
+    presentation: 'leftbar',
+    hoverSurface: true,
+    viewModel: activeViewModel
+  })
+  return body.trim().length > 0 ? `<div class="brand-search">${body}</div>` : ''
+}
+
+function layoutBrandTitle() {
+  const name = brandText(brand.name)
+  if (!name) return ''
+  const tagline = brandText(brand.tagline)
+  const href = brandText(brand.href)
+  const tag = href ? 'a' : 'div'
+  var el = `<${tag} class="brand-title"${href ? ` href="${escape_html(url_for(href))}"` : ''}>`
+  el += `<div class="brand-name">${escape_html(name)}</div>`
+  if (brandStyle !== 'topbar' && tagline) {
+    el += `<div class="brand-tagline cap">${escape_html(tagline)}</div>`
+  }
+  el += `</${tag}>`
+  return el
+}
+
+function layoutBrandImage() {
+  var image = brand.image
+  var src = brandText(image?.src)
+  if (!src) return ''
+  var href = brandText(brand.href)
+  var tag = href ? 'a' : 'div'
+  var variant = image?.variant || 'icon'
+  var el = `<${tag} class="brand-image brand-image--${variant}"${href ? ` href="${escape_html(url_for(href))}"` : ''}>`
+  if (src) {
+    el += `<img no-lazy src="${escape_html(src)}" alt="">`
+  } else {
+    el += icon('default:documents', '', true)
+  }
+  el += `</${tag}>`
+  return el
+}
+
+function layoutCollectionStats(apiBase) {
+  var repository = brandText(activeViewModel?.collection?.source?.repository)
+  if (!repository) return ''
+  var encodedRepository = repository.split('/').map(encodeURIComponent).join('/')
+  var githubHref = `https://github.com/${encodedRepository}`
+  var repoApi = `${apiBase}/repos/${encodedRepository}`
+  var items = [
+    {key: 'stargazers_count', label: 'stars', href: githubHref + '/stargazers'},
+    {key: 'forks_count', label: 'forks', href: githubHref + '/forks'},
+    {key: 'latest-tag-name', label: 'tag', href: githubHref + '/tags', api: repoApi + '/tags'}
+  ]
+  var el = `<div class="brand-stats data-service ds-ghinfo" data-api="${escape_html(repoApi)}">`
+  items.forEach(item => {
+    var classes = ui_classes(item.api ? 'brand-stat data-service ds-ghinfo' : 'brand-stat')
+    var service = item.api ? ` data-api="${escape_html(item.api)}" index="0"` : ''
+    el += `<a class="${classes}"${service} href="${escape_html(item.href)}">`
+    el += `<span class="brand-stat__value" type="text" id="${item.key}"></span>`
+    el += `<span class="brand-stat__label">${item.label}</span></a>`
+  })
+  el += `</div>`
+  return el
+}
+
+function layoutSiteStats(apiBase) {
+  var username = typeof brandGithubUsername === 'function' ? brandGithubUsername() : ''
+  if (!username) return ''
+  var encodedUsername = encodeURIComponent(username)
+  var githubHref = `https://github.com/${encodedUsername}`
+  var items = [
+    {key: 'followers', label: 'followers', href: githubHref + '?tab=followers'},
+    {key: 'following', label: 'following', href: githubHref + '?tab=following'},
+    {key: 'public_repos', label: 'repos', href: githubHref + '?tab=repositories'}
+  ]
+  var el = `<div class="brand-stats data-service ds-ghinfo" data-api="${escape_html(apiBase + '/users/' + encodedUsername)}">`
+  items.forEach(item => {
+    el += `<a class="${ui_classes('brand-stat')}" href="${escape_html(item.href)}">`
+    el += `<span class="brand-stat__value" type="text" id="${item.key}"></span>`
+    el += `<span class="brand-stat__label">${item.label}</span></a>`
+  })
+  el += `</div>`
+  return el
+}
+
+function layoutBrandGithub() {
+  if (brandPlacement !== 'leftbar' || brandStyle !== 'regular') return ''
+  var apiBase = brandText(stellar_config('services.github.apiUrl')).replace(/\/+$/, '')
+  if (!apiBase) return ''
+  return brand.source === 'collection'
+    ? layoutCollectionStats(apiBase)
+    : layoutSiteStats(apiBase)
+}
+
+function layoutBrand() {
+  if (!brand.image?.src && !brand.name) return ''
+  var el = `<header class="brand-header brand-header--${brandStyle}${brandPlacement === 'main' ? ' mobile-only' : ''}">`
+  el += layoutBrandNavigation()
+  el += `<div class="brand-wrap">`
+  el += layoutBrandImage()
+  el += layoutBrandTitle()
+  el += layoutBrandGithub()
+  el += `</div>`
+  el += layoutBrandSearch()
+  el += `</header>`
+  return el
+}
+%>
+<%- layoutBrand() %>

package/layout/_partial/sidebar/menu.ejs

@@ -1,7 +1,58 @@
 <%
 function layoutDiv() {
+  var menuViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+  var menuItems = Array.isArray(menu) ? menu : []
+  var pageConfig = content_config(page)
+  var currentMenu = typeof activeMenu !== 'undefined'
+    ? activeMenu
+    : pageConfig.activeMenu ?? page.navigation?.menu
+  if (pageConfig.activeMenu == null) {
+    var pathMenu = menu_active_by_path(page.path, menuItems)
+    if (pathMenu != null) currentMenu = pathMenu
+  }
   var entries = []
-  for (var menuItem of (theme.menubar.items || [])) {
+  for (var menuItem of menuItems) {
+    if (menuItem?.type === 'search') {
+      if (!stellar_config('search.provider')) continue
+      var searchProvider = stellar_config('search.provider')
+      var algoliaFilterPath = ''
+      var wikiViewModel = menuViewModel?.collection?.profile === 'wiki' ? menuViewModel : null
+      var notebookViewModel = menuViewModel?.collection?.profile === 'notebook' ? menuViewModel : null
+      var notebookIndex = page.notebookIndex?.mode === 'notes' ? page.notebookIndex.collection : null
+      if (wikiViewModel) {
+        algoliaFilterPath = wikiViewModel.render.layout.algoliaFilterPath || ''
+      } else if (notebookViewModel) {
+        algoliaFilterPath = notebookViewModel.render.layout.algoliaFilterPath || ''
+      } else if (notebookIndex) {
+        algoliaFilterPath = notebookIndex.layout.algoliaFilterPath || ''
+      }
+      if (algoliaFilterPath.length > 0 && !algoliaFilterPath.startsWith('/')) algoliaFilterPath = '/' + algoliaFilterPath
+      var searchScope = search_scope(page, menuViewModel)
+      var searchTitle = __('btn.search')
+      var searchAttrs = {
+        'aria-label': searchTitle,
+        'data-shell-action': 'open-search',
+        'data-search-instance': 'menu-search'
+      }
+      if (searchProvider === 'algolia' && algoliaFilterPath.length > 0) {
+        searchAttrs['data-algolia-filter-path'] = algoliaFilterPath
+      }
+      if (searchScope) {
+        searchAttrs['data-search-domain'] = searchScope.current
+        searchAttrs['data-search-domain-label'] = searchScope.currentLabel
+        searchAttrs['data-search-domain-blog'] = searchScope.hasBlog ? 'true' : 'false'
+      }
+      entries.push({
+        type: 'button',
+        title: searchTitle,
+        icon: menuItem.icon || 'default:search',
+        theme: menuItem.accent,
+        className: menuItem.accent?.length > 0 ? 'search-trigger is-themed' : 'search-trigger',
+        after: partial('_partial/search/shortcut'),
+        attrs: searchAttrs
+      })
+      continue
+    }
     if (menuItem == null || menuItem.id == null || menuItem.url == null || menuItem.title == null) {
       continue
     }
@@ -9,21 +60,15 @@ function layoutDiv() {
       href: pretty_url(menuItem.url),
       title: __(menuItem.title),
       icon: menuItem.icon,
-      theme: menuItem.theme,
-      active: menuItem.id == page.menu_id,
-      className: menuItem.theme?.length > 0 ? 'is-themed' : '',
-      gradientId: 'menu-grad-' + menuItem.id
+      theme: menuItem.accent,
+      active: menuItem.id == currentMenu,
+      className: menuItem.accent?.length > 0 ? 'is-themed' : ''
     })
   }
-  var body = partial('_partial/components/collection', {options: {
-    layout: 'list',
-    variant: 'nav',
-    items: entries
-  }})
-  if ((body || '').trim().length === 0) {
-    return ''
-  }
-  return `<nav class="menu dis-select${where == 'main' ? ' mobile-hidden' : ''}">${body}</nav>`
+  return partial('_partial/primitives/navigation', {
+    placement: ['main', 'topbar', 'rightbar'].includes(where) ? where : 'leftbar',
+    entries: entries
+  })
 }
 %>