feat: code snippet highlighting

- feat: format `bazel_dep` code sample with line breaks
- chore: cleanup main app name (`MyApp` became `BazelCentralRegistry`)
- chore: add `prism` and `prism-themes` deps for syntax highlight

Signed-off-by: Sam Gammon <[email protected]>

components/CopyCode.tsx

@@ -1,36 +1,86 @@
+import Prism from "prismjs";
+import "prismjs/components/prism-python";
+
 import { faCopy } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useFloating } from '@floating-ui/react-dom'
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
 export interface CopyCodeProps {
-  code: string
+  module: string
+  version: string
+}
+
+const runtimeDependencyTemplate = (name: string, version: string) => `bazel_dep(
+  name = "${name}",
+  version = "${version}",
+)`
+
+const devDependencyTemplate = (name: string, version: string) => `bazel_dep(
+  name = "${name}",
+  version = "${version}",
+  dev_dependency = True,
+)`
+
+const codeTemplate = (name: string, version: string, dev: boolean = false) => {
+  return (dev ? devDependencyTemplate : runtimeDependencyTemplate)(name, version);
 }
 
-export const CopyCode: React.FC<CopyCodeProps> = ({ code }) => {
+export const CopyCode: React.FC<CopyCodeProps> = ({ module, version }) => {
+  const devCheckbox = useRef();
   const [showCopied, setShowCopied] = useState<boolean>(false)
+  const [isDevDependency, setIsDevDependency] = useState<boolean>(false)
+  const [codeSample, setCodeSample] = useState<string>(
+    codeTemplate(module, version, isDevDependency)
+  )
+
+  useEffect(() => {
+    setCodeSample(codeTemplate(module, version, isDevDependency));
+  }, [isDevDependency]);
+
+  useEffect(() => {
+    const highlight = async () => {
+      await Prism.highlightAll()
+    };
+    highlight()
+  }, [codeSample])
 
   const { x, y, refs, strategy } = useFloating({
     placement: 'top-end',
   })
 
   const handleClickCopy = async () => {
-    await navigator.clipboard.writeText(code)
+    await navigator.clipboard.writeText(codeSample)
     setShowCopied(true)
     setTimeout(() => {
       setShowCopied(false)
     }, 2000)
   }
 
+  const handleDevStateChange = async () => {
+    setIsDevDependency(!isDevDependency);
+  }
+
   return (
     <>
+      <div className="pt-2">
+        <details className="codesample-controls my-4 control">
+          <summary className="control decorative">Customize this sample</summary>
+          <pre className="my-2">
+            <input className="mx-2" type="checkbox" onChange={handleDevStateChange} name="devDependency" />
+            <label htmlFor="devDependency">Dev dependency</label>
+          </pre>
+        </details>
+      </div>
       <button
         ref={refs.setReference}
-        className="w-full flex justify-between items-center p-2 my-4 rounded bg-gray-200 group hover:bg-gray-100 border hover:border-gray-800 cursor-pointer"
+        className="w-full flex justify-between items-center px-2 my-4 rounded bg-gray-200 group hover:bg-gray-100 border hover:border-gray-800 cursor-pointer"
         title="Copy MODULE.bazel snippet to clipboard"
         onClick={handleClickCopy}
       >
-        <code>{code}</code>
+        <pre className="codesample language-python">
+          <code>{codeSample}</code>
+        </pre>
         <div className="text-gray-500 group-hover:text-black">
           <FontAwesomeIcon icon={faCopy} />
         </div>

package.json

@@ -25,11 +25,14 @@
     "gitlog": "^4.0.4",
     "next": "13.4.19",
     "p-memoize": "^7.1.1",
+    "prism-themes": "1.9.0",
+    "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "18.17.9",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.7",

pages/_app.tsx

@@ -1,12 +1,13 @@
 import { config as fontawesomeConfig } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
+import "prism-themes/themes/prism-darcula.css";
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 fontawesomeConfig.autoAddCss = false
 
-function MyApp({ Component, pageProps }: AppProps) {
+function BazelCentralRegistry({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
 
-export default MyApp
+export default BazelCentralRegistry;

pages/modules/[module].tsx

@@ -101,9 +101,7 @@ const ModulePage: NextPage<ModulePageProps> = ({
                     and add the following to your <code>MODULE.bazel</code>{' '}
                     file:
                   </p>
-                  <CopyCode
-                    code={`bazel_dep(name = "${module}", version = "${selectedVersion}")`}
-                  />
+                  <CopyCode module={module as string} version={selectedVersion} />
                   {!!releaseNotesLink && (
                     <p>
                       Read the{' '}

styles/codesample.css

@@ -0,0 +1,15 @@
+
+/** Code snippet on module pages */
+
+.control {
+    cursor: pointer;
+}
+
+pre.codesample {
+    text-align: left;
+    background: transparent;
+}
+
+button pre.codesample, button pre code[class*="language-"] {
+    color: #6E6E6E;
+}

styles/globals.css

@@ -18,3 +18,6 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@import "./page-module.css";
+@import "./codesample.css";

styles/page-module.css

@@ -0,0 +1,10 @@
+
+/** Page: modules/[module].tsx */
+
+.selectable {
+    user-select: all;
+}
+
+.decorative {
+    user-select: none;
+}