Merge pull request #4 from MAHcodes/dev

v0.2.0

app/index.html

@@ -23,13 +23,13 @@
   <meta name="author" content="MAHcodes">
 
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://gleez.vercel.app" />
+  <meta property="og:url" content="https://gleez.netlify.app" />
   <meta property="og:title" content="GleezUI" />
   <meta property="og:description" content="Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨" />
   <meta property="og:image" content="https://raw.githubusercontent.com/MAHcodes/gleez/master/app/src/assets/imgs/meta.png" />
 
   <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:url" content="https://gleez.vercel.app" />
+  <meta property="twitter:url" content="https://gleez.netlify.app" />
   <meta property="twitter:title" content="GleezUI" />
   <meta property="twitter:description" content="Elegant, Modern, and Customizable TailwindCSS components for ✨ Lustre ✨" />
   <meta property="twitter:image" content="https://raw.githubusercontent.com/MAHcodes/gleez/master/app/src/assets/imgs/meta.png" />

app/manifest.toml

@@ -31,7 +31,7 @@ gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
 gleescript = { version = ">= 1.0.1 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
 kirala_markdown = { version = ">= 1.0.2 and < 2.0.0" }
-lustre = { version = ">= 4.2.0 and < 5.0.0"}
+lustre = { version = ">= 4.2.0 and < 5.0.0" }
 lustre_http = { version = ">= 0.5.2 and < 1.0.0" }
 lustre_ui = { version = ">= 0.6.0 and < 1.0.0" }
 modem = { version = ">= 1.0.0 and < 2.0.0" }

app/src/assets/js/ffi.js → app/src/assets/js/ffi.mjs

@@ -1,3 +1,6 @@
+import { Some, None } from "/build/dev/javascript/gleam_stdlib/gleam/option.mjs";
+import { Uri } from "/build/dev/javascript/gleam_stdlib/gleam/uri.mjs";
+
 function attach_copy() {
 	const codes = document.querySelectorAll("pre.hljs");
 
@@ -149,3 +152,20 @@ function do_attach_all() {
 export function attach_all() {
 	window.requestAnimationFrame(do_attach_all);
 }
+
+const uri_from_url = (url) => {
+	return new Uri(
+		/* scheme   */ new (url.protocol ? Some : None)(url.protocol),
+		/* userinfo */ new None(),
+		/* host     */ new (url.host ? Some : None)(url.host),
+		/* port     */ new (url.port ? Some : None)(url.port),
+		/* path     */ url.pathname,
+		/* query    */ new (url.search ? Some : None)(url.search),
+		/* fragment */ new (url.hash ? Some : None)(url.hash.slice(1)),
+	);
+};
+
+export function uri() {
+	const url = new URL(window.location.href);
+	return uri_from_url(url);
+}

app/src/components/aside.gleam

@@ -1,9 +1,10 @@
+import components/ui/chip.{chip}
 import components/ui/link.{a}
 import gleam/list
 import gleam/string
 import lustre/attribute.{type Attribute, class, href}
-import lustre/element.{type Element, text}
-import lustre/element/html.{div, h2, h3, li, ul}
+import lustre/element.{type Element, fragment, text}
+import lustre/element/html.{div, h2, h3, li, span, ul}
 import model/route.{type Page, type Pages, is_active}
 
 pub fn aside(route: Pages) -> Element(a) {
@@ -36,18 +37,27 @@ fn item(route: Pages, page: Page) -> Element(a) {
         h3([], [
           a(
             [
-              class("pl-6 border-l py-1.5"),
+              class("pl-6 border-l py-1.5 flex items-center gap-2"),
               active_variant(is_active(route, page.path)),
               active_border(is_active(route, page.path)),
               href(page.path),
             ],
-            [text(route.page_name(page))],
+            [span([], [text(route.page_name(page))]), status(page)],
           ),
         ]),
       ])
   }
 }
 
+fn status(page: Page) -> Element(a) {
+  case page.state {
+    route.None -> fragment([])
+    route.New -> chip([chip.flat(chip.Info), chip.sm()], [text("New")])
+    route.Updated ->
+      chip([chip.flat(chip.Warning), chip.sm()], [text("Updated")])
+  }
+}
+
 fn active_variant(active: Bool) -> Attribute(a) {
   case active {
     True -> link.link(link.Primary)

app/src/components/header/actions.gleam

@@ -30,7 +30,7 @@ pub fn actions() -> Element(a) {
         ],
       ),
     ),
-    divider([divider.vertical(divider.Neutral)]),
+    divider([divider.solid(divider.Neutral), divider.sm(), divider.vertical()]),
     tooltip(
       [
         tooltip.flat(tooltip.Neutral),

app/src/components/nav.gleam

@@ -1,7 +1,9 @@
 import components/ui/link.{a}
-import lustre/attribute.{type Attribute, class, href}
-import lustre/element.{type Element, text}
+import gleam/string
+import lustre/attribute.{type Attribute, class, href, target}
+import lustre/element.{type Element, fragment, text}
 import lustre/element/html.{li, ul}
+import lustre/ui/icon
 import model/route.{type Pages, is_active}
 
 fn active_variant(active: Bool) -> Attribute(a) {
@@ -14,23 +16,44 @@ fn active_variant(active: Bool) -> Attribute(a) {
 pub fn nav(route: Pages) -> Element(a) {
   html.nav([], [
     ul([class("flex gap-8 pl-8 text-sm")], [
-      item(route, route.components),
       item(route, route.docs),
+      item(route, route.components),
+      item(route, "https://github.com/MAHcodes/gleez/releases"),
       // item(route, route.blog),
     // item(route, route.demo),
     ]),
   ])
 }
 
+fn is_internal(path: String) -> Bool {
+  path
+  |> string.starts_with("/")
+}
+
+fn tgt(path: String) -> Attribute(a) {
+  case is_internal(path) {
+    True -> target("_self")
+    False -> target("_blank")
+  }
+}
+
+fn icon(path: String) -> Element(a) {
+  case is_internal(path) {
+    True -> fragment([])
+    False -> icon.external_link([class("w-4")])
+  }
+}
+
 fn item(route: Pages, path: String) -> Element(a) {
   li([], [
     a(
       [
         href(path),
         link.underline(link.Hover),
         active_variant(is_active(route, path)),
+        tgt(path),
       ],
-      [text(route.path_name(path))],
+      [html.span([], [text(route.path_name(path))]), icon(path)],
     ),
   ])
 }

app/src/components/ui/checkbox.gleam

@@ -0,0 +1,107 @@
+import gleam/string
+import lustre/attribute.{type Attribute, class, type_}
+import lustre/element.{type Element}
+import lustre/element/html.{input, label, span}
+
+pub type Colors {
+  Neutral
+  Primary
+  Secondary
+  Success
+  Info
+  Warning
+  Danger
+}
+
+pub fn checkbox(
+  attributes: List(Attribute(a)),
+  children: List(Element(a)),
+) -> Element(a) {
+  label([class("inline-flex items-center gap-2")], [
+    input([
+      type_("checkbox"),
+      class(
+        [
+          "inline-flex items-center justify-center p-0.5 appearance-none transition-all rounded",
+          "enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+          "[&:disabled+span]:opacity-50 [&:enabled+span]:cursor-pointer [&:disabled+span]:cursor-not-allowed",
+          "checked:before:content-['✔'] before:inset-0 before:m-auto before:leading-[0]",
+        ]
+        |> string.join(" "),
+      ),
+      ..attributes
+    ]),
+    span([], children),
+  ])
+}
+
+pub fn solid(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral -> "bg-neutral before:text-neutral-foreground"
+    Primary -> "bg-primary before:text-primary-foreground"
+    Secondary -> "bg-secondary before:text-secondary-foreground"
+    Success -> "bg-success before:text-success-foreground"
+    Info -> "bg-info before:text-info-foreground"
+    Warning -> "bg-warning before:text-warning-foreground"
+    Danger -> "bg-danger before:text-danger-foreground"
+  }
+  |> class
+}
+
+pub fn outlined(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral -> "border-neutral before:text-neutral"
+    Primary -> "border-primary before:text-primary"
+    Secondary -> "border-secondary before:text-secondary"
+    Success -> "border-success before:text-success"
+    Info -> "border-info before:text-info"
+    Warning -> "border-warning before:text-warning"
+    Danger -> "border-danger before:text-danger"
+  }
+  |> string.append(" border")
+  |> class
+}
+
+pub fn flat(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral -> "bg-neutral/20 before:text-neutral"
+    Primary -> "bg-primary/20 before:text-primary"
+    Secondary -> "bg-secondary/20 before:text-secondary"
+    Success -> "bg-success/20 before:text-success"
+    Info -> "bg-info/20 before:text-info"
+    Warning -> "bg-warning/20 before:text-warning"
+    Danger -> "bg-danger/20 before:text-danger"
+  }
+  |> class
+}
+
+pub fn ghost(color: Colors) -> Attribute(a) {
+  case color {
+    Neutral ->
+      "checked:bg-neutral before:text-neutral-foreground border-neutral"
+    Primary ->
+      "checked:bg-primary before:text-primary-foreground border-primary"
+    Secondary ->
+      "checked:bg-secondary before:text-secondary-foreground border-secondary"
+    Success ->
+      "checked:bg-success before:text-success-foreground border-success"
+    Info -> "checked:bg-info before:text-info-foreground border-info"
+    Warning ->
+      "checked:bg-warning before:text-warning-foreground border-warning"
+    Danger -> "checked:bg-danger before:text-danger-foreground border-danger"
+  }
+  |> string.append(" border")
+  |> class
+}
+
+pub fn sm() -> Attribute(a) {
+  class("w-3 h-3 text-sm [&+span]:text-sm")
+}
+
+pub fn md() -> Attribute(a) {
+  class("w-4 h-4 text-base [&+span]:text-base")
+}
+
+pub fn lg() -> Attribute(a) {
+  class("w-5 h-5 text-lg [&+span]:text-lg")
+}

app/src/components/ui/divider.gleam

@@ -17,35 +17,62 @@ pub fn divider(attributes: List(Attribute(a))) -> Element(a) {
   div(
     [
       role("separator"),
-      class("shrink-0 border-none self-stretch bg-opacity-35 rounded-full"),
+      class("shrink-0 self-stretch bg-opacity-35"),
       ..attributes
     ],
     [],
   )
 }
 
-pub fn vertical(color: Colors) -> Attribute(a) {
+pub fn solid(color: Colors) -> Attribute(a) {
   color
   |> paint
-  |> string.append(" h-full w-[1px]")
+  |> string.append(" border-solid")
   |> class
 }
 
-pub fn horizontal(color: Colors) -> Attribute(a) {
+pub fn dashed(color: Colors) -> Attribute(a) {
   color
   |> paint
-  |> string.append(" w-full h-[1px]")
+  |> string.append(" border-dashed")
   |> class
 }
 
+pub fn dotted(color: Colors) -> Attribute(a) {
+  color
+  |> paint
+  |> string.append(" border-dotted")
+  |> class
+}
+
+pub fn vertical() -> Attribute(a) {
+  class("h-full w-0 border-y-0 border-l-0")
+}
+
+pub fn horizontal() -> Attribute(a) {
+  class("w-full h-0 border-x-0 border-t-0")
+}
+
+pub fn sm() -> Attribute(a) {
+  class("border")
+}
+
+pub fn md() -> Attribute(a) {
+  class("border-2")
+}
+
+pub fn lg() -> Attribute(a) {
+  class("border-4")
+}
+
 fn paint(color: Colors) -> String {
   case color {
-    Neutral -> "bg-neutral"
-    Primary -> "bg-primary"
-    Secondary -> "bg-secondary"
-    Success -> "bg-success"
-    Info -> "bg-info"
-    Warning -> "bg-warning"
-    Danger -> "bg-danger"
+    Neutral -> "border-neutral"
+    Primary -> "border-primary"
+    Secondary -> "border-secondary"
+    Success -> "border-success"
+    Info -> "border-info"
+    Warning -> "border-warning"
+    Danger -> "border-danger"
   }
 }