{"id":14068065,"url":"https://github.com/gadenbuie/applause","last_synced_at":"2025-07-02T20:08:14.711Z","repository":{"id":46249829,"uuid":"284290827","full_name":"gadenbuie/applause","owner":"gadenbuie","description":":clap: Zero-Configuration Applause/Claps/Kudos Button for R Markdown and Shiny apps","archived":false,"fork":false,"pushed_at":"2021-11-04T03:59:16.000Z","size":53,"stargazers_count":13,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T11:36:24.158Z","etag":null,"topics":["blogdown","htmltools","htmlwidget","learning-by-doing","rmarkdown","shiny","thanks","xaringan"],"latest_commit_sha":null,"homepage":"https://pkg.garrickadenbuie.com/applause","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gadenbuie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-01T15:52:24.000Z","updated_at":"2024-09-05T11:23:57.000Z","dependencies_parsed_at":"2022-08-31T02:11:24.578Z","dependency_job_id":null,"html_url":"https://github.com/gadenbuie/applause","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gadenbuie/applause","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fapplause","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fapplause/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fapplause/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fapplause/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gadenbuie","download_url":"https://codeload.github.com/gadenbuie/applause/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2Fapplause/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263208050,"owners_count":23430676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blogdown","htmltools","htmlwidget","learning-by-doing","rmarkdown","shiny","thanks","xaringan"],"created_at":"2024-08-13T07:05:55.359Z","updated_at":"2025-07-02T20:08:14.689Z","avatar_url":"https://github.com/gadenbuie.png","language":"R","funding_links":[],"categories":["R"],"sub_categories":[],"readme":"\n# applause\n\n\u003c!-- badges: start --\u003e\n\u003c!-- badges: end --\u003e\n\n[applause-button]: https://applause-button.com/\n[ColinEberhardt]: https://github.com/ColinEberhardt/\n[htmltools]: https://github.com/ColinEberhardt/\n[npm]: https://www.npmjs.com/\n\nAdd an _applause button_ to your web pages, blog posts, and Shiny apps. Based entirely on the awesome [applause-button] library by [Colin Eberhardt][ColinEberhardt].\n\nThe other goal of this project is to demonstrate how to use HTML dependencies with the [htmltools] package.\n\n## Installation\n\n```r\n# install.packages(\"remotes\")\nremotes::install_github(\"gadenbuie/applause\")\n```\n\n## Demonstration and Usage\n\nSkip `library()` and just add an applause button wherever you want one with\n\n```r\napplause::button()\n```\n\n[Check out the documentation](https://gadenbuie.github.io/applause) to see `applause::button()` in action and for [additional options](https://gadenbuie.github.io/applause/#options).\n\n## Dev Log\n\n### Package Init\n\n[\u0026#x1F4D1; Initial commit: d92bd3](https://github.com/gadenbuie/applause/commit/d92bd3780221d29a097046156660757aaf361442)\n\n```r\nlibrary(usethis)\ncreate_package(\"applause\")\nuse_readme_md()\n```\n\nCreate a directory in `inst` to hold the applause button dependencies. [\u0026#x1F4D1; Changes: 8ee9f3](https://github.com/gadenbuie/applause/commit/8ee9f38d12f88b90ddd8159c4f504a72312eb9dd)\n\n\n```r\ndir.create(\"inst/applause-button\", recursive = TRUE)\n```\n\n### Setup npm to import the JavaScript package\n\nIn a terminal, initialize an [npm] project in the package root to create a `package.json`. There are a few ways this can be done, but I prefer to have `package.json` and `npm` manage the JavaScript dependency. [\u0026#x1F4D1; Changes: db0201](https://github.com/gadenbuie/applause/commit/db0201b5e4fa86c7a4cd82493863fadf860f684b)\n\n\n```sh\n# In terminal, hit enter to accept most defaults, or change what you want\nnpm init\n```\n\nUse `npm` to install the [applause-button] dependencies. [\u0026#x1F4D1; Changes: 90eb14](https://github.com/gadenbuie/applause/commit/90eb149a1daeea96f8cedde70e97b8c874d5bf20)\n\n\n```sh\nnpm install applause-button\n```\n\nThis step will install `applause-button` and it's related dependencies into `node_modules/`. It will also create a `package-lock.json` file that should be committed alongside `package.json`, but we don't want to commit the dependencies yet. In fact, we add those to build and git ignore files.\n\n```r\nuse_build_ignore(\"package.json\")\nuse_build_ignore(\"package-lock.json\")\nuse_build_ignore(\"node_modules/\")\nuse_git_ignore(\"node_modules/\")\n```\n\n### Move the JavaScript dependencies into the R package\n\n[\u0026#x1F4D1; Changes: 9c5500](https://github.com/gadenbuie/applause/commit/9c5500846f228b5a0af4a0e835f2250841d6b9ce)\n\n\nNow we need to move the `applause-button` dependencies into our R package space. If you look inside `node_modules/` you'll find the `applause-button/` folder, which contains the library source and a `dist/` directory where the JavaScript and CSS dependencies are stored.\nWe need to copy these files from `node_modules/applause-button/dist` to `inst/applause-button/`.\n\nI usually do this with `npm` so that it's handled by the JavaScript package manager and so that I don't forget to do this step. I use an npm package called `copyfiles`, which is added as a dev dependency.\n\n```sh\nnpm install --save-dev copyfiles\n```\n\nThen I add the following to `package.json` in `\"scripts\"`.\n\n```json\n\"scripts\": {\n  \"copy\": \"copyfiles -f \\\"node_modules/applause-button/dist/applause-button.*\\\" inst/applause-button\",\n  \"build\": \"npm run copy\"\n}\n```\n\nThis creates two [npm run scripts](https://docs.npmjs.com/cli/run-script), a script for the `copy` step and a script for the `build` step. The `build` step at the moment just calls the `copy` step, but if we later decide to add more build steps, this format lets us add on easily.\n\nTo move the files where they need to be, run:\n\n```sh\nnpm run build\n```\n\n### Create html_dependency_applause()\n\nNow we turn to building out the R package. First we depend on the [htmltools] package. [\u0026#x1F4D1; Changes: a9fbf4](https://github.com/gadenbuie/applause/commit/a9fbf490448f77deb604f48f80f8cd6fbc1159ff)\n\n\n```r\nuse_package(\"htmltools\")\n```\n\nThen we create an `html_dependency_applause()` function in `R/html_dependency.R`. [\u0026#x1F4D1; Changes: 453694](https://github.com/gadenbuie/applause/commit/4536941dc9a3d39b14349ba9e38b3a5b8ba7d391)\n\n\n```r\nuse_r(\"html_dependency\")\n```\n\nThe function looks like this:\n\n```r\nhtml_dependency_applause \u003c- function() {\n  htmltools::htmlDependency(\n    name = \"applause-button\",\n    version = \"3.3.2\",\n    package = \"applause\",\n    src = \"applause-button\",\n    script = \"applause-button.js\",\n    stylesheet = \"applause-button.css\",\n    all_files = FALSE\n  )\n}\n```\n\n- The `name` of the dependency is `applause-button` because that's what it's called on npm, i.e. we ran `npm install applause-button`.\n\n- The `version` installed from npm was 3.3.2 (if we update the package later, we'll need to update this function).\n\n- The R `package` providing the dependency is called `applause`\n\n- The `src` directory where the files are located is `applause-button`, corresponding to `inst/applause-button` (the files in `inst/` are installed in the package root directory when the package is installed.)\n\n- The `script` to be loaded is `applause-button.js`\n\n- The `stylesheet` to be loaded is `applause-button.css`\n\n- And just for safety, we set `all_files = FALSE` so that other files in this folder are included when the dependency is used.\n\nThe Applause button distribution files are also available via the unpkg CDN, so I updated `src` to include the URL to the directory containing the files. To specify both the local and remote locations of the distribution files, `src` in `htmlDependency()` accepts a named character vector, where the `file` item corresponds to the local path and the `href` item corresponds to the remote URL. [\u0026#x1F4D1; Changes: 73d56a](https://github.com/gadenbuie/applause/commit/73d56a5d3856c7319367149cc432a1ac1e0215c0)\n\n\n```r\nsrc = c(\n  file = \"applause-button\",\n  href = \"https://unpkg.com/applause-button@3.3.2/dist\"\n)\n```\n\n### Create UI functions the provide the HTML\n\n[\u0026#x1F4D1; Changes: 5f68db](https://github.com/gadenbuie/applause/commit/5f68db6d95ef8585d627b50ac8f1eb3eeaaf94c4)\n\n\nThe [applause-button] documentation page includes a section showing the HTML required to include an Applause button on your web page:\n\n```html\n\u003chead\u003e\n  \u003c!-- add the button style \u0026 script --\u003e\n  \u003clink rel=\"stylesheet\" href=\"applause-button.css\" /\u003e\n  \u003cscript src=\"applause-button.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- add the button! --\u003e\n  \u003capplause-button style=\"width: 58px; height: 58px;\"/\u003e\n\u003c/body\u003e  \n```\n\nThe HTML dependency function we created above will provide htmltools with enough information to create the `\u003clink\u003e` and `\u003cscript\u003e` tags that need to be included in the `\u003chead\u003e` of the page. Our next task is to provide a function that creates the HTML that appears in the page and to attach the `html_dependency_applause()` to that HTML.\n\nThe Applause button provides an interesting wrinkle at this step. Rather than using a classed `\u003cdiv\u003e`, the button uses a custom HTML tag: `\u003capplause-button\u003e`. So the first step is to create an appropriate tag. Again, from the [documentation], this tag can have the following attributes:\n\n- `color`, with a CSS color for the button\n- `multiclap`, a binary attribute that when `\"true\"` allows users to clap more than once\n- `url`, the URL used to track total claps, if unset the current referring page URL will be used\n- `api`, a URL for a custom Applause button back-end API.\n\n```r\nuse_r(\"button\")\n```\n\nFollowing the above, I created a [`button()` function](https://github.com/gadenbuie/applause/blob/5f68db6d95ef8585d627b50ac8f1eb3eeaaf94c4/R/button.R) that returns the custom element.\n\n```r\napplause::button(color = \"red\", width = \"33px\")\n## \u003capplause-button style=\"width: 33px; height: 33px;\" color=\"red\"\u003e\u003c/applause-button\u003e\n```\n\nThe applause button at this point returns just the custom HTML tag, but doesn't include the dependencies. To include the applause button dependencies, we need to \"attach\" the `html_dependency_applause()` to the tag. The easiest way to do this is to return an `htmltools::tagList()` containing the HTML tags and the dependencies:\n\n```r\nhtmltools::tagList(\n  button(),\n  html_dependency_applause()\n)\n```\n\n[\u0026#x1F4D1; Changes: 669d57](https://github.com/gadenbuie/applause/commit/669d573df07f9d1123e5987d9d32c34e7285e61e)\n\n\n(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()`.)\n\n### That's it!\n\nThe 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.\n\nThe last step is to [fill out the DESCRIPTION](https://github.com/gadenbuie/applause/commit/caa9c883ab639cb2086290350d611b4e747e464f) and [add a demonstration page and update the README](https://github.com/gadenbuie/applause/commit/a8b282eaf9dc9b347770342326329b1c1b993059)!\n\n👏 👏 👏\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fapplause","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgadenbuie%2Fapplause","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fapplause/lists"}