-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #184 from onflow/brian-doyle/add-page-rating
Add faces feedback widget
- Loading branch information
Showing
9 changed files
with
918 additions
and
87 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import React, { useState } from "react"; | ||
| import { event } from "../utils/gtags.client"; | ||
|
|
||
| export default function FeedbackFaces() { | ||
| const [clickedFace, setClickedFace] = useState<string | null>(null); | ||
|
|
||
| const faces = [ | ||
| { label: "sad", emoji: "😞" }, | ||
| { label: "neutral", emoji: "😐" }, | ||
| { label: "happy", emoji: "😊" }, | ||
| ]; | ||
|
|
||
| const handleFeedbackClick = (feedbackType: string) => { | ||
| setClickedFace(feedbackType); | ||
|
|
||
| const label = `${feedbackType}`; | ||
|
|
||
| event({ | ||
| action: "feedback_click", | ||
| category: "feedback", | ||
| label: label, | ||
| location: true, | ||
| }); | ||
|
|
||
| setTimeout(() => setClickedFace(null), 300); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex justify-left items-center gap-1"> | ||
| {faces.map((face) => ( | ||
| <button | ||
| key={face.label} | ||
| onClick={() => handleFeedbackClick(face.label)} | ||
| className={`text-4xl cursor-pointer p-2 bg-transparent border-none transition-transform duration-200 focus:outline-none ${clickedFace === face.label ? "scale-110 opacity-70" : "scale-100 opacity-100" | ||
| }`} | ||
| aria-label={face.label} | ||
| > | ||
| {face.emoji} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import TOCItems from '@theme/TOCItems'; | ||
| import styles from './styles.module.css'; | ||
| import FeedbackFaces from '../../components/feedbackFaces'; | ||
| // 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)}> | ||
| <div className="p-1"> | ||
| <h6 className="mb-0 p-1">Rate this page</h6> | ||
| <FeedbackFaces /> | ||
| </div> | ||
| <TOCItems | ||
| {...props} | ||
| linkClassName={LINK_CLASS_NAME} | ||
| linkActiveClassName={LINK_ACTIVE_CLASS_NAME} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { Metric } from "web-vitals" | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| gtag: ( | ||
| option: string, | ||
| gaTrackingId: string, | ||
| options: Record<string, unknown> | ||
| ) => void | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @example | ||
| * https://developers.google.com/analytics/devguides/collection/gtagjs/pages | ||
| */ | ||
| export const pageview = (url: string, trackingId: string) => { | ||
| if (process.env.NODE_ENV !== "production") return | ||
|
|
||
| if (!window.gtag) { | ||
| console.warn( | ||
| "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet." | ||
| ) | ||
| return | ||
| } | ||
| window.gtag("config", trackingId, { | ||
| page_path: url, | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * @example | ||
| * https://developers.google.com/analytics/devguides/collection/gtagjs/events | ||
| */ | ||
| export const event = ({ | ||
| action = "unknown", | ||
| category, | ||
| label, | ||
| value, | ||
| location | ||
| }: { | ||
| action?: string; | ||
| category?: string; | ||
| label?: string; | ||
| value?: number | string; | ||
| location?: boolean; | ||
| }) => { | ||
| if (process.env.NODE_ENV !== "production") return | ||
|
|
||
| if (!window.gtag) { | ||
| console.warn( | ||
| "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet." | ||
| ) | ||
| return | ||
| } | ||
|
|
||
| const eventPayload: Record<string, any> = { | ||
| event_category: category, | ||
| event_label: label, | ||
| value: value, | ||
| }; | ||
|
|
||
| if (location) { | ||
| eventPayload.page_location = window.location.href; | ||
| } | ||
|
|
||
| window.gtag("event", action, eventPayload); | ||
| } | ||
|
|
||
| export const reportWebVitalsToGA = (vitals: Metric) => { | ||
| if (process.env.NODE_ENV === "production") { | ||
| window.gtag("event", vitals.name, { | ||
| ...vitals, | ||
| value: vitals.delta, // Use `delta` so the value can be summed | ||
| metric_id: vitals.id, // Needed to aggregate events. | ||
| metric_value: vitals.value, // Raw value from the report. | ||
| }) | ||
| } | ||
|
|
||
| // if (window.ENV.LOG_WEB_VITALS) { | ||
| // console.log(vitals) | ||
| // } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /** @type {import('tailwindcss').Config} */ | ||
| module.exports = { | ||
| content: [ | ||
| "./src/**/*.{js,jsx,ts,tsx,mdx}", | ||
| "./docs/**/*.mdx", | ||
| "./docusaurus.config.{js,ts}", | ||
| ], | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| }; |