Fix herb issues

.herb.yml

@@ -0,0 +1,107 @@
+# This file configures Herb for your project and team.
+# Settings here take precedence over individual editor preferences.
+#
+# Herb is a suite of tools for HTML+ERB templates including:
+# - Linter: Validates templates and enforces best practices
+# - Formatter: Auto-formats templates with intelligent indentation
+# - Language Server: Provides IDE support (VS Code, Zed, Neovim, etc.)
+#
+# Website: https://herb-tools.dev
+# Configuration: https://herb-tools.dev/configuration
+# GitHub Repo: https://github.com/marcoroth/herb
+#
+
+version: 0.9.7
+
+# files:
+#   # Additional patterns beyond the defaults (**.html, **.rhtml, **.html.erb, etc.)
+#   include:
+#     - '**/*.xml.erb'
+#     - 'custom/**/*.html'
+#
+#   # Patterns to exclude (can exclude defaults too)
+#   exclude:
+#     - 'public/**/*'
+#     - 'tmp/**/*'
+
+linter:
+  enabled: true
+  rules:
+    actionview-no-silent-helper:
+      enabled: false
+    actionview-no-silent-render:
+      enabled: false
+    erb-no-duplicate-branch-elements:
+      enabled: false
+    erb-no-instance-variables-in-partials:
+      enabled: false
+    erb-no-interpolated-class-names:
+      enabled: false
+    erb-no-output-in-attribute-position:
+      enabled: false
+    erb-no-unused-expressions:
+      enabled: false
+    erb-no-unused-literals:
+      enabled: false
+    erb-no-unsafe-raw:
+      enabled: false
+    erb-no-unsafe-script-interpolation:
+      enabled: false
+    erb-prefer-direct-output:
+      enabled: false
+    html-no-unescaped-entities:
+      enabled: false
+    html-require-script-nonce:
+      enabled: false
+  # # Exit with error code when diagnostics of this severity or higher are present
+  # # Valid values: error (default), warning, info, hint
+  # failLevel: warning
+
+  # # Additional patterns beyond the defaults for linting
+  # include:
+  #   - '**/*.xml.erb'
+  #
+  # # Patterns to exclude from linting
+  exclude:
+    - "lib/**/*"
+
+  # rules:
+  #   erb-no-extra-newline:
+  #     enabled: false
+  #
+  #   # Rules can have 'include', 'only', and 'exclude' patterns
+  #   some-rule:
+  #     # Additional patterns to check (additive, ignored when 'only' is present)
+  #     include:
+  #       - 'app/components/**/*'
+  #     # Don't apply this rule to files matching these patterns
+  #     exclude:
+  #       - 'app/views/admin/**/*'
+  #
+  #   another-rule:
+  #     # Only apply this rule to files matching these patterns (overrides all 'include')
+  #     only:
+  #       - 'app/views/**/*'
+  #     # Exclude still applies even with 'only'
+  #     exclude:
+  #       - 'app/views/admin/**/*'
+
+formatter:
+  enabled: false
+  indentWidth: 2
+  maxLineLength: 80
+  # # Additional patterns beyond the defaults for formatting
+  # include:
+  #   - '**/*.xml.erb'
+  #
+  # # Patterns to exclude from formatting
+  # exclude:
+  #   - 'app/views/admin/**/*'
+
+  # # Rewriters modify templates during formatting
+  # rewriter:
+  #   # Pre-format rewriters (modify AST before formatting)
+  #   pre:
+  #     - tailwind-class-sorter
+  #   # Post-format rewriters (modify formatted output string)
+  #   post: []

app/components/alchemy/admin/page_node.html.erb

@@ -3,10 +3,7 @@
   <%= @page.folded? ? 'folded' : nil %>
 >
   <li class="sitemap-item <%= @page.page_layout %>">
-    <div
-      class="sitemap_page<% @page.locked? ? ' locked' : '' %>"
-      name="<%= @page.name %>"
-    >
+    <div class="sitemap_page" name="<%= @page.name %>">
       <div class="sitemap_left_images">
         <% if @page.children.any? || @page.folded? %>
           <button class="page_folder icon_button">

app/javascript/alchemy_admin/picture_selector.js

