From 45286f0b16f391adecdd9426ef41ff13948489ee Mon Sep 17 00:00:00 2001 From: Sam Gammon Date: Mon, 11 Sep 2023 13:59:44 -0700 Subject: [PATCH] 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 --- components/CopyCode.tsx | 62 +++++++++- package.json | 3 + pages/_app.tsx | 5 +- pages/modules/[module].tsx | 4 +- pnpm-lock.yaml | 246 ++++++++++++++++++++++--------------- styles/codesample.css | 15 +++ styles/globals.css | 3 + styles/page-module.css | 10 ++ 8 files changed, 238 insertions(+), 110 deletions(-) create mode 100644 styles/codesample.css create mode 100644 styles/page-module.css diff --git a/components/CopyCode.tsx b/components/CopyCode.tsx index a528e8453506..23c28ad1e0c6 100644 --- a/components/CopyCode.tsx +++ b/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 = ({ code }) => { +export const CopyCode: React.FC = ({ module, version }) => { + const devCheckbox = useRef(); const [showCopied, setShowCopied] = useState(false) + const [isDevDependency, setIsDevDependency] = useState(false) + const [codeSample, setCodeSample] = useState( + 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 ( <> +
+
+ Customize this sample + 
+            
+            
+
+
+