+ Quarto Courses + Best for new course builds +
**Template repository:** [ottrproject/OTTR_Quarto](https://github.com/ottrproject/OTTR_Quarto) -
+
-
+::: {.template-actions}
[Full setup guide with screenshots](quarto-course.qmd)
[Next Steps](next_steps.qmd) →
+:::
-### R Markdown Courses
+
-
+### R Markdown Courses {.toc-anchor-heading}
-**Template repository:** [ottrproject/OTTR_Template](https://github.com/ottrproject/OTTR_Template)
+
+
+ R Markdown Courses + Best for `.Rmd` or Bookdown courses +
+**Template repository:** [ottrproject/OTTR_Template](https://github.com/ottrproject/OTTR_Template) -
+
-
+::: {.template-actions}
[Full setup guide with screenshots](rmd-course.qmd)
----
-
[Next Steps](next_steps.qmd) →
+:::
+
+
## Websites
-### Quarto Websites
+::: {.path-header}
+**Use this path when:** you want a project website, documentation site, resource hub, or public-facing guide without course-style chapters.
+:::
-
+### Quarto Websites {.toc-anchor-heading}
-**Template repository:** [ottrproject/OTTR_Quarto](https://github.com/ottrproject/OTTR_Quarto)
+
+
+ Quarto Websites + Best for new websites +
+**Template repository:** [ottrproject/OTTR_Quarto](https://github.com/ottrproject/OTTR_Quarto) -
+
-
+::: {.template-actions}
[Full setup guide with screenshots](quarto-website.qmd)
----
-
[Next Steps](next_steps.qmd) →
+:::
+
+
-### R Markdown Websites
+### R Markdown Websites {.toc-anchor-heading}
+
+
+
+ R Markdown Websites + Best for existing `.Rmd` sites +
**Template repository:** [ottrproject/OTTR_Template_Website](https://github.com/ottrproject/OTTR_Template_Website) -
+
-
+::: {.template-actions}
[Full setup guide with screenshots](rmd-website.qmd)
----
-
[Next Steps](next_steps.qmd) →
+:::
+
+
## Dashboards
### Metricminer Dashboard
+::: {.path-header}
+**Use this path when:** you want a dashboard that reports project metrics from GitHub, Google Analytics, Google Forms, CRAN, Calendly, and other sources.
+
**Template repository:** [ottrproject/metricminer-dashboard](https://github.com/ottrproject/metricminer-dashboard)
+:::
+
+1. Create a new repository from the [metricminer-dashboard template](https://github.com/ottrproject/metricminer-dashboard).
+2. Make the repository public, then enable GitHub Actions **Read and write permissions** and **Allow GitHub Actions to create and approve pull requests**.
+3. Add a repository secret named `GH_PAT` using a classic personal access token with `repo` and `workflow` scopes.
+4. Add credentials for the metric sources you want to collect from.
+5. Deploy from the `main` branch and `/docs` folder in GitHub Pages, then enable HTTPS.
-A dashboard template powered by the [`metricminer`](https://www.metricminer.org/) R package. Displays metrics from GitHub, Google Analytics, Google Forms, CRAN, Calendly, and more.
-#### 1. Create a repository from the template
+
+
-#### 6. Set up your GitHub personal access token
-
-Go to **Settings** > **Secrets and variables** > **Actions** > **Repository secrets** and click **New repository secret**.
+Go to **Settings** > **Secrets and variables** > **Actions** > **Repository secrets** and click **New repository secret**. Add:
- **Name**: `GH_PAT` (this exact name is required)
- **Secret**: create a [classic personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with `repo` and `workflow` scopes checked.
-#### 7. Configure your data source credentials
-
Set up credentials for whichever metric sources you want to collect from. Each source requires its own repository secret — see the [metricminer documentation](https://www.metricminer.org/) for the specific tokens needed (Google Analytics, GitHub, etc.).
-#### 8. Set up GitHub Pages
-
In your repository, go to **Settings** > **Pages** and configure:
- **Source**: Deploy from a branch
@@ -197,10 +230,10 @@ Click **Save**, then check **Enforce HTTPS** at the bottom of the page.
**Warning**: If you visit your URL before pushing any file changes, you may see a 404 error. Check after filing your first pull request.
-#### Start customizing!
-
Edit the `.Rmd` files in the repository to configure which metrics to display and how to arrange them. See [metricminer.org](https://www.metricminer.org/) for full documentation.
+
+
---
If you wish to contribute to OTTR, please take a look at our [Code of Conduct](https://github.com/ottrproject/OTTR_Template/blob/main/code_of_conduct.md).
diff --git a/styles.css b/styles.css
index 1812c01..89ea638 100644
--- a/styles.css
+++ b/styles.css
@@ -5,11 +5,20 @@
margin-top: 100px;
}
+:root {
+ --ottr-soft: lightblue;
+ --ottr-accent: #1f2d3d;
+ --ottr-accent-dark: RoyalBlue;
+ --ottr-border: #ADD8E6;
+ --ottr-link: #2a7a9a;
+ --ottr-text: #1f2d3d;
+}
+
/* add some color - if you want color behind a major point on your website */
.banner_color {
- background-color: lightblue;
+ background-color: var(--ottr-soft);
font-weight:bold;
}
@@ -23,7 +32,7 @@
/* Style buttons - if you want to have a button */
.btn {
- background-color: DodgerBlue;
+ background-color: var(--ottr-accent);
border: none;
color: white;
padding: 8px 20px;
@@ -33,7 +42,273 @@
/* Darker background on mouse-over */
.btn:hover {
- background-color: RoyalBlue;
+ background-color: var(--ottr-accent-dark);
+}
+
+/* Indent nested items in the Quarto table of contents. */
+#TOC ul {
+ margin-left: 0;
+ padding-left: 0;
+}
+
+#TOC li {
+ margin-left: 0;
+}
+
+#TOC .nav-link {
+ padding-left: 0.25rem;
+}
+
+#TOC ul ul {
+ margin-left: 0.35rem;
+ padding-left: 0.9rem;
+ border-left: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+#TOC ul ul .nav-link {
+ padding-left: 0.35rem;
}
+#TOC ul ul ul {
+ margin-left: 0.2rem;
+ padding-left: 0.85rem;
+}
+
+#TOC ul ul ul .nav-link {
+ font-size: 0.95em;
+}
+
+/* Top-level chooser for the Getting Started page. */
+.intro-grid {
+ display: grid;
+ grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
+ gap: 2rem;
+ align-items: start;
+ margin: 1.5rem 0 2.75rem;
+}
+
+.intro-prereqs,
+.template-chooser {
+ min-width: 0;
+}
+
+.intro-prereqs h2,
+.template-chooser h2 {
+ margin-top: 0;
+}
+
+.intro-prereqs ul {
+ padding-left: 1.1rem;
+}
+.intro-prereqs li {
+ margin-bottom: 0.55rem;
+}
+
+.chooser-gallery {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 1rem;
+}
+
+.chooser-card {
+ display: flex;
+ height: 100%;
+ min-height: 13rem;
+ flex-direction: column;
+ gap: 0.55rem;
+ padding: 1rem;
+ color: var(--ottr-text);
+ text-decoration: none;
+ background: white;
+ border: 1px solid var(--ottr-border);
+ border-radius: 8px;
+}
+
+.chooser-card:hover,
+.chooser-card:focus {
+ color: var(--ottr-text);
+ text-decoration: none;
+ background: var(--ottr-soft);
+ border-color: var(--ottr-accent);
+}
+
+.chooser-kicker {
+ width: fit-content;
+ padding: 0.1rem 0.45rem;
+ color: white;
+ font-size: 0.8rem;
+ font-weight: 700;
+ background: var(--ottr-accent);
+ border: 1px solid var(--ottr-accent);
+ border-radius: 999px;
+}
+
+.chooser-title {
+ color: var(--ottr-text);
+ font-size: 1.15rem;
+ font-weight: 700;
+}
+
+.chooser-copy {
+ font-size: 0.95rem;
+ line-height: 1.35;
+}
+
+/* Template path sections. */
+.path-header,
+.setup-checklist {
+ margin: 1rem 0 1.25rem;
+ padding: 1rem 1.25rem;
+ color: var(--ottr-text);
+ background: #f8fbfc;
+ border-left: 5px solid var(--ottr-accent);
+ border-radius: 8px;
+}
+
+.path-header p:last-child,
+.setup-checklist ol:last-child {
+ margin-bottom: 0;
+}
+
+.setup-checklist li {
+ margin-bottom: 0.45rem;
+}
+
+h3.toc-anchor-heading {
+ height: 0;
+ margin: 0;
+ overflow: hidden;
+ scroll-margin-top: 7rem;
+}
+
+h3.toc-anchor-heading .anchorjs-link {
+ display: none;
+}
+
+.template-choice {
+ margin: 1rem 0 1.5rem;
+ border: 1px solid var(--ottr-border);
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.template-choice summary {
+ display: grid;
+ grid-template-columns: max-content minmax(10rem, 1fr) max-content;
+ gap: 0.25rem 0.75rem;
+ align-items: center;
+ padding: 0.85rem 1rem;
+ color: var(--ottr-text);
+ cursor: pointer;
+ background: #f8fbfc;
+}
+
+.template-choice summary:hover,
+.template-choice summary:focus {
+ background: var(--ottr-soft);
+}
+
+.template-choice[open] summary {
+ border-bottom: 1px solid var(--ottr-border);
+}
+
+.template-choice summary::after {
+ grid-row: span 2;
+ color: var(--ottr-text);
+ content: "Show";
+ font-size: 0.85rem;
+ font-weight: 700;
+}
+
+.template-choice[open] summary::after {
+ content: "Hide";
+}
+
+.choice-badge {
+ grid-row: span 2;
+ width: fit-content;
+ padding: 0.15rem 0.5rem;
+ color: white;
+ font-size: 0.78rem;
+ font-weight: 700;
+ background: var(--ottr-accent);
+ border-radius: 999px;
+}
+
+.choice-title {
+ color: var(--ottr-text);
+ font-size: 1.05rem;
+ font-weight: 700;
+}
+
+.choice-note {
+ font-size: 0.92rem;
+}
+
+.template-choice > p,
+.template-choice > ul,
+.template-choice > ol,
+.template-choice > div,
+.template-choice > .cheatsheet-frame {
+ margin-right: 1rem;
+ margin-left: 1rem;
+}
+
+.template-choice > p:first-of-type {
+ margin-top: 1rem;
+}
+
+.cheatsheet-frame {
+ margin: 1.25rem 0 1rem;
+}
+
+.cheatsheet-frame iframe {
+ width: 100%;
+ height: 2820px;
+ border: 1.5px solid var(--ottr-border);
+ border-radius: 8px;
+}
+
+.cheatsheet-link {
+ margin-top: 0.25rem;
+ text-align: right;
+}
+
+.cheatsheet-link a {
+ color: var(--ottr-link);
+ font-size: 1rem;
+}
+
+.template-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem 1rem;
+ margin-top: 0.75rem;
+}
+
+.template-actions p {
+ margin: 0;
+}
+
+@media (max-width: 900px) {
+ .intro-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .chooser-gallery {
+ grid-template-columns: 1fr;
+ }
+
+ .chooser-card {
+ min-height: 0;
+ }
+
+ .template-choice summary {
+ grid-template-columns: 1fr;
+ }
+
+ .choice-badge {
+ grid-row: auto;
+ }
+}
+ Dashboard setup notes + Settings, secrets, and first deploy +
On the [landing page of the metricminer-dashboard repository](https://github.com/ottrproject/metricminer-dashboard), locate the green **Use this template** button in the upper right corner. Click it, then select **Create a new repository** and follow the instructions.  -#### 2. Name your repository and fill in a short description - -Enter a name in the **Repository name** field and provide a brief description in the **Description** box. - -#### 3. Ensure your repository is set to `public` - -Make sure to set it [to a public repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/about-repositories#about-repository-visibility). - -#### 4. Click `Create repository from template` to proceed +After creating your repository, go to **Settings** > **Actions** > **General**. Make sure you have: -After creating your repository, navigate to the **Issues** tab and follow any automatically filed setup instructions. - -#### 5. Check your GitHub Actions settings - -Go to **Settings** > **Actions** > **General**. Make sure you have: - -1. Given **Read and write permissions** -2. Checked **Allow GitHub Actions to create and approve pull requests** +1. Given **Read and write permissions**. +2. Checked **Allow GitHub Actions to create and approve pull requests**. Then click **Save**.
-#### 6. Set up your GitHub personal access token
-
-Go to **Settings** > **Secrets and variables** > **Actions** > **Repository secrets** and click **New repository secret**.
+Go to **Settings** > **Secrets and variables** > **Actions** > **Repository secrets** and click **New repository secret**. Add:
- **Name**: `GH_PAT` (this exact name is required)
- **Secret**: create a [classic personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with `repo` and `workflow` scopes checked.
-#### 7. Configure your data source credentials
-
Set up credentials for whichever metric sources you want to collect from. Each source requires its own repository secret — see the [metricminer documentation](https://www.metricminer.org/) for the specific tokens needed (Google Analytics, GitHub, etc.).
-#### 8. Set up GitHub Pages
-
In your repository, go to **Settings** > **Pages** and configure:
- **Source**: Deploy from a branch
@@ -197,10 +230,10 @@ Click **Save**, then check **Enforce HTTPS** at the bottom of the page.
**Warning**: If you visit your URL before pushing any file changes, you may see a 404 error. Check after filing your first pull request.
-#### Start customizing!
-
Edit the `.Rmd` files in the repository to configure which metrics to display and how to arrange them. See [metricminer.org](https://www.metricminer.org/) for full documentation.
+