@@ -31,7 +31,7 @@ export default function PictureSelector() {
   const selectAllButton = document.querySelector("#select_all_pictures")
   const selectedItemTools = document.querySelector(".selected_item_tools")
 
-  on("click", ".toolbar_buttons", "a#select_all_pictures", (event) => {
+  on("click", ".toolbar_buttons", "#select_all_pictures", (event) => {
     event.preventDefault()
 
     selectAllButton.classList.toggle("active")
@@ -61,7 +61,7 @@ export default function PictureSelector() {
 
     openDialog(url, {
       title: event.target.title,
-      size: "400x295"
+      size: "400x235"
     })
   })
 }

app/models/alchemy/picture.rb

@@ -204,6 +204,10 @@ def description_for(language)
       end
     end
 
+    def alt_text(language: Alchemy::Current.language)
+      description_for(language) || name&.humanize
+    end
+
     # Returns an uri escaped name.
     #
     def urlname

app/views/alchemy/admin/attachments/show.html.erb

@@ -40,7 +40,7 @@
     <% case @attachment.file_mime_type %>
     <% when *Alchemy::Filetypes::IMAGE_FILE_TYPES %>
     <div class="attachment_preview_container">
-      <%= image_tag(@attachment.url) %>
+      <%= image_tag(@attachment.url, alt: @attachment.name) %>
     </div>
     <% when *Alchemy::Filetypes::AUDIO_FILE_TYPES %>
     <div class="attachment_preview_container">

app/views/alchemy/admin/dashboard/widgets/_locked_pages.html.erb

@@ -4,49 +4,51 @@
     <tr>
       <th colspan="<%= colspan %>"><%= Alchemy.t('Currently locked pages') %></th>
     </tr>
-  <% if @all_locked_pages.blank? %>
-    <tr>
-      <td colspan="<%= colspan %>"><%= Alchemy.t('no pages') %></td>
-    </tr>
-  <% else %>
-    <% @all_locked_pages.each do |page| %>
-    <tr class="<%= cycle('even', 'odd', name: 'locked_pages') %>">
-      <td>
-        <% if current_alchemy_user.id == page.locked_by %>
-        <%= link_to(page.name, alchemy.edit_admin_page_path(page)) %>
-        <% else %>
-        <%= page.name %>
-        <% end %>
-      </td>
-      <% if multi_site? %>
-      <td>
-        <small><%= page.site_name %></small>
-      </td>
+    <% if @all_locked_pages.blank? %>
+      <tr>
+        <td colspan="<%= colspan %>"><%= Alchemy.t('no pages') %></td>
+      </tr>
+    <% else %>
+      <% @all_locked_pages.each do |page| %>
+        <tr class="<%= cycle('even', 'odd', name: 'locked_pages') %>">
+          <td>
+            <% if current_alchemy_user.id == page.locked_by %>
+              <%= link_to(page.name, alchemy.edit_admin_page_path(page)) %>
+            <% else %>
+              <%= page.name %>
+            <% end %>
+          </td>
+          <% if multi_site? %>
+            <td>
+              <small><%= page.site_name %></small>
+            </td>
+          <% end %>
+          <td>
+            <% if page.site_languages.many? %>
+              <small><%= page.language.code.upcase %></small>
+            <% end %>
+          </td>
+          <td>
+            <small>
+              <% if current_alchemy_user.id == page.locked_by %>
+                <%= Alchemy.t(:me) %>
+              <% else %>
+                <%= page.locker_name %>
+              <% end %>
+            </small>
+          </td>
+          <td>
+            <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Current.site) %>
+              <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_path)) do %>
+                <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
+                  <%= render_icon(:close, size: '1x') %>
+                </button>
+              <% end %>
+            <% end %>
+          </td>
+        </tr>
       <% end %>
-      <td>
-        <% if page.site_languages.many? %>
-        <small><%= page.language.code.upcase %></small>
-        <% end %>
-      </td>
-      <td>
-        <% if current_alchemy_user.id == page.locked_by %>
-        <small><%= Alchemy.t(:me) %></small>
-        <% else %>
-        <small><%= page.locker_name %></small>
-        <% end %>
-      </td>
-      <td>
-        <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Current.site) %>
-        <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_path)) do %>
-          <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
-            <%= render_icon(:close, size: '1x') %>
-          </button>
-        <% end %>
-        <% end %>
-      </td>
-    </tr>
     <% end %>
-  <% end %>
   </table>
 </div>
 <% reset_cycle('locked_pages') %>

app/views/alchemy/admin/pages/edit.html.erb

@@ -74,9 +74,9 @@
         </sl-tooltip>
       <% else %>
         <sl-tooltip content="<%= Alchemy.t(:cannot_visit_unpublic_page) %>">
-          <%= content_tag "a", class: "disabled icon_button" do %>
+          <button type="button" class="disabled icon_button">
             <%= render_icon('external-link') %>
-          <% end %>
+          </button>
         </sl-tooltip>
       <% end %>
     </div>
@@ -105,10 +105,9 @@
   <% end %>
   <div class="toolbar_button">
     <sl-tooltip content="<%= Alchemy.t('Reload Preview') %>">
-      <%= link_to render_icon(:refresh), nil, {
-        class: 'icon_button',
-        id: 'reload_preview_button'
-      } %>
+      <button class="icon_button" id="reload_preview_button" type="button">
+        <%= render_icon(:refresh) %>
+      </button>
     </sl-tooltip>
   </div>
 </div>
