- initial attempt at partners & nav

Signed-off-by: Girish Ranganathan <[email protected]>

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-ruby '2.6.3'
+ruby '2.6.5'
 
 gem 'materialize-sass'
 gem "jekyll", "~> 3.8.5"

Gemfile.lock

@@ -24,6 +24,7 @@ GEM
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.10.4)
+      nokogiri (~> 1.8)
       rack (>= 1.6.0)
       rack-test (>= 0.6.3)
       regexp_parser (~> 1.5)
@@ -163,7 +164,7 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.7)
     selenium-webdriver (3.142.3)
       childprocess (>= 0.5, < 2.0)
-      rubyzip (~> 1.3, >= 1.3.0)
+      rubyzip (~> 1.2, >= 1.2.2)
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -199,7 +200,7 @@ DEPENDENCIES
   tzinfo-data
 
 RUBY VERSION
-   ruby 2.6.3p62
+   ruby 2.6.5p114
 
 BUNDLED WITH
-   1.17.2
+   1.17.3

Makefile

@@ -14,4 +14,4 @@ setup:
 	ADMIN=on bundle install
 
 docker:
-	docker run --name layer5 --rm -p 4000:4000 -v `pwd`:"/srv/jekyll" jekyll/jekyll:3.8.5 bash -c "bundle install; jekyll serve --drafts --livereload"
+	docker run --name layer5 --rm -p 4000:4000 -v `pwd`:"/srv/jekyll" jekyll/jekyll:4.0.0 bash -c "bundle install; jekyll serve --drafts --livereload"

_data/navigation.yaml

@@ -0,0 +1,40 @@
+- name: Blog
+  link: /blog/
+  new_window: false
+  highlight: false
+- name: Projects
+  link: /community/
+  new_window: false
+  highlight: false
+  subitems:
+    - name: Meshery
+      link: /meshery/
+      new_window: false
+    - name: Service Mesh Performance Specification
+      link: https://github.com/layer5io/service-mesh-benchmark-spec
+      new_window: true
+- name: Community
+  link: https://github.com/layer5io/meshery
+  new_window: false
+  highlight: false
+  subitems: 
+    - name: Slack
+      link: http://slack.layer5.io/
+      new_window: true
+    - name: GitHub
+      link: https://github.com/layer5io
+      new_window: true
+# - name: Login
+#   link: /
+#   new_window: true
+#   highlight: false
+- name: Resources
+  new_window: false
+  highlight: true
+  subitems:
+    - name: Books
+      link: /community/
+      new_window: false
+    - name: Workshops
+      link: /community/
+      new_window: false

_data/partners.yaml

@@ -0,0 +1,11 @@
+- name: University of Engineering & Management (UEM), Jaipur
+  link: https://uem.edu.in/uem-jaipur/
+  desc: |
+    We have partnered with the University of Engineering & Management (UEM), Jaipur. As part of the partnership program we have a wide variety of interns from the univeristy participate in our open source projects. 
+    As part of the internship the interns get the opportunity to work on cutting edge cloud native technologies and
+    To see the participating interns please checkout <a href="https://meshery.io/community/">our community members</a> page.
+  img: /assets/images/partners/UEM_logo.jpg
+  style: "height:340px;"
+  eurl: https://dockercon18.smarteventscloud.com/connect/sessionDetail.ww?SESSION_ID=187485
+  visibility: ""
+

_includes/banner.html

@@ -2,7 +2,8 @@
  <div style="background-color: #FFF;height: 100px;" >
    <div class="section container">
       <div style="display: inline; float:right; padding-left:5%; ">  
-          {% include partials/hori-social.html %} 
+          <!-- {% include partials/hori-social.html %}  -->
+          {% include partials/top-nav.html %} 
       </div>
       <div style="display: inline;">
       <a href="/">

_includes/careers/partners.html

