refactor: overhaul of the ComponentDemo, split into multiple files, i…

docs/blog/2024-04-08-webforj-v24.00/24.00.md

@@ -28,11 +28,13 @@ See the [GitHub release overview](https://github.com/webforj/webforj/releases/ta
 
 This release introduces a new [`Table`](/docs/components/table/overview) component, allowing developers access to a lightweight, fast and optimized way to display their data. 
 
-<ComponentDemo 
-path='/webforj/datatable?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/DataTableView.java'
-urls={['https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/MusicRecord.java', 
-'https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/Service.java']}
+<ComponentDemo
+path='/webforj/datatable'
+files={[
+  'src/main/java/com/webforj/samples/views/table/DataTableView.java',
+  'src/main/java/com/webforj/samples/views/table/MusicRecord.java',
+  'src/main/java/com/webforj/samples/views/table/Service.java',
+]}
 height='600px'
 />
 
@@ -47,9 +49,9 @@ Using the `Table` in your app is simple, and follows a few easy steps outlined i
 
 ## Navigator component
 
-<ComponentDemo 
-path='/webforj/navigatorpages?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/navigator/NavigatorPagesView.java'
+<ComponentDemo
+path='/webforj/navigatorpages'
+files={['src/main/java/com/webforj/samples/views/navigator/NavigatorPagesView.java']}
 height='125px'
 />
 
@@ -66,10 +68,12 @@ The `Navigator` can be customized with various settings that configure the text,
 
 ## Splitter component
 
-<ComponentDemo 
-path='/webforj/splitterbasic?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterBasicView.java'
-urls={['https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/components/SplitterBox.java',]}
+<ComponentDemo
+path='/webforj/splitterbasic'
+files={[
+  'src/main/java/com/webforj/samples/views/splitter/SplitterBasicView.java',
+  'src/main/java/com/webforj/samples/components/SplitterBox.java',
+]}
 height='300px'
 />
 

docs/blog/2024-04-26-webforj-v24.01/24.01.md

@@ -42,10 +42,10 @@ Functionality such as transformation and validation further enhance the binding
 
 ## Login component
 
-<ComponentDemo 
-path='/webforj/loginbasic?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/login/LoginBasicView.java'
-height = '450px'
+<ComponentDemo
+path='/webforj/loginbasic'
+files={['src/main/java/com/webforj/samples/views/login/LoginBasicView.java']}
+height='450px'
 />
 
 The latest `Login` component in webforJ offers an intuitive and efficient interface for user authentication, enabling users to log in using their username and password. This component is highly customizable to enhance user experiences across various devices and locales.

docs/blog/2024-06-03-webforj-v24.02/24.02.md

@@ -25,10 +25,10 @@ As always, see the [GitHub release overview](https://github.com/webforj/webforj/
 
 ## Option dialogs
 
-<ComponentDemo 
-path='/webforj/confirmdialogconstructor?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/optiondialog/confirm/ConfirmDialogConstructorView.java'
-height = '350px'
+<ComponentDemo
+path='/webforj/confirmdialogconstructor'
+files={['src/main/java/com/webforj/samples/views/optiondialog/confirm/ConfirmDialogConstructorView.java']}
+height='350px'
 />
 
 With 24.02, webforJ introduces a robust option dialog feature that allows applications to interact with users and gather input effectively. These dialogs are modal, meaning they halt app execution until the user provides input, ensuring critical messages are addressed before proceeding. These function similarly to `JOptionPane` in Swing, addressing the need for blocking dialogs in web applications.
@@ -47,9 +47,9 @@ The various dialog options are provided to help clarify and specify the type of
 
 The `ProgressBar` in 24.02 has gotten a powerful, comprehensive overhaul. This component provides a visual representation of task progress, making it easy for users to monitor the completion status of ongoing tasks. The progress bar fills up as the task progresses, displaying the percentage of completion both visually and textually.
 
-<ComponentDemo 
-path='/webforj/progressbarbasic?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/progressbar/ProgressBarBasicView.java'
+<ComponentDemo
+path='/webforj/progressbarbasic'
+files={['src/main/java/com/webforj/samples/views/progressbar/ProgressBarBasicView.java']}
 height='150px'
 />
 

docs/blog/2024-07-23-webforj-v24.10/24.10.md

@@ -57,10 +57,10 @@ The `Spinner` and `BusyIndicator` components have both been added in this releas
 
 Building on the `Spinner`, the `BusyIndicator` is an app-level loading overlay that indicates when the app is busy or processing data. It blocks user interaction until the process is complete. This component displays both a `Spinner` and a textual description while the process is occurring. 
 
-<ComponentDemo 
-path='/webforj/busyindicator?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/busyindicator/BusyIndicatorView.java'
-height = '225px'
+<ComponentDemo
+path='/webforj/busyindicator'
+files={['src/main/java/com/webforj/samples/views/busyindicator/BusyIndicatorView.java']}
+height='225px'
 />
 
 The `Loading` component uses the same client component, but allows the addition of children and can be attached to any parent component, making it scoped to its parent.
@@ -77,10 +77,10 @@ The webforJ `Terminal` component represents an exciting opportunity to emulate a
 
 The `ColumnsLayout` component has come to webforJ in `24.10`, and is designed to offer a flexible and responsive layout solution in addition to the [FlexLayout](/docs/components/flex-layout) component. The `ColumnsLayout` easily facilitates two-dimensional layouts by providing columns rather than just rows. It dynamically adjusts the number of columns based on the width of the layout and utilizes breakpoints to determine how many columns should be displayed at different viewport widths to help with responsiveness.
 
-<ComponentDemo 
-path='/webforj/columnslayout?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java'
-height = '450px'
+<ComponentDemo
+path='/webforj/columnslayout'
+files={['src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java']}
+height='450px'
 />
 
 In addition to dynamic column adjustments, `ColumnsLayout` supports customizable alignment and spacing options. The `ColumnsLayout` component is designed to be intuitive and easy to use. It includes built-in methods for setting column spans and positions, making it simple to create complex layouts with minimal effort.
@@ -93,10 +93,10 @@ The `Slider` component has received on overhaul in this release. The appearance
 
 However, with this rework, a few of the methods have changed to better reflect modern standards. If you are using this component in your app, review the following methods to ensure you're using the updated API. An example of the various methods can be seen in the code demo below:
 
-<ComponentDemo 
-path='/webforj/sliderdemo?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/slider/SliderDemoView.java'
-height = '150px'
+<ComponentDemo
+path='/webforj/sliderdemo'
+files={['src/main/java/com/webforj/samples/views/slider/SliderDemoView.java']}
+height='150px'
 />
 
 ### Toast component
@@ -105,10 +105,10 @@ Another powerful component introduced in `24.10` is the `Toast` component, which
 
 Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed.
 
-<ComponentDemo 
-path='/webforj/toast?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/toast/ToastView.java'
-height = '300px'
+<ComponentDemo
+path='/webforj/toast'
+files={['src/main/java/com/webforj/samples/views/toast/ToastView.java']}
+height='300px'
 />
 
 ### Debugging tooling

docs/blog/2025-05-19-webforj-v25.01/25.01.md

@@ -38,10 +38,10 @@ For more information on the `Tree` component, how to use it in an app, and the v
 
 Below is an example of a `Tree` component:
 
-<ComponentDemo 
-path='/webforj/tree?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/tree/TreeView.java'
-height="270px"
+<ComponentDemo
+path='/webforj/tree'
+files={['src/main/java/com/webforj/samples/views/tree/TreeView.java']}
+height='270px'
 />
 
 ## Introducing startforJ

docs/blog/2025-08-21-buildingbettercss/index.md

@@ -165,10 +165,13 @@ The `::part()` pseudo-element is like having a key to specific rooms in an other
 
 Here's a dashboard I put together that uses most of the stuff I've mentioned - CSS Grid, DWC tokens, and component-specific styling:
 
-<AppLayoutViewer 
-path='/webforj/blogs/building-better-css?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/blogs/buildingbettercss/ModernDashboardView.java'
-cssURL='/blogs/buildingbettercss/dashboard.css'
+<ComponentDemo
+path='/webforj/blogs/building-better-css'
+frame='desktop'
+files={[
+  'src/main/java/com/webforj/samples/blogs/buildingbettercss/ModernDashboardView.java',
+  'src/main/resources/static/blogs/buildingbettercss/dashboard.css',
+]}
 />
 
 This dashboard shows how all the pieces work together in practice. The responsive layout uses CSS Grid with custom media queries for mobile optimization. All the colors and spacing come from DWC tokens, so changing the primary color at the root level updates the entire interface. The combination of external CSS and inline component styles keeps everything maintainable, which is great because I definitely needed to go back and fix things multiple times. 

docs/blog/2025-09-09-webforj-v25.03/25.03.md

@@ -75,11 +75,13 @@ The new column management APIs offer both interactive and programmatic control.
 
 These features are particularly valuable in data-heavy applications like financial dashboards and reporting tools, where different users need to arrange columns to match their workflow patterns.
 
-<ComponentDemo 
-path='/webforj/tablecolumnautosizing?' 
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/TableColumnAutoSizingView.java'
-urls={['https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/MusicRecord.java', 
-'https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/Service.java']}
+<ComponentDemo
+path='/webforj/tablecolumnautosizing'
+files={[
+  'src/main/java/com/webforj/samples/views/table/TableColumnAutoSizingView.java',
+  'src/main/java/com/webforj/samples/views/table/MusicRecord.java',
+  'src/main/java/com/webforj/samples/views/table/Service.java',
+]}
 height='550px'
 />
 

docs/blog/2026-01-27-webforj-v25.11/25.11.md

@@ -24,10 +24,12 @@ Starting with one of the most exciting changes, webforJ now provides a first-cla
 The programmatic API handles any DOM update. All a developer needs to do is use `Page.getCurrent().startViewTransition()`, which returns a builder for configuring the transition:
 
 <ComponentDemo
-  path='/webforj/viewtransitionchat?'
-  javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/viewtransitions/ViewTransitionChatView.java'
-  cssURL='/css/viewtransitions/chat.css'
-  height='450px'
+path='/webforj/viewtransitionchat'
+files={[
+  'src/main/java/com/webforj/samples/views/viewtransitions/ViewTransitionChatView.java',
+  'src/main/resources/static/css/viewtransitions/chat.css',
+]}
+height='450px'
 />
 
 Elements with matching transition names animate between states, with the browser handling the animation automatically. 
@@ -84,10 +86,12 @@ Each `append()` call adds content to the stream, and auto-scroll keeps the lates
 User avatars appear everywhere—in profiles, comments, team lists, and more. This is a common component that's present in nearly all modern web apps where users log in. The new **Avatar** component makes adding them simple.
 
 <ComponentDemo
-path='/webforj/avatar?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/avatar/AvatarView.java'
-cssURL='/css/avatar/avatar.css'
-height = '450px'
+path='/webforj/avatar'
+files={[
+  'src/main/java/com/webforj/samples/views/avatar/AvatarView.java',
+  'src/main/resources/static/css/avatar/avatar.css',
+]}
+height='450px'
 />
 
 Passing a name to the `Avatar` generates initials automatically. To use photos, simply add an image as a child element. The `Avatar` comes with seven themes, two shapes, and multiple sizes to cover common cases.

docs/blog/2026-03-17-webforj-v25.12/25.12.md

@@ -25,10 +25,12 @@ Tables with lots of columns can get hard to read fast. Column groups solve this
 
 <!-- vale off -->
 <ComponentDemo
-path='/webforj/tablecolumngroups?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/TableColumnGroupsView.java'
-urls={['https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/MusicRecord.java',
-'https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/Service.java']}
+path='/webforj/tablecolumngroups'
+files={[
+  'src/main/java/com/webforj/samples/views/table/TableColumnGroupsView.java',
+  'src/main/java/com/webforj/samples/views/table/MusicRecord.java',
+  'src/main/java/com/webforj/samples/views/table/Service.java',
+]}
 height='600px'
 />
 <!-- vale on -->
@@ -56,10 +58,12 @@ No more writing custom lodash templates for common patterns. `25.12` ships a com
 
 <!-- vale off -->
 <ComponentDemo
-path='/webforj/productcatalog?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/renderers/ProductCatalogView.java'
-urls={['https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/renderers/Product.java',
-'https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/table/renderers/ProductService.java']}
+path='/webforj/productcatalog'
+files={[
+  'src/main/java/com/webforj/samples/views/table/renderers/ProductCatalogView.java',
+  'src/main/java/com/webforj/samples/views/table/renderers/Product.java',
+  'src/main/java/com/webforj/samples/views/table/renderers/ProductService.java',
+]}
 height='600px'
 />
 <!-- vale on -->
@@ -176,7 +180,7 @@ First up, the [`Accordion`](/docs/components/accordion): a vertically stacked se
 <!-- vale off -->
 <ComponentDemo
 path='/webforj/accordiongroup'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/accordion/AccordionGroupView.java'
+files={['src/main/java/com/webforj/samples/views/accordion/AccordionGroupView.java']}
 height='400px'
 />
 <!-- vale on -->
@@ -214,8 +218,8 @@ Badges integrate naturally with other components. Attach one to a `Button` with
 
 <!-- vale off -->
 <ComponentDemo
-path='/webforj/badgebuttons?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/badge/BadgeButtonsView.java'
+path='/webforj/badgebuttons'
+files={['src/main/java/com/webforj/samples/views/badge/BadgeButtonsView.java']}
 height='250px'
 />
 <!-- vale on -->

docs/blog/2026-04-28-webforj-v26.00/26.00.md

@@ -59,8 +59,8 @@ See the [webforJ AI plugin](/docs/integrations/ai-tooling) documentation for per
 By default, a `Dialog` stretches to fill the available horizontal space, perfect for larger forms, overkill for a compact "Are you sure?" prompt. The new `setAutoWidth(true)` method flips that behavior, sizing the dialog to its content so small prompts stay small.
 
 <ComponentDemo
-path='/webforj/dialogautowidth?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/dialog/DialogAutoWidthView.java'
+path='/webforj/dialogautowidth'
+files={['src/main/java/com/webforj/samples/views/dialog/DialogAutoWidthView.java']}
 height='350px'
 />
 
@@ -80,8 +80,8 @@ See the [Dialog auto width](/docs/components/dialog#auto-width) documentation fo
 The `TabbedPane` picks up a new rendering mode in `26.00`. Flip `setSegment(true)` and the tabs snap into a compact segment control with a sliding pill indicator, a natural fit for toggling between a few related views or filter options.
 
 <ComponentDemo
-path='/webforj/tabbedpanesegment?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/tabbedpane/TabbedPaneSegmentView.java'
+path='/webforj/tabbedpanesegment'
+files={['src/main/java/com/webforj/samples/views/tabbedpane/TabbedPaneSegmentView.java']}
 height='250px'
 />
 

docs/docs/advanced/debouncing.md

@@ -10,8 +10,8 @@ slug: debouncing
 Debouncing is a technique that delays executing an action until a specified time has elapsed since the last call. Each new call resets the timer. This is useful for scenarios like search-as-you-type, where you want to wait until the user stops typing before executing a search query.
 
 <ComponentDemo
-path='/webforj/debouncer?'
-javaE='https://raw.githubusercontent.com/webforj/webforj-documentation/refs/heads/main/src/main/java/com/webforj/samples/views/debouncer/DebouncerView.java'
+path='/webforj/debouncer'
+files={['src/main/java/com/webforj/samples/views/debouncer/DebouncerView.java']}
 height='265px'
 />