Merge pull request #1057 from onflow/brian-doyle/add-page-ranking-tags

Add Rate this Page to all Docs Pages

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,43 @@
+import React, { useState } from "react";
+import { event } from "@site/src/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>
+    );
+}

src/theme/TOC/index.tsx

@@ -0,0 +1,28 @@
+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)}>
+      <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>
+  );
+}

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

@@ -19,7 +19,7 @@ export const pageview = (url: string, trackingId: string) => {
 
   if (!window.gtag) {
     console.warn(
-      "window.gtag is not defined. This could mean your google anylatics script has not loaded on the page yet."
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet."
     )
     return
   }
@@ -37,25 +37,34 @@ export const event = ({
   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 anylatics script has not loaded on the page yet."
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet."
     )
     return
   }
-  window.gtag("event", action, {
+
+  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) => {

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"
+  ]
+}