Merge pull request #11 from MJacred/smallfixes

v2.0.1

CHANGELOG.md

@@ -5,24 +5,28 @@ All notable changes to this project (since its fork) are documented in this file
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 
-## [2.x] - 2023-xx-xx
+## [2.0.1] - 2023-01-31
 
 ### Added
 
+* Support including website's custom javascript (see README.md)
+* Support merging website's custom styling into theme's styling (see README.md)
 
-### Changed
 
+### Changed
 
-### Deprecated
+* Moved `static/images` to subfolder exampleSite.
 
 
 ### Removed
 
+* `images/` folder.
 
+
 ### Fixed
 
-
-### Security
+* Placement of cookie notification: now truly stays at the window's bottom.
+* Defined `sameSite` value for cookies (web browser was showing warnings).
 
 
 ## [2.0] - 2023-01-20

COPYRIGHT.txt

@@ -26,13 +26,26 @@ Files: *
 Comment: Hugo Invi
 Copyright: 2018, lucperkins.
            2019-2022, Stefan M..
-           2022, Cubiest.
+           2022-2023, Cubiest.
 License: Expat
 
 Files: ./assets/bulma/*
 Comment: Bulma
-Copyright: 2022, Jeremy Thomas.
+Copyright: 2023, Jeremy Thomas.
 License: Expat
+Source: https://github.com/jgthms/bulma
+
+Files: ./static/images/logos/made-with-bulma.png
+Comment: Bulma
+Copyright: 2023, Jeremy Thomas.
+License: Expat
+Source: https://github.com/jgthms/bulma
+
+Files: ./static/images/loaders/rings.svg
+Comment: SVG-Loaders
+Copyright: 2014, Sam Herbert.
+License: Expat
+Source: https://github.com/SamHerbert/SVG-Loaders
 
 Files: ./static/webfonts/fa-*
  ./static/css/brands.*
@@ -46,24 +59,27 @@ to represent the company, product, or service to which they refer**.
  Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: Expat.
 Copyright: 2022, Fonticons Inc.
 License: CC-BY-4.0, OFL-1.1, Expat
+Source: https://github.com/FortAwesome/Font-Awesome
 
 Files: ./static/modules/jquery-3.6.1.min.js
 Comment: jQuery.
 Copyright: 2022, OpenJS Foundation and other contributors
 License: Expat
+Source: https://github.com/jquery/jquery
 
 Files: ./static/modules/photoswipe
 Comment: PhotoSwipe Lightbox 5.3.3.
 Copyright: 2014-2022, Dmitry Semenov
 License: Expat
+Source: https://github.com/dimsemenov/PhotoSwipe
 
 Files: ./static/modules/js.cookie.*
 Comment: js-cookie v3.0.1.
 Copyright: 2018, Klaus Hartl.
            2018, Fagner Brack.
            2018, GitHub Contributors.
 License: Expat
-
+Source: https://github.com/js-cookie/js-cookie/
 
 License: Expat
  Permission is hereby granted, free of charge, to any person obtaining

LICENSE.txt

@@ -2,7 +2,7 @@ MIT License
 
 Copyright (c) 2018 lucperkins
 Copyright (c) 2019 - November 2022 Stefan M.
-Copyright (c) December 2022 Cubiest
+Copyright (c) December 2022 - 2023 Cubiest
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -31,6 +31,18 @@ Visual
 
 ## Usage
 
+### Custom Javascript
+
+* Write custom javascript and declare the path in config file using `params.customJS`
+  * layouts/partials/javascript.html will fetch and insert it in each page including this partial (as of now: `baseof.html`, `single.html`)
+
+
+### Merge Project styling with this theme
+
+* Write custom sass file in your `assets` folder and declare the path in config file using `params.customCSS`
+  * The styling will be merged with this theme
+
+
 ### Content Shortcodes
 
 [Hugo Docs](https://gohugo.io/content-management/shortcodes/)

assets/invi/partials/_cookies.scss

@@ -1,6 +1,7 @@
 #cookie-notification {
     background-color: $cp-container-5;
-    position: sticky;
+    position: fixed;
+    width: 100%;
     bottom: 0;
     padding: 8px;
 }

assets/invi/partials/_sidebar.scss

@@ -98,7 +98,7 @@ Sidebar Styles
         display: flex;
         justify-content: space-between;
         align-items: center;
-        border-bottom: 1px solid $cp-container-3; // FIXME: lighten($cp-container-3, 5%); -> variable is hex string, not color
+        border-bottom: 1px solid $cp-container-3; // FIXME (https://github.com/gohugoio/hugo/issues/10632): lighten($cp-container-3, 5%); -> variable is hex string, not color
         padding: 0 20px;
 
         img {
@@ -160,9 +160,9 @@ Sidebar Styles
 
                     li {
                         a {
-                            background-color: $cp-container-3; // FIXME: darken($cp-container-3, 5%); -> variable is hex string, not color
+                            background-color: $cp-container-3; // FIXME (https://github.com/gohugoio/hugo/issues/10632): darken($cp-container-3, 5%); -> variable is hex string, not color
                             padding-left: 62px;
-                            border-bottom: 1px solid $cp-container-3-border;// FIXME: lighten($cp-container-3-border, 2%); -> variable is hex string, not color
+                            border-bottom: 1px solid $cp-container-3-border;// FIXME (https://github.com/gohugoio/hugo/issues/10632): lighten($cp-container-3-border, 2%); -> variable is hex string, not color
                             font-size: .8rem;
 
                             &:hover {

exampleSite/config.yaml

@@ -349,6 +349,15 @@ params:
     # Default width/height. Uncomment if you need to change
     # width: 112
     # height: 28
+  # ------------------------------------------
+  # Theme Override
+  # ------------------------------------------
+  customJS:
+    - "js/main.js"
+  customCSS: "/css/style.sass"
+  # ------------------------------------------
+  # Theme Color Palette
+  # ------------------------------------------
   style:
     # base colors
     # cp_base_primary: '#4fc1ea'

layouts/partials/css.html

@@ -1,17 +1,33 @@
-{{- $inServerMode := .Site.IsServer }}
-{{- $sass         := "style.sass" }}
-{{- $cssTarget    := "css/style.css" }}
-{{- $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style) (dict "targetPath" $cssTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style) }}
 <link rel="icon" type="image/png" href="{{ "images/favicon.png" | relURL }}" />
-<!-- bulma, fresh start -->
+{{- $inServerMode := .Site.IsServer }}
+<!-- bulma, invi, custom css start -->
+{{- $inviCSSTarget := "css/style.css" }}
+{{ if .Site.Params.customCSS }}
+    {{- $inviCSSTarget = "css/temp_invi_style.css" }}
+{{- end }}
+{{- $inviCSSOpts := cond ($inServerMode)
+    (dict "targetPath" $inviCSSTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style)
+    (dict "targetPath" $inviCSSTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style)
+}}
+{{- $inviSass    := resources.Get "style.sass" | toCSS $inviCSSOpts }}
+{{- $cssResource := $inviSass }}
+{{ with .Site.Params.customCSS }}
+    {{- $customCSSTarget := "css/temp_custom_style.css" }}
+    {{- $customCSSOpts   := cond ($inServerMode)
+        (dict "targetPath" $customCSSTarget "enableSourceMap" true "transpiler" "libsass" "vars" site.Params.style)
+        (dict "targetPath" $customCSSTarget "outputStyle" "compressed" "transpiler" "libsass" "vars" site.Params.style)
+    }}
+    {{- $customSass      := resources.Get . | toCSS $customCSSOpts }}
+    {{- $cssResource      = slice $inviSass $customSass | resources.Concat "css/style.css" }}
+{{- end }}
 {{- if $inServerMode }}
-{{- $css := resources.Get $sass | toCSS $cssOpts }}
-<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
+    {{- $css := $cssResource }}
+    <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}">
 {{- else }}
-{{- $css := resources.Get $sass | toCSS $cssOpts | minify | fingerprint }}
-<link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+    {{- $css := $cssResource | minify }}
+    <link rel="stylesheet" type="text/css" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
 {{- end }}
-<!-- bulma, fresh end -->
+<!-- bulma, invi css end -->
 <!-- photoswipe -->
 <link rel="stylesheet" type="text/css" href="{{ "modules/photoswipe/photoswipe.css" | relURL }}">
 <!-- fontawesome icons start -->

layouts/partials/javascript.html

@@ -1,3 +1,6 @@
 <script src={{ "modules/jquery-3.6.1.min.js" | relURL }}></script>
 <script type="module" src="{{ "js/invi.js" | relURL }}"></script>
+{{ range .Site.Params.customJS }}
+<script type="module" src="{{ . | relURL }}"></script>
+{{- end }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

static/js/invi.js

@@ -15,9 +15,7 @@ $(document).ready(function () {
         var notification = $('#cookie-notification');
         if (notification.length) {
             var allow_other_cookies = Cookies.get("allow-nonfunctional-website-cookies");
-            if (allow_other_cookies === null || typeof allow_other_cookies === "undefined") {
-                // TODO: change html.background-color to `whitesmoke`
-            } else {
+            if (allow_other_cookies !== null && typeof allow_other_cookies !== "undefined") {
                 notification.hide();
             }
         }
@@ -213,20 +211,19 @@ $(document).ready(function () {
  * @return {boolean} whether to accept cookies beyond the necessary functional ones.
  */
 function handleWebsiteCookies(accept) {
-    Cookies.set("allow-nonfunctional-website-cookies", accept, { expires: 730 }); // i.e. in 2 years
+    Cookies.set("allow-nonfunctional-website-cookies", accept, { expires: 730, sameSite: 'lax' }); // i.e. in 2 years
 
     var notification = $("#cookie-notification");
     if (notification.length) {
         notification.hide();
     }
-    // TODO: change html.background-color to `#444F60`
 }
 
 /**
  * acceptCookiesAndShowYouTubeVideo user clicked on youtube cookie consent button beneath video placeholder.
  */
 function acceptCookiesAndShowYouTubeVideo() {
-    Cookies.set("allow-youtube-cookies", true, { expires: 730 }); // i.e. in 2 years
+    Cookies.set("allow-youtube-cookies", true, { expires: 730, sameSite: 'lax' }); // i.e. in 2 years
 
     // hide consent notification
     var notification = document.getElementsByClassName("video-embed-notification")[0];

theme.toml

@@ -1,6 +1,6 @@
 # https://github.com/gohugoio/hugoThemesSiteBuilder#theme-configuration
 name = "Hugo Invi"
-version = "2.0"
+version = "2.0.1"
 license = "MIT"
 licenselink = "https://github.com/cubiest/hugo-invi/blob/master/LICENSE.txt"
 description = "A simple, clean and lightweight Hugo theme for multilingual websites, inspired by CSS Ninja's Fresh theme"