@@ -118,10 +117,9 @@
   <div class="toolbar_spacer"></div>
   <div class="toolbar_button">
     <sl-tooltip content="<%= Alchemy.t(:hide_elements) %>">
-      <%= link_to render_icon("menu-unfold"), nil, {
-        id: "element_window_button",
-        class: "icon_button"
-      } %>
+      <button id="element_window_button" class="icon_button" type="button">
+        <%= render_icon("menu-unfold") %>
+      </button>
     </sl-tooltip>
   </div>
 </div>

app/views/alchemy/admin/partials/_main_navigation_entry.html.erb

@@ -2,7 +2,7 @@
   <%= content_tag :div, class: main_navigation_css_classes(navigation), data: navigation["data"] do %>
     <%= link_to url_for_module(alchemy_module) do %>
       <% if navigation["image"] %>
-        <%= image_tag(navigation["image"]) %>
+        <%= image_tag(navigation["image"], alt: nil) %>
       <% elsif navigation["inline_image"] %>
         <%== navigation["inline_image"] %>
       <% elsif navigation["icon"] %>

app/views/alchemy/admin/pictures/index.html.erb

@@ -44,13 +44,14 @@
     <div class="toolbar_spacer"></div>
     <div class="toolbar_button">
       <sl-tooltip content="<%= Alchemy.t("Select all") %>">
-        <%= link_to(
-          render_icon('checkbox-multiple'),
-          nil,
-          id: 'select_all_pictures',
-          class: 'icon_button',
-          'data-alchemy-hotkey' => 'alt+a'
-        ) %>
+        <button
+          id="select_all_pictures"
+          class="icon_button"
+          type="button"
+          data-alchemy-hotkey="alt+a"
+        >
+          <%= render_icon('checkbox-multiple') %>
+        </button>
       </sl-tooltip>
     </div>
   </div>

app/views/alchemy/admin/pictures/show.html.erb

@@ -1,6 +1,6 @@
 <div class="zoomed-picture-background">
   <% if @picture.image_file %>
-    <%= image_tag @picture.url %>
+    <%= image_tag @picture.url, alt: @picture.alt_text %>
   <% else %>
     <alchemy-icon name="file-damage"></alchemy-icon>
   <% end %>

app/views/alchemy/admin/styleguide/index.html.erb

@@ -196,26 +196,26 @@
 <h4>Heading 4</h4>
 <h5>Heading 5</h5>
 
-<p>This is a paragraph, with <a href="#">a link</a>, a <kbd>keyboard shortcut</kbd> and an <code>inline code snippet</code>.</p>
+<p>This is a paragraph, with <a href="/admin/styleguide">a link</a>, a <kbd>keyboard shortcut</kbd> and an <code>inline code snippet</code>.</p>
 
 <h2>Messages</h2>
 
 <h3>Info Message</h3>
 
 <%= render_message do %>
-  <p>Lorem ipsum <strong>dolor</strong> sit amet, <a href="#">consectetur</a> adipiscing elit.</p>
+  <p>Lorem ipsum <strong>dolor</strong> sit amet, <a href="/admin/styleguide">consectetur</a> adipiscing elit.</p>
 <% end %>
 
 <h3>Warning Message</h3>
 
 <%= render_message :warning do %>
-  <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.</p>
+  <p>Lorem ipsum dolor sit amet, <a href="/admin/styleguide">consectetur</a> adipiscing elit.</p>
 <% end %>
 
 <h3>Error Message</h3>
 
 <%= render_message :error do %>
-  <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.</p>
+  <p>Lorem ipsum dolor sit amet, <a href="/admin/styleguide">consectetur</a> adipiscing elit.</p>
 <% end %>
 
 <h3>Growl Messages</h3>
@@ -238,7 +238,7 @@
   </a>
 </sl-tooltip>
 <a
-  href="#"
+  href="/admin/styleguide"
   is="alchemy-dialog-link"
   class="icon_button disabled"
 >
@@ -285,10 +285,10 @@
     <td>Even table cell 2</td>
     <td>Even table cell 3</td>
     <td class="tools">
-      <a href="#" class="icon_button">
+      <a href="/admin/styleguide" class="icon_button">
         <%= render_icon "delete-bin-2" %>
       </a>
-      <a href="#" class="icon_button">
+      <a href="/admin/styleguide" class="icon_button">
         <%= render_icon "edit" %>
       </a>
     </td>
@@ -301,10 +301,10 @@
     <td>Odd table cell 2</td>
     <td>Odd table cell 3</td>
     <td class="tools">
-      <a href="#" class="icon_button">
+      <a href="/admin/styleguide" class="icon_button">
         <%= render_icon "delete-bin-2" %>
       </a>
-      <a href="#" class="icon_button">
+      <a href="/admin/styleguide" class="icon_button">
         <%= render_icon "edit" %>
       </a>
     </td>