Merge pull request #5 from librasteve/steve-01

MVP for HTML
librasteve · Jul 23, 2024 · 6d9ee1a · 6d9ee1a
2 parents 2fd7700 + ae669e0
commit 6d9ee1a
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,70 @@
 
 Contributions welcome - by PR please if possible.
 
-See [Issues](https://github.com/librasteve/raku-HTMX/issues/1) for active feature dicsussions.
+See [Issues](https://github.com/librasteve/raku-HTMX/issues/1) for active feature discussions.
+
+NAME
+====
+
+This module provides a programmatic style for HTML and HTMX ([htmx.org]) web content.
+
+For now it's missing the server side piece, likely will start with Hummingbird.
+
+SYNOPSIS
+========
+
+```raku
+use HTMX;
+
+my $head = head [
+    meta( :charset<utf-8> ),
+    meta( :name<viewport>, :content<width=device-width, initial-scale=1> ),
+    meta( :name<description>, :content<raku does htmx> ),
+
+    title( "Raku HTMX" ),
+
+    script( src  => "https://unpkg.com/htmx.org@1.7.0", ),
+
+    link(   rel  => "stylesheet",
+            href => "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
+    ),
+    style(
+        q:to/END/;
+            .jumbotron {
+              background-color: #e6ffe6;
+              text-align: center;
+            }
+        END
+    ),
+];
+
+my $body = body [
+    div( :class<jumbotron>, [
+        h1("Welcome to Dunder Mifflin!"),                          #use parens to stop <h1> slurping <p>
+        p  "Dunder Mifflin Inc. (stock symbol {strong 'DMI'}) " ~
+            q:to/END/;
+            is a micro-cap regional paper and office
+            supply distributor with an emphasis on servicing
+            small-business clients.
+            END
+    ]),
+
+    p :hx-get<https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode>,
+        "Click Me",
+];
+
+my $html = html :lang<en>, [
+    $head,
+    $body,
+];
+
+say "<!doctype html>$html";
+```
+
+DESCRIPTION
+===========
+
+HTMX is ...
 
 TODOS
 =====
@@ -12,10 +75,9 @@ TODOS
 - [x] Get a definitive list of HTML tags
 - [x] Export them so that `h1("text")` makes `<h1>text</h1>` and so on
 - [x] Pass and format the HTMX attributes
-- [ ] Bring in synopsis from design
-- [ ] Do the ¶ term
+- [x] Bring in synopsis from design
 - [ ] Make a parse script (& instructions how to watch a dir)
-- [ ] Write some tests
+- [x] Write some tests
 - [ ] Write some docs in POD6
 - [ ] Release with App::Mi6
 - [ ] Publish as raku-htmx on the htmx Discord
@@ -28,22 +90,8 @@ TODOS
 - [ ] Hummingbird - ditto for HB
 - [ ] Attribute checking (need deeper list of attr names and set of types)
 
-NAME
-====
-
-This module provides a programmatic style for HTML and HTMX ([htmx.org]) web content.
-
-SYNOPSIS
-========
-
-```raku
-use HTMX;
-```
-
-DESCRIPTION
-===========
-
-HTMX is ...
+#### Rejected
+- [ ] Do the ¶ term - NOPE this messes with editor code preview
 
 AUTHOR
 ======

diff --git a/bin/synopsis-rahx b/bin/synopsis-rahx
@@ -3,33 +3,46 @@ use v6.d;
 
 use HTMX;
 
-
-say list-regulars;
-
-say h1('text', :class<jumbotron>);
-say h1 :class<doobie>;
-
-say div :class<jumbotron>, 'xx';
-
-say br;
-
-
-
-
-
-
-#my $page =
-#
-#    div (:class<jumbotron>,);
-#         [
-#             h1 "Welcome to Dunder Mifflin!",
-#
-#                 p  "Dunder Mifflin Inc. (stock symbol {strong 'DMI'}" ~
-#                     q:to/END/;
-#                is a micro-cap regional paper and office
-#                supply distributor with an emphasis on servicing
-#                small-business clients.
-#            END
-#         ]
-#    );
-#
+my $head = head [
+    meta( :charset<utf-8> ),
+    meta( :name<viewport>, :content<width=device-width, initial-scale=1> ),
+    meta( :name<description>, :content<raku does htmx> ),
+
+    title( "Raku HTMX" ),
+
+    script( src  => "https://unpkg.com/htmx.org@1.7.0", ),
+
+    link(   rel  => "stylesheet",
+            href => "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
+    ),
+    style(
+        q:to/END/;
+            .jumbotron {
+              background-color: #e6ffe6;
+              text-align: center;
+            }
+        END
+    ),
+];
+
+my $body = body [
+    div( :class<jumbotron>, [
+        h1("Welcome to Dunder Mifflin!"),                          #use parens to stop <h1> slurping <p>
+        p  "Dunder Mifflin Inc. (stock symbol {strong 'DMI'}) " ~
+            q:to/END/;
+            is a micro-cap regional paper and office
+            supply distributor with an emphasis on servicing
+            small-business clients.
+            END
+    ]),
+
+    p :hx-get<https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode>,
+        "Click Me",
+];
+
+my $html = html :lang<en>, [
+    $head,
+    $body,
+];
+
+say "<!doctype html>$html";
diff --git a/dist.ini b/dist.ini
@@ -1,9 +1,10 @@
 name = HTMX
 
-[ReadmeFromPod]
-filename = lib/HTMX.rakumod
-
 [UploadToZef]
 
+;FIXME uncomment after README.md is moved to HTMX.rakumod POD6
+;[ReadmeFromPod]
+;filename = lib/HTMX.rakumod
+
 [Badges]
 provider = github-actions/test.yml
diff --git a/index.html b/index.html
diff --git a/lib/HTMX.rakumod b/lib/HTMX.rakumod
@@ -1,11 +1,8 @@
 unit class HTMX;
 
-constant term:<¶> = $?NL;
-
-##### HTMX Tag Export #####
-
-#viz. https://www.w3schools.com/tags/default.asp
+##### Declare Constants #####
 
+#| viz. https://www.w3schools.com/tags/default.asp
 constant @all-tags = <a abbr address area article aside audio b base bdi bdo blockquote body br
     button canvas caption cite code col colgroup data datalist dd del details dfn dialog div
     dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup
@@ -14,38 +11,49 @@ constant @all-tags = <a abbr address area article aside audio b base bdi bdo blo
     script search section select small source span strong style sub summary sup svg table tbody
     td template textarea tfoot th thead time title tr track u ul var video wbr>;
 
-#of which "empty" / "singular" tags from https://www.tutsinsider.com/html/html-empty-elements/
+#| of which "empty" / "singular" tags from https://www.tutsinsider.com/html/html-empty-elements/
 constant @singular-tags = <area base br col embed hr img input link meta param source track wbr>;
 
-my @regular-tags = (@all-tags.Set (-) @singular-tags.Set).keys;
+##### HTMX Tag Export #####
 
-sub list-tags is export {@all-tags.sort }
-sub list-singulars is export { @singular-tags.sort }
-sub list-regulars is export { @regular-tags }
+my @regular-tags = (@all-tags.Set (-) @singular-tags.Set).keys;
 
 # Export them so that `h1("text")` makes `<h1>text</h1>` and so on
 # eg sub h1(Str $inner) {do-tag 'h1', $inner}
+# inners are already Str
+
+sub attrs(%h) {
+    +%h ?? (' ' ~ %h.map({.key ~ '="' ~ .value ~ '"'}).join(' ') ) !! ''
+}
 
-sub do-regular-tag( $tag, $inner?, *%h ) {
+sub do-regular-tag( $tag, *@inners, *%h ) {
 
-    my $attrs = +%h ?? (' ' ~ %h.map({.key ~ '="' ~ .value ~ '"'}).join(' ') ) !! '';
+    my $opener = '<'  ~ $tag ~ attrs(%h) ~ '>';
+    my $closer = '</' ~ $tag ~ '>';
+
+    given @inners {
+        when * <= 1 {
+            $opener ~ @inners.join ~ $closer
+        }
+        when * >= 2 {
+            $opener ~ "\n  " ~ @inners.join("\n  ") ~ "\n" ~ $closer
+        }
+    }
 
-    '<' ~ $tag ~ $attrs ~ '>' ~ ($inner // '') ~ '</' ~ $tag ~ '>'
 }
 
 sub do-singular-tag( $tag, *%h ) {
 
-    my $attrs = +%h ?? (' ' ~ %h.map({.key ~ '="' ~ .value ~ '"'}).join(' ') ) !! '';
+    '<' ~ $tag ~ attrs(%h) ~ ' />'
 
-    '<' ~ $tag ~ $attrs ~ ' />'
 }
 
 # put in all the tags programmatically
 # viz. https://docs.raku.org/language/modules#Exporting_and_selective_importing
 
 my package EXPORT::DEFAULT {
     for @regular-tags -> $tag {
-        OUR::{'&' ~ $tag} := sub ($inner?, *%h) { do-regular-tag( "$tag", $inner, |%h ) }
+        OUR::{'&' ~ $tag} := sub (*@inners, *%h) { do-regular-tag( "$tag", @inners, |%h ) }
     }
 
     for @singular-tags -> $tag {

diff --git a/t/01-basic.rakutest b/t/01-basic.rakutest
@@ -1,6 +1,13 @@
 use Test;
 use HTMX;
 
-pass "replace me";
+is h1('text', :class<jumbotron>), '<h1 class="jumbotron">text</h1>',        'h1';
+
+is h1(:class<doobie>), '<h1 class="doobie"></h1>',                           'empty';
+
+is div(:class<jumbotron>, 'xx'), '<div class="jumbotron">xx</div>',         'regular';
+
+is hr, '<hr />',                                                            'singluar';
+
 
 done-testing;