Ready for prod ?

2021-06-01 07:59:35 +02:00
parent 50801d45ce
commit d6705d77d7
16 changed files with 293 additions and 56 deletions
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+FROM nginx:alpine as build
+
+RUN apk add --update \
+    wget
+    
+ARG HUGO_VERSION="0.83.1"
+RUN wget --quiet "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_Linux-64bit.tar.gz" && \
+    tar xzf hugo_${HUGO_VERSION}_Linux-64bit.tar.gz && \
+    rm -r hugo_${HUGO_VERSION}_Linux-64bit.tar.gz && \
+    mv hugo /usr/bin
+
+COPY ./ /site
+WORKDIR /site
+RUN hugo
+
+#Copy static files to Nginx
+FROM nginx:alpine
+COPY --from=build /site/public /usr/share/nginx/html
+
+WORKDIR /usr/share/nginx/html
+
--- a/assets/images/icons/menu.svg
+++ b/assets/images/icons/menu.svg
@@ -0,0 +1 @@
+<svg height='100px' width='100px'  fill="#000000" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path d="m 14.000002,968.36217 c -3.3137,0 -6,2.68619 -6,6 0,3.31359 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.68641 6,-6 0,-3.31381 -2.6863,-6 -6,-6 z m 0,28.00003 c -3.3137,0 -6,2.6862 -6,6 0,3.3136 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.6864 6,-6 0,-3.3138 -2.6863,-6 -6,-6 z m 0,28 c -3.3137,0 -6,2.6862 -6,6 0,3.3136 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.6864 6,-6 0,-3.3138 -2.6863,-6 -6,-6 z" style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" fill="#000000" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>
--- a/assets/images/slide-coopgo.png
+++ b/assets/images/slide-coopgo.png
--- a/config.yaml
+++ b/config.yaml
@@ -6,6 +6,10 @@ theme: "coopgo-theme"
 params:
    logo: "images/coopgo-logo-bluegreen.svg"
    logoFooter: "images/coopgo-gotogether-bluegreen.svg"
+
+    images:
+      - images/slide-coopgo.png
+
    featuredimage: "images/womancup.png"
    social:
      facebook: https://facebook.com/ridygo.fr 
@@ -89,4 +93,10 @@ params:
        - projects
      referencesPages:
        - references
+
+deployment:
+  targets:
+    name: coopgo-prod
+    URL: "s3://coopgo-website?region=fr-par"
+
        
--- a/content/gotogether/_index.md
+++ b/content/gotogether/_index.md
@@ -1,4 +1,5 @@
 ---
 title: "GOTOGETHER, le mag"
-date: 2021-05-27T18:12:38+02:00
+date: 2021-06-01T05:12:38+02:00
+titleimg: images/gotogether-lemag.svg
 ---
--- a/content/gotogether/scitycoop-devient-coopgo.md
+++ b/content/gotogether/scitycoop-devient-coopgo.md
@@ -1,6 +1,10 @@
 ---
 title: "Scity.coop devient COOPGO"
-date: 2021-05-31T06:05:57+02:00
+date: 2021-06-01T05:05:57+02:00
+description: "Scity.coop, société coopérative spécialisée dans les mobilités durables inclusives et solidaires, devient COOPGO. Ce changement de ..."
+featuredimage: images/slide-coopgo.png
+images:
+- images/slide-coopgo.png
 ---

 # Scity.coop devient COOPGO
--- a/content/pages/social.md
+++ b/content/pages/social.md
@@ -12,7 +12,7 @@ url: "/social"

 La mobilité est un des freins majeurs à l'accès à l'emploi. Il s'agit également d'un facteur d'isolement important, notamment pour les personnes âgées ou en territoire rural.

