Merge pull request #41 from jhiemstrawisc/docs-push

Add Example callout and stylized Terminal block for writing user docs

Author: CannonLock

components/Callout.tsx

@@ -0,0 +1,17 @@
+// Wrapper around Nextra Callout to add "example" type for user documentation
+import { Callout as NextraCallout } from 'nextra/components'
+
+type CalloutProps = React.ComponentProps<typeof NextraCallout> & {
+  type?: 'default' | 'info' | 'warning' | 'error' | 'success' | 'example'
+}
+
+export function Callout({ type, children, ...props }: CalloutProps) {
+  if (type === 'example') {
+    return (
+      <NextraCallout type="info" {...props}>
+        <strong>Example:</strong> {children}
+      </NextraCallout>
+    )
+  }
+  return <NextraCallout type={type as any} {...props}>{children}</NextraCallout>
+}

components/Terminal.tsx

@@ -0,0 +1,25 @@
+// Module to help create terminal-like code blocks in user documentation.
+import React from "react";
+
+// It'd be cool if we colored lines beginning with $ differently, but I wasn't
+// able to figure that out.
+export function Terminal({ children }) {
+  return (
+    <pre
+      style={{
+        background: "#222",
+        color: "#eee",
+        padding: "1em",
+        borderRadius: "6px",
+        fontSize: "1em",
+        overflowX: "auto",
+        margin: "1em 0",
+        // Not sure how to altogether avoid rendering links (example links in Terminal blocks are probably never
+        // real links), but this makes them non-clickable
+        pointerEvents: "none",
+      }}
+    >
+      <code style={{ whiteSpace: "pre-wrap" }}>{children}</code>
+    </pre>
+  );
+}