feat: add action to paw wd-402 (#403)

* feat: replace grid flow with flex wd-391 (#392)

* chore: release-1.23.0 (#393)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: add sticker to logo wd-390 (#394)

* chore: release-1.24.0 (#395)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: replace hex with hsl colors wd-396 (#397)

* feat: replace hex with hsl colors wd-396

* refactor: change style of css vars  wd-396

* chore: release-1.25.0 (#398)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: add action to paw wd-402

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.release-please-manifest.json

@@ -1,7 +1,7 @@
 {
-	".": "1.22.0",
+	".": "1.25.0",
 	"apps/careers-whatislove-dev": "1.6.1",
 	"apps/certifications-whatislove-dev": "1.7.0",
-	"apps/whatislove-dev": "1.20.0",
+	"apps/whatislove-dev": "1.23.0",
 	"packages/shared": "1.7.0"
 }

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.25.0](https://github.com/what1s1ove/whatislove.dev/compare/v1.24.0...v1.25.0) (2024-04-24)
+
+
+### Features
+
+* replace hex with hsl colors wd-396 ([#397](https://github.com/what1s1ove/whatislove.dev/issues/397)) ([b3e8ce3](https://github.com/what1s1ove/whatislove.dev/commit/b3e8ce3dd2b3701c55c1bc0b449ed12de9d110fa))
+
+## [1.24.0](https://github.com/what1s1ove/whatislove.dev/compare/v1.23.0...v1.24.0) (2024-04-23)
+
+
+### Features
+
+* add sticker to logo wd-390 ([#394](https://github.com/what1s1ove/whatislove.dev/issues/394)) ([43ccd92](https://github.com/what1s1ove/whatislove.dev/commit/43ccd92adbbe0c30fb2722d89d409ac0a3dcf22c))
+
+## [1.23.0](https://github.com/what1s1ove/whatislove.dev/compare/v1.22.0...v1.23.0) (2024-04-23)
+
+
+### Features
+
+* replace grid flow with flex wd-391 ([#392](https://github.com/what1s1ove/whatislove.dev/issues/392)) ([4f926cb](https://github.com/what1s1ove/whatislove.dev/commit/4f926cbd6bfd18d807c9aee8c69378ae22b82aff))
+
 ## [1.22.0](https://github.com/what1s1ove/whatislove.dev/compare/v1.21.1...v1.22.0) (2024-04-23)
 
 

apps/whatislove-dev/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [1.23.0](https://github.com/what1s1ove/whatislove.dev/compare/@whatislove.dev/[email protected]/whatislove-dev-v1.23.0) (2024-04-24)
+
+
+### Features
+
+* replace hex with hsl colors wd-396 ([#397](https://github.com/what1s1ove/whatislove.dev/issues/397)) ([b3e8ce3](https://github.com/what1s1ove/whatislove.dev/commit/b3e8ce3dd2b3701c55c1bc0b449ed12de9d110fa))
+
+## [1.22.0](https://github.com/what1s1ove/whatislove.dev/compare/@whatislove.dev/[email protected]/whatislove-dev-v1.22.0) (2024-04-23)
+
+
+### Features
+
+* add sticker to logo wd-390 ([#394](https://github.com/what1s1ove/whatislove.dev/issues/394)) ([43ccd92](https://github.com/what1s1ove/whatislove.dev/commit/43ccd92adbbe0c30fb2722d89d409ac0a3dcf22c))
+
+## [1.21.0](https://github.com/what1s1ove/whatislove.dev/compare/@whatislove.dev/[email protected]/whatislove-dev-v1.21.0) (2024-04-23)
+
+
+### Features
+
+* replace grid flow with flex wd-391 ([#392](https://github.com/what1s1ove/whatislove.dev/issues/392)) ([4f926cb](https://github.com/what1s1ove/whatislove.dev/commit/4f926cbd6bfd18d807c9aee8c69378ae22b82aff))
+
 ## [1.20.0](https://github.com/what1s1ove/whatislove.dev/compare/@whatislove.dev/[email protected]/whatislove-dev-v1.20.0) (2024-04-23)
 
 

apps/whatislove-dev/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "1.20.0",
+	"version": "1.23.0",
 	"name": "@whatislove.dev/whatislove-dev",
 	"private": true,
 	"type": "module",

apps/whatislove-dev/src/includes/shapes.njk

@@ -1,6 +1,6 @@
 <svg class="shapes visually-hidden">
-	<path id="text-curved" d="M0,0 a1,1 0 0,0 100,0" />
-	<filter id="sticker-regular">
+	<path class="shapes__text-curve" id="text-curved" d="M0,0 a1,1 0 0,0 100,0" />
+	<filter class="shapes__sticker" id="sticker">
 		<feMorphology in="SourceAlpha" result="Dilated" operator="dilate" radius="4"></feMorphology>
 		<feFlood flood-color="#ffffff" result="OutlineColor"></feFlood>
 		<feComposite in="OutlineColor" in2="Dilated" operator="in" result="Outline"></feComposite>
@@ -9,13 +9,4 @@
 			<feMergeNode in="SourceGraphic"></feMergeNode>
 		</feMerge>
 	</filter>
-	<filter id="sticker-opacity">
-		<feMorphology in="SourceAlpha" result="Dilated" operator="dilate" radius="4"></feMorphology>
-		<feFlood flood-color="#000000" flood-opacity="0.1" result="OutlineColor"></feFlood>
-		<feComposite in="OutlineColor" in2="Dilated" operator="in" result="Outline"></feComposite>
-		<feMerge>
-			<feMergeNode in="Outline"></feMergeNode>
-			<feMergeNode in="SourceGraphic"></feMergeNode>
-		</feMerge>
-	</filter>
 </svg>

apps/whatislove-dev/src/scripts/libs/enums/notification-message.enum.js

@@ -1,5 +1,6 @@
 let NotificationMessage = /** @type {const} */ ({
 	LOVE: `You found something... maybe you should turn down the sound (or maybe add) ❤️`,
+	PAW: `Lapka to Lapka 🐾 🐾`,
 })
 
 export { NotificationMessage }

apps/whatislove-dev/src/scripts/pages/main/libs/components/components.js

@@ -1,5 +1,6 @@
 export { EasterEgg } from './easter-egg/easter-egg.js'
 export { Navigation } from './navigation/navigation.js'
+export { Paw } from './paw/paw.js'
 export { Settings } from './settings/settings.js'
 export { Timeline } from './timeline/timeline.js'
 export { TimelineForm } from './timeline-form/timeline-form.js'

apps/whatislove-dev/src/scripts/pages/main/libs/components/paw/libs/constants/constants.js

@@ -0,0 +1,3 @@
+let NOTIFICATION_DELAY = /** @type {const} */ (2500)
+
+export { NOTIFICATION_DELAY }

apps/whatislove-dev/src/scripts/pages/main/libs/components/paw/paw.js

@@ -0,0 +1,55 @@
+import { NotificationMessage } from '~/libs/enums/enums.js'
+import { ToastMessagePayload } from '~/libs/types/types.js'
+
+import { NOTIFICATION_DELAY } from './libs/constants/constants.js'
+
+class Paw {
+	/** @type {() => void} */
+	#handlePawButtonClick
+
+	/** @type {(payload: ToastMessagePayload) => void} */
+	#onNotificationAdd
+
+	/** @type {HTMLButtonElement | undefined} */
+	#pawButtonNode
+
+	/**
+	 * @param {{
+	 * 	onNotificationAdd: (payload: ToastMessagePayload) => void
+	 * }} constructor
+	 */
+	constructor({ onNotificationAdd }) {
+		this.#onNotificationAdd = onNotificationAdd
+
+		this.#pawButtonNode = undefined
+
+		this.#handlePawButtonClick = this.#clickPawButtonHandler.bind(this)
+	}
+
+	/** @returns {void} */
+	#clickPawButtonHandler() {
+		this.#onNotificationAdd({
+			duration: NOTIFICATION_DELAY,
+			message: NotificationMessage.PAW,
+		})
+	}
+
+	/** @returns {void} */
+	#initListeners() {
+		let pawButtonNode = /** @type {HTMLElement} */ (this.#pawButtonNode)
+
+		pawButtonNode.addEventListener(`click`, this.#handlePawButtonClick)
+	}
+
+	/**
+	 * @param {HTMLButtonElement} pawButtonNode
+	 * @returns {void}
+	 */
+	init(pawButtonNode) {
+		this.#pawButtonNode = pawButtonNode
+
+		this.#initListeners()
+	}
+}
+
+export { Paw }

apps/whatislove-dev/src/scripts/pages/main/main.js

@@ -6,6 +6,7 @@ import { TimelineApi } from '~/modules/timeline/timeline.js'
 import {
 	EasterEgg,
 	Navigation,
+	Paw,
 	Settings,
 	Timeline,
 	TimelineForm,
@@ -27,6 +28,12 @@ class Main {
 	/** @type {Navigation} */
 	#navigationComponent
 
+	/** @type {HTMLButtonElement | undefined} */
+	#pawButtonNode
+
+	/** @type {Paw} */
+	#pawComponent
+
 	/** @type {HTMLElement | undefined} */
 	#settingListNode
 
@@ -63,6 +70,9 @@ class Main {
 		this.#settingsComponent = new Settings({
 			storage,
 		})
+		this.#pawComponent = new Paw({
+			onNotificationAdd: this.#handleNotificationAdd,
+		})
 		this.#navigationComponent = new Navigation()
 		this.#timelineComponent = new Timeline({
 			timelineApi,
@@ -77,6 +87,7 @@ class Main {
 
 		this.#toastNode = undefined
 		this.#settingListNode = undefined
+		this.#pawButtonNode = undefined
 		this.#headerNode = undefined
 		this.#timelineNode = undefined
 		this.#easterEggNode = undefined
@@ -110,6 +121,9 @@ class Main {
 		this.#timelineFormNode = /** @type {HTMLFormElement | undefined} */ (
 			document.querySelector(`form[name="timeline"]`) ?? undefined
 		)
+		this.#pawButtonNode = /** @type {HTMLButtonElement | undefined} */ (
+			document.querySelector(`.intro__paw`) ?? undefined
+		)
 
 		if (this.#toastNode) {
 			this.#toastComponent.init(this.#toastNode)
@@ -119,6 +133,10 @@ class Main {
 			this.#settingsComponent.init()
 		}
 
+		if (this.#pawButtonNode) {
+			this.#pawComponent.init(this.#pawButtonNode)
+		}
+
 		if (this.#headerNode) {
 			this.#navigationComponent.init(this.#headerNode)
 		}

apps/whatislove-dev/src/styles/blocks/aside.css

@@ -1,5 +1,5 @@
 .aside {
-	--border-offset: 30px;
+	--inset-border: 30px;
 
 	position: relative;
 	display: grid;
@@ -8,7 +8,7 @@
 	padding-block: 100px;
 
 	@media (--width-desktop) {
-		--border-offset: 50px;
+		--inset-border: 50px;
 
 		box-sizing: border-box;
 		max-width: 960px;
@@ -18,7 +18,7 @@
 }
 
 .aside__border {
-	--color: var(--color-page-background-highlight);
+	--color: hsl(var(--color-page-background-highlight));
 
 	position: absolute;
 	inset-inline-start: 50%;
@@ -40,11 +40,11 @@
 }
 
 .aside__border--top {
-	inset-block-start: var(--border-offset);
+	inset-block-start: var(--inset-border);
 }
 
 .aside__border--bottom {
-	inset-block-end: var(--border-offset);
+	inset-block-end: var(--inset-border);
 }
 
 .aside__title {
@@ -55,6 +55,6 @@
 
 .aside__email {
 	font-size: var(--font-size-heading-3);
-	color: var(--color-red-100);
+	color: hsl(var(--color-red-100));
 	text-underline-offset: 7px;
 }

apps/whatislove-dev/src/styles/blocks/channel.css

@@ -23,19 +23,19 @@
 }
 
 .channel__content-item {
-	--shift: 50%;
+	--margin: 50%;
 
 	box-sizing: border-box;
 	line-height: 1;
 	border-radius: 30px;
 }
 
 .channel__content-item--shift-back {
-	margin-inline: calc(0px - var(--shift)) 0;
+	margin-inline: calc(0px - var(--margin)) 0;
 }
 
 .channel__content-item--shift-forward {
-	margin-inline: var(--shift) 0;
+	margin-inline: var(--margin) 0;
 }
 
 .channel__content-item--full {
@@ -53,16 +53,16 @@
 	padding-block: 5px;
 	padding-inline: 8px;
 	font-weight: 600;
-	color: var(--color-blue-100);
-	background-color: var(--color-page-background-highlight);
+	color: hsl(var(--color-blue-100));
+	background-color: hsl(var(--color-page-background-highlight));
 }
 
 .channel__content-item--icon {
-	--icon-size: 20px;
+	--size-icon: 20px;
 
 	&::before {
-		width: var(--icon-size);
-		height: var(--icon-size);
+		width: var(--size-icon);
+		height: var(--size-icon);
 		content: "";
 		background-size: contain;
 	}
@@ -75,9 +75,9 @@
 }
 
 .channel__content-item--technology {
-	--gradient-text-direction: right;
-	--gradient-border-direction: right;
-	--gradient-color: hsl(var(--color-technology-background) / 25%) 0%,
+	--direction-gradient-text: right;
+	--direction-gradient-border: right;
+	--color-gradient: hsl(var(--color-technology-background) / 25%) 0%,
 		hsl(var(--color-technology-background) / 5%) 100%;
 
 	position: relative;
@@ -89,8 +89,8 @@
 	font-weight: 500;
 	text-align: center;
 	background-image: linear-gradient(
-		to var(--gradient-text-direction),
-		var(--gradient-color)
+		to var(--direction-gradient-text),
+		var(--color-gradient)
 	);
 	background-clip: text;
 	-webkit-text-fill-color: transparent;
@@ -100,8 +100,8 @@
 		inset: 0;
 		content: "";
 		background-image: linear-gradient(
-			to var(--gradient-border-direction),
-			var(--gradient-color)
+			to var(--direction-gradient-border),
+			var(--color-gradient)
 		);
 		mask-image: url("/images/icons.svg#speech-bubble");
 		mask-repeat: no-repeat;
@@ -110,7 +110,7 @@
 }
 
 .channel__content-item--technology--left {
-	--gradient-border-direction: left;
+	--direction-gradient-border: left;
 
 	padding-inline: 40px 25px;
 
@@ -143,15 +143,15 @@
 	width: var(--size);
 	height: var(--size);
 	padding: 5px;
-	background: var(--page-background);
+	background: var(--background-page);
 	border-radius: 50%;
-	fill: var(--color-blue-100);
+	fill: hsl(var(--color-blue-100));
 }
 
 .channel__link {
 	font-size: var(--font-size-heading-3);
 	font-weight: 600;
-	color: var(--color-blue-100);
+	color: hsl(var(--color-blue-100));
 	text-underline-offset: 7px;
 }