mirror of
https://github.com/hobbesjaap/blogdown-shortcodes.git
synced 2024-11-21 10:13:00 +00:00
moved to Gitea
This commit is contained in:
parent
b516ab26a8
commit
14f771ce36
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
|||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2023 Jaap Marsman
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
61
README.md
61
README.md
@ -1,62 +1,3 @@
|
|||||||
# blogdown-shortcodes
|
# blogdown-shortcodes
|
||||||
|
|
||||||
- 📝 I still need to improve the example.Rmd files and tidy up the .R files. So these shortcodes work, but do require a bit of manual tinkering to work outside of my own websites. I'll fix this for a 1.0 release! Currently the ID attribute doesn't actually link, but they're helpful since the shortcode pulls from the row number, so I've manually written my IDs to correspond to that.
|
I have moved all code and future development to my self-hosted Gitea: [click here to view this repo there](https://gitea.defiantjc.synology.me/jaap/blogdown-shortcodes).
|
||||||
|
|
||||||
A (growing) collection of [Blogdown](https://github.com/rstudio/blogdown) shortcodes I've written myself in R.
|
|
||||||
|
|
||||||
If you are completely unfamiliar with Blogdown, R and/or RStudio, then you may struggle to use this. I would advise you to have a go at setting up a very basic Blogdown website and playing around with that first. If you're then interested in some of these shortcodes, come back here and you'll be able to understand this much better.
|
|
||||||
|
|
||||||
**Make sure you have library(tidyverse) installed before trying to use these shortcodes. Otherwise you can't read the CSV file. Whilst I'm sure readr works as well, for dev purposes I'm going with the full package in case I want to add functionality later.**
|
|
||||||
|
|
||||||
Published using the MIT license, so you can do with this whatever you want. I do appreciate acknowledgements, so feel free to do so! Starring the repo greatly helps, if you're in the mood. 💫
|
|
||||||
|
|
||||||
<!-- In Dutch, you can see these shortcodes in action on [my education website](https://www.lerenleukermaken.nl/). -->
|
|
||||||
|
|
||||||
A brief explanation with instructions on each shortcode is given below.
|
|
||||||
|
|
||||||
## Pinterest
|
|
||||||
|
|
||||||
This shortcode makes it easy to add a "Pin It" button underneath an image you put on your Blogdown site. It requires that you call the pinterest.R shortcode from your Rmd file. You maintain all your data (image used, alt-text used) in a separate CSV file and call your Pin by ID. The Example.Rmd shows you how to do this.
|
|
||||||
|
|
||||||
It requires you to put the Pinterest .js stuff from their Developer site in your header-html. Depending on the theme you're using, you have to figure that part out yourself. I use [PaperMod](https://github.com/adityatelange/hugo-PaperMod) myself so it goes into **extend_head.html** and includes the following:
|
|
||||||
|
|
||||||
```
|
|
||||||
<script
|
|
||||||
type="text/javascript"
|
|
||||||
async defer
|
|
||||||
src="//assets.pinterest.com/js/pinit.js">
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
Install steps:
|
|
||||||
|
|
||||||
1. Put the pinterest.R file somewhere your Rmd can get to it (your /static/ folder would be best)
|
|
||||||
2. Put your main site URL in pinterest.R on line 16 where it says "https://www.your-site-url-here.com" without a trailing slash. This to help Pinterest grab the correct image (it seems to struggle otherwise).
|
|
||||||
3. Use and modify the R code listed in Example.Rmd to call the pinterest.R file from your blog post / page
|
|
||||||
4. Make sure your CSV file contains a correct image link + alt-text description for the image you want to pin
|
|
||||||
5. Copy & modify the pinterest.css file to your liking. It helps to centrally manage your pin image sizes. You may not want this, so feel free to remove/adjust.
|
|
||||||
|
|
||||||
You can then call the pinterest-image in your Rmd file as follows, where **xx** equals the ID for your download:
|
|
||||||
|
|
||||||
```
|
|
||||||
`r pinterest(xx)`
|
|
||||||
```
|
|
||||||
|
|
||||||
## Downloads
|
|
||||||
|
|
||||||
A very basic downloads manager. It doesn't depend on a database to function, but on a CSV file. Examples included. By linking your PDF/ZIP/DOCX downloads into the CSV file, you are able to easily call up a nice-looking download-box anywhere on any page linking to your resource. It includes the option to have a screenshot (max height/width set to 150px) for your file too.
|
|
||||||
|
|
||||||
It's still a bit brute-force at the moment, but you can also easily group downloads together and offer all your documents in one centralised overview. Once I've figured out how to loop through a function more effectively, I'll update the code! 😎
|
|
||||||
|
|
||||||
Install steps:
|
|
||||||
|
|
||||||
1. Put the downloads.R file somewhere your Rmd can get to it (your /static/ folder would be best)
|
|
||||||
2. Use and modify the R code listed in Example.Rmd to call the pinterest.R file from your blog post / page
|
|
||||||
2. Put the lists.css file somewhere your theme tells you to
|
|
||||||
3. Make sure your CSV file contains correct IDs, links, descriptions & images for all your downloads
|
|
||||||
|
|
||||||
You can then call the download in your Rmd file as follows, where **xx** equals the ID for your download:
|
|
||||||
|
|
||||||
```
|
|
||||||
`r download(xx)`
|
|
||||||
```
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
library(tidyverse)
|
|
||||||
|
|
||||||
downloads <- read_csv("../../static/downloads.csv")
|
|
||||||
|
|
||||||
download <- function(x) {
|
|
||||||
download_selection <- downloads[x, ]
|
|
||||||
download_url <- toString(select(download_selection, 2))
|
|
||||||
download_img <- toString(select(download_selection, 3))
|
|
||||||
download_title <- toString(select(download_selection, 4))
|
|
||||||
download_description <- toString(select(download_selection, 5))
|
|
||||||
start_url <- "<a href=\""
|
|
||||||
end_url <- "\" target=\"_blank\" >"
|
|
||||||
end_link <- "</a>"
|
|
||||||
|
|
||||||
start_img <- "<img src=\""
|
|
||||||
end_img <- "\">"
|
|
||||||
|
|
||||||
new_line <- "<br>"
|
|
||||||
|
|
||||||
ul_li_begin <- "<ul class=\"uldownload\"><li class=\"lidownload\">"
|
|
||||||
end_ul_li <- "</li></ul>"
|
|
||||||
|
|
||||||
concatenated <- paste0(ul_li_begin,start_url,
|
|
||||||
download_url,
|
|
||||||
end_url,
|
|
||||||
download_title,
|
|
||||||
start_img,
|
|
||||||
download_img,
|
|
||||||
end_img,
|
|
||||||
end_link,
|
|
||||||
new_line,
|
|
||||||
download_description,
|
|
||||||
end_ul_li)
|
|
||||||
return(concatenated)
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
.uldownload {
|
|
||||||
list-style-type: none;
|
|
||||||
background-color: #efefef;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
border: #F5F5F5 3px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lidownload {
|
|
||||||
list-style-type: "";
|
|
||||||
background-color: #dfdfdf;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
border: #F5F5F5 3px solid;
|
|
||||||
height: 155px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lidownload a, .lidownload p {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lidownload img {
|
|
||||||
background-color: #dfdfdf;
|
|
||||||
float: left;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
border: #F5F5F5 3px solid;
|
|
||||||
max-width: 150px;
|
|
||||||
max-height: 150px;
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
yaml: here
|
|
||||||
---
|
|
||||||
|
|
||||||
```{r, include=FALSE}
|
|
||||||
source("../../static/download.R", local = knitr::knit_global())
|
|
||||||
```
|
|
||||||
|
|
||||||
# This example isn't perfect
|
|
||||||
|
|
||||||
You need to make sure the source-link points to where you have the R file located. This one is in the main static-page, but depends on the Rmd file being in /content/blog/
|
|
||||||
|
|
||||||
`r download(1)`
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
id,pdf_url,img_url,title,description
|
|
||||||
001,"/your_pdf_or_zip_or_whatever_here.pdf","/your_image_screenshot_here.png", Title for your download,Description for your download
|
|
||||||
|
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
yaml: here
|
|
||||||
---
|
|
||||||
|
|
||||||
```{r, include=FALSE}
|
|
||||||
source("../../static/pinterest.R", local = knitr::knit_global())
|
|
||||||
```
|
|
||||||
|
|
||||||
# This example isn't perfect
|
|
||||||
|
|
||||||
You need to make sure the source-link points to where you have the R file located. This one is in the main static-page, but depends on the Rmd file being in /content/blog/
|
|
||||||
|
|
||||||
`r pinterest(1)`
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
id,png,alt-text
|
|
||||||
001,/img_url_here.png,Nice descriptive alt-text here that Pinterest will use to scrape - just don't use commas
|
|
||||||
|
@ -1,28 +0,0 @@
|
|||||||
library(tidyverse)
|
|
||||||
|
|
||||||
pins <- read_csv("../../static/pins.csv")
|
|
||||||
|
|
||||||
pinterest <- function(x) {
|
|
||||||
print("Calling the Pinterest function")
|
|
||||||
|
|
||||||
pinterest_selection <- pins[x, ]
|
|
||||||
pin_img_url <- toString(select(pinterest_selection, 2))
|
|
||||||
pin_alt_text <- toString(select(pinterest_selection, 3))
|
|
||||||
|
|
||||||
start_pin <- "<p align=\"center\"><img src=\""
|
|
||||||
pin_img_end <- "\" alt=\""
|
|
||||||
pin_alt_end <- "\" class=\"pintimage\">"
|
|
||||||
pin_html <- "<a href=\"https://www.pinterest.com/pin/create/button/\" data-pin-do=\"buttonPin\" data-pin-media=\"https://www.your-site-url-here.com"
|
|
||||||
pin_html_end <- "\" data-pin-tall=\"true\"></a></p>"
|
|
||||||
return_pinterest <- paste0(start_pin,
|
|
||||||
pin_img_url,
|
|
||||||
pin_img_end,
|
|
||||||
pin_alt_text,
|
|
||||||
pin_alt_end,
|
|
||||||
pin_html,
|
|
||||||
pin_img_url,
|
|
||||||
pin_html_end
|
|
||||||
)
|
|
||||||
print(return_pinterest)
|
|
||||||
return(return_pinterest)
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
.pintimage {
|
|
||||||
max-height: 480px;
|
|
||||||
max-width: 275px;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user