Merge pull request #157 from ethdebug/whisper-draft

Specify draft status more clearly

Author: gnidan

packages/web/docusaurus.config.ts

@@ -128,8 +128,8 @@ const config: Config = {
         },
         {
           to: '/status',
-          label: "⚠️ INCOMPLETE DRAFT ⚠️",
-          className: "draft-warning",
+          label: "Status: Draft",
+          className: "status-indicator",
           position: "right"
         },
         {

packages/web/spec/data/overview.mdx

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import StatusBanner from "@site/src/components/StatusBanner";
+
 # Overview
 
 :::tip[Summary]
@@ -15,6 +17,10 @@ a consistent way of representing these types.
 
 :::
 
+## Status
+
+<StatusBanner schema="data" />
+
 ## Reading these schemas
 
 The **ethdebug/format/data** namespace is not a schema itself, but rather

packages/web/spec/info/overview.mdx

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import StatusBanner from "@site/src/components/StatusBanner";
+
 # Overview
 
 :::tip[Summary]
@@ -37,13 +39,16 @@ This format defines the primary **ethdebug/format/info** schema.
 JSON values adhering to this schema contain debugging information about a
 single invocation of a compiler.
 
+## Status
+
+<StatusBanner schema="info" />
 
 ## Reading this schema
 
-The **ethdebug/format/info** schema is a standalone schema and does not define
-a corresponding namespace.
+The **ethdebug/format/info** schema is a root schema that also defines the
+**ethdebug/format/info/resources** subschema.
 
-This schema (like all schemas in this format) are specified as
+These schemas (like all schemas in this format) are specified as
 [JSON Schema](https://json-schema.org), draft 2020-12.
 
 Please refer to one or more of the following resources in this section, or

packages/web/spec/materials/overview.mdx

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import StatusBanner from "@site/src/components/StatusBanner";
+
 # Overview
 
 :::tip[Summary]
@@ -20,6 +22,10 @@ sources, e.g.
 This format defines a namespace of schemas for representing external resources
 relevant to smart contract debugging.
 
+## Status
+
+<StatusBanner schema="materials" />
+
 ## Reading these schemas
 
 The **ethdebug/format/materials** namespace is not a schema itself, but rather

packages/web/spec/pointer/overview.mdx

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import StatusBanner from "@site/src/components/StatusBanner";
+
 # Overview
 
 :::tip[Summary]
@@ -37,6 +39,10 @@ must be read from which location(s). Values in this schema may address
 a single continuous region of bytes or an aggregation of non-continuous related
 regions.
 
+## Status
+
+<StatusBanner schema="pointer" />
+
 ## Reading this schema
 
 The **ethdebug/format/pointer** schema is a root schema that composes other

packages/web/spec/program/overview.mdx

@@ -2,14 +2,9 @@
 sidebar_position: 1
 ---
 
-# Overview
-
-:::warning
+import StatusBanner from "@site/src/components/StatusBanner";
 
-This schema and its subschemas remain largely incomplete. Please stay tuned as
-work continues here.
-
-:::
+# Overview
 
 :::tip[Summary]
 
@@ -58,6 +53,10 @@ machine state at the time of the instruction back into high-level language
 concepts. This allows debuggers to provide a meaningful representation of
 program state at any point during execution.
 
+## Status
+
+<StatusBanner schema="program" />
+
 ## Reading this schema
 
 The **ethdebug/format/program** schema is a root schema that composes other

packages/web/spec/type/overview.mdx

@@ -6,6 +6,7 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import { describeSchema } from "@ethdebug/format";
 import CodeBlock from "@theme/CodeBlock";
+import StatusBanner from "@site/src/components/StatusBanner";
 
 # Overview
 
@@ -54,6 +55,10 @@ JSON values that adhere to this schema may (for example) represent a particular
 fields, a particular `mapping` type from a certain key type to a certain value
 type, and so on.
 
+## Status
+
+<StatusBanner schema="type" />
+
 ## Reading this schema
 
 The **ethdebug/format/type** schema is a root schema that conditionally defers

packages/web/src/components/StatusBadge.module.css

@@ -0,0 +1,45 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500;
+  border-radius: 4px;
+  color: white;
+  white-space: nowrap;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.link:hover .badge {
+  opacity: 0.9;
+}
+
+/* Sizes */
+.small {
+  padding: 2px 6px;
+  font-size: 0.7rem;
+}
+
+.medium {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+}
+
+.large {
+  padding: 6px 14px;
+  font-size: 0.9rem;
+}
+
+/* Status colors */
+.in-design {
+  background-color: #6366f1;
+}
+
+.implementable {
+  background-color: #d97706;
+}
+
+.reference-available {
+  background-color: #059669;
+}

packages/web/src/components/StatusBadge.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import {
+  statusLevels,
+  type StatusLevel,
+} from "@site/src/status/status-config";
+import styles from "./StatusBadge.module.css";
+
+export interface StatusBadgeProps {
+  status: StatusLevel;
+  size?: "small" | "medium" | "large";
+  linkToStatus?: boolean;
+}
+
+export default function StatusBadge({
+  status,
+  size = "medium",
+  linkToStatus = true,
+}: StatusBadgeProps): JSX.Element {
+  const info = statusLevels[status];
+
+  const badge = (
+    <span
+      className={`${styles.badge} ${styles[size]} ${styles[status]}`}
+      title={info.description}
+    >
+      {info.label}
+    </span>
+  );
+
+  if (linkToStatus) {
+    return (
+      <Link to="/status" className={styles.link}>
+        {badge}
+      </Link>
+    );
+  }
+
+  return badge;
+}

packages/web/src/components/StatusBanner.module.css

@@ -0,0 +1,75 @@
+.banner {
+  padding: 1rem 1.25rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  border-left: 4px solid;
+}
+
+.banner.in-design {
+  background-color: rgba(99, 102, 241, 0.1);
+  border-left-color: #6366f1;
+}
+
+.banner.implementable {
+  background-color: rgba(217, 119, 6, 0.1);
+  border-left-color: #d97706;
+}
+
+.banner.reference-available {
+  background-color: rgba(5, 150, 105, 0.1);
+  border-left-color: #059669;
+}
+
+.header {
+  margin-bottom: 0.75rem;
+}
+
+.summary {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.caveats {
+  margin: 0.75rem 0;
+  font-size: 0.9rem;
+}
+
+.caveats ul {
+  margin: 0.25rem 0 0 1.25rem;
+  padding: 0;
+}
+
+.caveats li {
+  margin: 0.25rem 0;
+}
+
+.note {
+  margin: 0.75rem 0;
+  font-size: 0.85rem;
+  font-style: italic;
+  opacity: 0.85;
+}
+
+.reference {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.9rem;
+}
+
+.learnMore {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.85rem;
+}
+
+/* Dark mode adjustments */
+[data-theme="dark"] .banner.in-design {
+  background-color: rgba(99, 102, 241, 0.15);
+}
+
+[data-theme="dark"] .banner.implementable {
+  background-color: rgba(217, 119, 6, 0.15);
+}
+
+[data-theme="dark"] .banner.reference-available {
+  background-color: rgba(5, 150, 105, 0.15);
+}