Commit 32706ff7 authored by Craig Russell's avatar Craig Russell
Browse files

adding template for testing

parent d4abe33a
# BinderHub Custom Files
This repository holds a template for customising a Binder homepage.
See the [BinderHub Customisation documentation](https://binderhub.readthedocs.io/en/latest/customizing.html#template-customization) for more details.
## How to change the logo on your Binder homepage
#### 1. Fork this repo.
#### 2. Upload your custom logo image into the `static` folder in your fork.
This can be any valid image type, for example PNG, JPEG, SVG...
#### 3. Edit `page.html` in the `templates` folder in your fork.
Change `<custom-logo-file>` on line 3 of [`page.html`](templates/page.html) to the name of your custom logo file.
#### 4. Edit your `config.yaml` file
Add the following to your `config.yaml` file.
```
config:
BinderHub:
template_path: /etc/binderhub/custom/templates
extra_static_path: /etc/binderhub/custom/static
extra_static_url_prefix: /extra_static/
template_variables:
EXTRA_STATIC_URL_PREFIX: "/extra_static/"
initContainers:
- name: git-clone-templates
image: alpine/git
args:
- clone
- --single-branch
- --branch=master
- --depth=1
- --
- https://github.com/<your-github-username>/binderhub-custom-files
- /etc/binderhub/custom
securityContext:
runAsUser: 0
volumeMounts:
- name: custom-templates
mountPath: /etc/binderhub/custom
extraVolumes:
- name: custom-templates
emptyDir: {}
extraVolumeMounts:
- name: custom-templates
mountPath: /etc/binderhub/custom
```
**NOTES:**
* Remember to replace `<your-github-username>` in the repo URL
* If you have commited the changes in steps [2](#2-upload-your-custom-logo-image-into-the-static-folder-in-your-fork) or [3](#3-edit-pagehtml-in-the-templates-folder-in-your-fork) to any other branch of your fork, you either need to merge to `master` or change the `--branch=` argument to match the name of your branch.
#### 5. Upgrade your BinderHub and visit the Binder page
Upgrade your BinderHub with the following command.
```
helm upgrade <hub-name> jupyterhub/binderhub --version=0.2.0-<commit-hash> -f path/to/secret.yaml -f path/to/config.yaml
```
where `<hub-name>` is the `nam`/`namespace` you gave to your BinderHub when you deployed it, and `<commit-hash>` is the version of the BinderHub Helm Chart you deployed.
Other Helm Chart commit hashes are available [here](https://jupyterhub.github.io/helm-chart/#development-releases-binderhub).
Now visit your Binder page to see your new logo!
To get the IP address, run the following command and copy the output of `EXTERNAL-IP` into a browser.
```
kubectl get svc binder --namespace <hub-name>
```
{% extends "templates/index.html" %}
{% block header %}
<div id="header" class="text-center">
<h3>Try BioExcel Building Blocks workflows as interactive notebooks</h3>
<div id="explanation">
This is an installation of BinderHub in EMBL-EBI where everyone can experiment with biobb notebooks in an executable environment.
</div>
</div>
{% endblock header %}
{% block how_it_works %}
<div id="how-it-works">
<h3 class="text-center">How it works</h3>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-orange">1</span>
</div>
<div class="col-md-7 front">
<span class="front-em">Have you come here from <a target="_blank" href="https://mmb.irbbarcelona.org/biobb/workflows">the biobb worklows page</a>?</span><br />If not, better start there and launch your notebook, by clicking “Execute in Binder for biobb”. If this is, what you have just done, keep on reading.
</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-red">2</span>
</div>
<div class="col-md-7 front">
<span class="front-em">We ask you to log in with your Github account.</span><br />We will use your username information exclusively to distinguish unique users from one another.
Binder for biobb is a small installation and to promote fair use of our resources, one user is allowed to run only one notebook server at a time. Launching a new notebook server should stop the previous one.
Users cannot see the notebooks run by other users, but please avoid entering secret data to the notebooks.
</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2 point-container">
<span class="point point-blue">3</span>
</div>
<div class="col-md-7 front">
<span class="front-em">Interact with biobb notebooks in a live environment!</span><br />Remember that a notebook session is short-lived and the results are not permanent. Experiment freely, but expect that your session might be ended after some time and results lost.
</div>
</div>
</div>
{% endblock how_it_works %}
\ No newline at end of file
{% extends "templates/loading.html" %}
{% block footer %}
{{ super() }}
<script type="text/javascript">
const biobb_messages = [
'We use the <a target="_blank" href="https://repo2docker.readthedocs.io/">repo2docker</a> tool to automatically build the environment for the notebooks.',
'If a repository takes a long time to launch, it is usually because Binder needs to create the environment for the first time.',
'The tool that powers this page is called <a target="_blank" href="https://binderhub.readthedocs.io">BinderHub</a>. It is an open source tool that you can deploy yourself.',
'Empty log? Notebook not loading? Maybe your ad blocker is interfering. Consider adding this site to the list of trusted sources.',
'Your launch may take longer after a new release of biobb tutorials. This is because our machine needs to create your environment.',
]
var loaderDiv = document.querySelector("div#loader-links");
var loaderDivInnerHtml = "<p>We use the <a target='_blank' href='https://repo2docker.readthedocs.io/'>repo2docker</a> tool to automatically build the environment for the notebooks.</p>";
loaderDiv.innerHTML = loaderDivInnerHtml;
biobbHelpText = function(){
var text = document.querySelector("div#loader-links p");
if (text !== null) {
if (!text.classList.contains("longLaunch")) {
// Pick a random help message and update
var msg = biobb_messages[Math.floor(Math.random() * biobb_messages.length)];
} else {
var msg = 'Your session is taking longer than usual to start!<br />Check the log messages below to see what is happening.';
}
text.innerHTML = msg;
}
}
const launchMessageInterval = 6 * 1000
setInterval(biobbHelpText, launchMessageInterval);
</script>
{% endblock footer %}
\ No newline at end of file
{% extends "templates/page.html" %}
{% block title %}Binder for Biobb{% endblock %}
{% block head %}
<link rel="icon" href="{{ EXTRA_STATIC_URL_PREFIX }}biobbfav.png" type="image/x-icon">
<link href="{{static_url("dist/styles.css")}}" rel="stylesheet"></link>
<style>
@media screen and (min-width: 768px){
.logocontainer {
width: 765px;
}
}
.logocontainer {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
</style>
{% endblock head %}
{% block logo %}
<div id="banner-container" style="padding: 20px; height: 75px;">
<div style="float: left">
<img style="width:100px;" src="{{ EXTRA_STATIC_URL_PREFIX }}bioexcel.png">
</div>
<div style="float: right">
<img style="width:100px;" src="{{ EXTRA_STATIC_URL_PREFIX }}emblebi.png">
</div>
</div>
</div>
<div id="logo-container" class="logocontainer">
<img id="logo" style="padding-top: 25px;padding-left: 0px;padding-right: 0px " src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyMTIuMTE4cHgiDQoJIGhlaWdodD0iNjUuODgzcHgiIHZpZXdCb3g9IjAgMCAyMTIuMTE4IDY1Ljg4MyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEyLjExOCA2NS44ODMiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN3aXRjaD4NCgk8Zz4KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiM1NDU0NTQiIGQ9Ik01MC43NTEsNDguNzI3VjEyLjQ3Mmg3LjI1MXYxNy41NDdjMS44ODUtMi4zMiw0LjU0NC0zLjA5NCw3LjI5OS0zLjA5NA0KCQkJCWM2LjA0MiwwLDEwLjU4Niw1LjI2OSwxMC41ODYsMTEuMTY3UzcxLjM0NCw0OS4yMSw2NS4zMDIsNDkuMjFjLTIuNzU1LDAtNS44NDktMC44Ny03LjI5OS0zLjA0NnYyLjU2Mkg1MC43NTF6IE02My4wNzgsNDMuNDA5DQoJCQkJYzIuOSwwLDUuMDc2LTIuNTE0LDUuMDc2LTUuMzE3cy0yLjE3NS01LjMxNy01LjA3Ni01LjMxN3MtNS4wNzYsMi41MTQtNS4wNzYsNS4zMTdTNjAuMTc4LDQzLjQwOSw2My4wNzgsNDMuNDA5eiIvPg0KCQkJPHBhdGggZmlsbD0iIzU0NTQ1NCIgZD0iTTg0LjM1LDE1Ljg1NWMyLjMyLDAsNC4yNTQsMS44ODUsNC4yNTQsNC4yNTRjMCwyLjMyLTEuOTM0LDQuMjU0LTQuMjU0LDQuMjU0DQoJCQkJYy0yLjM2OSwwLTQuMjU0LTEuOTM0LTQuMjU0LTQuMjU0QzgwLjA5NiwxNy43NDEsODEuOTgxLDE1Ljg1NSw4NC4zNSwxNS44NTV6IE04MC43MjQsNDguNzI3VjI3LjQwOWg3LjI1MXYyMS4zMThIODAuNzI0eiIvPg0KCQkJPHBhdGggZmlsbD0iIzU0NTQ1NCIgZD0iTTExNS44MTksNDguNzI3aC03LjI1VjM2LjY0MmMwLTIuNTE0LTAuOTY3LTMuODY3LTMuMjM5LTMuODY3cy00LjA2MSwyLjQxNy00LjA2MSw1LjMxN3YxMC42MzVoLTcuMjUxDQoJCQkJVjI3LjQwOWg3LjI1MXYyLjYxYzEuNDUtMS44MzcsMy43MjItMy4wOTQsNi41MjYtMy4wOTRjNS43MDQsMCw4LjAyNCwzLjkxNiw4LjAyNCw5LjcxNlY0OC43Mjd6Ii8+DQoJCQk8cGF0aCBmaWxsPSIjNTQ1NDU0IiBkPSJNMTQ0LjgyNiw0OC43MjdoLTcuMjUxdi0yLjU2MmMtMS40NSwyLjE3Ni00LjU5MiwzLjA0Ni03LjI5OSwzLjA0NmMtNi4wNDMsMC0xMC41ODctNS4yMjEtMTAuNTg3LTExLjExOA0KCQkJCXM0LjU0NC0xMS4xNjcsMTAuNTg3LTExLjE2N2MyLjcwNywwLDUuNDE0LDAuNzczLDcuMjk5LDMuMDk0VjEyLjQ3Mmg3LjI1MVY0OC43Mjd6IE0xMzIuNDk5LDMyLjc3NA0KCQkJCWMtMi45LDAtNS4wNzUsMi41MTQtNS4wNzUsNS4zMTdzMi4xNzUsNS4zMTcsNS4wNzUsNS4zMTdzNS4wNzYtMi41MTQsNS4wNzYtNS4zMTdTMTM1LjM5OSwzMi43NzQsMTMyLjQ5OSwzMi43NzR6Ii8+DQoJCQk8cGF0aCBmaWxsPSIjNTQ1NDU0IiBkPSJNMTczLjYzOSwzOC45NjJoLTE2LjUzMmMwLDIuNDY2LDEuNzQsNS4wNzUsNC41OTIsNS4wNzVjMi41NjIsMCw0LjE1OC0xLjY5MSw0LjIwNi0zLjIzOGg3LjM5Ng0KCQkJCWMtMS4yNTYsNS42MDctNS44MDEsOC40MTEtMTEuNDU2LDguNDExYy03LjM0OCwwLTEyLjQyMy00LjM1MS0xMi40MjMtMTEuMTE4YzAtNi42NzEsNS4yNjktMTEuMTY3LDEyLjQyMy0xMS4xNjcNCgkJCQljNi40NzgsMCwxMS44NDMsMy44NjcsMTEuODQzLDEwLjY4M0MxNzMuNjg3LDM4LjA0MywxNzMuNjM5LDM4LjUyNywxNzMuNjM5LDM4Ljk2MnogTTE2Ni43MjYsMzUuNTNjMCwwLTAuMzM4LTMuOTY0LTQuNzM2LTMuOTY0DQoJCQkJYy00LjU0NSwwLTQuNzg2LDMuOTY0LTQuNzg2LDMuOTY0SDE2Ni43MjZ6Ii8+DQoJCQk8cGF0aCBmaWxsPSIjNTQ1NDU0IiBkPSJNMTg1LjUzMiwzOC4wOTJ2MTAuNjM1aC03LjI1MVYyNy40MDloNy4yNTF2Mi42MWMxLjExMS0xLjU5NSwyLjk0OS0zLjA5NCw1LjYwNy0zLjA5NA0KCQkJCWMwLjYyOSwwLDEuNTk2LDAuMTkzLDIuMTc2LDAuNDgzdjYuNTc0aC0wLjA5OGMtMC43MjUtMC44Ny0xLjc4OC0xLjIwOC0yLjktMS4yMDhDMTg3LjYxLDMyLjc3NCwxODUuNTMyLDM1LjUzLDE4NS41MzIsMzguMDkyeiINCgkJCQkvPg0KCQk8L2c+DQoJCTxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRjVBMjUyIiBzdHJva2Utd2lkdGg9IjQuODM0MiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBjeD0iMjcuODc5IiBjeT0iMjMuOTM5IiByPSI5LjU0MiIvPg0KCQk8Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU3OUFDQSIgc3Ryb2tlLXdpZHRoPSI0LjgzNDIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjI3Ljg3OSIgY3k9IjQyLjQ5OSIgcj0iOS41NDMiLz4NCgkJPGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiNFNjY1ODEiIHN0cm9rZS13aWR0aD0iNC44MzQyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSIxOC41NTEiIGN5PSIzMy4yODkiIHI9IjkuNTQzIi8+DQoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzU3OUFDQSIgc3Ryb2tlLXdpZHRoPSI0LjgzNDIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTIwLjE5NiwzNi44MzYNCgkJCWMwLjc1OS0xLjAzMSwxLjc0LTEuOTI3LDIuOTIxLTIuNjA3YzQuNTY2LTIuNjMsMTAuNDAxLTEuMDYsMTMuMDMxLDMuNTA3Ii8+DQoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Y1QTI1MiIgc3Ryb2tlLXdpZHRoPSI0LjgzNDIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTE5LjYxLDI4LjcwMQ0KCQkJYy0yLjYzLTQuNTY2LTEuMDYxLTEwLjQwMSwzLjUwNy0xMy4wMzJjNC41NjctMi42MywxMC40MDEtMS4wNTksMTMuMDMxLDMuNTA4Ii8+DQoJPC9nPg0KPC9zd2l0Y2g+DQo8L3N2Zz4NCg==" width="360px">
<img style="padding-top: 3px" src="{{ EXTRA_STATIC_URL_PREFIX }}for.png" width="100px">
<img style="padding-top: 3px" src="{{ EXTRA_STATIC_URL_PREFIX }}biobb.png" width="250px">
</div>
{% endblock logo %}
{% block footer %}
<div class="container">
<div class="row text-center">
<h3>questions?<br/>read about <a href="https://mmb.irbbarcelona.org/biobb/workflows">the workflows</a>, see the <a href="https://github.com/jupyterhub/binderhub">BinderHub code</a>, ask for help with <a href="mailto:ecp@ebi.ac.uk">Binder for biobb</a></h3>
</div>
</div>
{% endblock footer %}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment