loppo-theme-doc 1.0.0

package/sass/wangdoc.sass

@@ -0,0 +1,197 @@
+// 1. Import the initial variables
+@use "bulma/sass"
+@use "./generic.scss"
+@use "./highlight.sass"
+
+/* social-share */
+@use "./social.scss"
+
+/*
+ * main titles
+ */
+.main
+  h1
+    font-size: sass.$size-1
+  h2
+    font-size: sass.$size-2
+  h3
+    font-size: sass.$size-3
+
+/*
+ * navbar
+ */
+.navbar-brand .title
+  margin-bottom: 0
+
+
+/*
+ * article font
+ */
+.article
+  line-height: 1.6
+  letter-spacing: 0.04rem
+
+
+/*
+ * article title counter
+ */
+.article .content
+  counter-reset: firstLevelTitle
+
+.article .content > h2::before
+  counter-increment: firstLevelTitle
+  content: counter(firstLevelTitle) '. '
+
+.article .content > h2:only-of-type::before
+  content: ''
+
+.article .content > h2
+  counter-reset: secondLevelTitle
+
+.article .content > h3::before
+  counter-increment: secondLevelTitle
+  content: counter(firstLevelTitle) '.' counter(secondLevelTitle) ' '
+
+.article .content .first-level-collapse
+  display: none
+
+/*
+ * article-title
+ */
+
+article.content h2 a,
+article.content h3 a
+  display: none
+
+article.content h2:hover a,
+article.content h3:hover a
+  display: inline
+
+article .page-meta
+  margin: 1em auto
+  p
+    color: var(--bulma-grey-light)
+    text-align: right
+    font-size: 85%
+    a,
+    a:hover
+      color: var(--bulma-grey-light)
+      cursor: default
+
+/* page info */
+.page-info
+  border-top: 1px solid var(--bulma-grey-light)
+  padding-top: 1em
+  p
+    color: var(--bulma-grey-light)
+    line-height: 2
+
+/*
+ * breadcrumb icon
+ */
+
+.breadcrumb .icon:last-child,
+.breadcrumb .icon:first-child
+  margin-left: 0px
+  margin-right: 0px
+
+/*
+ * previous-next nav
+ */
+.level-previous-next
+  padding: 1em
+  background: var(--bulma-light)
+  .level-left, .level-right
+    width: 48%
+    overflow: hidden
+    text-overflow: ellipsis
+
+/*
+ * article-toc
+ */
+.article-toc
+  border: 1px solid #aaa
+  background-color: #f9f9f9
+  display: table
+  padding: 1rem
+
+.article-toc ul
+  margin-left: 0.5rem
+  margin-right: 0.5rem
+
+.article-toc > ul
+  counter-reset: articleTOCFirstLevel
+
+.article-toc > ul > li
+  list-style-type: none
+  counter-reset: articleTOCSecondLevel
+
+.article-toc > ul > li::before
+  counter-increment: articleTOCFirstLevel
+  content: counter(articleTOCFirstLevel) '. '
+
+.article-toc > ul > li > ul > li
+  list-style-type: none
+
+.article-toc > ul > li > ul > li::before
+  counter-increment: articleTOCSecondLevel
+  content: counter(articleTOCFirstLevel) '.' counter(articleTOCSecondLevel) ' '
+
+.toc-controller
+  font-size: 80%
+  a
+    display: inline-block!important
+
+.markdownIt-TOC
+  animation: fadein 1s
+
+@keyframes fadein
+  from
+    opacity: 0
+  to
+    opacity: 1
+
+/* comments */
+#disqus_thread
+  border-top: 1px solid sass.$grey-light
+  padding-top: 1em
+
+/* menu */
+.panel-menu .panel-block,
+.panel-info .panel-block
+  padding: 0.5em 0.75em 0.5em 0em
+  padding-left: 0em
+  .menu
+    font-size: 95%
+    width: 100%
+  .menu-list
+    a
+      padding-left: 0em
+      display: flex
+      word-break: break-all
+      .menu-list-title
+        width: calc(100% - 1.5rem - 14px - 8px)
+    a.is-active
+      color: sass.$grey-dark
+      background-color: sass.$white-ter
+    li
+      .icon
+        margin-top: -4px
+
+/* menu counter */
+.menu-list
+  counter-reset: chapter section
+  > li
+    counter-increment: chapter
+    > a .menu-list-title:before
+      font-weight: 700
+      content: ' ' counter(chapter) '. '
+    > ul
+      counter-reset: section
+      > li
+        counter-increment: section
+        > a .menu-list-title:before
+          font-weight: 700
+          content: ' ' counter(chapter) '.' counter(section) ' '
+
+

package/scripts/goTop.js

@@ -0,0 +1,25 @@
+function addTopElement(title) {
+  const text = document.createTextNode('  ');
+  title.appendChild(text);
+
+  const fa = document.createElement('i');
+  fa.setAttribute('class', 'fa fa-angle-up');
+  const icon = document.createElement('span');
+  icon.setAttribute('class', 'icon');
+  icon.appendChild(fa);
+  const link = document.createElement('a');
+  link.setAttribute('href', '#navbar');
+  link.appendChild(icon);
+
+  title.appendChild(link);
+}
+
+function goTop() {
+  const article = document.querySelector('article.content');
+  const h2s = article.querySelectorAll('h2');
+  const h3s = article.querySelectorAll('h3');
+  h2s.forEach(addTopElement);
+  h3s.forEach(addTopElement);
+}
+
+module.exports = goTop;

package/scripts/hashChange.js

@@ -0,0 +1,10 @@
+/* hashchange handler */
+function hashChange() {
+  var hash = location.hash;
+  if (!hash) return;
+  var nav = document.querySelector('.navbar');
+  var navHeight = nav.getBoundingClientRect().height;
+  window.scrollBy(0, -1 * navHeight);
+};
+
+module.exports = hashChange;

