monero-project / monero-site

https://getmonero.org
BSD 3-Clause "New" or "Revised" License
272 stars 384 forks source link

plugin request: jekyll-target-blank #2235

Open plowsof opened 6 months ago

plowsof commented 6 months ago

2233 (original #2118) hard codes some external links to open in an external window.

jekyll-target-blank

Automatically adds a target="_blank" rel="noopener noreferrer" attribute to all external links in Jekyll's content plus several other automation features for the external links. Read more here

https://github.com/keithmifsud/jekyll-target-blank https://rubygems.org/gems/jekyll-target-blank

uncovered some issues while testing:

We have bad URI's. To confirm , enter https://matrix.to/#/#monero:monero.social @ https://0mg.github.io/tools/uri/

It then builds. and after a brief look it seems to work fine.

plowsof commented 1 month ago

Ignore: Since 2020, major web browsers have enabled native handling of lazy loading by default.

Adding another which would be useful: Jekyll-loading-lazy https://github.com/gildesmarais/jekyll-loading-lazy

plowsof commented 1 month ago

Testing with a docker build/run setup (to support plugins/ruby versions easier), and noticed a bug in the header logo:

 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
   <a href="/%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20"><img src="/img/monero-logo.png" width="500" height="135" alt="Monero Logo" class="monero-logo" loading="lazy"></a>
 </div>

after some debugging/head scratching/downgrading ruby / removing plugins i confirmed jekyll-loading-lazy is the main culprit. new lines.. and spaces being escaped?: in header.html i see whats going on:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
  <a href="{% if site.lang == 'en' %}

  {{ site.baseurl_root }}/

  {% else %}

  {{ site.baseurl_root }}/{{site.lang}}

  {% endif %}"><img src="/img/monero-logo.png" width="500" height="135" alt="Monero Logo" class="monero-logo"></a>
</div>

jekyll-loading-lazy does not handle multiple line liquid scripts in the href. a brief search shows liquid templates can avoid adding whitespace/newlines to the html using whitespace control

not needed as above comment shows most browsers have this enabled since 2020 but this would fix it and seems correct liquid scripting practice:

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
  <a href="{% if site.lang == 'en' -%}

  {{ site.baseurl_root }}/

  {%- else -%}

  {{ site.baseurl_root }}/{{site.lang}}

  {%- endif %}"><img src="/img/monero-logo.png" width="500" height="135" alt="Monero Logo" class="monero-logo"></a>
</div>