Git Product home page Git Product logo

tidytemplate's Introduction

tidytemplate

R-CMD-check Check accessibility

Overview

tidytemplate provides a custom pkgdown template for tidyverse, r-lib, tidymodels, and rmarkdown packages. Please don’t use it for your own package.

Templates

For all sites, ensure that DESCRIPTION contains:

Config/Needs/website: tidyverse/tidytemplate

tidyverse and r-lib

template:
  package: tidytemplate
  bootstrap: 5
  
  includes:
    in_header: |
      <script defer data-domain="{YOUR DOMAIN},all.tidyverse.org" src="https://plausible.io/js/plausible.js"></script>  
      
development:
  mode: auto

Ping Hadley on slack to get your site added to plausible.

tidymodels

template:
  package: tidytemplate
  bootstrap: 5
  bslib:
    primary: "#CA225E"

  includes:
      in_header: |
        <script defer data-domain="{YOUR DOMAIN},all.tidymodels.org" src="https://plausible.io/js/plausible.js"></script>  

development:
  mode: auto

Ping Hadley on slack to get your site added to plausible.

rmarkdown / quillt

template:
  package: tidytemplate
  bootstrap: 5
  
  bslib:
    primary: "#096B72"
    navbar-background: "#e6f3fc"
  trailing_slash_redirect: true

Updating

If you’re updating from a previous pkgdown config, use the following checklist to make sure everything is up to date:

* [ ] `usethis::use_pkgdown_github_pages()`
* [ ] Ensure Author includes RStudio as copyright holder and funder
* [ ] Update `DESCRIPTION` to include `Config/Needs/website: tidyverse/tidytemplate`
* [ ] Update `_pkgdown.yml` with appropriate template above.
* [ ] Ping Hadley to add plausible.io record
* [ ] Remove `strip_header: true`
* [ ] Remove algolia search, if used
* [ ] Eliminate superseded navbar customisation (`home: ~`, article re-ordering)
* [ ] Update `news` structure if needed
* [ ] Remove any author info for tidyverse folks (since now included in template)

tidytemplate's People

Contributors

abichat avatar batpigandme avatar cderv avatar davisvaughan avatar dcossyleon avatar gadenbuie avatar gregrs-uk avatar hadley avatar jayhesselberth avatar jennybc avatar krlmlr avatar maelle avatar ras44 avatar schloerke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

tidytemplate's Issues

Clicking on a TOC link in an article highlights the second above the one you clicked

I just clicked on "What does masking mean" and it brings you to the right section, but seems to highlight the one above it. It looks like non-tidytemplate sites don't have this problem.

https://rlang.r-lib.org/reference/topic-data-mask.html#what-does-masking-mean-

Screen Shot 2021-12-21 at 9 20 32 AM

i.e. compare to clicking on a TOC section here, which seems to highlight the one you clicked on
https://pkgdown.r-lib.org/articles/customise.html#additional-html-and-files

Style <code> elements in headers

e.g. The font-size for h3 is 1.6em, but <code> elements get sized to 14px. Matching the h3 font-size looks huge in the code font. My recommended CSS would be:

h3 code {
    font-size: 1em;
}

part_of param should allow links

Currently, I don't think that I can include a link to the tidymodels github page in _pkgdown.yml like this:

template:
  package: tidytemplate
  params:
    part_of: <a href="https://github.com/tidymodels">tidymodels</a>
    # or this
    part_of: [tidymodels](https://github.com/tidymodels)

I don't know a ton about yaml/html interaction, but it seems like you can prevent html escaping by using triple braces? i.e. {{{part_of}}}.
https://github.com/tidyverse/tidytemplate/blob/master/inst/pkgdown/templates/navbar.html#L15

That at least let me do the first part_of option above. If there are other easier solutions that would be nice too. I probably would want to include a link in the footer too.

Support development mode

  • Link to dev documentation from navbar
  • Package version (only in dev?)
  • noindex meta information

Write up todo list when upgrading

  • Ensure using latest github action
  • Ensure Author includes RStudio as copyright holder and funder
  • Update DESCRIPTION
  • Ping Hadley to add plausible.io record
  • Update template field
  • Remove strip_header: true
  • Remove algolia search, if used
  • Eliminate superseded navbar customisation (home: ~, news instead of at top-level, article re-ordering)
  • Remove any tidyverse author info
  • Update news structure if needed

Home page sidebar conflict with navbar

This is how it looks
image

No issue on other page
image

I suppose this is a template issue as it doesn't happen with pkgdown itself

image

We have that in site using tidytemplate
image

image

`logo.png` not showing up in the top left hand corner

Currently, tidytemplate is using ../logo.png to find the logo. I think this might be a mistake, as only logo.png is needed.

background-image: url(../logo.png);

The logo is stored at the top level in the gh-pages branch so I dont think there is any need to go up a level.

It works fine for tidyverse packages because the base URL is https://ggplot2.tidyverse.org/ and looking for ../logo.png can't go up any further so it looks to https://ggplot2.tidyverse.org/logo.png.

It does not work for tidymodels packages because the gh-pages URL is https://tidymodels.github.io/yardstick and looking for ..logo.png looks to https://tidymodels.github.io/logo.png when it should be looking for https://tidymodels.github.io/yardstick/logo.png

I have manually changed it to logo.png in the browser and it works for ggplot2 and yardstick.

I can submit a PR if you agree (I will use your code in the README to update scss/ and regenerate tidyverse.css)

Update) Was it supposed to be ./logo.png?

