Add socket filter examples

Author: tomhamiltonstubber

Gemfile

@@ -1,23 +1,11 @@
 source "https://rubygems.org"
 ruby RUBY_VERSION
 
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
 gem "jekyll", "3.3.1"
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 gem "minima", "~> 2.0"
 
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-
 # If you have any plugins, put them here!
 group :jekyll_plugins do
    gem "jekyll-feed", "~> 0.6"

Gemfile.lock

@@ -49,5 +49,8 @@ DEPENDENCIES
   jekyll-feed (~> 0.6)
   minima (~> 2.0)
 
+RUBY VERSION
+   ruby 2.3.3p222
+
 BUNDLED WITH
-   1.11.2
+   1.16.0

_config.yml

@@ -9,6 +9,7 @@ meta_author: Tom Hamilton Stubber
 markdown: kramdown
 theme: minima
 permalink: pretty
+highlighter: pygments
 
 socket_key: 9c79f14df986a1ec693c
 gems:
@@ -18,6 +19,10 @@ exclude:
   - Gemfile.lock
 include:
   - _redirects
+collections:
+  examples:
+    title: Examples
+    output: true
 footer:
   copyright: TutorCruncher
 address:
@@ -30,3 +35,5 @@ social:
     url: http://facebook.com/tutorcruncher
   - title: github
     url: http://github.com/tutorcruncher
+
+socket_url: https://cdn.tutorcruncher.com/socket/latest/socket.js

_examples/grid_view.html

@@ -0,0 +1,27 @@
+---
+layout: default
+title: Grid view example
+permalink: /examples/grid-view/
+description: An example of the tutors list in TutorCruncher socket using the Grid View.
+---
+{% highlight html %}
+  <div id="grid-view"></div>
+
+  <script>
+    socket('{{ site.socket_key }}', {
+      router_mode: 'history',
+      element: '#grid-view',
+      mode: 'grid'
+    });
+  </script>
+{% endhighlight %}
+
+<div id="grid-view"></div>
+
+<script>
+  socket('{{ site.socket_key }}', {
+    router_mode: 'history',
+    element: '#grid-view',
+    mode: 'grid'
+  });
+</script>

_examples/index.html

@@ -0,0 +1,13 @@
+---
+layout: default
+title: TutorCruncher Socket Examples
+permalink: /examples/
+index: True
+description: Below is a list of examples of how Socket can work
+---
+{% for example in site.examples %}
+  {% unless example.index %}
+    <p><a href="{{ example.permalink }}">{{ example.title }}</a></p>
+  {% endunless %}
+{% endfor %}
+

_examples/label_example.html

@@ -0,0 +1,26 @@
+---
+layout: default
+title: Label example
+permalink: /examples/labels-filter/
+description: An example of the tutors list in TutorCruncher socket using the Labels filter. These tutors all have a label called London Tutors.
+---
+{% highlight html %}
+  <div id="label-filter"></div>
+
+  <script>
+    socket('{{ site.socket_key }}', {
+      router_mode: 'history',
+      labels_include: ['london-tutors'],
+      element: '#label-filter'
+    });
+  </script>
+{% endhighlight %}
+
+<div id="label-filter"></div>
+<script>
+  socket('{{ site.socket_key }}', {
+    router_mode: 'history',
+    labels_include: ['london-tutors'],
+    element: '#label-filter'
+  });
+</script>

_examples/list_view.html

@@ -0,0 +1,27 @@
+---
+layout: default
+title: List View Example
+permalink: /examples/list-view/
+description: An example of the tutors list in TutorCruncher socket using the List View
+---
+{% highlight html %}
+  <div id="list-view"></div>
+
+  <script>
+    socket('{{ site.socket_key }}', {
+      router_mode: 'history',
+      element: '#list-view',
+      mode: 'list'
+    });
+  </script>
+{% endhighlight %}
+
+<div id="list-view"></div>
+
+<script>
+  socket('{{ site.socket_key }}', {
+    router_mode: 'history',
+    element: '#list-view',
+    mode: 'list'
+  });
+</script>

_examples/subject_filter.html

@@ -0,0 +1,27 @@
+---
+layout: default
+title: Subject Filter Example
+permalink: /examples/subject/29-english-language
+description: An example of the tutors list in TutorCruncher socket using the Subject Filter
+---
+{% highlight html %}
+  <div id="subject-filter"></div>
+
+  <script>
+    socket('{{ site.socket_key }}', {
+      router_mode: 'history',
+      element: '#subject-view',
+      mode: 'grid'
+    });
+  </script>
+{% endhighlight %}
+
+<div id="subject-view"></div>
+
+<script>
+  socket('{{ site.socket_key }}', {
+    router_mode: 'history',
+    element: '#subject-view',
+    mode: 'grid'
+  });
+</script>

_includes/footer.html

@@ -55,23 +55,10 @@ <h3>About Dino Tutors</h3>
   ga('create', 'UA-41117087-4', 'auto');
   ga('send', 'pageview');
 </script>
-<script src="{{ page.socket_url }}"></script>
-{% if page.socket_init_file %}
-  <script src="{{ page.socket_init_file }}"></script>
-{% else %}
-  <script>
-    socket('{{ site.socket_key }}', {
-      mode: 'enquiry',
-      element: '#socket-enquiry'
-    });
-
-    socket('{{ site.socket_key }}', {
-      router_mode: 'history'
-    });
-    socket('{{ site.socket_key }}', {
-      mode: 'enquiry-modal',
-      element: '#socket-enquiry-modal',
-      router_mode: 'history'
-    })
-  </script>
-{% endif %}
+<script>
+  socket('{{ site.socket_key }}', {
+    mode: 'enquiry-modal',
+    element: '#socket-enquiry-modal',
+    router_mode: 'history'
+  })
+</script>

_includes/nav.html

@@ -9,20 +9,23 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="#page-top">{{ site.title }}</a>
+      <a class="navbar-brand" href="{% unless page.permalink == '/' %}/{% endunless %}#page-top">{{ site.title }}</a>
     </div>
 
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
         <li class="hidden">
-          <a href="#page-top"></a>
+          <a href="{% unless page.permalink == '/' %}/{% endunless %}#page-top"></a>
         </li>
         <li class="page-scroll">
-          <a href="#our-tutors">Our Tutors</a>
+          <a href="/examples/">Socket Examples</a>
         </li>
         <li class="page-scroll">
-          <a href="#about">About</a>
+          <a href="{% unless page.permalink == '/' %}/{% endunless %}#our-tutors">Our Tutors</a>
+        </li>
+        <li class="page-scroll">
+          <a href="{% unless page.permalink == '/' %}/{% endunless %}#about">About</a>
         </li>
         <li class="page-scroll">
           <a href="https://secure.dinotutors.com">Sign in</a>
@@ -34,3 +37,4 @@
     </div>
   </div>
 </nav>
+<script src="{{ site.socket_url }}"></script>