Prepared for generic page layout (#52)

* Prepared for generic page layout

* Updated the template to use cotainer and added hero option

* Updated course.html to use the new structure

* Updated to 1400px width as max rather than 1600px

* Refactored the default.html to be cleaner and more structurally correct

* Some minor fixes from auto formatting

* Added desktop stylings for content, sidebar navigation, and breadcrumbs

* Moved hero outside main

* [WIP] hid navigation if dropping below 480px wide

* Tidied up some spacing on desktop

* Removed JS code which changes structure of the sidebar

* [fix] styling for pages without a subnav, and breakpoint width

* Added styling to some exiting sidebar menu items

* Fixed several linter issues

* Removed temp div

* Fixed bad merge conflict fix

* linters updated

* linters updated

* removed htmlrc

* wrong branch unding changes

* wrong branch unding changes

---------

Co-authored-by: bp289 <birajpanta112@gmail.com>

Author: SociableSteve

README.md

@@ -292,27 +292,21 @@ Or if you would like to use your package manager to install, you can find instru
 
 https://nodejs.org/en/download/package-manager
 
-Install linters:
-
-    npm ci
-
-This project includes stylelint and eslint.
-
-stylelint(for linting css code):
-
-    npm run css-lint
-
-eslint(will lint everything in the assets folder):
-
-    npm run js-lint
-
-or if you need to specify a directory or a file:
-
-    npx eslint <directory/ file>
-
-To run all linters :
-
-    npm run lint-all
+Install linters: `npm ci`
+
+This project includes liners for HTML, CSS, JavaScript, and markdown files.
+instructions for each
+To run all linters you can use the command `npm run lint`
+For each linter here are the options available:
+
+- stylelint (CSS):
+  - `npm run css-lint`
+- eslint (JavaScript):
+  - `npm run js-lint <(optional)directory/file>` (default directory is current working directory)
+- htmllint (HTML)
+  - `npm run html-lint <(optional)directory/file>` (default directory is current working directory)
+- markdownLint (Markdown)
+  - `npm run md-lint <(required)directory/file>`
 
 ## Overview of site source code
 

assets/images/chevron_right.svg

@@ -85,33 +85,6 @@ function addEvent(elem, evtType, func) {
   }
 }
 
