🙈 Hide Content based on tags

.changeset/silent-months-trade.md

@@ -0,0 +1,7 @@
+---
+'myst-to-react': patch
+'@myst-theme/jupyter': patch
+'@myst-theme/site': patch
+---
+
+Hide content when tags are activated

packages/jupyter/src/output.tsx

@@ -7,7 +7,7 @@ import { JupyterOutputs } from './jupyter.js';
 import { useMemo } from 'react';
 import { useCellExecution } from './execute/index.js';
 import { usePlaceholder } from './decoration.js';
-import { MyST } from 'myst-to-react';
+import { Details, MyST } from 'myst-to-react';
 
 export const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 
@@ -91,7 +91,7 @@ export function JupyterOutput({
 }
 
 export function Output({ node }: { node: GenericNode }) {
-  return (
+  const output = (
     <JupyterOutput
       className={classNames({ hidden: node.visibility === 'remove' })}
       outputId={node.id}
@@ -100,4 +100,8 @@ export function Output({ node }: { node: GenericNode }) {
       data={node.data}
     />
   );
+  if (node.visibility === 'hide') {
+    return <Details title="Output">{output}</Details>;
+  }
+  return output;
 }

packages/myst-to-react/src/code.tsx

@@ -6,6 +6,7 @@ import { CopyIcon } from './components/index.js';
 import { MyST } from './MyST.js';
 import { useMemo } from 'react';
 import type { ComponentProps } from 'react';
+import { Details } from './dropdown.js';
 
 type Props = {
   value: string;
@@ -117,7 +118,7 @@ export function CodeBlock(props: Props) {
 }
 
 const code: NodeRenderer = ({ node }) => {
-  return (
+  const child = (
     <CodeBlock
       identifier={node.html_id}
       // data-cell-id={node.executable ? parentId : undefined}
@@ -135,6 +136,10 @@ const code: NodeRenderer = ({ node }) => {
       className={classNames({ hidden: node.visibility === 'remove' }, node.class)}
     />
   );
+  if (node.visibility === 'hide') {
+    return <Details title="Source">{child}</Details>;
+  }
+  return child;
 };
 
 function isColor(maybeColorHash: string): string | undefined {

packages/site/src/components/ContentBlocks.tsx

@@ -1,4 +1,4 @@
-import { MyST } from 'myst-to-react';
+import { Details, MyST } from 'myst-to-react';
 import { SourceFileKind } from 'myst-spec-ext';
 import type { GenericParent } from 'myst-common';
 import classNames from 'classnames';
@@ -22,17 +22,18 @@ export function Block({
   className?: string;
 }) {
   const grid = useGridSystemProvider();
-  const subGrid = `${grid} subgrid-gap col-screen`;
+  const subGrid = node.visibility === 'hide' ? '' : `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =
     (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
-  return (
+  const block = (
     <div
       key={`block-${id}`}
       id={id}
       className={classNames('relative group/block', className, dataClassName, {
         [subGrid]: !noSubGrid,
+        hidden: node.visibility === 'remove',
       })}
     >
       {pageKind === SourceFileKind.Notebook && isACodeCell(node) && (
@@ -53,6 +54,10 @@ export function Block({
       <MyST ast={node.children} />
     </div>
   );
+  if (node.visibility === 'hide') {
+    return <Details title="Notebook Cell">{block}</Details>;
+  }
+  return block;
 }
 
 export function ContentBlocks({