Finished Polishing the owo-ui Components Documentation.

using npm in docker again

Dockerfile

@@ -1,7 +1,6 @@
 FROM node:18-alpine
 
-# Install pnpm
-RUN npm install -g pnpm
+RUN #npm install -g pnpm
 
 ARG NUXT_UI_PRO_LICENSE
 ENV NUXT_UI_PRO_LICENSE=$NUXT_UI_PRO_LICENSE
@@ -13,19 +12,14 @@ ENV NUXT_PUBLIC_SITE_URL=$NUXT_PUBLIC_SITE_URL
 WORKDIR /app
 
 COPY package*.json ./
-COPY pnpm-lock.yaml ./
 COPY .npmrc ./
-
-# Use pnpm to install dependencies
-RUN pnpm install --frozen-lockfile
+RUN npm install
 
 COPY . .
 
-# Build the application
-RUN pnpm run build
+RUN npm run build
 
 ENV HOST 0.0.0.0
 EXPOSE 3000
 
-# Uncomment the CMD
 CMD ["node", ".output/server/index.mjs"]

app/app.config.ts

@@ -10,46 +10,31 @@ export default defineAppConfig({
     }
   },
   seo: {
-    siteName: 'Nuxt UI Pro - Docs template'
+    siteName: 'CRTL Prototype Studio Docs'
   },
   header: {
     logo: {
-      alt: '',
-      light: '',
-      dark: ''
+      alt: '/studio_light.png',
+      light: '/studio_light.png',
+      dark: '/studio_dark.png'
     },
     search: true,
     colorMode: true,
     links: [{
       'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt-ui-pro/docs',
+      'to': 'https://github.com/crtl-prototype-studios/docs',
       'target': '_blank',
-      'aria-label': 'Docs template on GitHub'
+      'aria-label': 'Source Code on GitHub'
     }]
   },
   footer: {
-    credits: 'Copyright © 2023',
+    credits: 'Copyright CRTL Prototype Studios© 2022-2025',
     colorMode: false,
     links: [{
-      'icon': 'i-simple-icons-nuxtdotjs',
-      'to': 'https://nuxt.com',
-      'target': '_blank',
-      'aria-label': 'Nuxt Website'
-    }, {
-      'icon': 'i-simple-icons-discord',
-      'to': 'https://discord.com/invite/ps2h6QT',
-      'target': '_blank',
-      'aria-label': 'Nuxt UI on Discord'
-    }, {
-      'icon': 'i-simple-icons-x',
-      'to': 'https://x.com/nuxt_js',
-      'target': '_blank',
-      'aria-label': 'Nuxt on X'
-    }, {
       'icon': 'i-simple-icons-github',
-      'to': 'https://github.com/nuxt/ui',
+      'to': 'https://github.com/crtl-prototype-studios/docs',
       'target': '_blank',
-      'aria-label': 'Nuxt UI on GitHub'
+      'aria-label': 'Source Code on GitHub'
     }]
   },
   toc: {
@@ -60,17 +45,12 @@ export default defineAppConfig({
       links: [{
         icon: 'i-heroicons-star',
         label: 'Star on GitHub',
-        to: 'https://github.com/nuxt/ui',
+        to: 'https://github.com/crtl-prototype-studios/docs',
         target: '_blank'
       }, {
         icon: 'i-heroicons-book-open',
-        label: 'Nuxt UI Pro docs',
-        to: 'https://ui.nuxt.com/pro/guide',
-        target: '_blank'
-      }, {
-        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Purchase a license',
-        to: 'https://ui.nuxt.com/pro/purchase',
+        label: 'Studio Main Site',
+        to: 'https://crtl-prototype-studios.cn',
         target: '_blank'
       }]
     }

app/components/AppHeader.vue

@@ -10,7 +10,7 @@ const { header } = useAppConfig()
   <UHeader>
     <template #logo>
       <template v-if="header?.logo?.dark || header?.logo?.light">
-        <UColorModeImage v-bind="{ class: 'h-6 w-auto', ...header?.logo }" />
+        <UColorModeImage v-bind="{ class: 'h-6 w-auto rounded-lg', ...header?.logo }" />
       </template>
       <template v-else>
         CRTL Docs <UBadge

content/2.owo-ui-components/1.introduction.md

@@ -5,8 +5,8 @@ category: "owo-ui"
 ---
 
 ## Why is this even a thing?
-Well, I had originally used `owo-lib`'s `owo-ui` to make one of my mods, `Control-UI-Refactored`. During the time of
-development, I had slowly discovered that the original documentation, `wispforest.io`, doesn't have a full and thorough
+Well, I had originally used `owo-lib`'s `owo-ui` to make one of my mods, [Control-UI-Refactored](https://github.com/Type-32/Control-UI-Refactored). During the time of
+development, I had slowly discovered that the original documentation, [Wisp Forest Docs](https://docs.wispforest.io), doesn't have a full and thorough
 documentation of their `owo-ui`'s capabilities and features. Especially of their lack-of-descriptions-and-examples for
 the **Code-Driven** method and **Data-Driven** method of making a UI using `owo-ui`.
 
@@ -24,7 +24,7 @@ For more on using Code-Driven or Data-Driven UI programming in your mod, please
 
 ***
 
-::callout{color="amber"}
+::callout{color="amber" icon='i-heroicons-exclamation-triangle'}
 The owo-ui documentation is still being written and not quite complete yet. In places where an article here is still missing, you can always refer to the JavaDoc present throughout the library - it explains most things in detail
 ::
 

content/2.owo-ui-components/collapsible-container.md

@@ -8,13 +8,29 @@ The collapsible container component allows you to create a collapsible section t
 
 ## Parameters
 
-- `expanded`: Whether the collapsible container is initially expanded or not.
-- `text`: The title text of the collapsible container.
-- `padding`: The padding around the child components.
-- `surface`: The background surface of the collapsible container.
-- `horizontal-alignment`: The horizontal alignment of the child components.
-- `vertical-alignment`: The vertical alignment of the child components.
-- `allow-overflow`: Whether to allow child components to overflow the bounds of the collapsible container.
+::field-group
+  ::field{name='expanded' type='boolean'}
+  Whether the collapsible container is initially expanded or not.
+  ::
+  ::field{name='text' type='string'}
+  The title text of the collapsible container.
+  ::
+  ::field{name='padding' type='int | (int,int,int,int)'}
+  The padding around the child components.
+  ::
+  ::field{name='surface' type='#hex'}
+  The background surface of the collapsible container.
+  ::
+  ::field{name='horizontal-alignment' type='left | right | center'}
+  The horizontal alignment of the child components.
+  ::
+  ::field{name='vertical-alignment' type='top | middle | bottom'}
+  The vertical alignment of the child components.
+  ::
+  ::field{name='allow-overflow' type='boolean'}
+  Whether to allow the dropdown entries to overflow the bounds of the collapsible container.
+  ::
+::
 
 ## Examples
 

content/2.owo-ui-components/dropdown.md

@@ -7,14 +7,29 @@ category: owo-ui
 The dropdown component creates a dropdown menu with various entries such as buttons, checkboxes, and nested dropdowns. It supports customizable entries and various sizing and alignment options.
 
 ## Parameters
-
-- `close-when-not-hovered`: Whether to automatically close the dropdown when the mouse is not hovering over it.
-- `entries`: The entries of the dropdown menu.
-- `padding`: The padding around the dropdown entries.
-- `surface`: The background surface of the dropdown.
-- `horizontal-alignment`: The horizontal alignment of the dropdown entries.
-- `vertical-alignment`: The vertical alignment of the dropdown entries.
-- `allow-overflow`: Whether to allow the dropdown entries to overflow the bounds of the dropdown.
+::field-group
+  ::field{name='close-when-not-hovered' type='boolean'}
+  Whether to automatically close the dropdown when the mouse is not hovering over it.
+  ::
+  ::field{name='entries'}
+  The entries of the dropdown menu.
+  ::
+  ::field{name='padding' type='int | (int,int,int,int)'}
+  The padding around the dropdown entries.
+  ::
+  ::field{name='surface' type='#hex'}
+  The background surface of the dropdown.
+  ::
+  ::field{name='horizontal-alignment' type='left | right | center'}
+  The horizontal alignment of the dropdown entries.
+  ::
+  ::field{name='vertical-alignment' type='top | middle | bottom'}
+  The vertical alignment of the dropdown entries.
+  ::
+  ::field{name='allow-overflow' type='boolean'}
+  Whether to allow the dropdown entries to overflow the bounds of the dropdown.
+  ::
+::
 
 ## Examples
 

content/2.owo-ui-components/flow-layout.md

@@ -1,23 +1,41 @@
 ---
 title: "Flow Layout"
+description: "The Flow Layout Component."
 category: owo-ui
 ---
 
 The flow layout component arranges its children in a vertical or horizontal flow. It supports various alignment and sizing options.
 
-**Parameters:**
+## Parameters
 
-- `direction` (required): The direction of the flow layout (`vertical`, `horizontal`, or `ltr-text-flow`).
-- `gap`: The gap between child components in pixels.
-- `padding`: The padding around the child components.
-- `surface`: The background surface of the flow layout.
-- `horizontal-alignment`: The horizontal alignment of the child components.
-- `vertical-alignment`: The vertical alignment of the child components.
-- `allow-overflow`: Whether to allow child components to overflow the bounds of the flow layout.
+::field-group
+  ::field{name='direction' type='vertical | horizontal | ltr-text-flow' required}
+  The direction of the flow layout.
+  ::
+  ::field{name='gap' type='int'}
+  The gap between child components in pixels.
+  ::
+  ::field{name='padding' type='int | (int,int,int,int)'}
+  The padding around the child components.
+  ::
+  ::field{name='surface' type='#hex'}
+  The background surface of the flow layout.
+  ::
+  ::field{name='horizontal-alignment' type='left | right | center'}
+  The horizontal alignment of the child components.
+  ::
+  ::field{name='vertical-alignment' type='top | middle | bottom'}
+  The vertical alignment of the child components.
+  ::
+  ::field{name='allow-overflow' type='boolean'}
+  Whether to allow child components to overflow the bounds of the flow layout.
+  ::
+::
 
-**Example (Code-driven):**
+## Examples
 
-```java
+::code-group
+```java [FlowLayout.java]
 Containers.verticalFlow(Sizing.fill(100), Sizing.content())
     .child(Components.label(Text.literal("Item 1")))
     .child(Components.label(Text.literal("Item 2")))
@@ -28,9 +46,7 @@ Containers.verticalFlow(Sizing.fill(100), Sizing.content())
     .verticalAlignment(VerticalAlignment.CENTER)
 ```
 
-**Example (Data-driven):**
-
-```xml
+```xml [flow-layout.xml]
 <flow-layout direction="vertical">
     <children>
         <label>
@@ -51,3 +67,4 @@ Containers.verticalFlow(Sizing.fill(100), Sizing.content())
     <vertical-alignment>center</vertical-alignment>
 </flow-layout>
 ```
+::

content/2.owo-ui-components/grid-layout.md

@@ -1,23 +1,44 @@
 ---
 title: "Grid Layout"
+description: "The Grid Layout Component."
 category: owo-ui
 ---
 
 The grid layout component arranges its children in a grid with a specified number of rows and columns. It supports various alignment and sizing options.
 
-**Parameters:**
+## Parameters
 
-- `rows` (required): The number of rows in the grid.
-- `columns` (required): The number of columns in the grid.
-- `padding`: The padding around the child components.
-- `surface`: The background surface of the grid layout.
-- `horizontal-alignment`: The horizontal alignment of the child components within each cell.
-- `vertical-alignment`: The vertical alignment of the child components within each cell.
-- `allow-overflow`: Whether to allow child components to overflow the bounds of the grid layout.
+::field-group
+::field{name='rows' type='int' required}
+The number of rows in the grid.
+::
+  ::field{name='columns' type='int' required}
+  The number of columns in the grid.
+  ::
+  ::field{name='gap' type='int'}
+  The gap between child components in pixels.
+  ::
+  ::field{name='padding' type='int | (int,int,int,int)'}
+  The padding around the child components.
+  ::
+  ::field{name='surface' type='#hex'}
+  The background surface of the grid layout.
+  ::
+  ::field{name='horizontal-alignment' type='left | right | center'}
+  The horizontal alignment of the child components within each cell.
+  ::
+  ::field{name='vertical-alignment' type='top | middle | bottom'}
+  The vertical alignment of the child components within each cell.
+  ::
+  ::field{name='allow-overflow' type='boolean'}
+  Whether to allow child components to overflow the bounds of the grid layout.
+  ::
+::
 
-**Example (Code-driven):**
+## Examples
 
-```java
+::code-group
+```java [GridLayout.java]
 Containers.grid(2, 2)
     .child(Components.label(Text.literal("Cell 1")))
     .child(Components.label(Text.literal("Cell 2")))
@@ -29,9 +50,7 @@ Containers.grid(2, 2)
     .verticalAlignment(VerticalAlignment.CENTER)
 ```
 
-**Example (Data-driven):**
-
-```xml
+```xml [grid-layout.xml]
 <grid-layout rows="2" columns="2">
     <children>
         <label>
@@ -57,3 +76,4 @@ Containers.grid(2, 2)
     <vertical-alignment>center</vertical-alignment>
 </grid-layout>
 ```
+::