-// parse the page and pick out div's that have a certain class
-// and change those into shaded boxes by adding HTML. this inserts
-// table code, but that should be transparent to all users.
-function renderShadedBoxes() {
-  // prepare the HTML to insert into the divs of target class
-  var insert1 =
-    '<table cellspacing="0" cellpadding="0" class="sb"><tr><td class="sb1"></td><td class="sb2"></td><td class="sb3"></td></tr><tr><td class="sb4">&nbsp;</td><td class="sb5">';
-  var insert2 =
-    '</td><td class="sb6">&nbsp;</td></tr><tr><td class="sb7"></td><td class="sb8"></td><td class="sb9"></td></tr></table>';
-
-  // obtain all the div's of the target class. note that pre-ie7 doesn't return .getAttribute('class') but does return .getAttribute('className') so we check for that specially
-  var oDivs = document.getElementsByTagName("div");
-  var className = "";
-  for (var i = 0; i < oDivs.length; i++) {
-    className =
-      oDivs.item(i).getAttribute("class") ||
-      oDivs.item(i).getAttribute("className"); //alert(className);
-    if (className && className.indexOf("shaded_box") > -1) {
-      //alert(i);
-      oDivs.item(i).innerHTML = insert1 + oDivs.item(i).innerHTML + insert2;
-      oDivs.item(i).className = ""; // this removes the shaded_box class from the original div so the styling i just made takes over
-    }
-  }
-}
-
-// check each page load to see if there is any shaded_box class
-addEvent(window, "load", renderShadedBoxes);
 
 Object.size = function (obj) {
   var size = 0,

assets/js/bioconductor.js

@@ -3,11 +3,100 @@ body {
   margin: 0;
 }
 
-/* "site-container" is the single div containing every other element in the site.
-   it floats center, with no vertical margins, and provides the overall
-   width of the site. we provide both an id and a class name in order
-   to allow more flexible cascading: id rules are highly ranked while
-   class names play nicer with other rules. */
+.container {
+  margin: 0 auto;
+  width: calc(100% - 3rem);
+  max-width: 1400px;
+}
+
+main > .container.main-subnav {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: 300px 1fr;
+  grid-template-areas:
+    "left-col .";
+}
+
+.left-col {
+  grid-area: left-col;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* TODO: shaded box is a legacy block, and included here for backwards compatibility. once the content is updated this should be removed */
+.shaded_box {
+  padding: 0.5rem;
+}
+
+.shaded_box .box_header {
+  font-size: 1rem;
+  text-decoration: underline;
+  font-weight: 700;
+}
+
+.shaded_box .box_header .olive {
+  display: none;
+}
+
+.shaded_box ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav.subnav, .shaded_box {
+  border-radius: 0.5rem;
+  border: 1px solid var(--primary-p75);
+  padding: 0.5rem;
+}
+
+nav.subnav a, .shaded_box ul li {
+  text-decoration: underline;
+  display: block;
+  padding: 0.5rem;
+  padding-bottom: 0.75rem;
+  background-image: url("/images/chevron_right.svg");
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+nav.subnav a, .shaded_box ul li a {
+  color: black;
+}
+
+.breadcrumbs {
+  list-style-type: none;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0 0 0.75rem;
+  padding: 0;
+  line-height: 1.3rem;
+}
+
+.breadcrumbs li:not(:first-of-type) {
+  background-image: url("/images/chevron_right.svg");
+  background-repeat: no-repeat;
+  padding-left: 1.625rem; /* make space for the background image */
+}
+
+.breadcrumbs li:last-of-type {
+  font-weight: bold;
+}
+
+.breadcrumbs a {
+  color: var(--neutral-n400);
+  text-decoration: none;
+}
+
+@media (width <= 768px) {
+  main > .container {
+    display: block;
+  }
+
+.left-col {
+  display: none;
+}
 
 .site-container {
   margin: 0 auto; /* floats the design center */

assets/style/bioconductor-v2.css

@@ -69,39 +69,6 @@ div#PageContent.WithRightRail {
   padding-left: 12px;
 }
 
-/* PageBreadcrumbs contains the page's breadcrumb trail. it lives
-   nested within PageContent in order to flow correctly when
-   breadcrumbs wrap to a second line. we use a background image
-   in order to create the little arrows between elements. */
-#PageBreadcrumbs {
-  padding: 0 0 2em 0; /*border:1px orange solid;*/
-}
-.PageBreadcrumbs {
-  font-family: Helvetica, Arial, Verdana, Sans-serif;
-  font-size: 110%;
-}
-.PageBreadcrumbs ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-.PageBreadcrumbs ul li {
-  display: inline;
-  padding-left: 0.3em;
-  background-image: none;
-}
-.PageBreadcrumbs a,
-.PageBreadcrumbs a:visited {
-  color: #000000;
-  padding-right: 1em;
-  background-image: url(../images/breadcrumb_arrow.gif);
-  background-position: center right;
-  background-repeat: no-repeat;
-}
-.PageBreadcrumbs a:hover {
-  color: #888888;
-}
-
 /* PageInternalLinksMenu contains any links to intra-page anchors
    (i.e., jumps down this page)  */
 .PageInternalLinksMenu ul {
@@ -121,77 +88,6 @@ div#PageContent.WithRightRail {
   white-space: nowrap;
 }
 
-/* RightRail is the right-hand column on some pages. it is a sibling
-   to PageContent. when used, you must add WithRightRail class to the
-   PageContent div in order to save space for RightRail. */
-#RightRail {
-  /* width is 280px or 27%. adjust in concert with width of
-     PageContent.WithRightRail */
-  width: 280px;
-  padding: 140px 20px 0 10px;
-  float: right;
-  background-image: url(../images/rightrail_fade.jpg);
-  background-position: top left;
-  background-repeat: no-repeat;
-  /* fade ends at just under 560px, so make column at least that high
-     to avoid an edge */
-  min-height: 560px;
-  /*border:1px purple solid;*/
-}
-.RightRail {
-  font-family: Verdana, Arial, Helvetica, Sans-serif;
-  font-size: 70%;
-  line-height: 1.3em;
-} /* line-height matches that of .PageContent */
-.RightRail a {
-  color: #1a81c2;
-}
-.RightRail a:visited {
-  color: #1a81c2;
-}
-.RightRail a:hover {
-  color: #4c94c2;
-}
-p.rightrail_header {
-  font-size: 130%;
-  color: #87b13f;
-  font-weight: bold;
-  padding: 0;
-  margin-bottom: 1em;
-}
-
-/* ul lists in right rail are generally pleasing using the
-   background-image trick */
-.RightRail ul {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 0em;
-  margin-bottom: 1em;
-}
-.RightRail ul li {
-  background-image: url(../images/list_bullet_bare.gif);
-  background-position: 0 0.5em;
-  background-repeat: no-repeat;
-  padding-left: 12px;
-}
-
-/* "interior" navigation menu, usually within the RightRail,
-   a simple ul-listing */
-ul.section_nav {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  padding-left: 1em;
-}
-ul.section_nav li {
-  padding-bottom: 1em;
-  font-size: 120%;
-  background-image: url(../images/list_bullet_bare.gif);
-  background-position: 0 0.5em;
-  background-repeat: no-repeat;
-  padding-left: 12px;
-}
-
 /* SiteGlobalFooter is the olive box at page bottom which
    contains global site navigation elements, copyright and logos */
 #SiteGlobalFooter {
@@ -286,40 +182,6 @@ li.footer_nav_list_element {
   border-bottom: 1px #a8bf7c solid;
 }
 
-/* here is the styling for shaded boxes. the content author should NOT
-   use these classes directly... instead, create a div as follows:
-   
-      <div class='shaded_box'>
-          content here
-      </div>
-      
-   when the page loads, JS will check for all div's of class shaded_box
-   and perform the correct HTML munging to create the shading effect. 
-   
-   because we use a table structure to get the effect, you'll see classes
-   sb1 (top-left) through sb9 (bottom-right), reading left-to-right, then
-   top-to-bottom. box sb5, center-center, contains actual content.
-   */
-.shaded_box {
-  border: 1px #d8dcdd solid;
-  padding: 16px;
-  margin: 8px;
-  background-color: #ffffff;
-} /* will be removed after processing the shaded_box div */
-.shaded_box .box_header {
-  font-size: 130%;
-  font-weight: bold;
-}
-.shaded_box .box_header a,
-.shaded_box .box_header a:visited {
-  color: #000000;
-  text-decoration: none;
-}
-.shaded_box .box_header a:hover {
-  color: #87b13f;
-  text-decoration: underline;
-}
-
 .sb {
   width: 100%;
   height: 100%;

assets/style/bioconductor.css

@@ -1,2 +1,3 @@
 --- 
 title: Home
+hero: components/index_hero

content/index.yaml

@@ -3,6 +3,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Content-Language" content="en-us" />
   <meta name="robots" content="all" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <% if item.identifier =~ /^\/help\/bioc-views\/package-pages\// and not
   item.identifier =~ /\/all-/ %>

layouts/_sitehead.html

@@ -0,0 +1,16 @@
+<ul class="breadcrumbs">
+  <% crumbs = get_updated_breadcrumbs(breadcrumbs_trail, item) %>
+  <% crumbs.each_with_index do |crumb, i| %>
+  <% next unless crumb %>
+    <% if (i + 1 < crumbs.length) %>
+      <% 
+        crumb_id = crumb.identifier.to_s.dup
+        crumb_id = "/packages/release/BiocViews.html" if crumb_id == "/packages/"
+        crumb_id.sub!(/BiocViews\.html\/$/, "BiocViews.html")
+      %>
+      <li><a href="<%= crumb_id %>"><%= crumb.attributes[:title] %></a></li>
+    <% else %>
+      <li><%= crumb.attributes[:title] %></li>
+    <% end %>
+  <% end %>
+</ul>

layouts/components/breadcrumbs.html

@@ -0,0 +1 @@
+<p>hello, world</p>

layouts/components/index_hero.html

@@ -0,0 +1,13 @@
+<% if @item.attributes.include? :suppress_subnav and @item[:suppress_subnav] == true %>
+<% elsif @pages.length > 0 %>
+    <nav class="subnav">
+      <% @pages.sort{|a, b| a[:title] <=> b[:title]}.select do |p| %>
+        <a href="<%= p.identifier %>"><%= p[:title] %></a>
+      <% end %>
+    </nav>
+<% end %>
+<% if (@item[:subnav].kind_of? Array) %>
+  <% @item[:subnav].each do |s| %>
+    <%= render(s[:include].to_s) %>
+  <% end %>
+<% end %>