Replace holder.js with inline SVG

[MartijnCuppens]

Replaces holder.js with a non-JavaScript solution.

Holder.js is still used on the example pages, that's why I didn't remove it yet. Merging #27605 could could make it easier to remove.

Wow, now I see @m5o did a similar PR a few hours ago

TODO:

• Use this in examples too
• Make highlight code not show the svg but instead an img tag
• Always add the <title>?
• Remove holder.js when everything else is ready
• Maybe find another way so that we don't include docs.min.css in examples
• Do we even need viewBox?
• Make sure text is big in smaller screens too
• Clean up/squash some patches before merging

Closes #27632 by superseding it and fixes #23185 along the way.

[XhmikosR]

@m5o: currently it seems the alt is set to the text. Can we set it to the title instead?

[m5o]

@m5o: currently it seems the alt is set to the text. Can we set it to the title instead?

diff --git a/site/_includes/example.html b/site/_includes/example.html
index bdfda309f..3925b7c60 100644
--- a/site/_includes/example.html
+++ b/site/_includes/example.html
@@ -33,10 +33,10 @@ optional: hide_markup - disabled (default)
       {%- endif -%}
 
       {%- assign image_alt = include.content
-        | replace: '%">', '%">✂️'
-        | replace: '</text', '✂️</text'
+        | replace: '<title>', '<title>✂️'
+        | replace: '</title>', '✂️</title>'
         | split: '✂️' -%}
-      {%- assign image_alt = image_alt[1] | strip -%}
+      {%- assign image_alt = image_alt[1] -%}
 
       {%- for content_chunk in modified_content -%}
         {%- if content_chunk contains '<svg class="bd-placeholder-img' -%}
diff --git a/site/_includes/icons/placeholder.svg b/site/_includes/icons/placeholder.svg
index a4340c1d3..69d812a6c 100644
--- a/site/_includes/icons/placeholder.svg
+++ b/site/_includes/icons/placeholder.svg
@@ -28,7 +28,7 @@
 
 {%- capture svg -%}
 <svg class="bd-placeholder-img{% if class != '' %} {{ class }}{% endif %}" width="{{ width }}" height="{{ height }}" xmlns="http://www.w3.org/2000/svg"{% if viewBox != '' %} viewBox="{{ viewBox }}"{% endif %} preserveAspectRatio="xMidYMid slice">
-  {% if title != ' ' %}<title>{{ title }}</title>{% endif %}
+  <title>{{ title }}</title>
   <rect fill="{{ background }}" width="100%" height="100%"/>
   <text fill="{{ color }}" dy=".3em" x="50%" y="50%">{{ text }}</text>
 </svg>

💡 The if condition on the title is obsolete, if no title attribute is passed the default text 'Generic Placeholder Image' is used.

[XhmikosR]

The condition might be useless now, but we didn't start with always adding the title :P

Thanks for the rest, I will update the patch.

EDIT:
Actually, now I remember why I had that check there. Because default doesn't apply when we pass a string with a space, thus this is a way to be able to skip the title in some cases.

[MartijnCuppens]

Don't think the docs.min.css should be generated in this PR?

[XhmikosR]

True, we'll get that in eventually :)

[XhmikosR]

Woot, thanks! Seems to be fine so far.

[MartijnCuppens]

✅I've just tested this with all the changes, looks good!

[XhmikosR]

Thanks @m5o for all the help with this, I really appreciate it <3