Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 06:06:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

More fixes for Trending news

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-23 01:36:07 +08:00
parent 3a1341fb17
commit cafadd0980
2 changed files with 69 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/pages/trending.css
View file

@ -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;

70
src/pages/trending.jsx
View file

@ -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 && (
<div class="links-bar">
<h3>Trending News</h3>
<header>
<h3>Trending News</h3>
</header>
{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;