Fixing Asciinemas, Logo Position, and adding SCI-F Apps Documentation (#107)

* fixing logo to be in sidebar, and adding apps page

* fixing asciinema to allow ? in titles

Author: vsoch

_data/sidebars/user_docs.yml

@@ -59,6 +59,10 @@ entries:
       url: /docs-docker
       output: web, pdf
 
+    - title: Reproducible SCI-F Apps
+      url: /docs-scif-apps
+      output: web, pdf
+
     - title: Troubleshooting
       url: /faq#troubleshooting
       output: web, pdf

_includes/asciicast-custom.html

@@ -1,5 +1,5 @@
 <button style='color:white;margin-top:5px' class="btn btn-primary btn-lg asciinema-button" id="{{ include.title | replace:' ','-' }}">Show Video Tutorial</button>
-<div class="hidden" id="asciinema-{{ include.title | replace:' ','-' }}">
+<div class="hidden" id="asciinema-{{ include.uid }}">
     <asciinema-player 
         src="assets/asciicast/{{include.source}}" 
         poster="data:text/plain,{{include.title}}" 

_includes/asciicast.html

@@ -1,5 +1,5 @@
-<button style='color:white;margin-top:5px' class="btn btn-primary btn-lg asciinema-button" id="{{ include.title | replace:' ','-' }}">Show Video Tutorial</button>
-<div class="hidden" id="asciinema-{{ include.title | replace:' ','-' }}">
+<button style='color:white;margin-top:5px' class="btn btn-primary btn-lg asciinema-button" data-id="asciinema-{{ include.uid }}">Show Video Tutorial</button>
+<div class="hidden" id="asciinema-{{ include.uid }}">
     <asciinema-player 
         src="assets/asciicast/{{include.source}}" 
         poster="data:text/plain,{{include.title}}" 

_includes/asciinema.html

@@ -5,8 +5,8 @@
 <script>
 $( document ).ready(function() {
     $(".asciinema-button").click(function(){
-        var asciinemaVideo = "#asciinema-" + $(this).attr('id');
-
+        console.log('rawwwr!')
+        var asciinemaVideo = "#" + $(this).attr('data-id');
         if ($(asciinemaVideo).hasClass('hidden')){
             $(asciinemaVideo).removeClass('hidden');
             $(this).text('Hide Tutorial')

_includes/sidebar.html

@@ -1,10 +1,11 @@
 {% include custom/sidebarconfigs.html %}
 
-{% if site.logo %}
-<div class="shiny"><a href="\"><figure><img src="{{ site.logo }}" class="sidebar-logo"/></figure></a></div>
-{% endif %}
-
 <ul id="mysidebar" class="nav">
+
+    {% if site.logo %}
+    <div class="shiny"><a href="\"><figure><img src="{{ site.logo }}" class="sidebar-logo"/></figure></a></div>
+    {% endif %}
+
     <li class="sidebarTitle">{{sidebar[0].title}}</li>
     {% for entry in sidebar %}
     {% for folder in entry.folders %}

assets/css/theme-blue.css

@@ -101,3 +101,8 @@ li.sidebarTitle {
     margin-left: 5px;
 
 }
+
+.shiny a:hover {
+    background-color: white !important;
+    color: #f5f5f5;
+}

pages/docs/contributing/contributing-docs.md

@@ -127,9 +127,17 @@ echo -e "lines\ncols"|tput -S
 Once you've generated an asciicast, you should drop the file (e.g., `demo-asciicast.js`) into the `assets/asciicast` folder. Since we will have many asciicasts here, please name it meaningfully. Then include the following in the page or post:
 
 ```bash
-{{ "{% include asciicast.html source='demo-asciicast.js' title='How to make demos' author='email@domain.com'" }}%}
+{{ "{% include asciicast.html source='demo-asciicast.js' uid='how-to-make-demos' title='How to make demos' author='email@domain.com'" }}%}
 ```
 
+The fields are important! 
+
+- *source* is the name of the file. It's expected to be in the `assets/asciicast` folder, you just need to put the filename here (or the subfolder, if you created one).
+- *uid* is the name for the id of the div for the asciicast. It should generally be lowercase, no spaces, and long enough to be unique for the page. It will automatically have `asciicast-` added as a prefix, to put the ids for asciicasts in the same namespace in the DOM.
+- *title* is what the user will see before clicking it. This can be a question ("How do I bootstrap a container?") or a statement ("How to bootstrap a container").
+- *author* is your contact email.
+
+
 ## Adding a Release
 
 The releases, akin to the news, are done via a feed. The only difference is that they are rendered on the site in the  <a href="/releases" target="_blank">releases section</a>. It is also done very simply - you just add a new markdown file to the folder `_posts/releases`. The same naming convention follows, however the title of the post should correspond to the release, e.g.:

pages/docs/install/install-linux.md

@@ -39,7 +39,7 @@ sudo make install
 
 note: The 'make install' is required to be run as root to get a properly installed Singularity implementation. If you do not run it as root, you will only be able to launch Singularity as root due to permission limitations.
 
-{% include asciicast.html source='install-singularity.js' title='Install Singularity' author='vsochat@stanford.edu' %}
+{% include asciicast.html source='install-singularity.js' uid='install-singularity' title='Install Singularity' author='vsochat@stanford.edu' %}
 
 
 ### Updating

pages/docs/user-docs/docs-bootstrap-image.md

@@ -125,7 +125,7 @@ The main content of the bootstrap file is broken into sections.
 #### %setup
 Setup is where you might perform actions on the host before we move into the container. For versions earlier than 2.3, or if you need files during `%post`, you should copy files from your host to `$SINGULARITY_ROOTFS` to move them into the container. For 2.3 and cases when you don't need the files until after `%post`, we recommend you use `%files`. We can see the difference between `%setup` and `%post` in the following asciicast:
 
-{% include asciicast.html source='docs-bootstrap-setup-vs-post.json' title='How the container sees setup vs post' author='vsochat@stanford.edu'%}
+{% include asciicast.html source='docs-bootstrap-setup-vs-post.json' uid='container-setup-vs-post' title='How does the container see setup vs post?' author='vsochat@stanford.edu'%}
 
 In the above, we see that copying something to `$SINGULARITY_ROOTFS` during `%setup` was successful to move the file into the container, but copying during `%post` was not.
 

pages/docs/user-docs/docs-create-an-image.md

@@ -75,7 +75,7 @@ $ ls -lh container*.img
 -rwxr-xr-x 1 user group 769M Apr 15 11:11 container.img
 ```
 
-{% include asciicast.html source='docs-create-create.js' title='How to create images' author='davidgodlove@gmail.com'%}
+{% include asciicast.html source='docs-create-create.js' uid='how-to-create-images' title='How to create images' author='davidgodlove@gmail.com'%}
 
 ## Increasing the size of an existing image
 You can increase the size of an image after it has been instantiated by using the `expand` Singularity sub-command as follows:
@@ -110,7 +110,7 @@ $ ls -lh container.img
 
 Similar to the create sub-command, you can override the default size increase (which is 768MiB) by using the `--size` option.
 
-{% include asciicast.html source='docs-create-expand.js' title='How to expand images' author='davidgodlove@gmail.com'%}
+{% include asciicast.html source='docs-create-expand.js' uid='how-to-expand-images' title='How to expand images' author='davidgodlove@gmail.com'%}
 
 ## Mounting an image
 Once an image has been created and an OS has been added with the [`import`](/docs-import) or [`bootstrap`](/docs-bootstrap) commands, you can use the [`shell`](/docs-shell) command to start an interactive shell within the container. But this is not possible when an image does not yet contain a functional OS or shell. For debugging, development, or simply inspecting an image that lacks a functional shell you can use the `mount` command like so:
@@ -133,7 +133,7 @@ Singularity: \w> ls -a
 .  ..  lost+found
 ```
 
-{% include asciicast.html source='docs-create-mount.js' title='How to mount an image' author='davidgodlove@gmail.com'%}
+{% include asciicast.html source='docs-create-mount.js' uid='how-to-mount-an-image' title='How to mount an image' author='davidgodlove@gmail.com'%}
 
 At this point the image just contains a bare file system because we haven't used something like the [`bootstrap`](docs-bootstrap) or [`import`](docs-import) commands to install an OS. 
 
@@ -147,7 +147,7 @@ $ sudo -i
 # singularity mount --writable /home/user/container.img /tmp/container
 ```
 
-{% include asciicast.html source='docs-create-rootmount.js' title='How to mount an image and copy files to it' author='davidgodlove@gmail.com'%}
+{% include asciicast.html source='docs-create-rootmount.js' uid='how-to-mount-and-copy' title='How to mount an image and copy files to it' author='davidgodlove@gmail.com'%}
 
 ## Copying, sharing, branching, and distributing your image
 A primary goal of Singularity is mobility. The single file image format makes mobility easy.