LiveCode: Allow scope to be a function (#332)

* allow scope to be a function

* add changeset

Author: siddharthkp

.changeset/dynamic-live-scope.md

@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': minor
+---
+
+Support function for `live-code-scope`

theme/src/components/code.js

@@ -6,12 +6,12 @@ import React from 'react'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
-function Code({className, children, live, noinline}) {
+function Code({className, children, live, noinline, metastring}) {
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
 
   if (live) {
-    return <LiveCode code={code} language={language} noinline={noinline} />
+    return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
   }
 
   return (

theme/src/components/live-code.js

@@ -34,14 +34,24 @@ function wrapWithFragment(jsx) {
   return `<React.Fragment>${jsx}</React.Fragment>`
 }
 
-function LiveCode({code, language, noinline}) {
+const getResolvedScope = metastring => {
+  if (typeof scope === 'function') return scope(metastring)
+  return scope
+}
+
+function LiveCode({code, language, noinline, metastring}) {
   const theme = React.useContext(ThemeContext)
   const [liveCode, setLiveCode] = useState(code)
   const handleChange = updatedLiveCode => setLiveCode(updatedLiveCode)
 
   return (
     <Flex sx={{flexDirection: 'column', mb: 3}}>
-      <LiveProvider scope={scope} code={liveCode} transformCode={languageTransformers[language]} noInline={noinline}>
+      <LiveProvider
+        scope={getResolvedScope(metastring)}
+        code={liveCode}
+        transformCode={languageTransformers[language]}
+        noInline={noinline}
+      >
         <Flex
           sx={{
             border: '1px solid',