Compress some UI functions and remove repetition

bindings/odin/.gitignore

@@ -1,3 +1,4 @@
 odin
 odin.dSYM
 .vscode
+examples/clay-official-website/clay-official-website

bindings/odin/README.md

@@ -4,3 +4,10 @@ This directory contains bindings for the [Odin](odin-lang.org) programming langu
 
 If you haven't taken a look at the [full documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md), it's recommended that you take a look there first to familiarise yourself with the general concepts. This README is abbreviated and applies to using clay in Odin specifically.
 
+### Quick Start
+
+- Copy the `clay-odin` directory into your project
+
+- `import clay "clay-odin"`
+
+- 

bindings/odin/examples/clay-official-website/clay-official-website.odin

@@ -220,22 +220,9 @@ FeatureBlocksMobile :: proc() {
     }
 }
 
-DeclarativeSyntaxPageDesktop :: proc() {
+DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.Container(
+    if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-        clay.ID("SyntaxPageDesktop"),
+        clay.Text(clay.ID("SyntaxPageTextTitle"), clay.MakeString("Declarative Syntax"), clay.TextConfig(titleTextConfig))
-        clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
-    ) {
-        if clay.Border(
-            clay.ID("SyntaxPage"),
-            clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
-            clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
-        ) {
-            if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-                clay.Text(
-                    clay.ID("SyntaxPageTextTitle"),
-                    clay.MakeString("Declarative Syntax"),
-                    clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}),
-                )
         if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
         clay.Text(
             clay.ID("SyntaxPageTextSubTitle1"),
@@ -253,7 +240,7 @@ DeclarativeSyntaxPageDesktop :: proc() {
             clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
         )
     }
-            if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = clay.SizingPercent(0.50)}, childAlignment = {x = .CENTER}})) {
+    if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
         if clay.Image(
             clay.ID("SyntaxPageRightImage"),
             clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}),
@@ -261,6 +248,19 @@ DeclarativeSyntaxPageDesktop :: proc() {
         ) {}
     }
 }
+
+DeclarativeSyntaxPageDesktop :: proc() {
+    if clay.Container(
+        clay.ID("SyntaxPageDesktop"),
+        clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
+    ) {
+        if clay.Border(
+            clay.ID("SyntaxPage"),
+            clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
+            clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
+        ) {
+            DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
+        }
     }
 }
 
@@ -277,32 +277,7 @@ DeclarativeSyntaxPageMobile :: proc() {
             },
         ),
     ) {
-        if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+        DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
-            clay.Text(clay.ID("SyntaxPageTextTitle"), clay.MakeString("Declarative Syntax"), clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}))
-            if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
-            clay.Text(
-                clay.ID("SyntaxPageTextSubTitle1"),
-                clay.MakeString("Flexible and readable declarative syntax with nested UI element hierarchies."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-            clay.Text(
-                clay.ID("SyntaxPageTextSubTitle2"),
-                clay.MakeString("Mix elements with standard C code like loops, conditionals and functions."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-            clay.Text(
-                clay.ID("SyntaxPageTextSubTitle3"),
-                clay.MakeString("Create your own library of re-usable components from UI primitives like text, images and rectangles."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-        }
-        if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}})) {
-            if clay.Image(
-                clay.ID("SyntaxPageRightImage"),
-                clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}),
-                clay.ImageConfig({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}),
-            ) {}
-        }
     }
 }
 
@@ -312,74 +287,9 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
 
 LOREM_IPSUM_TEXT: clay.String = clay.MakeString("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
 
-HighPerformancePageDesktop :: proc(lerpValue: f32) {
+HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.Rectangle(
+    if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-        clay.ID("PerformanceDesktop"),
+        clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig(titleTextConfig))
-        clay.Layout(
-            {sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 82, y = 32}, childGap = 64},
-        ),
-        clay.RectangleConfig({color = COLOR_RED}),
-    ) {
-        if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-            clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}))
-            if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
-            clay.Text(
-                clay.IDI("PerformanceTextSubTitle", 1),
-                clay.MakeString("Fast enough to recompute your entire UI every frame."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
-            )
-            clay.Text(
-                clay.IDI("PerformanceTextSubTitle", 2),
-                clay.MakeString("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
-            )
-            clay.Text(
-                clay.IDI("PerformanceTextSubTitle", 3),
-                clay.MakeString("Simplify animations and reactive UI design by avoiding the standard performance hacks."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
-            )
-        }
-        if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = clay.SizingPercent(0.50)}, childAlignment = {x = .CENTER}})) {
-            if clay.Border(
-                clay.ID("PerformanceBorder"),
-                clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}),
-                clay.BorderConfigAll({width = 2, color = COLOR_LIGHT}),
-            ) {
-                if clay.Rectangle(
-                    clay.ID("AnimationDemoContainerLeft"),
-                    clay.Layout({sizing = {clay.SizingPercent(0.3 + 0.4 * lerpValue), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}}),
-                    clay.RectangleConfig({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}),
-                ) {
-                    clay.Text(clay.ID("AnimationDemoTextLeft"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
-                }
-                if clay.Rectangle(
-                    clay.ID("AnimationDemoContainerRight"),
-                    clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}}),
-                    clay.RectangleConfig({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}),
-                ) {
-                    clay.Text(clay.ID("AnimationDemoTextRight"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
-                }
-            }
-        }
-    }
-}
-
-HighPerformancePageMobile :: proc(lerpValue: f32) {
-    if clay.Rectangle(
-        clay.ID("PerformanceMobile"),
-        clay.Layout(
-            {
-                layoutDirection = .TOP_TO_BOTTOM,
-                sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
-                childAlignment = {x = .CENTER, y = .CENTER},
-                padding = {x = 16, y = 32},
-                childGap = 32,
-            },
-        ),
-        clay.RectangleConfig({color = COLOR_RED}),
-    ) {
-        if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-            clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}))
         if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
         clay.Text(
             clay.IDI("PerformanceTextSubTitle", 1),
@@ -397,7 +307,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
             clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
         )
     }
