Merge pull request #12834 from CesiumGS/docs-link

Sandcastle docs link

packages/sandcastle/src/App.css

@@ -3,7 +3,7 @@
   width: 100vw;
   height: 100vh;
   --header-height: min-content;
-  --app-bar-width: 52px;
+  --app-bar-width: 53px;
   grid-template-rows: var(--header-height) auto;
   grid-template-columns: var(--app-bar-width) auto;
   grid-template-areas: "header header" "app-bar content";
@@ -16,6 +16,8 @@
     padding-right: var(--stratakit-space-x4);
     gap: var(--stratakit-space-x2);
     background: var(--stratakit-color-bg-page-depth);
+    border-bottom: var(--stratakit-ext-border-border) solid
+      var(--stratakit-color-border-page-base);
 
     .metadata {
       margin-left: var(--stratakit-space-x2);
@@ -34,6 +36,8 @@
     padding: var(--stratakit-space-x2);
     gap: var(--stratakit-space-x2);
     background: var(--stratakit-color-bg-page-depth);
+    border-right: var(--stratakit-ext-border-border) solid
+      var(--stratakit-color-border-page-base);
 
     button {
       /* Force buttons to be square */

packages/sandcastle/src/App.tsx

@@ -30,6 +30,7 @@ import {
   settings as settingsIcon,
   sun,
   windowPopout,
+  documentation,
 } from "./icons.ts";
 import {
   ConsoleMessage,
@@ -144,16 +145,18 @@ function AppBarButton({
   onClick,
   active = false,
   label,
+  onAuxClick,
 }: {
   children: ReactNode;
   onClick: MouseEventHandler;
   active?: boolean;
   label: string;
+  onAuxClick?: MouseEventHandler;
 }) {
   if (active) {
     return (
       <Tooltip content={label} type="label" placement="right">
-        <Button tone="accent" onClick={onClick}>
+        <Button tone="accent" onClick={onClick} onAuxClick={onAuxClick}>
           {children}
         </Button>
       </Tooltip>
@@ -161,7 +164,7 @@ function AppBarButton({
   }
   return (
     <Tooltip content={label} type="label" placement="right">
-      <Button variant="ghost" onClick={onClick}>
+      <Button variant="ghost" onClick={onClick} onAuxClick={onAuxClick}>
         {children}
       </Button>
     </Tooltip>
@@ -530,6 +533,11 @@ function App() {
     }
   }, [codeState.dirty]);
 
+  function openDocsPage() {
+    const docsUrl = "https://cesium.com/learn/cesiumjs/ref-doc/index.html";
+    window.open(docsUrl, "_blank")?.focus();
+  }
+
   return (
     <Root
       id="root"
@@ -587,6 +595,13 @@ function App() {
         >
           <Icon href={add} size="large" />
         </AppBarButton>
+        <AppBarButton
+          label="Documentation"
+          onClick={openDocsPage}
+          onAuxClick={openDocsPage}
+        >
+          <Icon href={documentation} size="large" />
+        </AppBarButton>
         <div className="flex-spacer"></div>
         <Divider />
         <AppBarButton

packages/sandcastle/src/Gallery.css

@@ -85,7 +85,6 @@
     }
 
     .title {
-      font-size: x-large;
       text-wrap: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;

packages/sandcastle/src/Gallery.tsx

@@ -1,6 +1,13 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import "./Gallery.css";
-import { Badge, IconButton, Select, Spinner, TextBox } from "@stratakit/bricks";
+import {
+  Badge,
+  IconButton,
+  Select,
+  Spinner,
+  Text,
+  TextBox,
+} from "@stratakit/bricks";
 import { getBaseUrl } from "./util/getBaseUrl";
 import classNames from "classnames";
 import { close, script, search } from "./icons";
@@ -193,8 +200,12 @@ export const GalleryCard = memo(function GalleryCard({
     >
       <img src={thumbnailPath} alt="" />
       <div className="details">
-        <h2 className="title">{item.title}</h2>
-        <div className="description">{item.description}</div>
+        <Text variant="body-lg" render={<h3 />} className="title">
+          {item.title}
+        </Text>
+        <Text variant="body-sm" className="description">
+          {item.description}
+        </Text>
         <div className="labels">
           {item.labels
             .sort((a, b) => a.localeCompare(b))

packages/sandcastle/src/icons.ts

@@ -14,6 +14,7 @@ import play from "@stratakit/icons/play.svg";
 import textAlignLeft from "@stratakit/icons/text-align-left.svg";
 import search from "@stratakit/icons/search.svg";
 import close from "@stratakit/icons/close.svg";
+import documentation from "@stratakit/icons/documentation.svg";
 import info from "@stratakit/icons/info.svg";
 import retry from "@stratakit/icons/retry.svg";
 
@@ -34,6 +35,7 @@ export {
   textAlignLeft,
   search,
   close,
+  documentation,
   info,
   retry,
 };