Minor accessibility fixes

  • Use <h1> for package name?
  • Use aria-hidden for anchor class?
  • Declare language
  • Check bootstrap/aria settings for hamburger menu
  • Set alt="" for reference icons

Boostrap 5

  • Change font to "Source Sans Pro" + "Source Code Pro"
  • Tweak list styling (smaller left margin)
  • Tweak heading margins + sizes (smaller font with more whitespace)
  • Use dark navbar
  • Use borders a little more
  • Check primary colour works well with tidy models colour — style non-home page h1 with $primary ?
  • Consider footer — not for now
  • Authors data for all authors — https://docs.google.com/spreadsheets/d/1Vvz1-e0Cy2n7t8fmCmEDYP_Xm5-hRnWc7oIR7CkppJY/edit#gid=0
  • Add a little more margin around headings in navbar dropdown — no need; has border
  • Set code width based on font we're using — 73
  • Plausible.io

Paper Bootstrap link in ReadMe.md is dead

Hi,

The paper bootstrap link on Readme.md seems to be generating a 404 error. The site is OK, and I can't find on the site the document that this is likely to refer to.

Much less width is available for code blocks now

Compare these two code blocks before and after updating to BS5.

It seems like we have less width for code blocks now (this matters way less for prose). Is there something that should've been set in the Rmd to help with this? Like a width option to prevent tibble from trying to print so many columns?

Screen Shot 2021-12-21 at 9 26 04 AM

Screen Shot 2021-12-21 at 9 25 55 AM

Add margin/padding between `footer .authors` and `footer .tidyverse`

Only noticed this the ggplot2 page, since it has enough authors to fill out the text:
ggplot2 website footer
ggplot2 website footer tidyverse div selected

footer .tidyverse {
flex: 1;
}
footer .author {
flex: 1;
text-align: right;
}

I'm happy to do a PR, but wanted to give you first dibs since you're up in there anyhow.

Also (I'm guessing it's for a flexbox reason) but adding margin- or padding-left: 1px; does basically nothing, but padding-left: 2px; see below (which I actually think looks fine, but that's just looking at the ggplot page):
image

Add usethis update to Updating list

I think it would be helpful to add a remotes::install_github("r-lib/usethis") bullet to the beginning of the "Updating" list in the readme to make sure we are using the most recent GHA update

Logo location?

In light of the recent conversation about local images and READMEs, where should logo.png live?

For readxl, I just stowed it under tools/, following what I see in readr, but pkgdown assumes logo.png lives in package's top level directory. To get everything logo-related to work (present in index navbar, creation of favicon), I found I had to also place a copy of this file in top-level directory.

background-image: url(../logo.png);

Navbar is extending too far down on small screens

We haven't noticed this issue on any tidyverse packages (because their names are so short), but when the name of a package is long enough and the screen isn't very wide, you end up moving the "part of tidymodels 0.0.1" to the next line, which can cover up some of the screen, especially on mobile.

Here is what it looks like on a full screen laptop (all good here)

Screen Shot 2019-03-21 at 12 24 16 PM

But when you shrink the screen really far you get...

Screen Shot 2019-03-21 at 12 24 02 PM

Unfortunately, this is what it defaults to on most mobile screens because they aren't wide enough. Here is my iPhone 6s:

IMG_6405

Clearly I just need to choose shorter package names.

Links in readme unexpected

link to the tidyverse organisation points to haven package. I find it unexpected. Should it rather points to tidyverse.org instead ?

This is the unexpected line in the readme : [tidyverse organisation](http://github.com/tidyverse/haven)

Design tweaks

  • Give <code> a slight radius
  • Make header colour a slight mix between fg and primary
  • Lighten the sidebar by making headers paler, uppercase, and broadly set

From @dcossyleon

top of content masked by navbar

Top section titles are not visible due to navbar masking them: for example in dplyr pkg page both "Overview" in the main section and "Links" in the sidebar are not visible.
Content should be "shifted down" to take into account of the navbar size.

In the screenshot below you can see that the header 2 (h2) containing the section title text "Overview" is masked by the navbar.

screen shot 2019-01-07 at 9 43 45 am

As an example of a possible solution (but maybe there is a better way), adding margin-top: 60px to the first div of class row solves the issue.

screen shot 2019-01-07 at 9 55 14 am

The issue has been spotted on both Chrome and Firefox.

Template for (core) tidyverse only or also r-lib?

I've noticed that testthat (which is an r-lib package) has a tidyverse-like GitHub pkgdown Page and I was wondering whether styler should also use this template or whether it is only reserved for (as it says in the README) core tidyverse packages. If the latter is the case, are there any recommendations or / and guidelines on how the GitHub pkgdown Page of r-lib packages should look like? Maybe it would even make sense to adapt this template for r-lib packages so that it resembles the one for core tidyverse packages but the two are still distinguishable?

Reference: r-lib/styler#266

Move `master` branch to `main`

The master branch of this repository will soon be renamed to main, as part of a coordinated change across several GitHub organizations (including, but not limited to: tidyverse, r-lib, tidymodels, and sol-eng). We anticipate this will happen by the end of September 2021.

That will be preceded by a release of the usethis package, which will gain some functionality around detecting and adapting to a renamed default branch. There will also be a blog post at the time of this master --> main change.

The purpose of this issue is to:

  • Help us firm up the list of targetted repositories
  • Make sure all maintainers are aware of what's coming
  • Give us an issue to close when the job is done
  • Give us a place to put advice for collaborators re: how to adapt

message id: euphoric_snowdog

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.