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

package/layout/_partial/sidebar/search.ejs

@@ -1,54 +1,71 @@
 <%
-const notebook = theme.notebooks.tree[page.notebook]
-if (item.filter == null) {
-  item.filter = 'auto'
-}
-if (item.placeholder == null && item.filter == 'auto') {
-  if (theme.wiki.tree[page.wiki]?.name) {
-    item.placeholder = __('search.search_in', theme.wiki.tree[page.wiki]?.name) 
-  } else if (notebook) {
-    item.placeholder = __('search.search_in', notebook.name || __('btn.notebook'))
-    item.filter = notebook.base_dir
-  }
+var wikiViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'wiki'
+  ? viewModel
+  : null
+var notebookViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'notebook'
+  ? viewModel
+  : null
+var notebookIndex = page.notebookIndex?.mode === 'notes' ? page.notebookIndex.collection : null
+item = item && typeof item === 'object' ? Object.assign({}, item) : {}
+if (item.algoliaFilterPath == null) {
+  item.algoliaFilterPath = 'auto'
 }
 function layoutDiv() {
-  var el = ''
-  if (page.search == false) {
-    return el
+  if (typeof disabled !== 'undefined' && disabled === true) {
+    return ''
   }
-  el += `<div class="search-wrapper" id="search-wrapper">`
-  el += `<div class="search-form" role="search">`
-  var filter = ''
-  if (item.filter == 'auto') {
-    if (page.wiki) {
-      let matches = page.path.match(/(.*?)\/(.*?)\//i)
-      if (matches?.length > 0) {
-        filter = matches[0]
-      }
+  var rawInstanceId = typeof instanceId === 'string' && instanceId.length > 0 ? instanceId : 'default'
+  var algoliaFilterPath = ''
+  if (item.algoliaFilterPath == 'auto') {
+    if (wikiViewModel) {
+      algoliaFilterPath = wikiViewModel.render.layout.algoliaFilterPath
+    } else if (notebookViewModel) {
+      algoliaFilterPath = notebookViewModel.render.layout.algoliaFilterPath
+    } else if (notebookIndex) {
+      algoliaFilterPath = notebookIndex.layout.algoliaFilterPath
     }
   } else {
-    if (item.filter?.length > 0) {
-      filter = item.filter
+    if (item.algoliaFilterPath?.length > 0) {
+      algoliaFilterPath = item.algoliaFilterPath
     }
   }
-  if (filter.length > 0 && !filter.startsWith('/')) {
-    filter = '/' + filter
+  if (algoliaFilterPath.length > 0 && !algoliaFilterPath.startsWith('/')) {
+    algoliaFilterPath = '/' + algoliaFilterPath
+  }
+  var searchTitle = __('btn.search')
+  var searchScope = search_scope(page, typeof viewModel !== 'undefined' ? viewModel : null)
+  var searchPresentation = typeof presentation === 'string' ? presentation : 'leftbar'
+  var iconOnly = searchPresentation === 'topbar' || searchPresentation === 'wiki-toolbar'
+  var searchClassName = typeof hoverSurface !== 'undefined' && hoverSurface === true
+    ? 'search-trigger has-hover-surface'
+    : 'search-trigger'
+  var searchAttrs = {
+    title: searchTitle,
+    'aria-label': searchTitle,
+    'data-shell-action': 'open-search',
+    'data-search-instance': rawInstanceId
+  }
+  if (stellar_config('search.provider') === 'algolia' && algoliaFilterPath.length > 0) {
+    searchAttrs['data-algolia-filter-path'] = algoliaFilterPath
   }
-  var placeholder = item.placeholder || (filter.length > 0 ? __('search.search_in', filter) : __('search.search'))
-  var escapedPlaceholder = escape_html(placeholder)
-  el += `<label class="search-button" for="search-input" aria-hidden="true">`
-  el += icon('default:search', '', true)
-  el += `</label>`
-  el += `<input type="search" class="search-input" id="search-input" aria-label="${escapedPlaceholder}"`
-  if (filter.length > 0) {
-    el += ` data-filter="${escape_html(filter)}"`
+  if (searchScope) {
+    searchAttrs['data-search-domain'] = searchScope.current
+    searchAttrs['data-search-domain-label'] = searchScope.currentLabel
+    searchAttrs['data-search-domain-blog'] = searchScope.hasBlog ? 'true' : 'false'
   }
-  el += ` placeholder="${escapedPlaceholder}">`
-  el += `</div>`
-  el += `<div id="search-result"></div>`
-  el += `<div class="search-no-result">${__('search.no_results')}</div>`
-  el += `</div>`
-  return el
+  return partial('_partial/components/collection', {options: {
+    layout: 'list',
+    variant: 'nav',
+    items: [{
+      type: 'button',
+      title: searchTitle,
+      icon: 'default:search',
+      iconOnly: iconOnly,
+      className: searchClassName,
+      after: iconOnly ? '' : partial('_partial/search/shortcut'),
+      attrs: searchAttrs
+    }]
+  }})
 }
 %>
 <%- layoutDiv() %>

package/layout/_partial/widgets/actions.ejs

@@ -0,0 +1,25 @@
+<%
+var actionItems = Array.isArray(actions) ? actions : []
+function renderActions() {
+  if (actionItems.length === 0) return ''
+  var el = '<div class="region-actions social-wrap ui-collection" data-layout="inline" data-variant="nav" data-density="compact">'
+  for (var action of actionItems) {
+    if (action.type === 'spacer') {
+      el += '<span class="social-spacer" aria-hidden="true"></span>'
+    } else if (action.type === 'dropdown') {
+      el += partial('../dropdown', {item: action, rootClass: 'social-dropdown', triggerClass: ui_classes('social', 'collectionItem', 'is-icon-only'), showTitle: false})
+    } else if (action.type === 'link') {
+      el += `<a class="${ui_classes('social', 'collectionItem', 'is-icon-only')}"${action.title ? ` title="${escape_html(action.title)}"` : ''}`
+      if (action.url) {
+        el += ` href="${escape_html(url_for(action.url))}"`
+        el += action.url.includes('://') ? ' target="_blank" rel="external nofollow noopener noreferrer"' : ' rel="noopener noreferrer"'
+      }
+      el += `><span class="ui-icon">${icon(action.icon, 'no-lazy')}</span></a>`
+    } else if (action.type === 'button') {
+      el += `<button type="button" class="${ui_classes('social', 'collectionItem', 'is-icon-only')}" title="${escape_html(action.title)}" aria-label="${escape_html(action.title)}" onclick="${escape_html(action.onclick)}"><span class="ui-icon">${icon(action.icon, 'no-lazy')}</span></button>`
+    }
+  }
+  return el + '</div>'
+}
+%>
+<%- renderActions() %>

package/layout/_partial/widgets/author.ejs

@@ -1,11 +1,15 @@
 <%
 
 var author = null
-if (theme.authors) {
-  if (page.author?.length > 0 && theme.authors[page.author] != null) {
-    author = theme.authors[page.author]
+var activeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+var authorId = ['post', 'topic'].includes(activeViewModel?.collection?.profile)
+  ? activeViewModel.render.listing.authorId
+  : content_config(page).article?.author
+if (stellar_data('authors')) {
+  if (authorId?.length > 0 && stellar_data('authors')[authorId] != null) {
+    author = stellar_data('authors')[authorId]
   } else {
-    author = theme.default_author
+    author = stellar_data('defaultAuthor')
   }
 }
 
@@ -26,7 +30,7 @@ function layoutDiv() {
 
     // homepage
     el += `<a class="follow" href="${url_for(author.path)}">`
-    el += icon('default:documents')
+    el += '<span class="ui-icon">' + icon('default:documents') + '</span>'
     el += __('btn.all_posts')
     el += `</a>`
   el += `</div>`

package/layout/_partial/widgets/components/linklist.ejs

@@ -14,8 +14,7 @@ function layoutDiv(linklist) {
       title: link.title,
       icon: link.icon,
       active: pretty_url(link.url) == pretty_url(page.path),
-      showTitle: showTitle,
-      gradientRef: 'leftbar-active-icon-grad'
+      showTitle: showTitle
     })
   }
   return partial('_partial/components/collection', {options: {

package/layout/_partial/widgets/ghissues.ejs

@@ -2,20 +2,17 @@
 function layoutDiv() {
   var el = '';
   var repo;
-  var branch = 'main';
-  if (page.repo) {
-    repo = page.repo
-  } else if (theme.wiki.tree[page.wiki]?.repo) {
-    const proj = theme.wiki.tree[page.wiki]
-    repo = proj.repo
-    if (proj.branch != undefined) {
-      branch = proj.branch
-    }
+  var pageConfig = content_config(page);
+  var wikiViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'wiki' ? viewModel : null
+  if (wikiViewModel?.render?.listing?.repository) {
+    repo = wikiViewModel.render.listing.repository
+  } else if (pageConfig.source?.repository) {
+    repo = pageConfig.source.repository
   }
   if (repo == undefined) {
     return el;
   }
-  item.api = `https://${theme.api_host.ghapi}/repos/${repo}/issues?per_page=${item.limit}`;
+  item.api = `${stellar_config('services.github.apiUrl')}/repos/${repo}/issues?per_page=${item.limit}`;
   if (item.labels) {
     item.api += '&labels=' + item.labels;
   }

package/layout/_partial/widgets/ghrepo.ejs

@@ -2,41 +2,48 @@
 function layoutDiv() {
   var el = '';
   var repo;
-  var branch = 'main';
-  if (page.repo) {
-    repo = page.repo
-  } else if (theme.wiki.tree[page.wiki]?.repo) {
-    const proj = theme.wiki.tree[page.wiki]
-    repo = proj.repo
-    if (proj.branch != undefined) {
-      branch = proj.branch
-    }
+  var repoApi;
+  var tagsApi;
+  var pageConfig = content_config(page);
+  var wikiViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'wiki'
+    ? viewModel
+    : null
+  if (wikiViewModel) {
+    repo = wikiViewModel.render.listing.repository
+    repoApi = wikiViewModel.render.listing.repositoryApi
+    tagsApi = repoApi ? repoApi + '/tags' : ''
+  } else if (pageConfig.source?.repository) {
+    repo = pageConfig.source.repository
   }
-  if (repo == undefined) {
+  if (!repo) {
     return el;
   }
+  if (!wikiViewModel) {
+    repoApi = stellar_config('services.github.apiUrl') + '/repos/' + repo
+    tagsApi = repoApi + '/tags'
+  }
   // 布局
   el += `<widget class="widget-wrapper${scrollreveal(' ')} ghrepo">`
   // body
   el += '<div class="widget-body">';
-  el += '<div class="items data-service ds-ghinfo" data-api="https://' + theme.api_host.ghapi + '/repos/' + repo + '">';
+  el += '<div class="items data-service ds-ghinfo" data-api="' + escape_html(repoApi) + '">';
   el += '<a class="repo" href="https://github.com/' + repo + '" target="_blank" rel="external nofollow noopener noreferrer">';
     el += '<div class="repo-name flex-row">';
-      el += icon('github:repo')
+      el += '<span class="ui-icon">' + icon('github:repo') + '</span>'
       el += repo;
     el += '</div>';
     el += '<div class="repo-desc"><span type="text" id="description">&nbsp;</span></div>';
     el += '<div class="grid">';
       el += '<div class="flex-row">';
-        el += icon('github:star')
+        el += '<span class="ui-icon">' + icon('github:star') + '</span>'
         el += '<span type="text" id="stargazers_count"></span>';
       el += '</div>';
       el += '<div class="flex-row">';
-        el += icon('github:fork')
+        el += '<span class="ui-icon">' + icon('github:fork') + '</span>'
         el += '<span type="text" id="forks_count"></span>';
       el += '</div>';
-      el += '<div class="flex-row data-service ds-ghinfo" index="0" data-api="https://' + theme.api_host.ghapi + '/repos/' + repo + '/tags">';
-        el += icon('github:tag')
+      el += '<div class="flex-row data-service ds-ghinfo" index="0" data-api="' + escape_html(tagsApi) + '">';
+        el += '<span class="ui-icon">' + icon('github:tag') + '</span>'
         el += '<span type="text" id="latest-tag-name">0</span>';
       el += '</div>';
     el += '</div>';

package/layout/_partial/widgets/ghuser.ejs

@@ -30,13 +30,13 @@ function layoutDiv() {
   if (item.header) {
     el += `<div class="widget-header">`
       el += `<a class="gh-url" href="https://github.com/${item.username}">
-        ${icon('github:logo-alt')}
+        <span class="ui-icon">${icon('github:logo-alt')}</span>
         <span>github/${item.username}</span>
         </a>`
     el += `</div>`
   }
   // body
-  el += '<div class="widget-body data-service ds-ghinfo" data-api="https://' + theme.api_host.ghapi + '/users/' + item.username + '">';
+  el += '<div class="widget-body data-service ds-ghinfo" data-api="' + stellar_config('services.github.apiUrl') + '/users/' + item.username + '">';
     if (item.avatar) {
       el += '<div class="avatar" ><img no-lazy type="img" id="avatar_url" src="' + config.avatar + '"></div>';
     }
@@ -55,7 +55,7 @@ function layoutDiv() {
     // follow
     if (item.follow) {
       el += '<a class="follow" href="https://github.com/' + item.username + '">';
-      el += icon('github:logo')
+      el += '<span class="ui-icon">' + icon('github:logo') + '</span>'
       el += 'Follow';
       el += '</a>';
     }

package/layout/_partial/widgets/recent.ejs

@@ -2,15 +2,27 @@
 function layoutDiv() {
   var action = ''
   if (item.rss) {
-    action += '<a class="cap-action" id="rss" title="Subscribe" href="' + escape_html(item.rss) + '">'
-    action += icon('default:rss')
+    action += '<a class="' + ui_classes('cap-action') + '" id="rss" title="Subscribe" href="' + escape_html(item.rss) + '">'
+    action += '<span class="ui-icon">' + icon('default:rss') + '</span>'
     action += '</a>'
   }
   var arr = []
-  if (page.menu_id == 'wiki') {
-    arr = theme.wiki.all_pages.filter(function(p) {
-      if (p.wiki) {
-        var proj = theme.wiki.tree[p.wiki]
+  var notebookViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'notebook'
+    ? viewModel
+    : null
+  var notebookItems = notebookViewModel
+    ? notebookViewModel.render.layout.recentItems
+    : page.notebookIndex?.mode === 'collections'
+      ? page.notebookIndex.recentItems
+      : page.notebookIndex?.mode === 'notes'
+        ? page.notebookIndex.collection.recentItems
+        : null
+  if (notebookItems) {
+    arr = notebookItems.slice()
+  } else if (content_config(page).activeMenu == 'wiki') {
+    arr = stellar_data('wiki').all_pages.filter(function(p) {
+      if (p.collectionId) {
+        var proj = stellar_data('wiki').tree[p.collectionId]
         return proj?.index != false
       }
       return false
@@ -18,14 +30,6 @@ function layoutDiv() {
     arr = arr.sort(function(p1, p2) {
       return p1.updated > p2.updated ? -1 : 1
     })
-  } else if (page.layout === 'notebooks') {
-    arr = site.pages.filter(function(p) {
-      return p.notebook
-    }).sort('-updated')
-  } else if (page.notebook) {
-    arr = site.pages.filter(function(p) {
-      return p.notebook === page.notebook
-    }).sort('-updated')
   } else {
     arr = site.posts.filter(function(p) {
       return p.title && p.title.length > 0
@@ -41,15 +45,15 @@ function layoutDiv() {
       return
     }
     var prefix = ''
-    if (post.wiki) {
-      var proj = theme.wiki.tree[post.wiki]
-      prefix = proj?.name || post.wiki || ''
-    } else if (page.layout === 'notebooks') {
-      var notebook = theme.notebooks.tree[post.notebook]
-      prefix = notebook?.name || post.notebook || ''
+    var wikiId = notebookItems ? null : collection_id(post, 'wiki') || post.collectionId
+    if (wikiId) {
+      var proj = stellar_data('wiki').tree[wikiId]
+      prefix = proj?.name || wikiId
+    } else if (notebookItems && page.notebookIndex?.mode === 'collections') {
+      prefix = post.collectionName || post.collectionId || ''
     }
     entries.push({
-      href: pretty_url(post.link || post.path),
+      href: pretty_url(notebookItems ? post.href : post.link || post.path),
       title: post.title,
       prefix: prefix,
       indicator: false

package/layout/_partial/widgets/related.ejs

@@ -1,20 +1,16 @@
 <%
 function relatedPostsInTopic() {
-  if (page.topic?.length == 0) {
-    return ''
-  }
-  var topic = theme.topic.tree[page.topic]
-  if (topic == null) {
-    return ''
-  }
-  var entries = []
-  for (var post of topic.pages) {
-    entries.push({
+  var topicViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'topic'
+    ? viewModel
+    : null
+  if (!topicViewModel) return ''
+  var entries = topicViewModel.collection.navigation.series.map(function(post) {
+    return {
       href: pretty_url(post.path),
       title: post.title,
-      active: post.path == page.path
-    })
-  }
+      active: post.current
+    }
+  })
   var body = partial('_partial/components/collection', {options: {
     layout: 'list',
     variant: 'nav',
@@ -23,32 +19,27 @@ function relatedPostsInTopic() {
   }})
   return partial('_partial/components/widget-frame', {
     className: 'related-widget',
-    title: __('btn.topic') + __('symbol.colon') + (topic.name || topic.title),
+    title: __('btn.topic') + __('symbol.colon') + (topicViewModel.collection.identity.headline || topicViewModel.collection.identity.name),
     body: body,
     reveal: false
   })
 }
 
 function relatedWiki() {
-  var thisItemObject = theme.wiki.tree[page.wiki]
-  if (thisItemObject == null) {
-    return ''
-  }
-  var relatedItems = thisItemObject.relatedItems || []
+  var wikiViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'wiki'
+    ? viewModel
+    : null
+  if (!wikiViewModel) return ''
   var el = ''
-  for (var relatedItem of relatedItems) {
-    var entries = []
-    for (var id of relatedItem.items) {
-      var relatedProject = theme.wiki.tree[id]
-      if (relatedProject) {
-        entries.push({
-          href: pretty_url(relatedProject.homepage?.path),
-          title: relatedProject.title,
-          description: relatedProject.description,
-          indicator: false
-        })
+  for (var relatedItem of wikiViewModel.render.article.related) {
+    var entries = relatedItem.items.map(function(project) {
+      return {
+        href: pretty_url(project.href),
+        title: project.title,
+        description: project.description,
+        indicator: false
       }
-    }
+    })
     var body = partial('_partial/components/collection', {options: {
       layout: 'list',
       variant: 'summary',
@@ -65,10 +56,10 @@ function relatedWiki() {
 }
 
 function layoutDiv() {
-  if (page.wiki?.length > 0) {
-    return relatedWiki()
-  } else if (page.topic?.length > 0) {
+  if (typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'topic') {
     return relatedPostsInTopic()
+  } else if (typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'wiki') {
+    return relatedWiki()
   }
   return ''
 }

package/layout/_partial/widgets/settings.ejs

@@ -0,0 +1,17 @@
+<%
+var settingsPlacement = typeof placement === 'string' ? placement : 'leftbar'
+var provider = stellar_config('comments.provider') || ''
+var supportedProvider = ['artalk', 'waline', 'twikoo'].includes(provider.toLowerCase())
+var identityEnabled = supportedProvider
+var settingsName = __('settings.label')
+var settingsProfile = stellar_config('profiles.settings')
+var settingsUrl = settingsProfile?.path || '/settings/'
+var fallbackAvatar = stellar_config('fallbacks.avatar') || ''
+var fallbackAvatarUrl = fallbackAvatar ? url_for(fallbackAvatar) : ''
+%>
+<a class="<%- ui_classes('settings-widget', 'collectionItem') %>" href="<%- escape_html(url_for(settingsUrl)) %>" data-profile-provider="<%- escape_html(provider) %>" data-profile-identity-enabled="<%- identityEnabled ? 'true' : 'false' %>" data-profile-fallback-avatar="<%- escape_html(fallbackAvatarUrl) %>" data-settings-placement="<%- escape_html(settingsPlacement) %>" data-settings-label="<%- escape_html(settingsName) %>" aria-label="<%- escape_html(settingsName) %>" title="<%- escape_html(settingsName) %>">
+  <span class="settings-widget__avatar" aria-hidden="true">
+    <span class="ui-icon"><%- icon('default:settings', '', true) %></span>
+  </span>
+  <span class="settings-widget__name ui-collection__title"><%- settingsName %></span>
+</a>

package/layout/_partial/widgets/tagtree.ejs

@@ -1,18 +1,26 @@
 <%
-var notebook = theme.notebooks.tree[page.notebook]
-var tagTree = notebook?.tagTree
+var notebookViewModel = typeof viewModel !== 'undefined' && viewModel?.collection?.profile === 'notebook'
+  ? viewModel
+  : null
+var notebookIndex = page.notebookIndex?.mode === 'notes' ? page.notebookIndex : null
+var tagTreeItems = notebookViewModel
+  ? notebookViewModel.render.layout.tagTree
+  : notebookIndex?.tags || []
+var tagTree = new Map(tagTreeItems.map(tag => [tag.id, tag]))
+var activeTag = notebookIndex?.activeTag || ''
+var notebookId = notebookViewModel?.collection.id || notebookIndex?.collection.id || ''
 
 function isLeaf(tag) {
   return tag.id === '' || tag.children.length === 0
 }
 
 function getTagcon(tag) {
-  var tagcons = theme.notebook.tagcons || {}
-  return tagcons[tag.name] || tagcons[tag.id] || tagcons[tag.part] || tagcons[tag.part.toLowerCase()] || tagcons['']
+  var tagIcons = stellar_config('profiles.notebook.tagIcons') || {}
+  return tagIcons[tag.name] || tagIcons[tag.id] || tagIcons[tag.label] || tagIcons[tag.label.toLowerCase()] || 'quot:hashtag'
 }
 
 function layoutTag(tag, level) {
-  var active = page.activeTag === tag.id
+  var active = activeTag === tag.id
   var tagcon = tag.id !== '' && item.show_tagcon ? getTagcon(tag) : ''
   var trailing = ''
   if (!isLeaf(tag)) {
@@ -21,7 +29,7 @@ function layoutTag(tag, level) {
   return partial('_partial/components/collection-item', {
     item: {
       href: pretty_url(tag.path),
-      title: tag.id === '' ? __('meta.all_notes') : tag.part,
+      title: tag.id === '' ? __('meta.all_notes') : tag.label,
       icon: tagcon,
       active: active,
       indicator: false,
@@ -36,8 +44,8 @@ function tagAndSub(tag, level) {
   if (!tag) {
     return ''
   }
-  var active = page.activeTag === tag.id
-  var expanded = item.expand_all || (item.expand_active && active) || page.activeTag?.startsWith(tag.id + '/')
+  var active = activeTag === tag.id
+  var expanded = item.expand_all || (item.expand_active && active) || activeTag.startsWith(tag.id + '/')
   var classes = isLeaf(tag) ? ' is-leaf' : ' is-parent'
   if (expanded) {
     classes += ' is-expanded'
@@ -54,7 +62,7 @@ function tagAndSub(tag, level) {
 }
 
 function layoutDiv() {
-  if (!tagTree) {
+  if (!tagTree.has('')) {
     return ''
   }
   var body = '<div class="ui-collection tag-tree" data-layout="list" data-variant="nav" data-density="compact">'
@@ -67,7 +75,7 @@ function layoutDiv() {
     className: 'tag-tree-widget',
     title: __('meta.tag_tree'),
     body: body,
-    attrs: {'data-notebook': page.notebook}
+    attrs: {'data-notebook': notebookId}
   })
 }
 %>

package/layout/_partial/widgets/toc.ejs

@@ -1,6 +1,8 @@
 <%
 function layoutTocBody() {
-  var tocBody = toc(page.content, {
+  var activeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+  var content = activeViewModel ? activeViewModel.item.content : page.content
+  var tocBody = toc(content, {
     list_number: item.list_number,
     min_depth: item.min_depth,
     max_depth: item.max_depth
@@ -8,21 +10,23 @@ function layoutTocBody() {
   if (tocBody.length === 0) {
     return ''
   }
-  return tocBody.replace('class="toc"', 'class="toc ui-collection-adapter"')
+  return tocBody
+    .replace('class="toc"', 'class="toc ui-collection-adapter"')
+    .replace(/class="toc-link/g, 'class="' + ui_classes('toc-link', 'interactive'))
 }
 
 function layoutTocAction() {
-  return '<a class="cap-action" onclick="sidebar.toggleTOC()">' + icon('default:rightbar', '', true) + '</a>'
+  return '<button type="button" class="' + ui_classes('cap-action') + '" data-shell-action="toggle-toc" aria-label="Toggle table of contents" aria-pressed="false"><span class="ui-icon">' + icon('default:rightbar', '', true) + '</span></button>'
 }
 
 function layoutFooter(hasComments) {
   var footer = '<div class="widget-footer">'
-  footer += '<a class="top" onclick="util.scrollTop()">'
-  footer += icon('default:upup', '', true)
+  footer += '<a class="' + ui_classes('top', 'interactive') + '" onclick="util.scrollTop()">'
+  footer += '<span class="ui-icon">' + icon('default:to-top', '', true) + '</span>'
   footer += '<span>' + __('btn.top') + '</span></a>'
   if (hasComments) {
-    footer += '<a class="buttom" onclick="util.scrollComment()">'
-    footer += icon('default:tocomment', '', true)
+    footer += '<a class="' + ui_classes('buttom', 'interactive') + '" onclick="util.scrollComment()">'
+    footer += '<span class="ui-icon">' + icon('default:to-comment', '', true) + '</span>'
     footer += '<span>' + __('btn.comments') + '</span></a>'
   }
   footer += '</div>'
@@ -30,10 +34,14 @@ function layoutFooter(hasComments) {
 }
 
 function layoutDiv() {
+  var activeViewModel = typeof viewModel !== 'undefined' ? viewModel : null
+  var wikiViewModel = activeViewModel?.collection?.profile === 'wiki' ? activeViewModel : null
   var tocBody = layoutTocBody()
   var hasToc = tocBody.trim().length > 0
-  var hasRemoteMd = has_remote_md(page)
-  var hasComments = page.cmt_rendered === true
+  var hasRemoteMd = wikiViewModel ? wikiViewModel.render.article.readmeHtml.length > 0 : has_remote_md(page)
+  var hasComments = activeViewModel
+    ? activeViewModel.render.article.comments.enabled
+    : comments_model(page).enabled
   if (!hasToc && !hasRemoteMd && !hasComments) {
     return ''
   }