Merge pull request #1 from fhdsl/css

css

.github/workflows/render-site.yml

@@ -0,0 +1,82 @@
+# This code was originally adapted by Candace Savonen for the OTTR_template https://github.com/jhudsl/OTTR_Template.
+
+# This code was adapted by Carrie Wright to enable automated rendering of the site associated with this repository.
+
+name: Render html
+
+# Controls when the action will run. Triggers the workflow on push
+# events only for the master branch
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+    paths:
+      - '**.Rmd'
+      - styles.css
+      - _site.yml
+      - resources/images/*.png
+      - resources/icons/*.png
+
+jobs:
+  yaml-check:
+    name: Load user automation choices
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+        # Use the yaml-env-action action.
+      - name: Load environment from YAML
+        uses: doughepi/[email protected]
+        with:
+            files: config_automation.yml # Pass a space-separated list of configuration files. Rightmost files take precedence.
+
+    outputs:
+      rendering_docker_image: "${{ env.RENDERING_DOCKER_IMAGE }}"
+
+  # This workflow contains a single job called "build-all"
+  render-main:
+    needs: yaml-check
+    runs-on: ubuntu-latest
+    container:
+      image: ${{needs.yaml-check.outputs.rendering_docker_image}}
+
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: checkout
+        uses: actions/checkout@v4
+        with:
+          # get the full repo
+          fetch-depth: 0
+          # use github PAT
+          token: ${{ secrets.GH_PAT }}
+
+      # We want a fresh run of the renders each time - so first delete old html files
+      - name: Delete old *.html
+        run: Rscript -e "rmarkdown::clean_site(preview = FALSE)"
+
+       # Now we want to render all the html files from the Rmd files
+      - name: Run render html
+        id: site
+        run: Rscript -e "rmarkdown::render_site()"
+
+      # This checks on the steps before it and makes sure that they completed.
+      # If the renders didn't complete we don't want to commit the file changes
+      - name: Check on render steps
+        if: steps.site.outcome != 'success'
+        run: |
+          echo site status ${{steps.site.outcome}}
+          exit 1
+
+# Commit the rendered site files - html files and site_libs files
+# The git reset step will remove any other files created in this workflow, such as API keys
+      - name: Commit rendered site files
+        run: |
+          git config --global --add safe.directory $GITHUB_WORKSPACE
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git add --force docs/*
+          git commit -m 'Render site' || echo "No changes to commit"
+          git reset --hard HEAD
+          git pull --rebase --allow-unrelated-histories --strategy-option=ours
+          git push origin main || echo "No changes to push"

style.css

@@ -0,0 +1,135 @@
+/*------------- checkbox alignment for html checkbox---------------- */
+ul {
+  list-style-position: inside;
+  padding-left: 0;
+  font-weight: normal
+}
+
+
+
+/*------------- checkbox alignment for markdown checkbox---------------- */
+
+input[type="checkbox"] {
+        margin-right: 0.5ch;
+      }
+
+
+/*------------- GitHub boxes that look like the buttons on GitHub---------------- */
+
+.github_button {
+    border-radius: 8px;
+    border: 1px solid #black;
+    background: #20873e;
+    color: white !important;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    padding: 8px 16px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+/*------------- button link color---------------- */
+
+
+.github_button a:link{
+    color: #fff;
+}
+
+
+/*------------- box around title and title font ---------------- */
+
+.title {
+  font-family: 'Avenir';
+  font-size: 4em !important;
+  color: #193a5c;
+  margin-top: 0.275em !important;
+  margin-bottom: 0.35em !important;
+  border-radius: 8px;
+  border: 4px solid #986753;
+  background: #90ceff;
+  color: #565a59;
+  padding: 8px 16px;
+  text-align: center;
+  width: 500px;
+  margin: auto;
+}
+
+/*-----------icon------*/
+
+.icon{
+  width: 3%;
+}
+
+}
+
+/*------------- Body and header text---------------- */
+
+.book.font-family-1 {
+  font-family: 'Karla', arial, sans-serif;
+}
+
+/*------------- Change header color---------------- */
+
+h1, h2, h3 {
+  font-family: 'Lora', arial, sans-serif;
+  color:#5ca5ff;
+}
+
+/*------------- Change link color---------------- */
+
+a {
+  color: #0598a8;
+}
+
+/*------------- Numbering for header level 2 ---------------- */
+
+body {
+  counter-reset: h2;
+}
+h2::before {
+  counter-increment: h2;
+  content: counter(h2) ". ";
+}
+
+/*------------- add warning and github boxes---------------- */
+
+
+div.warning{
+  border: 4px #e0471c;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.warning{
+  background-image: url("resources/images/warning.png");
+}
+
+div.github{
+  border: 4px #000000;
+  border-style: solid;
+  padding: 1em;
+  margin: 1em 0;
+  padding-left: 100px;
+  background-size: 70px;
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  min-height: 120px;
+  background-color: #e8ebee;
+}
+
+div.github{
+  background-image: url("resources/images/github.png");
+}
+
+

template.Rmd

