[DO NOT MERGE] ROOT landing page showcase WIP

.gitignore

@@ -4,6 +4,8 @@ _site
 Gemfile.lock
 .jekyll-cache
 node_modules
-vendor/
+vendor
+!_sass/bootstrap/vendor/
 .project
 .settings
+.bundle

Gemfile

@@ -14,5 +14,6 @@ group :jekyll_plugins do
 end
 
 # Use a stable sass-embedded version to avoid build issues on GitHub Actions
-gem "sass-embedded", "~> 1.68.0"
-
+gem "sass-embedded", "~> 1.99"
+gem "google-protobuf", "~> 4.32"
+gem 'bootstrap', "~> 5.3"

_config.yml

@@ -10,7 +10,6 @@
 # Review documentation to determine if you should use `theme` or `remote_theme`
 # https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#installing-the-theme
 
-# theme                  : "minimal-mistakes-jekyll"
 remote_theme             : "root-project/minimal-mistakes@root-patches"
 minimal_mistakes_skin    : "root" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
 
@@ -216,9 +215,10 @@ kramdown:
 
 # Sass/SCSS
 sass:
-  sass_dir: _sass
   style: compressed # https://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
-
+  load_paths:
+    - _sass
+    - ./vendor/bundle/ruby/3.4.0/gems/bootstrap-5.3.8
 
 # Outputting
 permalink: /:categories/:title/

_includes/figure_jsroot

@@ -6,7 +6,7 @@
 {% assign fig     = {{include.fig}} %}
 {% assign caption = {{include.caption}} %}
 
-{% assign id =  f | append: o | replace: ".root","" | replace: "/","" %}
+{% assign id = "jsroot_" | append: f | append: o | replace: ".root","" | replace: "/","" %}
 
 {% capture sect_size %}{{ sect | size }}{% endcapture %}
 

_includes/footer.html

@@ -1,28 +1,139 @@
 <div class="page__footer-copyright">
-<table id="navtable">
-<tr>
-<td><a href="https://cern.ch">           <img src="{{'/assets/images/cern-logo-large.png'      | relative_url}}" width=50>  </a></td>
-<td><a href="https://www.europa.eu">     <img src="{{'/assets/images/eu.jpg'                   | relative_url}}" width=80>  </a></td>
-<td><a href="https://fnal.gov">          <img src="{{'/assets/images/FNAL-logomark.png'        | relative_url}}" width=50>  </a></td>
-<td><a href="https://www.gsi.de">        <img src="{{'/assets/images/GSI_Logo_rgb.png'         | relative_url}}" width=80>  </a></td>
-<td><a href="https://www.uio.no">        <img src="{{'/assets/images/oslo-university.svg'      | relative_url}}" width=175> </a></td>
-<td><a href="https://www.princeton.edu"> <img src="{{'/assets/images/Princeton.png'            | relative_url}}" width=175> </a></td>
-<td><a href="https://ucsd.edu">          <img src="{{'/assets/images/UCSanDiegoLogo-Black.png' | relative_url}}" width=175> </a></td>
-</tr>
-</table>
+  <table id="navtable">
+    <tr>
+      <td>
+        <a href="https://cern.ch">
+          <img
+            src="{{'/assets/images/cern-logo-large.png'      | relative_url}}"
+            width="50"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://www.europa.eu">
+          <img
+            src="{{'/assets/images/eu.jpg'                   | relative_url}}"
+            width="80"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://fnal.gov">
+          <img
+            src="{{'/assets/images/FNAL-logomark.png'        | relative_url}}"
+            width="50"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://www.gsi.de">
+          <img
+            src="{{'/assets/images/GSI_Logo_rgb.png'         | relative_url}}"
+            width="80"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://www.uio.no">
+          <img
+            src="{{'/assets/images/oslo-university.svg'      | relative_url}}"
+            width="175"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://www.princeton.edu">
+          <img
+            src="{{'/assets/images/Princeton.png'            | relative_url}}"
+            width="175"
+          />
+        </a>
+      </td>
+      <td>
+        <a href="https://ucsd.edu">
+          <img
+            src="{{'/assets/images/UCSanDiegoLogo-Black.png' | relative_url}}"
+            width="175"
+          />
+        </a>
+      </td>
+    </tr>
+  </table>
 
