babelquarto: Rendering a Multilingual Quarto Book

I am currently experimenting with [tag:babelquarto] in order to create a Multilingual [tag:Quarto] Book, and I have utilized the provided code from the [tag:babelquarto] website for this purpose.

library(babelquarto)
library(fs)

parent_dir <- getwd()

quarto_multilingual_book(
    parent_dir = parent_dir
  , book_dir   = "blop"
  )

Creating project at D:23-06-23_babelquarto\blop:
  - Created _quarto.yml
  - Created index.qmd
  - Created intro.qmd
  - Created summary.qmd
  - Created references.qmd
  - Created cover.png
  - Created references.bib

readLines(file.path(parent_dir, "blop", "_quarto.yml"))

[1] "project:"                         
 [2] "  type: book"                     
 [3] ""                                 
 [4] "book:"                            
 [5] "  title: \"blop\""                
 [6] "  author: \"MYaseen\""            
 [7] "  date: \"6/16/2023\""            
 [8] "  chapters:"                      
 [9] "    - index.qmd"                  
[10] "    - intro.qmd"                  
[11] "    - summary.qmd"                
[12] "    - references.qmd"             
[13] ""                                 
[14] "bibliography: references.bib"     
[15] ""                                 
[16] "format:"                          
[17] "  html:"                          
[18] "    theme: cosmo"                 
[19] ""                                 
[20] "babelquarto:"                     
[21] "  mainlanguage: 'en'"             
[22] "  languages: ['es', 'fr']"        
[23] "title-es: title in es"            
[24] "title-fr: title in fr"            
[25] "description-es: description in es"
[26] "description-fr: description in fr"
[27] "author-es: author in es"          
[28] "author-fr: author in fr"          
[29] "lang: en"       



dir_tree(file.path(parent_dir, "blop"))
D:/2023-06-23_babelquarto/blop
├── cover.png
├── index.es.qmd
├── index.fr.qmd
├── index.qmd
├── intro.es.qmd
├── intro.fr.qmd
├── intro.qmd
├── references.bib
├── references.es.qmd
├── references.fr.qmd
├── references.qmd
├── summary.es.qmd
├── summary.fr.qmd
├── summary.qmd
└── _quarto.yml

library(quarto)
quarto_render("./blop")

which renders only four .qmd document as shown below:

I believe that the provided [tag:R] should include all three books. However, I'm concerned that I may be overlooking something simple.

Expected Output
The expected output is here.

You need to use babelquarto::render_book, instead of quarto::quarto_render,

babelquarto::render_book("./blop")

It would create the corresponding files for other languages,

> fs::dir_tree("./blop/_book", recurse=FALSE)
./blop/_book
├── es
├── fr
├── index.html
├── intro.html
├── references.html
├── search.json
├── site_libs
└── summary.html

<hr>

<hr>

Issue with Hosting the Multilingual Quarto book with Github-Pages

babelquarto::render_book generates the links for multilingual versions in html files (in index.html, intro.html etc) as the following (excerpt from index.html),

<li id="language-link-li-es">
<i class="bi bi-globe2"></i><span> </span><a class="toc-action" href="/es/index.es.html" id="language-link-es">Version in ES</a>
</li>
<li id="language-link-li-fr">
<i class="bi bi-globe2"></i><span> </span><a class="toc-action" href="/fr/index.fr.html" id="language-link-fr">Version in FR</a>
</li>

where the links are,

/es/index.es.html
/fr/index.fr.html

Similarly from the index.es.html,

/index.html
/fr/index.fr.html

And as per my understanding, due to the forward slash in front of these relative links, navigation between multilingual versions does not work well with Github pages.

Solution

Here's my naive approach to solving this problem.

I have written the following function that receives the _book directory and goes through each HTML file in that directory and add a base URL in front of these language links where the base-url would be the url of github page like https://<user-name>.github.io/<repo-name>.

library(rvest)
library(fs)

add_base_url <- function(file_path, base_link) {
  html_content <- rvest::read_html(file_path)
  lang_links <- html_content %>% 
    rvest::html_elements('a[id*="language-link"]') %>% 
    rvest::html_attr("href")
  lang_link_with_baseurl <- paste0(base_link, lang_links)
  raw_html <- paste(readLines(file_path), collapse="\n")
  for (i in seq_along(lang_links)) {
    raw_html <- sub(lang_links[i], lang_link_with_baseurl[i], raw_html)
  }
  return(raw_html)
}

create_abs_lang_link <- function(path, base_link) {
  html_files_path <- fs::dir_ls(path, recurse = TRUE, glob="*.html")
  for (file_path in html_files_path) {
    edited_raw_html <- add_base_url(file_path, base_link)
    writeLines(edited_raw_html, file_path)
  }
}

Steps:

1. Render and generate the multilingual quarto book,

   babelquarto::render_book("./blop")
   

   This will generate a directory _book with the rendered html files

2. Then pass the _book directory to the function create_abs_lang_link.

   create_abs_lang_link("_book", base_link = "https://<user-name>.github.io/<repo-name>")
   

3 . Then host this _book directory in github pages. The links should work now.

Here's an example github repository and link to Quarto Multilinuage Book.