From e89e2d37505fb56bb83513e6b3b529b7c5aae2da Mon Sep 17 00:00:00 2001
From: Massimo Maggioni <94243057+MassimoMaggioni@users.noreply.github.com>
Date: Fri, 18 Feb 2022 22:46:09 +0100
Subject: [PATCH] review code of gdpr banner
---
assets/scss/partials/base.scss | 14 +++
assets/scss/partials/layout/article.scss | 63 +++++++-----
assets/scss/variables.scss | 27 +++--
assets/ts/gallery.ts | 56 ++++++++++-
assets/ts/main.ts | 15 +--
data/gdpr.yaml | 2 +-
exampleSite/config.yaml | 13 ++-
.../content/post/markdown-syntax/index.md | 4 +
.../content/post/rich-content/index.md | 4 +
go.mod | 2 +-
i18n/en.yaml | 4 +-
i18n/it.yaml | 4 +-
layouts/_default/_markup/render-image.html | 27 +++--
layouts/partials/footer/custom.html | 2 +-
layouts/partials/footer/footer.html | 19 ++--
layouts/partials/gdpr/banner.html | 98 ++++++++++++-------
layouts/partials/head/head.html | 2 +-
17 files changed, 231 insertions(+), 125 deletions(-)
diff --git a/assets/scss/partials/base.scss b/assets/scss/partials/base.scss
index 408629e..e7aefe6 100644
--- a/assets/scss/partials/base.scss
+++ b/assets/scss/partials/base.scss
@@ -22,3 +22,17 @@ body {
scrollbar-color: var(--scrollbar-thumb) transparent;
}
/**/
+
+/* scrollbar styles for Chromium */
+::-webkit-scrollbar {
+ height: auto;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+/**/
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 78ed81c..af5f7bb 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -123,7 +123,6 @@
}
.article-page.has-toc {
-
.left-sidebar {
display: none;
}
@@ -395,6 +394,41 @@
}
}
+ .highlight {
+ background-color: var(--pre-background-color);
+ padding: var(--card-padding);
+ position: relative;
+
+ &:hover {
+ .copyCodeButton {
+ opacity: 1;
+ }
+ }
+
+ pre {
+ margin: initial;
+ padding: 0;
+ margin: 0;
+ width: auto;
+ }
+ }
+
+ .copyCodeButton {
+ position: absolute;
+ top: calc(var(--card-padding));
+ right: calc(var(--card-padding));
+ background: var(--card-background);
+ border: none;
+ box-shadow: var(--shadow-l2);
+ border-radius: var(--tag-border-radius);
+ padding: 8px 16px;
+ color: var(--card-text-color-main);
+ cursor: pointer;
+ font-size: 14px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
.table-wrapper {
padding: 0 var(--card-padding);
overflow-x: auto;
@@ -449,6 +483,7 @@
/// Negative margins
blockquote,
figure,
+ .highlight,
pre,
.gallery,
.video-wrapper,
@@ -458,30 +493,4 @@
margin-right: calc((var(--card-padding)) * -1);
width: calc(100% + var(--card-padding) * 2);
}
-
- .highlight {
- position: relative;
-
- &:hover {
- .copyCodeButton {
- opacity: 1;
- }
- }
- }
-
- .copyCodeButton {
- position: absolute;
- top: calc(var(--card-padding));
- right: 0;
- background: var(--card-background);
- border: none;
- box-shadow: var(--shadow-l2);
- border-radius: var(--tag-border-radius);
- padding: 8px 16px;
- color: var(--card-text-color-main);
- cursor: pointer;
- font-size: 14px;
- opacity: 0;
- transition: opacity 0.3s ease;
- }
}
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 8e371d6..f7d45b4 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -1,19 +1,6 @@
$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
-[data-scheme="light"] {
- --pre-text-color: #272822;
- --pre-background-color: #fafafa;
- @import "partials/highlight/light.scss";
-}
-
-[data-scheme="dark"] {
- color-scheme: dark;
- --pre-text-color: #f8f8f2;
- --pre-background-color: #272822;
- @import "partials/highlight/dark.scss";
-}
-
/*
* Global style
*/
@@ -46,7 +33,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
- --scrollbar-thumb: #424242;
+ --scrollbar-thumb: hsl(0, 0%, 40%);
--scrollbar-track: var(--body-background);
}
}
@@ -160,3 +147,15 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
0px 0px 1px rgba(0, 0, 0, 0.04);
}
+
+[data-scheme="light"] {
+ --pre-text-color: #272822;
+ --pre-background-color: #fafafa;
+ @import "partials/highlight/light.scss";
+}
+
+[data-scheme="dark"] {
+ --pre-text-color: #f8f8f2;
+ --pre-background-color: #272822;
+ @import "partials/highlight/dark.scss";
+}
diff --git a/assets/ts/gallery.ts b/assets/ts/gallery.ts
index 5de13a2..156bbfa 100644
--- a/assets/ts/gallery.ts
+++ b/assets/ts/gallery.ts
@@ -57,6 +57,60 @@ class StackGallery {
}
public static createGallery(container: HTMLElement) {
+ /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
+ /// because it can not detect whether image is being wrapped by a link or not
+ /// and it lead to a invalid HTML construction (![]()
)
+
+ const images = container.querySelectorAll('img');
+ for (const img of Array.from(images)) {
+ /// Images are wrapped with figure tag if the paragraph has only images without texts
+ /// This is done to allow inline images within paragraphs
+ const paragraph = img.closest('p');
+
+ if (!paragraph || !container.contains(paragraph)) continue;
+
+ if (paragraph.textContent.trim() == '') {
+ /// Once we insert figcaption, this check no longer works
+ /// So we add a class to paragraph to mark it
+ paragraph.classList.add('no-text');
+ }
+
+ let isNewLineImage = paragraph.classList.contains('no-text');
+ if (!isNewLineImage) continue;
+
+ const hasLink = img.parentElement.tagName == 'A';
+
+ let el: HTMLElement = img;
+ /// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
+ const figure = document.createElement('figure');
+ figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
+ figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
+ if (hasLink) {
+ /// Wrap if it exists
+ el = img.parentElement;
+ }
+ el.parentElement.insertBefore(figure, el);
+ figure.appendChild(el);
+
+ /// Add figcaption if it exists
+ if (img.hasAttribute('alt')) {
+ const figcaption = document.createElement('figcaption');
+ figcaption.innerText = img.getAttribute('alt');
+ figure.appendChild(figcaption);
+ }
+
+ /// Wrap img tag with tag if image was not wrapped by tag
+ if (!hasLink) {
+ figure.className = 'gallery-image';
+
+ const a = document.createElement('a');
+ a.href = img.src;
+ a.setAttribute('target', '_blank');
+ img.parentNode.insertBefore(a, img);
+ a.appendChild(img);
+ }
+ }
+
const figuresEl = container.querySelectorAll('figure.gallery-image');
let currentGallery = [];
@@ -129,4 +183,4 @@ class StackGallery {
}
}
-export default StackGallery;
\ No newline at end of file
+export default StackGallery;
diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index 20de18c..4bd76e7 100644
--- a/assets/ts/main.ts
+++ b/assets/ts/main.ts
@@ -62,20 +62,21 @@ let Stack = {
/**
* Add copy button to code block
*/
- const codeBlocks = document.querySelectorAll('.article-content > div.highlight');
+ const highlights = document.querySelectorAll('.article-content div.highlight');
const copyText = `Copy`,
copiedText = `Copied!`;
- codeBlocks.forEach(codeBlock => {
+
+ highlights.forEach(highlight => {
const copyButton = document.createElement('button');
copyButton.innerHTML = copyText;
copyButton.classList.add('copyCodeButton');
- codeBlock.appendChild(copyButton);
+ highlight.appendChild(copyButton);
- const pre = codeBlock.getElementsByTagName('pre');
- const code = pre[0].textContent;
+ const codeBlock = highlight.querySelector('code[data-lang]');
+ if (!codeBlock) return;
copyButton.addEventListener('click', () => {
- navigator.clipboard.writeText(code)
+ navigator.clipboard.writeText(codeBlock.textContent)
.then(() => {
copyButton.textContent = copiedText;
@@ -108,4 +109,4 @@ declare global {
}
window.Stack = Stack;
-window.createElement = createElement;
\ No newline at end of file
+window.createElement = createElement;
diff --git a/data/gdpr.yaml b/data/gdpr.yaml
index d9a45c6..b7ced7e 100644
--- a/data/gdpr.yaml
+++ b/data/gdpr.yaml
@@ -1,7 +1,7 @@
plugins:
- name: gtag
enabled: true
- functional: false
+ optional: true
title: Google Analytics
description: This code gives us insight into the number of people that visit our website, where they are from and what they are clicking on. We follow the guidelines of the Italian Government.
html_src: gdpr/gtag.html
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 30fd32a..f05a4cf 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -4,6 +4,8 @@ theme: hugo-theme-stack
paginate: 5
title: Example Site
+
+
# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack
@@ -29,9 +31,10 @@ params:
rssFullContent: true
favicon:
- GDPRbanner:
- enabled: true
- onlyfunctional: false
+ # mode: nocookie, functional, consent
+ GDPR:
+ enable: true
+ mode: consent
footer:
since: 2020
@@ -193,13 +196,13 @@ menu:
name: GitHub
url: https://github.com/CaiJimmy/hugo-theme-stack
params:
- icon: brand-github
+ icon: brand-github
- identifier: twitter
name: Twitter
url: https://twitter.com
params:
- icon: brand-twitter
+ icon: brand-twitter
related:
includeNewer: true
diff --git a/exampleSite/content/post/markdown-syntax/index.md b/exampleSite/content/post/markdown-syntax/index.md
index be381a0..947fd75 100644
--- a/exampleSite/content/post/markdown-syntax/index.md
+++ b/exampleSite/content/post/markdown-syntax/index.md
@@ -162,3 +162,7 @@ Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Hyperlinked image
+
+[](https://google.com)
diff --git a/exampleSite/content/post/rich-content/index.md b/exampleSite/content/post/rich-content/index.md
index af8a390..995bab4 100644
--- a/exampleSite/content/post/rich-content/index.md
+++ b/exampleSite/content/post/rich-content/index.md
@@ -36,3 +36,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
## bilibilibi Shortcode
{{< bilibili av498363026 >}}
+
+## Gist Shortcode
+
+{{< gist spf13 7896402 >}}
diff --git a/go.mod b/go.mod
index 1cf4674..776617e 100644
--- a/go.mod
+++ b/go.mod
@@ -1,3 +1,3 @@
-module github.com/CaiJimmy/hugo-theme-stack
+module github.com/CaiJimmy/hugo-theme-stack/v3
go 1.12
diff --git a/i18n/en.yaml b/i18n/en.yaml
index b55cc32..ebbcdec 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -63,8 +63,8 @@ search:
other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
footer:
- GDPRsettings:
- modify: Manage GDPR settings
+ GDPR:
+ consent: Manage GDPR settings
functional: This website use only functional cookies
nocookie: This website doesn't use any cookie and doesn't collect any personal data
diff --git a/i18n/it.yaml b/i18n/it.yaml
index bd0f53a..baf4f1e 100644
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@@ -62,8 +62,8 @@ search:
other: "#PAGES_COUNT pagine (#TIME_SECONDS secondi)"
footer:
- GDPRsettings:
- other: Gestisci il consenso GDPR
+ GDPR:
+ consent: Gestisci il consenso GDPR
functional: Questo sito web utilizza solo cookie funzionali
nocookie: Questo sito web non usa cookie e non raccoglie dati personali
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 0325458..d60aecb 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -25,22 +25,17 @@
{{- end -}}
{{- end -}}
-
-
- 
-
- {{ with $alt }}
- {{ . | markdownify }}
+ data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
+ data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
{{ end }}
-
\ No newline at end of file
+>
diff --git a/layouts/partials/footer/custom.html b/layouts/partials/footer/custom.html
index 37a8817..d2431f2 100644
--- a/layouts/partials/footer/custom.html
+++ b/layouts/partials/footer/custom.html
@@ -1,3 +1,3 @@
-{{ if and .Site.Params.GDPRbanner.enabled (not .Site.Params.GDPRbanner.onlyfunctional) }}
+{{ if and .Site.Params.GDPR.enable (not (eq .Site.Params.GDPR.mode "nocookie")) }}
{{ partial "gdpr/banner.html" . }}
{{ end }}
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
index a4032ee..f01c364 100644
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@@ -1,6 +1,5 @@
-{{- $ThemeVersion := "3.7.0" -}}
+{{- $ThemeVersion := "3.8.0" -}}