add js package codeblocks

Author: chargome

src/components/codeBlock/index.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import {useEffect, useRef, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
 import {Clipboard} from 'react-feather';
 
 import styles from './code-blocks.module.scss';
 
+import {CodeContext} from '../codeContext';
 import {makeKeywordsClickable} from '../codeKeywords';
 
 export interface CodeBlockProps {
@@ -17,6 +18,7 @@ export interface CodeBlockProps {
 export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
+  const codeContext = useContext(CodeContext);
 
   // Show the copy button after js has loaded
   // otherwise the copy button will not work
@@ -57,7 +59,9 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
       <div className={styles.copied} style={{opacity: showCopied ? 1 : 0}}>
         Copied
       </div>
-      <div ref={codeRef}>{makeKeywordsClickable(children)}</div>
+      <div ref={codeRef}>
+        {makeKeywordsClickable(children, codeContext?.currentJsPackage)}
+      </div>
     </div>
   );
 }

src/components/codeContext.tsx

@@ -105,6 +105,7 @@ type CodeContextType = {
   ];
   storedCodeSelection: SelectedCodeTabs;
   updateCodeSelection: (selection: CodeSelection) => void;
+  currentJsPackage?: string;
 };
 
 export const CodeContext = createContext<CodeContextType | null>(null);
@@ -293,7 +294,13 @@ const getLocallyStoredSelections = (): SelectedCodeTabs => {
   return {};
 };
 
-export function CodeContextProvider({children}: {children: React.ReactNode}) {
+export function CodeContextProvider({
+  children,
+  currentJsPackage,
+}: {
+  children: React.ReactNode;
+  currentJsPackage?: string;
+}) {
   const [codeKeywords, setCodeKeywords] = useState(cachedCodeKeywords ?? DEFAULTS);
   const [isLoading, setIsLoading] = useState<boolean>(cachedCodeKeywords ? false : true);
   const [storedCodeSelection, setStoredCodeSelection] = useState<SelectedCodeTabs>({});
@@ -337,6 +344,7 @@ export function CodeContextProvider({children}: {children: React.ReactNode}) {
   const sharedKeywordSelection = useState<Record<string, number>>({});
 
   const result: CodeContextType = {
+    currentJsPackage,
     codeKeywords,
     storedCodeSelection,
     updateCodeSelection,

src/components/codeKeywords/codeKeywords.tsx

@@ -9,22 +9,29 @@ export const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)_
 
 export const ORG_AUTH_TOKEN_REGEX = /___ORG_AUTH_TOKEN___/g;
 
+export const JS_PACKAGE_REGEX = /___JS_PACKAGE___/g;
+
 type ChildrenItem = ReturnType<typeof Children.toArray>[number] | React.ReactNode;
 
-export function makeKeywordsClickable(children: React.ReactNode) {
+export function makeKeywordsClickable(
+  children: React.ReactNode,
+  currentJsPackage?: string
+) {
   const items = Children.toArray(children);
 
   return items.reduce((arr: ChildrenItem[], child) => {
     if (typeof child !== 'string') {
       const updatedChild = cloneElement(
         child as ReactElement,
         {},
-        makeKeywordsClickable((child as ReactElement).props.children)
+        makeKeywordsClickable((child as ReactElement).props.children, currentJsPackage)
       );
       arr.push(updatedChild);
       return arr;
     }
-    if (ORG_AUTH_TOKEN_REGEX.test(child)) {
+    if (JS_PACKAGE_REGEX.test(child)) {
+      resolveJsPackage(arr, child, currentJsPackage);
+    } else if (ORG_AUTH_TOKEN_REGEX.test(child)) {
       makeOrgAuthTokenClickable(arr, child);
     } else if (KEYWORDS_REGEX.test(child)) {
       makeProjectKeywordsClickable(arr, child);
@@ -36,6 +43,12 @@ export function makeKeywordsClickable(children: React.ReactNode) {
   }, [] as ChildrenItem[]);
 }
 
+function resolveJsPackage(arr: ChildrenItem[], str: string, currentGuide?: string) {
+  runRegex(arr, str, JS_PACKAGE_REGEX, lastIndex => (
+    <span key={`js-package-${lastIndex}`}>{`@sentry/${currentGuide}`}</span>
+  ));
+}
+
 function makeOrgAuthTokenClickable(arr: ChildrenItem[], str: string) {
   runRegex(arr, str, ORG_AUTH_TOKEN_REGEX, lastIndex => (
     <OrgAuthTokenCreator key={`org-token-${lastIndex}`} />

src/components/docPage/index.tsx

@@ -55,6 +55,9 @@ export function DocPage({
 
   const leafNode = nodeForPath(rootNode, unversionedPath);
 
+  const currentJsPackage =
+    currentGuide?.sdk?.split('.').at(-1) || currentPlatform?.sdk?.split('.').at(-1);
+
   return (
     <div className="tw-app">
       <Header pathname={pathname} searchPlatforms={searchPlatforms} />
@@ -83,7 +86,9 @@ export function DocPage({
               </hgroup>
               {/* This exact id is important for Algolia indexing */}
               <div id="main">
-                <CodeContextProvider>{children}</CodeContextProvider>
+                <CodeContextProvider currentJsPackage={currentJsPackage}>
+                  {children}
+                </CodeContextProvider>
               </div>
 
               <div className="grid grid-cols-2 gap-4 not-prose mt-16">