Add debug_github_gitlab to _config.yml

If set to false, only GitHub or GitLab content can be displayed. If set to true, both contents will be displayed one after the other. Additionally, if true, GitHub and GitLab specific content will have a distinctive background taint for easy visual inspection.
carpentries-incubator · May 14, 2021 · 4fa3b25 · 4fa3b25
1 parent c687842
commit 4fa3b25
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 53 deletions.
diff --git a/_config.yml b/_config.yml
@@ -105,6 +105,13 @@ exclude:
   - .vendor/
   - .docker-vendor/
 
+# Set to true to allow displaying GitHub and GitLab
+# content simultaneously, one after the other.
+# Setting this to true also adds a distinctive background
+# colors to GitHub and GitLab blocks.
+debug_github_gitlab: false
+github_or_gitlab: "<span class='github-content'>GitHub</span><span class='gitlab-content'>GitLab</span>"
+
 # Turn on built-in syntax highlighting.
 highlighter: rouge
 

diff --git a/_episodes/introduction.md b/_episodes/introduction.md
@@ -175,46 +175,29 @@ you're unlikely to find cost-free platforms to help you deliver dynamic content.
 
 {::options parse_block_html="true" /}
 
-<article id="github-01">
-
-## GitHub Pages
-
-If the site you want to create is a good match to the strengths of a static site generator -
-it's relatively small, will be updated relatively infrequently, and the content does not need to be personalised to the visitor -
-then creating it with GitHub Pages is a good option.
-GitHub Pages is a system allowing users to create and serve websites directly from their GitHub repositories.
-The service is free for public repositories and simple pages can be created and served with very little configuration required.
-
-Behind the scenes GitHub Pages uses a static site generator called Jekyll, which we're going to learn about later in this lesson.
-First, we need to learn more about how to author and format the content of our pages,
-before configuring GitHub to display this content as a website.
-
-</article>
-
-<article id="gitlab-01">
-
-## GitLab Pages
+## {{ site.github_or_gitlab }} Pages
 
 If the site you want to create is a good match to the strengths of a static site generator -
 it's relatively small, will be updated relatively infrequently, and the content does not need to be personalised to the visitor -
-then creating it with GitLab Pages is a good option.
-GitLab Pages is a system allowing users to create and serve websites directly from their GitLab repositories.
+then creating it with {{ site.github_or_gitlab }} Pages is a good option.
+{{ site.github_or_gitlab }} Pages is a system allowing users to create and serve websites directly from their {{ site.github_or_gitlab }} repositories.
 The service is free for public repositories and simple pages can be created and served with very little configuration required.
 
-Behind the scenes GitLab Pages uses a static site generator to produce your website.
+<span class="github-content">Behind the scenes GitHub Pages uses a static site generator called Jekyll, which we're going to learn about later in this lesson.</span>
+<span class="gitlab-content">Behind the scenes GitLab Pages uses a static site generator to produce your website.
 In the next section we will configure GitLab Pages to use the Jekyll static site generator,
-which we're going to learn about later in this lesson.
+which we're going to learn about later in this lesson.</span>
+
 First, we need to learn more about how to author and format the content of our pages,
-before configuring GitLab to display this content as a website.
+before configuring {{ site.github_or_gitlab }} to display this content as a website.
 
-</article>
 
 ## Setting Up a Repository
 
 Before we get into working with Markdown we must first create a
 repository to work in.
 This repo (short for repository) is similar to a folder on your computer, the main differences
