pidgin/nest

Add alert feature

23 months ago, Jason
be2ccb14626b
Parents 9589f5baead9
Children 8eb183677415
Add alert feature

The alert shows at the top of the page when present
Binary file docs/images/notifications.png has changed
--- a/hugo/config.toml Sat Dec 28 04:06:39 2019 +0000
+++ b/hugo/config.toml Mon Dec 30 22:30:49 2019 +0000
@@ -10,6 +10,11 @@
editURL = "https://bitbucket.org/pidgin/nest/src/default/hugo/content/"
disableShortcutsTitle = true
+# These manage the notification banner. When finished, please comment them out
+# The code is used in the cookie to prevent showing the alert once closed
+notificationMessage = "We've launched the new site. Think we're missing something? <a href=\"https://old.pidgin.im\">Go to the old site</a>"
+notificationCode = "nest-launch"
+
[outputs]
home = [ "HTML", "RSS", "JSON"]
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/hugo/layouts/partials/custom-footer.html Mon Dec 30 22:30:49 2019 +0000
@@ -0,0 +1,65 @@
+{{ if (and .Site.Params.notificationMessage .Site.Params.notificationCode)}}
+ <script src="/js/js.cookie.min.js"></script>
+
+ <div id="notification-stage">
+ <div class="alert-bar notification-bar">
+ <i class="fas fa-exclamation"></i>
+ <div class="alert-bar-close-button"><i class="fas fa-times"></i></div>
+ <span>{{ .Site.Params.notificationMessage | safeHTML }}</span>
+ </div>
+ </div>
+
+ <script>
+ try {
+ var code = "{{ .Site.Params.notificationCode }}";
+ } catch (e) {
+ console.error("Error with cookie code", e);
+ }
+
+ if (code && code !== Cookies.get("hide-notification")) {
+ var bar = $(".notification-bar");
+ $(".padding.highlightable").prepend(bar);
+ $(".alert-bar-close-button").on("click", function(elem) {
+ Cookies.set("hide-notification", code);
+ bar.detach();
+ });
+ }
+ </script>
+
+ <style>
+ #notification-stage {
+ display: none;
+ }
+
+ .alert-bar {
+ font-weight: bold;
+ padding: 20px;
+ background-color: #4caf50;
+ color: white;
+ margin-bottom: 15px;
+ }
+
+ .alert-bar a {
+ color: darkgreen;
+ }
+
+ .alert-bar a:hover {
+ color: black;
+ }
+
+ .alert-bar-close-button {
+ margin-left: 15px;
+ color: white;
+ font-weight: bold;
+ float: right;
+ font-size: 22px;
+ line-height: 20px;
+ cursor: pointer;
+ transition: 0.3s;
+ }
+
+ .alert-bar-close-button:hover {
+ color: black;
+ }
+ </style>
+{{ end }}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/hugo/static/js/js.cookie.min.js Mon Dec 30 22:30:49 2019 +0000
@@ -0,0 +1,2 @@
+/*! js-cookie v3.0.0-beta.3 | MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,r=e.Cookies=t();r.noConflict=function(){return e.Cookies=n,r}}())}(this,function(){"use strict";var e={read:function(e){return e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};function t(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}return function n(r,o){function i(e,n,i){if("undefined"!=typeof document){"number"==typeof(i=t({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),n=r.write(n,e),e=encodeURIComponent(e).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=e+"="+n+c}}return Object.create({set:i,get:function(t){if("undefined"!=typeof document&&(!arguments.length||t)){for(var n=document.cookie?document.cookie.split("; "):[],o={},i=0;i<n.length;i++){var c=n[i].split("="),u=c.slice(1).join("=");'"'===u[0]&&(u=u.slice(1,-1));try{var f=e.read(c[0]);if(o[f]=r.read(u,f),t===f)break}catch(e){}}return t?o[t]:o}},remove:function(e,n){i(e,"",t({},n,{expires:-1}))},withAttributes:function(e){return n(this.converter,t({},this.attributes,e))},withConverter:function(e){return n(t({},this.converter,e),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(r)}})}(e,{path:"/"})});
--- a/readme.md Sat Dec 28 04:06:39 2019 +0000
+++ b/readme.md Mon Dec 30 22:30:49 2019 +0000
@@ -23,7 +23,7 @@
1. `docker build -t pidgin/nest:latest .`
2. `docker run -it --rm -p 3000:3000 pidgin/nest:latest`
-### Formatting
+## Formatting
These are some regex's to quickly format templating
@@ -45,3 +45,24 @@
1. [Run dev server](#Developing-Docs)
1. To run the visual diff tool call `node tools/visual-diff.js` or
`npm run regression`
+
+## Alert Notification
+
+![](docs/images/notifications.png)
+
+Notifications are configured in `hugo/config.toml`
+
+```toml
+[params]
+notificationMessage = "Great News Everyone!"
+notificationCode = "nest-launch"
+```
+
+- `notificationMessage` is the message and is fully HTML
+- `notificationCode` is used as the key to remember if the notification has been cleared
+
+If Either of these are unset, the template will not render
+
+The notification template is rendered `display: none` in the
+`hugo/layouts/partials/custom-footer.html`, and then hoisted to the top of the
+page if the cookie is not equal to the code.