I have something like this and I want to add an image.png as an icon. Where the image icon should have the same width and length as fontawesome icons. Many thaks in advance.
name: my-website
output_dir: docs
navbar:
title: My Website
left:
- text: Home
href: index.html
- text: About
href: about.html
- text: Readings
icon: DIRECTORY.OF.MY.IMAGE.PNG
menu:
- text: Module 1
icon: fa-pepper-hot # ICON IN THE DROPDOWN MENU IS NOT WORKING.
href: readings-module1.html
- text: Module 2
href: readings-module2.html
- text: Module 3
href: readings-module3.html
- text: Module 4
href: readings-module4.html
output:
html_document:
theme: yeti
You will have to add your custom CSS that has rules to replicate fontawesome icons settings for your PNG image.
I am creating a distill website using rmarkdown and would like to add a submenu in the navigation bar. I found this feature request/issue on GitHub but have not been able to find a solution.
With the below _site.yml and index.Rmd the submenu text appears in the menu dropdown but is greyed-out and not clickable/selectable.
_site.yml:
name: "submenuTest"
title: "Submenu test"
description: |
Submenu test
output_dir: "_site"
navbar:
right:
- text: "Home"
href: index.html
- text: 'Menu'
menu:
- text: 'Page'
href: page.html
- text: 'Submenu'
menu:
- text: 'Sub Page'
href: subpage.html
output: distill::distill_article
index.Rmd:
---
title: "Submenu test"
description: |
Welcome to the website. I hope you enjoy it!
site: distill::distill_website
---
# here is my page content
In a plain rmarkdown .html (can use the above .yml and .Rmd examples but without the output: distill::distill_article and site: distill::distill_website lines) renders with a workable submenu.
I am trying to embed social links on a flexdashboard and I get the following:
---
title: "Dashboard"
output:
flexdashboard::flex_dashboard:
storyboard: true
css: ["default", "assets/css/my-theme.css", "assets/css/my-fonts.css"]
orientation: columns
navbar:
- { icon: "fa-github", href: "https://github.com/", align: center }
- { icon: "fa-youtube", href: "https://www.youtube.com/", align: center}
- { icon: "fa-linkedin", href: "https://www.linkedin.com/", align: center}
vertical_layout: fill
theme:
version: 3
bootswatch: yeti
runtime: shiny
---
Is there a way to properly align it to the right side? Mine appears to be on a newline.
I came from this post: How to define links for social network icons on flexdashboard?
Using bookdown we are able to download different file formats from a download button, e.g.
---
bookdown::gitbook:
download:
- ["test.pdf", "PDF File"]
- ["test.html", "HTML File"]
- ["test.csv", "Data test.csv"]
---
In quarto, we only have the options for downloads: (one or more of pdf, epub, and docx). Has somebody an idea how to include data (e.g. .csv or .qs) via a download button to include on navbar or preferably sidebar?
Edit 1: After the great answer of #shafee, here is how my book at the moment looks like and where I would like to add the option to download the data.
By clicking on the downarrow, a dropdown menu opens and there I would like to add the option (optimal would be more than one, i.e. many datasets) "Download Data". Here is an example .yml:
---
project:
type: book
book:
title: "Quarto Book"
chapters:
- index.qmd
- intro.qmd
sidebar:
pinned: true
repo-url: https://www.rstudio.com/
search:
location: sidebar
type: textbox
downloads: [pdf, epub]
format:
html:
# include-after-body: custom.html
theme: cosmo
---
Edit 2: There could be a way using the tools option in the sidebar. Maybe someone has an idea how to correctly generate an URL for the data such that it will be downloaded directly.
sidebar:
pinned: true
tools:
- icon: save
menu:
- text: Data XLSX
url: ymlthis::yml_params_code(browseURL('data/mtcars.xlsx'))
- text: Data CSV
url: ymlthis::yml_params_code(browseURL('data/mtcars.csv'))
Updated Answer (Corresponding To OP's 2nd Edit)
The concept remains the same. Here we are just replacing those menu items under the tools with the button created from index.qmd file using javascript.
If you need to add more csv or xlsx data, just add the corresponding code for creating button inside the .download_btn pandoc divs and add more - text: "" and url: "#" in the _quarto.yml file.
_quarto.yml
project:
type: book
book:
title: "Quarto Book"
author: "Jane Doe"
date: "9/29/2022"
chapters:
- index.qmd
- intro.qmd
downloads: [pdf, epub]
sidebar:
pinned: true
tools:
- icon: save
menu:
- text: ""
url: "#"
- text: ""
url: "#"
- text: ""
url: "#"
repo-url: https://www.rstudio.com/
search:
location: sidebar
type: textbox
format:
html:
include-after-body: custom.html
theme: cosmo
index.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 20px;
color: black;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: grey;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "mtcars.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
iris %>%
download_this(
output_name = "Iris data set",
output_extension = ".csv",
button_label = "iris.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
```{r}
#| echo: false
palmerpenguins::penguins %>%
download_this(
output_name = "penguins data set",
output_extension = ".csv",
button_label = "penguins.csv",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
custom.html
<script>
var all_btns = document.querySelectorAll(".download_btn a");
var data_nav = document.querySelectorAll('[aria-labelledby="sidebar-tool-dropdown-0"] li')
for (let i = 0; i < data_nav.length; i++) {
let li = document.createElement("li");
li.appendChild(all_btns[i]);
data_nav[i].parentElement.replaceChild(li, data_nav[i])
}
</script>
Old Answer
Since so far there's no default option from Quarto to add buttons for downloading csv data, as a workaround we can add a download button in the Book navbar with the help of {downloadthis} R-package and using a few line of javascript code.
So at first, add the code for creating button and a bit css to style the button's appearance in the index.qmd file with echo: false.
index.qmd
# Preface {.unnumbered}
This is a Quarto book.
::: {.download_btn}
```{css}
#| echo: false
.btn-default,
.btn-default:hover,
.btn-default:active {
font-size: 24px;
padding: 0px;
margin-top: -5px;
color: white;
background-color: transparent;
border-color: transparent;
}
.btn-default:hover {
color: whitesmoke;
transition: 0.2s;
}
```
```{r}
#| echo: false
library(downloadthis)
mtcars %>%
download_this(
output_name = "mtcars data set",
output_extension = ".csv",
button_label = "",
button_type = "default",
has_icon = TRUE,
icon = "fa fa-file-csv"
)
```
:::
Now by default, the button will be created in the book body of the index page. But we want this in the book navbar. To do that, we can add a save icon with href: "#" as a placeholder in the right side of the navbar, and then using javascript we can replace this save icon with our created download button.
Now to add js code, create an html file custom.html and put these lines of codes in that file and then add this custom.html file with include-after-body: custom.html in _quarto.yml.
custom.html
<script>
var btn = document.querySelector(".download_btn");
var nav = document.querySelector(".navbar-nav .bi-save");
nav.parentElement.replaceChild(btn, nav);
</script>
_quarto.yml
project:
type: book
book:
title: "Quarto Book"
chapters:
- index.qmd
- intro.qmd
navbar:
right:
- icon: save
href: "#"
format:
html:
include-after-body: custom.html
theme: cosmo
Now the rendered book navbar looks like,
Refer to the downloadthis package documentation to know about various options for adding buttons to download csv or xlsx files or any R-object as rds file and to know about how to style the buttons.
Disclaimer: I am just an R-user and know just a little bit javascript. So anyone, please feel free to edit this answer with more efficient js code. :-)
A solution without an external package works very similar to my 2nd edit (assuming that the data is stored in folder data:
sidebar:
pinned: true
tools:
- icon: save
menu:
- text: Data XLSX
url: "data/mtcars.xlsx"
- text: Data CSV
url: "data/mtcars.csv"
I have a navbar defined in the _site.yml file:
name: "Rmarkdown with navbar"
output_dir: "."
navbar:
title: "Data Analysis"
type: inverse
right:
- text: "Abstract"
href: https://www.stackoverflow.com
- text: "Data Preparing"
href: https://www.stackoverflow.com
- text: "Related Plots"
href: https://www.stackoverflow.com
- text: "Player Selection"
href: https://www.stackoverflow.com
- text: "Conclusion"
href: https://www.stackoverflow.com
output:
html_document:
theme: spacelab
highlight: textmate
I would like to be able to navigate to each section in my main rmd file, each section is defined as:
<section id="name-of-section">
I tried the following but it doesn't work (in the _site.yml file).
right:
- text: "Abstract"
href: #abstract
I would really appreciate any help. It would be even better if I could add navigation animation when clicking (I know it's achievable using jQuery in websites).
Have you try just adding titles and subtitles to your markdown with '#' and "##' and then search for any section in "online document" (Crtl + Shift + "O")
Or you want a navigation panel on the markdown's output document?
If this is the case, have you try something like this at the beginning of your markdown?
---
title: "El Code-Book de Guibi"
output:
html_document:
toc: yes
toc_depth: 5
toc_float: yes
pdf_document:
toc: yes
toc_depth: '5'
editor_options:
markdown:
wrap: 72
---
In my case, it shows output like this: