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/11/17 06:24:59 UTC
[apisix-website] branch master updated: feat: add Datadog plugin card in plugin hub (#716)
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 0106413 feat: add Datadog plugin card in plugin hub (#716)
0106413 is described below
commit 0106413290aebdf27e60225e5a714f00b2204c70
Author: guoqqqi <72...@users.noreply.github.com>
AuthorDate: Wed Nov 17 14:24:55 2021 +0800
feat: add Datadog plugin card in plugin hub (#716)
---
website/src/pages/plugins.js | 53 ++++++++++++++++++++++++++++++++++++++--
website/static/data/plugin.json | 5 ++++
website/static/js/plugin-icon.js | 2 +-
3 files changed, 57 insertions(+), 3 deletions(-)
diff --git a/website/src/pages/plugins.js b/website/src/pages/plugins.js
index 4d3d9dd..d6a9c8b 100644
--- a/website/src/pages/plugins.js
+++ b/website/src/pages/plugins.js
@@ -114,6 +114,8 @@ const PluginIcon = styled.div`
`
const PluginName = styled.div`
+ display: flex;
+ align-items: center;
font-size: 1rem;
font-weight: 600;
margin-top: 12px;
@@ -141,6 +143,50 @@ const SectionTitle = styled.h2`
}
`;
+const SBeta = styled.div`
+ padding: 0.1rem 0.5rem 0.1rem 0.3rem;
+ margin: 0 0.5rem;
+ font-size: 90%;
+ font-weight: 300;
+ border: 1px solid #dadde1;
+ border-right: 0;
+ position: relative;
+ transition: all 0.2s;
+ ::before {
+ content: "";
+ left: 100%;
+ transform: translate(-50%,-50%) rotate(45deg);
+ border-left: 0 !important;
+ border-bottom: 0 !important;
+ width: 0.9rem;
+ height: 0.9rem;
+ border: 1px solid var(--docusaurus-tag-list-border);
+ position: absolute;
+ top: 50%;
+ transition: inherit;
+ }
+ ::after {
+ content: '';
+ right: 0;
+ border-radius: 50%;
+ height: 0.4rem;
+ width: 0.4rem;
+ left: 90%;
+ transform: translateY(-50%);
+ border: 1px solid var(--docusaurus-tag-list-border);
+ content: "";
+ position: absolute;
+ top: 50%;
+ transition: inherit;
+ }
+ :hover {
+ color: #e8433e;
+ border-color: #e8433e;
+ ::before, ::after {
+ border-color: #e8433e;
+ }
+ }
+`
function Plugins(props) {
useEffect(() => {
@@ -167,7 +213,7 @@ function Plugins(props) {
}
return (
<div key={plugin.name}>
- <PluginCard href={`https://apisix.apache.org/docs/apisix/plugins/${pluginUrl}`} target="_blank">
+ <PluginCard href={plugin.beta ? `https://apisix.apache.org/docs/apisix/next/plugins/${pluginUrl}` : `https://apisix.apache.org/docs/apisix/plugins/${pluginUrl}`} target="_blank">
<PluginIcon>
{plugin.useDefaultIcon ?
<img className="plugin-logo shadow default" src={'/img/plugin/default-icon.png'} alt={plugin.name} /> :
@@ -175,7 +221,10 @@ function Plugins(props) {
<use xlinkHref={`#icon${plugin.name}`} />
</svg>}
</PluginIcon>
- <PluginName>{plugin.name}</PluginName>
+ <PluginName>
+ {plugin.name}
+ {plugin.beta && <SBeta title='This plugin will be supported in the next version of Apache APISIX'>Beta</SBeta>}
+ </PluginName>
<PluginDescription>{plugin.description}</PluginDescription>
<span className="read-more-link">{'Read more >'}</span>
</PluginCard>
diff --git a/website/static/data/plugin.json b/website/static/data/plugin.json
index db315dc..d8f451b 100644
--- a/website/static/data/plugin.json
+++ b/website/static/data/plugin.json
@@ -145,6 +145,11 @@
{
"name": "zipkin",
"description": "Zipkin is a OpenTracing plugin"
+ },
+ {
+ "name": "datadog",
+ "description": "Datadog is a monitoring plugin built into Apache APISIX to push metrics of different services into DatadogHQ via a locally run Datadog agent.",
+ "beta": true
}
]
},
diff --git a/website/static/js/plugin-icon.js b/website/static/js/plugin-icon.js
index a573d91..c263548 100644
--- a/website/static/js/plugin-icon.js
+++ b/website/static/js/plugin-icon.js
@@ -31,7 +31,7 @@
i,
p,
v =
- '<svg><symbol id="iconbatch-requests" viewBox="0 0 1063 1024"><path d="M938.56247 675.50226l113.992758 57.029614c14.623439 7.311719 14.623439 28.181558 0 35.493277L549.521516 1019.603986a39.738386 39.738386 0 0 1-35.493277 0L10.994526 768.025151a19.863804 19.863804 0 0 1-10.928056-17.74574 19.870989 19.870989 0 0 1 10.928056-17.747537l114.059228-57.029614 353.412941 176.73701c33.567439 16.750484 73.115396 16.750484 106.616365 0l353.41294-176.803481 0.06647 0.066471zM514.028239 4.18 [...]
+ '<svg><symbol id="iconbatch-requests" viewBox="0 0 1063 1024"><path d="M938.56247 675.50226l113.992758 57.029614c14.623439 7.311719 14.623439 28.181558 0 35.493277L549.521516 1019.603986a39.738386 39.738386 0 0 1-35.493277 0L10.994526 768.025151a19.863804 19.863804 0 0 1-10.928056-17.74574 19.870989 19.870989 0 0 1 10.928056-17.747537l114.059228-57.029614 353.412941 176.73701c33.567439 16.750484 73.115396 16.750484 106.616365 0l353.41294-176.803481 0.06647 0.066471zM514.028239 4.18 [...]
z = (z = document.getElementsByTagName('script'))[z.length - 1].getAttribute('data-injectcss');
if (z && !l.__iconfont__svg__cssinject__) {
l.__iconfont__svg__cssinject__ = !0;