Add art interactivity by Ramazanmak · Pull Request #11 · mlutcss/website

Ramazanmak · 2026-02-01T11:24:11Z

No description provided.

mr150 · 2026-02-01T11:39:23Z

src/_includes/components/link-button.ejs

+	}
 %>
-<a href="<%= it.url %>" role="button"
+<<%= it.tag %> <%= href %> role="button"


role="button" - зачем это?

mr150 · 2026-02-01T11:40:42Z

src/_includes/header/header.ejs


-<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf-$blr Ps-f H-$headerH
-  W100p C-$headerC Zi20">
+<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf-$blr Ps-f H-$headerH W100p C-$headerC Zi20">


Suggested change

<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf-$blr Ps-f H-$headerH W100p C-$headerC Zi20">

<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf Ps-f H-$headerH W100p C-$headerC Zi20">

mr150 · 2026-02-01T11:43:56Z

src/art-api/boom-emoji.html

Эти файлы должен eleventy генерировать во время сборки...

mr150 · 2026-02-01T11:49:09Z

src/assets/custom-elements/art-component.js

Зачем отдельный каталог? И название надо другое: типа art-panel

mr150 · 2026-02-01T11:51:53Z

src/assets/custom-elements/art-component.js

@@ -0,0 +1,53 @@
+const hightlightClasses = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"


Suggested change

const hightlightClasses = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"

const hightlightСss = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"

mr150 · 2026-02-01T11:52:39Z

src/assets/custom-elements/art-component.js

+	connectedCallback() {
+		this.highlightTargetArt()
+		const artId = this.getAttribute('id');
+		console.log(artId);


Логи убираем

mr150 · 2026-02-01T11:58:08Z

src/arts.ejs

+								variant: "light"
+							}) %>
+						</div>
+						<div id="<%= art.artId %>-link-button" class="<%= artsPageCSS.button %>" >


Зачем id кнопке?

Чтобы компонент мог обращаться к этой кнопке без привязки к тегу.

Чтобы обращаться к ней, не привязываясь к имени тега.

Но есть же классы для этих целей)

mr150 · 2026-02-01T12:01:16Z

src/assets/custom-elements/art-component.js