@@ -0,0 +1,38 @@
+---
+title: |
+  <center> <u> Cheatsheet </u></center>
+  <center> <p style = "color:#986753;"> template </p></center>
+date: "Last updated: `r format(Sys.time(), '%B %d, %Y')`"
+output: html_document
+css: style.css
+---
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = TRUE)
+```
+
+
+## R Markdown
+
+<input type="checkbox"> adfasfd 
+
+<input type="checkbox"> afdafsd
+
+
+[this is a link](https://www.itcrtraining.org/)
+
+::: {.warning}
+warning test
+:::
+
+:::{.github_button}
+<a href="http://stackoverflow.com"> Use this template</a>
+:::
+
+<github_button> Use this template </github_button>
+
+<center>
+<a href="https://ottrproject.org">
+  <img src="resources/images/basic_otter_water.png" width = 30%>
+</a>
+</center>

website_setup.Rmd

@@ -0,0 +1,92 @@
+---
+title: |
+  <center> <u> OTTR Website </u></center>
+  <center> <p style = "color:#986753;"> Setup </p></center>
+date: "Last updated: `r format(Sys.time(), '%B %d, %Y')`"
+output: html_document
+css: style.css
+---
+
+```{r setup, include=FALSE}
+knitr::opts_chunk$set(echo = TRUE)
+```
+
+
+## Create your OTTR repository from the [OTTR_Template_Website repository](OTTR_Template_Website repository)
+
+<input type="checkbox">  In the upper right, _click on_: <div class = "github_button"><a href="http://stackoverflow.com"> Use this template</a></div>
+
+<input type="checkbox">  Set your repo to **Public**
+
+## Enable workflow actions
+
+<input type="checkbox">  In your OTTR repository, go to **Settings** in the top navigation tabs
+
+<input type="checkbox">  Go to **Actions** (General) in the side navigation
+
+<input type="checkbox">   Under **Workflow permissions**
+
+1. <input type="checkbox"> Select **Read and write permissions**
+
+2. <input type="checkbox">  Check **Allow GitHub Actions to create and approve pull requests**
+
+3. <input type="checkbox">  Click **Save**
+
+## Set up your GitHub personal access token
+
+A. [Create a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
+
+<input type="checkbox"> Click on your **profile photo** in the upper right <img src="resources/icons/profile_photo.png" alt="profile icon" class = icon>
+
+<input type="checkbox"> Go to **Settings**<img src="resources/icons/settings_gear.png" alt="settings icon" class = icon>
+
+<input type="checkbox"> Go to **Developer Settings** in the side navigation <img src="resources/icons/developer_settings.png" alt="developer settings icon" class = icon>
+
+<input type="checkbox"> Select **Generate new token (classic)** <img src="resources/icons/personal_access_tokens.png" alt="personal access token icon" class = icon>
+
+<input type="checkbox"> Underneath **Select Scopes**, *check both* **repo** and **workflow** 
+
+<input type="checkbox"> Click: <div class = "github_button"><a href="https://github.com/settings/tokens/new"> Generate Token</a></div>
+
+<input type="checkbox"> Copy the **personal access token** <img src="resources/icons/copy.png" alt="copy icon" class = icon>
+
+B. [Save the copied personal access token as a repository secret](https://docs.github.com/en/codespaces/managing-codespaces-for-your-organization/managing-development-environment-secrets-for-your-repository-or-organization#adding-secrets-for-a-repository)
+
+<input type="checkbox"> In your OTTR repository, go to **Settings** in the top navigation tabs <img src="resources/icons/settings_gear.png" alt="settings icon" class = icon>
+
+<input type="checkbox"> Go to **Secrets and variables** in the side navigation <img src="resources/icons/secrets_and_variables.png" alt="secrets icon" class = icon> 
+
+<input type="checkbox"> Click on **Actions**
+
+<input type="checkbox"> Under **Repository secrets**, click on <div class = "github_button"> New repository secrets </div>
+
+<input type="checkbox"> Under **Name**, enter **GH_PAT**
+
+<input type="checkbox"> For **Secret**, paste your copied personal access token
+
+<input type="checkbox"> Click on: <div class = "github_button"> Add secret </div>
+
+## Set up GitHub Pages
+
+<input type="checkbox"> In your OTTR repository, go to Settings in the top navigation tabs <img src="resources/icons/settings_gear.png" alt="secrets icon" class = icon>
+
+<input type="checkbox"> Go to **Pages** in the side navigation <img src="resources/icons/pages.png"  alt="pages icon" class = icon>
+
+<input type="checkbox"> In the **Build and deployment section** 
+
+  1. <input type="checkbox"> Under **Source**, select **Deply from a branch**
+  2. <input type="checkbox"> Under **Branch**, pick **main** and choose **/docs**, and click **Save** 
+
+<input type="checkbox"> at the botton of the page, check **Enforce HTTPS**
+
+
+## Enroll your OTTR repository for template updates
+
+<input type="checkbox"> Refer to our Template Updates Cheatsheet
+
+
+<center>
+<a href="https://ottrproject.org">
+  <img src="resources/images/basic_otter_water.png" width = 30%>
+</a>
+</center>