This is an automated email from the ASF dual-hosted git repository.
guoqi 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 6cacb462aee fix: event poster build error on doc workspace (#1620)
6cacb462aee is described below
commit 6cacb462aee85defb2ecc67a97729220e041761b
Author: Qi Guo <[email protected]>
AuthorDate: Sun Jun 25 11:25:19 2023 +0800
fix: event poster build error on doc workspace (#1620)
---
.gitignore | 1 +
.../src/theme/Footer/EventPosterCard.tsx | 96 ++++++++++------------
doc/src/theme/Footer/event-poster-card.json | 18 ++++
doc/src/theme/Footer/event-poster-card.module.scss | 53 ++++++++++++
doc/src/theme/Footer/index.tsx | 20 +++--
doc/src/theme/Footer/util.scss | 60 ++++++++++++++
scripts/generate-event-poster-card.sh | 1 +
website/src/theme/Footer/EventPosterCard.tsx | 8 +-
8 files changed, 194 insertions(+), 63 deletions(-)
diff --git a/.gitignore b/.gitignore
index d821f25cb0c..2e5edef1702 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,4 +51,5 @@ scripts/temp/**
/website/src/pages/edit.*
/website/src/css/edit.*
/blog/src/theme/Footer/
+/doc/src/theme/Footer/event-poster-card.json
website/src/theme/Footer/event-poster-card.json
diff --git a/website/src/theme/Footer/EventPosterCard.tsx
b/doc/src/theme/Footer/EventPosterCard.tsx
similarity index 54%
copy from website/src/theme/Footer/EventPosterCard.tsx
copy to doc/src/theme/Footer/EventPosterCard.tsx
index f8bce975963..93a2e02ff75 100644
--- a/website/src/theme/Footer/EventPosterCard.tsx
+++ b/doc/src/theme/Footer/EventPosterCard.tsx
@@ -1,23 +1,25 @@
import type { FC } from 'react';
-import React, { useCallback, useMemo, useEffect } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { useSpring, animated } from 'react-spring';
-import useSessionStorage from 'react-use/lib/useSessionStorage';
-// eslint-disable-next-line import/no-unresolved, import/extensions
import config from './event-poster-card.json';
+// eslint-disable-next-line import/no-unresolved, import/extensions
import style from './event-poster-card.module.scss';
type CardConfig =
| {
- image: string;
- link: string;
- description: string;
- disable?: false;
- }
+ image: string;
+ link: string;
+ description: string;
+ disable?: false;
+ }
| {
- disable: true;
- };
+ disable: true;
+ };
+
+type StoreCardProps = {
+ setShowStore: React.Dispatch<React.SetStateAction<string | boolean>>;
+}
interface EventPosterCardInfo {
show: boolean;
@@ -31,50 +33,29 @@ interface EventPosterCardInfo {
const SHOW_STORE_KEY = 'SHOW_EVENT_ENTRY';
-const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' | 'expire'>> =
(props) => {
- const { config: cardConfig, width } = props;
+const EventPosterCardDoc: FC<Omit<EventPosterCardInfo, 'show' | 'expire'> &
StoreCardProps> = (props) => {
+ const { config: cardConfig, width, setShowStore } = props;
const {
i18n: { currentLocale },
} = useDocusaurusContext();
const currentConfig = useMemo<CardConfig>(() => cardConfig[currentLocale],
[currentLocale]);
- const [, setStoreShow] = useSessionStorage(SHOW_STORE_KEY, 'true');
-
- const [styles, api] = useSpring(() => ({
- from: {
- x: 500,
- opacity: 0,
- },
- }));
-
- useEffect(() => {
- api.start({
- to: {
- x: 0,
- opacity: 1,
- },
- delay: 800,
- });
- }, []);
- const onClose = useCallback(
- async () => Promise.all(
- api.start({
- to: {
- x: 500,
- opacity: 0,
- },
- }),
- ).then(() => setStoreShow('false')),
- [api],
- );
+ const onClose = () => {
+ window.sessionStorage.setItem(SHOW_STORE_KEY, 'false');
+ setShowStore(false);
+ };
if (currentConfig?.disable === true) {
return null;
}
return (
- <animated.div className={style.picWrapper} style={styles}>
- <button className={style.closeBtn} onClick={onClose} type="button">
+ <div className={style.picWrapper}>
+ <button
+ className={style.closeBtn}
+ onClick={onClose}
+ type="button"
+ >
<svg role="img" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 352
512">
<path
fill="currentColor"
@@ -82,7 +63,12 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' |
'expire'>> = (props
/>
</svg>
</button>
- <a href={currentConfig.link} onClick={onClose} target="_blank"
rel="noreferrer">
+ <a
+ href={currentConfig.link}
+ onClick={onClose}
+ target="_blank"
+ rel="noreferrer"
+ >
<LazyLoadImage
src={currentConfig.image}
alt={currentConfig.description}
@@ -90,20 +76,28 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show'
| 'expire'>> = (props
style={{ maxWidth: '100vw' }}
/>
</a>
- </animated.div>
+ </div>
);
};
-const EventPosterCardWrapper: FC = () => {
- const [storeShow] = useSessionStorage(SHOW_STORE_KEY);
+const EventPosterCardDocWrapper: FC = () => {
const { show, expire, ...rest } = config;
const expireTimestamp = new Date(expire).getTime();
+ const [storeShow, setSotreShow] = useState<string | boolean>(true);
+
+ const getShowValue = () => window.sessionStorage.getItem(SHOW_STORE_KEY);
+
+ useEffect(() => {
+ // sessionStorage cannot store boolean, use parse to serialize the value
+ const showValue = JSON.parse(getShowValue());
+ setSotreShow(showValue);
+ }, []);
- if (show && !storeShow && expireTimestamp > Date.now()) {
- return <EventPosterCard {...(rest as Omit<EventPosterCardInfo, 'show' |
'expire'>)} />;
+ if (show && storeShow && expireTimestamp > Date.now()) {
+ return <EventPosterCardDoc setShowStore={setSotreShow} {...(rest as
Omit<EventPosterCardInfo, 'show' | 'expire'>)} />;
}
return null;
};
-export default EventPosterCardWrapper;
+export default EventPosterCardDocWrapper;
diff --git a/doc/src/theme/Footer/event-poster-card.json
b/doc/src/theme/Footer/event-poster-card.json
new file mode 100644
index 00000000000..175dc029d0f
--- /dev/null
+++ b/doc/src/theme/Footer/event-poster-card.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "./event-poster-card-schema.json",
+ "show": true,
+ "expire": "2023-07-04",
+ "width": 400,
+ "config": {
+ "en": {
+ "image":
"https://static.apiseven.com/uploads/2023/06/12/EBgipDM0_20230612-100108.jpeg";,
+ "link":
"https://docs.google.com/forms/d/e/1FAIpQLSdDqDHYt_lNdBOkC1ZJoLaCXM2_KH6o_NfF_F1ZGEr9FMOMpw/viewform";,
+ "description": "Apache APISIX Community Meetup Malaysia"
+ },
+ "zh": {
+ "image":
"https://static.apiseven.com/uploads/2023/06/12/EBgipDM0_20230612-100108.jpeg";,
+ "link":
"https://docs.google.com/forms/d/e/1FAIpQLSdDqDHYt_lNdBOkC1ZJoLaCXM2_KH6o_NfF_F1ZGEr9FMOMpw/viewform";,
+ "description": "Apache APISIX Community Meetup Malaysia"
+ }
+ }
+}
diff --git a/doc/src/theme/Footer/event-poster-card.module.scss
b/doc/src/theme/Footer/event-poster-card.module.scss
new file mode 100644
index 00000000000..07bbcff1c87
--- /dev/null
+++ b/doc/src/theme/Footer/event-poster-card.module.scss
@@ -0,0 +1,53 @@
+@import "./util";
+
+.picWrapper {
+ position: fixed;
+ display: flex;
+ right: 10px;
+ bottom: 10px;
+ z-index: 1000;
+ outline: 0;
+ overflow: auto;
+ border: 0;
+ box-shadow: 0 0 20px -12px #626365;
+
+ @include respond-below(sm) {
+ right: 0;
+ bottom: 0;
+ }
+
+ & > a {
+ display: flex;
+ }
+
+ & .closeBtn {
+ position: absolute;
+ z-index: 1;
+ top: 10px;
+ right: 10px;
+ padding: 5px;
+ font-weight: 900;
+ color: rgb(135 151 172);
+ font-size: 16px;
+ outline: none;
+ border-radius: 50%;
+ border: 1px solid transparent;
+ cursor: pointer;
+ transition: transform 300ms;
+
+ &:hover {
+ transform: scale3d(1.2, 1.2, 1);
+ }
+
+ &:active,
+ &:focus {
+ transform: scale(0.6, 0.6, 1);
+ }
+ }
+
+ & svg {
+ width: 10px;
+ height: 10px;
+ display: inherit;
+ }
+}
diff --git a/doc/src/theme/Footer/index.tsx b/doc/src/theme/Footer/index.tsx
index 60b7e37d15a..a48e31665ed 100644
--- a/doc/src/theme/Footer/index.tsx
+++ b/doc/src/theme/Footer/index.tsx
@@ -16,6 +16,7 @@ import slackIcon from '@iconify/icons-akar-icons/slack-fill';
import youtubeIcon from '@iconify/icons-akar-icons/youtube-fill';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import style from './styles.module.scss';
+import EventPosterCardWrapper from './EventPosterCard';
const footer = {
links: [
@@ -59,8 +60,7 @@ const footer = {
{
icon: slackIcon,
label: 'Slack',
- to: '/docs/general/join/#join-the-slack-channel',
- target: '_parent',
+ to: '/docs/general/join',
},
{
icon: twitterIcon,
@@ -81,13 +81,11 @@ const footer = {
label: 'Blog',
to: '/blog/',
target: '_parent',
- },
- {
+ }, {
label: 'Showcase',
to: '/showcase',
target: '_parent',
- },
- {
+ }, {
label: 'Plugin Hub',
to: '/plugins',
target: '_parent',
@@ -117,9 +115,14 @@ const FooterLink = ({
const normalizedHref = useBaseUrl(href, {
forcePrependBaseUrl: true,
});
- const hrefObj = href ? { href: prependBaseUrlToHref ? normalizedHref : href
} : { to: toUrl };
+ const hrefObj = href
+ ? { href: prependBaseUrlToHref ? normalizedHref : href }
+ : { to: toUrl };
return (
- <Link {...hrefObj} {...props}>
+ <Link
+ {...hrefObj}
+ {...props}
+ >
<Icon icon={icon} />
<span>{label}</span>
</Link>
@@ -157,6 +160,7 @@ const Footer: FC = () => {
</Link>
<div className={style.text}>{copyright}</div>
</div>
+ <EventPosterCardWrapper />
</footer>
);
};
diff --git a/doc/src/theme/Footer/util.scss b/doc/src/theme/Footer/util.scss
new file mode 100644
index 00000000000..86f4d5a357a
--- /dev/null
+++ b/doc/src/theme/Footer/util.scss
@@ -0,0 +1,60 @@
+@use "sass:map";
+
+$breakpoints: (
+ xs: 369px,
+ sm: 736px,
+ md: 1025px,
+ lg: 1500px,
+);
+
+// @include respond-above() {}
+@mixin respond-above($breakpoint) {
+ @if map.has-key($breakpoints, $breakpoint) {
+ $breakpoint-value: map.get($breakpoints, $breakpoint);
+
+ @media only screen and (min-width: $breakpoint-value) {
+ @content;
+ }
+ }
+
+ @else {
+ @warn "Invalid #{$breakpoint}.";
+ }
+}
+
+// @include respond-below() {}
+@mixin respond-below($breakpoint) {
+ @if map.has-key($breakpoints, $breakpoint) {
+ $breakpoint-value: map.get($breakpoints, $breakpoint);
+
+ @media only screen and (max-width: ($breakpoint-value - 1)) {
+ @content;
+ }
+ }
+
+ @else {
+ @warn "Invalid #{$breakpoint}.";
+ }
+}
+
+// @include respond-between(sm, md) {}
+@mixin respond-between($lower, $upper) {
+ @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
+ $lower-breakpoint: map.get($breakpoints, $lower);
+ $upper-breakpoint: map.get($breakpoints, $upper);
+
+ @media only screen and (min-width: $lower-breakpoint) and (max-width:
($upper-breakpoint - 1)) {
+ @content;
+ }
+ }
+
+ @else {
+ @if (map.has-key($breakpoints, $lower) == false) {
+ @warn "Lower breakpoint invalid: #{$lower}.";
+ }
+
+ @if (map.has-key($breakpoints, $upper) == false) {
+ @warn "Upper breakpoint invalid: #{$upper}.";
+ }
+ }
+}
diff --git a/scripts/generate-event-poster-card.sh
b/scripts/generate-event-poster-card.sh
index afb921ef98f..8e8529dd65a 100644
--- a/scripts/generate-event-poster-card.sh
+++ b/scripts/generate-event-poster-card.sh
@@ -6,4 +6,5 @@ SCRIPT=$(readlink -f "$0")
SCRIPTPATH=$(dirname "$SCRIPT")/..
cp ${SCRIPTPATH}/config/event-poster-card.json
${SCRIPTPATH}/website/src/theme/Footer/
+cp ${SCRIPTPATH}/website/src/theme/Footer/event-poster-card.json
${SCRIPTPATH}/doc/src/theme/Footer/
cp ${SCRIPTPATH}/website/src/theme/Footer/*
${SCRIPTPATH}/blog/src/theme/Footer/
\ No newline at end of file
diff --git a/website/src/theme/Footer/EventPosterCard.tsx
b/website/src/theme/Footer/EventPosterCard.tsx
index f8bce975963..c64317400bf 100644
--- a/website/src/theme/Footer/EventPosterCard.tsx
+++ b/website/src/theme/Footer/EventPosterCard.tsx
@@ -37,7 +37,7 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' |
'expire'>> = (props
i18n: { currentLocale },
} = useDocusaurusContext();
const currentConfig = useMemo<CardConfig>(() => cardConfig[currentLocale],
[currentLocale]);
- const [, setStoreShow] = useSessionStorage(SHOW_STORE_KEY, 'true');
+ const [, setStoreShow] = useSessionStorage(SHOW_STORE_KEY, true);
const [styles, api] = useSpring(() => ({
from: {
@@ -64,7 +64,7 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show' |
'expire'>> = (props
opacity: 0,
},
}),
- ).then(() => setStoreShow('false')),
+ ).then(() => setStoreShow(false)),
[api],
);
@@ -95,11 +95,11 @@ const EventPosterCard: FC<Omit<EventPosterCardInfo, 'show'
| 'expire'>> = (props
};
const EventPosterCardWrapper: FC = () => {
- const [storeShow] = useSessionStorage(SHOW_STORE_KEY);
+ const [storeShow] = useSessionStorage(SHOW_STORE_KEY, true);
const { show, expire, ...rest } = config;
const expireTimestamp = new Date(expire).getTime();
- if (show && !storeShow && expireTimestamp > Date.now()) {
+ if (show && storeShow && expireTimestamp > Date.now()) {
return <EventPosterCard {...(rest as Omit<EventPosterCardInfo, 'show' |
'expire'>)} />;
}
![https://static.apiseven.com/uploads/2023/06/12/EBgipDM0_20230612-100108.jpeg"](https://static.apiseven.com/uploads/2023/06/12/EBgipDM0_20230612-100108.jpeg"){kind=link}