Use PNG not conneg for OG metedata image #53

Gemfile.lock

@@ -1,21 +1,21 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.5.2)
+    addressable (2.6.0)
       public_suffix (>= 2.0.2, < 4.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.1)
+    concurrent-ruby (1.1.5)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.9.25)
+    ffi (1.10.0)
     forwardable-extended (2.6.0)
-    geocoder (1.5.0)
+    geocoder (1.5.1)
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.7.4)
+    jekyll (3.8.5)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -30,10 +30,10 @@ GEM
       safe_yaml (~> 1.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-watch (2.1.2)
+    jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (1.17.0)
-    liquid (4.0.0)
+    liquid (4.0.3)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -41,14 +41,14 @@ GEM
     mercenary (0.3.6)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (2.0.5)
+    public_suffix (3.0.3)
     rb-fsevent (0.10.3)
-    rb-inotify (0.9.10)
+    rb-inotify (0.10.0)
-      ffi (>= 0.5.0, < 2)
+      ffi (~> 1.0)
-    rouge (2.2.1)
+    rouge (3.3.0)
     ruby_dep (1.5.0)
-    safe_yaml (1.0.4)
+    safe_yaml (1.0.5)
-    sass (3.7.2)
+    sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -62,4 +62,4 @@ DEPENDENCIES
   jekyll
 
 BUNDLED WITH
-   1.17.1
+   1.17.3

README.md

@@ -65,11 +65,21 @@ And visit [localhost:4000](http://localhost:4000) to view the site.
 
 ## Deployment
 
+### Dev/Staging
+
 When changes are committed to the `master` branch the `.gitlab-ci.yml` file triggers the building of the site and then the copying of the results to [dev.coops.tech](https://dev.coops.tech).
 
-Once someone has verified that looks ok, you can use the
+### Production
-[GitLab environments](https://git.coop/cotech/website/environments)
+
-to promote it to [www.coops.tech](https://www.coops.tech)
+You need to manually deploy the changes from dev to production.
+
+1. View the changes on [dev.coops.tech](https://dev.coops.tech) and ensure you're happy for them to be pushed to production.
+
+2. Visit [GitLab environments](https://git.coop/cotech/website/environments). __NOTE.__ If you don't have access to the environments page then post a message in the [Website category of the CoTech forum](https://community.coops.tech/c/cotech/website) to ask someone to do it for you.
+
+3. Click the "Play" icon on the right of the screen in the row for the "dev" environment and choose "deploy:production".
+
+4. Your changes will be visible in production when the commit listed in the "production" environment row matches the commit listed in the "dev" environment row.
 
 ## Contributing
 

_coops/co-operative-web.md

@@ -52,10 +52,10 @@ technologies:
 - centos
 - express-js
 - gitlab
-- google-maps
 - htmlcss
 - java
 - javascript
+- laravel
 - mysql
 - nginx
 - node-js

_coops/outlandish.md

@@ -70,6 +70,7 @@ technologies:
 - aws-redshift
 - symfony
 - wordpress
+- laravel
 ---
 
 Outlandish is made up of around 20 collaborators and co-owners who love quality code, and apps that challenge the status quo.

_includes/footer.html

@@ -18,8 +18,8 @@
   <div class="footer-lower">
     <div class="row">
       <div class="small-12 columns">
-        <img src="/app/themes/coop-tech-oowp-theme/public/img/coop-logo.png" class="float-center" />
+        <img src="/assets/img/coop-logo.png" class="float-center" />
-        <p>Site developed by <a href="http://glowboxdesign.co.uk/" target="_blank">Glowbox Design</a> &amp; <a href="http://outlandish.com" target="_blank">Outlandish</a>.</p>
+        <p>Site developed by <a href="http://glowboxdesign.co.uk/" target="_blank">Glowbox Design</a>, <a href="https://gofreerange.com/" target="_blank">Go Free Range</a> &amp; <a href="http://outlandish.com" target="_blank">Outlandish</a>.</p>
         <p>Source code available on <a href="https://git.coop/cotech/website" target="_blank">git.coop</a>.</p>
         <p>Hosted by <a href="https://www.webarchitects.coop/" target="_blank">Webarchitects</a> for CoTech &#xa9;2018</p>
       </div>

_includes/head.html

@@ -1,24 +1,46 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% if page.description %}
+  <meta name="description" content="{{ page.description | strip_html | strip_newlines | condense_spaces }}" />
+{% elsif page.collection == 'coops' and page.content %}
+  <meta name="description" content="{{ page.content | strip_html | strip_newlines | condense_spaces | truncate:150 }}" />
+{% else %}
   <meta name="description" content="Building a tech industry that's better for its workers and customers through co-operation, democracy and worker ownership." />
+{% endif %}
   <meta charset="UTF-8">
   <title>{{ page.title }} &laquo; Cooperative Technologists</title>
   <meta property="og:type" content="website" />
   <meta property="og:title" content="{{ page.title }}" />
+{% if page.description %}
+  <meta property="og:description" content="{{ page.description | strip_html | strip_newlines }}" />
+{% elsif page.collection == 'coops' and page.content %}
+  <meta property="og:description" content="{{ page.content | strip_html | strip_newlines | condense_spaces | truncate:150 }}" />
+{% else %}
   <meta property="og:description" content="Building a tech industry that's better for its workers and customers through co-operation, democracy and worker ownership." />
+{% endif %}
   <meta property="og:site_name" content="Cooperative Technologists" />
-  <meta property="og:image" content="/app/themes/coop-tech-oowp-theme/public/img/Cotech_512x512.png" />
+{% if page.collection == 'coops' %}
+  <meta property="og:image" content="/images/coops/{{ page.slug }}.png" />
+{% elsif page.collection == 'services' %}
+  <meta property="og:image" content="/images/services/{{ page.slug }}.png" />
+{% elsif page.collection == 'technologies' %}
+  <meta property="og:image" content="/images/technologies/{{ page.slug }}.png" />
+{% elsif page.collection == 'clients' %}
+  <meta property="og:image" content="/images/clients/{{ page.slug }}.png" />
+{% else %}
+  <meta property="og:image" content="/assets/img/Cotech_512x512.png" />
+{% endif %}
   <meta property="og:locale" content="en_GB" />
   <meta name="twitter:card" content="summary" />
   <meta name="twitter:site" content="@CotechUK" />
-  <meta name="twitter:image" content="/app/themes/coop-tech-oowp-theme/public/img/Cotech_512x512.png" />
+  <meta name="twitter:image" content="/assets/img/Cotech_512x512.png" />
   <link rel="canonical" href="{{ page.url | absolute_url }}" />
-  <link rel='stylesheet' id='app-css' href='/app/themes/coop-tech-oowp-theme/public/css/app.css?ver=4.8' type='text/css' media='all' />
+  <link rel='stylesheet' id='app-css' href='/assets/css/app.css?ver=4.8' type='text/css' media='all' />
-  <script type='text/javascript' src='/app/themes/coop-tech-oowp-theme/public/js/vendor.js?ver=4.8'></script>
+  <script type='text/javascript' src='/assets/js/vendor.js?ver=4.8'></script>
-  <link rel="icon" href="/app/uploads/2017/02/cropped-cotech_512x512-32x32.png" sizes="32x32" />
+  <link rel="icon" href="/assets/img/cropped-cotech_512x512-32x32.png" sizes="32x32" />
-  <link rel="icon" href="/app/uploads/2017/02/cropped-cotech_512x512-192x192.png" sizes="192x192" />
+  <link rel="icon" href="/assets/img/cropped-cotech_512x512-192x192.png" sizes="192x192" />
-  <link rel="apple-touch-icon-precomposed" href="/app/uploads/2017/02/cropped-cotech_512x512-180x180.png" />
+  <link rel="apple-touch-icon-precomposed" href="/assets/img/cropped-cotech_512x512-180x180.png" />
-  <meta name="msapplication-TileImage" content="/app/uploads/2017/02/cropped-cotech_512x512-270x270.png" />
+  <meta name="msapplication-TileImage" content="/assets/img/cropped-cotech_512x512-270x270.png" />
   <style type="text/css" id="wp-custom-css">
     section#contact div.row div p a:active,
     section#contact div.row div p a:focus,
@@ -27,8 +49,8 @@
       color: white;
     }
   </style>
-  <link rel="stylesheet" href="/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.css">
+  <link rel="stylesheet" href="/assets/foundation-icons/foundation-icons.css">
-  <link rel="icon" type="image/x-icon" href="/app/themes/coop-tech-oowp-theme/public/img/CoTech-logo.png">
+  <link rel="icon" type="image/x-icon" href="/assets/img/CoTech-logo.png">
   <script type="text/javascript">
     window.mapboxAccessToken = '{{ site.mapbox_access_token }}';
   </script>

_includes/header.html

@@ -4,10 +4,11 @@
       <div class="top-bar-title">
         <strong>
           <a id="logo" href="/">
-            <img src="/app/themes/coop-tech-oowp-theme/public/img/CoTech-logo.png">CoTech
+            <img src="/assets/img/CoTech-logo.png">CoTech
           </a>
         </strong>
         <a class="back" href="/">&#8592; Go Back</a>
+        <a class="close" href="/">&#10006;</a>
       </div>
     </div>
   </div>

_includes/javascripts.html

@@ -1 +1 @@
-<script type='text/javascript' src='/app/themes/coop-tech-oowp-theme/public/js/app.js?ver=4.8'></script>
+<script type='text/javascript' src='/assets/js/app.js?ver=4.8'></script>

_layouts/home.html

@@ -12,7 +12,7 @@
         <div class="top-bar-title">
           <strong>
             <a id="logo" href="/">
-              <img src="/app/themes/coop-tech-oowp-theme/public/img/CoTech-logo.png">CoTech
+              <img src="/assets/img/CoTech-logo.png">CoTech
             </a>
           </strong>
           <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
@@ -22,11 +22,14 @@
         <div id="responsive-menu">
           <div class="top-bar-right">
             <ul class="dropdown menu vertical medium-horizontal" data-magellan>
-              <li><a href="#members">Members</a></li>
+              <li><a href="/#members">Members</a></li>
-              <li><a href="#clients">Clients</a></li>
+              <li><a href="/#clients">Clients</a></li>
-              <li><a href="#services">Services</a></li>
+              <li><a href="/#services">Services</a></li>
-              <li><a href="#technologies">Technologies</a></li>
+              <li><a href="/#technologies">Technologies</a></li>
-              <li><a href="#contact" class="button">Get In Touch</a></li>
+              <li><a href="/about">About</a></li>
+              <li><a href="/join">Join</a></li>
+              <li><a href="/manifesto">Manifesto</a></li>
+              <li><a href="/#contact" class="button">Get In Touch</a></li>
             </ul>
           </div>
         </div>

_layouts/service.html

@@ -17,6 +17,9 @@
         <div class="small-12 small-centered columns">
           <img src="/images/services/{{ page.slug }}.png" alt="">
           <h1>Coops that offer <span>{{ page.name }}</span></h1>
+{% if page.description %}
+          <p>{{ page.description }}</p>
+{% endif %}          
         </div>
       </div>
     </div>

_layouts/technology.html

@@ -17,6 +17,9 @@
         <div class="small-12 small-centered columns">
           <img src="/images/technologies/{{ page.slug }}" alt="{{ page.name }}">
           <h1>Coops that use <span>{{ page.name }}</span></h1>
+{% if page.description %}
+          <p>{{ page.description }}</p>
+{% endif %} 
         </div>
       </div>
     </div>

_services/virtual-servers.md

@@ -1,4 +1,5 @@
 ---
 title: Virtual Servers
 name: Virtual Servers
+description: CoTech co-operatives who provide virtual servers to clients.
 ---

assets/css/app.css

@@ -13,8 +13,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
+  src: url("/assets/fonts/fontawesome-webfont.eot?v=4.7.0");
-  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
+  src: url("/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("/assets/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("/assets/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("/assets/fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }
 
@@ -27,7 +27,7 @@
   -moz-osx-font-smoothing: grayscale; }
 
 /* makes the font 33% larger relative to the icon container */
-.fa-lg {
+.fa-lg {f
   font-size: 1.33333em;
   line-height: 0.75em;
   vertical-align: -15%; }
@@ -4179,7 +4179,9 @@ a {
   color: #2199e8;
   text-decoration: none;
   line-height: inherit;
-  cursor: pointer; }
+  cursor: pointer;
+
+}
   a:hover, a:focus {
     color: #1585cf; }
   a img {
@@ -6346,7 +6348,9 @@ table.hover tbody tr:nth-of-type(even):hover {
 
 .top-bar-title {
   float: left;
-  margin-right: 1rem; }
+  margin-right: 1rem;
+  width: 100%;
+}
 
 .top-bar-left {
   float: left; }
@@ -6460,15 +6464,15 @@ table.hover tbody tr:nth-of-type(even):hover {
 /* ---------------------------------------- Typography  ---------------------------------------- */
 @font-face {
   font-family: 'open_sansregular';
-  src: url("../fonts/OpenSans-Regular-webfont.eot");
+  src: url("/assets/fonts/OpenSans-Regular-webfont.eot");
-  src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
+  src: url("/assets/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("/assets/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("/assets/fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
   font-weight: normal;
   font-style: normal; }
 
 @font-face {
   font-family: 'open_sansbold';
-  src: url("../fonts/OpenSans-Bold-webfont.eot");
+  src: url("/assets/fonts/OpenSans-Bold-webfont.eot");
-  src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
+  src: url("/assets/fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/OpenSans-Bold-webfont.woff") format("woff"), url("/assets/fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("/assets/fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
   font-weight: normal;
   font-style: normal; }
 
@@ -6550,7 +6554,7 @@ a:focus {
 #banner {
   padding: 8rem 0;
   text-align: center;
-  background-image: url(../img/banner-collage.jpg);
+  background-image: url(/assets/img/banner-collage.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover; }
@@ -6705,6 +6709,12 @@ h5#join-us {
 .home #clients {
   background-color: #f7f7f5; }
 
+
+
+.client:nth-child(n+7){
+    display: none;
+}
+
 .client-thumb {
   height: 150px;
   width: 100%;
@@ -6828,6 +6838,9 @@ h5#join-us {
   padding-left: 2rem;
   color: #9196a2; }
 
+.close{
+  float: right;
+}
 #page-banner {
   margin-bottom: 4rem;
   text-align: center; }
@@ -6968,3 +6981,8 @@ footer {
         color: #ffffff; }
 
 /*# sourceMappingURL=app.css.map */
+
+
+.forum-links a{
+  margin: 0 auto;
+}

assets/js/app.js

@@ -51,3 +51,8 @@ app.createMapMultiMarker = function(mapId, lat, lng, zoom, markersArray) {
 };
 
 //# sourceMappingURL=app.js.map
+$('#client-list .column').shuffle();
+window.setInterval(function(){
+    /// call your function here
+    $('#client-list .column').shuffle();
+}, 7000);

index.html

@@ -8,12 +8,12 @@ layout: home
     <div class="small-12 medium-10 large-8 small-centered columns">
 
       <div class="small-3 columns">
-        <img src="/app/themes/coop-tech-oowp-theme/public/img/icon-coops.png" class="float-center">
+        <img src="/assets/img/icon-coops.png" class="float-center">
         <h6>Co-ops</h6>
         <h5>{{ site.coops.size }}</h5>
       </div>
       <div class="small-3 columns">
-        <img src="/app/themes/coop-tech-oowp-theme/public/img/icon-staff.png" class="float-center">
+        <img src="/assets/img/icon-staff.png" class="float-center">
         <h6>Staff</h6>
         {% assign total_members = 0 %}
         {% for coop in site.coops %}
@@ -22,20 +22,26 @@ layout: home
         <h5>{{ total_members }}+</h5>
       </div>
       <div class="small-3 columns">
-        <img src="/app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png" class="float-center">
+        <img src="/assets/img/icon-revenue.png" class="float-center">
         <h6>Revenue</h6>
         <h5>£10.3m</h5>
       </div>
       <div class="small-3 columns">
-        <img src="/app/themes/coop-tech-oowp-theme/public/img/icon-clients.png" class="float-center">
+        <img src="/assets/img/icon-clients.png" class="float-center">
         <h6>Clients</h6>
         <h5>{{ site.clients.size }}+</h5>
       </div>
+        <br />
+        <p>CoTech is a network of ethical co-operatives providing technology, digital and creative services.</p>
+        <p>Working with co-operatives has major benefits: you’ll work directly with the people who own the business, who have a stake in making sure your project succeeds. With no private shareholders drawing out dividends, you’ll get genuine value for money.  And on top of that, you’ll get the benefit of working with small and responsive businesses which draw on the skills, specialisms and security of a large network.</p>
+        <p>Browse our co-operatives and services or get in touch if you’d like us to help you find the right co-op partner.</p>
+        <p>If you’re a tech co-op or a co-operatively minded freelancer and you’d like to <a href="/join">join us</a>.</p>
 
     </div>
   </div>
 </div>
 
+
 <section id="members" data-magellan-target="members">
   <div class="row">
     <div class="small-12 columns">
@@ -102,11 +108,11 @@ layout: home
     <div class="small-12 columns">
       <h2>Clients</h2>
       <p>Here are some of the amazing clients we have worked with so far</p>
-      <div class="row small-up-2 medium-up-3 large-up-6">
+      <div id='client-list' class="row small-up-2 medium-up-3 large-up-6">
-        {% assign clients = site.clients | sample:6 %}
+        {% assign clients = site.clients %}
         {% for client in clients %}
-          <div class="column">
+          <div class="column client">
-            <div class="client-thumb" style="background-image: url(/images/clients/{{ client.slug }})"></div>
+            <div class="client-thumb" style='background-image: url(/images/clients/{{ client.slug }}') title="{{client.slug}}"></div>
           </div>
         {% endfor %}
       </div>
@@ -161,10 +167,19 @@ layout: home
 
       <h2>Get In Touch</h2>
         <p>
-        If you would like to work with us, or find out more,
+            All the members of CoTech are available to hire, and each has different specialisms. We vary in size from 2 people to 40+ people, and use different technologies. If you know what <a href="#technologies">technology</a>  or <a href="#services">service</a>  you're looking, you can use this site to find suitable co-ops. If you're not sure what you're looking for you can browse the <a href="#members">members</a> and get in touch with one that you like the look of. We're all committed to being honest about our capabilites and capacities, and we'll refer you to a different co-op if we think they'll offer you better value.
-        <a href="{{ site.forum }}">get in touch on our forum</a>.
+        </p>
-        <br/> Not sure which tech coop, or coops, are right for you? Drop us a message on
+        <div class="row forum-links">
-        <a href="{{ site.forum }}">our forum</a>, and we will help you find the perfect match.
+            <div class="small-12 medium-6 columns">
+                    <a href="https://community.coops.tech/"><img src="/assets/img/discourse-300.png" /></a>
+            </div>
+            <div class="small-12 medium-6 columns">
+
+                <a href="https://community.coops.tech/"><img class="mx-auto"  src="/assets/img/cotech-300.png" /></a>
+            </div>
+        </div>
+        <p>
+            If you don't want to hire us but want to find out more about co-ops, find a job in a co-op or discuss how technology can help solve the world's myriad problems, please head over to our <a href="{{ site.forum }}">Discourse forum</a>.
         </p>
 
     </div>