Best practive to display the data source link in html page?

[Yunuuuu]

Description

I have created a Quarto website to showcase various example galleries.

I want to add a data source link on the right side of each page whenever applicable.

Each data source is stored in the GitHub repository under the rawdata/ directory, with subdirectories named after the corresponding .qmd file.

Is there a convenient way to automate adding these data source links?

[mcanouil]

See Code Links and Other Links

[Yunuuuu]

I noticed that Quarto supports other-links, but I don’t want the data source link to appear under the “Other Links” section. Instead, I want to display the data source link directly on the right side of each page.

Since the directory structure is consistent, I’m wondering if there is a convenient way to add this link by modifying only the YAML header of each page.

[mcanouil]

Instead, I want to display the data source link directly on the right side of each page.

If you don't like the name, change it.
https://quarto.org/docs/authoring/language.html#alternate-language

directly on the right side of each page.

What does that mean exactly? Because code-links and other-link both are by default "on the right side of each page" since they are under the TOC which is on the right.

[Yunuuuu]

Thanks! I want to add the link below the TOC without displaying any section title. Something like this:

[mcanouil]

Use the tools I suggested with a CSS rule to hide the title or create your own HTML partial to handle everything yourself.

You can also write some JavaScript to rearrange the DOMs but that's beyond the scope of Quarto's support.

edit:

.quarto-alternate-formats h2,
.quarto-code-links h2,
.quarto-other-links h2 {
  display: none;
}

---

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[Yunuuuu]

Thanks for the details! Using CSS and an HTML partial sounds like a good approach to me.

[Yunuuuu]

I discovered another way to achieve this using margin-footer:

margin-footer: |
  [Data source](https://github.com/Yunuuuu/ggalign-gallery/tree/main/rawdata/single-cell-workflow)

[mcanouil]

Indeed, there are parameters to add anything as header/footer in the margin.

[harrelfe]

Code links are cool and I had missed those. I frequently define functions to make special html inclusions easy. For example in R:

linkit <- function(text, link)
  if(grepl('png$', text)) paste0('<a href="', link, '"><img src="',
                                 text, '" width="25"></a>') else
     paste0('[', text, '](', link, ')')

mrg <- function(..., color=NULL, method=NULL) 	{
  x <- c(...)

  if(! length(method)) method <- min(length(x), 2)
#  if(method == 1) x <- paste(x, collapse=' ')
  x <- paste(x, collapse=' ')
  if(length(color))
    x <- paste0('<span style="color:', color, '">', x, '</span>')
  w <- if(method == 1) paste0('[', x, ']{.aside}')
       else
         paste0('\n\n::: {.column-margin}\n', x, '\n\n:::\n\n')

  if(length(.Options$debugmrg) && .Options$debugmrg)
    cat(w, file='/tmp/debugmrg.txt', append=TRUE)
  w
  }

disc <- function(x) {
  file <- paste0('https://discourse.datamethods.org/search?q="', x, '"')
  linkit('🅓', file)
  }

ddisc <- function(x) {
  file <- paste0('http://bit.ly/datamethods-', qproject, x)
  linkit('discourse.png', file)
  }

Then in the Quarto document I'll have something like

# Section Title

`r mrg(ddisc(19))`

Where mrg() puts the link in the right margin.

[Yunuuuu]

Thanks! I’ll take some time to understand the code block. I appreciate you sharing it.