You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by ti...@apache.org on 2023/02/01 03:19:34 UTC
[pulsar-site] branch main updated: [feat] add document feedback button (#392)
This is an automated email from the ASF dual-hosted git repository.
tison pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new 5d8cfc08352 [feat] add document feedback button (#392)
5d8cfc08352 is described below
commit 5d8cfc08352c177c7f78e721912cc222e7f8cfec
Author: labuladong <la...@foxmail.com>
AuthorDate: Wed Feb 1 11:19:30 2023 +0800
[feat] add document feedback button (#392)
---
src/components/ArticleThumb/ArticleThumb.js | 54 +++++++++++++++++++++++++++++
src/components/ArticleThumb/thumbs-down.svg | 3 ++
src/components/ArticleThumb/thumbs-up.svg | 3 ++
src/theme/TOC/index.js | 27 +++++++++++++++
src/theme/TOC/styles.module.css | 23 ++++++++++++
5 files changed, 110 insertions(+)
diff --git a/src/components/ArticleThumb/ArticleThumb.js b/src/components/ArticleThumb/ArticleThumb.js
new file mode 100644
index 00000000000..fbaa960d572
--- /dev/null
+++ b/src/components/ArticleThumb/ArticleThumb.js
@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import ThumbDown from './thumbs-down.svg';
+import ThumbUp from './thumbs-up.svg';
+
+const ArticleThumb = () => {
+ const [activeKey, setActiveKey] = useState();
+ const handleThumbClick = (val) => {
+ if (!activeKey) {
+ setActiveKey(val)
+ if (window && (window._paq)) {
+ window._paq.push(['trackEvent', 'Website Feedback', val, location.pathname])
+ }
+ }
+ }
+
+ let card_style = {borderWidth: '1px', padding: '3px', display: 'flex'}
+ let thumb_style = {
+ justifyContent: 'center', display: 'flex', borderRadius: '99999px',
+ width: '2.5rem', height: '2.5rem',
+ }
+ if (!activeKey) {
+ thumb_style['cursor'] = "pointer"
+ }
+ return (
+ <div className="border">
+ <div style={{color: 'var(--ifm-toc-link-color)'}}>
+ Was this helpful?
+ </div>
+ <div style={card_style}>
+ <div style={{
+ ...thumb_style,
+ background: activeKey === 'up' ? "#84bef5" : "",
+ color: activeKey === 'up' ? "#e9f1f2" : "",
+ }}
+ onClick={() => handleThumbClick('up')}
+ >
+ <ThumbUp/>
+ </div>
+ <div style={{
+ ...thumb_style, marginLeft: '30px',
+ background: activeKey === 'down' ? "#84bef5" : "",
+ color: activeKey === 'down' ? "#e9f1f2" : "",
+ }}
+ onClick={() => handleThumbClick('down')}
+ >
+ <ThumbDown/>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+
+export default ArticleThumb;
diff --git a/src/components/ArticleThumb/thumbs-down.svg b/src/components/ArticleThumb/thumbs-down.svg
new file mode 100644
index 00000000000..6a15a7e20cf
--- /dev/null
+++ b/src/components/ArticleThumb/thumbs-down.svg
@@ -0,0 +1,3 @@
+<svg style="width: initial; height: initial;" width="12" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5631 3.31573C20.3196 3.10665 20.0077 2.99428 19.6867 2.99996L19.6691 3.00012H17.9991V12.0001H19.6691L19.6867 12.0003C20.0077 12.0059 20.3196 11.8936 20.5631 11.6845C20.792 11.488 20.9457 11.219 20.9991 10.9233V4.07698C20.9457 3.78126 20.792 3.51222 20.5631 3.31573ZM15.9991 12.7879L12.3912 20.9055C12.0898 20.8094 11.8127 20.6422 11.5848 20.4143C11.2098 20.0393 10.9991 19.5306 10.9991 19.0001V15.0001C10.9991 14.4478 10.5513 14.0001 9.999 [...]
+</svg>
diff --git a/src/components/ArticleThumb/thumbs-up.svg b/src/components/ArticleThumb/thumbs-up.svg
new file mode 100644
index 00000000000..29e2d08e00b
--- /dev/null
+++ b/src/components/ArticleThumb/thumbs-up.svg
@@ -0,0 +1,3 @@
+<svg style="width: initial; height: initial;" width="12" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0862 1.59386C10.2467 1.23273 10.6048 1 11 1C12.0609 1 13.0783 1.42143 13.8284 2.17157C14.5786 2.92172 15 3.93913 15 5V8H19.6549C20.0876 7.996 20.5162 8.08567 20.911 8.26289C21.3078 8.44096 21.6611 8.70317 21.9465 9.03134C22.2318 9.35951 22.4424 9.7458 22.5637 10.1634C22.6849 10.5811 22.7139 11.0201 22.6487 11.4501L21.2687 20.4499C21.2687 20.4502 21.2687 20.4497 21.2687 20.4499C21.1601 21.165 20.7966 21.8175 20.2456 22.2859C19.6958 22.7 [...]
+</svg>
diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js
new file mode 100644
index 00000000000..3238aa8132c
--- /dev/null
+++ b/src/theme/TOC/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css';
+import ArticleThumb from "@site/src/components/ArticleThumb/ArticleThumb";
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+export default function TOC({className, ...props}) {
+ return (
+ <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+ <ArticleThumb/>
+ <TOCItems
+ {...props}
+ linkClassName={LINK_CLASS_NAME}
+ linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+ />
+ </div>
+ );
+}
diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css
new file mode 100644
index 00000000000..4b6d2bcc657
--- /dev/null
+++ b/src/theme/TOC/styles.module.css
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tableOfContents {
+ max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+ overflow-y: auto;
+ position: sticky;
+ top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+ .tableOfContents {
+ display: none;
+ }
+
+ .docItemContainer {
+ padding: 0 0.3rem;
+ }
+}