-Depuis 2015, nous construisons des solutions en coopération avec les acteurs de l'insertion sociale et de la solidarité locale, pour lutter contre l'isolement et l'exclusion dûs aux difficultés de déplacements.
+Depuis 2015, nous construisons des solutions en coopération avec les acteurs de l'insertion sociale et de la solidarité locale, pour lutter contre l'exclusion dûe aux difficultés de déplacements.

 {{% /column %}}
 {{% column %}}
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -574,6 +574,9 @@ a {
 .w-full {
  width: 100% !important; }

+.h-full {
+  height: 100% !important; }
+
 /* POSITIONING */
 .ta-r {
  text-align: right; }
@@ -1071,7 +1074,7 @@ a {
 .p-r-300 {
  padding-right: 300px !important; }

-nav {
+nav#navbar {
  z-index: 100;
  height: 3em;
  display: flex;
@@ -1083,15 +1086,15 @@ nav {
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Menus */ }
-  nav ul {
+  nav#navbar ul {
    justify-content: flex-evenly;
    display: flex; }
-    nav ul li {
+    nav#navbar ul li {
      flex: 1;
      display: inline;
      text-align: center;
      list-style: none; }
-      nav ul li a {
+      nav#navbar ul li a {
        color: inherit;
        text-decoration: none; }

@@ -1125,28 +1128,71 @@ nav {
    margin: auto;
    width: 65%; }

-nav .left {
+nav#navbar .left {
  flex: 0;
  text-align: left;
  background-color: #ffffff; }
-  nav .left img {
+  nav#navbar .left img {
    margin: 1em;
    height: 1.3em; }

-nav .center {
+nav#navbar .center {
  flex: 1;
  color: #243887;
  font-size: 1em;
  background-color: #ffffff; }

-nav .right {
+nav#navbar .right {
  font-family: Manometer;
  color: #ffffff; }

-@media (max-width: 992px) {
-  nav .right {
+nav#navbar #menutoggle {
+  display: none; }
+
+@media (max-width: 600px) {
+  nav#navbar #menutoggle {
+    display: block; }
+  nav#navbar .center {
    display: none; } }

+@media (max-width: 992px) {
+  nav#navbar .right {
+    display: none; } }
+
+nav#sidebar {
+  position: fixed;
+  top: 0;
+  left: -300px;
+  width: 300px;
+  height: 100%;
+  z-index: 200;
+  box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
+  background-color: #ffffff;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  transition: ease 0.2s all; }
+
+@media (max-width: 600px) {
+  nav#navbar {
+    background-color: #ffffff; } }
+
+#body-overlay {
+  width: 100vw;
+  height: 100vh;
+  display: none;
+  position: fixed;
+  z-index: 150;
+  top: 0;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.5); }
+
+body.menu-open #body-overlay {
+  display: block; }
+
+body.menu-open nav#sidebar {
+  left: 0; }
+
 .content h1 {
  padding-top: 50px;
  text-align: center;
--- a/themes/coopgo-theme/assets/js/main.js
+++ b/themes/coopgo-theme/assets/js/main.js
@@ -1,3 +1,5 @@
+
+/* NAVBAR COLOR TOGGLE WHILE SCROLLING */
 function navbarToggleOnScroll() {
    var el = document.getElementById("navbar");
    if (window.pageYOffset >= 500) {
@@ -6,4 +8,41 @@ function navbarToggleOnScroll() {
        el.classList.remove("scroll");
    }
 }; 
-window.addEventListener("scroll", navbarToggleOnScroll);
+window.addEventListener("scroll", navbarToggleOnScroll);
+
+/* SIDEBAR TOGGLE */
+function hasClass(ele, cls) {
+    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+}
+
+function addClass(ele, cls) {
+    if (!hasClass(ele, cls)) ele.className += " " + cls;
+}
+
+function removeClass(ele, cls) {
+    if (hasClass(ele, cls)) {
+        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+        ele.className = ele.className.replace(reg, ' ');
+    }
+}
+function toggleMenu() {
+    var ele = document.getElementsByTagName('body')[0];
+    if (!hasClass(ele, "menu-open")) {
+        addClass(ele, "menu-open");
+    } else {
+        removeClass(ele, "menu-open");
+    }
+}
+//Add event from js the keep the marup clean
+function init() {
+    document.getElementById("menutoggle").addEventListener("click", toggleMenu);
+    document.getElementById("body-overlay").addEventListener("click", toggleMenu);
+}
+
+
+//Prevent the function to run before the document is loaded
+document.addEventListener('readystatechange', function() {
+    if (document.readyState === "complete") {
+        init();
+    }
+});
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss
@@ -1,3 +1,3 @@

-$breakpoint-prone: 600px !default;
+$breakpoint-phone: 600px !default;
 $breakpoint-tablet: 992px !default;
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
@@ -33,6 +33,10 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
    width: 100% !important;
 }

+.h-full {
+    height: 100% !important;
+}
+
 /* POSITIONING */

 .ta-r {
--- a/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss
+++ b/themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss
@@ -1,27 +1,29 @@
 nav {
-    z-index: 100;
-    height: 3em;
-    display: flex;
-    justify-content: flex-between;
-    align-items: center;
-    position: fixed; /* Set the navbar to fixed position */
-    top: 0; /* Position the navbar at the top of the page */
-    width: 100%;
-
-    /* Menus */
-    ul {
-        justify-content: flex-evenly;
+    &#navbar {
+        z-index: 100;
+        height: 3em;
        display: flex;
+        justify-content: flex-between;
+        align-items: center;
+        position: fixed; /* Set the navbar to fixed position */
+        top: 0; /* Position the navbar at the top of the page */
+        width: 100%;

-        li {
-            flex: 1;
-            display: inline;
-            text-align: center;
-            list-style: none;
+        /* Menus */
+        ul {
+            justify-content: flex-evenly;
+            display: flex;

-            a {
-                color: inherit;
-                text-decoration: none;
+            li {
+                flex: 1;
+                display: inline;
+                text-align: center;
+                list-style: none;
+
+                a {
+                    color: inherit;
+                    text-decoration: none;
+                }
            }
        }
    }
--- a/themes/coopgo-theme/assets/sass/main.scss
+++ b/themes/coopgo-theme/assets/sass/main.scss
@@ -1,32 +1,93 @@
@import 'coopgo-web-ui-kit/styles';
 // @import 'colors' <- we use the library's default values for colors, we don't need this

-nav {
-    .left {
-        flex:0;
-        text-align: left;
-        background-color: $backgroundcolor;
+nav{ 
+    &#navbar {
+        .left {
+            flex:0;
+            text-align: left;
+            background-color: $backgroundcolor;

-        img {
-            margin: 1em;
-            height: 1.3em;
+            img {
+                margin: 1em;
+                height: 1.3em;
+            }
+        }
+
+        .center {
+            flex:1;
+            color: $primarycolor;
+            font-size: 1em;
+            background-color: $backgroundcolor;
+        }
+        .right {
+            font-family: $brandfont;
+            color: $white;
+        }
+
+        #menutoggle {
+            display: none;
+        }
+
+        @media(max-width: $breakpoint-phone) {
+            #menutoggle {
+                display: block;
+            }
+            .center {
+                display: none;
+            }
+        }
+
+        @media(max-width: $breakpoint-tablet) {
+            .right {
+                display: none;
+            }
        }
    }

-    .center {
-        flex:1;
-        color: $primarycolor;
-        font-size: 1em;
-        background-color: $backgroundcolor;
+    &#sidebar {
+        position: fixed;
+        top: 0;
+        left: -300px;
+        width: 300px;
+        height: 100%;
+        z-index: 200;
+        box-shadow: 0 6px 12px rgba(107, 82, 82, 0.3);
+        background-color: $white;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        transition: ease 0.2s all;
    }
-    .right {
-        font-family: $brandfont;
-        color: $white;
+}
+
+@media(max-width: $breakpoint-phone) {
+    nav#navbar {
+        background-color: $white;
+    }
+}
+
+#body-overlay {
+    width: 100vw;
+    height: 100vh;
+    display: none;
+    position: fixed;
+    z-index: 150;
+    top: 0;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+body {
+    &.menu-open{
+        #body-overlay {
+            display: block;
+        }
    }

-    @media(max-width: $breakpoint-tablet) {
-        .right {
-            display: none;
+    &.menu-open {
+        nav#sidebar {
+            left: 0;
        }
    }
 }
--- a/themes/coopgo-theme/layouts/_default/list.html
+++ b/themes/coopgo-theme/layouts/_default/list.html
@@ -1,10 +1,23 @@
 {{ define "main" }}

+{{if (isset .Params "titleimg")}}
+{{$titleimg := resources.Get .Params.titleimg}}
+<div class="bg-primary p-t-100  p-b-100 ta-c">
+    <img class="max-x-300" src="{{$titleimg.Permalink}}" alt="{{.Title}}" />
+</div>
+{{end}}
+
 <div class="container flex-row j-center wrap p-30">
    {{range .Pages}}
    <a href="{{.Permalink}}">
-        <div class="max-w-200 flex-1">
+        <div class="max-w-300 flex-1 m-20">
+            {{ if (isset .Params "featuredimage" )}}
+            {{$img := resources.Get .Params.featuredimage}}
+            <div style='background-image: url({{ $img.Permalink }}); background-size: cover; background-position: center center;' class="bg-bubble w-150 h-150 m-auto"></div>
+            {{end}}
            <h3 class="primary ta-c">{{.Title}}</h3>
+            <p class="ta-c" style="font-size: 0.8em; text-style: italic;">Le {{dateFormat "02/01/2006" .Date}}</p>
+            <p class="ta-j">{{.Description}}</p>
        </div>
    </a>
    {{end}}
--- a/themes/coopgo-theme/layouts/partials/head.html
+++ b/themes/coopgo-theme/layouts/partials/head.html
@@ -11,5 +11,7 @@

    {{ $title := print .Site.Title " | " .Title }}
    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
+
+    {{ template "_internal/opengraph.html" . }}
    <title>{{ $title }}</title>
 </head>
--- a/themes/coopgo-theme/layouts/partials/header.html
+++ b/themes/coopgo-theme/layouts/partials/header.html
@@ -1,4 +1,9 @@
+<div id="body-overlay"></div>
 <nav id="navbar">
+    <div id="menutoggle">
+        {{$icon := resources.Get "images/icons/menu.svg"}}
+        <img class="w-20 h-20 m-20" src="{{$icon.Permalink}}" />
+    </div>
    <div class='left bg-white'>
        {{ $logo := resources.Get .Site.Params.Logo }}
        <a href="{{.Site.BaseURL}}"><img src="{{ $logo.Permalink }}" alt="COOPGO" /></a>
@@ -7,7 +12,7 @@
        <ul class="flex-row j-center ai-center">
            {{ $pages := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.mainPages }}
            {{ range $pages }}
-            <li class="max-w-200">
+            <li class="max-w-200 h-full">
                <a href="{{ .Permalink }}">{{ .Title }}</a>
            </li>
            {{ end }}
@@ -24,4 +29,32 @@
            {{ if eq (relURL .URL) ("/" | safeHTML) }}<li><a href="#section4">NOS PROJETS</a></li>{{ end }}
        </ul>
    </div>
+</nav>
+
+<nav id="sidebar">
+    <div class="m-20 ta-c">
+        {{ $logo := resources.Get .Site.Params.Logo }}
+        <a href="{{.Site.BaseURL}}"><img class="max-w-150" src="{{ $logo.Permalink }}" alt="COOPGO" /></a>
+    </div>
+    <div>
+        <ul>
+            {{ $pages := where .Site.RegularPages.ByDate "Type" "in" .Site.Params.mainPages }}
+            {{ range $pages }}
+            <li>
+                <a href="{{ .Permalink }}">{{ .Title }}</a>
+            </li>
+            {{ end }}
+        </ul>
+    </div>
+    <div class='bg-primary p-10'>
+        <ul>
+            <li style="list-style: none;">
+                {{ $gotogether := resources.Get "images/gotogether-lemag.svg" }}
+                <a href="/gotogether/">
+                    <img class="h-25" src="{{ $gotogether.Permalink }}" alt="GO TOGETHER le mag" />
+                </a>
+            </li>
+            {{ if eq (relURL .URL) ("/" | safeHTML) }}<li style="list-style: none;"><a class="white brand" href="#section4">NOS PROJETS</a></li>{{ end }}
+        </ul>
+    </div>
 </nav>
				`@@ -0,0 +1 @@`
				<svg height='100px' width='100px' fill="#000000" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path d="m 14.000002,968.36217 c -3.3137,0 -6,2.68619 -6,6 0,3.31359 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.68641 6,-6 0,-3.31381 -2.6863,-6 -6,-6 z m 0,28.00003 c -3.3137,0 -6,2.6862 -6,6 0,3.3136 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.6864 6,-6 0,-3.3138 -2.6863,-6 -6,-6 z m 0,28 c -3.3137,0 -6,2.6862 -6,6 0,3.3136 2.6863,6 6,6 l 71.999996,0 c 3.3137,0 6,-2.6864 6,-6 0,-3.3138 -2.6863,-6 -6,-6 z" style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate;" fill="#000000" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>