Update snapshots and fix some minor formatting issues

src/hexdoc/_templates/macros/formatting.html.jinja

@@ -29,7 +29,9 @@
 
 {# link to value.id, with spoiler blur if value is a spoiler #}
 {% macro maybe_spoilered_link(value) -%}
- <a href="#{{ value.id.path }}" class="toc-elem {{ 'spoilered' if value.is_spoiler }}">{{ texture_macros.render_icon(value.icon) }} {{ value.name }}</a>
+ <a href="#{{ value.id.path }}" class="toc-elem {{ 'spoilered' if value.is_spoiler }}">
+ {{- texture_macros.render_icon(value.icon) }} {{ value.name -}}
+ </a>
 {%- endmacro %}
 
 {# macro block which spoiler blurs its content if value is a spoiler #}

src/hexdoc/_templates/macros/textures.html.jinja

@@ -1,66 +1,58 @@
 {% macro render_icon(item_or_texture, name="") -%}
  {% if item_or_texture.gaslighting is defined %}
- {{ render_item(item_or_texture) }}
- {% else %}
- {{
- render_texture(
- name=name,
- texture=item_or_texture,
- class_names=[],
- )
- }}
- {% endif %}
+ {{- render_item(item_or_texture) -}}
+ {% else %}
+ {{- render_texture(name, item_or_texture) -}}
+ {% endif %}
 {%- endmacro %}
 
 {% macro render_texture(name, texture, class_names=[], lazy=true) -%}
- {% if texture.meta is defined %}
+ {% if texture.meta is defined -%}
  <div
  role="img"
  title="{{ name }}"
  aria-label="Animated image of {{ name }}"
  class="{{ (class_names + ['texture', 'animated-sync', texture.class_name])|join(' ') }}"
  ></div>
- {% else %}
+ {%- else -%}
  <img
  title="{{ name }}"
  alt="Image of {{ name }}"
  src="{{ texture.url }}"
  {{ 'loading="lazy"'|safe if lazy }}
  class="{{ (class_names + ['texture'])|join(' ') }}"
  >
- {% endif %}
+ {%- endif %}
 {%- endmacro %}
 
 {# display a single item, with a badge if the count is greater than 1 #}
-{% macro render_item(item, is_first=true, count=1) -%}
- {% if item.gaslighting %}
- <div class="texture item-texture multi-textures gaslight-textures {{ 'multi-texture-active' if is_first }}">
+{% macro render_item(item, is_first=none, count=1) -%}
+ {% if item.gaslighting -%}
+ <div class="texture item-texture multi-textures gaslight-textures {{ 'multi-texture-active' if is_first is true }}">
  {% for texture in item.textures %}
  {{
  render_texture(
  name=item.name,
  texture=texture,
  class_names=[
  "item-texture",
- "multi-texture-active" if is_first,
+ "multi-texture-active" if loop.first,
  ],
  )
  }}
  {% endfor %}
  </div>
- {% else %}
- {{
- render_texture(
- name=item.name,
- texture=item.texture,
- class_names=[
- "item-texture",
- "multi-texture-active" if is_first,
- ],
- )
- }}
- {% endif %}
- {% if count > 1 %}
+ {%- else -%}
+ {{ render_texture(
+ name=item.name,
+ texture=item.texture,
+ class_names=[
+ "item-texture",
+ "multi-texture-active" if is_first is true,
+ ],
+ ) }}
+ {%- endif -%}
+ {% if count > 1 -%}
  <div class="badge">{{ count }}</div>
- {% endif %}
+ {%- endif %}
 {%- endmacro %}

test/integration/__snapshots__/test_cookiecutter/test_cookiecutter[vlatestindex.html].raw

@@ -129,16 +129,35 @@
  ><i class="bi bi-link-45deg"></i></a></span>
  </h2>
  <details class="toc-category">
- <summary><a href="#foo" class="spoilered">Mod Book</a></summary>
+ <summary><a href="#foo" class="toc-elem spoilered"><img
+ title="Amethyst Shard"
+ alt="Image of Amethyst Shard"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVQ4y2NgGBIg33/1f3RMkuZ/p5+h4BDLrv9Ea97c9xmu8f/fq//PL/hMnAEwm0EGgDBMc2/WGcIGgDSDFMMMALFBYiDNBA2AORtmAMxWmAFEaYYZAHI2TCOIJqgZ5kQQhjmfKJtBAKQAphikEUYTtBnZABhGNojoOEfWDKKJcjYuQ2CBRlG6p1tGAwDsrfXVRK6M0wAAAABJRU5ErkJggg=="
+ loading="lazy"
+ class="item-texture texture"
+ > Mod Book</a></summary>
  <ul>
- <li><a href="#bar" class="spoilered">This is the online version of the {} documentation.</a></li>
+ <li><a href="#bar" class="toc-elem spoilered"><img
+ title="item.minecraft.textures.mob_effect.nausea.png"
+ alt="Image of item.minecraft.textures.mob_effect.nausea.png"
+ src="DEBUG_GITHUBUSERCONTENT/test/_submodules/HexMod/doc/resources/assets/minecraft/textures/mob_effect/nausea.png"
+ loading="lazy"
+ class="item-texture texture"
+ > This is the online version of the {} documentation.</a></li>
  </ul>
  </details>
 </nav>
  <main class="book-body">
 <section id="foo">
  <div class="spoilered">
- <h2 class="category-title page-header">Mod Book<a
+ <h2 class="category-title page-header">
+ <img
+ title="Amethyst Shard"
+ alt="Image of Amethyst Shard"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVQ4y2NgGBIg33/1f3RMkuZ/p5+h4BDLrv9Ea97c9xmu8f/fq//PL/hMnAEwm0EGgDBMc2/WGcIGgDSDFMMMALFBYiDNBA2AORtmAMxWmAFEaYYZAHI2TCOIJqgZ5kQQhjmfKJtBAKQAphikEUYTtBnZABhGNojoOEfWDKKJcjYuQ2CBRlG6p1tGAwDsrfXVRK6M0wAAAABJRU5ErkJggg=="
+ loading="lazy"
+ class="item-texture texture"
+ >Mod Book<a
  href="#table-of-contents"
  class="permalink small"
  title="Jump to top"
@@ -149,9 +168,16 @@
  ><i class="bi bi-link-45deg"></i></a></h2>
  <p>The practitioners of this art would cast their so-called <span style="color: #b38ef3">Hexes</span> by drawing strange patterns in the air with a <a href="GITHUB_PAGES_URL/v/0.11.1-7#items/staff"><span style="color: #b0b">Staff</span></a> -- or craft <a href="GITHUB_PAGES_URL/v/0.11.1-7#items/hexcasting"><span style="color: #b0b">powerful magical items</span></a> to do the casting for them. How might I do the same?</p>
  </div>
-<div id="bar">
+<div id="bar" class="entry">
  <div class="spoilered">
- <h3 class="entry-title page-header">This is the online version of the {} documentation.<a
+ <h3 class="entry-title page-header">
+ <img
+ title="item.minecraft.textures.mob_effect.nausea.png"
+ alt="Image of item.minecraft.textures.mob_effect.nausea.png"
+ src="DEBUG_GITHUBUSERCONTENT/test/_submodules/HexMod/doc/resources/assets/minecraft/textures/mob_effect/nausea.png"
+ loading="lazy"
+ class="item-texture texture"
+ >This is the online version of the {} documentation.<a
  href="#table-of-contents"
  class="permalink small"
  title="Jump to top"

test/integration/__snapshots__/test_main/test_files[vlatestindex.css].raw

@@ -49,6 +49,15 @@ summary {
 blockquote.crafting-info {
  font-size: inherit;
 }
+/* to account for the section icons */
+.entry-title, .category-title {
+ display: flex;
+ align-items: end;
+ .texture {
+ margin-right: 4px;
+ display: inline-block;
+ }
+}
 /* we do a bit of crafting (mostly stolen from https://computercraft.info/wiki) */
 .crafting-tables {
  display: flex;
@@ -111,15 +120,25 @@ blockquote.crafting-info {
 .multi-textures .texture {
  position: absolute;
 }
+.toc-elem > .texture {
+ margin-right: 2px;
+ display: inline-block;
+ vertical-align: middle;
+ position: relative;
+}
+.toc-elem .texture {
+ width: 16px;
+ height: 16px;
+}
 .multi-textures .texture:not(.multi-texture-active) {
- z-index: -1;
+ visibility: hidden;
 }
 .spotlight {
  position: relative;
  width: min-content;
  margin: -6px 0 8px 0;
 }
-.spotlight .texture {
+.spotlight > .texture {
  position: absolute;
  top: 10px;
  left: 10px;
@@ -237,6 +256,34 @@ p.todo-note {
  background-color: #553455;
  }
 }
+.flay-recipe{
+ image-rendering: pixelated; /* put it up here so it's inherited */
+ position: relative;
+}
+.flay-recipe-background{
+ position: relative;
+ top:0;
+ left: 0;
+}
+.flay-recipe-block-ingredient{
+ position: absolute;
+ top: 70px;
+ left: 24px;
+}
+/* entity chamber starts at top: 38px & left: 74px. it is 52px wide & 96px tall */
+.flay-recipe-entity{
+ position: absolute;
+ top: 86px;
+ left: 100px;
+ transform: translate(-50%, -50%);
+ max-height: 94px;
+ max-width: 50px;
+}
+.flay-recipe-result{
+ position: absolute;
+ top: 70px;
+ left: 176px;
+}
 canvas.spell-viz {
  --dot-color: #777f;
  --dot-color: #777f;