You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/07/18 16:06:33 UTC
[apisix-website] branch master updated: feat: added 200
contributors poster (#414)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan 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 ea3eec2 feat: added 200 contributors poster (#414)
ea3eec2 is described below
commit ea3eec26b3f74045d5f1180b2cb2853985a5a682
Author: guoqqqi <72...@users.noreply.github.com>
AuthorDate: Mon Jul 19 00:06:28 2021 +0800
feat: added 200 contributors poster (#414)
---
website/src/css/customTheme.css | 55 ++++++++++++++++++++---
website/src/pages/index.js | 81 +++++++++++++++++++++++++---------
website/static/img/200_mark_dark.jpg | Bin 0 -> 303462 bytes
website/static/img/200_mark_light.jpg | Bin 0 -> 146187 bytes
4 files changed, 110 insertions(+), 26 deletions(-)
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index 988453e..86fe284 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -30,7 +30,7 @@
--color-downloads-dropdown-items: #f3f4f6;
}
-html[data-theme='dark'] {
+html[data-theme="dark"] {
--color-secondary-bg: #121212;
--ifm-color-dark: #b0b0b0;
--color-title: #f0f0f0;
@@ -324,7 +324,7 @@ header h2 {
font-size: 2.2rem;
margin-bottom: 10px;
}
-.learn-how .hero__subtitle{
+.learn-how .hero__subtitle {
color: var(--color-secondary-text);
}
@@ -569,7 +569,7 @@ a:hover {
height: 24px;
}
-.team-githubLogo{
+.team-githubLogo {
height: 24px;
}
@@ -627,7 +627,7 @@ a:hover {
}
.downloads-versioninfo-span {
- color: var(--color-downloads-rightside-versioninfo-span)
+ color: var(--color-downloads-rightside-versioninfo-span);
}
.downloads-dropdown {
@@ -639,7 +639,7 @@ a:hover {
}
.team-repocard {
- color: var(--color-team-repocard)
+ color: var(--color-team-repocard);
}
.team-repocard:hover {
@@ -657,3 +657,48 @@ a:hover {
.help-page .card p {
color: var(--color-help-subtitle);
}
+
+.pic-wrapper {
+ width: 440px;
+ position: fixed;
+ display: flex;
+ right: 0;
+ bottom: 0;
+ z-index: 999;
+ outline: 0;
+ overflow: auto;
+ border: 0;
+ box-shadow: 0 0 20px -12px #626365;
+}
+
+.pic-wrapper a {
+ display: flex;
+}
+
+.pic-wrapper-close {
+ position: absolute;
+ z-index: 1000;
+ top: 10px;
+ right: 25px;
+ font-weight: 900;
+ color: rgb(135, 151, 172);
+ font-size: 16px;
+ outline: none;
+ border: 1px solid transparent;
+}
+
+.pic-wrapper-close:hover {
+ cursor: pointer;
+}
+
+.pic-wrapper-close svg {
+ width: 10px;
+ height: 15px;
+ display: inherit;
+}
+
+@media only screen and (max-width: 440px) {
+ .pic-wrapper {
+ width: 100%;
+ }
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index b641ce3..a2604ca 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -120,7 +120,7 @@ const Showcase = () => {
}
const showcases = siteConfig.customFields.showcases.map((user) => (
<a href={user.infoLink} key={user.infoLink} target="_blank">
- <img className="user-logo" src={'https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/static/img/' + user.image} alt={user.caption} />
+ <img className="user-logo" src={'https://cdn.jsdelivr.net/gh/apache/apisix-website@master/website/static/img/' + user.image} alt={user.caption} />
</a>
));
const middleIndex = (showcases.length / 2).toFixed(0);
@@ -216,12 +216,12 @@ const ContributionSection = () => {
<p>Find a good first issue to get you started !</p>
</div>
<div className="contribution-link">
- <Link
- to="/docs/general/contributor-guide#good-first-issues"
- >
- <GitHubLogo className="contribution-logo" />
- Good First Issues
- </Link>
+ <Link
+ to="/docs/general/contributor-guide#good-first-issues"
+ >
+ <GitHubLogo className="contribution-logo" />
+ Good First Issues
+ </Link>
</div>
</div>
);
@@ -233,20 +233,20 @@ const NewsletterSection = () => {
<div className="newsletter">
<div className="center-elem news-logo">
<svg className="news-logo-svg" width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F"/>
- <path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)"/>
- <path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)"/>
- <defs>
- <linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
- <stop offset="0.536111" stopColor="#FC0A04"/>
- <stop offset="1" stopColor="#CF0500" stopOpacity="0.77"/>
- </linearGradient>
- <linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
- <stop offset="0.473466" stopColor="#E2423E"/>
- <stop offset="1" stopColor="#E2423E" stopOpacity="0.77"/>
- </linearGradient>
- </defs>
- </svg>
+ <path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F" />
+ <path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)" />
+ <path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)" />
+ <defs>
+ <linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
+ <stop offset="0.536111" stopColor="#FC0A04" />
+ <stop offset="1" stopColor="#CF0500" stopOpacity="0.77" />
+ </linearGradient>
+ <linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
+ <stop offset="0.473466" stopColor="#E2423E" />
+ <stop offset="1" stopColor="#E2423E" stopOpacity="0.77" />
+ </linearGradient>
+ </defs>
+ </svg>
</div>
<div className="center-elem news-text">
<h2>Stay up to date about all Apache APISIX™ News</h2>
@@ -258,6 +258,44 @@ const NewsletterSection = () => {
);
};
+const Contributor200Poster = () => {
+ const [display, setDisplay] = useState(true);
+ const [theme, setTheme] = useState('light');
+
+ useEffect(() => {
+ addEventListener('click', () => {
+ if (localStorage.getItem('theme') !== theme) {
+ setTheme(localStorage.getItem('theme'));
+ };
+ });
+ }, [theme]);
+
+ if (!display || (typeof window !== 'undefined' && localStorage.getItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY'))) {
+ return null;
+ }
+
+ const onClose = () => {
+ setDisplay(false);
+ if (typeof window !== 'undefined') {
+ localStorage.setItem('SHOW_200_CONTRIBUTOR_EVENT_ENTRY', 'true');
+ }
+ };
+
+ return (
+ <div 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/07/06/celebrate-200-contributors" onClick={onClose}>
+ {theme === "light" && <img src="/img/200_mark_light.jpg" alt="" />}
+ {theme === "dark" && <img src="/img/200_mark_dark.jpg" alt="" />}
+ </a>
+ </div>
+ )
+}
+
const Index = (props) => {
return (
<Layout>
@@ -267,6 +305,7 @@ const Index = (props) => {
<Showcase />
<ContributionSection />
<NewsletterSection />
+ <Contributor200Poster />
</Layout>
);
};
diff --git a/website/static/img/200_mark_dark.jpg b/website/static/img/200_mark_dark.jpg
new file mode 100644
index 0000000..8b28a86
Binary files /dev/null and b/website/static/img/200_mark_dark.jpg differ
diff --git a/website/static/img/200_mark_light.jpg b/website/static/img/200_mark_light.jpg
new file mode 100644
index 0000000..c4ba064
Binary files /dev/null and b/website/static/img/200_mark_light.jpg differ