Add README and documentation

gadenbuie · Aug 1, 2020 · a8b282e · a8b282e
1 parent caa9c88
commit a8b282e
Show file tree

Hide file tree

Showing 3 changed files with 795 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,17 @@ Add an _applause button_ to your web pages, blog posts, and Shiny apps. Based en
 
 The other goal of this project is to demonstrate how to use HTML dependencies with the [htmltools] package.
 
+## Installation
+
+```r
+# install.packages("remotes")
+
+remotes::install_github("gadenbuie/applause")
+```
+
+## Demonstration and Usage
+
+[See `applause::button()` in action](https://gadenbuie.github.io/applause).
 
 ## Dev Log
 
@@ -181,3 +192,11 @@ htmltools::tagList(
 ```
 
 (Sidenote: at this point I'm beginning to question calling the function `button()`, but I think it's okay. This package will have only two exposed functions, and I'll recommend that most people call the fully qualified function name: `applause::button()`.)
+
+### That's it!
+
+The package now provides an HTML dependency and a custom Applause button component that can be dropped into an R Markdown document, a blogdown page, a Shiny app, or a xaringan presentation.
+
+The last step is to add a demonstration page and to update the README!
+
+👏 👏 👏
diff --git a/docs/index.Rmd b/docs/index.Rmd
@@ -0,0 +1,150 @@
+---
+title: "applause::button()"
+subtitle: Zero-Configuration Button for Adding Applause/Claps/Kudos to Web Pages
+author: "&#x1F44F; &#x1F44F; &#x1F44F;"
+date: '<a href="https://pkg.garrickadenbuie.com/applause">pkg.garrickadenbuie.com/applause</a>'
+output: 
+  cleanrmd::html_document_clean:
+    theme: new.css
+---
+
+[applause-button]: https://applause-button.com/
+[ColinEberhardt]: https://github.com/ColinEberhardt/
+[htmltools]: https://github.com/ColinEberhardt/
+[npm]: https://www.npmjs.com/
+
+```{css echo=FALSE}
+:root {
+  --gh-icon-bg: #4691ac;
+}
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --gh-icon-bg: #436f7f;
+  }
+}
+```
+
+<a href="https://github.com/gadenbuie/applause" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--gh-icon-bg); color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = TRUE)
+```
+
+```{css echo=FALSE}
+applause-button .count-container {
+	color: var(--nc-ac-tx);
+}
+```
+
+```{r echo=FALSE}
+applause::button(
+  color="var(--nc-ac-tx)", 
+  style="color:var(--nc-ac-tx);font-size:14px;margin:30px 20px 20px 20px;float:left;"
+)
+```
+
+<blockquote style="font-size: 1.25em;color:var(--nc-tx-2);padding-left:85px;">Add an applause button to your blog posts, package documentation, slides and more!</blockquote>
+
+&#x1F64F; Based entirely on the awesome [applause-button] library by [Colin Eberhardt][ColinEberhardt].
+
+&#x1F4D3; The other goal of this project is to demonstrate how to use HTML dependencies with the [htmltools] package. For a walk-through of how this package was built, check out the [Dev Log](https://github.com/gadenbuie/applause#dev-log).
+
+## Installation
+
+```r
+# install.packages("remotes")
+remotes::install_github("gadenbuie/applause")
+```
+
+## Usage
+
+The package only has one function, so don't bother attaching it with `library()`.
+Just call `applause::button()` wherever you need one.
+
+### R Markdown, blogdown, xaringan, etc.
+
+````
+```{r applause-button, echo=FALSE}`r ''`
+applause::button(
+  color = "#0C4047",
+  width = "100px"
+)
+```
+````
+
+### Shiny
+
+```{r eval=FALSE}
+library(shiny)
+
+ui <- fluidPage(
+  h2("My Awesome Shiny App"),
+  applause::button()
+)
+
+server <- function(input, output, session) {
+  # ...
+}
+
+shinyApp(ui, server)
+```
+
+### Options
+
+```{css echo=FALSE}
+.tbl-opts > tbody > tr > td:first-child {
+  min-width: max-content;
+}
+```
+
+<table class="tbl-opts">
+<colgroup>
+<col style="width: 20%;">
+<col style="width: 80%;">
+</colgroup>
+<tbody>
+<tr class="odd">
+<td style="text-align: right;"><code>...</code></td>
+<td style="text-align: left;">Additional attributes for the <code>&lt;applause-button&gt;</code> tag</td>
+</tr>
+<tr class="even">
+<td style="text-align: right;"><code>style</code></td>
+<td style="text-align: left;">Inline CSS styles</td>
+</tr>
+<tr class="odd">
+<td style="text-align: right;"><code>width</code></td>
+<td style="text-align: left;">The width and height of the applause button, for best results the button should be square.</td>
+</tr>
+<tr class="even">
+<td style="text-align: right;"><code>color</code></td>
+<td style="text-align: left;">The color of the button as a valid CSS color</td>
+</tr>
+<tr class="odd">
+<td style="text-align: right;"><code>multiclap</code></td>
+<td style="text-align: left;">Should users be allowed to clap more than once?</td>
+</tr>
+<tr class="even">
+<td style="text-align: right;"><code>url</code></td>
+<td style="text-align: left;">The URL used to track total claps, if unset the current referring page URL will be used</td>
+</tr>
+<tr class="odd">
+<td style="text-align: right;"><code>url_api</code></td>
+<td style="text-align: left;">A URL for a custom Applause button back-end API, see <a href="https://github.com/ColinEberhardt/applause-button-server" class="uri">https://github.com/ColinEberhardt/applause-button-server</a> for an example.</td>
+</tr>
+</tbody>
+</table>
+
+
+```{css echo=FALSE}
+footer {
+	border-top: 2px solid var(--nc-bg-3);
+	margin: 2em 0;
+	padding-top: 1em;
+	text-align: center;
+}
+```
+
+<footer>
+Garrick Aden-Buie  
+[www.garrickadenbuie.com](https://www.garrickadenbuie.com)
+</footer>