fix: og-image titles, copies testimonials

Author: michalsek

packages/audiodocs/docusaurus.config.js

@@ -4,7 +4,9 @@
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
 
+// eslint-disable-next-line import/first
 import remarkMath from 'remark-math';
+// eslint-disable-next-line import/first
 import rehypeKatex from 'rehype-katex';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -79,6 +81,7 @@ const config = {
   themeConfig: {
     // Replace with your project's social card
     // image: 'img/docusaurus-social-card.jpg',
+    image: 'img/og-image.png',
 
     navbar: {
       hideOnScroll: true,

packages/audiodocs/src/audio/useEqualizerControls.ts

@@ -88,7 +88,9 @@ export default function useEqualizerControls(canvasRef?: React.RefObject<HTMLCan
       }
     }
     return -1;
-  }, [equalizerBands, getControlPointPosition]);  const handleStart = useCallback((clientX: number, clientY: number) => {
+  }, [equalizerBands, getControlPointPosition]);
+
+  const handleStart = useCallback((clientX: number, clientY: number) => {
     if (!canvasRef?.current) {
       return;
     }
@@ -101,6 +103,7 @@ export default function useEqualizerControls(canvasRef?: React.RefObject<HTMLCan
 
     const index = findControlPointAtPosition(x, y, rect);
     if (index !== -1) {
+      canvasRef.current.style.cursor = 'grabbing';
       dragState.current = {
         isDragging: true,
         dragIndex: index,
@@ -138,6 +141,7 @@ export default function useEqualizerControls(canvasRef?: React.RefObject<HTMLCan
     dragState.current.isDragging = false;
     dragState.current.dragIndex = -1;
     canvasRect.current = null;
+    canvasRef.current!.style.cursor = 'pointer';
   }, []);
 
   const handleMouseDown = useCallback((e: MouseEvent) => {

packages/audiodocs/src/components/Canvas/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useLayoutEffect, memo, forwardRef } from 'react';
 
 import styles from './styles.module.css';
+import clsx from 'clsx';
 
 export interface CanvasContext {
   canvas: HTMLCanvasElement;
@@ -11,13 +12,14 @@ interface CanvasProps<RenderingContext> {
   height?: number;
   prepareRenderingContext?: (canvasContext: CanvasContext) => RenderingContext;
   onDraw?: (canvasContext: CanvasContext, renderingContext: RenderingContext) => void
+  className?: string;
 }
 
 const Canvas = forwardRef<HTMLCanvasElement, CanvasProps<any>>(function Canvas<RenderingContext>(
   props: CanvasProps<RenderingContext>,
   ref: React.ForwardedRef<HTMLCanvasElement>
 ) {
-  const { height = 250, onDraw, prepareRenderingContext } = props;
+  const { height = 250, onDraw, prepareRenderingContext, className } = props;
 
   const canvasWrapperRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -82,7 +84,7 @@ const Canvas = forwardRef<HTMLCanvasElement, CanvasProps<any>>(function Canvas<R
 
   return (
     <div ref={canvasWrapperRef}>
-      <canvas className={styles.canvas} ref={setCanvasRef} width={width} height={height}></canvas>
+      <canvas className={clsx(styles.canvas, className)} ref={setCanvasRef} width={width} height={height}></canvas>
     </div>
   );
 });

packages/audiodocs/src/components/Equalizer/index.tsx

@@ -6,6 +6,7 @@ import Canvas, { CanvasContext } from '../Canvas';
 import AudioManager from '@site/src/audio/AudioManager';
 import { clearCanvas, createGradient, drawEqGrid, drawShadedCurve, stretchFrequencies, getEqualizerResponse, getDrawingBounds, Point, drawEQControlPoints } from '@site/src/canvasUtils';
 import useEqualizerControls from '@site/src/audio/useEqualizerControls';
+import styles from './styles.module.css';
 
 interface EqRenderingContext {
   analyser: AnalyserNode;
@@ -55,7 +56,7 @@ const Equalizer: React.FC = () => {
   }, [isPlaying, colorMode]);
 
   return (
-    <Canvas onDraw={onDraw} prepareRenderingContext={prepareRenderingContext} ref={canvasRef} />
+    <Canvas onDraw={onDraw} prepareRenderingContext={prepareRenderingContext} ref={canvasRef} className={styles.canvas} />
   );
 };
 

packages/audiodocs/src/components/Equalizer/styles.module.css

@@ -0,0 +1,4 @@
+
+.canvas {
+  cursor: pointer;
+}

packages/audiodocs/src/components/HireUsSection/index.tsx

@@ -20,19 +20,15 @@ export const HireUsSection = ({
         </h2>
       </div>
       <p className={styles.hireUsSectionBody}>
-        {content ? (
-          content
-        ) : (
-          <>
-We’re a software company built around improving developer experience and bringing innovative clients' ideas to life. We're pushing boundaries and delivering high-performance solutions that scale.
-          </>
-        )}
+        We’re a software company built around improving developer experience and bringing innovative clients' ideas to life. We're pushing boundaries and delivering high-performance solutions that scale.
+        <br />< br />
+        Need help integrating React Native Audio API into your project or want to discuss your ideas?
       </p>
 
       <div className={styles.hireUsButton}>
         <HomepageButton
           href={href}
-          title="Hire us"
+          title="Let's talk"
           target="_blank"
           backgroundStyling={ButtonStyling.SECTION}
           borderStyling={BorderStyling.SECTION}

packages/audiodocs/src/components/LandingBlog/index.tsx

@@ -5,7 +5,7 @@ import styles from "./styles.module.css";
 
 export default () => (
   <section className={styles.container}>
-    <h5 className={styles.title}>Discover the full potential of AudioAPI</h5>
+    <h5 className={styles.title}>Learn more about React Native Audio API</h5>
     <a href="https://medium.com/swmansion/hello-react-native-audio-api-bb0f10347211" target="_blank" className={styles.link}>
       See blog post
       <div className={styles.arrow}>

packages/audiodocs/src/components/Testimonials/TestimonialItem/index.tsx

@@ -17,7 +17,7 @@ interface Props extends PropsWithChildren {
 
 const TestimonialItem = ({ author, company, image, link, children }: Props) => {
   return (
-    <a href={link} target="_blank" className={styles.testimonialItem}>
+    <div className={styles.testimonialItem}>
       <QuoteIcon
         className={styles.quoteIcon}
         color={
@@ -32,11 +32,13 @@ const TestimonialItem = ({ author, company, image, link, children }: Props) => {
         </div>
         <div className={styles.testimonialAuthorInfo}>
           <h5 className={styles.testimonialAuthorName}>{author}</h5>
-          <span className={styles.testimonialCompany}>{company}</span>
+          <a href={link} target="_blank" rel="noopener noreferrer" className={styles.testimonialAuthorLink}>
+            <span className={styles.testimonialCompany}>{company}</span>
+          </a>
         </div>
       </div>
       <p className={styles.testimonialBody}>{children}</p>
-    </a>
+    </div>
   );
 };
 

packages/audiodocs/src/components/Testimonials/TestimonialItem/styles.module.css

@@ -7,7 +7,6 @@
   display: flex;
   gap: 1rem;
   flex-direction: column;
-  /* max-width: calc(50% - 3.5rem / 2); */
   transition: 0.2s ease-in-out;
 }
 
@@ -17,18 +16,6 @@
     min-height: 0;
   }
 }
-.testimonialItem:hover {
-  text-decoration: none;
-  background-color: var(--swm-red-light-40);
-  box-shadow: -12px 12px 0px var(--swm-red-light-80);
-}
-
-.testimonialItem:hover .testimonialAuthorPhoto {
-  background-color: black;
-}
-.testimonialItem:hover .testimonialAuthorPhoto > img {
-  opacity: 0.8;
-}
 
 .testimonialBody {
   margin: 0;
@@ -52,10 +39,6 @@
   background-color: var(--swm-red-dark-140);
   box-shadow: -12px 12px 0px var(--swm-red-light-100);
 }
-[data-theme='dark'] .testimonialItem:hover {
-  background-color: var(--swm-red-dark-120);
-  box-shadow: -12px 12px 0px var(--swm-red-light-100);
-}
 
 [data-theme='dark'] .testimonialAuthorName,
 [data-theme='dark'] .testimonialBody {

packages/audiodocs/src/components/Testimonials/TestimonialList/testimonials.tsx

@@ -13,15 +13,7 @@ const testimonials: Testimonial[] = [
   {
     author: 'Kim Chouard',
     company: 'Odisei Music',
-    body: (
-      <>
-        <span>react-native-audio-api is a total game changer. It fills one of the biggest gaps in the React Native ecosystem by embracing what already works: the Web Audio API, making it universal and somehow even improving the Web in the process.</span>
-        <br /> <br />
-        <span>At Odisei Music, it powers all audio in Odisei Play, our saxophone learning app, where &lt;10ms latency isn’t a luxury, it’s a necessity. No other solution even came close.</span>
-        <br /> <br />
-        <span>This lib doesn’t just solve a problem, it unlocks a whole new category of apps for React Native devs.</span>
-      </>
-    ),
+    body: `React-native-audio-api is a total game changer – it fills one of the biggest gaps in the React Native ecosystem. At Odisei Music, it powers all audio in Odisei Play, our saxophone learning app, where <10ms latency isn’t a luxury, it’s a necessity. No other solution even came close. This lib doesn’t just solve a problem, it unlocks a whole new category of apps for React Native devs.`,
     link: 'https://odiseimusic.com/odisei-play/',
     image: {
       alt: 'Kim Chouard',