Use data columns if available

[gadenbuie]

This PR addresses #40 by pulling columns from the data input, if they are available and if the user hasn't otherwise specified a value. This makes it easier to pipe or pass data into cards() if you do a little extra legwork to put the data in the right format.

Note that this PR depends on #38 because bs4cards doesn't otherwise work for me locally. I can rebase this PR when that issue is resolved, but I thought I'd share this implementation for feedback.

Here's an example taken from the docs. If we modify galleries and write it into a CSV file...

pkgload::load_all()
library(tidyverse)

gallery_csv <- tempfile(fileext = ".csv")

galleries %>%
  rename(title = long_name, link = gallery_url, image = image_url) %>%
  mutate(footer = paste("posted:", date)) %>%
  slice_head(n = 2) %>%
  write_csv(gallery_csv)

...we can read the gallery.csv file right into cards().

gallery <- gallery_csv %>% read_csv() %>% cards()
#> Rows: 2 Columns: 8
#> ── Column specification ────────────────────────────────────────────────────────
#> Delimiter: ","
#> chr  (7): title, short_name, blurb, paintbrushes, image, link, footer
#> date (1): date
#> 
#> ℹ Use `spec()` to retrieve the full column specification for this data.
#> ℹ Specify the column types or set `show_col_types = FALSE` to quiet this message.

And here's the generated HTML:

cat(format(gallery))
#> <div>
#>   <div class="row p-0 row-cols-1 row-cols-md-2 row-cols-lg-3" style="margin-left: -.2rem; margin-right: -.2rem; margin-top: 1rem; margin-bottom: 1rem; ">
#>     <div class="card bg-transparent m-0 border-0 collapse.show bs4cards-blahblahblah " style="padding: .2rem ; border-width: 0; border-radius: 1 1 1 1 ;">
#>       <a href="https://art.djnavarro.net/gallery/ash" style="color: inherit;">
#>         <img src="https://bs4cards.djnavarro.net/image/ash.jpg" class="card-img-top" style="border-style:solid; border-color:inherits; border-width:1 1 0 1; border-radius: 1 1 0 0 ;"/>
#>       </a>
#>       <div class="card-body justify-content-end m-0 p-0" style="visibility: visible; background-color: inherits; border-style:solid; border-color:inherits; border-width:1px; border-radius: 0 0 0 0 ;">
#>         <a href="https://art.djnavarro.net/gallery/ash">
#>           <h5 class="card-title my-auto px-3 pt-3 pb-3">Ash Cloud and Blood</h5>
#>         </a>
#>       </div>
#>       <div class="card-footer small text-muted px-3 py-auto" style="border-style:solid; border-color:inherits; border-width:0 1 1 1; border-radius: 0 0 1 1 ;">posted: 2021-07-17</div>
#>     </div>
#>     <div class="card bg-transparent m-0 border-0 collapse.show bs4cards-blahblahblah " style="padding: .2rem ; border-width: 0; border-radius: 1 1 1 1 ;">
#>       <a href="https://art.djnavarro.net/gallery/ghosts" style="color: inherit;">
#>         <img src="https://bs4cards.djnavarro.net/image/ghosts.jpg" class="card-img-top" style="border-style:solid; border-color:inherits; border-width:1 1 0 1; border-radius: 1 1 0 0 ;"/>
#>       </a>
#>       <div class="card-body justify-content-end m-0 p-0" style="visibility: visible; background-color: inherits; border-style:solid; border-color:inherits; border-width:1px; border-radius: 0 0 0 0 ;">
#>         <a href="https://art.djnavarro.net/gallery/ghosts">
#>           <h5 class="card-title my-auto px-3 pt-3 pb-3">Ghosts on Marble Paper</h5>
#>         </a>
#>       </div>
#>       <div class="card-footer small text-muted px-3 py-auto" style="border-style:solid; border-color:inherits; border-width:0 1 1 1; border-radius: 0 0 1 1 ;">posted: 2021-01-09</div>
#>     </div>
#>   </div>
#> </div>

[djnavarro]

I really like this functionality, thanks!