Add darkmode support, add analytics

Author: patrikbraborec

src/components/LLMButtons/CopyForLLM/index.tsx

@@ -1,4 +1,3 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import React, { useState } from 'react';
 
 import styles from '../styles.module.css';
@@ -15,11 +14,18 @@ function ButtonText({ isLoading, isCopied }: { isLoading: boolean; isCopied: boo
 }
 
 export default function CopyForLLM() {
-    const copyIcon = useBaseUrl('/img/copy.svg');
     const [isLoading, setIsLoading] = useState(false);
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = async () => {
+        if ((window as any).analytics) {
+            (window as any).analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'Copy for LLM',
+                element: 'llm-buttons.copyForLLM',
+            });
+        }
+
         try {
             setIsLoading(true);
 
@@ -56,14 +62,7 @@ export default function CopyForLLM() {
             disabled={isLoading}
         >
             <span
-                className={styles.llmButtonIcon}
-                style={{
-                    backgroundImage: `url(${copyIcon})`,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundPosition: 'center',
-                    display: 'inline-block',
-                }}
+                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundCopy}`}
                 aria-label="Copy for LLM"
             />
             <ButtonText isLoading={isLoading} isCopied={isCopied} />

src/components/LLMButtons/ViewAsMarkdown/index.tsx

@@ -1,12 +1,17 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 
 import styles from '../styles.module.css';
 
 export default function ViewAsMarkdown() {
-    const markdownIcon = useBaseUrl('/img/markdown.svg');
-
     const handleClick = () => {
+        if ((window as any).analytics) {
+            (window as any).analytics.track('Clicked', {
+                app: 'docs',
+                button_text: 'View as Markdown',
+                element: 'llm-buttons.viewAsMarkdown',
+            });
+        }
+        
         try {
             const currentUrl = window.location.href;
             const markdownUrl = `${currentUrl}.md`;
@@ -23,14 +28,7 @@ export default function ViewAsMarkdown() {
             onClick={handleClick}
         >
             <span
-                className={styles.llmButtonIcon}
-                style={{
-                    backgroundImage: `url(${markdownIcon})`,
-                    backgroundSize: 'contain',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundPosition: 'center',
-                    display: 'inline-block',
-                }}
+                className={`${styles.llmButtonIcon} ${styles.llmButtonIconBackgroundMarkdown}`}
                 aria-label="View as Markdown"
             />
             View as Markdown

src/components/LLMButtons/index.tsx

@@ -7,9 +7,9 @@ import ViewAsMarkdown from './ViewAsMarkdown';
 export default function LLMButtons() {
     return (
         <div className={styles.llmButtonsContainer}>
-            <CopyForLLM />
-            <div className={styles.llmButtonsSeparator}></div>
             <ViewAsMarkdown />
+            <div className={styles.llmButtonsSeparator}></div>
+            <CopyForLLM />
         </div>
     );
 }

src/components/LLMButtons/styles.module.css

@@ -3,13 +3,13 @@
     align-items: center;
     gap: 12px;
     margin-top: -8px;
-    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));;
+    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
 }
 
 .llmButtonsSeparator {
     width: 1px;
     height: 16px;
-    background-color: #e0e0e0;
+    background-color: var(--ifm-hr-background-color);
 }
 
 .llmButton {
@@ -28,11 +28,30 @@
     height: 16px;
     margin: 0 !important;
     cursor: pointer;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: inline-block;
+}
+
+.llmButtonIconBackgroundMarkdown {
+    background-image: url('/img/markdown.svg');
+
+}
+
+.llmButtonIconBackgroundCopy {
+    background-image: url('/img/copy.svg');
 }
 
 /* Dark theme adjustments */
-[data-theme='dark'] .llmButton {
-    background: #2a2a2a;
-    border-color: #404040;
+[data-theme='dark'] .llmButtonIcon {
     color: #e0e0e0;
 }
+
+[data-theme='dark'] .llmButtonIconBackgroundMarkdown {
+    background-image: url('/img/markdown-dark-theme.svg');
+}
+
+[data-theme='dark'] .llmButtonIconBackgroundCopy {
+    background-image: url('/img/copy-dark-theme.svg');
+}

src/theme/DocItem/Content/index.js

@@ -1,5 +1,6 @@
-    import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useLocation } from '@docusaurus/router';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
 import clsx from 'clsx';
@@ -20,12 +21,14 @@ function useSyntheticTitle() {
 
 export default function DocItemContent({ children }) {
   const syntheticTitle = useSyntheticTitle();
+  const location = useLocation();
+  const shouldShowLLMButtons = !location.pathname.startsWith('/legal');
 
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
       <header>
           <Heading as="h1">{syntheticTitle}</Heading>
-          <LLMButtons />
+          {shouldShowLLMButtons && <LLMButtons />}
           <MDXContent>{children}</MDXContent>
         </header>
     </div>