You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/02/25 02:48:02 UTC
[skywalking-website] branch master updated: Refactor doc menu (#228)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new ded6034 Refactor doc menu (#228)
ded6034 is described below
commit ded60342ef8229c25b1c909d5beec91c63202cf1
Author: Juntao Zhang <jt...@163.com>
AuthorDate: Thu Feb 25 10:47:56 2021 +0800
Refactor doc menu (#228)
---
LICENSE | 1 +
docs.js | 2 +-
themes/docsy/assets/scss/_custom_project_doc.scss | 76 ++-----
themes/docsy/assets/scss/_styles_project.scss | 2 +
themes/docsy/assets/scss/sidebar-menu.scss | 240 +++++++++++++++++++++
themes/docsy/layouts/partials/sidebar-menu.html | 22 ++
themes/docsy/layouts/partials/sidebar-submenu.html | 22 ++
themes/docsy/layouts/projectDoc/baseof.html | 18 +-
themes/docsy/static/js/sidebar-menu.js | 40 ++++
9 files changed, 359 insertions(+), 64 deletions(-)
diff --git a/LICENSE b/LICENSE
index df22636..58919c3 100644
--- a/LICENSE
+++ b/LICENSE
@@ -212,4 +212,5 @@
proto files from mdo/github-buttons: https://github.com/mdo/github-buttons Apache 2.0
proto files from google/docsy: https://github.com/google/docsy Apache 2.0
proto files from nolimits4web/swiper https://github.com/nolimits4web/swiper The MIT License (MIT)
+ proto files from huang-x-h/sidebar-menu https://github.com/huang-x-h/sidebar-menu The MIT License (MIT)
diff --git a/docs.js b/docs.js
index 094caf3..9b83755 100644
--- a/docs.js
+++ b/docs.js
@@ -133,7 +133,7 @@ async function traverseDocsList(result) {
tpl += `{{ if in .File.Path "${localPath.split('/content/')[1]}" }}
<h5>Documentation: {{.Site.Data.docSidebar.${menuFileName}.version}}</h5>
- {{ partial "sidebar-recurse.html" .Site.Data.docSidebar.${menuFileName} }}
+ {{ partial "sidebar-menu.html" .Site.Data.docSidebar.${menuFileName} }}
<div class="commit-id">Commit Id: {{.Site.Data.docSidebar.${menuFileName}.commitId}}</div>
{{ end }}\n`
execSync(`"./doc.sh" ${repo} ${repoUrl} ${commitId} ${localPath} ${menuFileName}`);
diff --git a/themes/docsy/assets/scss/_custom_project_doc.scss b/themes/docsy/assets/scss/_custom_project_doc.scss
index 85a614f..f456f9e 100644
--- a/themes/docsy/assets/scss/_custom_project_doc.scss
+++ b/themes/docsy/assets/scss/_custom_project_doc.scss
@@ -1,95 +1,51 @@
.project-doc {
.td-content {
#overview, #community {
- padding: 0;
- text-align: left;
- margin-bottom: 1rem;
+ padding: 0;
+ text-align: left;
+ margin-bottom: 1rem;
}
}
.td-sidebar {
font-weight: 300;
padding-top: 5.5rem;
- padding-right: 5px;
+ padding-right: 0px;
+ padding-left: 2px;
height: 100vh;
overflow-y: scroll;
position: sticky;
position: -webkit-sticky;
top: 0px;
+ background-color: #fff;
&::-webkit-scrollbar {
- width: 6px;
+ width: 4px;
}
&::-webkit-scrollbar-thumb {
- background-color: #999 !important;
- border-radius: 5px;
- }
-
- h6, div {
- padding-top: 0.2rem;
- margin-bottom: 0.6rem;
- color: #495057;
- font-weight: 300;
+ background-color: #bebebe !important;
+ border-radius: 2px;
}
h5 {
padding-top: 0;
- font-weight: 350;
+ font-weight: 400;
font-size: 16px;
- }
-
- ul {
- padding-left: 0;
-
- a {
- color: #495057;
-
- &:hover {
- color: #72A1E5;
- }
-
- &.active {
- font-weight: 600;
- }
- }
- }
-
- li li {
- margin-left: 0.8rem;
- line-height: 1.1 !important;
- padding-bottom: 0.6em;
-
- &:last-child {
- padding-bottom: 0em;
-
- }
- }
-
- li {
- list-style: none;
- display: block;
- }
- }
-
- .td-main .td-toc {
- .fix {
- box-shadow: none;
- }
-
- #TableOfContents {
- width: auto;
+ text-indent: 8px;
}
}
.commit-id {
- padding-top: 0.5rem !important;
- border-top: 1px solid #cccccca1;
+ padding-top: 1rem !important;
+ border-top: 1px solid #cccccc40;
word-break: break-all;
font-size: 13px;
+ margin-top: 0.5rem;
+ text-indent: 8px;
+ color: #888;
}
-
}
@media (max-width: 768px) {
diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss
index eafa48f..f3b13dc 100644
--- a/themes/docsy/assets/scss/_styles_project.scss
+++ b/themes/docsy/assets/scss/_styles_project.scss
@@ -11,6 +11,8 @@ assets/scss/_styles_project.scss
@import "custom_downloads.scss";
@import "custom_tags.scss";
@import "custom_project_doc.scss";
+@import "sidebar-menu";
+
//common
html, body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
diff --git a/themes/docsy/assets/scss/sidebar-menu.scss b/themes/docsy/assets/scss/sidebar-menu.scss
new file mode 100644
index 0000000..5048b21
--- /dev/null
+++ b/themes/docsy/assets/scss/sidebar-menu.scss
@@ -0,0 +1,240 @@
+.project-doc {
+ $blue: #3176d9;
+
+ .animate-menu-push {
+ left: 0;
+ position: relative;
+ transition: all 0.3s ease;
+ }
+
+ .animate-menu-push.animate-menu-push-right {
+ left: 200px;
+ }
+
+ .animate-menu-push.animate-menu-push-left {
+ left: -200px;
+ }
+
+ .animate-menu {
+ position: fixed;
+ top: 0;
+ width: 200px;
+ height: 100%;
+ transition: all 0.3s ease;
+ }
+
+ .animate-menu-left {
+ left: -200px;
+ }
+
+ .animate-menu-left.animate-menu-open {
+ left: 0;
+ }
+
+ .animate-menu-right {
+ right: -200px;
+ }
+
+ .animate-menu-right.animate-menu-open {
+ right: 0;
+ }
+
+ .sidebar-menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background-color: transparent;
+ }
+
+ .sidebar-menu > li {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ }
+
+ .sidebar-menu > li > a {
+ padding: 12px 5px 12px 5px;
+ display: block;
+ border-left: 3px solid transparent;
+ color: #2c3e50;
+ }
+
+ .sidebar-menu > li > a > .fa {
+ width: 20px;
+ }
+
+ .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
+ color: $blue;
+ background: #ffffff;
+ border-left-color: $blue;
+ font-weight: 600;
+ }
+
+ .sidebar-menu > li .label,
+ .sidebar-menu > li .badge {
+ margin-top: 3px;
+ margin-right: 5px;
+ }
+
+ .sidebar-menu li.sidebar-header {
+ padding: 10px 25px 10px 15px;
+ font-size: 12px;
+ color: #4b646f;
+ background: #1a2226;
+ }
+
+ .sidebar-menu li > a > .fa-angle-left {
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin-right: 10px;
+ margin-top: 3px;
+ }
+
+ .sidebar-menu li.active > a > .fa-angle-left {
+ transform: rotate(-90deg);
+ }
+
+ .sidebar-menu li.active > .sidebar-submenu {
+ display: block;
+ }
+
+ .sidebar-menu a {
+ color: #2c3e50;
+ text-decoration: none;
+ }
+
+ .sidebar-menu .sidebar-submenu {
+ display: none;
+ list-style: none;
+ padding-left: 5px;
+ margin: 0 1px;
+ background: #f8f9fa;
+ }
+
+ .sidebar-menu .sidebar-submenu .sidebar-submenu {
+ padding-left: 20px;
+ }
+
+ .sidebar-menu .sidebar-submenu > li > a {
+ padding: 5px 5px 5px 5px;
+ font-size: 14px;
+ color: #2c3e50;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ }
+
+ .sidebar-menu .sidebar-submenu > li > a > .fa {
+ width: 20px;
+ transition: transform 0.3s;
+ }
+
+ .sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
+ .sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
+ width: auto;
+ }
+
+ .sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
+ color: $blue;
+ }
+
+ .sidebar-menu-rtl {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ background-color: #222d32;
+ }
+
+ .sidebar-menu-rtl > li {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ }
+
+ .sidebar-menu-rtl > li > a {
+ padding: 12px 15px 12px 5px;
+ display: block;
+ border-left: 3px solid transparent;
+ color: #2c3e50;
+ }
+
+ .sidebar-menu-rtl > li > a > .fa {
+ width: 20px;
+ }
+
+ .sidebar-menu-rtl > li:hover > a, .sidebar-menu-rtl > li.active > a {
+ color: $blue;
+ background: #ffffff;
+ border-left-color: $blue;
+ font-weight: 600;
+ }
+
+ .sidebar-menu-rtl > li .label,
+ .sidebar-menu-rtl > li .badge {
+ margin-top: 3px;
+ margin-right: 5px;
+ }
+
+ .sidebar-menu-rtl li.sidebar-header {
+ padding: 10px 15px 10px 25px;
+ font-size: 12px;
+ color: #4b646f;
+ background: #1a2226;
+ }
+
+ .sidebar-menu-rtl li > a > .fa-angle-left {
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin-right: 10px;
+ margin-top: 3px;
+ }
+
+ .sidebar-menu-rtl li.active > a > .fa-angle-left {
+ transform: rotate(-90deg);
+ }
+
+ .sidebar-menu-rtl li.active > .sidebar-submenu {
+ display: block;
+ }
+
+ .sidebar-menu-rtl a {
+ color: #2c3e50;
+ text-decoration: none;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu {
+ display: none;
+ list-style: none;
+ padding-right: 5px;
+ margin: 0 1px;
+ background: #f8f9fa;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu .sidebar-submenu {
+ padding-right: 20px;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu > li > a {
+ padding: 5px 15px 5px 5px;
+ display: block;
+ font-size: 14px;
+ color: #2c3e50;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu > li > a > .fa {
+ width: 20px;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-left,
+ .sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-down {
+ width: auto;
+ }
+
+ .sidebar-menu-rtl .sidebar-submenu > li.active > a, .sidebar-menu-rtl .sidebar-submenu > li > a:hover {
+ color: $blue;
+ }
+
+}
+
diff --git a/themes/docsy/layouts/partials/sidebar-menu.html b/themes/docsy/layouts/partials/sidebar-menu.html
new file mode 100644
index 0000000..65cff04
--- /dev/null
+++ b/themes/docsy/layouts/partials/sidebar-menu.html
@@ -0,0 +1,22 @@
+
+<ul class="sidebar-menu">
+ {{ range .catalog }}
+
+ <li>
+ {{if .catalog}}
+
+ {{if .path}}
+ <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+ {{else}}
+ <a href="#">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+ {{end}}
+
+ {{ partial "sidebar-submenu.html" . }}
+ {{else}}
+ <a href="{{ .path }}">{{ .name }}</a>
+ {{end}}
+ </li>
+
+ {{ end }}
+
+</ul>
\ No newline at end of file
diff --git a/themes/docsy/layouts/partials/sidebar-submenu.html b/themes/docsy/layouts/partials/sidebar-submenu.html
new file mode 100644
index 0000000..b6df1ce
--- /dev/null
+++ b/themes/docsy/layouts/partials/sidebar-submenu.html
@@ -0,0 +1,22 @@
+
+<ul class="sidebar-submenu" >
+ {{ range .catalog }}
+
+ <li>
+ {{if .catalog}}
+
+ {{if .path}}
+ <a href="{{ .path }}">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+ {{else}}
+ <a href="#">{{ .name }}<i class="fa fa-angle-left pull-right"></i></a>
+ {{end}}
+
+ {{ partial "sidebar-submenu.html" . }}
+ {{else}}
+ <a href="{{ .path }}">{{ .name }}</a>
+ {{end}}
+ </li>
+
+ {{ end }}
+
+</ul>
diff --git a/themes/docsy/layouts/projectDoc/baseof.html b/themes/docsy/layouts/projectDoc/baseof.html
index b0571b4..b95ed7b 100644
--- a/themes/docsy/layouts/projectDoc/baseof.html
+++ b/themes/docsy/layouts/projectDoc/baseof.html
@@ -3,6 +3,7 @@
<head>
{{ partial "head.html" . }}
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body class="td-{{ .Kind }} project-doc">
<header>
@@ -31,12 +32,23 @@
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
</body>
+ <script src="/js/sidebar-menu.js"></script>
<script>
$(function (){
+ $.sidebarMenu($('.sidebar-menu'))
var path = window.location.pathname;
- $('.td-sidebar a').each(function (e){
- if($(this).attr('href')+'/'==path){
- $(this).addClass('active')
+ var hash = window.location.hash;
+ var $a = $('.td-sidebar a')
+ $a.on('click',function (){
+ var url = $(this).attr('href')
+ if(url!=='#'){
+ window.location.href = url
+ }
+ })
+ $a.each(function (e){
+ if($(this).attr('href')+'/'===path||$(this).attr('href').replace('#','/#') === path+hash){
+ $(this).parents('.sidebar-submenu').addClass('menu-open').show()
+ $(this).parents('li').addClass('active').show()
}
})
})
diff --git a/themes/docsy/static/js/sidebar-menu.js b/themes/docsy/static/js/sidebar-menu.js
new file mode 100644
index 0000000..02ac781
--- /dev/null
+++ b/themes/docsy/static/js/sidebar-menu.js
@@ -0,0 +1,40 @@
+$.sidebarMenu = function(menu) {
+ var animationSpeed = 300,
+ subMenuSelector = '.sidebar-submenu';
+
+ $(menu).on('click', 'li a', function(e) {
+ var $this = $(this);
+ var checkElement = $this.next();
+
+ if (checkElement.is(subMenuSelector) && checkElement.is(':visible')) {
+ checkElement.slideUp(animationSpeed, function() {
+ checkElement.removeClass('menu-open');
+ });
+ checkElement.parent("li").removeClass("active");
+ }
+
+ //If the menu is not visible
+ else if ((checkElement.is(subMenuSelector)) && (!checkElement.is(':visible'))) {
+ //Get the parent menu
+ var parent = $this.parents('ul').first();
+ //Close all open menus within the parent
+ var ul = parent.find('ul:visible').slideUp(animationSpeed);
+ //Remove the menu-open class from the parent
+ ul.removeClass('menu-open');
+ //Get the parent li
+ var parent_li = $this.parent("li");
+
+ //Open the target menu and add the menu-open class
+ checkElement.slideDown(animationSpeed, function() {
+ //Add the class active to the parent li
+ checkElement.addClass('menu-open');
+ parent.find('li.active').removeClass('active');
+ parent_li.addClass('active');
+ });
+ }
+ //if this isn't a link, prevent the page from being redirected
+ if (checkElement.is(subMenuSelector)) {
+ e.preventDefault();
+ }
+ });
+}