|
| 1 | +## Contributing instructions |
| 2 | + |
| 3 | +We welcome contributions to our guidance or other resources. If you would like to suggest a change, please either [raise an issue](https://github.com/ukhsa-collaboration/statistics-production-hub/issues), [email us](mailto:ukhsa_hopstats@ukhsa.gov.uk) or raise a pull request. |
| 4 | + |
| 5 | +The sections below describe the setup of this repository and how to reproduce some of the markdown features used within the guidance pages. |
| 6 | + |
| 7 | + |
| 8 | +### Interacting with this repository |
| 9 | + |
| 10 | +#### Cloning the repository |
| 11 | + |
| 12 | +In a new folder, using GitBash (or equivalent), run the following code: |
| 13 | + |
| 14 | +``` |
| 15 | +git clone https://github.com/ukhsa-collaboration/statistics-production-hub |
| 16 | +``` |
| 17 | + |
| 18 | +Open the .Rproj file to interact with the contents. You should not need to set any remotes for push/pull operations. |
| 19 | + |
| 20 | +Remember to run `git pull` regularly to keep up to date with the main branch. |
| 21 | + |
| 22 | +#### Branching |
| 23 | + |
| 24 | +The 'main' branch is protected, meaning you will have to create a new branch to make any changes. |
| 25 | + |
| 26 | +To do this, on your local machine, first update your 'main' branch using `git pull`. Then run `git checkout -b branch-name` to create and switch to a new branch. You can switch between branches (for example, to work on different fixes) by using `git checkout branch-name`. |
| 27 | + |
| 28 | +Branch names should be short but descriptive, with each word separated by a hyphen. Author initials should be added to the prefix. For example: `"bc-update-data-vis"`. |
| 29 | + |
| 30 | +Use `git add` and `git commit -m "a clear descriptive commit message"` as usual to stage and commit your changes. |
| 31 | + |
| 32 | +Once you have finished making your changes, push your branch to GitHub (using `git push` - it may give you instructions for setting an upstream branch). Then log in to GitHub and raise a pull request to have your changes reviewed and merged into 'main'. |
| 33 | + |
| 34 | + |
| 35 | +## Building websites with Jekyll and GitHub |
| 36 | + |
| 37 | +[See a useful resource for working with Jekyll in GitHub here](https://carpentries-incubator.github.io/jekyll-pages-novice/). |
| 38 | + |
| 39 | +### Folder and file structure |
| 40 | +The root folder can be used to store any non-website content. |
| 41 | + |
| 42 | +Anything contained within `docs` is used to render the live site (this can be changed if needed via GitHub > Settings > Pages). |
| 43 | + |
| 44 | +Individual pages should be contained within the `docs` folder (not in sub-folders), and in .md format. |
| 45 | + |
| 46 | +The `_includes` folder is used to store .html/.js snippets to be inserted into other files via Liquid commands (for example, `{% include site-nav.html %}`). |
| 47 | + |
| 48 | +The `_layouts` folder is used to store larger template files. |
| 49 | + |
| 50 | +The `assets` folder is used to store .css stylesheets and images. |
| 51 | + |
| 52 | +The `_config.yml` file can be used to store sitewide values. These are then inserted to other pages via Liquid commands (for example, `{{ site.email }}`). |
| 53 | + |
| 54 | +### Creating direct download links for files |
| 55 | +Direct download links are used for files such as the QA review conversation tool. |
| 56 | + |
| 57 | +To get a link: |
| 58 | +1. Navigate to the file in the assets/downloads folder in GitHub (click on the actual file). |
| 59 | +2. Right-click "Raw", and "Copy link address". |
| 60 | +3. Paste that URL into your markdown file, formatting as with any other link. |
| 61 | + |
| 62 | +### Markdown commands used in this site |
| 63 | +Most of what goes into the .md files will be standard markdown. Some other code is custom built for this site, relying on scripts found within the `_includes` folder. |
| 64 | + |
| 65 | +The features used within this site can be replicated as follows. |
| 66 | + |
| 67 | +#### Block quotes |
| 68 | + |
| 69 | +Add an arrow (">") to the start of each line. You can use other markdown tags (headers, bullets) within this. |
| 70 | + |
| 71 | +``` |
| 72 | +> ## Main messages |
| 73 | +> |
| 74 | +> - Message 1 |
| 75 | +> - Message 2 |
| 76 | +> - Message 3 |
| 77 | +``` |
| 78 | + |
| 79 | +#### Expandable sections |
| 80 | + |
| 81 | +First include the hidden content within a 'capture' block like below. |
| 82 | + |
| 83 | +Make sure to add a unique number to the end of each block title. Numbers should be unique across all expandable blocks in the whole document. |
| 84 | + |
| 85 | +``` |
| 86 | +{% capture expandable_content_1 %} |
| 87 | +Content goes here, written in normal markdown. |
| 88 | +{% endcapture %} |
| 89 | +
|
| 90 | +{% capture expandable_content_2 %} |
| 91 | +This is a second expandable section. |
| 92 | +{% endcapture %} |
| 93 | +``` |
| 94 | + |
| 95 | +Then you can use the following code to include expandable sections with the appropriate titles. |
| 96 | + |
| 97 | +The 'block-start' and 'block-end' lines are needed for styling. |
| 98 | + |
| 99 | +The parameter given in 'content' should match the title of the relevant capture block declared above. |
| 100 | + |
| 101 | +Be careful to use a unique number in each line (numbers should also be unique within the entire markdown file). The title will display within the button used to expand the section. |
| 102 | + |
| 103 | +``` |
| 104 | +{% include expandable-block-start.html %} |
| 105 | + {% include expandable-section.html number="1" content=expandable_content_1 title="This is the first title" %} |
| 106 | + {% include expandable-section.html number="2" content=expandable_content_2 title="This is the second title" %} |
| 107 | +{% include expandable-block-end.html %} |
| 108 | +
|
| 109 | +``` |
| 110 | + |
| 111 | + |
| 112 | +#### Code blocks |
| 113 | +```` |
| 114 | +``` |
| 115 | +Code block |
| 116 | +line 2 |
| 117 | +line 3 |
| 118 | +``` |
| 119 | +```` |
| 120 | + |
| 121 | + |
| 122 | +#### Images |
| 123 | + |
| 124 | +To add images to a page, first add the file to the `docs/assets/img/` folder. |
| 125 | + |
| 126 | +Then link using the following code, adding the correct filepath and alt-text: |
| 127 | + |
| 128 | +`<img src="assets/img/laptophands.jpg" alt="A picture of a person working at a laptop">` |
| 129 | + |
| 130 | + |
| 131 | +##### Image and text side-by-side |
| 132 | +If you want to have an image next to some text, you can do that using the code below. |
| 133 | + |
| 134 | +Note that you should specify the image width and height. |
| 135 | + |
| 136 | + |
| 137 | +``` |
| 138 | +<div class="image-text-container"> |
| 139 | + <img src="assets/img/image.png" width="460px" height="318px" alt="provide some alternative text here"> |
| 140 | + <p>The text goes here</p> |
| 141 | +</div> |
| 142 | +``` |
| 143 | + |
| 144 | +#### Title+content cards (like the ones found in the QA guidance) |
| 145 | + |
| 146 | +First include the card content within a 'capture' block like below. |
| 147 | + |
| 148 | +Make sure to add a unique number to the end of each block title. Numbers should be unique across all cards in the whole document. |
| 149 | + |
| 150 | +``` |
| 151 | +{% capture card_content_1 %} |
| 152 | +Content goes here, written in normal markdown. |
| 153 | +{% endcapture %} |
| 154 | +
|
| 155 | +{% capture card_content_2 %} |
| 156 | +This is content for a second card. |
| 157 | +{% endcapture %} |
| 158 | +``` |
| 159 | + |
| 160 | +Then you can use the following code to include cards with the appropriate titles. |
| 161 | + |
| 162 | +The 'container-start' and 'container-end' lines are needed for styling. |
| 163 | + |
| 164 | +The parameter given in 'content' should match the title of the relevant capture block declared above. |
| 165 | + |
| 166 | +``` |
| 167 | +{% include cards-container-start.html %} |
| 168 | + {% include card.html content=card_content_1 title="This is the first title" %} |
| 169 | + {% include card.html content=card_content_2 title="This is the second title" %} |
| 170 | +{% include cards-container-end.html %} |
| 171 | +
|
| 172 | +``` |
| 173 | + |
| 174 | + |
| 175 | +### Setting up a local testing environment |
| 176 | +Unless you set up a local testing environment, the only way to see what your changes will look like is to push them to main and have GitHub rebuild the live site. This obviously comes with inherent risks. |
| 177 | + |
| 178 | +[Follow this guide](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll). |
| 179 | + |
| 180 | +First, you will need to install Ruby. Then run `gem install bundler` to install the bundler gem. Getting this to work around permission restrictions can be difficult. You should get in touch with your IT department to support with this, and ChatGPT can also be your friend in understanding how to get around certain error messages! |
| 181 | + |
| 182 | +Once you have managed to install Ruby and the Bundler gem, you should create a Gemfile and add it to your project (you can copy the example in the root of this project). Then run `bundler install` in your terminal. Make sure to run `bundler update github-pages` on a semi-regular basis, otherwise your local testing environment might look different to the published version. |
| 183 | + |
| 184 | +To create the locally hosted site, navigate to the 'docs' folder in GitBash (for example, using `cd docs`), then run the following command: `bundler exec jekyll serve`. This will give a server address; navigate there to see your site. |
0 commit comments