zine v0.4.4

assets/style.css

@@ -190,6 +190,11 @@ video {
   border: 1px dashed #CCC;
 }
 
+.block.padded {
+  margin: 10px;
+  border: 1px solid #CCC;
+}
+
 .block p {
   padding-top: 0;
   font-size: 0.9em;

build.zig.zon

@@ -3,8 +3,8 @@
     .version = "0.0.0",
     .dependencies = .{
         .zine = .{
-            .url = "git+https://github.com/kristoff-it/zine?ref=v0.4.3#a037f449e64eee08239202ef92a3c96bb6486187",
-            .hash = "12206ead5641f598ea6e71a51d9fa851bc02c75944b441ff21ed45b96d57e95c7b13",
+            .url = "git+https://github.com/kristoff-it/zine?ref=v0.4.4#d8ab33c0b7431ec065887e0e4153f379e0356c80",
+            .hash = "122015fdea74fa4d411bead39034cd5383dfcb38346e653c9145ce670c61124daf8a",
         },
     },
     .paths = .{"."},

content/docs/supermd/index.smd

@@ -387,6 +387,25 @@ Absence of a leading `/` means
 ![](cat.jpg) 
 └─➤ []($image.asset('cat.jpg'))
 ```
+
+Additionally, any text put inside of `![]` will be used as a caption, while the Markdown "title" text will be used to fill the `alt` attribute of the image:
+```markdown
+![Caption](cat.jpg "alt text") 
+└─➤ [Caption]($image.asset('cat.jpg').alt('alt text'))
+```
+># [Warning]($block.attrs('warning'))
+>In Markdown any text inside of `![]` is used as the `alt` attribute,
+>while the extra string after the image location is used as the `title`
+>attribute.
+>
+>We break compatibility because within `![]` you can use 
+>Markdown syntax to style your captions, which is a capability that
+>is lost in Markdown since `alt` only accepts simple strings.
+>
+>As a consequence of this change, `alt` takes the place of `title` 
+>simply because it's more important. You can still give titles to 
+>images (and more) by using explicit directive syntax, if you so wish.
+
 ## Inline HTML Escape Hatch
 
 SuperMD forbids inline HTML in order to make it possible to render

content/docs/supermd/scripty.smd

@@ -16,44 +16,96 @@ that can be rendered individually by a template.
 ## `$block` : [Block]($link.ref("Block"))
 
 When placed at the beginning of a Markdown quote block, the quote 
-block becomes a generic container for elements that can be styled as 
-one wishes.
+block becomes a styleable container for elements.
 
 SuperHTML will automatically give the class `block` when rendering 
 Block directives.
 
-Syntax Example:
+Example:
 ```markdown
->[]($block.attr('note'))
->This is now a block note.
+>[]($block)
+>This is now a block.
 >Lorem ipsum.
 ```
+
+>[]($block)
+>This is now a block.
+>Lorem ipsum.
+
 Differently from Sections, Blocks cannot be rendered independently 
 and can be nested.
 
+Example:
+```markdown
+>[]($block)
+>This is now a block.
+>
+>>[]($block.attrs('padded'))
+>>This is a nested block.
+>>
+>
+>back to the outer block
+```
+
+>[]($block)
+>This is now a block.
+>
+>>[]($block.attrs('padded'))
+>>This is a nested block.
+>
+>back to the outer block
+
 A block can optionally wrap a Markdown heading element. In this case  
 the generated Block will be rendered with two separate sub-containers: 
 one for the block title and one for the body.
 
-Syntax Example:
+Example:
 ```markdown
->### [Warning]($block.attr('warning'))
+># [Warning]($block.attrs('warning'))
 >This is now a block note.
 >Lorem ipsum.
 ```
+># [Warning]($block.attrs('warning'))
+>This is now a block note.
+>Lorem ipsum.
+
 
 ## `$heading` : [Heading]($link.ref("Heading"))
 
 Allows giving an id and attributes to a heading element.
 
+Example:
+```markdown
+# [Title]($heading.id('foo').attrs('bar', 'baz'))
+```
+
+This will be rendered by SuperHTML as:
+```html
+<h1 id="foo" class="bar baz">Title</h1>
+```
+
 ## `$image` : [Image]($link.ref("Image"))
 
 An embedded image.
 
+Any text placed between `[]` will be used as a caption for the image.
+
+Example:
+```markdown
+[This is the caption]($image.asset('foo.jpg'))
+```
+
 ## `$video` : [Video]($link.ref("Video"))
 
 An embedded video.
 
+Any text placed between `[]` will be used as a caption for the video.
+
+Example:
+```markdown
+[This is the caption]($video.asset('foo.webm'))
+```
+
 ## `$link` : [Link]($link.ref("Link"))
 
 A link.
@@ -62,22 +114,17 @@ A link.
 
 An embedded piece of code.
 
-# [anydirective]($section.id('anydirective'))
-
-Each directive's functions will allow you to set the directive's 
-internal fields accordingly using a "builder pattern" / "fluent interface".
-
-For example, in:
+Any text placed between `[]` will be used as a caption for the snippet.
 
+Example:
 ```markdown
-[]($image.asset('cat.jpg').id('meow'))
+[This is the caption]($code.asset('foo.zig'))
 ```
-The call to `asset` returns a reference to the original
-`$image` directive, which in turn then gets modified a 
-second time by `id`.
 
-Different kinds of directives will have different functions 
-but all will support the functions listed here.
+# [anydirective]($section.id('anydirective'))
+
+Each Directive has a different set of properties that can be set.
+Properties that can be set on all directives are listed here.
 
 ## Functions
 
@@ -89,6 +136,11 @@ Sets the unique identifier field of this directive.
 
 Appends to the attributes field of this Directive.
 
+### []($heading.id("anydirective.title")) [`fn`]($link.ref("anydirective.title")) title (str) -> [anydirective]($link.ref("anydirective"))
+
+Title for this directive, mostly used as metadata that does
+not get rendered directly in the page.
+
 # [Section]($section.id('Section'))
 
 A content section, used to define a portion of content
@@ -97,51 +149,92 @@ that can be rendered individually by a template.
 # [Block]($section.id('Block'))
 
 When placed at the beginning of a Markdown quote block, the quote 
-block becomes a generic container for elements that can be styled as 
-one wishes.
+block becomes a styleable container for elements.
 
 SuperHTML will automatically give the class `block` when rendering 
 Block directives.
 
-Syntax Example:
+Example:
 ```markdown
->[]($block.attr('note'))
->This is now a block note.
+>[]($block)
+>This is now a block.
 >Lorem ipsum.
 ```
+
+>[]($block)
+>This is now a block.
+>Lorem ipsum.
+
 Differently from Sections, Blocks cannot be rendered independently 
 and can be nested.
 
+Example:
+```markdown
+>[]($block)
+>This is now a block.
+>
+>>[]($block.attrs('padded'))
+>>This is a nested block.
+>>
+>
+>back to the outer block
+```
+
+>[]($block)
+>This is now a block.
+>
+>>[]($block.attrs('padded'))
+>>This is a nested block.
+>
+>back to the outer block
+
 A block can optionally wrap a Markdown heading element. In this case  
 the generated Block will be rendered with two separate sub-containers: 
 one for the block title and one for the body.
 
-Syntax Example:
+Example:
 ```markdown
->### [Warning]($block.attr('warning'))
+># [Warning]($block.attrs('warning'))
 >This is now a block note.
 >Lorem ipsum.
 ```
+># [Warning]($block.attrs('warning'))
+>This is now a block note.
+>Lorem ipsum.
+
 
 # [Heading]($section.id('Heading'))
 
 Allows giving an id and attributes to a heading element.
 
+Example:
+```markdown
+# [Title]($heading.id('foo').attrs('bar', 'baz'))
+```
+
+This will be rendered by SuperHTML as:
+```html
+<h1 id="foo" class="bar baz">Title</h1>
+```
+
 # [Image]($section.id('Image'))
 
 An embedded image.
 
+Any text placed between `[]` will be used as a caption for the image.
+
+Example:
+```markdown
+[This is the caption]($image.asset('foo.jpg'))
+```
+
 ## Functions
 
 ### []($heading.id("Image.alt")) [`fn`]($link.ref("Image.alt")) alt (str) -> [Image]($link.ref("Image"))
 
 An alternative description for this image that accessibility
 tooling can access.
 
-### []($heading.id("Image.caption")) [`fn`]($link.ref("Image.caption")) caption (str) -> [Image]($link.ref("Image"))
-
-A caption for this image.
-
 ### []($heading.id("Image.linked")) [`fn`]($link.ref("Image.linked")) linked (bool) -> [Image]($link.ref("Image"))
 
 Wraps the image in a link to itself.
@@ -166,6 +259,13 @@ Sets the source location of this directive to a build asset.
 
 An embedded video.
 
+Any text placed between `[]` will be used as a caption for the video.
+
+Example:
+```markdown
+[This is the caption]($video.asset('foo.webm'))
+```
+
 ## Functions
 
 ### []($heading.id("Video.loop")) [`fn`]($link.ref("Video.loop")) loop (bool) -> [Video]($link.ref("Video"))
@@ -277,6 +377,13 @@ page or a target page set with `page()`.
 
 An embedded piece of code.
 
+Any text placed between `[]` will be used as a caption for the snippet.
+
+Example:
+```markdown
+[This is the caption]($code.asset('foo.zig'))
+```
+
 ## Functions
 
 ### []($heading.id("Code.asset")) [`fn`]($link.ref("Code.asset")) asset (str) -> [Code]($link.ref("Code"))

content/log.smd

@@ -12,6 +12,15 @@ Refer to [the repository](https://github.com/kristoff-it/zine) and the [issue tr
 
 ## Changes
 
+### 2024-08-30 (later in the day)
+```sh
+zig fetch --save "git+https://github.com/kristoff-it/zine#v0.4.4"
+```
+- Introduced support for captions directly in Markdown link / image syntax.
+  See the updated SuperMD docs for more details.
+- Fixed a bug that prevented users from accessing `$if` in the intended way.
+- Some SuperMD Scripty reference docs were improved.
+
 
 ### 2024-08-30 (later in the day)
 ```sh