Skip to content

Commit 81b2fe5

Browse files
RutvikGhaskataEalfRutvikGhaskataEalf
authored
feat: added feedback section for each page (#350)
* feat: added feedback section for each page * fix: update content set id * fix: added environment variables * fix: removed typesense from env
1 parent 0eb5b7c commit 81b2fe5

File tree

9 files changed

+202
-15
lines changed

9 files changed

+202
-15
lines changed

‎.env.example‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
TYPESENSE_COLLECTION_NAME=
2-
TYPESENSE_SERVER_HOST=
3-
TYPESENSE_SEARCH_ONLY_APIKEY=
1+
FEEDBACK_CONTENT_SET_ID=

‎.github/workflows/pr.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,5 @@ jobs:
3232
- name: create env file
3333
run: |
3434
touch .env
35-
echo TYPESENSE_COLLECTION_NAME="test-collection" >> .env
36-
echo TYPESENSE_SERVER_HOST="test-host" >> .env
37-
echo TYPESENSE_SEARCH_ONLY_APIKEY="test-api-key" >> .env
35+
echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
3836
- run: npm run build

‎.github/workflows/s3.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ jobs:
2222
- name: create env file
2323
run: |
2424
touch .env
25-
echo TYPESENSE_COLLECTION_NAME=${{ vars.TYPESENSE_COLLECTION_NAME }} >> .env
26-
echo TYPESENSE_SERVER_HOST=${{ vars.TYPESENSE_SERVER_HOST }} >> .env
27-
echo TYPESENSE_SEARCH_ONLY_APIKEY=${{ vars.TYPESENSE_SEARCH_ONLY_APIKEY }} >> .env
25+
echo FEEDBACK_CONTENT_SET_ID=${{ vars.FEEDBACK_CONTENT_SET_ID }} >> .env
2826
- run: npm run build
2927

3028
- name: Configure AWS Credentials

‎docusaurus.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ const config: Config = {
110110
indexName: "aelf",
111111
},
112112
} satisfies Preset.ThemeConfig,
113+
customFields: {
114+
FEEDBACK_CONTENT_SET_ID: process.env.FEEDBACK_CONTENT_SET_ID || "",
115+
},
113116
stylesheets: [
114117
{
115118
href: "/katex/katex.min.css",

‎package-lock.json‎

Lines changed: 22 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"dependencies": {
1818
"@docusaurus/core": "3.4.0",
1919
"@docusaurus/preset-classic": "3.4.0",
20+
"@feelback/react": "^0.3.4",
2021
"@mdx-js/react": "^3.0.0",
2122
"@sinm/react-file-tree": "^1.1.1",
2223
"chaingpt-component": "^0.2.0-beta.3",

‎src/css/custom.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,4 +70,41 @@
7070
.mobile-only {
7171
display: none;
7272
}
73+
}
74+
75+
/*
76+
Feedback widget CSS customization
77+
https://www.feelback.dev/docs/guides/stripe-like-documentation-feedback-for-docusaurus/
78+
*/
79+
@import "@feelback/react/styles/feelback.css";
80+
81+
.feedback-component{
82+
margin-top: 2rem;
83+
}
84+
85+
.feedback-component .feelback-container .feelback-buttons{
86+
gap: 10px;
87+
}
88+
89+
.feedback-component .feelback-container .feelback-btn {
90+
background-color: var(--ifm-color-primary);
91+
color: white;
92+
height: 37px;
93+
padding-inline: 15px;
94+
border-radius: 7px;
95+
}
96+
97+
.feedback-component .feelback-container .feelback-btn:hover{
98+
background-color: var(--ifm-color-primary-dark);
99+
100+
}
101+
102+
.feedback-component .feelback-container textarea {
103+
border: 1px solid var(--ifm-color-primary-lightest);
104+
border-radius: 10px;
105+
padding: 0.7rem;
106+
}
107+
108+
.feedback-component .feelback-radio-side label{
109+
font-weight: 600;
73110
}

‎src/theme/DocPaginator/index.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import Translate, { translate } from "@docusaurus/Translate";
3+
import PaginatorNavLink from "@theme/PaginatorNavLink";
4+
import type { Props } from "@theme/DocPaginator";
5+
import Feedback from "../Feedback";
6+
7+
export default function DocPaginator(props: Props): JSX.Element {
8+
const { previous, next } = props;
9+
return (
10+
<nav>
11+
<div
12+
className="pagination-nav docusaurus-mt-lg"
13+
aria-label={translate({
14+
id: "theme.docs.paginator.navAriaLabel",
15+
message: "Docs pages",
16+
description: "The ARIA label for the docs pagination",
17+
})}
18+
>
19+
{previous && (
20+
<PaginatorNavLink
21+
{...previous}
22+
subLabel={
23+
<Translate
24+
id="theme.docs.paginator.previous"
25+
description="The label used to navigate to the previous doc"
26+
>
27+
Previous
28+
</Translate>
29+
}
30+
/>
31+
)}
32+
{next && (
33+
<PaginatorNavLink
34+
{...next}
35+
subLabel={
36+
<Translate
37+
id="theme.docs.paginator.next"
38+
description="The label used to navigate to the next doc"
39+
>
40+
Next
41+
</Translate>
42+
}
43+
isNext
44+
/>
45+
)}
46+
</div>
47+
<Feedback />
48+
</nav>
49+
);
50+
}

‎src/theme/Feedback/index.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { useState } from "react";
2+
import {
3+
FeelbackTaggedMessage,
4+
Question,
5+
PRESET_YESNO_LIKE_DISLIKE,
6+
} from "@feelback/react";
7+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
8+
9+
const YES_TAGS = [
10+
{
11+
value: "accurate",
12+
title: "Accurate",
13+
description: "Accurately describes the product or feature.",
14+
},
15+
{
16+
value: "problem-solved",
17+
title: "Solved my problem",
18+
description: "Helped me resolve an issue.",
19+
},
20+
{
21+
value: "clear",
22+
title: "Easy to understand",
23+
description: "Easy to follow and comprehend.",
24+
},
25+
{
26+
value: "product-chosen",
27+
title: "Helped me decide to use the product",
28+
description: "Convinced me to adopt the product or feature.",
29+
},
30+
{ value: "other-yes", title: "Another reason" },
31+
];
32+
33+
const NO_TAGS = [
34+
{
35+
value: "inaccurate",
36+
title: "Inaccurate",
37+
description: "Doesn't accurately describe the product or feature.",
38+
},
39+
{
40+
value: "missing-info",
41+
title: "Couldn't find what I was looking for",
42+
description: "Missing important information.",
43+
},
44+
{
45+
value: "unclear",
46+
title: "Hard to understand",
47+
description: "Too complicated or unclear.",
48+
},
49+
{
50+
value: "bad-examples",
51+
title: "Code samples errors",
52+
description: "One or more code samples are incorrect.",
53+
},
54+
{ value: "other-no", title: "Another reason" },
55+
];
56+
57+
const Feedback = () => {
58+
const [choice, setChoice] = useState<"y" | "n">();
59+
const { siteConfig } = useDocusaurusContext();
60+
const { FEEDBACK_CONTENT_SET_ID } = siteConfig.customFields;
61+
62+
return (
63+
<div className="alert alert--info feedback-component">
64+
<div className="feelback-container">
65+
{!choice ? (
66+
<Question
67+
text="Was this page helpful?"
68+
items={PRESET_YESNO_LIKE_DISLIKE}
69+
showLabels
70+
onClick={(option: "y" | "n") => setChoice(option)}
71+
/>
72+
) : (
73+
<FeelbackTaggedMessage
74+
contentSetId={FEEDBACK_CONTENT_SET_ID as string}
75+
layout="radio-group"
76+
tags={choice === "y" ? YES_TAGS : NO_TAGS}
77+
title={choice === "y" ? "What did you like?" : "What went wrong?"}
78+
placeholder="(optional) Please, further detail the feedback"
79+
/>
80+
)}
81+
</div>
82+
</div>
83+
);
84+
};
85+
86+
export default Feedback;

0 commit comments

Comments
 (0)