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/04/23 16:52:28 UTC
[skywalking-website] branch master updated: Feature: Event popover
on bottom right (#258)
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 3e43fb4 Feature: Event popover on bottom right (#258)
3e43fb4 is described below
commit 3e43fb42faddbcde00df6226a381fae85f2ed2a4
Author: Juntao Zhang <jt...@163.com>
AuthorDate: Sat Apr 24 00:52:18 2021 +0800
Feature: Event popover on bottom right (#258)
---
README.md | 15 ++-
content/events/skywalkingday-2021/index.md | 1 +
static/images/popup_default.png | Bin 0 -> 34310 bytes
themes/docsy/assets/js/base.js | 1 +
themes/docsy/assets/js/event-popup.js | 40 +++++++
themes/docsy/assets/scss/_event-popup.scss | 124 +++++++++++++++++++++
themes/docsy/assets/scss/_styles_project.scss | 1 +
themes/docsy/layouts/_default/baseof.html | 1 +
themes/docsy/layouts/blog/baseof.html | 1 +
themes/docsy/layouts/docs/baseof.html | 1 +
themes/docsy/layouts/downloads/baseof.html | 1 +
themes/docsy/layouts/events/baseof.html | 2 +
themes/docsy/layouts/partials/event-popup.html | 64 +++++++++++
themes/docsy/layouts/partials/scripts.html | 3 +-
themes/docsy/layouts/projectDoc/baseof.html | 1 +
themes/docsy/layouts/shortcodes/blocks/events.html | 2 +
themes/docsy/layouts/team/baseof.html | 1 +
themes/docsy/layouts/zh/baseof.html | 1 +
18 files changed, 258 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 0098c05..cb282fa 100755
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Update the [config file](https://github.com/algolia/docsearch-configs/blob/maste
### Event
-Located at `content/blog`. If you don't want to create a new blog, you need to create a new subdirectory under this directory. Here is a sample blog below.
+Located at `content/events`. If you don't want to create a new blog, you need to create a new subdirectory under this directory. Here is a sample event below.
```yaml
---
@@ -37,11 +37,24 @@ title: This is a title
date: 2020-04-28
author: Author
description: This is description.
+# endDate: 2021-04-24T23:59:59
+# startDate: 2021-04-22T00:00:00
+# buttonText: Go
+# img: /images/popup_default.png
---
Content
```
+If you want to display the event in the bottom right popover, you can configure the parameter `endDate`. The parameters are as follows.
+
+|Parameter|Description|Required|Default|
+|----|----|----|----|
+|endDate|End date|true|-|
+|startDate|Start date|false|Current time|
+|buttonText|Button text|false|Read more|
+|img|The illustration|false|/images/popup_default.png|
+
### Blog
Located at `content/blog`. If you don't want to create a new blog, you need to create a new subdirectory under this directory. Here is a sample blog below.
diff --git a/content/events/skywalkingday-2021/index.md b/content/events/skywalkingday-2021/index.md
index c78be44..c554f48 100644
--- a/content/events/skywalkingday-2021/index.md
+++ b/content/events/skywalkingday-2021/index.md
@@ -3,6 +3,7 @@ title: "SkyWalkingDay Conference 2021"
date: 2021-04-20
author: SkyWalking Team
description: Apache SkyWalking hosts SkyWalkingDay Conference 2021 in June 12th, jointly with Tencent and Tetrate.
+
---
## Abstract
diff --git a/static/images/popup_default.png b/static/images/popup_default.png
new file mode 100644
index 0000000..1ad6280
Binary files /dev/null and b/static/images/popup_default.png differ
diff --git a/themes/docsy/assets/js/base.js b/themes/docsy/assets/js/base.js
index 2108716..49f27d0 100644
--- a/themes/docsy/assets/js/base.js
+++ b/themes/docsy/assets/js/base.js
@@ -61,4 +61,5 @@ limitations under the License.
});
});
+
}(jQuery));
diff --git a/themes/docsy/assets/js/event-popup.js b/themes/docsy/assets/js/event-popup.js
new file mode 100644
index 0000000..f8937b1
--- /dev/null
+++ b/themes/docsy/assets/js/event-popup.js
@@ -0,0 +1,40 @@
+$(function () {
+ var $popup = $('.sky-event-popup')
+ if (!$popup) {
+ return;
+ }
+ var key = 'SkyWalkingPopupClosedTime';
+ var startDate = $popup.data('startdate');
+ var endDate = $popup.data('enddate');
+ if (!isShowed(key) && isDuringDate(startDate, endDate)) {
+ $popup.show()
+ }
+ $popup.find('.fa-window-close').on('click', function () {
+ localStorage.setItem(key, new Date());
+ $popup.hide()
+ })
+
+ function isShowed(key) {
+ var storageTime = formatDate(localStorage.getItem(key));
+ var now = formatDate(new Date());
+ return storageTime === now;
+ }
+
+ function formatDate(strTime) {
+ const date = new Date(strTime);
+ return (
+ date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
+ );
+ }
+
+ function isDuringDate(startDateStr, endDateStr) {
+ var currDate = new Date();
+ var startDate = new Date(startDateStr);
+ var endDate = new Date(endDateStr);
+ if (currDate <= endDate && (currDate >= startDate || !startDateStr)) {
+ return true;
+ }
+ return false;
+ }
+
+})
\ No newline at end of file
diff --git a/themes/docsy/assets/scss/_event-popup.scss b/themes/docsy/assets/scss/_event-popup.scss
new file mode 100644
index 0000000..8f14e6f
--- /dev/null
+++ b/themes/docsy/assets/scss/_event-popup.scss
@@ -0,0 +1,124 @@
+@keyframes eventFadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes eventFadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.sky-event-popup {
+ display: none;
+ animation: eventFadein 0.5s linear;
+ box-shadow: 0 0 20px -12px #626365;
+ height: 180px;
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ overflow: auto;
+ z-index: 1100;
+ outline: 0;
+ width: 330px;
+ max-width: 100%;
+
+ .sky-pop-modal {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ outline: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #fff;
+ display: flex;
+
+ .fa-window-close {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ font-size: 14px;
+ cursor: pointer;
+ z-index: 1100;
+ color: #c9c9c9;
+ transition: color 0.3s;
+ z-index: 99;
+
+ &:hover {
+ color: #bcbcbc;
+
+ &:hover {
+ color: #8797ac;
+ }
+ }
+ }
+ .pic {
+ border: none;
+ }
+ }
+
+ .content-box {
+ padding: 0px 20px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .title {
+ font-size: 14px;
+ margin: 13px 0 10px;
+ padding: 0;
+ }
+
+ .content-text {
+ margin: 5px 0;
+ font-size: 12px;
+ color: #999;
+ line-height: 20px;
+ height: 60px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+
+ a {
+ color: #8e8989;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .modal-btn {
+ font-size: 14px;
+ padding: 0 20px;
+ height: 28px;
+ color: #fff;
+ background-image: linear-gradient(to right, #17b6c1, #136af4);
+ border-radius: 14px;
+ border-radius: 2px;
+ display: inline-block;
+ line-height: 28px;
+ text-align: center;
+ margin: 11px 20px 0 0px;
+
+ &:hover {
+ background-image: linear-gradient(
+ to right,
+ darken(#17b6c1, 1.5%),
+ darken(#136af4, 1.5%)
+ );
+ }
+ }
+}
\ No newline at end of file
diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss
index 0d8f0f4..bb22ba1 100644
--- a/themes/docsy/assets/scss/_styles_project.scss
+++ b/themes/docsy/assets/scss/_styles_project.scss
@@ -13,6 +13,7 @@ assets/scss/_styles_project.scss
@import "custom_project_doc.scss";
@import "sidebar-menu";
@import "custom_team";
+@import "event-popup";
//common
html, body {
diff --git a/themes/docsy/layouts/_default/baseof.html b/themes/docsy/layouts/_default/baseof.html
index 1dfb031..4ad8b55 100644
--- a/themes/docsy/layouts/_default/baseof.html
+++ b/themes/docsy/layouts/_default/baseof.html
@@ -15,6 +15,7 @@
</main>
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partialCached "scripts.html" . }}
diff --git a/themes/docsy/layouts/blog/baseof.html b/themes/docsy/layouts/blog/baseof.html
index 724fc2b..361cc0a 100644
--- a/themes/docsy/layouts/blog/baseof.html
+++ b/themes/docsy/layouts/blog/baseof.html
@@ -24,6 +24,7 @@
</div>
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
diff --git a/themes/docsy/layouts/docs/baseof.html b/themes/docsy/layouts/docs/baseof.html
index ea31883..7695b71 100644
--- a/themes/docsy/layouts/docs/baseof.html
+++ b/themes/docsy/layouts/docs/baseof.html
@@ -59,6 +59,7 @@
</div>
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
</body>
diff --git a/themes/docsy/layouts/downloads/baseof.html b/themes/docsy/layouts/downloads/baseof.html
index d1e5d29..c2822e7 100644
--- a/themes/docsy/layouts/downloads/baseof.html
+++ b/themes/docsy/layouts/downloads/baseof.html
@@ -20,6 +20,7 @@
</div>
{{ partial "footer.html" . }}
</div>
+{{ partial "event-popup.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
<script>
diff --git a/themes/docsy/layouts/events/baseof.html b/themes/docsy/layouts/events/baseof.html
index f778f39..48e02de 100644
--- a/themes/docsy/layouts/events/baseof.html
+++ b/themes/docsy/layouts/events/baseof.html
@@ -18,6 +18,8 @@
</div>
{{ partial "footer.html" . }}
</div>
+
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
diff --git a/themes/docsy/layouts/partials/event-popup.html b/themes/docsy/layouts/partials/event-popup.html
new file mode 100644
index 0000000..2d10e8f
--- /dev/null
+++ b/themes/docsy/layouts/partials/event-popup.html
@@ -0,0 +1,64 @@
+{{ $scratch := newScratch }}
+{{ $scratch.Set "flag" true }}
+
+{{ range first 50 (where .Site.Pages "Section" "events") }}
+{{ if ($scratch.Get "flag")}}
+{{ if .Params.endDate }}
+{{ if (time .Params.endDate).After now }}
+
+{{ $scratch.Set "flag" false}}
+
+{{ $bg := .Params.img}}
+
+<div
+ class="sky-event-popup"
+ style=" width: 440px"
+ data-startdate="{{.Params.startDate}}"
+ data-enddate="{{.Params.endDate}}"
+>
+
+ <div class="sky-pop-modal">
+ <i class="fa fa-window-close"></i>
+
+ <img
+ width="100"
+ height="180"
+ {{if $bg}}
+ src="{{$bg}}"
+ {{else}}
+ src="/images/popup_default.png"
+ {{end}}
+ class="pic"
+ alt="event"
+ />
+
+ <div
+ class="content-box"
+ style=" padding-left: 20px"
+ >
+ <div>
+ <h3 class="title">{{ .LinkTitle }}</h3>
+ <p class="content-text">
+
+ <a href="{{.RelPermalink}}">
+ {{.Params.description}}
+ </a>
+ </p>
+
+ <a href="{{.RelPermalink}}" class="modal-btn">
+ {{if .Params.buttonText }}
+ {{ .Params.buttonText }}
+ {{else}}
+ Read more
+ {{end}}
+ </a>
+ </div>
+ </div>
+ </div>
+</div>
+{{ end }}
+{{ end }}
+
+{{ end }}
+
+{{ end }}
diff --git a/themes/docsy/layouts/partials/scripts.html b/themes/docsy/layouts/partials/scripts.html
index d415a38..7056ccc 100644
--- a/themes/docsy/layouts/partials/scripts.html
+++ b/themes/docsy/layouts/partials/scripts.html
@@ -10,7 +10,8 @@
{{ $jsLightbox := resources.Get "js/lightbox.js" }}
{{ $jsSlider := resources.Get "js/slider.js" }}
{{ $algolia := resources.Get "js/algolia-search.js" }}
-{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsLightbox $jsSlider $algolia) | resources.Concat "js/main.js" }}
+{{ $event := resources.Get "js/event-popup.js" }}
+{{ $js := (slice $jsBase $jsAnchor $jsSearch $jsLightbox $jsSlider $algolia $event) | resources.Concat "js/main.js" }}
{{ if .Site.IsServer }}
<script src="{{ $js.RelPermalink }}"></script>
{{ else }}
diff --git a/themes/docsy/layouts/projectDoc/baseof.html b/themes/docsy/layouts/projectDoc/baseof.html
index ec013be..236c72c 100644
--- a/themes/docsy/layouts/projectDoc/baseof.html
+++ b/themes/docsy/layouts/projectDoc/baseof.html
@@ -28,6 +28,7 @@
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
diff --git a/themes/docsy/layouts/shortcodes/blocks/events.html b/themes/docsy/layouts/shortcodes/blocks/events.html
index 4e147bb..653cc01 100644
--- a/themes/docsy/layouts/shortcodes/blocks/events.html
+++ b/themes/docsy/layouts/shortcodes/blocks/events.html
@@ -9,3 +9,5 @@
</div>
{{ end }}
+
+
diff --git a/themes/docsy/layouts/team/baseof.html b/themes/docsy/layouts/team/baseof.html
index fe07f53..0f8eaf5 100644
--- a/themes/docsy/layouts/team/baseof.html
+++ b/themes/docsy/layouts/team/baseof.html
@@ -16,6 +16,7 @@
</div>
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}
diff --git a/themes/docsy/layouts/zh/baseof.html b/themes/docsy/layouts/zh/baseof.html
index 79eb856..bf9b315 100644
--- a/themes/docsy/layouts/zh/baseof.html
+++ b/themes/docsy/layouts/zh/baseof.html
@@ -23,6 +23,7 @@
</div>
{{ partial "footer.html" . }}
</div>
+ {{ partial "event-popup.html" . }}
{{ partial "lightbox.html" . }}
{{ partial "sidebar-skywalking.html" . }}
{{ partial "scripts.html" . }}