+		button.addEventListener('click', this.copyArtLink(artId))
+	}
+
+	copyArtLink = (artId) => {


Почему здесь id берется из замыкания, а не просто кладется в свойство класса?

mr150 · 2026-02-01T12:01:45Z

src/assets/custom-elements/art-component.js

+
+	copyArtLink = (artId) => {
+		return function() {
+			const span = this.querySelector('span')


Не надо завязываться на названия элементов

mr150 · 2026-02-01T12:04:20Z

src/assets/custom-elements/art-component.js

+			const span = this.querySelector('span')
+			let link = window.location.href
+			const idPosition = link.indexOf('#')
+			if (idPosition > 0) {


Это можно сильно проще написать, без if

mr150 · 2026-02-01T12:05:14Z

src/assets/custom-elements/art-component.js

+			let link = window.location.href
+			const idPosition = link.indexOf('#')
+			if (idPosition > 0) {
+				link.replace(


replace не меняет исходную строку

mr150 · 2026-02-01T12:05:37Z

src/assets/custom-elements/art-component.js

+				link += `#${artId}`
+			}
+			navigator.clipboard.writeText(link)
+			span.innerText = 'Copied!'


Suggested change

span.innerText = 'Copied!'

span.textContent = 'Copied!'

mr150 · 2026-02-01T12:07:18Z

src/assets/custom-elements/art-component.js

+		}
+	}
+
+	highlightTargetArt(){


Посмотри инфу про псевдокласс :target

mr150

!

mr150 · 2026-02-02T15:59:19Z

src/assets/script/art-panel.js

+
+	highlightTargetArt() {
+		hightlightCss.split(' ').forEach(c => {
+			this.classList.add(c)


В classList можно несколько элементов добавлять и удалять

mr150 · 2026-02-02T22:15:46Z

src/assets/script/art-panel.js

+	connectedCallback() {
+		this.highlightTargetArt();
+		const button = this.querySelector(`#${this.artId}-link-button`);
+		button.addEventListener('click', () => this.copyArtLink(button))


Зачем здесь передается эта кнопка, если ее так же можно в поле компонента положить?

mr150 · 2026-02-02T22:20:29Z

src/art.ejs

@@ -0,0 +1,8 @@
+---
+pagination:


Причем здесь пагинация? Надо сделать каталог с артами, где они будут лежать, и откуда берутся в галерею. При сборке он будет переименовываться в art-api и там они уже будут собранные для выкачивания

mr150 · 2026-02-02T22:21:37Z

src/_includes/components/link-button.ejs

 	<% } else { %>
 		<div class="<%= css.contentContainer%>">
-			<span class="<%= css.span %>">
+			<span class="<%= css.span %>" data-name="button-text">


Зачем атрибут, если можно использовать class?

mr150 · 2026-02-02T22:25:07Z

src/assets/script/art-panel.js

+export class ArtPanel extends HTMLElement {
+	constructor() {
+		super();
+		this.artId = this.getAttribute('id')


Можно просто использовать this.id

mr150 · 2026-02-03T14:46:14Z

.eleventy.js

+export default async function(config){
  config.addPlugin(ejsPlugin,{
 		_with: false,
    localsName: 'it'


Что-то не так с форматированием

mr150 · 2026-02-03T14:51:25Z

src/assets/script/art-panel.js

+	}
+
+	highlightTargetArt() {
+		this.classList.add('Bxsd1;1;10;2;$brand_t', 'Bd1;s;$brand_t', 'Zi19_t')


Зачем убирать эти утилиты из переменной, если можно просто ее деструктуризацию использовать?

mr150 · 2026-02-03T20:51:34Z

src/assets/script/art-panel.js

 	connectedCallback() {
 		this.highlightTargetArt();
-		this.button = this.querySelector(`#${this.id}-link-button`);
+		this.button = this.querySelector(`.${this.id}-link-button`);


А зачем здесь вообще к классу id прицеплять?

mr150 · 2026-02-03T20:52:02Z

src/assets/script/art-panel.js

@@ -1,3 +1,5 @@
+const hightlightCss = "Bd1;s;$brand_t Bxsd1;1;10;2;$brand_t Zi19_t"


Если это используется только как массив, то может и сразу сделать массивом?

mr150 · 2026-02-03T23:18:39Z

src/assets/script/art-panel.js

@@ -6,7 +8,7 @@ export class ArtPanel extends HTMLElement {

 	connectedCallback() {
 		this.highlightTargetArt();


И вот что подумал. Наверное лучше без target утилиты оставить и просто в js проверять, есть ли id в hash и только тогда это вызывать. А то когда артов станет сильно больше, то много лишних операций в dom будет

mr150 · 2026-02-04T10:32:26Z

src/arts.ejs

-				<div class="<%= artsPageCSS.card%> md_W50p">
-					<div class="<%= artsPageCSS.artWrapper%> <%= art.bgColor %>  ">
-						<%- include(`./_includes/components/arts/${art.artId}.ejs`) %>
+				<art-panel class="D Ps -Ctx W100p H20gg -Ts @:hv_Tsd-$longTs md_W50p" id="<%= art.artId %>">


Зачем @:hv_Tsd-$longTs используй дефолтное

mr150 · 2026-02-04T10:37:47Z

src/arts.ejs

 	const artsPageCSS = {
 		card:"W100p H20gg Tsd-$shortTs @:hv_Tsd-$longTs",
 		artWrapper:"-Sz100p Ov-h Plcc-c Plci-c D-f",
+		button: "W12gg lg_W9gg Mxw50u xl_Mxw55u H7u"


Уже не раз говорил: нельзя ограничивать элементы с текстом по высоте

mr150 · 2026-02-04T22:36:48Z

src/index.ejs

-				icon: "right-triangle"
-			}) %>
+		<div class="D-f Fld-r W100p Flw-w Jc-c Gap3u M3u;0 P0;5u Mnh7u">
+			<div class="W70p Mxw50u xl_Mxw55u As-str">


Зачем в нескольких местах надо добавлять этот div?

mr150 · 2026-02-05T21:45:10Z

src/arts/exploding-head.ejs

+		artLayer: "W100p Apcr1 Bdrd100p Ps-a"
+	}
+%>
+<div class="Ctnt-s Pt5u H100p Apcr1 Ctnn-canva Plci-c;c Plcc-c D-f M-a -ExplodingOrangeA#ee980d -ExplodingOrangeB#f8c829 -ExplodingBrownA#662800 -ExplodingBrownB#6f2810 -ExplodingBrownC#9c2a00 -ExplodingBrownD#934800 -ExplodingBrownE#9b3c18 -ExplodingBrownF#a24b0b -ExplodingBrownG#f7ae48 -ExplodingBrownH#d2a55a -ExplodingBrownI#efd3ac">


Pt5u на главной из-за этого арт уменьшился - не надо так

Ramazanmak added 3 commits January 15, 2026 13:40

feat: make CTA on the page with CSS art

6d13f23

feat: make a draft art-component

4296f1b

feat: add art interactivity with new custom element

757e057

Ramazanmak requested a review from mr150 February 1, 2026 11:24

Ramazanmak self-assigned this Feb 1, 2026

Merge branch 'main' into feat/art-interactivity

c284aad

mr150 reviewed Feb 1, 2026

View reviewed changes

mr150 requested changes Feb 1, 2026

View reviewed changes

:fix: make some minor corrections and change art-api logic

52f084b

Ramazanmak force-pushed the feat/art-interactivity branch from 09b9422 to 52f084b Compare February 2, 2026 14:52

mr150 reviewed Feb 2, 2026

View reviewed changes

:fix: make some minor corrections and rewrite art-api logic

5055575

mr150 reviewed Feb 3, 2026

View reviewed changes

fix: correct minor mistakes in art-panel.js

6348c66

Ramazanmak requested a review from mr150 February 3, 2026 16:15

mr150 reviewed Feb 3, 2026

View reviewed changes

refactor: make minor corrections to art-panel.js

3675a1c

Ramazanmak requested a review from mr150 February 4, 2026 02:58

mr150 reviewed Feb 4, 2026

View reviewed changes

fix: correct mistake with button's height and refactor arts

c5578af

Ramazanmak requested review from mr150 February 4, 2026 12:24

mr150 reviewed Feb 4, 2026

View reviewed changes

fix: fix link-button paddings

b559c9f

mr150 reviewed Feb 5, 2026

View reviewed changes

Ramazanmak added 3 commits February 6, 2026 22:17

:fix: fix the exploding-head art

e5b097f

fix: hide one button from art-panel before functionality is checked

b2f644c

fix: fix the margins in art section of the main page

dc9defb

Ramazanmak requested a review from mr150 February 8, 2026 11:04

	<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf-$blr Ps-f H-$headerH W100p C-$headerC Zi20">
	<header class=" D-f Jc-sb Ai-c P2u;2u md_P1u;3u Bgc-$core800 -Blr4 Bcf Ps-f H-$headerH W100p C-$headerC Zi20">

		@@ -0,0 +1,53 @@
		const hightlightClasses = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"

	const hightlightClasses = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"
	const hightlightСss = "Bd1;s;$brand Bxsd1;1;10;2;$brand Zi19"

		@@ -1,3 +1,5 @@
		const hightlightCss = "Bd1;s;$brand_t Bxsd1;1;10;2;$brand_t Zi19_t"

		@@ -6,7 +8,7 @@ export class ArtPanel extends HTMLElement {

		connectedCallback() {
		this.highlightTargetArt();

		@@ -0,0 +1,8 @@
		---
		pagination:

Conversation

Ramazanmak commented Feb 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mr150 Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mr150 Feb 3, 2026 •

edited

Loading