NOAA Themed pkgdown

How to create a NOAA themed pkgdown landing site for your tool

Below are the 4 steps for creating a NOAA themed pkgdown webpage, with NOAA colors and a NOAA logo footer, for your tool on the toolbox.

1. Set up a pkgdown website for your tool using the pkgdown readme instructions.
2. Create a pkgdown folder in your repository and add a file called pkgdown/extra.css. Add the code below to the extra.css file:

     @import url("https://nmfs-fish-tools.github.io/nmfspalette/extra.css");
   

   This will allow the CSS file with NMFS styling to be used for your pkgdown site. Optional: For those who wish to dive deeper, read an overview on what CSS is to understand what the css file is doing.

3. If you don’t have one already, add a NOAA Disclaimer to the footer of your README.md that will be automatically added to your pkgdown page.

     ## Disclaimer
     The United States Department of Commerce (DOC) GitHub project code is
     provided on an ‘as is’ basis and the user assumes responsibility for 
     its use. DOC has relinquished control of the information and no longer
     has responsibility to protect the integrity, confidentiality, or 
     availability of the information. Any claims against the Department of
     Commerce stemming from the use of its GitHub project will be governed
     by all applicable Federal law. Any reference to specific commercial 
     products, processes, or services by service mark, trademark, 
     manufacturer, or otherwise, does not constitute or imply their 
     endorsement, recommendation or favoring by the Department of Commerce.
     The Department of Commerce seal and logo, or the seal and logo of a 
     DOC bureau, shall not be used in any manner to imply endorsement of any
     commercial product or activity by DOC or the United States Government.”
   

4. Add the code below to your repository’s README.md to add a footer.

    <img src="https://raw.githubusercontent.com/nmfs-fish-tools/nmfspalette/main/man/figures/noaa-fisheries-rgb-2line-horizontal-small.png" width="200" style="height: 75px !important;"   alt="NOAA Fisheries Logo">
   
    [U.S. Department of Commerce](https://www.commerce.gov/) | [National Oceanographic and Atmospheric Administration](https://www.noaa.gov) | [NOAA Fisheries](https://www.fisheries.noaa.gov/)
   

Automate your pkgdown rendering

Want your pkgdown site to always be up to date with your code? Use the use_update_pkgdown() workflow from the {ghactions4r} package to set up a GitHub Action that renders the pkgdown site automatically on changes to the main branch. Note that this workflow will deploy the pkgdown site to a branch called gh-pages, so the publishing source for GitHub Pages will need be set to the root of the gh-pages branch. There is also a {usethis} method for automatically rendering your pkgdown site. The difference between the {usethis} approach and {ghactions4r} is that {ghactions4r} makes it so you only have to update the ghactions workflow once.

Examples of tools and packages with NOAA themed pkgdown sites

• nmfspalette
• r4MAS
• adnuts
• bayesdfa
• wham

Going further

Optional steps to improve your pkgdown page

Adding a hex logo to your pkgdown landing page

To add a hex sticker to your pkgdown page:

• Add a logo file to man/figures/logo.png. Make sure it’s just named logo.png.
• Then to the top of your README.md file where you normally have your package title, switch out the title line with this:

  # yourpackagename <img src="man/figures/logo.png" align="right" alt="Hexagonal logo for this package" width=250/>
  

pkgdown will handle the rest for you, including creating a favicon. You may need to adjust the width of the logo to suit your needs.

Adding a video tutorial to your pkgdown landing page

Follow the instructions below to add a video demo or overview of your tool on your pkgdown landing page. Examples of this can be seen on the wham and bayesdfa pages.

Embed a video in a .md page

Using a link from YouTube or Vimeo:

1. Click share
2. Click embed link
3. Copy and Paste the embed link into the .md file where you want the video to appear

Example code from YouTube embed link:

<figure class="video_container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/A7qDN2oYSxc" frameborder="0" allowfullscreen="true"> </iframe>
</figure>