[daggy u] Add code obfuscation, repair table alignment and spacing (#…

…16689)

## Summary & Motivation

Add optional obfuscation for code fences, repair table alignment and
spacing for the image-based flows.

<img width="1092" alt="Screenshot 2023-09-21 at 11 50 13 AM"
src="https://github.com/dagster-io/dagster/assets/2823852/2ef06d79-5bcf-4e9d-9c60-207b3d77c604">

<img width="1087" alt="Screenshot 2023-09-21 at 11 56 36 AM"
src="https://github.com/dagster-io/dagster/assets/2823852/1c51b699-0b0f-4c11-a87e-24ac7d43213d">

## How I Tested These Changes

View daggy u app, verify that code obfuscation behaves correctly and
that table alignment looks better.

docs/dagster-university/components/CodeBlock.tsx

@@ -7,14 +7,17 @@ Prism.manual = true;
 interface Props {
   children: React.ReactNode;
   'data-language': string;
+  obfuscated: boolean;
 }
 
 const COPY_CONFIRMATION_MSC = 3000;
 
 export const CodeBlock = (props: Props) => {
   const text = props.children;
   const language = props['data-language'];
+  const {obfuscated} = props;
 
+  const [hidden, setHidden] = React.useState(obfuscated);
   const [copied, setCopied] = React.useState(false);
 
   const copyToClipboard = React.useCallback(() => {
@@ -80,6 +83,18 @@ export const CodeBlock = (props: Props) => {
           </span>
         </div>
       </Transition>
+      {hidden ? (
+        <div className="absolute backdrop-blur top-2 left-0 right-0 bottom-2 flex flex-row justify-center">
+          <div className="mt-8">
+            <button
+              className="bg-white py-2 px-4 rounded-full transition hover:no-underline cursor-pointer border text-gable-green hover:text-gable-green-darker hover:border-gable-green"
+              onClick={() => setHidden(false)}
+            >
+              View answer
+            </button>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };

docs/dagster-university/markdoc/nodes/fence.markdoc.ts

@@ -3,5 +3,10 @@ import {CodeBlock} from '../../components';
 
 export const fence = {
   render: CodeBlock,
-  attributes: nodes.fence.attributes,
+  attributes: {
+    obfuscated: {
+      type: Boolean,
+    },
+    ...nodes.fence.attributes,
+  },
 };

docs/dagster-university/pages/dagster-essentials/extra-credit/coding-practice-grouping-assets.md

@@ -23,7 +23,7 @@ The asset groups you built should look similar to the code contained in the **Vi
 
 For the assets in the `raw_files` and `ingested` groups, your assets should look like this:
 
-```python
+```python {% obfuscated="true" %}
 @asset(
   group_name="GROUP_NAME"
 )
@@ -34,7 +34,7 @@ def name_of_asset():
 
 For the `adhoc_request` asset, your code should look like this:
 
-```python
+```python {% obfuscated="true" %}
 request_assets = load_assets_from_modules(
   modules=[requests],
   group_name="requests",

docs/dagster-university/pages/dagster-essentials/extra-credit/coding-practice-metadata-taxi-zones-file.md

@@ -14,7 +14,7 @@ To practice what you’ve learned, add the record counts to the metadata for `ta
 
 The metadata you built should look similar to the code contained in the **View answer** toggle. Click to open it.
 
-```python
+```python {% obfuscated="true" %}
 @asset(
     group_name="raw_files",
 )

docs/dagster-university/pages/dagster-essentials/lesson-4/coding-practice-trips-by-week-asset.md

@@ -51,7 +51,7 @@ Note that the solution below is one of many possible ways to solve this challeng
 
 We’ll assume your code looks like the following for the rest of the module. Despite not being the highest quality code, it’s flexible enough for us to extend in a later section.
 
-```python
+```python {% obfuscated="true" %}
 from datetime import datetime, timedelta
 from . import constants
 

docs/dagster-university/styles/globals.css

@@ -51,3 +51,14 @@ main {
 .callout p {
   margin: 0;
 }
+
+.prose.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)),
+.prose.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  vertical-align: top;
+}
+
+.prose.prose td :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)),
+.prose.prose th :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
+}