feat(spec): add button to go to the continuation documentation

Author: i582

spec/astro.config.mjs

@@ -152,16 +152,23 @@ export default defineConfig({
         {
           label: "Book",
           items: [
-            {slug: "book/basics-register-c0-cc-savelist-if-instruction"},
-            {slug: "book/diving-deeper-exit-points-of-continuations"},
-            {slug: "book/manual-handling-and-jmp-vs-execute"},
+            {
+              label: "Continuations",
+              items: [
+                {slug: "book/continuations/basics-register-c0-cc-savelist-if-instruction"},
+                {slug: "book/continuations/diving-deeper-exit-points-of-continuations"},
+                {slug: "book/continuations/manual-handling-and-jmp-vs-execute"},
+              ],
+            },
           ],
         },
       ],
     }),
     react(),
   ],
   redirects: {
-    "/": "/spec/doc/book/basics-register-c0-cc-savelist-if-instruction/",
+    "/": "/spec/doc/book/continuations/basics-register-c0-cc-savelist-if-instruction/",
+    "/book/continuations":
+      "/spec/doc/book/continuations/basics-register-c0-cc-savelist-if-instruction/",
   },
 })

spec/src/content/docs/book/basics-register-c0-cc-savelist-if-instruction.mdx renamed to spec/src/content/docs/book/continuations/basics-register-c0-cc-savelist-if-instruction.mdx

@@ -2,7 +2,7 @@
 title: "Diving deeper: exit points of continuations"
 ---
 
-In the [previous article](/spec/doc/book/basics-register-c0-cc-savelist-if-instruction/), we explored the `c0` register and its role in control flow. In this article, we'll look at the other two control registers: `c1` (alternative return) and `c2` (exception handler).
+In the [previous article](/spec/doc/book/continuations/basics-register-c0-cc-savelist-if-instruction/), we explored the `c0` register and its role in control flow. In this article, we'll look at the other two control registers: `c1` (alternative return) and `c2` (exception handler).
 
 While the first article focused on the normal exit point of a continuation (when its code ends or `RET` is called), every continuation actually has three distinct exit points.
 

spec/src/content/docs/book/diving-deeper-exit-points-of-continuations.mdx renamed to spec/src/content/docs/book/continuations/diving-deeper-exit-points-of-continuations.mdx

@@ -2,7 +2,7 @@
 title: "Manual handling and JMP vs. EXECUTE"
 ---
 
-In the [previous article](/spec/doc/book/diving-deeper-exit-points-of-continuations/), we explored how TVM uses control registers (`c0`, `c1`, `c2`) automatically. In this part of the basics series, we'll see how to manipulate these registers directly using `PUSHCTR` and `POPCTR`, and clarify the crucial difference between the `JMP` and `EXECUTE` families of instructions.
+In the [previous article](/spec/doc/book/continuations/diving-deeper-exit-points-of-continuations/), we explored how TVM uses control registers (`c0`, `c1`, `c2`) automatically. In this part of the basics series, we'll see how to manipulate these registers directly using `PUSHCTR` and `POPCTR`, and clarify the crucial difference between the `JMP` and `EXECUTE` families of instructions.
 
 ## Manual register control: PUSHCTR and POPCTR
 

spec/src/content/docs/book/manual-handling-and-jmp-vs-execute.mdx renamed to spec/src/content/docs/book/continuations/manual-handling-and-jmp-vs-execute.mdx

@@ -291,7 +291,7 @@
   --color-neutral: #8e8e93;
   --color-neutral-rgb: 142, 142, 147;
   --color-neutral-bg: #3a3a3c;
-  --color-neutral-bg-hover: #48484a;
+  --color-neutral-bg-hover: #2f2f30;
   --color-neutral-bg-hover-alpha: rgba(var(--color-neutral-rgb), 0.2);
   --color-neutral-bg-alpha: rgba(var(--color-neutral-rgb), 0.3);
 

src/index.css

@@ -183,3 +183,19 @@
     margin-left: 0;
   }
 }
