From cafadd09803a938ec723e45f894fee03afbb8da7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 23 Oct 2023 01:36:07 +0800 Subject: [PATCH] More fixes for Trending news --- src/pages/trending.css | 59 ++++++++++++++++++++--------------- src/pages/trending.jsx | 70 ++++++++++++++++++++---------------------- 2 files changed, 69 insertions(+), 60 deletions(-) diff --git a/src/pages/trending.css b/src/pages/trending.css index ca743f75..5c2c2751 100644 --- a/src/pages/trending.css +++ b/src/pages/trending.css @@ -1,7 +1,7 @@ .links-bar { position: relative; display: flex; - padding: 16px 16px 20px calc(16px + 1em + 12px); + padding: 16px 16px 20px 16px; gap: 16px; overflow-x: auto; background-color: var(--bg-faded-color); @@ -23,27 +23,34 @@ } } - h3 { - font-size: 90%; - font-style: italic; - margin: 0; - padding: 0; - text-transform: uppercase; - color: var(--text-insignificant-color); - position: absolute; - top: calc(16px + 8px); - left: 16px; - transform-origin: top left; - transform: rotate(-90deg) translateX(-100%); - user-select: none; - background-image: linear-gradient( - to left, - var(--text-color), - var(--link-color) - ); - background-clip: text; - text-fill-color: transparent; - -webkit-text-fill-color: transparent; + & > header { + width: 1.2em; + white-space: nowrap; + position: relative; + flex-shrink: 0; + + h3 { + font-size: 90%; + font-style: italic; + margin: 0; + padding: 0; + text-transform: uppercase; + color: var(--text-insignificant-color); + position: absolute; + top: 8px; + left: 0; + transform-origin: top left; + transform: rotate(-90deg) translateX(-100%); + user-select: none; + background-image: linear-gradient( + to left, + var(--text-color), + var(--link-color) + ); + background-clip: text; + text-fill-color: transparent; + -webkit-text-fill-color: transparent; + } } a { @@ -52,6 +59,8 @@ --other-color: var(--dark-color); } min-width: 240px; + flex-grow: 1; + max-width: 320px; text-decoration: none; color: inherit; border-radius: 16px; @@ -63,15 +72,17 @@ display: flex; background-image: linear-gradient( to bottom, - var(--average-color) -50%, + var(--accent-color) -50%, transparent ); background-clip: border-box; background-origin: border-box; + min-height: 160px; height: 320px; + max-height: 50vh; &:not(:active):is(:hover, :focus-visible) { - border-color: var(--average-color); + border-color: var(--accent-color); box-shadow: 0 4px 8px var(--drop-shadow-color), 0 8px 16px var(--drop-shadow-color); transform-origin: center bottom; diff --git a/src/pages/trending.jsx b/src/pages/trending.jsx index 6a83a78e..54040ea3 100644 --- a/src/pages/trending.jsx +++ b/src/pages/trending.jsx @@ -55,7 +55,9 @@ function Trending({ columnMode, ...props }) { const iterator = masto.v1.trends.tags.list(); const { value: tags } = await iterator.next(); console.log('tags', tags); - setHashtags(tags); + if (tags?.length) { + setHashtags(tags); + } } catch (e) { console.error(e); } @@ -64,7 +66,9 @@ function Trending({ columnMode, ...props }) { try { const { value: links } = await fetchLinks(masto); console.log('links', links); - setLinks(links); + if (links?.length) { + setLinks(links); + } } catch (e) { console.error(e); } @@ -131,7 +135,9 @@ function Trending({ columnMode, ...props }) { )} {!!links.length && (
-

Trending News

+
+

Trending News

+
{links.map((link) => { const { authorName, @@ -163,6 +169,12 @@ function Trending({ columnMode, ...props }) { // const v = c - 100; // return v < 0 ? 0 : v; // }); + const accentColor = labAverageColor.map((c, i) => { + if (i === 0) { + return 0.65; + } + return c; + }); const lightColor = labAverageColor.map((c, i) => { if (i === 0) { return 0.9; @@ -186,6 +198,7 @@ function Trending({ columnMode, ...props }) { '--average-color': `rgb(${averageColor?.join(',')})`, // '--light-color': `rgb(${lightColor?.join(',')})`, // '--dark-color': `rgb(${darkColor?.join(',')})`, + '--accent-color': `oklab(${accentColor?.join(' ')})`, '--light-color': `oklab(${lightColor?.join(' ')})`, '--dark-color': `oklab(${darkColor?.join(' ')})`, }} @@ -289,39 +302,24 @@ function Trending({ columnMode, ...props }) { ); } -function rgb2oklab(rgb) { - // Normalize RGB values to the range [0, 1] - const r = rgb[0] / 255; - const g = rgb[1] / 255; - const b = rgb[2] / 255; - - // Linearize RGB values - const rLinear = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4); - const gLinear = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4); - const bLinear = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4); - - // Convert to XYZ color space - const x = rLinear * 0.4124564 + gLinear * 0.3575761 + bLinear * 0.1804375; - const y = rLinear * 0.2126729 + gLinear * 0.7151522 + bLinear * 0.072175; - const z = rLinear * 0.0193339 + gLinear * 0.119192 + bLinear * 0.9503041; - - // Normalize to reference white - const xNormalized = x / 0.95047; - const yNormalized = y / 1.0; - const zNormalized = z / 1.08883; - - // Non-linear transfer function for luminance - const fy = - yNormalized > 0.008856 - ? Math.cbrt(yNormalized) - : (903.3 * yNormalized + 16.0) / 116.0; - - // Calculate OkLab values - const l = Math.max(0, Math.min(1, (116.0 * fy - 16.0) / 100)); - const a = (xNormalized - yNormalized) * 0.21; - const bValue = (yNormalized - zNormalized) * 0.12; - - return [l, a, bValue]; +// https://gist.github.com/earthbound19/e7fe15fdf8ca3ef814750a61bc75b5ce +const gammaToLinear = (c) => + c >= 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92; +function rgb2oklab([r, g, b]) { + r = gammaToLinear(r / 255); + g = gammaToLinear(g / 255); + b = gammaToLinear(b / 255); + var l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b; + var m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b; + var s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b; + l = Math.cbrt(l); + m = Math.cbrt(m); + s = Math.cbrt(s); + return [ + l * +0.2104542553 + m * +0.793617785 + s * -0.0040720468, + l * +1.9779984951 + m * -2.428592205 + s * +0.4505937099, + l * +0.0259040371 + m * +0.7827717662 + s * -0.808675766, + ]; } export default Trending;