@@ -0,0 +1,61 @@
+<div style="z-index:20;">
+<h3 class="black-text">Layer5 Partners Program</h3>
+
+    <div id="layer5-intro" class="card-content" style="position:relative;float:right;" >
+      <iframe width="392" height="220.5" src="https://www.youtube.com/embed/0yN5T5LB9ps" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+
+    <div>  
+       <ul>
+         <ol><b>What is Layer5 Partners Program?</b></ol>
+         <ol>While small, the Layer5 community represents the largest collection of service mesh projects and their maintainers in the world. We build projects to provide learning environments, deployment and operational best practices, performance benchmarks, create documentation, share networking opportunities, and more. Our shared commitment to the open source spirit pushes Layer5 projects forward. New members are always welcome.
+         </ol>
+       </ul>
+
+        <div id="gsoc-2019" class="card-content" style="position:relative;float:center;vertical-align: bottom;" >
+            <h3 style="text-align:center;color:aliceblue;">
+                <a style="font-size:.7em;padding-bottom:40px;padding-top:10px;width:auto;" 
+                  class="waves-effect waves-dark btn white-text darken-2 l5-light-blue z-depth-4"
+                   href="/internships">See Available Opportunities</a></h3>
+        </div>      
+    </div>
+
+</div>
+
+{% for partner in site.data.partners %}
+{% if partner.visibility != "hide" %}
+<div class="row" style="position: relative;overflow: auto;" itemprop="articleBody">
+  {% capture parter_desc %}
+  <div class="col s12 m8">
+      <h3 style="color:#111111;text-align: center;">{{partner.name}}</h3>
+      <p style="margin-left:10px; padding-right:1em;">
+        {{partner.desc}}
+        <br />
+        Please feel free to checkout our partners site <a href="{{partner.link}}">here</a>.
+      </p>
+  </div>
+  {% endcapture %}
+  {% capture parter_image %}
+  <div class="col s12 m4">
+    <div style="text-align:center; vertical-align:middle; position:relative;float:right;">
+      <a href="https://raw.githubusercontent.com/layer5io/layer5/master/{{partner.img}}">
+        <img src="{{partner.img}}" width="100%"
+          alt="{{partner.name}}"></a>
+      </div> 
+  </div>
+  {% endcapture %}
+
+  {% assign cont = forloop.index | modulo: 2 %}
+    {% if cont == 0 %}
+      {{ parter_desc }}
+      {{ parter_image }}
+    {% else %}
+      {{ parter_image }}
+      {{ parter_desc }}
+    {% endif %}
+
+</div>
+
+  {% endif %}
+
+  {% endfor %}

_includes/partials/top-nav.html

@@ -0,0 +1,117 @@
+<nav>
+    <div class="nav-wrapper">
+        <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
+        <ul class="right hide-on-med-and-down">
+	{% for link in site.data.navigation %}
+		{% assign class = "" %}
+
+        {% comment %}
+        {% if link.highlight %}
+            {% assign class = class | append: " highlight" %}
+        {% endif %}
+        {% endcomment %}
+
+		{% if link.link == page.url %}
+			{% assign class = class | append: " active" %}
+        {% endif %}
+        {% assign dataTarget = "" %}
+        {% assign lInd = forloop.index %}
+        {% if link.subitems[0] %}
+            {% assign class = class | append: " dropdown-button" %}
+            {% assign dataTarget = "dropdown" | append: lInd %}
+        {% endif %}
+        <li><a href="{% if link.subitems[0] %}#!{% else %}{{link.link}}{% endif %}" class="{{ class }}" 
+            {% if link.new_window %}target="_blank"{% endif %} data-activates="{{dataTarget}}">
+            {{ link.name }}
+            {% if link.subitems[0] %}<i class="material-icons right">arrow_drop_down</i>{% endif %}
+        </a>
+
+        {% if link.subitems[0] %}
+            <ul id="dropdown{{lInd}}" class="dropdown-content">
+            {% for sublink in link.subitems %}
+                <li><a href="{{sublink.link}}" {% if sublink.new_window %}target="_blank"{% endif %}>{{sublink.name}}</a></li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+        </li>
+
+    {% endfor %}
+        </ul>
+    </div>
+
+    <ul class="sidenav" id="mobile-menu">
+            {% for link in site.data.navigation %}
+            {% assign class = "" %}
+
+            {% comment %}
+            {% if link.highlight %}
+                {% assign class = class | append: " highlight" %}
+            {% endif %}
+            {% endcomment %}
+
+            {% if link.link == page.url %}
+                {% assign class = class | append: " active" %}
+            {% endif %}
+            {% assign dataTarget = "" %}
+            {% assign lInd = forloop.index %}
+            {% if link.subitems[0] %}
+                {% assign class = class | append: " dropdown-button" %}
+                {% assign dataTarget = "sidedropdown" | append: lInd %}
+            {% endif %}
+            <li><a href="{% if link.subitems[0] %}#!{% else %}{{link.link}}{% endif %}" class="{{ class }}" 
+                {% if link.new_window %}target="_blank"{% endif %} data-activates="{{dataTarget}}">
+                {{ link.name }}
+                {% if link.subitems[0] %}<i class="material-icons right">arrow_drop_down</i>{% endif %}
+            </a>
+
+            {% if link.subitems[0] %}
+                <ul id="sidedropdown{{lInd}}" class="dropdown-content">
+                {% for sublink in link.subitems %}
+                    <li><a href="{{sublink.link}}" {% if sublink.new_window %}target="_blank"{% endif %}>{{sublink.name}}</a></li>
+                {% endfor %}
+                </ul>
+            {% endif %}
+            </li>
+
+        {% endfor %}
+    </ul>
+</nav>
+
+
+
+<!-- <ul id="dropdown1" class="dropdown-content">
+    <li><a href="#!">one</a></li>
+    <li><a href="#!">two</a></li>
+    <li class="divider"></li>
+    <li><a href="#!">three</a></li>
+  </ul>
+  <nav>
+    <div class="nav-wrapper">
+      <a href="#!" class="brand-logo">Logo</a>
+      <ul class="right hide-on-med-and-down">
+        <li><a href="sass.html">Sass</a></li>
+        <li><a href="badges.html">Components</a></li>
+        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <nav>
+    <div class="nav-wrapper">
+      <a href="#!" class="brand-logo">Logo</a>
+      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+      <ul class="right hide-on-med-and-down">
+        <li><a href="sass.html">Sass</a></li>
+        <li><a href="badges.html">Components</a></li>
+        <li><a href="collapsible.html">Javascript</a></li>
+        <li><a href="mobile.html">Mobile</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <ul class="sidenav" id="mobile-demo">
+    <li><a href="sass.html">Sass</a></li>
+    <li><a href="badges.html">Components</a></li>
+    <li><a href="collapsible.html">Javascript</a></li>
+    <li><a href="mobile.html">Mobile</a></li>
+  </ul> -->