-<hr>
+  <hr />
 
-<table id="navtable">
-<tr>
-<td>Copyright &copy; <a href="{{ 'about' | relative_url }}">ROOT Team</a> {{ 'now' | date: "%Y" }}. All rights reserved.</td>
-</tr>
-</table>
+  <table id="navtable">
+    <tr>
+      <td>
+        Copyright &copy; <a href="{{ 'about' | relative_url }}">ROOT Team</a> {{
+        'now' | date: "%Y" }}. All rights reserved.
+      </td>
+    </tr>
+  </table>
 
-{% assign this_github_root = site.github_baseurl | append: '/' %}
-{% assign this_github_filename = page.path %}
-{% assign this_github_page = this_github_root | append: 'tree/main/' | append: this_github_filename %}
-<div id="ghedit" style="padding-top:32px">
-<a href="{{ this_github_page }}" class="github-corner" aria-label="View/edit this page on GitHub" width="100%"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position:absolute; right:0px; bottom:0px; border: 0; transform: scale(-1, 1);" aria-hidden="true"><title>View/edit this page on GitHub</title><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-</div>
+  {% assign this_github_root = site.github_baseurl | append: '/' %} {% assign
+  this_github_filename = page.path %} {% assign this_github_page =
+  this_github_root | append: 'tree/main/' | append: this_github_filename %}
+  <div id="ghedit" style="padding-top: 32px">
+    <a
+      href="{{ this_github_page }}"
+      class="github-corner"
+      aria-label="View/edit this page on GitHub"
+      width="100%"
+      ><svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        style="
+          fill: #fff;
+          color: #151513;
+          position: absolute;
+          right: 0px;
+          bottom: 0px;
+          border: 0;
+          transform: scale(-1, 1);
+        "
+        aria-hidden="true"
+      >
+        <title>View/edit this page on GitHub</title>
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style="transform-origin: 130px 106px"
+          class="octo-arm"
+        ></path>
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          class="octo-body"
+        ></path></svg></a
+    ><style>
+      .github-corner:hover .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+      }
+      @keyframes octocat-wave {
+        0%,
+        100% {
+          transform: rotate(0);
+        }
+        20%,
+        60% {
+          transform: rotate(-25deg);
+        }
+        40%,
+        80% {
+          transform: rotate(10deg);
+        }
+      }
+      @media (max-width: 500px) {
+        .github-corner:hover .octo-arm {
+          animation: none;
+        }
+        .github-corner .octo-arm {
+          animation: octocat-wave 560ms ease-in-out;
+        }
+      }
+    </style>
+  </div>
 </div>

_includes/footer/custom.html

@@ -33,4 +33,6 @@
 </center>
 <hr>
 
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+
 <!-- end custom footer snippets -->

_includes/head/custom.html

@@ -3,6 +3,10 @@
 <link rel="icon" type="image/png" href={{ "/assets/images/icon-32.png" | relative_url }} sizes="32x32">
 <link rel="icon" type="image/png" href={{ "/assets/images/icon-96.png" | relative_url }} sizes="96x96">
 
