google
Add version number to blockly samples site
Category
Component Blockly Samples site
Is your feature request related to a problem? Please describe. We want to be able to easily see what the latest version of a plugin that is published.
Describe the solution you'd like On our blockly samples site display the version number with each of the plugins.
Describe alternatives you've considered
Additional context
This issue has multiple steps. If you're interested in working on it, you can do any or all of these steps. It's fine to split them up into multiple PRs if you want. Let us know you want to work on it so we know it's been claimed, and please ask questions if you have any or get stuck. To make it easier for new contributors, I'll outline the steps below.
For some background, the samples site displays each plugin and its readme (example). We would like to display the current version number on this site. I don't think we have any specific place in mind; I would probably put it to the left of the "view code" button at the top.
The site is built on jekyll and hosted on GitHub Pages. We use some scripts to prepare each plugin and copy over its data. Changes made to the site, in general, should be on the master branch, in the gh-pages directory. There is also the gh-pages branch, which has the actual hosted content, but this is mostly auto-generated and should not manually be changed. You can look through it to get an idea of how the site works. Each plugin has its build and test directories, which contain the real code for the plugin, but you'll also see the README also has some metadata at the top, between --- lines. Example readme. These values are autogenerated by our scripts, discussed below. They are used in the html of the page. Back on the master branch, we have the layout file for this page and we see that metadata is used inside of curly brackets, e.g. {{ page.packageName }}.
The metadata is generated during the predeploy script. One of the steps adds that metadata (called front matter) and can use information from the package.json.
So in order to close this issue, you need to
- Modify the gulpfile to add the version information to the front matter. Add
version: packageJson.versionto the front matter object. - Modify the layout file to show the version number, if it is present. You can follow the example of how the view on npm button is only shown if packageName is present. You can also read more about Liquid tags in jekyll. You'll reference the variable you just added with
page.version. - If needed, add css.
- Test locally to make sure your changes worked as expected. There are instructions for how to serve locally in the gh-pages readme. You should make sure it looks good for both a plugin and a demo, which may not have a
versionnumber as the demos are not npm packages. - Open your PR and address any PR comments.
After your PR is accepted, a Blockly team member will have to publish the GitHub Pages site, and then you'll be able to see your change live!
