From 7dedad3774ffeb09ebad0296b33d17e59ccc94d3 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Thu, 9 Jan 2025 15:48:45 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=99=88=20Hide=20Content=20based=20on=20ta?=
 =?UTF-8?q?gs=20(#517)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/silent-months-trade.md              |  7 +++++++
 packages/jupyter/src/output.tsx                |  8 ++++++--
 packages/myst-to-react/src/code.tsx            |  7 ++++++-
 packages/site/src/components/ContentBlocks.tsx | 11 ++++++++---
 4 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/silent-months-trade.md

diff --git a/.changeset/silent-months-trade.md b/.changeset/silent-months-trade.md
new file mode 100644
index 000000000..35be7c8f9
--- /dev/null
+++ b/.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
diff --git a/packages/jupyter/src/output.tsx b/packages/jupyter/src/output.tsx
index 549a11d55..830c3ac1e 100644
--- a/packages/jupyter/src/output.tsx
+++ b/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;
 }
diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx
index e7f571293..d86c24a38 100644
--- a/packages/myst-to-react/src/code.tsx
+++ b/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 {
diff --git a/packages/site/src/components/ContentBlocks.tsx b/packages/site/src/components/ContentBlocks.tsx
index 9ce870501..8ab1462e4 100644
--- a/packages/site/src/components/ContentBlocks.tsx
+++ b/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({