package/scripts/index.js

@@ -0,0 +1,38 @@
+var setMinHeight = require('./setMinHeight');
+var insertArticleToc = require('./insertArticleToc');
+var hashChange = require('./hashChange');
+var navbarHandler = require('./navbarHandler');
+var menuHandler = require('./menuHandler');
+var goTop = require('./goTop');
+var support = require('./support');
+
+/* set content's min-height */
+setMinHeight();
+
+/* add goTop */
+goTop();
+
+/* insert article's toc */
+insertArticleToc();
+
+/* hashchange handler */
+window.onhashchange = hashChange;
+
+/* navabar handler */
+navbarHandler();
+
+/* menu handler */
+menuHandler();
+
+/* toc controller */
+require('./tocHide');
+
+/* social share utilities */
+require('./social-share');
+
+/* loading support script */
+support();
+
+// 重要！
+// 每次更新此脚本，可以打开或关闭下面这行注释，使得脚本长度发生变化
+// console.log();

package/scripts/insertArticleToc.js

@@ -0,0 +1,15 @@
+/* insert article's toc */
+function insertArticleToc() {
+  var article = document.querySelector('article.content');
+  var firstH2Title = article.querySelector('h2');
+  var h2TitleNumber = article.querySelectorAll('h2');
+
+  if (firstH2Title && LOPPO.article_toc && h2TitleNumber.length >= 2) {
+    var toc_div = document.createElement('div');
+    toc_div.setAttribute('class', 'article-toc');
+    toc_div.innerHTML = '<h5>目录 [<span class="toc-controller toc-controller-show"><a>隐藏</a></span>]</h5>' + LOPPO.article_toc;
+    article.insertBefore(toc_div, firstH2Title);
+  }
+}
+
+module.exports = insertArticleToc;

package/scripts/menuHandler.js

@@ -0,0 +1,67 @@
+function menuHandler(e) {
+  // menu initializing
+  const items = [].slice.call(document.querySelectorAll('.menu-list li'));
+  const firstLevel = [].slice.call(document.querySelectorAll('.menu-list > li'));
+  items.forEach(i => {
+    if (i.querySelector('ul')) {
+      i.querySelector('ul').style.display = 'none';
+      i.querySelector('.icon i').classList.remove('fa-caret-down');
+      i.querySelector('.icon i').classList.add('fa-caret-right');
+    }
+  });
+
+  let active = null;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.querySelector('a').classList.contains('is-active')) {
+      active = item;
+      break;
+    }
+  }
+
+  if (active) {
+    let activeLi = active;
+    while (activeLi) {
+      if (activeLi.querySelector('ul')) {
+        activeLi.querySelector('.icon i').classList.remove('fa-caret-right');
+        activeLi.querySelector('.icon i').classList.add('fa-caret-down');
+        activeLi.querySelector('.folder').classList.remove('fa-folder-o');
+        activeLi.querySelector('.folder').classList.add('fa-folder-open-o');
+        activeLi.querySelector('ul').style.display = 'block';
+      }
+      if (firstLevel.indexOf(activeLi) < 0) {
+        activeLi = activeLi.parentNode.parentNode;
+      } else {
+        break;
+      }
+    }
+  }
+
+  // icon listener
+  const icons = [].slice.call(document.querySelectorAll('.menu li a .icon i'));
+  for (let i = 0; i < icons.length; i++) {
+    let icon = icons[i];
+    const icon_container = icon.parentNode;
+    icon_container.addEventListener('click', (e) => {
+      e.preventDefault();
+      const icon = e.target.querySelector('i') || e.target;
+      const childList = icon.parentNode.parentNode.nextElementSibling;
+      const folderIcon = icon.parentNode.nextElementSibling;
+      if (icon.classList.contains('fa-caret-right')) {
+        icon.classList.remove('fa-caret-right');
+        icon.classList.add('fa-caret-down');
+        folderIcon.classList.remove('fa-folder-o');
+        folderIcon.classList.add('fa-folder-open-o');
+        childList.style.display = 'block';
+      } else {
+        icon.classList.add('fa-caret-right');
+        icon.classList.remove('fa-caret-down');
+        folderIcon.classList.remove('fa-folder-open-o');
+        folderIcon.classList.add('fa-folder-o');
+        childList.style.display = 'none';
+      }
+    }, true);
+  }
+}
+
+module.exports = menuHandler;

package/scripts/navbarHandler.js

@@ -0,0 +1,25 @@
+function navbarHandler() {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Check if there are any navbar burgers
+  if ($navbarBurgers.length > 0) {
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+
+      });
+    });
+  }
+}
+
+module.exports = navbarHandler;

package/scripts/setMinHeight.js

@@ -0,0 +1,31 @@
+/* set content's min-height */
+function setMinHeight() {
+  var content = document.querySelector('.article');
+  if (!content) {
+    content = document.querySelector('.homepage');
+  }
+
+  var navbarHeight =
+    window.getComputedStyle(document.querySelector('.navbar'))
+    .getPropertyValue('height');
+
+  var heroHeight = 0;
+  if (document.querySelector('.hero')) {
+    var heroHeight =
+      window.getComputedStyle(document.querySelector('.hero'))
+      .getPropertyValue('height');
+  }
+
+  var footHeight =
+    window.getComputedStyle(document.querySelector('.footer'))
+    .getPropertyValue('height');
+
+  var minHeight = document.documentElement.clientHeight
+    - parseInt(navbarHeight)
+    - parseInt(heroHeight)
+    - parseInt(footHeight);
+
+  content.style.minHeight = minHeight + 'px';
+}
+
+module.exports = setMinHeight;