From 36a825b7a0712c4e16ccc33c65a53e950ad51ec0 Mon Sep 17 00:00:00 2001 From: SkalskiP Date: Fri, 9 Feb 2024 12:47:02 +0100 Subject: [PATCH 1/4] author styling improvements --- docs/javascripts/cookbooks-card.js | 60 +++++++++++++---------------- docs/stylesheets/cookbooks-card.css | 57 +++++++++++++++++++++++---- docs/theme/cookbooks.html | 3 +- 3 files changed, 77 insertions(+), 43 deletions(-) diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js index dd36eacb..d2447324 100644 --- a/docs/javascripts/cookbooks-card.js +++ b/docs/javascripts/cookbooks-card.js @@ -1,7 +1,7 @@ document.addEventListener("DOMContentLoaded", function () { - async function setCard(el, url, name, desc, labels, version, theme, authors) { + async function setCard(el, url, name, labels, version, theme, authors) { const colorList = [ "#22c55e", "#14b8a6", @@ -28,34 +28,32 @@ document.addEventListener("DOMContentLoaded", function () { return await response.json(); })); - let authorHTML = ''; - authorDataArray.forEach((authorData, index) => { - const marginLeft = index === 0 ? '0' : '-15px'; - authorHTML += ` -
- - - - -
+ let authorAvatarsHTML = authorDataArray.map((authorData, index) => { + const marginLeft = index === 0 ? '0' : '-10px'; + const zIndex = 100 - index; + return ` +
+ + ${authorData.login}'s avatar + +
`; - }); - - document.querySelectorAll('.author-container').forEach((container) => { - const tooltip = container.querySelector('.tooltip'); - container.addEventListener('mouseover', () => { - tooltip.style.visibility = 'visible'; - tooltip.style.opacity = '1'; - }); - container.addEventListener('mouseout', () => { - tooltip.style.visibility = 'hidden'; - tooltip.style.opacity = '0'; - }); - }); + }).join(''); + let authorNamesHTML = authorDataArray.map( + authorData => ` + + ${authorData.login} + + ` + ).join(', '); + let authorsHTML = ` +
+ ${authorAvatarsHTML} +
${authorNamesHTML}
+
+ `; el.innerText = ` @@ -66,12 +64,7 @@ document.addEventListener("DOMContentLoaded", function () { ${name} -
- ${desc} -
-
- ${authorHTML} -
+ ${authorsHTML}
@@ -92,7 +85,6 @@ document.addEventListener("DOMContentLoaded", function () { for (const el of document.querySelectorAll('.repo-card')) { const url = el.getAttribute('data-url'); const name = el.getAttribute('data-name'); - const desc = el.getAttribute('data-desc'); const labels = el.getAttribute('data-labels'); const version = el.getAttribute('data-version'); const authors = el.getAttribute('data-author'); @@ -103,6 +95,6 @@ document.addEventListener("DOMContentLoaded", function () { var theme = "light-default" } - setCard(el, url, name, desc, labels, version, theme, authors); + setCard(el, url, name, labels, version, theme, authors); } }) diff --git a/docs/stylesheets/cookbooks-card.css b/docs/stylesheets/cookbooks-card.css index d6e45fdd..f794f498 100644 --- a/docs/stylesheets/cookbooks-card.css +++ b/docs/stylesheets/cookbooks-card.css @@ -31,20 +31,61 @@ transform: translateY(-0.125rem); /* Move up by -0.125rem on hover */ } -.portfolio-section { - padding-bottom: 1rem; +.authors { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 1rem; + margin-top: 1rem; + font-size: 0.75rem; + line-height: 1rem; } -.md-typeset h1 { - margin: 0 0 0.75rem; +.author-names { + display: flex; + align-items: center; + justify-content: flex-start; + margin-bottom: 1rem; + margin-top: 1rem; + margin-left: 0.5rem; } -.author-name { - opacity: 0; +.author-container { + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + padding: 0; + margin: 0; + transition: transform 0.2s; } -div:hover .author-name { - opacity: 1; +.author-container:hover { + transform: translateY(-0.125rem); +} + +.author-container a { + padding: 0; + margin: 0; + display: block; +} + +.author-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + display: block; +} + +.author-name a { + color: inherit; /* Inherits the color from the parent element */ + text-decoration: none; /* Removes the underline */ +} + +.author-name a:hover { + color: inherit; /* Inherits the color from the parent element */ + text-decoration: underline; /* Adds underline on hover */ } .non-selectable-text { diff --git a/docs/theme/cookbooks.html b/docs/theme/cookbooks.html index a76c20d4..0446c5d2 100644 --- a/docs/theme/cookbooks.html +++ b/docs/theme/cookbooks.html @@ -11,7 +11,8 @@

Supervision Cookbooks

-

+

+

From 03f7001a2ba728bba26fab83233f97ca944fab93 Mon Sep 17 00:00:00 2001 From: SkalskiP Date: Fri, 9 Feb 2024 13:26:32 +0100 Subject: [PATCH 2/4] cookbooks-card.js refactor --- docs/javascripts/cookbooks-card.js | 108 ++++++++++++++++++---------- docs/stylesheets/cookbooks-card.css | 11 +++ docs/theme/cookbooks.html | 5 +- 3 files changed, 83 insertions(+), 41 deletions(-) diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js index d2447324..c1798337 100644 --- a/docs/javascripts/cookbooks-card.js +++ b/docs/javascripts/cookbooks-card.js @@ -1,26 +1,37 @@ - document.addEventListener("DOMContentLoaded", function () { - async function setCard(el, url, name, labels, version, theme, authors) { + const palette = __md_get("__palette") + const useDark = palette && typeof palette.color === "object" && palette.color.scheme === "slate" + const theme = useDark ? "dark-theme" : "light-default"; + const colorList = [ - "#22c55e", - "#14b8a6", - "#ef4444", - "#eab308", - "#8b5cf6", - "#f97316", - "#3b82f6", + "#22c55e", + "#14b8a6", + "#ef4444", + "#eab308", + "#8b5cf6", + "#f97316", + "#3b82f6", ] - let labelHTML = '' - if (labels) { - const labelArray = labels.split(',').map((label, index) => { - const color = colorList[index % colorList.length] - return `${label}` - }) + async function renderCard(element) { + const url = element.getAttribute('data-url'); + const name = element.getAttribute('data-name'); + const labels = element.getAttribute('data-labels'); + const version = element.getAttribute('data-version'); + const authors = element.getAttribute('data-author'); - labelHTML = labelArray.join(' ') - } + const labelHTML = labels ? labels.split(',').map((label, index) => { + const color = colorList[index % colorList.length]; + return ` + + ${label.trim()} + + `; + }).join(' ') : ''; const authorArray = authors.split(','); const authorDataArray = await Promise.all(authorArray.map(async (author) => { @@ -32,16 +43,33 @@ document.addEventListener("DOMContentLoaded", function () { const marginLeft = index === 0 ? '0' : '-10px'; const zIndex = 100 - index; return ` -
- - ${authorData.login}'s avatar +
+ + ${authorData.login}'s avatar
`; }).join(''); let authorNamesHTML = authorDataArray.map( - authorData => ` + authorData => ` + ${authorData.login} @@ -55,7 +83,21 @@ document.addEventListener("DOMContentLoaded", function () {
`; - el.innerText = ` + document.querySelectorAll('.author-name').forEach(element => { + element.addEventListener('mouseenter', function() { + const login = this.getAttribute('data-login'); + console.log(login, "enter") + document.querySelector(`.author-container[data-login="${login}"]`).classList.add('hover'); + }); + + element.addEventListener('mouseleave', function() { + const login = this.getAttribute('data-login'); + console.log(login, "leave") + document.querySelector(`.author-container[data-login="${login}"]`).classList.remove('hover'); + }); + }); + + element.innerText = `
@@ -79,22 +121,10 @@ document.addEventListener("DOMContentLoaded", function () { ` - let sanitizedHTML = DOMPurify.sanitize(el.innerText); - el.innerHTML = sanitizedHTML; - } - for (const el of document.querySelectorAll('.repo-card')) { - const url = el.getAttribute('data-url'); - const name = el.getAttribute('data-name'); - const labels = el.getAttribute('data-labels'); - const version = el.getAttribute('data-version'); - const authors = el.getAttribute('data-author'); - const palette = __md_get("__palette") - if (palette && typeof palette.color === "object") { - var theme = palette.color.scheme === "slate" ? "dark-theme" : "light-default" - } else { - var theme = "light-default" - } - - setCard(el, url, name, labels, version, theme, authors); + let sanitizedHTML = DOMPurify.sanitize(element.innerText); + element.innerHTML = sanitizedHTML; } + document.querySelectorAll('.repo-card').forEach((element, index) => { + renderCard(element); + }); }) diff --git a/docs/stylesheets/cookbooks-card.css b/docs/stylesheets/cookbooks-card.css index f794f498..13199793 100644 --- a/docs/stylesheets/cookbooks-card.css +++ b/docs/stylesheets/cookbooks-card.css @@ -61,6 +61,10 @@ transition: transform 0.2s; } +.author-container.hover { + transform: translateY(-0.125rem); +} + .author-container:hover { transform: translateY(-0.125rem); } @@ -88,6 +92,13 @@ text-decoration: underline; /* Adds underline on hover */ } +.label { + color: #fff; + padding: 2px 4px; + border-radius: 4px; + margin-right: 4px; +} + .non-selectable-text { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ diff --git a/docs/theme/cookbooks.html b/docs/theme/cookbooks.html index 0446c5d2..dc22da68 100644 --- a/docs/theme/cookbooks.html +++ b/docs/theme/cookbooks.html @@ -11,8 +11,9 @@

Supervision Cookbooks

-

-

+

+

+

From 85f09e33231c707742fd65abd60ca0a623e9c167 Mon Sep 17 00:00:00 2001 From: SkalskiP Date: Fri, 9 Feb 2024 14:19:41 +0100 Subject: [PATCH 3/4] same label have same color across multiple cards; fixed small bug with hover effect --- docs/javascripts/cookbooks-card.js | 56 +++++++++++++++++------------ docs/stylesheets/cookbooks-card.css | 2 +- docs/theme/cookbooks.html | 2 -- 3 files changed, 35 insertions(+), 25 deletions(-) diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js index c1798337..04d3c27a 100644 --- a/docs/javascripts/cookbooks-card.js +++ b/docs/javascripts/cookbooks-card.js @@ -14,15 +14,29 @@ document.addEventListener("DOMContentLoaded", function () { "#3b82f6", ] - async function renderCard(element) { + const repoCards = document.querySelectorAll(".repo-card"); + const labelsAll = Array + .from(repoCards) + .flatMap((element) => element.getAttribute('data-labels').split(',')) + .map(label => label.trim()) + .filter(label => label !== ''); + const uniqueLabels = [...new Set(labelsAll)]; + + const labelToColor = uniqueLabels.reduce((map, label, index) => { + map[label] = colorList[index % colorList.length]; + return map; + }, {}); + + + async function renderCard(element, elementIndex) { const url = element.getAttribute('data-url'); const name = element.getAttribute('data-name'); const labels = element.getAttribute('data-labels'); const version = element.getAttribute('data-version'); const authors = element.getAttribute('data-author'); - const labelHTML = labels ? labels.split(',').map((label, index) => { - const color = colorList[index % colorList.length]; + const labelHTML = labels ? labels.split(',').filter(label => label !== '').map((label, index) => { + const color = labelToColor[label.trim()]; return ` ` @@ -83,20 +97,6 @@ document.addEventListener("DOMContentLoaded", function () { `; - document.querySelectorAll('.author-name').forEach(element => { - element.addEventListener('mouseenter', function() { - const login = this.getAttribute('data-login'); - console.log(login, "enter") - document.querySelector(`.author-container[data-login="${login}"]`).classList.add('hover'); - }); - - element.addEventListener('mouseleave', function() { - const login = this.getAttribute('data-login'); - console.log(login, "leave") - document.querySelector(`.author-container[data-login="${login}"]`).classList.remove('hover'); - }); - }); - element.innerText = `
${version}
-
+
${labelHTML}
@@ -123,8 +123,20 @@ document.addEventListener("DOMContentLoaded", function () { let sanitizedHTML = DOMPurify.sanitize(element.innerText); element.innerHTML = sanitizedHTML; + + document.querySelectorAll('.author-name').forEach(element => { + element.addEventListener('mouseenter', function() { + const login = this.getAttribute('data-login'); + document.querySelector(`.author-container[data-login="${login}"]`).classList.add('hover'); + }); + + element.addEventListener('mouseleave', function() { + const login = this.getAttribute('data-login'); + document.querySelector(`.author-container[data-login="${login}"]`).classList.remove('hover'); + }); + }); } - document.querySelectorAll('.repo-card').forEach((element, index) => { - renderCard(element); + repoCards.forEach((element, index) => { + renderCard(element, index); }); }) diff --git a/docs/stylesheets/cookbooks-card.css b/docs/stylesheets/cookbooks-card.css index 13199793..118c946c 100644 --- a/docs/stylesheets/cookbooks-card.css +++ b/docs/stylesheets/cookbooks-card.css @@ -94,7 +94,7 @@ .label { color: #fff; - padding: 2px 4px; + padding: 2px 6px; border-radius: 4px; margin-right: 4px; } diff --git a/docs/theme/cookbooks.html b/docs/theme/cookbooks.html index dc22da68..22186807 100644 --- a/docs/theme/cookbooks.html +++ b/docs/theme/cookbooks.html @@ -12,8 +12,6 @@

-

-

From b7070ae5742417b797c8f0f9083e8b46fb59cc9f Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 9 Feb 2024 13:23:07 +0000 Subject: [PATCH 4/4] =?UTF-8?q?fix(pre=5Fcommit):=20=F0=9F=8E=A8=20auto=20?= =?UTF-8?q?format=20pre-commit=20hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/javascripts/cookbooks-card.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/javascripts/cookbooks-card.js b/docs/javascripts/cookbooks-card.js index 04d3c27a..67f81edc 100644 --- a/docs/javascripts/cookbooks-card.js +++ b/docs/javascripts/cookbooks-card.js @@ -38,8 +38,8 @@ document.addEventListener("DOMContentLoaded", function () { const labelHTML = labels ? labels.split(',').filter(label => label !== '').map((label, index) => { const color = labelToColor[label.trim()]; return ` - ${label.trim()} @@ -57,19 +57,19 @@ document.addEventListener("DOMContentLoaded", function () { const marginLeft = index === 0 ? '0' : '-10px'; const zIndex = 100 - index; return ` -
- - ${authorData.login}'s avatar @@ -79,9 +79,9 @@ document.addEventListener("DOMContentLoaded", function () { let authorNamesHTML = authorDataArray.map( authorData => ` -