+
+.subCategoryAndDocsContainer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .subCategoryAndDocsContainer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+}

src/pages/InstructionsPage/InstructionsPage.module.css

@@ -21,6 +21,7 @@ import {
 } from "@app/pages/InstructionsPage/settings.ts"
 
 import Footer from "./components/Footer"
+import ContinuationsDocsBanner from "./components/ContinuationsDocsBanner/ContinuationsDocsBanner.tsx"
 
 import styles from "./InstructionsPage.module.css"
 
@@ -259,7 +260,7 @@ function InstructionsPage() {
 
   return (
     <div className={styles.traceViewWrapper}>
-      <PageHeader pageTitle="spec" titleBadgeText="Beta" titleBadgeColor="green">
+      <PageHeader pageTitle="spec" documentationLink={"/spec/doc/"}>
         <div className={styles.mainActionContainer}></div>
       </PageHeader>
 
@@ -293,12 +294,15 @@ function InstructionsPage() {
               }}
             />
             {subCategories.length > 0 && (
-              <CategoryTabs
-                categories={subCategories}
-                selected={selectedSubCategory}
-                onSelect={setSelectedSubCategory}
-                label="Subcategory:"
-              />
+              <div className={styles.subCategoryAndDocsContainer}>
+                <CategoryTabs
+                  categories={subCategories}
+                  selected={selectedSubCategory}
+                  onSelect={setSelectedSubCategory}
+                  label="Subcategory:"
+                />
+                {selectedCategory === "continuation" && <ContinuationsDocsBanner />}
+              </div>
             )}
           </div>
           <InstructionTable

src/pages/InstructionsPage/InstructionsPage.tsx

@@ -0,0 +1,43 @@
+.compactBanner {
+  padding-top: var(--spacing-lg);
+}
+
+.compactContent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-neutral-bg-hover);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.labelLink {
+  color: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.labelLink:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+@media (max-width: 1200px) {
+  .compactBanner {
+    padding-top: 0;
+    padding-bottom: var(--spacing-sm);
+  }
+
+  .compactContent {
+    gap: var(--spacing-xs);
+  }
+}

src/pages/InstructionsPage/components/ContinuationsDocsBanner/ContinuationsDocsBanner.module.css

@@ -0,0 +1,24 @@
+import React from "react"
+import {FiBookOpen} from "react-icons/fi"
+
+import styles from "./ContinuationsDocsBanner.module.css"
+
+const ContinuationsDocsBanner: React.FC = () => {
+  return (
+    <div className={styles.compactBanner} role="note" aria-label="Documentation suggestion">
+      <div className={styles.compactContent}>
+        <FiBookOpen size={14} aria-hidden="true" />
+        <a
+          href="/spec/doc/book/continuations/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.labelLink}
+        >
+          Learn more about continuations
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default ContinuationsDocsBanner

src/pages/InstructionsPage/components/ContinuationsDocsBanner/ContinuationsDocsBanner.tsx

@@ -13,6 +13,7 @@ interface PageHeaderProps {
   readonly children?: React.ReactNode
   readonly titleBadgeText?: string
   readonly titleBadgeColor?: "green" | "red" | "blue" | "gray"
+  readonly documentationLink?: string
 }
 
 const PageHeaderFc: React.FC<PageHeaderProps> = ({
@@ -21,6 +22,7 @@ const PageHeaderFc: React.FC<PageHeaderProps> = ({
   children,
   titleBadgeText,
   titleBadgeColor = "gray",
+  documentationLink = "https://docs.ton.org/",
 }) => {
   const isPlayground = pageTitle === "playground"
   const isExplorer = pageTitle === "explorer"
@@ -65,7 +67,7 @@ const PageHeaderFc: React.FC<PageHeaderProps> = ({
 
       <nav className={styles.headerLinks} aria-label="External links">
         <a
-          href="https://docs.ton.org/"
+          href={documentationLink}
           target="_blank"
           rel="noopener noreferrer"
           title="TON Documentation"