wip

Author: brendt

composer.lock

@@ -499,6 +499,15 @@ Optionally, it accepts an `entrypoint` attribute. If it is passed, the component
 <x-vite-tags entrypoint="src/main.ts" />
 ```
 
+### `x-markdown`
+
+The `{html}x-markdown` component can be used to render markdown content, either directly from your view files, or by passing a content variables into it:
+
+```html
+<x-markdown># hi</x-markdown>
+<x-markdown :content="$text" />
+```
+
 ## Pre-processing views
 
 In most applications, some views will need access to common data. To avoid having to manually provide this data to views through controller methods, it is possible to use view processors to manipulate views before they are rendered.

src/Web/Documentation/content/1.x/1-essentials/02-views.md

@@ -34,9 +34,9 @@ class="
       </nav>
     </div>
     <!-- Mobile sidebar button -->
-    <button onclick="toggleSideBar()" class="fixed lg:hidden bottom-5 right-5 z-[10] border rounded-lg p-3 border-(--ui-border) bg-(--ui-bg-elevated) text-(--ui-text-muted) hover:text-(--ui-text) transition flex items-center justify-center">
-      <x-icon name="tabler:list" class="size-6" />
-    </button>
+<!--    <button onclick="toggleSideBar()" class="fixed lg:hidden bottom-5 right-5 z-[10] border rounded-lg p-3 border-(--ui-border) bg-(--ui-bg-elevated) text-(--ui-text-muted) hover:text-(--ui-text) transition flex items-center justify-center">-->
+<!--      <x-icon name="tabler:list" class="size-6" />-->
+<!--    </button>-->
     <!-- Mobile sidebar -->
     <div data-sidebar class="hidden fixed md:hidden inset-0 overflow-auto z-[9] bg-(--ui-bg) text-(--ui-text) p-8 starting:opacity-0 starting:scale-90 transition opacity-100 scale-100 origin-bottom-right">
       <!-- Menu -->

src/Web/Documentation/show.view.php

@@ -160,7 +160,7 @@ final class BookView implements View
 </div>
 ```
 
-### `x-template`
+### Templates
 
 The built-in `{html}<x-template>` element may be used as a placeholder when you want to use a directive without rendering an actual element in the DOM.
 
@@ -441,6 +441,29 @@ On some occasions, you might want to dynamically render view components, ie. ren
 
 Besides components that you may create yourself, Tempest provides a default set of useful built-in components to improve your developer experience.
 
+All meta-data about discovered view components can be retrieved via the hidden `meta:view-component` command.
+
+```console
+./tempest meta:view-component [view-component]
+```
+
+```json
+{
+    "file": "/…/tempest-framework/packages/view/src/Components/x-markdown.view.php",
+    "name": "x-markdown",
+    "slots": [],
+    "variables": [
+        {
+            "type": "string|null",
+            "name": "$content",
+            "attributeName": "content",
+            "description": "The markdown content from a variable"
+        }
+    ]
+}
+
+```
+
 ### `x-icon`
 
 This component provides the ability to inject any icon from the [Iconify](https://iconify.design/) project in your templates.
@@ -476,6 +499,23 @@ Optionally, it accepts an `entrypoint` attribute. If it is passed, the component
 <x-vite-tags entrypoint="src/main.ts" />
 ```
 
+### `x-template`
+
+See [Templates](#templates).
+
+### `x-slot`
+
+See [Using slots](#using-slots).
+
+### `x-markdown`
+
+A component that will render markdown contents:
+
+```html
+<x-markdown># hi</x-markdown>
+<x-markdown :content="$text" />
+```
+
 ## Possible IDE integrations
 
 This section lists a bunch of ideas for IDE features that would be useful for IDE integrations.
@@ -550,12 +590,4 @@ Pressing the same keyboard short twice will toggle between server-side and clien
 {{-- this text was selected then commented out via a keyboard shortcut --}} — First press
 <!-- this text was selected then commented out via a keyboard shortcut --> — Second press
 this text was selected then commented out via a keyboard shortcut — Third press, reverts back to normal
-```
-
-## Meta commands
-
-Tempest comes with a hidden console command to gather information about view components:
-
-```console
-./tempest meta:view-component [view-component]
 ```