From d96e9242f764f8b2362c842341cb26ac0113e276 Mon Sep 17 00:00:00 2001 From: Ayu-Ty Date: Fri, 4 Jul 2025 20:34:49 +0530 Subject: [PATCH 01/37] added sharepopover --- package-lock.json | 11 +- package.json | 3 +- src/assets/icons/share.svg | 14 ++ src/assets/styles/games.css | 6 - src/components/HideSeekKbd.astro | 17 +++ src/components/SharePopover.astro | 222 ++++++++++++++++++++++++++++++ src/pages/canvas/quote.astro | 5 + src/pages/hidenseek/grid.astro | 16 +-- src/pages/hidenseek/kbd.astro | 16 +-- 9 files changed, 283 insertions(+), 27 deletions(-) create mode 100644 src/assets/icons/share.svg create mode 100644 src/components/SharePopover.astro diff --git a/package-lock.json b/package-lock.json index 417c504d..41d212b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@recursivezero/abcd", - "version": "2.0.0", + "version": "2.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@recursivezero/abcd", - "version": "2.0.0", + "version": "2.1.0", "license": "MIT", "dependencies": { "@astrojs/check": "0.9.4", @@ -15,6 +15,7 @@ "@astrojs/sitemap": "3.4.1", "@fontsource/roboto": "5.1.0", "astro": "5.4.1", + "astro-social-share": "2.2.0", "class-variance-authority": "0.7.0", "clsx": "2.1.0", "dotenv": "16.4.5", @@ -2271,6 +2272,12 @@ "sharp": "^0.33.3" } }, + "node_modules/astro-social-share": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/astro-social-share/-/astro-social-share-2.2.0.tgz", + "integrity": "sha512-Z5ebhO6Yw4GLggw7wsTahdpS0f4pf/XuVjQlBpWZ0zyt0cKaVrlG/+u6RzrzN9B2t27wxp90XiosZNwvBZqA+Q==", + "license": "MIT" + }, "node_modules/astro/node_modules/@astrojs/markdown-remark": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-6.2.0.tgz", diff --git a/package.json b/package.json index 5e81a91b..428d0a67 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "@astrojs/sitemap": "3.4.1", "@fontsource/roboto": "5.1.0", "astro": "5.4.1", + "astro-social-share": "2.2.0", "class-variance-authority": "0.7.0", "clsx": "2.1.0", "dotenv": "16.4.5", @@ -109,4 +110,4 @@ "prettier-plugin-astro": "0.14.1", "shx": "0.3.4" } -} \ No newline at end of file +} diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg new file mode 100644 index 00000000..1befc6c3 --- /dev/null +++ b/src/assets/icons/share.svg @@ -0,0 +1,14 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/styles/games.css b/src/assets/styles/games.css index e3a63450..940fa285 100644 --- a/src/assets/styles/games.css +++ b/src/assets/styles/games.css @@ -97,12 +97,6 @@ max-width: 1000px; } -.game-menu { - display: grid; - place-items: center; - justify-content: flex-end; -} - /* Game Card Styles */ .game-card { background-color: var(--card-bg, light-dark(#ffffff, #2b2b40)); diff --git a/src/components/HideSeekKbd.astro b/src/components/HideSeekKbd.astro index ec280890..15b68b2a 100644 --- a/src/components/HideSeekKbd.astro +++ b/src/components/HideSeekKbd.astro @@ -94,6 +94,23 @@ const letterRows = [ font-size: 1rem; } } + + @media (max-width: 480px) { + .container__keyboard { + position: absolute; + top: 31%; + transform: rotate(90deg) scale(1.3); + } + } + + @media (max-width: 380px) { + .container__keyboard { + position: absolute; + top: 31%; + transform: rotate(90deg) scale(1.1); + } + } + \ No newline at end of file diff --git a/src/pages/canvas/quote.astro b/src/pages/canvas/quote.astro index b2c08479..1f9628f7 100644 --- a/src/pages/canvas/quote.astro +++ b/src/pages/canvas/quote.astro @@ -5,6 +5,9 @@ import Help from "@/components/Help.astro"; import DownloadIcon from "@/assets/icons/download.svg"; import ResetIcon from "@/assets/icons/reset.svg"; import "@/assets/styles/quote-designer.css"; +import { SocialShare } from "astro-social-share"; +import SharePopover from "@/components/SharePopover.astro"; + const pageTitle = "Quote Designer"; const pageDescription = "Design beautiful quotes with our advanced tool."; @@ -18,6 +21,8 @@ const pageMeta = {
+ + + + + +
-
- -
-
- -
diff --git a/src/pages/hidenseek/kbd.astro b/src/pages/hidenseek/kbd.astro index 7adb9ea2..e713a9b7 100644 --- a/src/pages/hidenseek/kbd.astro +++ b/src/pages/hidenseek/kbd.astro @@ -12,17 +12,15 @@ const meta = { --- + + + +
-
- -
-
- -
From de19e612d12f4678d3d934715c4c0309d79f12bd Mon Sep 17 00:00:00 2001 From: Ayu-Ty Date: Fri, 4 Jul 2025 21:59:48 +0530 Subject: [PATCH 02/37] replaced copy svg --- src/components/SharePopover.astro | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/SharePopover.astro b/src/components/SharePopover.astro index 048e5d40..c4c7a879 100644 --- a/src/components/SharePopover.astro +++ b/src/components/SharePopover.astro @@ -1,6 +1,8 @@ --- import { SocialShare } from "astro-social-share"; -import Share from "@/assets/icons/share.svg" +import Share from "@/assets/icons/share.svg"; +import Copy from "@/assets/icons/Copy.svg"; + --- @@ -112,7 +112,6 @@ import Share from "@/assets/icons/share.svg" display: none !important; } - /* --- CENTERING ICONS --- */ /* Target the individual share links within the component */ .share-popover :global(.astro-social-share a) { display: flex; @@ -160,13 +159,12 @@ import Share from "@/assets/icons/share.svg" .copy-link-item svg { width: 26px; height: 26px; - fill: #000000; margin-right: 10px; transition: fill 0.2s ease; } .copy-link-item:hover svg { - fill: var(--icon-hover-color); + color: var(--icon-hover-color); .copy-link-item span { font-size: 14px; @@ -213,7 +211,6 @@ import Share from "@/assets/icons/share.svg" togglePopover(); } catch (err) { - console.error('Failed to copy URL: ', err); alert('Failed to copy URL. Please copy it manually: ' + currentUrl); } }); From 01f795097bb4e6485bbb21f0b4e5fa63a2063953 Mon Sep 17 00:00:00 2001 From: Ayu-Ty Date: Tue, 8 Jul 2025 21:20:24 +0530 Subject: [PATCH 03/37] improved share popover --- src/assets/styles/SharePopover.css | 174 +++++++++++++++++++ src/components/SharePopover.astro | 258 ++++++----------------------- src/pages/canvas/quote.astro | 2 - 3 files changed, 228 insertions(+), 206 deletions(-) create mode 100644 src/assets/styles/SharePopover.css diff --git a/src/assets/styles/SharePopover.css b/src/assets/styles/SharePopover.css new file mode 100644 index 00000000..a70633ef --- /dev/null +++ b/src/assets/styles/SharePopover.css @@ -0,0 +1,174 @@ +:root { + --icon-hover-color: #172fda; +} + +.share-button-container { + position: relative; + display: inline-block; +} + +.share-trigger-button { + background-color: transparent; + color: var(--primary); + padding: 10px; + width: 50px; + height: 50px; + border: 1px solid var(--primary); + border-radius: 50px; + cursor: pointer; + font-size: 16px; + font-weight: 500; + transition: all 0.2s ease-in-out; + position: relative; +} + +.share-trigger-button:hover { + transform: translateY(-2px) scale(1.05); +} + +.share-trigger-button svg { + display: block; + margin: auto; + width: 20px; + height: 20px; + fill: var(--primary); + transition: fill 0.2s ease; +} + +.share-trigger-button::after { + content: attr(data-tooltip); + position: absolute; + transform: translateX(-50%); + margin-top: 30px; + color: light-dark(black, white); + border-radius: 4px; + font-size: 0.75rem; + font-weight: 500; + visibility: hidden; + transition: opacity 0.2s ease-in-out; + pointer-events: none; +} + +.share-trigger-button:hover::after, +.share-trigger-button:focus-visible::after { + opacity: 1; + visibility: visible; +} + +.share-popover { + position: absolute; + top: 100%; + right: 0%; + background-color: #19191E; + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 10px 10px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); + min-width: 105px; + margin-top: 8px; + opacity: 0; + visibility: hidden; + transform: scale(0.95); + transform-origin: top right; + transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out; + pointer-events: none; +} + +.share-popover.is-open { + opacity: 0.98; + visibility: visible; + transform: scale(1); + pointer-events: auto; +} + +.share-popover .astro-social-share { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px 8px; + height: auto; + margin: 0; + padding: 0; + background-color: transparent; + box-shadow: none; + width: 100%; +} + +.share-popover .astro-social-share a[href*="medium.com/new-story"], +.share-popover .astro-social-share a[href*="news.ycombinator.com/submitlink"], +.share-popover .astro-social-share a[href^="mailto:"], +.share-popover .astro-social-share a[href*="bsky.app/intent/compose"] { + display: none !important; +} + +.share-popover .astro-social-share a { + display: flex; + flex-direction: column; + padding: 8px 10px; + box-sizing: border-box; + text-decoration: none; + border-radius: 6px; + transition: background-color 0.2s ease, transform 0.1s ease; +} + +.share-popover .astro-social-share svg { + fill: #ffffff; + width: 24px; + height: 24px; +} + +.share-popover .astro-social-share svg:hover { + transform: translateY(-1px); + fill: #1d880c; + width: 24px; + height: 24px; +} + +.share-popover .astro-social-share a[href*="whatsapp://send"] { + order: -4; +} + +.share-popover .astro-social-share a[href*="facebook.com/sharer"] { + order: -2; +} + +.share-popover .astro-social-share a[href*="linkedin.com/shareArticle"] { + order: -1; +} + +.copy-link-item { + display: flex; + align-items: center; + padding: 8px 10px; + box-sizing: border-box; + text-decoration: none; + border-radius: 6px; + transition: background-color 0.2s ease, transform 0.1s ease; + cursor: pointer; + border: none; + background: none; + color: #fff; + width: 100%; + margin-top: 10px; +} + +.copy-link-item:hover { + transform: translateY(-1px); + color: #1d880c; +} + +.copy-link-item svg { + color: white; + width: 26px; + height: 26px; + margin-right: 10px; + transition: fill 0.2s ease; +} + +.copy-link-item:hover svg { + color: #1d880c; +} + +.copy-link-item span { + font-size: 14px; + font-weight: 500; +} \ No newline at end of file diff --git a/src/components/SharePopover.astro b/src/components/SharePopover.astro index c4c7a879..31789a7f 100644 --- a/src/components/SharePopover.astro +++ b/src/components/SharePopover.astro @@ -1,219 +1,69 @@ --- import { SocialShare } from "astro-social-share"; -import Share from "@/assets/icons/share.svg"; -import Copy from "@/assets/icons/Copy.svg"; - +import ShareIcon from "@/assets/icons/share.svg"; +import CopyIcon from "@/assets/icons/Copy.svg"; +import "@/assets/styles/SharePopover.css"; --- - - \ No newline at end of file + shareTrigger.setAttribute("aria-expanded", "false"); + }); + diff --git a/src/pages/canvas/quote.astro b/src/pages/canvas/quote.astro index 1f9628f7..f17c7828 100644 --- a/src/pages/canvas/quote.astro +++ b/src/pages/canvas/quote.astro @@ -5,10 +5,8 @@ import Help from "@/components/Help.astro"; import DownloadIcon from "@/assets/icons/download.svg"; import ResetIcon from "@/assets/icons/reset.svg"; import "@/assets/styles/quote-designer.css"; -import { SocialShare } from "astro-social-share"; import SharePopover from "@/components/SharePopover.astro"; - const pageTitle = "Quote Designer"; const pageDescription = "Design beautiful quotes with our advanced tool."; From f4424221e8c288cc4b6bd7c082163ce7140d5bb4 Mon Sep 17 00:00:00 2001 From: Ayu-Ty Date: Tue, 8 Jul 2025 23:47:56 +0530 Subject: [PATCH 04/37] changed file names --- src/assets/styles/{SharePopover.css => ShareButton.css} | 0 src/components/{SharePopover.astro => ShareButton.astro} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/assets/styles/{SharePopover.css => ShareButton.css} (100%) rename src/components/{SharePopover.astro => ShareButton.astro} (100%) diff --git a/src/assets/styles/SharePopover.css b/src/assets/styles/ShareButton.css similarity index 100% rename from src/assets/styles/SharePopover.css rename to src/assets/styles/ShareButton.css diff --git a/src/components/SharePopover.astro b/src/components/ShareButton.astro similarity index 100% rename from src/components/SharePopover.astro rename to src/components/ShareButton.astro From 85dca5296256dfa8f6da6ec5810a4af9d89e27a9 Mon Sep 17 00:00:00 2001 From: Ayu-Ty Date: Fri, 11 Jul 2025 18:30:35 +0530 Subject: [PATCH 05/37] varnmala fix --- src/assets/styles/alphabet.css | 8 ++++---- src/assets/styles/playground.css | 2 +- src/components/ShareButton.astro | 2 +- src/pages/canvas/quote.astro | 3 +-- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/assets/styles/alphabet.css b/src/assets/styles/alphabet.css index 0466696c..68149f72 100644 --- a/src/assets/styles/alphabet.css +++ b/src/assets/styles/alphabet.css @@ -1,7 +1,8 @@ :root { /*color-scheme: light dark;*/ - --text: light-dark(white, yellow); + --tex: light-dark(#ba1db8, #ffefad); --base: color(rgb(68, 137, 166)); + --shad: light-dark(#dddd, #0f172a); } .container__alphabet { @@ -33,10 +34,9 @@ grid-auto-flow: row; justify-items: center; align-content: center; - color: var(--text, grey); - border: 2px solid var(--bc); + color: var(--tex); + border: 2px solid var(--shad); border-radius: 0.5rem; - box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); padding: 1rem; height: fit-content; transition: diff --git a/src/assets/styles/playground.css b/src/assets/styles/playground.css index 704b67bc..3398fafc 100644 --- a/src/assets/styles/playground.css +++ b/src/assets/styles/playground.css @@ -50,7 +50,7 @@ transition: color 0.5s ease-in; text-align: center; line-height: 1; - width: 100%; + width: 50%; } & .content__display { diff --git a/src/components/ShareButton.astro b/src/components/ShareButton.astro index 31789a7f..f0a3bd3f 100644 --- a/src/components/ShareButton.astro +++ b/src/components/ShareButton.astro @@ -2,7 +2,7 @@ import { SocialShare } from "astro-social-share"; import ShareIcon from "@/assets/icons/share.svg"; import CopyIcon from "@/assets/icons/Copy.svg"; -import "@/assets/styles/SharePopover.css"; +import "@/assets/styles/ShareButton.css"; --- @@ -26,6 +43,7 @@ import "@/assets/styles/ShareButton.css"; document.addEventListener("DOMContentLoaded", () => { const shareTrigger = document.getElementById("shareTrigger")! as HTMLButtonElement; const sharePopover = document.getElementById("sharePopover")! as HTMLDivElement; + const copyUrlInput = document.getElementById("copyUrlInput")! as HTMLInputElement; const copyUrlButton = document.getElementById("copyUrlButton")! as HTMLButtonElement; function togglePopover() { @@ -50,7 +68,7 @@ import "@/assets/styles/ShareButton.css"; }); copyUrlButton.addEventListener("click", async () => { - const currentUrl = window.location.href; + const currentUrl = copyUrlInput.value; try { await navigator.clipboard.writeText(currentUrl); const originalText = copyUrlButton.querySelector("span")!.textContent; @@ -58,8 +76,6 @@ import "@/assets/styles/ShareButton.css"; setTimeout(() => { copyUrlButton.querySelector("span")!.textContent = originalText; }, 1500); - - togglePopover(); } catch (err) { alert("Failed to copy URL. Please copy it manually: " + currentUrl); } diff --git a/src/pages/canvas/text.astro b/src/pages/canvas/text.astro index 4a59d4db..83c204fe 100644 --- a/src/pages/canvas/text.astro +++ b/src/pages/canvas/text.astro @@ -3,6 +3,8 @@ import BackButton from "@/components/BackButton.astro"; import CanvasGenerator from "@/components/CanvasGenerator.astro"; import Help from "@/components/Help.astro"; import BaseLayout from "@/layouts/Base"; +import SharePopover from "@/components/ShareButton.astro"; +import KeyboardTrigger from "@/components/KeyboardTrigger.astro"; const meta = { title: "Canvas Image Generator", @@ -13,6 +15,8 @@ const meta = { + + !loc.isState); + + diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro index 23512c1f..9d01bf44 100644 --- a/src/pages/crossword.astro +++ b/src/pages/crossword.astro @@ -4,11 +4,15 @@ import Back from "@/components/Back.astro"; import Help from "@/components/Help.astro"; import Puzzle from "@/components/Puzzle.astro"; import BaseLayout from "@/layouts/Base"; +import SharePopover from "@/components/ShareButton.astro"; +import KeyboardTrigger from "@/components/KeyboardTrigger.astro"; --- + + +