_sass/top-nav.scss

@@ -0,0 +1,111 @@
+$brand-color: #26a69a;
+$mid-point: "(min-width: 620px)";
+
+nav {
+// 	text-transform: uppercase;
+// 	font-size: .8em;
+//     width: 100%;
+    background-color: white;
+    color: inherit;
+
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+// 	@media #{$mid-point} {
+// 		text-align: right;
+// 		// position: absolute;
+// 		top: 13px;
+// 		right: 0;
+// 		padding: 0 20px;
+// 	}
+
+    ul {
+        a {
+            color: black;
+
+
+        &:hover {
+            border-bottom: 1px solid rgba(255,255,255,.3);
+            color: #fff;
+            background-color: var(--main-light-blue);
+        }
+    }
+    }
+
+
+	a {
+// 		margin: 0 3px;
+// 		padding: 20px 10px;
+// 		border-bottom: 1px solid rgba(255,255,255,0);
+        // color: rgba(255,255,255,.8);
+        color: black;
+// 		transition: .2s ease-in-out;
+// 		display: none;
+
+// 		@media #{$mid-point} {
+// 			display: inline;
+// 			padding: 10px;
+// 		}
+
+
+// 		&.nav-toggle {
+// 			display: inline;
+// 			position: absolute;
+// 			right: 10px;
+// 			top: -22px;
+// 			font-size: 1.9em;
+// 			border: 0;
+
+// 			@media #{$mid-point} {
+// 				display: none;
+// 			}
+
+// 			&:hover {
+// 				border: 0;
+// 			}
+// 		}
+	}
+
+	a:hover {
+
+		border-bottom: 1px solid rgba(255,255,255,.3);
+		color: #fff;
+	}
+
+	@media #{$mid-point} {
+		a.highlight {
+			// border: 1px #ccc solid;
+			// border-radius: 5px;
+
+			&:hover {
+				// background: #fff;
+                // color: $brand-color;
+                border-bottom: 1px solid rgba(255,255,255,.3);
+                color: #fff;
+			}
+		}
+	}
+
+	a.active {
+		color: #fff;
+	}
+
+}
+
+.dropdown-content li a {
+    color: black;
+}
+
+.dropdown-content li:hover {
+    background-color: var(--main-light-blue);
+}
+
+.sidenav {
+    background-color: #fff;   
+    a {
+        color: black;
+        &:hover {
+            background-color: var(--main-light-blue);
+        }
+    }
+}