You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by bz...@apache.org on 2021/10/26 02:20:40 UTC
[apisix-website] branch master updated: feat: add event poster card
datalization render (#673)
This is an automated email from the ASF dual-hosted git repository.
bzp2010 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git
The following commit(s) were added to refs/heads/master by this push:
new 3b85f94 feat: add event poster card datalization render (#673)
3b85f94 is described below
commit 3b85f94c6bab410071dfd4209d764c19edd4c219
Author: bzp2010 <bz...@apache.org>
AuthorDate: Mon Oct 25 21:20:34 2021 -0500
feat: add event poster card datalization render (#673)
---
website/docusaurus.config.js | 1 +
.../pages/sections/components/eventPosterCard.jsx | 49 ++++++++++++++--------
website/static/data/event-poster-card.json | 6 +++
3 files changed, 39 insertions(+), 17 deletions(-)
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 081a032..964c382 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -14,6 +14,7 @@ module.exports = {
"Apache APISIX software provides rich traffic management features such as load balancing, dynamic upstream, canary release, circuit breaking, authentication, observability, and more.",
showcases: require("./static/data/showcases.json"),
events: require("./static/data/events.json"),
+ eventPosterCard: require("./static/data/event-poster-card.json"),
repoUrl: "https://github.com/apache/apisix",
docsUrl: "",
docs: [
diff --git a/website/src/pages/sections/components/eventPosterCard.jsx b/website/src/pages/sections/components/eventPosterCard.jsx
index 2cb476b..223ef5e 100644
--- a/website/src/pages/sections/components/eventPosterCard.jsx
+++ b/website/src/pages/sections/components/eventPosterCard.jsx
@@ -1,9 +1,12 @@
import React, { useState, useRef, useEffect } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import gsap from "gsap"
import "../../../css/customTheme.css";
+
const EventPosterCard = () => {
+ const { siteConfig } = useDocusaurusContext();
const [display, setDisplay] = useState(true);
const picRef = useRef(null);
@@ -11,7 +14,7 @@ const EventPosterCard = () => {
gsap.fromTo(picRef.current, {
x: 500,
opacity: 0
- }, {
+ }, {
x: 0,
opacity: 1,
delay: 3.0,
@@ -21,38 +24,50 @@ const EventPosterCard = () => {
useEffect(() => {
if (!localStorage.getItem('SHOW_EVENT_ENTRY')) {
setDisplay(true);
- };
+ }
+
+ if (!siteConfig.customFields.eventPosterCard.show) {
+ setDisplay(false);
+ } else {
+ const expire = siteConfig.customFields.eventPosterCard.expire;
+ const expireTimestamp = new Date(expire).getTime();
+ if (expireTimestamp <= new Date().getTime()) {
+ setDisplay(false);
+ }
+ }
}, []);
-
+
const onClose = () => {
gsap.to(picRef.current, {
x: 500,
opacity: 0,
onComplete: ()=>{
- setDisplay(false);
+ setDisplay(false);
}
});
if (typeof window !== 'undefined') {
localStorage.setItem('SHOW_EVENT_ENTRY', 'true');
}
};
-
+
if (!display) {
return null;
}
-
+
return (
- <div ref={picRef} className="pic-wrapper">
- <button className="pic-wrapper-close" onClick={onClose}>
- <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" className="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
- <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
- </svg>
- </button>
- <a href="/blog/2021/10/18/meetup" onClick={onClose}>
- <img src="https://static.apiseven.com/202108/meetup-card.png" alt="" />
- </a>
- </div>
+ <div ref={picRef} className="pic-wrapper">
+ <button className="pic-wrapper-close" onClick={onClose}>
+ <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times"
+ className="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 352 512">
+ <path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
+ </svg>
+ </button>
+ <a href={siteConfig.customFields.eventPosterCard.link} onClick={onClose}>
+ <img src={siteConfig.customFields.eventPosterCard.image} alt=""/>
+ </a>
+ </div>
);
}
-
+
export default EventPosterCard;
diff --git a/website/static/data/event-poster-card.json b/website/static/data/event-poster-card.json
new file mode 100644
index 0000000..b3324d7
--- /dev/null
+++ b/website/static/data/event-poster-card.json
@@ -0,0 +1,6 @@
+{
+ "show": false,
+ "expire": "2021-10-25",
+ "image": "https://static.apiseven.com/202108/meetup-card.png",
+ "link": "/blog/2021/10/18/meetup"
+}