docs: Implement feedback

Author: FoxxMD

.vscode/launch.json

@@ -99,6 +99,17 @@
                 "${workspaceFolder}/node_modules/**",
             ],
             "type": "node"
+        },
+        {
+            "name": "Start Docs",
+            "type": "node",
+            "request": "launch",
+            "cwd": "${workspaceRoot}/docsite",
+            "envFile": "${workspaceFolder}/.env",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+                "run-script", "start"
+            ],
         }
     ]
 }

docsite/docusaurus.config.ts

@@ -217,6 +217,9 @@ if (process.env.RY_ANALYTICS !== undefined && process.env.RY_ANALYTICS !== '') {
   if (process.env.RY_ANALYTICS_REPLAY !== undefined && process.env.RY_ANALYTICS_REPLAY !== '') {
     script['data-session-replay'] = process.env.RY_ANALYTICS_REPLAY;
   }
+  if (process.env.RY_ANALYTICS_API !== undefined && process.env.RY_ANALYTICS_API !== '') {
+    script['data-api-key'] = process.env.RY_ANALYTICS_API;
+  }
   config.scripts.push(script)
 }
 

docsite/rybbit.d.ts

@@ -0,0 +1,46 @@
+interface Rybbit {
+    /**
+     * Tracks a page view
+     */
+    pageview: () => void;
+
+    /**
+     * Tracks a custom event
+     * @param name Name of the event
+     * @param properties Optional properties for the event
+     */
+    event: (name: string, properties?: Record<string, any>) => void;
+
+    /**
+     * Sets a custom user ID for tracking logged-in users
+     * @param userId The user ID to set (will be stored in localStorage)
+     */
+    identify: (userId: string) => void;
+
+    /**
+     * Clears the stored user ID
+     */
+    clearUserId: () => void;
+
+    /**
+     * Gets the currently set user ID
+     * @returns The current user ID or null if not set
+     */
+    getUserId: () => string | null;
+    
+    /**
+     * Manually tracks outbound link clicks
+     * @param url The URL of the outbound link
+     * @param text Optional text content of the link
+     * @param target Optional target attribute of the link
+     */
+    trackOutbound: (url: string, text?: string, target?: string) => void;
+}
+
+declare global {
+    interface Window {
+        rybbit: Rybbit;
+    }
+}
+
+export {};

docsite/src/components/Button.tsx

@@ -39,7 +39,8 @@ export default function Button ({
     style = {}, 
     link, 
     label,
-    onClick = () => null
+    onClick = () => null,
+    ...rest
 }: ButtonProps) {
     // Map the size prop values to corresponding CSS classes.
     const sizeMap = {
@@ -76,6 +77,7 @@ export default function Button ({
                     e.preventDefault();
                     onClick()
                 }}
+                {...rest}
             >
                 {label}
             </button>

docsite/src/components/DocsRating.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree. (https://github.com/facebook/react-native-website)
+ */
+
+import React, { useState } from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+const DocsRating = ({ label }) => {
+    const isBrowser = useIsBrowser();
+    const [haveVoted, setHaveVoted] = useState(false);
+
+    if (!isBrowser) {
+        return null;
+    }
+
+    const giveFeedback = value => {
+        if ('rybbit' in window) {
+            window.rybbit.event('feedback', {
+                helpful: value == 1 ? 'true' : 'false'
+            });
+        }
+        setHaveVoted(true);
+    };
+
+    return (
+        <div className="docsRating">
+            {haveVoted ? (
+                'Thanks for letting us know!'
+            ) : (
+                <div>
+                    Is this page helpful?
+                    <svg
+                        className="i_thumbsup"
+                        aria-label="Like"
+                        onClick={() => giveFeedback(1)}
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 81.13 89.76">
+                        <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+                    </svg>
+                    <svg
+                        className="i_thumbsdown"
+                        aria-label="Dislike"
+                        onClick={() => giveFeedback(0)}
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 81.13 89.76">
+                        <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
+                    </svg>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DocsRating;

docsite/src/css/custom.css

@@ -33,4 +33,46 @@
   .button--lg {
     --ifm-button-size-multiplier: 1.1;
   }
+}
+
+.docsRating {
+  text-align:center;
+  color:#057594;
+  background-color:#64d7ff4d;
+  border-radius:var(--ifm-global-radius);
+  min-height:66px;
+  margin-top:42px;
+  padding:16px 30px 16px 40px;
+  font-weight:500;
+  line-height:32px;
+  display:inline-block
+}
+.docsRating svg {
+  width:1.5em;
+  height:1.5em;
+  margin:0 0 0 6px
+}
+.docsRating svg:hover,
+.docsRating svg:focus {
+  cursor:pointer;
+  fill:var(--ifm-color-primary)
+}
+.docsRating .i_thumbsup {
+  fill: var(--ifm-link-color);
+  margin-left:12px;
+  transform:translateY(.25em)
+}
+.docsRating .i_thumbsdown {
+  fill:#e9430f;
+  transform:scale(-1)translateY(-.25em)
+}
+html[data-theme=dark] .docsRating {
+  color:#cee9f3
+}
+@media only screen and (width<=996px) {
+  .docsRating {
+    border-radius:var(--ifm-global-radius);
+    width:100%;
+    margin:36px 0 0!important
+  }
 }

docsite/src/theme/DocItem/index.tsx

@@ -0,0 +1,20 @@
+import React, {type ReactNode} from 'react';
+import DocItem from '@theme-original/DocItem';
+import type DocItemType from '@theme/DocItem';
+import type {WrapperProps} from '@docusaurus/types';
+import DocsRating from '@site/src/components/DocsRating';
+
+type Props = WrapperProps<typeof DocItemType>;
+
+export default function DocItemWrapper(props: Props): ReactNode {
+  return (
+    <>
+      <DocItem {...props} />
+      <div className="row">
+        <div className="col col--9" style={{justifyContent: 'center', display: 'flex'}}>
+      <DocsRating label="fdsfd"/>
+      </div>
+      </div>
+    </>
+  );
+}