Rename DocumentationContent's content prop to blocks

'content' is a Panda utility name (the CSS property), and Panda
extracts utility-named props from any capitalised JSX component
(playbook gotcha #17) - the unresolvable PortableText values emitted
two broken empty rules, the long-standing 'sheet:process' errors in
every codegen run. 'blocks' matches the BlockContent API it feeds.
panda cssgen now runs error-free.

Author: microbit-matt-hillsdon

src/documentation/common/DocumentationContent.test.tsx

@@ -39,7 +39,7 @@ describe("DocumentationContent", () => {
         style: "normal",
       },
     ];
-    const view = render(<DocumentationContent content={content} />);
+    const view = render(<DocumentationContent blocks={content} />);
     expect(view.container.innerHTML).toMatchInlineSnapshot(
       `"<div class="d_flex flex-d_column gap_3 mt_3"><p><a href="https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4" target="_blank" rel="nofollow noopener" class="cursor_pointer td_none ring_none trs-prop_background-color,_border-color,_color,_fill,_stroke,_opacity,_box-shadow,_transform trs-dur_normal hover:td_underline focusVisible:focus-shadow_outline c_brand.600">Read more about ASCII<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w_1em h_1em d_inline-block lh_1em flex-sh_0 fill_currentColor mb_0.333em ml_1 va_middle" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg></a>.</p></div>"`
     );
@@ -56,7 +56,7 @@ describe("DocumentationContent", () => {
         },
       },
     ];
-    const view = render(<DocumentationContent content={content} />);
+    const view = render(<DocumentationContent blocks={content} />);
     expect(view.container.innerHTML).toMatchInlineSnapshot(
       `"<div class="d_flex flex-d_column gap_3 mt_3"><img src="https://cdn.sanity.io/images/project/dataset/9fccaf51a164fedc98662188593de19bfb9be8ad-435x512.png?w=300&amp;q=80&amp;fit=max&amp;auto=format" alt="micro:bit showing X axis going across the front, Y axis going down and up, Z axis going back to front" class="max-w_100% w_300px bdr_lg bd_solid_1px bd-c_gray.300"></div>"`
     );

src/documentation/common/DocumentationContent.tsx

@@ -30,7 +30,7 @@ export const enum DocumentationCollapseMode {
 }
 
 interface DocumentationContentProps {
-  content?: PortableText;
+  blocks?: PortableText;
   details?: DocumentationCollapseMode;
 }
 
@@ -231,18 +231,18 @@ const serializers = {
  * Wrap with DocumentationContextProvider for linking and other contextual behaviours.
  */
 const DocumentationContent = ({
-  content,
+  blocks,
   details = DocumentationCollapseMode.ShowAll,
 }: DocumentationContentProps) => {
   // If we're expanding or collapsing then we pre-process the content to wrap every run of non-code in Collapse.
-  content = useMemo(() => {
+  blocks = useMemo(() => {
     if (details === DocumentationCollapseMode.ShowAll) {
-      return content || [];
+      return blocks || [];
     }
-    return decorateWithCollapseNodes(content, details);
-  }, [details, content]);
+    return decorateWithCollapseNodes(blocks, details);
+  }, [details, blocks]);
 
-  const rendered = <BlockContent blocks={content} serializers={serializers} />;
+  const rendered = <BlockContent blocks={blocks} serializers={serializers} />;
   return details === DocumentationCollapseMode.ShowAll ? (
     <Stack gap="3" mt="3">
       {rendered}

src/documentation/ideas/IdeasDocumentation.tsx

@@ -121,7 +121,7 @@ const ActiveLevel = ({
               toolkitType="ideas"
               title={activeIdea.name}
             >
-              <DocumentationContent content={activeIdea.content} />
+              <DocumentationContent blocks={activeIdea.content} />
             </DocumentationContextProvider>
           </Stack>
         )}

src/documentation/reference/ReferenceDocumentation.tsx

@@ -90,7 +90,7 @@ const ActiveLevel = ({
       >
         {topic.introduction && (
           <Box p="5" pb="1" fontSize="sm" className={docStylesClass}>
-            <DocumentationContent content={topic.introduction} />
+            <DocumentationContent blocks={topic.introduction} />
           </Box>
         )}
         <List flex="1 1 auto">

src/documentation/reference/ReferenceTopicEntry.tsx

@@ -123,7 +123,7 @@ const ReferenceTopicEntry = ({
           </HStack>
 
           <DocumentationContent
-            content={content}
+            blocks={content}
             details={
               hasMore
                 ? DocumentationCollapseMode.ExpandCollapseExceptCodeAndFirstLine
@@ -154,13 +154,13 @@ const ReferenceTopicEntry = ({
 
               <DocumentationContent
                 details={DocumentationCollapseMode.ExpandCollapseExceptCode}
-                content={activeAlterativeContent}
+                blocks={activeAlterativeContent}
               />
             </>
           )}
           <DocumentationContent
             details={DocumentationCollapseMode.ExpandCollapseAll}
-            content={detailContent}
+            blocks={detailContent}
           />
         </Box>
       </Highlight>