Merge pull request gadenbuie#41 from coatless-quarto/restructure-repo…

…sitory-for-expansion

Restructure-repository-for-expansion

.github/workflows/R-CMD-check.yaml

@@ -43,7 +43,9 @@ jobs:
         with:
           extra-packages: any::rcmdcheck
           needs: check
+          working-directory: r
 
       - uses: r-lib/actions/check-r-package@v2
         with:
           upload-snapshots: true
+          working-directory: r

README.md

@@ -14,7 +14,7 @@ library(countdown)
 countdown(minutes = 0, seconds = 15)
 ```
 
-<img src="man/figures/countdown.gif" width="200px">
+<img src="r/man/figures/countdown.gif" width="200px">
 
 ### Want to know more?
 
@@ -43,7 +43,7 @@ or from GitHub
 
 ``` r
 # install.packages("remotes")
-remotes::install_github("gadenbuie/countdown")
+remotes::install_github("gadenbuie/countdown", subdir = "r")
 ```
 
 ## Shiny App

countdown.code-workspace

@@ -0,0 +1,7 @@
+{
+    "folders": [
+        {
+            "path": "."
+        }
+    ]
+}

lib/README.md

@@ -0,0 +1,3 @@
+# countdown Library Assets
+
+Within the `lib` directory, we store the different assets that power the R, Python, and Quarto version of the extension.

python/README.md

@@ -0,0 +1,6 @@
+# countdown for Python
+
+We're currently working toward implementing a Python package for countdown. 
+This will likely come over the next couple of months.
+
+In the interim, we suggest viewing the [`Quarto`](../quarto) or [`R`](../r/) extensions.

quarto/README.md

@@ -0,0 +1,33 @@
+# quarto-countdown: A Quarto Extension for Countdown
+
+The `countdown` extension allows you to incorporate countdown like timers on Quarto HTML Documents and RevealJS slides.
+
+This extension can be used without installing R or the `{countdown}` R Package. 
+
+## Installation
+
+To install the `countdown` extension, follow these steps:
+
+1. Open your terminal.
+
+2. Execute the following command:
+
+```bash
+quarto add gadenbuie/countdown/quarto
+```
+
+This command will download and install the extension under the `_extensions` subdirectory of your Quarto project. If you are using version control, ensure that you include this directory in your repository.
+
+## Usage
+
+To embed a countdown clock, use the `{{< countdown >}}` shortcode. For example:
+
+```default
+{{< countdown >}}
+{{< countdown minutes=5 seconds=30 >}}
+```
+
+## Example
+
+You can see a minimal example of the extension in action here: [example.qmd](example.qmd).
+

r/LICENSE

@@ -0,0 +1,2 @@
+YEAR: 2024
+COPYRIGHT HOLDER: countdown authors

LICENSE.md → r/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright (c) 2019 Garrick Aden-Buie
+Copyright (c) 2024 countdown authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

r/inst/countdown/countdown.css

@@ -0,0 +1,169 @@
+.countdown {
+  --_running-color: var(--countdown-color-running-text, rgba(0, 0, 0, 0.8));
+  --_running-background: var(--countdown-color-running-background, #43AC6A);
+  --_running-border-color: var(--countdown-color-running-border, rgba(0, 0, 0, 0.1));
+  --_finished-color: var(--countdown-color-finished-text, rgba(0, 0, 0, 0.7));
+  --_finished-background: var(--countdown-color-finished-background, #F04124);
+  --_finished-border-color: var(--countdown-color-finished-border, rgba(0, 0, 0, 0.1));
+
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: var(--countdown-color-background, inherit);
+  font-size: var(--countdown-font-size, 3rem);
+  line-height: var(--countdown-line-height, 1);
+  border-color: var(--countdown-color-border, #ddd);
+  border-width: var(--countdown-border-width, 0.1875rem);
+  border-style: solid;
+  border-radius: var(--countdown-border-radius, 0.9rem);
+  box-shadow: var(--countdown-box-shadow, 0px 4px 10px 0px rgba(50, 50, 50, 0.4));
+  margin: var(--countdown-margin, 0.6em);
+  padding: var(--countdown-padding, 0.625rem 0.9rem);
+  text-align: center;
+  z-index: 10;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.countdown.inline {
+  position: relative;
+  width: max-content;
+  max-width: 100%;
+}
+
+.countdown .countdown-time {
+  background: none;
+  font-size: 100%;
+  padding: 0;
+  color: currentColor;
+}
+
+.countdown-digits {
+  color: var(--countdown-color-text);
+}
+
+.countdown.running {
+  border-color: var(--_running-border-color);
+  background-color: var(--_running-background);
+}
+
+.countdown.running .countdown-digits {
+  color: var(--_running-color);
+}
+
+.countdown.finished {
+  border-color: var(--_finished-border-color);
+  background-color: var(--_finished-background);
+}
+
+.countdown.finished .countdown-digits {
+  color: var(--_finished-color);
+}
+
+.countdown.running.warning {
+  border-color: var(--countdown-color-warning-border, rgba(0, 0, 0, 0.1));
+  background-color: var(--countdown-color-warning-background, #E6C229);
+}
+
+.countdown.running.warning .countdown-digits {
+  color: var(--countdown-color-warning-text, rgba(0, 0, 0, 0.7));
+}
+
+.countdown.running.blink-colon .countdown-digits.colon {
+  opacity: 0.1;
+}
+
+/* ------ Controls ------ */
+.countdown:not(.running) .countdown-controls,
+.countdown.no-controls .countdown-controls {
+  display: none;
+}
+
+.countdown-controls {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  left: -0.5rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+
+.countdown-controls>button {
+  position: relative;
+  font-size: 1.5rem;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  padding: 10px;
+  margin: 0;
+  background: inherit;
+  border: 2px solid;
+  border-radius: 100%;
+  transition: 50ms transform ease-in-out, 150ms opacity ease-in;
+  box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+  --_button-bump: 0;
+  opacity: var(--_opacity, 0);
+  transform: translate(0, var(--_button-bump));
+}
+
+/* increase hit area of the +/- buttons */
+.countdown .countdown-controls > button::after {
+	content: "";
+	height: 200%;
+	width: 200%;
+	position: absolute;
+	border-radius: 50%;
+}
+
+.countdown .countdown-controls>button:last-child {
+  color: var(--_running-color);
+  background-color: var(--_running-background);
+  border-color: var(--_running-border-color);
+}
+
+.countdown .countdown-controls>button:first-child {
+  color: var(--_finished-color);
+  background-color: var(--_finished-background);
+  border-color: var(--_finished-border-color);
+}
+
+.countdown.running:hover, .countdown.running:focus-within {
+  --_opacity: 1;
+}
+
+.countdown.running:hover .countdown-controls>button,
+.countdown.running:focus-within .countdown-controls>button {
+  --_button-bump: -3px;
+}
+
+.countdown.running:hover .countdown-controls>button:active,
+.countdown.running:focus-within .countdown-controls>button:active {
+  --_button-bump: 0;
+}
+
+/* ----- Fullscreen ----- */
+.countdown.countdown-fullscreen {
+  z-index: 0;
+}
+
+.countdown-fullscreen.running .countdown-controls {
+  top: 1rem;
+  left: 0;
+  right: 0;
+  justify-content: center;
+}
+
+.countdown-fullscreen.running .countdown-controls>button+button {
+  margin-left: 1rem;
+}