Improvements for example view

- Added a frame around the example box and an optional title displayed within the frame

Author: FileEX

functions/Cursor/isCursorShowing.yaml

@@ -34,14 +34,18 @@ client:
     - path: 'examples/isCursorShowing-3.lua'
       description: |
         This example creates a function to set the state of the [player](/player)'s cursor using the [showCursor](/showCursor) function. 
+      exampleTitle: 'Toggle Cursor'
     - path: 'examples/isCursorShowing-4.lua'
       description: |
         If you are already advanced in scripting, using this code is recommended, as it is much more compact:
       append: true
+      exampleTitle: 'Toggle Cursor'
     - path: 'examples/isCursorShowing-5.lua'
       description: |
         This example creates a function that allows the [player](/player) to change the state of the cursor using the [showCursor](/showCursor) and [bindKey](/bindKey) functions. 
+      exampleTitle: 'Toggle Cursor by binded key'
     - path: 'examples/isCursorShowing-6.lua'
       description: |
         If you are already advanced in scripting, using this code is recommended, as it is much more compact:
       append: true
+      exampleTitle: 'Toggle Cursor by binded key'

schemas/common-defs.yaml

@@ -117,6 +117,9 @@ $defs:
           type: boolean
           default: false
           description: If set to true, this example will be appended to the previous example.
+        exampleTitle:
+          type: string
+          description: Optional title displayed in the frame around the example.
 
   see_also:
     type: array

web/src/components/CodeExamplesSection.astro

@@ -7,6 +7,7 @@ export interface CodeExample {
   description?: string;
   luaCode: string;
   side: string;
+  exampleTitle?: string;
 }
 
 export interface Props {
@@ -38,10 +39,23 @@ const { codeExamples } = Astro.props;
       )}
 
       {codeExamples.map((example, index) => (
-        <div class="tab-content" data-tab={index} style={{ display: index === 0 ? 'block' : 'none' }}>
-          {example.description && <Fragment set:html={marked(example.description)} />}
-          <div class="code-example">
-            <Code code={example.luaCode} lang="lua" />
+        <div
+          class="tab-content"
+          data-tab={index}
+          style={{
+            display: index === 0 ? 'flex' : 'none',
+            flexDirection: 'column',
+            border: `2px solid var(--color-type-${example.side}-background-high)`
+          }}
+        >
+          <div class={`tab-header side-${example.side} active`}>
+            <strong>{example.side}</strong> {example.exampleTitle && ` - ${example.exampleTitle}`}
+          </div>
+          <div class="tab-body">
+            {example.description && <Fragment set:html={marked(example.description)} />}
+            <div class="code-example">
+              <Code code={example.luaCode} lang="lua" />
+            </div>
           </div>
         </div>
       ))}
@@ -77,6 +91,25 @@ const { codeExamples } = Astro.props;
   font-weight: bold;
 }
 
+.tab-header {
+  padding: 0.5rem 1rem;
+  color: var(--sl-color-text);
+  text-transform: capitalize;
+}
+
+.tab-body {
+  margin: 0;
+  padding: 1rem;
+  color: var(--sl-color-text);
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sl-color-bg-nav);
+  box-shadow: 0.2rem 0.2rem 0.2rem #0000005b;
+}
+
 .side-client {
   background-color: var(--color-type-client-background);
   border-color: var(--color-type-client);
@@ -103,12 +136,6 @@ const { codeExamples } = Astro.props;
 .side-shared.active {
   background-color: var(--color-type-shared-background-high);
 }
-
-.tab-content {
-  background-color: var(--sl-color-bg-nav);
-  padding: 1rem;
-  box-shadow: var(--ec-frm-frameBoxShdCssVal);
-}
 </style>
 
 <script>