Add Rate this Page

package.json

@@ -59,7 +59,7 @@
     "webpack-merge": "5.8.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.5.2",
+    "@docusaurus/module-type-aliases": "^3.6.3",
     "@jest/globals": "^29.7.0",
     "@tsconfig/docusaurus": "^2.0.3",
     "@types/jest": "^29.5.14",

src/components/feedbackFaces.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { event } from "@site/src/utils/gtags.client";
+
+// Default export function component
+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 pagePath = window.location.pathname;
+        const label = `${feedbackType} - ${pagePath}`;
+
+        event({
+            action: "feedback_click",
+            category: "Feedback",
+            label: label,
+            location: pagePath,
+        });
+
+        // Reset the clicked state after a brief delay
+        setTimeout(() => setClickedFace(null), 300);
+    };
+
+    return (
+        <div style={styles.container}>
+            {faces.map((face) => (
+                <button
+                    key={face.label}
+                    onClick={() => handleFeedbackClick(face.label)}
+                    style={{
+                        ...styles.button,
+                        transform: clickedFace === face.label ? "scale(1.2)" : "scale(1)",
+                        opacity: clickedFace === face.label ? 0.7 : 1,
+                    }}
+                    aria-label={face.label}
+                >
+                    {face.emoji}
+                </button>
+            ))}
+        </div>
+    );
+}
+
+// Inline CSS styles
+const styles = {
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+    } as React.CSSProperties,
+    button: {
+        fontSize: "30px",
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        transition: "transform 0.2s, opacity 0.2s",
+        padding: "10px",
+    } as React.CSSProperties,
+};

src/theme/TOC/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import type { Props } from '@theme/TOC';
+
+import styles from './styles.module.css';
+import FeedbackFaces from '@site/src/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 }: Props): JSX.Element {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <h6 className={styles.tableOfContentsTitle}>Rate this page</h6>
+      <FeedbackFaces />
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}

src/theme/TOC/styles.module.css

@@ -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;
+  }
+}

src/utils/gtags.client.ts

@@ -37,11 +37,13 @@ export const event = ({
   category,
   label,
   value,
+  location
 }: {
   action?: string;
   category?: string;
   label?: string;
   value?: number | string;
+  location?: string;
 }) => {
   if (process.env.NODE_ENV !== "production") return
 
@@ -51,11 +53,18 @@ export const event = ({
     )
     return
   }
-  window.gtag("event", action, {
+
+  const eventPayload: Record<string, any> = {
     event_category: category,
     event_label: label,
     value: value,
-  })
+  };
+
+  if (location) {
+    eventPayload.page_location = location;
+  }
+
+  window.gtag("event", action, eventPayload);
 }
 
 export const reportWebVitalsToGA = (vitals: Metric) => {

tsconfig.json

@@ -5,7 +5,13 @@
     "jsx": "react",
     "baseUrl": ".",
     "strictNullChecks": true,
-    "typeRoots": ["./", "./node_modules/@types"]
+    "typeRoots": [
+      "./",
+      "./node_modules/@types"
+    ]
   },
-  "include": ["src", "docusaurus.config.d.ts"]
-}
+  "include": [
+    "src",
+    "docusaurus.config.d.ts"
+  ]
+}