Merge branch 'master' into refactor/assets/linter

.github/workflows/cypress.yml

@@ -4,7 +4,7 @@ on: [pull_request]
 
 jobs:
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-16.04
 
     steps:
     - uses: actions/checkout@v1

assets/js/modal.js

@@ -1,20 +1,20 @@
-import $ from './helpers/jq-helpers';
-import ModalTemplate from './templates/modal';
+import $ from "./helpers/jq-helpers";
+import ModalTemplate from "./templates/modal";
 
-$('body').append(ModalTemplate);
+$("body").append(ModalTemplate);
 
 setTimeout(() => {
-  const modal = $('.modal');
-  const dialog = $('.modal .modal-dialog');
+  const modal = $(".modal");
+  const dialog = $(".modal .modal-dialog");
 
   function closeDialog() {
-    $('body').removeClass('modal-open');
-    modal.removeClass('show');
+    $("body").removeClass("modal-open");
+    modal.removeClass("show");
   }
 
-  $('[data-dismiss="modal"]').on('click', closeDialog);
+  $('[data-dismiss="modal"]').on("click", closeDialog);
 
-  modal.on('click', (e) => {
+  modal.on("click", e => {
     if (!dialog[0].contains(e.target)) {
       closeDialog();
     }
@@ -24,25 +24,45 @@ setTimeout(() => {
     title,
     subtitle,
     image,
+    icon,
     content,
     labels,
-    size = '',
+    size = ""
   }) {
-    $('body').addClass('modal-open');
-    modal.addClass('show');
-    dialog.$('.title').html(title || '');
-    dialog.$('.subtitle').html(subtitle || '');
-    dialog.$('.badge-container').html(labels || '');
-    dialog.$('img')[0].src = image;
+    $("body").addClass("modal-open");
+    modal.addClass("show");
+    dialog.$(".title").html(title || "");
+    dialog.$(".subtitle").html(subtitle || "");
+    if (image) {
+      dialog.$("img").removeClass("hidden");
+      dialog.$("img")[0].src = image;
+    } else {
+      dialog.$("img").addClass("hidden");
+    }
+
+    if (labels) {
+      dialog.$(".badge-container").removeClass("hidden");
+      dialog.$(".badge-container").html(labels || "");
+    } else {
+      dialog.$(".badge-container").addClass("hidden");
+    }
+
+    if (icon) {
+      dialog.$(".icon-container").removeClass("hidden");
+      dialog.$(".icon-container").html(icon.replace(/fa-inverse/g, ""));
+    } else {
+      dialog.$(".icon-container").addClass("hidden");
+    }
+
     if (content) {
-      dialog.$('.modal-body .content').html(content);
-      dialog.$('.modal-body .content').removeClass('hidden');
+      dialog.$(".modal-body .content").html(content);
+      dialog.$(".modal-body .content").removeClass("hidden");
     } else {
-      dialog.$('.modal-body .content').addClass('hidden');
+      dialog.$(".modal-body .content").addClass("hidden");
     }
     dialog
-      .removeClass('md')
-      .removeClass('lg')
+      .removeClass("md")
+      .removeClass("lg")
       .addClass(size);
   };
 }, 0);

assets/js/portfolio.js

@@ -1,15 +1,16 @@
-import $ from './helpers/jq-helpers';
+import $ from "./helpers/jq-helpers";
 
-const portfolioItem = $('.portfolio-item.has-modal');
-const _default = { innerHTML: '' };
+const portfolioItem = $(".portfolio-item.has-modal");
+const _default = { innerHTML: "" };
 
-portfolioItem.on('click', function() {
+portfolioItem.on("click", function() {
   window.syna.showModal({
-    title: (this.querySelector('.title') || _default).innerHTML,
-    subtitle: (this.querySelector('.subtitle') || _default).innerHTML,
-    content: (this.querySelector('.content') || _default).innerHTML,
-    image: (this.querySelector('img') || _default).src,
-    labels: (this.querySelector('.badge-container') || _default).innerHTML,
-    size: 'md',
+    title: (this.querySelector(".title") || _default).innerHTML,
+    subtitle: (this.querySelector(".subtitle") || _default).innerHTML,
+    content: (this.querySelector(".content") || _default).innerHTML,
+    image: (this.querySelector(".portfolio-image") || _default).src,
+    icon: (this.querySelector(".portfolio-icon") || _default).innerHTML,
+    labels: (this.querySelector(".badge-container") || _default).innerHTML,
+    size: "md"
   });
 });

assets/js/templates/modal.js

@@ -12,6 +12,7 @@ const ModalTemplate = `
         </button>
       </div>
       <img src="" alt="" class="img-fluid">
+      <div class="icon-container pt-4"></div>
       <div class="modal-body p-3">
         <div class="badge-container"></div>
         <div class="content"></div>

assets/scripts/syna-portfolio.js

@@ -118,7 +118,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar portfolioItem = (0, _jqHelpers2.default)('.portfolio-item.has-modal');\nvar _default = { innerHTML: '' };\n\nportfolioItem.on('click', function () {\n  window.syna.showModal({\n    title: (this.querySelector('.title') || _default).innerHTML,\n    subtitle: (this.querySelector('.subtitle') || _default).innerHTML,\n    content: (this.querySelector('.content') || _default).innerHTML,\n    image: (this.querySelector('img') || _default).src,\n    labels: (this.querySelector('.badge-container') || _default).innerHTML,\n    size: 'md'\n  });\n});\n\n//# sourceURL=webpack:///./assets/js/portfolio.js?");
+eval("\n\nvar _jqHelpers = __webpack_require__(/*! ./helpers/jq-helpers */ \"./assets/js/helpers/jq-helpers.js\");\n\nvar _jqHelpers2 = _interopRequireDefault(_jqHelpers);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar portfolioItem = (0, _jqHelpers2.default)(\".portfolio-item.has-modal\");\nvar _default = { innerHTML: \"\" };\n\nportfolioItem.on(\"click\", function () {\n  window.syna.showModal({\n    title: (this.querySelector(\".title\") || _default).innerHTML,\n    subtitle: (this.querySelector(\".subtitle\") || _default).innerHTML,\n    content: (this.querySelector(\".content\") || _default).innerHTML,\n    image: (this.querySelector(\".portfolio-image\") || _default).src,\n    icon: (this.querySelector(\".portfolio-icon\") || _default).innerHTML,\n    labels: (this.querySelector(\".badge-container\") || _default).innerHTML,\n    size: \"md\"\n  });\n});\n\n//# sourceURL=webpack:///./assets/js/portfolio.js?");
 
 /***/ })
 

assets/styles/_helpers.scss

@@ -1,5 +1,9 @@
 .hidden {
-  display: none;
+  display: none !important;
+}
+
+.display-contents {
+  display: contents;
 }
 
 .overflow-hidden {

assets/styles/_modal.scss

@@ -35,6 +35,14 @@ body.modal-open {
     }
   }
 
+  .icon-container {
+    font-size: 64px;
+
+    .fa-stack-1x, .fa-stack-2x {
+      position: relative;
+    }
+  }
+
   .badge-container {
     color: $light;
     margin-bottom: 1rem;

assets/styles/_portfolio.scss

@@ -1,4 +1,5 @@
 .portfolio-item {
+  height: 100%;
   min-height: 180px;
   display: flex;
   justify-content: center;

exampleSite/content/fragments/portfolio/portfolio/item3.md

@@ -4,7 +4,7 @@ title = "Third Title"
 subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing"
 
 [asset]
-  image = "dog-1.jpeg"
+  icon = "fab fa-github"
 +++
 
 Ante in nibh mauris cursus mattis molestie a iaculis. Nisi porta lorem mollis aliquam. Eu consequat ac felis donec et odio pellentesque diam volutpat. Arcu dui vivamus arcu felis. Senectus et netus et malesuada fames ac turpis egestas sed. Orci eu lobortis elementum nibh.

exampleSite/content/fragments/portfolio/portfolio/item4.md

@@ -2,7 +2,7 @@
 weight = 40
 
 [asset]
-  image = "dog-2.jpeg"
+  image = "dog-1.jpeg"
 
 [[labels]]
   title = "Animal"

exampleSite/content/fragments/portfolio/portfolio/item5.md

@@ -2,7 +2,7 @@
 weight = 50
 
 [asset]
-  image = "dog-3.jpeg"
+  image = "dog-2.jpeg"
 +++
 
 Ante in nibh mauris cursus mattis molestie a iaculis. Nisi porta lorem mollis aliquam. Eu consequat ac felis donec et odio pellentesque diam volutpat. Arcu dui vivamus arcu felis. Senectus et netus et malesuada fames ac turpis egestas sed. Orci eu lobortis elementum nibh.

exampleSite/resources/_gen/assets/scss/styles/index.scss_a4e369375f17bb89f2019364cbe7a830.json

@@ -1 +1 @@
-{"Target":"style.min.cb156ecd97a093dc42fc2c7ec16c0ddfb1b6df86e016a3f222051af9f09018ad.css","MediaType":"text/css","Data":{"Integrity":"sha256-yxVuzZegk9xC/Cx+wWwN37G234bgFqPyIgUa+fCQGK0="}}
+{"Target":"style.min.025e3d92429b7665b1a142b340c3061c0e12b50b42696e498c2346b5393b4efb.css","MediaType":"text/css","Data":{"Integrity":"sha256-Al49kkKbdmWxoUKzQMMGHA4StQtCaW5JjCNGtTk7Tvs="}}

layouts/partials/fragments/hero.html

@@ -102,6 +102,7 @@
   </div>
   </div>
 </header>
+{{- if .Params.particles }}
 <script>
   var fragmentName = "{{ .Name }}";
   {{- $file_path := printf "%s%s/config.json" .page.File.Dir .Name -}}
@@ -110,3 +111,4 @@
     config: {{ if fileExists $file_path -}} JSON.parse({{ readFile $file_path | safeHTML }}) {{- else -}} null {{- end -}},
   });
 </script>
+{{ end -}}

layouts/partials/fragments/item.html

@@ -168,6 +168,13 @@ <h5>
           </div>
         {{- end -}}
         {{- with .Params.asset -}}
+          {{- if isset . "url" -}}
+            <a
+              href="{{ print .url }}"
+              {{ if isset . "icon" }}
+                {{- safeHTMLAttr (print "class='display-contents'") -}}
+              {{ end }}>
+          {{- end -}}
           {{- if isset . "image" }}
             <div class="col-12 text-center d-none d-lg-inline">
               <img src="{{ partial "helpers/image.html" (dict "root" $self "asset" .) }}" class="img-fluid p-2" alt="{{ .text | default $.Params.title }}">
@@ -187,6 +194,9 @@ <h5>
               </span>
             </div>
           {{- end -}}
+          {{- if isset . "url" -}}
+            </a>
+          {{- end -}}
         {{- else -}}
           {{- if .Params.buttons }}
             <div class="col-12 text-center">

layouts/partials/fragments/portfolio.html

@@ -22,9 +22,17 @@
             {{- if .Params.item_url }}
               <a href="{{ .Params.item_url | relLangURL }}">
             {{- end }}
-                {{- if .Params.asset -}}
-                  <img src="{{ partial "helpers/image.html" (dict "root" $self "this" . "asset" .Params.asset "resize" "500x380") }}" class="img-fluid" alt="{{ .Params.asset.text }}">
-                {{- end }}
+                {{- $this := . -}}
+                {{- with .Params.asset -}}
+                  {{- if .image -}}
+                    <img src="{{ partial "helpers/image.html" (dict "root" $self "this" $this "asset" . "resize" "500x380") }}" class="portfolio-image img-fluid" alt="{{ .text }}">
+                  {{- else if .icon }}
+                    <span class="portfolio-icon fa-stack fa-3x m-2" title="{{ .text }}">
+                      <i class="{{ .icon }} fa-stack-2x fa-inverse"></i>
+                      <span class="sr-only">{{ .text }}</span>
+                    </span>
+                  {{- end -}}
+                {{- end -}}
                 <div class="position-absolute hover-overlay"></div>
                 {{- if .Params.labels -}}
                   <div class="position-absolute text-light badge-container">

layouts/partials/head.html

@@ -18,11 +18,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="description" content="{{- .Scratch.Get "page_description" -}}">
-  <meta property="og:title" content="{{ $title }}">
-  <meta property="og:url" content="{{ .Permalink }}">
-  <meta property="og:description" content="{{- .Scratch.Get "page_description" -}}">
-  <meta property="og:site_name" content="{{ .Site.Title }}">
-  <meta property="og:type" content="website">
+  {{ template "_internal/opengraph.html" . }}
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="{{ $title }}" />
   <meta name="twitter:description" content="{{- .Scratch.Get "page_description" -}}">