+<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">-->
+
+<link href={{ "/assets/css/styles.css" | relative_url }} rel="stylesheet">
+
 <style>
 @font-face {
   font-family: 'OpenSans';
@@ -27,4 +31,4 @@
 a.site-title {
     font-family: "OpenSans";
 }
-</style>
+</style>

_includes/root_showcase.html

@@ -0,0 +1,51 @@
+<div class="row mb-6">
+  <div class="col-12">
+    <p>ROOT provides all the components you need to turn data into results. See it in action below, using data from the <a href="https://cms.cern">CMS</a> experiment at <a href="https://home.cern">CERN:</a></p>
+  </div>
+</div>
+<div class="row align-items-begin mb-6">
+  <div class="col-7" >
+    <div class="card border-0">
+      <div class="card-header px-2">
+        <!--<h3>Code</h3>-->
+        <ul class="nav nav-tabs card-header-tabs">
+          <li class="nav-item">
+            <a href="#cpp" class="nav-link active" data-bs-toggle="tab"
+              >C++</a
+            >
+          </li>
+          <li class="nav-item border-0">
+            <a href="#python" class="nav-link" data-bs-toggle="tab">Python</a>
+          </li>
+        </ul>
+      </div>
+      <div class="card-body card-body-code">
+        <div class="tab-content">
+          <div class="tab-pane fade show active" id="cpp">
+            {% highlight c++ %}
+{% include showcase/dimuon_jpsi.C %}
+            {% endhighlight %}
+          </div>
+          <div class="tab-pane fade" id="python">
+            {% highlight python %}
+{% include showcase/dimuon_jpsi.py %}
+            {% endhighlight %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-5">
+    <div class="card border-0">
+      <div class="card-header px-2">
+        <!--<h3>Result</h3>-->
+      </div>
+      <div class="card-body card-jsroot">
+        {% capture hist_path %}{{ "/gallery/showcase/jpsi.root" | relative_url }}{% endcapture %}
+        {% include figure_jsroot
+            file=hist_path object="Dimuon_mass" width="auto" height="250px"
+        %}
+      </div>
+    </div>
+  </div>
+</div>

_includes/showcase/dimuon_jpsi.C

@@ -0,0 +1,26 @@
+void dimuon_jpsi() {
+  // Load the data
+  ROOT::RDataFrame df("Events", "Run2012BC_DoubleMuParked_Muons.root");
+
+  // Select only events with two oppositely-charged muons
+  auto df_2mu = df.Filter("nMuon == 2 && Muon_charge[0] != Muon_charge[1]");
+
+  // Compute invariant mass of the dimuon system
+  auto df_mass =
+      df_2mu.Define("Dimuon_mass", ROOT::VecOps::InvariantMass<float>,
+                    {"Muon_pt", "Muon_eta", "Muon_phi", "Muon_mass"});
+
+  // Select events within the J/psi mass spectrum
+  auto df_jpsi = df_mass.Filter("Dimuon_mass > 2.95 && Dimuon_mass < 3.25");
+
+  // Make histogram of dimuon mass spectrum
+  auto hist = df_jpsi.Histo1D(
+      {"Dimuon_mass",
+       "Subset of CMS Run 2010B: J/#psi window;#mu#mu mass [GeV];Events",
+       128, 2.95, 3.25},
+      "Dimuon_mass");
+
+  // Draw the histogram
+  auto canvas = std::make_unique<TCanvas>("c", "", 800, 700);
+  hist->DrawCopy();
+}

_includes/showcase/dimuon_jpsi.py

@@ -0,0 +1,28 @@
+import ROOT
+
+# Load the data set
+df = ROOT.RDataFrame("Events", "Run2012BC_DoubleMuParked_Muons.root")
+
+# Select only events with two oppositely-charged muons
+df_2mu = df.Filter("nMuon == 2 && Muon_charge[0] != Muon_charge[1]")
+
+# Compute invariant mass of the dimuon system
+df_mass = df_2mu.Define(
+    "Dimuon_mass", "InvariantMass(Muon_pt, Muon_eta, Muon_phi, Muon_mass)"
+)
+
+# Select events within the J/psi mass spectrum
+df_jpsi = df_mass.Filter("Dimuon_mass > 2.95 && Dimuon_mass < 3.25")
+
+# Make histogram of dimuon mass spectrum
+hist = df_jpsi.Histo1D(
+    (
+        "Dimuon_mass",
+        "Subset of CMS Run 2010B: J/#psi window;#mu#mu mass [GeV];Events",
+        128, 2.95, 3.25,
+    ),
+    "Dimuon_mass",
+)
+
+c = ROOT.TCanvas("c", "", 800, 700)
+hist.Draw()

_layouts/empty.html

@@ -15,4 +15,4 @@
 </div>
 
 </body>
-</html>
+</html>