diff --git a/vignettes/customise.Rmd b/vignettes/customise.Rmd index 44e5691ad..095726b2b 100644 --- a/vignettes/customise.Rmd +++ b/vignettes/customise.Rmd @@ -21,7 +21,7 @@ We'll start by discussing two techniques that only require tweaks to your `_pkgd We'll then discuss how to add additional HTML and other files. Next, we'll discuss how to give multiple sites the same style using a package, then finish up with some workflow advice. -In terms of your `_pkgdown.yml`, this vignette focusses on the most important fields nested under `template` and `navbar`. To learn more about customising other aspect of the site, see the documentation for the indiviudal functions like `build_reference()`, `build_articles()`, `build_home()`, `build_redirects()`, and `init_site()`. To learn about less important fields nested under `template`, see `build_site()`. +In terms of your `_pkgdown.yml`, this vignette focusses on the most important fields nested under `template` and `navbar`. To learn more about customising other aspects of the site, see the documentation for the indiviudal functions like `build_reference()`, `build_articles()`, `build_home()`, `build_redirects()`, and `init_site()`. To learn about less important fields nested under `template`, see `build_site()`. ```{r setup} library(pkgdown) @@ -45,18 +45,18 @@ Upgrading to Bootstrap 5 has a low chance of breaking your site unless you were There are two ways to change the visual style of your site from `_pkgdown.yml`: using a pre-packaged bootswatch theme or customising theme variables with [bslib](https://rstudio.github.io/bslib/). The following sections show you how. -Please note that pkgdown's default theme has been carefully optimised to be accessible, so if you make changes, make sure that to also read `vignette("accessibility")` to learn about potential accessibility pitfalls. +Please note that pkgdown's default theme has been carefully optimised to be accessible, so if you make changes, make sure to also read `vignette("accessibility")` to learn about potential accessibility pitfalls. ### Light switch {#light-switch} -You can provide a "light switch" to allow your uses to switch between dark and light themes by setting the `light-switch` template option to true: +You can provide a "light switch" to allow your users to switch between dark and light themes by setting the `light-switch` template option to true: ```yaml template: light-switch: true ``` -This will add a `lightswitch` component to the navbar, which defaults to appearing at the far right. This allows the user to select light mode, dark mode, or auto mode (which follows the system setting). The modes are applied using Bootstrap 5.3's [colours modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) so are not separate themes, but a thin layer of colour customisation applied via CSS. +This will add a `lightswitch` component to the navbar, which by default appears at the far right. This allows the user to select light mode, dark mode, or auto mode (which follows the system setting). The modes are applied using Bootstrap 5.3's [colours modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) so are not separate themes, but a thin layer of colour customisation applied via CSS. ### Bootswatch themes @@ -109,7 +109,7 @@ template: You can customise other components by setting more specific bslib variables, taking advantage of inheritance where possible. For example, `table-border-color` defaults to `border-color` which defaults to `gray-300`. -If you want to change the colour of all borders, you can set `border-color`; if you just want to change the colour of table borders, you can set `table-border-color`. +If you want to change the colour of all borders, you can set `border-color` and if you just want to change the colour of table borders, you can set `table-border-color`. You can find a full list of variables in the [bslib docs](https://rstudio.github.io/bslib/articles/bs5-variables/index.html). If you're using the light switch, [many colours](https://getbootstrap.com/docs/5.3/customize/color-modes/#sass-variables) are available for customisation specifically for the dark theme. @@ -178,9 +178,9 @@ template: base_font: proxima-nova ``` -Depending on where the font is from (and if you paid money for it), you may need to take additional steps to ensure that it can only be used from your site, and/or make sure that it can still be used when you're previewing locally. If you're having problems getting a custom font to work, looking for errors in the [browser developer console](https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools) is a good place to start. +Depending on where the font is from (and if you purchased it), you may need to take additional steps to ensure that it can only be used from your site, and/or make sure that it can still be used when you're previewing locally. If you're having problems getting a custom font to work, looking for errors in the [browser developer console](https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools) is a good place to start. -When iterating on fonts, you'll need to run `build_home_index(); init_site()` then refresh you browser to see the update. +When iterating on fonts, you'll need to run `build_home_index(); init_site()` then refresh your browser to see the update. ### Syntax highlighting @@ -245,7 +245,7 @@ navbar: You generally don't need to set `bg` if you use a bootswatch theme, as pkgdown will pick the `bg` used on the [Bootstwatch preview](https://bootswatch.com/). Similarly, you don't usually need to set `type` because bootstrap will guess it for you. -If it guesses wrong, override with `type: light` or `type: dark` depending on whether the background colour is light (so you need dark text) or `type: dark` if the background is dark (so you need light text). +If the guess is wrong, you can override with `type: light` or `type: dark` depending on whether the background colour is light (so you need dark text) or `type: dark` if the background is dark (so you need light text). Unfortunately, these are defined relative to the page background, so if you have a dark site you'll need to flip `light` and `dark` (a little experimentation should quickly determine what looks best). Because the navbar is styled with HTML, you'll need to `build_home_index(); init_site()` to see the effect of changing this parameter. @@ -274,13 +274,13 @@ navbar: It makes use of the the following built-in components: - `intro`: "Get Started", which links to a vignette or article with the same name as the package[^dots]. -- `reference`, if there are any `.Rd` files. -- `articles`, if there are any vignettes or articles. -- `tutorials`, if there any tutorials. -- `news`, if `NEWS.md` exists. -- `search`, the search box (see `?build_search` for more details). -- `github`, a link to the source repository (with an icon), if it can be automatically determined from the `DESCRIPTION`. -- `lightswitch`, a ["light switch"](#light-switch) to select light mode, dark mode, or auto mode. +- `reference`: if there are any `.Rd` files. +- `articles`: if there are any vignettes or articles. +- `tutorials`: if there any tutorials. +- `news`: if `NEWS.md` exists. +- `search`: the search box (see `?build_search` for more details). +- `github`: a link to the source repository (with an icon), if it can be automatically determined from the `DESCRIPTION`. +- `lightswitch`; a ["light switch"](#light-switch) to select light mode, dark mode, or auto mode. Note that customising `navbar` like this comes with a downside: if pkgdown later changes the defaults, you'll have to update your `_pkgdown.yml`. @@ -353,7 +353,7 @@ template: after_navbar: ``` -These includes will appear on all screen sizes, and will not be collapsed into the the navbar drop down. +These inclusions will appear on all screen sizes, and will not be collapsed into the the navbar drop down. You can also customise the colour scheme of the navbar by using the `type` and `bg` parameters. See above for details. @@ -374,12 +374,12 @@ footer: Which uses two of the three built-in components: -- `developed_by`, a sentence describing the main authors of the package. (See `?build_home` if you want to tweak *which* authors appear in the footer.) -- `built_with`, a sentence advertising pkgdown. -- `package`, the name of the package. +- `developed_by`: a sentence describing the main authors of the package. (See `?build_home` if you want to tweak *which* authors appear in the footer.) +- `built_with`: a sentence advertising pkgdown. +- `package`: the name of the package. You can override these defaults with the `footer` field. -The example below puts the authors' information on the right along with a legal disclaimer, and puts the pkgdown link on the left. +The example below puts the author's information on the right along with a legal disclaimer, and puts the pkgdown link on the left. ``` yaml footer: @@ -409,7 +409,7 @@ template: You can include additional files by putting them in the right place: -- `pkgdown/extra.css` and `pkgdown/extra.js` will be copied in to rendered site and linked from `` (after the pkgdown defaults). +- `pkgdown/extra.css` and `pkgdown/extra.js` will be copied to the rendered site and linked from `` (after the pkgdown defaults). - `pkgdown/extra.scss` will be added to the scss ruleset used to generate the site CSS. @@ -440,7 +440,7 @@ template: package: theverybest ``` -You then also need to make sure it's available when your site is build. Typically, you won't want to publish this package to CRAN, but you will want to publish to GitHub. Once you've done that, and assuming you're using the [usethis workflow](https://usethis.r-lib.org/reference/use_pkgdown.html), add the following line to your `DESCRIPTION`: +You then also need to make sure it's available when your site is built. Typically, you won't want to publish this package to CRAN, but you will want to publish to GitHub. Once you've done that, and assuming you're using the [usethis workflow](https://usethis.r-lib.org/reference/use_pkgdown.html), add the following line to your `DESCRIPTION`: ```yaml Config/Needs/website: myorg/theverybest @@ -461,7 +461,7 @@ But please note that these templates aren't suitable for use with your own packa If you are updating a template package that works with pkgdown 1.0.0, create directories `inst/pkgdown/BS5/templates` and `inst/pkgdown/BS5/assets` (if you don't have any templates/assets make sure to a add dummy file to ensure that git tracks them). The `templates` and `assets` directories directly under `inst/pkgdown` will be used by pkgdown 1.0.0 and by pkgdown 2.0.0 if `boostrap: 3`. The directories under `inst/pkgdown/BS5/` will be used for pkgdown 2.0.0 with `boostrap: 5`. -This lets your package support both versions of bootstrap and pkgdown. +This lets your package support both versions of Bootstrap and pkgdown. ## PR previews diff --git a/vignettes/how-to-update-released-site.Rmd b/vignettes/how-to-update-released-site.Rmd index ed5513a98..353d25de9 100644 --- a/vignettes/how-to-update-released-site.Rmd +++ b/vignettes/how-to-update-released-site.Rmd @@ -20,7 +20,7 @@ knitr::opts_chunk$set( This vignette shows you how to update the released version of your site to match the dev version of the site, so the first step is to ensure that the dev site looks the way that you want it. -This site assumes that you're a using recent version of our recommend [pkgdown action](https://github.com/r-lib/actions/blob/HEAD/examples/pkgdown.yaml). If your workflow does not contain `workflow_dispatch`, you will need to update `.github/actions/pkgdown.yaml` by running `use_github_action("pkgdown")`. +This site assumes that you're using a recent version of our recommended [pkgdown action](https://github.com/r-lib/actions/blob/HEAD/examples/pkgdown.yaml). If your workflow does not contain `workflow_dispatch`, you will need to update `.github/actions/pkgdown.yaml` by running `use_github_action("pkgdown")`. ## Process @@ -36,13 +36,13 @@ gert::git_branch_checkout("main") gert::git_pull() ``` -Next figure out the released version that we're updating: +Next figure out the released version that you're updating: ```{r} ver <- desc::desc_get_version()[1, 1:3] ``` -We'll use this to create and checkout the branch that you'll work in: +You will use this to create and checkout the branch that you'll work in: ```{r} gert::git_branch_create(paste0("pkgdown-v", ver), paste0("v", ver)) @@ -76,7 +76,7 @@ If you backport `DESCRIPTION`, you'll also need undo the change to the `Version` desc::desc_set_version(ver) ``` -Now build the site locally and check that it looks as you expect: +Now build the site locally and check that it looks as expected: ```{r} pkgdown::build_site() @@ -123,7 +123,7 @@ This directs pkgdown to "generate different sites for the development and releas The readr package demonstrates what happens in automatic development mode: -[readr.tidyverse.org](https://readr.tidyverse.org) documents the released version, i.e. what `install.packages()` would deliver.\ +[readr.tidyverse.org](https://readr.tidyverse.org) documents the released version, i.e. what `install.packages()` will deliver.\ [readr.tidyverse.org/dev/](https://readr.tidyverse.org/dev/) documents the dev version, i.e. what you'd get by installing from GitHub. In this mode, `pkgdown::build_site()`, consults DESCRIPTION to learn the package's version number. @@ -131,13 +131,13 @@ For a development version number, the rendered site is written to `docs/dev/`. For a released version number, the site is written to `docs/`. (There are also other signals to alert users that they are reading documentation for a dev version vs. a released version.) -Automatic development mode is recommended for packages with a broad user base, because it maximizes the chance that a user will read web-based documentation that reflects the package version that is locally installed. +Automatic development mode is recommended for packages with a broad user base because it maximizes the chance that a user will read web-based documentation which reflects the package version that is locally installed. ### Publishing Now that we've established the meaning of a released (vs dev) site, we have to consider how the site is built (i.e. how the HTML is generated) and deployed (i.e. how the HTML is published to a website so people can see it.). -We recommend `usethis::use_pkgdown_github_pages()` to do basic pkgdown setup and configure a GitHub Actions (GHA) workflow to automatically render and publish the site to GitHub Pages. This function is bascially a shortcut for calling the following functions individually: +We recommend `usethis::use_pkgdown_github_pages()` to do basic pkgdown setup and configure a GitHub Actions (GHA) workflow to automatically render and publish the site to GitHub Pages. This function is basically a shortcut for calling the following functions individually: * `use_pkgdown()` * `use_github_pages()` @@ -235,7 +235,7 @@ In that case, we can cherry pick such a commit by its SHA: git cherry-pick SHA ``` -If that doesn't cover everything, for each file you want to update, identify a Git reference (meaning: a SHA, tag, or branch) where the file is in the desired state. +If that doesn't cover everything for each file you want to update, identify a Git reference (meaning: a SHA, tag, or branch) where the file is in the desired state. Checkout that specific file path from that specific ref: ``` diff --git a/vignettes/linking.Rmd b/vignettes/linking.Rmd index 75bda28e7..2c5d54479 100644 --- a/vignettes/linking.Rmd +++ b/vignettes/linking.Rmd @@ -51,7 +51,7 @@ If pkgdown can find a pkgdown site for the remote package, it will link to it; o url: https://dplyr.tidyverse.org ``` - When this field is defined, pkgdown generate a public facing + When this field is defined, pkgdown generates a public facing [`pkgdown.yml` file](https://dplyr.tidyverse.org/pkgdown.yml) that provides metadata about the site: diff --git a/vignettes/metadata.Rmd b/vignettes/metadata.Rmd index 79c74ad15..09edc6c80 100644 --- a/vignettes/metadata.Rmd +++ b/vignettes/metadata.Rmd @@ -20,9 +20,9 @@ Package authors can customize the metadata used by Twitter and the [Open Graph p You can preview and validate the appearance of the social media cards with online tools: -* [Google Rich Results Test][ogp-validator]; -* Drafting a tweet to yourself; -* Sending yourself a Slack message. +* [Google Rich Results Test][ogp-validator] +* Drafting a tweet to yourself +* Sending yourself a Slack message ## Necessary configuration @@ -78,7 +78,7 @@ The `template: opengraph` section allows you to further customize the social med * `site`: The Twitter handle of the organization affiliated with the package author or sponsoring the package development. - * If only one of `creator` or `site` is included, the provided value will + * If only one of either `creator` or `site` is included, the provided value will be used for both fields. * `card`: The [style of social media card][twitter-card] that Twitter will diff --git a/vignettes/pkgdown.Rmd b/vignettes/pkgdown.Rmd index 643dda46f..22af5467d 100644 --- a/vignettes/pkgdown.Rmd +++ b/vignettes/pkgdown.Rmd @@ -64,8 +64,8 @@ pkgdown's defaults work to ensure that your site is accessible to as many people ## Home page The contents of the home page are automatically generated from `index.md` or `README.md`. -pkgdown tries them in order, so it's possible to have a different display on GitHub and pkgdown by providing both files. -The homepage also includes a sidebar full of useful links; see `?build_home` for how these are generated and how you can customise them. +pkgdown tries to put them in order, so it's possible to have a different display on GitHub and pkgdown by providing both files. +The homepage also includes a sidebar full of useful links (see `?build_home` for how these are generated and how you can customise them). ## Reference @@ -116,7 +116,7 @@ It just re-builds the index page, making it faster to quickly change `_pkgdown.y ## Articles pkgdown will automatically build all vignettes found in `vignettes/`, translating them to HTML files in `articles/`. -It is recommended to name your intro article with your package name to generate a Get Started page automatically. +It is recommended to name your intro article with your package name to generate a "Get Started" page automatically. Due to the way that pkgdown has to integrate R Markdown generated HTML with its own HTML, relatively little control is available over the output format. You can see the details in `?build_articles`.