Push ynlmnrwpxkql

package.json

@@ -50,7 +50,7 @@
     "@vitest/coverage-v8": "^3.2.4"
   },
   "peerDependencies": {
-    "react": "^19.1.0"
+    "react": "^19"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",

src/CodeBlock/CodeBlock.stories.tsx

@@ -11,9 +11,16 @@ const meta = {
       control: "select",
       options: [...highlightLanguages],
     },
+    kind: {
+      control: "select",
+      options: ["snippet", "file"],
+    },
     code: { control: "text" },
     allowCopy: { control: "boolean" },
   },
+  args: {
+    kind: "snippet",
+  },
 } satisfies Meta<typeof CodeBlock>;
 
 export default meta;
@@ -55,3 +62,54 @@ jobs:
     allowCopy: true,
   },
 };
+export const GithubCI: Story = {
+  args: {
+    language: "yaml",
+    code: `on:
+  pull_request:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  nix-ci:
+    runs-on: ubuntu-latest
+    # Include this block to log in to FlakeHub and access private flakes
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - uses: DeterminateSystems/determinate-nix-action@v3
+      - uses: DeterminateSystems/flakehub-cache-action@main
+      - uses: DeterminateSystems/nix-flake-checker-action@main
+      - run: nix flake check`,
+    title: ".github/workflows/nix-ci.yaml",
+    kind: "file",
+    allowCopy: true,
+    allowDownload: true,
+  },
+};
+
+export const AWS: Story = {
+  args: {
+    language: "terraform",
+    code: `data "aws_ami" "detsys_nixos" {
+  owners      = ["535002876703"]
+  most_recent = true
+
+  filter {
+    name   = "name"
+    values = ["determinate/nixos/epoch-1/*"]
+  }
+
+  filter {
+    name   = "architecture"
+    values = ["x86_64"] # or "ARM64" for Graviton
+  }
+}`,
+    title: "aws_ami.tf",
+    kind: "file",
+  },
+};

src/CodeBlock/index.scss

@@ -2,7 +2,38 @@
 
 @use "../sass/mixins";
 @use "../sass/tokens";
+@use "../sass/functions";
+
+.code-block {
+  @include mixins.border(base);
+  @include mixins.margin-y(xl);
+
+  .highlight {
+    @include mixins.border-bottom(base);
+    @include mixins.pad(base);
+  }
+}
 
 .code-block__heading {
-  @include mixins.pad-bottom(lg);
+  @include mixins.border-top(base);
+
+  padding: map.get(tokens.$spacing, base) map.get(tokens.$spacing, lg);
+  text-align: center;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+
+  @include mixins.light-mode {
+    color: map.get(tokens.$brand, black);
+  }
+
+  background: functions.lighten(map.get(tokens.$brand, black), 5%);
+  @include mixins.light-mode {
+    background: functions.darken(map.get(tokens.$brand, white), 5%);
+  }
+  background-repeat: no-repeat;
+
+  .code-block__title--file {
+    font-family: map.get(tokens.$fonts, mono);
+  }
 }

src/CodeBlock/index.tsx

@@ -5,12 +5,17 @@ import Highlight from "../Highlight";
 import CopyButton from "../CopyButton";
 
 import "./index.scss";
+import DownloadButton from "../DownloadButton";
+import clsx from "clsx";
 
 export interface CodeBlockProps {
   language: HighlightLanguage;
   code: string;
   title: string;
+  downloadAs?: string;
   allowCopy?: boolean;
+  allowDownload?: boolean;
+  kind: "snippet" | "file";
 }
 
 /**
@@ -20,14 +25,40 @@ const CodeBlock: FC<CodeBlockProps> = ({
   language,
   code,
   title,
+  downloadAs = title,
+  allowDownload = true,
   allowCopy = true,
-}) => (
-  <figure className="code-block" aria-label={title}>
-    <figcaption className="code-block__heading">
-      {title} {allowCopy && <CopyButton data={code} />}
-    </figcaption>
-    <Highlight language={language} code={code} />
-  </figure>
-);
+  kind = "snippet",
+}) => {
+  const trimmedCode = code.trim();
+  const isFile = kind === "file";
+
+  return (
+    <figure className="code-block" aria-label={title}>
+      <figcaption className="code-block__heading">
+        <span
+          className={clsx(
+            "code-block__title",
+            isFile && "code-block__title--file",
+          )}
+        >
+          {title}
+        </span>
+        {(allowCopy || allowDownload) && (
+          <span className="code-block__icons">
+            {allowCopy && <CopyButton data={trimmedCode} />}
+            {allowDownload && isFile && (
+              <DownloadButton
+                data={trimmedCode}
+                filename={downloadAs.split("/").reverse()[0]}
+              />
+            )}
+          </span>
+        )}
+      </figcaption>
+      <Highlight language={language} code={trimmedCode} />
+    </figure>
+  );
+};
 
 export default CodeBlock;

src/ColorProvider/index.tsx

@@ -95,9 +95,15 @@ const ColorProvider: React.FC<PropsWithChildren<ColorProviderProps>> = ({
   useLocalStorage = true,
   simulatedSystemColorScheme,
   preferredColorScheme,
-  root = document.body,
+  root,
   children,
 }) => {
+  if (!root) {
+    if (typeof document !== "undefined") {
+      root = document.body;
+    }
+  }
+
   const actualSystemColorScheme = useSystemColorScheme();
   const systemColorScheme =
     simulatedSystemColorScheme ?? actualSystemColorScheme;
@@ -110,7 +116,9 @@ const ColorProvider: React.FC<PropsWithChildren<ColorProviderProps>> = ({
   );
 
   // Apply the theme super early so we don't get a FOUC
-  applyTheme(root, scheme);
+  if (root) {
+    applyTheme(root, scheme);
+  }
 
   // Since we're pretty high up in the component tree, we want to be extremely
   // careful about re-rendering. Memoization ensures that the object only
@@ -128,7 +136,9 @@ const ColorProvider: React.FC<PropsWithChildren<ColorProviderProps>> = ({
 
   // Switch body classes depending on the chosen scheme
   useEffect(() => {
-    applyTheme(root, scheme);
+    if (root) {
+      applyTheme(root, scheme);
+    }
   }, [scheme]);
 
   return (

src/Header/index.tsx

@@ -10,7 +10,7 @@ export interface HeaderProps {
 
 const Header: FC<HeaderProps> = ({ logo, elements = [] }) => {
   return (
-    <header className="header" role="banner">
+    <div className="header">
       <div className="header__container">
         {!!logo && <div className="header__logo">{logo}</div>}
 
@@ -22,7 +22,7 @@ const Header: FC<HeaderProps> = ({ logo, elements = [] }) => {
           </div>
         )}
       </div>
-    </header>
+    </div>
   );
 };