Add external link font ↗ in the TOC

[ronnyhdez]

Also the link should open in external window. This was proposed by @itcarroll during mentors co-working. Should look like:

There is one option in Quarto: https://quarto.org/docs/output-formats/html-basics.html#external-links

[ronnyhdez]

Seems to work for link in the body/text, but not in the TOC elements:

[ronnyhdez]

there is one super easy solution which is basically to paste the ↗ character at the end of the text line in the _quarto.yml:

- text: "PO.DAAC Tutorials ↗"
  href: https://podaac.github.io/tutorials/
- text: "ASDC Mission Tutorials ↗"
  href: https://nasa.github.io/ASDC_Data_and_User_Services/
- text: "NSIDC Data Cookbook ↗"
  href: https://nsidc.github.io/NSIDC-Data-Cookbook/

That would render to:

Is not the same icon, but I think that at least it communicates the idea of being in front of an external link.

[ronnyhdez]

Nonetheless, the icon must exist somewhere in quarto, because using the "link-external-icon: true" option brings the same exact icon we are looking for:

This has to be embedded somewhere. With no need to include something external (like fontawesome for exxample)

[ronnyhdez]

There are some clues here

[ronnyhdez]

@itcarroll, @ateucher what do you think about this? Should I spend more time to get the icon, or with the solution here is enough to satisfy this requirement?

[ronnyhdez]

Turns out that including the following in the styles.css, we can use the icon in the sidebar:

#quarto-sidebar a.sidebar-link[href^="https://"]:not([href^="https://nasa-openscapes.github.io/earthdata-cloud-cookbook"])::after {
  content: "";
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.2em;
  padding-right: 0.75em;
}

The _quarto.yml already loads this file, so it works:

[ronnyhdez]

In case changing the style.css file is a no go, I created a separated PR. If we want the change, we could merge. Ref #457

[itcarroll]

Making sure the loop is closed by referencing the relevant comment on 444 here in the related issue. Seems like a good workaround to me. Here's the suggestion (because the link seems not working).

        contents:
          - text: "<a href='https://podaac.github.io/tutorials/'>PO.DAAC Tutorials</a>"
          - text: "<a href='https://nasa.github.io/ASDC_Data_and_User_Services/'>ASDC Mission Tutorials</a>"
          - text: "<a href='https://nsidc.github.io/NSIDC-Data-Cookbook/'>NSIDC Data Cookbook</a>"
          - text: "<a href='https://nasa.github.io/oceandata-notebooks/'>OBDAAC Ocean Data Cookbook</a>"
          - text: "<a href='https://ornldaac.github.io/airborne/'>ORNL DAAC Airborne Tutorials</a>"
          - text: "<a href='https://ornldaac.github.io/gedi_tutorials/'>ORNL DAAC GEDI Tutorials</a>"