-being that the folder lives on the web in GitHub/GitLab (though you can
+being that the folder lives on the web in {{ site.github_or_gitlab }} (though you can
 also keep a copy on your computer if needed) and that folder is using
 a version control software called [`git`][git] to track changes to the files.
 For our purposes we will mostly be ignoring the version control software,
@@ -225,7 +208,7 @@ the website we will be creating.
 
 {::options parse_block_html="true" /}
 
-<article id="github-02">
+<article class="github-content">
 
 ## GitHub Pages
 
@@ -289,7 +272,7 @@ GitHub will then setup the repo and it should look like the following screenshot
 
 </article>
 
-<article id="gitlab-02">
+<article class="gitlab-content">
 
 > ## Setup a GitLab account
 > Before you can create a repo, you will need to

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -97,10 +97,15 @@
 	{% endif %}
       </ul>
       <div id="github-gitlab-selector" class="navbar-right btn-group" style="padding: 15px 1px 15px 1px;" id="status" data-toggle="buttons">
+        {% if site.debug_github_gitlab %}
+        {% assign ghgl_input_type = "checkbox" %}
+        {% else %}
+        {% assign ghgl_input_type = "radio" %}
+        {% endif %}
         <label class="btn btn-default btn-on btn-xs active">
-        <input type="radio" value="github" name="github-gitlab-selector" checked="checked">GitHub</label>
+          <input type="{{ ghgl_input_type }}" value="github" name="github-gitlab-selector" checked="checked">GitHub</label>
         <label class="btn btn-default btn-off btn-xs ">
-        <input type="radio" value="gitlab" name="github-gitlab-selector">GitLab</label>
+          <input type="{{ ghgl_input_type }}" value="gitlab" name="github-gitlab-selector">GitLab</label>
       </div>
 
       <form class="navbar-form navbar-right" role="search" id="search" onsubmit="google_search(); return false;">

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -16,6 +16,17 @@
     <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/bootstrap-theme.css" />
     <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/lesson.css" />
     <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/syntax.css" />
+    {% if site.debug_github_gitlab %}
+    <!-- Add colors to debug GitHub/GitLab content -->
+    <style>
+      .github-content {
+        background-color: #c8e1ff;
+      }
+      .gitlab-content {
+        background-color: #ffe1b8;
+      }
+    </style>
+    {% endif %}
     <link rel="license" href="#license-info" />
 
     {% include favicons.html %}

diff --git a/assets/css/lesson.scss b/assets/css/lesson.scss
@@ -241,18 +241,6 @@ article pre {
     border: 0;
 }
 
-// Debugging background color to distinguish GitHub and GitLab sections
-$debug_github_gitlab_sections: true;
-
-@if $debug_github_gitlab_sections {
-    article[id^='github-'] {
-        background-color: #fafff4;
-    }
-    article[id^='gitlab-'] {
-        background-color: #fff7ea;
-    }
-}
-
 //----------------------------------------
 // Miscellaneous.
 //----------------------------------------

diff --git a/assets/js/lesson.js b/assets/js/lesson.js
@@ -35,16 +35,21 @@ $(function(){
 // Toggle between GitHub and GitLab content
 // article tags with an id github- or gitlab- are alternatively shown/hidden
 function check_github_gitlab_selection() {
-    if (this.value === 'github' && this.checked) {
-        console.log("Enabling GitHub content");
-        $("article[id^=github-]").show();
-        $("article[id^=gitlab-]").hide();
-    }
-    else if (this.value === 'gitlab' && this.checked) {
-        console.log("Enabling GitLab content");
-        $("article[id^=gitlab-]").show();
-        $("article[id^=github-]").hide();
-    }
+    // Hide all platform specific content first
+    $(".gitlab-content").hide();
+    $(".github-content").hide();
+    // Display only active content
+    $('#github-gitlab-selector input[name=github-gitlab-selector]').each(function () {
+        // Enable then if active in selector buttons
+        if (this.value === 'github' && this.checked) {
+            console.log("Enabling GitHub content");
+            $(".github-content").show();
+        }
+        if (this.value === 'gitlab' && this.checked) {
+            console.log("Enabling GitLab content");
+            $(".gitlab-content").show();
+        }
+    });
 }
 
 $(function() {
@@ -54,7 +59,7 @@ $(function() {
     // Name of url parameter
     let ghgl_attr = "github_gitlab";
     // Widget to select between GitHub and GitLab content
-    let ghgl_selector = $('#github-gitlab-selector input[type=radio][name=github-gitlab-selector]');
+    let ghgl_selector = $('#github-gitlab-selector input[name=github-gitlab-selector]');
 
     if (urlParams.has(ghgl_attr)) {
         // When URL is set we need to get its value to