feat: Implement static component examples documentation generator

.github/workflows/docs.yml

@@ -0,0 +1,52 @@
+name: Deploy Gomix Docs to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.22.x'
+
+      - name: Build static site
+        run: |
+          cd examples/docs
+          go run .
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'examples/docs/dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

examples/docs/accordion.go

@@ -0,0 +1,19 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderAccordion() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure"
+
+var Accordion = disclosure.Accordion`, nil),
+		Playground("Basic Usage", "Standard implementation of the Accordion component.", `Accordion()`, Accordion().Component()),
+		PropsTable([]map[string]string{
+			{"name": "Collapsible", "type": "", "description": "Chainable method for Collapsible setting Gomix attributes/styles."},
+			{"name": "Multiple", "type": "", "description": "Chainable method for Multiple setting Gomix attributes/styles."},
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/accordionitem.go

@@ -0,0 +1,19 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderAccordionItem() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/disclosure"
+
+var AccordionItem = disclosure.AccordionItem`, nil),
+		Playground("Basic Usage", "Standard implementation of the AccordionItem component.", `AccordionItem(text("Title"), text("Content"))`, AccordionItem(text("Title"), text("Content")).Component()),
+		PropsTable([]map[string]string{
+			{"name": "CollapseIcon", "type": "icon icons.IsIcon", "description": "Chainable method for CollapseIcon setting Gomix attributes/styles."},
+			{"name": "ExpandIcon", "type": "icon icons.IsIcon", "description": "Chainable method for ExpandIcon setting Gomix attributes/styles."},
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/alert.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderAlert() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/feedback"
+
+var Alert = feedback.Alert`, nil),
+		Playground("Basic Usage", "Standard implementation of the Alert component.", `Alert()`, Alert().Component()),
+		PropsTable([]map[string]string{
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/alertdialog.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderAlertDialog() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/overlays"
+
+var AlertDialog = overlays.AlertDialog`, nil),
+		Playground("Basic Usage", "Standard implementation of the AlertDialog component.", `AlertDialog()`, AlertDialog().Component()),
+		PropsTable([]map[string]string{
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/alias.go

@@ -1,27 +1,41 @@
 package main
 
+
+
 import (
 	"github.com/raitucarp/gomix"
+	"github.com/raitucarp/gomix/components"
+	"github.com/raitucarp/gomix/element"
 	"github.com/raitucarp/gomix/addons/alpinejs"
+	"github.com/raitucarp/gomix/components/buttons"
+	"github.com/raitucarp/gomix/components/data_display"
+	"github.com/raitucarp/gomix/components/disclosure"
+	"github.com/raitucarp/gomix/icons/fontawesome-5"
+	"github.com/raitucarp/gomix/components/feedback"
+	"github.com/raitucarp/gomix/components/forms"
+	"github.com/raitucarp/gomix/addons/google-fonts"
 	"github.com/raitucarp/gomix/addons/htmx"
-	modern_normalize "github.com/raitucarp/gomix/addons/modern-normalize"
-	"github.com/raitucarp/gomix/components"
 	layoutComponent "github.com/raitucarp/gomix/components/layout"
-	 "github.com/raitucarp/gomix/components/disclosure"
-	"github.com/raitucarp/gomix/element"
-	fa5 "github.com/raitucarp/gomix/icons/fontawesome-5"
-
-	googlefonts "github.com/raitucarp/gomix/addons/google-fonts"
+	"github.com/raitucarp/gomix/components/media_and_icons"
+	"github.com/raitucarp/gomix/addons/modern-normalize"
+	"github.com/raitucarp/gomix/components/overlays"
 	"github.com/raitucarp/gomix/styles"
+	"github.com/raitucarp/gomix/components/typography"
 	"github.com/raitucarp/gomix/value"
 )
 
 type isComponent = components.IsComponent
 type page_path = gomix.LocationPath
 type fragment_path = gomix.FragmentPath
 type css = gomix.CSS
-
 // app scope alias
+// fragment scope
+// page scope
+// addons scope alias
+// element scope
+// style scope
+// components
+// font awesome
 var app = gomix.App
 var name = gomix.Name
 var addons = gomix.Addons
@@ -37,27 +51,16 @@ var fragment_at = gomix.FragmentAt
 var style_global = gomix.StyleGlobal
 var style = gomix.Style
 var not_found_page = gomix.NotFoundPage
-var layout = gomix.PageLayout
 var title_template = gomix.TitleTemplate
-var static = gomix.Static
-
-// fragment scope
 var fragment = gomix.FragmentComponent
-
-// page scope
 var title_ = gomix.PageTitle
 var component = gomix.PageComponent
 var fragment_component = gomix.FragmentComponent
-var static_paths = gomix.StaticGenerationPath
-
-// addons scope alias
 var _htmx = htmx.Addon
 var _modern_normalize = modern_normalize.Addon
 var usePlaywriteDeGrundFont = googlefonts.UseGoogleFontPlaywriteDeGrund
 var _alpine_addon = alpinejs.Alpine
 var alpine = alpinejs.Alpine
-
-// element scope
 var div = element.Div
 var aside = element.Aside
 var Main = element.Main
@@ -68,9 +71,6 @@ var button = element.Button
 var a = element.A
 var span = element.Span
 var Htmx = htmx.Htmx
-
-// style scope
-
 var hover = styles.Hover
 var dark = styles.Dark
 var md = styles.Md
@@ -91,22 +91,69 @@ var px = value.Px[float64]
 var flex_1 = styles.FlexBy(value.Number(1))
 var fill_red = styles.FillRed
 var overflowY_scroll = styles.OverflowYScroll
-
-// components
 var HStack = layoutComponent.HStack
 var VStack = layoutComponent.VStack
 var Text = components.Text
-var Icon = components.Icon
+var Icon = media_and_icons.Icon
 var List = components.List
 var Link = components.Link
 var ListItem = components.ListItem
 var ForEachComponentLink = components.ForEach[ComponentLink]
 var ForComponentGroup = components.ForEach[ComponentGroup]
-
 var Accordion = disclosure.Accordion
 var AccordionItem = disclosure.AccordionItem
-
-// font awesome
 var fa_brand_android = fa5.FaBrandAndroid
-
 var rem = value.Rem[float64]
+var Alert = feedback.Alert
+var AlertDialog = overlays.AlertDialog
+var Avatar = media_and_icons.Avatar
+var Badge = data_display.Badge
+var Button = buttons.Button
+var Center = layoutComponent.Center
+var Checkbox = forms.Checkbox
+var CircularProgress = feedback.CircularProgress
+var CloseButton = buttons.CloseButton
+var Code = typography.Code
+var Divider = data_display.Divider
+var Drawer = overlays.Drawer
+var Grid = layoutComponent.Grid
+var Heading = typography.Heading
+var IconButton = buttons.IconButton
+var Image = media_and_icons.Image
+var Input = forms.Input
+var Kbd = typography.Kbd
+var Menu = overlays.Menu
+var Modal = overlays.Modal
+var NumberInput = forms.NumberInput
+var PinInput = forms.PinInput
+var Popover = overlays.Popover
+var Progress = feedback.Progress
+var Radio = forms.Radio
+var SelectNative = forms.SelectNative
+var SimpleGrid = layoutComponent.SimpleGrid
+var Skeleton = feedback.Skeleton
+var Slider = forms.Slider
+var Spacer = layoutComponent.Spacer
+var Spinner = feedback.Spinner
+var Stack = layoutComponent.Stack
+var Stat = data_display.Stat
+var SwitchCmp = forms.SwitchCmp
+var Tab = disclosure.Tab
+var TabList = disclosure.TabList
+var TabPanel = disclosure.TabPanel
+var TabPanels = disclosure.TabPanels
+var Table = data_display.Table
+var Tabs = disclosure.Tabs
+var Tag = data_display.Tag
+var TextCmp = typography.TextCmp
+var Textarea = forms.Textarea
+var Toast = feedback.Toast
+var Tooltip = overlays.Tooltip
+var UseDisclosureComponents = disclosure.UseDisclosureComponents
+var VisuallyHidden = disclosure.VisuallyHidden
+var Wrap = layoutComponent.Wrap
+var static = gomix.Static
+var static_paths = gomix.StaticGenerationPath
+var layout = gomix.PageLayout
+var h1 = element.H1
+var h2 = element.H2

examples/docs/avatar.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderAvatar() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/media_and_icons"
+
+var Avatar = media_and_icons.Avatar`, nil),
+		Playground("Basic Usage", "Standard implementation of the Avatar component.", `Avatar()`, Avatar().Component()),
+		PropsTable([]map[string]string{
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/badge.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderBadge() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/data_display"
+
+var Badge = data_display.Badge`, nil),
+		Playground("Basic Usage", "Standard implementation of the Badge component.", `Badge(text("New"))`, Badge(text("New")).Component()),
+		PropsTable([]map[string]string{
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/button.go

@@ -0,0 +1,40 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderButton() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/buttons"
+
+var Button = buttons.Button`, nil),
+		Playground("Basic Usage", "Standard implementation of the Button component.", `Button(text("Button")).ColorScheme("blue")`, Button(text("Button")).ColorScheme("blue").Component()),
+		Playground("Prop: Variant", "Demonstrating the Variant method.", `HStack(
+	Button(text("Button")).Variant("solid"),
+	Button(text("Button")).Variant("outline"),
+	Button(text("Button")).Variant("ghost")
+)`, HStack(Button(text("Button")).Variant("solid").Component(), Button(text("Button")).Variant("outline").Component(), Button(text("Button")).Variant("ghost").Component()).Component().GapBy(value.Rem(1)).FlexWrap()),
+		Playground("Prop: Size", "Demonstrating the Size method.", `HStack(
+	Button(text("Button")).Size("sm"),
+	Button(text("Button")).Size("md"),
+	Button(text("Button")).Size("lg")
+)`, HStack(Button(text("Button")).Size("sm").Component(), Button(text("Button")).Size("md").Component(), Button(text("Button")).Size("lg").Component()).Component().GapBy(value.Rem(1)).FlexWrap()),
+		Playground("Prop: ColorScheme", "Demonstrating the ColorScheme method.", `HStack(
+	Button(text("Button")).ColorScheme("blue"),
+	Button(text("Button")).ColorScheme("red"),
+	Button(text("Button")).ColorScheme("green")
+)`, HStack(Button(text("Button")).ColorScheme("blue").Component(), Button(text("Button")).ColorScheme("red").Component(), Button(text("Button")).ColorScheme("green").Component()).Component().GapBy(value.Rem(1)).FlexWrap()),
+		Playground("Prop: IsLoading", "Demonstrating the IsLoading method.", `HStack(
+	Button(text("Button")).IsLoading(true),
+	Button(text("Button")).IsLoading(false)
+)`, HStack(Button(text("Button")).IsLoading(true).Component(), Button(text("Button")).IsLoading(false).Component()).Component().GapBy(value.Rem(1)).FlexWrap()),
+		PropsTable([]map[string]string{
+			{"name": "Variant", "type": "v string", "description": "Chainable method for Variant setting Gomix attributes/styles."},
+			{"name": "Size", "type": "s string", "description": "Chainable method for Size setting Gomix attributes/styles."},
+			{"name": "ColorScheme", "type": "color string", "description": "Chainable method for ColorScheme setting Gomix attributes/styles."},
+			{"name": "IsLoading", "type": "loading bool", "description": "Chainable method for IsLoading setting Gomix attributes/styles."},
+		}),
+	).Component().GapBy(value.Rem(2))
+}

examples/docs/center.go

@@ -0,0 +1,17 @@
+package main
+
+import (
+    "github.com/raitucarp/gomix/components"
+    "github.com/raitucarp/gomix/value"
+)
+
+func RenderCenter() components.IsComponent {
+	return VStack(
+		Playground("Import & Setup", "Define an alias to use the component cleanly throughout your project.", `import "github.com/raitucarp/gomix/components/layout"
+
+var Center = layout.Center`, nil),
+		Playground("Basic Usage", "Standard implementation of the Center component.", `Center(text("Center"))`, Center(text("Center")).Component()),
+		PropsTable([]map[string]string{
+		}),
+	).Component().GapBy(value.Rem(2))
+}