Getting Started Guide

Gemfile

@@ -22,6 +22,7 @@ group :jekyll_plugins do
   gem 'jekyll-sitemap'
   gem 'jekyll-feed'
   gem 'jekyll-seo-tag'
+  gem 'jekyll-tabs'
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -158,6 +158,8 @@ GEM
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-swiss (1.0.0)
+    jekyll-tabs (1.2.1)
+      jekyll (>= 3.0, < 5.0)
     jekyll-theme-architect (0.2.0)
       jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
@@ -271,6 +273,7 @@ DEPENDENCIES
   jekyll-feed
   jekyll-seo-tag
   jekyll-sitemap
+  jekyll-tabs
   tzinfo-data
   webrick (~> 1.7)
 

_config.yml

@@ -29,6 +29,7 @@ highlighter: rouge
 # theme: minima
 plugins:
   - jekyll-feed
+  - jekyll-tabs
 
 defaults:
   - scope:

_data/nav.yml

@@ -1,5 +1,5 @@
 - name: Getting Started
-  link: /ontology/start.html
+  link: /ontology/get-started.html
 - name: Releases
   submenuitems:
     - name: Latest Release

_includes/header.html

@@ -18,6 +18,8 @@
   <!-- DataTables CSS -->
   <link href="/vendor/datatables/datatables.min.css" rel="stylesheet">
 
+  <link rel="stylesheet" href="/assets/css/tabs.css">
+
   <!-- Custom fonts for this template -->
   <link href="/vendor/fontawesome-free-6.5.1/css/fontawesome.css" rel="stylesheet">
   <link href="/vendor/fontawesome-free-6.5.1/css/brands.css" rel="stylesheet">

_layouts/default.html

@@ -16,6 +16,7 @@ <h2 class="display-4">
   </div>
   <div class="container">
     {{ content }}
+    <script src="/assets/js/tabs.js"></script>
   </div>
 </section>
 {% include footer.html %}

assets/css/main.css

@@ -37,3 +37,21 @@ footer.footer {
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
+
+table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  background-color: transparent;
+  border-collapse: collapse;
+  color: #333;
+}
+
+table th {
+  font-weight: bold;
+  border-bottom: 2px solid #ccc;
+}
+
+table tr {
+  border-bottom: 1px solid #ccc;
+}

assets/css/tabs.css

@@ -0,0 +1,70 @@
+.tab {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -20px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.tab > * {
+    flex: none;
+    padding-left: 20px;
+    position: relative;
+}
+
+.tab > * > a {
+    display: block;
+    text-align: center;
+    padding: 9px 20px;
+    color: #999;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: transparent;
+    font-size: 12px;
+    text-transform: uppercase;
+    transition: color .1s ease-in-out;
+    line-height: 20px;
+}
+
+.tab > .active > a {
+    color:#222;
+    border-color: #1e87f0;
+}
+
+.tab > li > a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.tab-content {
+    padding: 0;
+}
+
+.tab-content > li {
+    display: none;
+}
+.tab-content > li.active {
+    display: block;
+}
+
+/* The 2 following blocks can be removed if the script is not configured to show the toast message */
+#jekyll-tabs-copy-to-clipboard-message {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    right: 50%;
+    bottom: 30px;
+}
+
+#jekyll-tabs-copy-to-clipboard-message.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}

index.html

@@ -37,7 +37,7 @@ <h1 class="mb-5">
               ><i class="fa-solid fa-circle-nodes text-primary"></i
             ></a>
           </div>
-          <a href="/ontology/start.html"><h3>CDO</h3></a>
+          <a href="/ontology/get-started.html"><h3>CDO</h3></a>
           <p class="lead mb-0">Learn about CASE's parent organization.</p>
         </div>
       </div>