https://github.com/shafayetShafee/downloadthis

A Quarto shortcode extension to embed download buttons in HTML document
https://github.com/shafayetShafee/downloadthis

quarto quarto-extension quarto-pub quarto-shortcode quartopub

Last synced: 2 months ago
JSON representation

A Quarto shortcode extension to embed download buttons in HTML document

• Host: GitHub
• URL: https://github.com/shafayetShafee/downloadthis
• Owner: shafayetShafee
• License: mit
• Created: 2023-01-30T18:09:43.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-19T16:11:57.000Z (almost 2 years ago)
• Last Synced: 2024-05-08T08:32:04.695Z (9 months ago)
• Topics: quarto, quarto-extension, quarto-pub, quarto-shortcode, quartopub
• Language: Lua
• Homepage: https://shafayetshafee.github.io/downloadthis/example.html
• Size: 996 KB
• Stars: 39
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Downloadthis Extension For Quarto

This extension shortcode provides support for adding download buttons in the html files with attached small image/pdf/txt/csv files using shortcode `{{< downloadthis >}}`.

[`View Live Demo`](https://shafayetshafee.github.io/downloadthis/example.html)

## Installing

```bash

quarto add shafayetShafee/downloadthis

```

This will install the extension under the `_extensions` subdirectory.

If you're using version control, you will want to check in this directory.

## Using

To embed a file downloadable from the rendered html document, use the `{{< downloadthis >}}` shortcode. For example, 

```

{{< downloadthis image.png >}}

```

would create a download button [styled with bootstrap](https://getbootstrap.com/docs/5.3/components/buttons/#examples) with which `file.png` can be downloaded.

### Options

There are six additional arguments you can specify for this shortcode, which are,

- **`dname`** : The filename (without file extension!) which will be assigned to the downloaded file (default value is `file`)

- **`label`** : Button label (default is `Download`).

- **`icon`**: [Bootstrap Icon](https://icons.getbootstrap.com/) for the button (default is [`download`](https://icons.getbootstrap.com/icons/download/)).

- **`type`**: [Bootstrap button styles](https://getbootstrap.com/docs/5.3/components/buttons/#examples), which are `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `light`, `dark`,

`light` (default value is `default`).

- **`class`**: CSS class to be assigned to this button.

- **`id`**: CSS id to be assigned to this button.

An example using all these arguments as follows,

```

{{< downloadthis files/mtcars.csv dname="mtcars.csv" label="Download the mtcars data" icon="database-fill-down" type="info" >}}

```

where `mtcars.csv` is in a folder named `files` and the `files` folder is in the same folder with source `.qmd` file.

### Styling Buttons

Using the option `class` or `id`, it is very simple to style the button using CSS.

See the [example_styling.qmd](example_styling.qmd) for an example and the rendered [`html output`](https://shafayetshafee.github.io/downloadthis/example_styling.html)

## Example

Here is the source code for examples: [example.qmd](example.qmd) and the rendered html output: [example.html](https://shafayetshafee.github.io/downloadthis/example.html)

## Acknowledgement

This shortcode extension is inspired by the R package [`{downloadthis}`](https://fmmattioni.github.io/downloadthis/index.html).