This is an automated email from the ASF dual-hosted git repository.
sylviasu 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 450a43431b1 refactor: event poster card (#1414)
450a43431b1 is described below
commit 450a43431b1c295d545fbc498ce9ccf43428392b
Author: Young <[email protected]>
AuthorDate: Fri Nov 18 12:32:47 2022 +0800
refactor: event poster card (#1414)
---
config/event-poster-card.json | 18 ++++---
website/src/components/EventPosterCard.tsx | 58 ++++++++++++++--------
.../src/components/event-poster-card-schema.json | 58 ++++++++++++++++++++++
3 files changed, 108 insertions(+), 26 deletions(-)
diff --git a/config/event-poster-card.json b/config/event-poster-card.json
index cba63dbbed4..9f67da3982a 100644
--- a/config/event-poster-card.json
+++ b/config/event-poster-card.json
@@ -1,10 +1,16 @@
{
+ "$schema": "../website/src/components/event-poster-card-schema.json",
"show": true,
"expire": "2022-11-20",
- "image": "https://static.apiseven.com/2022/11/16/6374a2e12ff52.jpeg";,
- "links": {
- "en": "",
- "zh": "https://mp.weixin.qq.com/s/qx9F483mILJrxW-Rd3Blag";
- },
- "width": 400
+ "width": 400,
+ "config": {
+ "en": {
+ "disable": true
+ },
+ "zh": {
+ "image": "https://static.apiseven.com/2022/11/16/6374a2e12ff52.jpeg";,
+ "link": "https://mp.weixin.qq.com/s/qx9F483mILJrxW-Rd3Blag";,
+ "description": "直播预告｜Apache APISIX x Apache EventMesh 在线 Meetup 来袭"
+ }
+ }
}
diff --git a/website/src/components/EventPosterCard.tsx
b/website/src/components/EventPosterCard.tsx
index eb68cbb61b9..05f6b8f9df6 100644
--- a/website/src/components/EventPosterCard.tsx
+++ b/website/src/components/EventPosterCard.tsx
@@ -8,25 +8,35 @@ import useSessionStorage from
'react-use/lib/useSessionStorage';
import config from '../../../config/event-poster-card.json';
import style from '../css/event-poster-card.module.scss';
+type CardConfig =
+ | {
+ image: string;
+ link: string;
+ description: string;
+ disable?: false;
+ }
+ | {
+ disable: true;
+ };
+
interface EventPosterCardInfo {
show: boolean;
expire: string;
- image: string;
- links: { [key: string]: string } | 'string';
+ config: {
+ en: CardConfig;
+ zh: CardConfig;
+ };
width: string | number;
}
const SHOW_STORE_KEY = 'SHOW_EVENT_ENTRY';
const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' | 'expire'>> =
(props) => {
- const { image, links, width } = props;
+ const { config: cardConfig, width } = props;
const {
i18n: { currentLocale },
} = useDocusaurusContext();
- const link = useMemo(
- () => (typeof links === 'string' ? links : links[currentLocale]),
- [currentLocale]
- );
+ const currentConfig = useMemo<CardConfig>(() => cardConfig[currentLocale],
[currentLocale]);
const [, setStoreShow] = useSessionStorage(SHOW_STORE_KEY, 'true');
const [styles, api] = useSpring(() => ({
@@ -47,18 +57,21 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show'
| 'expire'>> = (props
}, []);
const onClose = useCallback(
- async () =>
- Promise.all(
- api.start({
- to: {
- x: 500,
- opacity: 0,
- },
- })
- ).then(() => setStoreShow('false')),
- [api]
+ async () => Promise.all(
+ api.start({
+ to: {
+ x: 500,
+ opacity: 0,
+ },
+ }),
+ ).then(() => setStoreShow('false')),
+ [api],
);
+ if (currentConfig?.disable === true) {
+ return null;
+ }
+
return (
<animated.div className={style.picWrapper} style={styles}>
<button className={style.closeBtn} onClick={onClose} type="button">
@@ -69,8 +82,13 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' |
'expire'>> = (props
/>
</svg>
</button>
- <a href={link} onClick={onClose} target="_blank" rel="noreferrer">
- <LazyLoadImage src={image} alt={link} width={width} style={{ maxWidth:
'100vw' }} />
+ <a href={currentConfig.link} onClick={onClose} target="_blank"
rel="noreferrer">
+ <LazyLoadImage
+ src={currentConfig.image}
+ alt={currentConfig.description}
+ width={width}
+ style={{ maxWidth: '100vw' }}
+ />
</a>
</animated.div>
);
@@ -82,7 +100,7 @@ const EventPosterCardWrapper: FC = () => {
const expireTimestamp = new Date(expire).getTime();
if (show && !storeShow && expireTimestamp > Date.now()) {
- return <EventPosterCard {...rest} />;
+ return <EventPosterCard {...(rest as Omit<EventPosterCardInfo, 'show' |
'expire'>)} />;
}
return null;
diff --git a/website/src/components/event-poster-card-schema.json
b/website/src/components/event-poster-card-schema.json
new file mode 100644
index 00000000000..85875716ced
--- /dev/null
+++ b/website/src/components/event-poster-card-schema.json
@@ -0,0 +1,58 @@
+{
+ "$schema": "http://json-schema.org/draft-04/schema#";,
+ "type": "object",
+ "properties": {
+ "show": {
+ "type": "boolean"
+ },
+ "expire": {
+ "type": "string"
+ },
+ "width": {
+ "type": "integer"
+ },
+ "config": {
+ "type": "object",
+ "properties": {
+ "en": {
+ "type": "object",
+ "properties": {
+ "image": {
+ "type": "string"
+ },
+ "link": {
+ "type": "string"
+ },
+ "description": {
+ "type": "string"
+ },
+ "disable": {
+ "type": "boolean"
+ }
+ },
+ "if": {
+ "properties": {
+ "disable": {
+ "const": false
+ }
+ }
+ },
+ "then": {
+ "required": ["image", "link", "description"]
+ },
+ "else": {
+ "required": ["disable"],
+ "not": {
+ "required": ["image", "link", "description"]
+ }
+ }
+ },
+ "zh": {
+ "$ref": "#/properties/config/properties/en"
+ }
+ },
+ "required": ["en", "zh"]
+ }
+ },
+ "required": ["show", "expire", "width", "config"]
+}
![https://static.apiseven.com/2022/11/16/6374a2e12ff52.jpeg"](https://static.apiseven.com/2022/11/16/6374a2e12ff52.jpeg"){kind=link}