Merge pull request #49 from blackfyre/43-cookie-consent

43 cookie consent
blackfyre · Oct 30, 2023 · 23d7bdd · 23d7bdd
2 parents de9906e + 067eee6
commit 23d7bdd
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ resources/sitebuild/node_modules
 resources/sitebuild/out/style.css
 wga_data
 wga_sitemap
+analytics.txt
 .env
 
 dist/

diff --git a/assets/internals.go b/assets/internals.go
@@ -6,9 +6,11 @@ import (
 	"errors"
 	"html/template"
 	"log"
+	"os"
 	"strings"
 
 	"blackfyre.ninja/wga/utils"
+	"github.com/pocketbase/pocketbase"
 	"github.com/pocketbase/pocketbase/apis"
 )
 
@@ -22,6 +24,31 @@ type Renderable struct {
 	Data   map[string]any
 }
 
+func NewRenderData(app *pocketbase.PocketBase) map[string]any {
+
+	//read file ./analytics.txt and append it to the data map
+
+	data := map[string]any{}
+
+	if !app.Cache().Has("renderable:analytics") {
+
+		analytics, err := os.ReadFile("./analytics.txt")
+
+		if err != nil {
+			log.Println("Error reading analytics.txt")
+			log.Println(err)
+		}
+
+		app.Cache().Set("renderable:analytics", string(analytics))
+
+		data["Analytics"] = string(analytics)
+	} else {
+		data["Analytics"] = app.Cache().Get("renderable:analytics")
+	}
+
+	return data
+}
+
 // renderPage renders the given template with the provided data and returns the resulting HTML string.
 // The template is parsed from the views directory using the provided template name and the layout.html file.
 // If the template cannot be parsed or there is an error rendering it, an error is returned.