-        if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}})) {
+    if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
         if clay.Border(
             clay.ID("PerformanceRightBorder"),
             clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}),
@@ -420,6 +330,35 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
         }
     }
 }
+
+HighPerformancePageDesktop :: proc(lerpValue: f32) {
+    if clay.Rectangle(
+        clay.ID("PerformanceDesktop"),
+        clay.Layout(
+            {sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 82, y = 32}, childGap = 64},
+        ),
+        clay.RectangleConfig({color = COLOR_RED}),
+    ) {
+        HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5))
+    }
+}
+
+HighPerformancePageMobile :: proc(lerpValue: f32) {
+    if clay.Rectangle(
+        clay.ID("PerformanceMobile"),
+        clay.Layout(
+            {
+                layoutDirection = .TOP_TO_BOTTOM,
+                sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
+                childAlignment = {x = .CENTER, y = .CENTER},
+                padding = {x = 16, y = 32},
+                childGap = 32,
+            },
+        ),
+        clay.RectangleConfig({color = COLOR_RED}),
+    ) {
+        HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
+    }
 }
 
 RendererButtonActive :: proc(id: u32, index: i32, text: clay.String) {
@@ -444,22 +383,9 @@ RendererButtonInactive :: proc(id: u32, index: u32, text: clay.String) {
     }
 }
 
-RendererPageDesktop :: proc() {
+RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.Container(
+    if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-        clay.ID("RendererPageDesktop"),
+        clay.Text(clay.ID("RendererTextTitle"), clay.MakeString("Renderer & Platform Agnostic"), clay.TextConfig(titleTextConfig))
-        clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
-    ) {
-        if clay.Border(
-            clay.ID("RendererPage"),
-            clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
-            clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
-        ) {
-            if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
-                clay.Text(
-                    clay.ID("RendererTextTitle"),
-                    clay.MakeString("Renderer & Platform Agnostic"),
-                    clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
-                )
         if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
         clay.Text(
             clay.IDI("RendererTextSubTitle", 1),
@@ -479,7 +405,7 @@ RendererPageDesktop :: proc() {
     }
     if clay.Container(
         clay.ID("RendererRightText"),
-                clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}),
+        clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}),
     ) {
         clay.Text(
             clay.ID("RendererTextRightTitle"),
@@ -490,6 +416,19 @@ RendererPageDesktop :: proc() {
         RendererButtonActive(clay.IDI("RendererSelectButtonActive", 0), 0, clay.MakeString("Raylib Renderer"))
     }
 }
+
+RendererPageDesktop :: proc() {
+    if clay.Container(
+        clay.ID("RendererPageDesktop"),
+        clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
+    ) {
+        if clay.Border(
+            clay.ID("RendererPage"),
+            clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
+            clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
+        ) {
+            RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
+        }
     }
 }
 
@@ -507,38 +446,7 @@ RendererPageMobile :: proc() {
         ),
         clay.RectangleConfig({color = COLOR_LIGHT}),
     ) {
-        if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+        RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
-            clay.Text(
-                clay.ID("RendererTextTitle"),
-                clay.MakeString("Renderer & Platform Agnostic"),
-                clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
-            )
-            if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
-            clay.Text(
-                clay.IDI("RendererTextSubTitle", 1),
-                clay.MakeString("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-            clay.Text(
-                clay.IDI("RendererTextSubTitle", 2),
-                clay.MakeString("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-            clay.Text(
-                clay.IDI("RendererTextSubTitle", 3),
-                clay.MakeString("There's even an HTML renderer - you're looking at it right now!"),
-                clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
-            )
-        }
-        if clay.Container(clay.ID("RendererRightText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16})) {
-            clay.Text(
-                clay.ID("RendererTextRightTitle"),
-                clay.MakeString("Try changing renderer!"),
-                clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}),
-            )
-            if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
-            RendererButtonActive(clay.IDI("RendererSelectButtonActive", 0), 0, clay.MakeString("Raylib Renderer"))
-        }
     }
 }