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 2020/12/05 00:46:09 UTC
[skywalking-website] branch master updated: Add a button that links
to the demo (#164)
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 c7c8b67 Add a button that links to the demo (#164)
c7c8b67 is described below
commit c7c8b6727d6fe82187adaee960918558841a53ac
Author: Juntao Zhang <jt...@163.com>
AuthorDate: Sat Dec 5 08:46:01 2020 +0800
Add a button that links to the demo (#164)
---
content/_index.html | 24 +++++++++++++++-
themes/docsy/assets/js/base.js | 18 ++++++++++++
themes/docsy/assets/scss/_styles_project.scss | 40 +++++++++++++++++++++++++++
3 files changed, 81 insertions(+), 1 deletion(-)
diff --git a/content/_index.html b/content/_index.html
index 0ba1a00..d10e9d1 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -11,7 +11,29 @@ linkTitle = "Apache SkyWalking"
<a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/apache/skywalking">
GitHub<i class="fab fa-github ml-2 "></i>
</a>
- <p class="lead mt-5">Application performance monitor tool for distributed systems, especially designed for microservices, cloud native and container-based (Docker, Kubernetes, Mesos) architectures.</p>
+ <div class="btn-group">
+ <a class="btn btn-lg btn-primary mr-3 mb-4 btn-demo dropdown-toggle"
+ data-toggle="dropdown"
+ aria-haspopup="true" aria-expanded="false"
+ href="javascript:;">
+ Live Demo<i class="fas fa-chart-line ml-2"></i>
+ </a>
+ <div class="dropdown-menu demo-box">
+ <span class="icon-copy fa fa-copy" title="copy"></span>
+ <h6 class="dropdown-header">User: skywalking</h6>
+ <h6 class="dropdown-header">Password: skywalking</h6>
+ <div class="dropdown-item">
+ <span class="line"></span>
+ <a class="btn demo-link" target="_blank" href="http://demo.skywalking.apache.org/">
+ Go
+ </a>
+ </div>
+ </div>
+ </div>
+ <p class="lead mt-5">
+ Application performance monitor tool for distributed systems, especially designed for microservices, cloud native and container-based (Docker, Kubernetes, Mesos) architectures.
+ </p>
+
</div>
{{< /blocks/cover >}}
diff --git a/themes/docsy/assets/js/base.js b/themes/docsy/assets/js/base.js
index 49f27d0..91c5af9 100644
--- a/themes/docsy/assets/js/base.js
+++ b/themes/docsy/assets/js/base.js
@@ -61,5 +61,23 @@ limitations under the License.
});
});
+ $(function () {
+ if (!$('.icon-copy').length) {
+ return
+ }
+ $('.icon-copy').on('click', function () {
+ const input = document.createElement('input');
+ document.body.appendChild(input);
+ input.setAttribute('value', 'skywalking');
+ input.setAttribute('style', 'opacity:0');
+ input.select();
+ if (document.execCommand('copy')) {
+ document.execCommand('copy');
+ alert('copied');
+ window.open('http://demo.skywalking.apache.org/')
+ }
+ document.body.removeChild(input);
+ })
+ })
}(jQuery));
diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss
index 0a1337f..d9c53d3 100644
--- a/themes/docsy/assets/scss/_styles_project.scss
+++ b/themes/docsy/assets/scss/_styles_project.scss
@@ -132,6 +132,46 @@ table {
// home page
.td-home {
+ .btn-demo{
+ background: #151f35 linear-gradient(180deg, #485671, #152235) repeat-x;
+ }
+ .demo-link{
+ padding:0 1em;
+ display: block;
+ text-align: center;
+ margin: 0 auto;
+ font-size: 1.3rem;
+ font-weight: 500;
+ &:hover{
+ color: #0091ff
+ }
+ }
+ .demo-box{
+ text-align: center;
+ position: relative;
+ .dropdown-item{
+ position: relative;
+ background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
+ }
+ .icon-copy{
+ font-size: 14px;
+ color: #ccc;
+ position: absolute;
+ right: 4px;
+ top: 4px;
+ &:hover{
+ cursor: pointer;
+ }
+ }
+ }
+ .show > .btn-primary.dropdown-toggle {
+ color: #fff;
+ background-color: #2e3a50;
+ background-image: none;
+ border-color: #030407;
+ }
+
+
h2.section-head {
font-family: Lato, sans-serif;
text-shadow: 4px 6px 0 rgba(0, 0, 0, .07);