diff --git a/assets/public/css/cookieconsent.css b/assets/public/css/cookieconsent.css
diff --git a/assets/public/js/vendor/cookieconsent-init.js b/assets/public/js/vendor/cookieconsent-init.js
@@ -0,0 +1,92 @@
+// obtain plugin
+var cc = initCookieConsent();
+
+// run plugin with your configuration
+cc.run({
+    current_lang: 'en',
+    autoclear_cookies: true,                   // default: false
+    page_scripts: true,                        // default: false
+
+    // mode: 'opt-in'                          // default: 'opt-in'; value: 'opt-in' or 'opt-out'
+    // delay: 0,                               // default: 0
+    // auto_language: null                     // default: null; could also be 'browser' or 'document'
+    // autorun: true,                          // default: true
+    // force_consent: false,                   // default: false
+    // hide_from_bots: true,                   // default: true
+    // remove_cookie_tables: false             // default: false
+    // cookie_name: 'cc_cookie',               // default: 'cc_cookie'
+    // cookie_expiration: 182,                 // default: 182 (days)
+    // cookie_necessary_only_expiration: 182   // default: disabled
+    // cookie_domain: location.hostname,       // default: current domain
+    // cookie_path: '/',                       // default: root
+    // cookie_same_site: 'Lax',                // default: 'Lax'
+    // use_rfc_cookie: false,                  // default: false
+    // revision: 0,                            // default: 0
+
+    languages: {
+        'en': {
+            consent_modal: {
+                title: 'We use cookies!',
+                description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
+                primary_btn: {
+                    text: 'Accept all',
+                    role: 'accept_all'              // 'accept_selected' or 'accept_all'
+                },
+                secondary_btn: {
+                    text: 'Reject all',
+                    role: 'accept_necessary'        // 'settings' or 'accept_necessary'
+                }
+            },
+            settings_modal: {
+                title: 'Cookie preferences',
+                save_settings_btn: 'Save settings',
+                accept_all_btn: 'Accept all',
+                reject_all_btn: 'Reject all',
+                close_btn_label: 'Close',
+                cookie_table_headers: [
+                    { col1: 'Name' },
+                    { col2: 'Domain' },
+                    { col3: 'Expiration' },
+                    { col4: 'Description' }
+                ],
+                blocks: [
+                    {
+                        title: 'Cookie usage 📢',
+                        description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="/pages/privacy-policy" class="cc-link">privacy policy</a>.'
+                    }, {
+                        title: 'Strictly necessary cookies',
+                        description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
+                        toggle: {
+                            value: 'necessary',
+                            enabled: true,
+                            readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
+                        }
+                    }, {
+                        title: 'Performance and Analytics cookies',
+                        description: 'These cookies allow the website to remember the choices you have made in the past',
+                        toggle: {
+                            value: 'analytics',     // your cookie category
+                            enabled: false,
+                            readonly: false
+                        },
+                        cookie_table: [             // list of all expected cookies
+                            {
+                                col1: '^_ga',       // match all cookies starting with "_ga"
+                                col2: 'google.com',
+                                col3: '2 years',
+                                col4: 'description ...',
+                                is_regex: true
+                            },
+                            {
+                                col1: '_gid',
+                                col2: 'google.com',
+                                col3: '1 day',
+                                col4: 'description ...',
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+});
diff --git a/assets/public/js/vendor/cookieconsent.js b/assets/public/js/vendor/cookieconsent.js
diff --git a/assets/views/layout.html b/assets/views/layout.html
@@ -20,8 +20,10 @@
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
     <script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.0.0/animate.min.css" />
+    <link rel="stylesheet" href="/assets/css/cookieconsent.css" />
     {{block "head" .}}
     {{end}}
+    {{safeHTML .Analytics}}
 </head>
 
 <body class="customBody">
@@ -52,6 +54,8 @@
     <script src="/assets/js/vendor/viewer.min.js"></script>
     <script src="/assets/js/vendor/htmx.min.js"></script>
     <script src="/assets/js/app.js"></script>
+    <script defer src="/assets/js/vendor/cookieconsent.js" crossorigin="anonymous"></script>
+    <script defer src="/assets/js/vendor/cookieconsent-init.js" crossorigin="anonymous"></script>
     {{block "scripts" .}}
     {{end}}
 </body>

diff --git a/assets/views/pages/artist.html b/assets/views/pages/artist.html
@@ -63,8 +63,8 @@ <h3 class="title is-size-3">{{ .Title}}</h3>
                         </div>
                     </div>
                     <footer class="card-footer">
-                        <a class="card-footer-item" href="/artists/{{$.Slug}}/{{.Id}}"
-                            hx-get="/artists/{{$.Slug}}/{{.Id}}" hx-target="#mc-area">Learn More</a>
+                        <a class="card-footer-item" href="{{.Url}}" hx-get="{{.Url}}" hx-target="#mc-area">Learn
+                            More</a>
                         <a href="#" hx-on="click: document.getElementById('d').showModal();"
                             hx-get="/postcard/send?awid={{.Id}}" hx-target="#d" class="card-footer-item">Send
                             Postcard</a>

diff --git a/assets/views/partials/footer.html b/assets/views/partials/footer.html
@@ -12,11 +12,11 @@
                         hx-target="#mc-area">contributors</a>!
                 </p>
             </div>
-            <div class="column has-text-right">
+            <div class="column has-text-center">
                 <p>
                     Donations for maintaining and developing the Gallery are welcome.
                 </p>
-                <ul>
+                <ul class="has-text-right">
                     <li><a href="https://ko-fi.com/blackfyre" target="_blank">ko-fi.com/blackfyre</a></li>
                     <li><a href="https://github.com/sponsors/blackfyre" target="_blank">Github sponsorship</a></li>
                 </ul>
@@ -27,6 +27,9 @@
                         href="https://github.com/blackfyre/wga" target="_blank">Github</a>, and you're welcome to join
                     our <a href="/contributors" hx-get="/contributors" hx-target="#mc-area">code contributors</a>!
                 </p>
+                <p>
+                    <a data-cc="c-settings" href="#">Manage cookie settings</a>
+                </p>
             </div>
 
         </div>

diff --git a/handlers/artist.go b/handlers/artist.go
@@ -114,18 +114,11 @@ func registerArtist(app *pocketbase.PocketBase) {
 			html := ""
 
 			found := app.Cache().Has(cacheKey)
-			// found := false
 
 			if found {
 				html = app.Cache().Get(cacheKey).(string)
 			} else {
 
-				err := godotenv.Load()
-
-				if err != nil {
-					return apis.NewBadRequestError("Error loading .env file", err)
-				}
-
 				fullUrl := os.Getenv("WGA_PROTOCOL") + "://" + c.Request().Host + c.Request().URL.String()
 				artist, err := app.Dao().FindRecordsByFilter("artists", "slug = '"+slug+"'", "+name", 1, 0)
 
@@ -139,7 +132,7 @@ func registerArtist(app *pocketbase.PocketBase) {
 					return apis.NewNotFoundError("", err)
 				}
 
-				data := newTemplateData(c)
+				data := assets.NewRenderData(app)
 
 				data["Name"] = artist[0].GetString("name")
 				data["Bio"] = artist[0].GetString("bio")
@@ -194,6 +187,7 @@ func registerArtist(app *pocketbase.PocketBase) {
 						"Image":     jsonLd["image"].(string),
 						"Thumb":     jsonLd["thumbnailUrl"].(string),
 						"Jsonld":    jsonLd,
+						"Url":       c.Request().URL.String() + "/" + w.GetString("id"),
 					})
 				}
 
@@ -255,7 +249,7 @@ func registerArtist(app *pocketbase.PocketBase) {
 					return apis.NewNotFoundError("", err)
 				}
 
-				data := newTemplateData(c)
+				data := assets.NewRenderData(app)
 
 				data["ArtistName"] = artist[0].GetString("name")
 				data["ArtistUrl"] = "/artists/" + slug

diff --git a/handlers/artists.go b/handlers/artists.go
@@ -148,7 +148,7 @@ func registerArtists(app *pocketbase.PocketBase) {
 					preRendered = append(preRendered, row)
 				}
 
-				data := newTemplateData(c)
+				data := assets.NewRenderData(app)
 
 				data["Content"] = preRendered
 				data["Count"] = recordsCount

diff --git a/handlers/contributors.go b/handlers/contributors.go
@@ -130,9 +130,8 @@ func registerContributors(app *pocketbase.PocketBase) {
 					}
 				}
 
-				data := map[string]any{
-					"Contributors": contributors,
-				}
+				data := assets.NewRenderData(app)
+				data["Contributors"] = contributors
 
 				html, err = assets.Render(assets.Renderable{
 					IsHtmx: htmx,

diff --git a/handlers/home.go b/handlers/home.go
@@ -136,7 +136,7 @@ func registerHome(app *pocketbase.PocketBase) {
 
 			html := ""
 
-			data := newTemplateData(c)
+			data := assets.NewRenderData(app)
 
 			data["Content"] = welcomeText
 			data["ArtistCount"] = artistCount

diff --git a/handlers/postcard.go b/handlers/postcard.go
@@ -97,7 +97,7 @@ func registerPostcardHandlers(app *pocketbase.PocketBase, p *bluemonday.Policy)
 
 			aw := r.ExpandedOne("image_id")
 
-			data := newTemplateData(c)
+			data := assets.NewRenderData(app)
 
 			data["SenderName"] = r.GetString("sender_name")
 			data["Message"] = r.GetString("message")

diff --git a/handlers/search/main.go b/handlers/search/main.go
@@ -56,9 +56,9 @@ func search(app *pocketbase.PocketBase, e *core.ServeEvent, c echo.Context) erro
 		return c.HTML(http.StatusOK, html)
 	} else {
 
-		td := map[string]any{
-			"Artworks": []any{},
-		}
+		td := assets.NewRenderData(app)
+
+		td["Artworks"] = []any{}
 
 		filterString, filterParams := filters.BuildFilter()
 

diff --git a/handlers/static.go b/handlers/static.go
@@ -43,14 +43,16 @@ func registerStatic(app *pocketbase.PocketBase) {
 				return err
 			}
 
+			d := assets.NewRenderData(app)
+
+			d["Title"] = page.Title
+			d["Slug"] = page.Slug
+			d["Content"] = page.Content
+
 			html, err := assets.Render(assets.Renderable{
 				IsHtmx: utils.IsHtmxRequest(c),
 				Block:  "staticpage:content",
-				Data: map[string]any{
-					"Title":   page.Title,
-					"Slug":    page.Slug,
-					"Content": page.Content,
-				},
+				Data:   d,
 			})
 
 			if err != nil {

diff --git a/handlers/utils.go b/handlers/utils.go
@@ -47,9 +47,3 @@ func sendToastMessage(message string, t string, closeDialog bool, c echo.Context
 
 	setHxTrigger(c, m)
 }
-
-func newTemplateData(c echo.Context) map[string]any {
-	return map[string]any{
-		"currentUrl": c.Request().URL.String(),
-	}
-}
diff --git a/resources/sitebuild/src/css/style.scss b/resources/sitebuild/src/css/style.scss
@@ -189,6 +189,11 @@ figure.hidden-caption {
   transform: rotate(-90deg) translate(0, 93%);
 }
 
+// fix for cookie consent title hover jumping
+.c-bl .title {
+  margin-bottom: 0;
+}
+
 @import "_dialog.scss";
 @import "_trix.scss";
 @import "_table.scss";