From 3dd5e77d3958718206c87c03e0ebb507d06d4c08 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sun, 3 Aug 2025 02:23:17 +0800 Subject: [PATCH] add: a logo that respond to color scheme changes modified the layout fixed the navigation rail on mobile --- packages/solid/bun.lock | 16 ++++- packages/solid/package.json | 2 + ...top-light.svg => appbar_desktop_light.svg} | 0 .../solid/src/components/shell/Layout.tsx | 4 +- .../solid/src/components/shell/Navigation.tsx | 58 ++++++++++++++----- .../src/components/utils/DynamicImage.tsx | 22 +++++++ packages/solid/src/routes/song/[id]/info.tsx | 15 +++-- 7 files changed, 92 insertions(+), 25 deletions(-) rename packages/solid/public/icons/zh/{appbar_desktop-light.svg => appbar_desktop_light.svg} (100%) create mode 100644 packages/solid/src/components/utils/DynamicImage.tsx diff --git a/packages/solid/bun.lock b/packages/solid/bun.lock index 0557b4d..2134ed0 100644 --- a/packages/solid/bun.lock +++ b/packages/solid/bun.lock @@ -5,11 +5,13 @@ "name": "example-basic", "dependencies": { "@m3-components/solid": "0.1.10", + "@solid-primitives/media": "^2.3.3", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.1.7", "@tailwindcss/vite": "^4.1.11", "@types/luxon": "^3.7.1", + "animejs": "^4.1.2", "axios": "^1.11.0", "dotenv": "^16.6.1", "drizzle-orm": "^0.44.4", @@ -320,6 +322,16 @@ "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@2.3.0", "", {}, "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg=="], + "@solid-primitives/event-listener": ["@solid-primitives/event-listener@2.4.3", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-h4VqkYFv6Gf+L7SQj+Y6puigL/5DIi7x5q07VZET7AWcS+9/G3WfIE9WheniHWJs51OEkRB43w6lDys5YeFceg=="], + + "@solid-primitives/media": ["@solid-primitives/media@2.3.3", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.3", "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/static-store": "^0.1.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hQ4hLOGvfbugQi5Eu1BFWAIJGIAzztq9x0h02xgBGl2l0Jaa3h7tg6bz5tV1NSuNYVGio4rPoa7zVQQLkkx9dA=="], + + "@solid-primitives/rootless": ["@solid-primitives/rootless@1.5.2", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-9HULb0QAzL2r47CCad0M+NKFtQ+LrGGNHZfteX/ThdGvKIg2o2GYhBooZubTCd/RTu2l2+Nw4s+dEfiDGvdrrQ=="], + + "@solid-primitives/static-store": ["@solid-primitives/static-store@0.1.2", "", { "dependencies": { "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-ReK+5O38lJ7fT+L6mUFvUr6igFwHBESZF+2Ug842s7fvlVeBdIVEdTCErygff6w7uR6+jrr7J8jQo+cYrEq4Iw=="], + + "@solid-primitives/utils": ["@solid-primitives/utils@6.3.2", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ=="], + "@solidjs/meta": ["@solidjs/meta@0.29.4", "", { "peerDependencies": { "solid-js": ">=1.8.4" } }, "sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g=="], "@solidjs/router": ["@solidjs/router@0.15.3", "", { "peerDependencies": { "solid-js": "^1.8.6" } }, "sha512-iEbW8UKok2Oio7o6Y4VTzLj+KFCmQPGEpm1fS3xixwFBdclFVBvaQVeibl1jys4cujfAK5Kn6+uG2uBm3lxOMw=="], @@ -454,7 +466,7 @@ "agent-base": ["agent-base@7.1.3", "", {}, "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw=="], - "animejs": ["animejs@4.1.1", "", {}, "sha512-IQiV/Mxg5/ViKlRPGUYcZzj9Me6zQRTQQOTtNTXEEVY4VjeokGjGxpKjaBf7nO+q/kgaqC2HKfUlawGvvnrPwQ=="], + "animejs": ["animejs@4.1.2", "", {}, "sha512-QojQzHzN4ZCOGk4Seir5CWPHGKFPpMAsen3KEj/BHsIKDceH0xKd3FBWflyKiNefKG2fn3+ofpY9jD/UXhpY6A=="], "ansi-align": ["ansi-align@3.0.1", "", { "dependencies": { "string-width": "^4.1.0" } }, "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w=="], @@ -1486,6 +1498,8 @@ "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="], + "@m3-components/solid/animejs": ["animejs@4.1.1", "", {}, "sha512-IQiV/Mxg5/ViKlRPGUYcZzj9Me6zQRTQQOTtNTXEEVY4VjeokGjGxpKjaBf7nO+q/kgaqC2HKfUlawGvvnrPwQ=="], + "@mapbox/node-pre-gyp/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="], "@netlify/zip-it-and-ship-it/@netlify/serverless-functions-api": ["@netlify/serverless-functions-api@2.1.2", "", {}, "sha512-uEFA0LAcBGd3+fgDSLkTTsrgyooKqu8mN/qA+F/COS2A7NFWRcLFnjVKH/xZhxq+oQkrSa+XPS9qj2wgQosiQw=="], diff --git a/packages/solid/package.json b/packages/solid/package.json index 15ea7c8..e5594ef 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -9,11 +9,13 @@ }, "dependencies": { "@m3-components/solid": "0.1.10", + "@solid-primitives/media": "^2.3.3", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.15.3", "@solidjs/start": "^1.1.7", "@tailwindcss/vite": "^4.1.11", "@types/luxon": "^3.7.1", + "animejs": "^4.1.2", "axios": "^1.11.0", "dotenv": "^16.6.1", "drizzle-orm": "^0.44.4", diff --git a/packages/solid/public/icons/zh/appbar_desktop-light.svg b/packages/solid/public/icons/zh/appbar_desktop_light.svg similarity index 100% rename from packages/solid/public/icons/zh/appbar_desktop-light.svg rename to packages/solid/public/icons/zh/appbar_desktop_light.svg diff --git a/packages/solid/src/components/shell/Layout.tsx b/packages/solid/src/components/shell/Layout.tsx index 1d7a9d5..458bfcb 100644 --- a/packages/solid/src/components/shell/Layout.tsx +++ b/packages/solid/src/components/shell/Layout.tsx @@ -10,8 +10,8 @@ export const BodyRegion: Component = (props) => { base: "relative", variants: { open: { - true: "px-5 md:left-55 md:pr-55", - false: "px-5 md:left-24 md:pr-24" + true: "px-5 lg:left-55 lg:pr-55", + false: "px-5 lg:left-24 lg:pr-24" } } }); diff --git a/packages/solid/src/components/shell/Navigation.tsx b/packages/solid/src/components/shell/Navigation.tsx index 3eb1898..5f790d2 100644 --- a/packages/solid/src/components/shell/Navigation.tsx +++ b/packages/solid/src/components/shell/Navigation.tsx @@ -1,4 +1,4 @@ -import { Component, createSignal, For } from "solid-js"; +import { Component, createEffect, createMemo, createSignal, For, on, onMount } from "solid-js"; import { HomeIcon } from "../icons/Home"; import { MusicIcon } from "../icons/Music"; import { @@ -18,6 +18,8 @@ import { A } from "@solidjs/router"; import { AlbumIcon } from "~/components/icons/Album"; import { SearchIcon } from "../icons/Search"; import { Portal } from "solid-js/web"; +import { animate, createTimer, utils } from "animejs"; +import { tv } from "tailwind-variants"; export const [activeTab, setActiveTab] = createSignal(-1); export const [navigationExpanded, setNavigationExpanded] = createSignal(false); @@ -84,19 +86,38 @@ const searchT = { }; export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { - let el: HTMLDivElement | undefined; + const [el, setEl] = createSignal(null); + + createEffect(() => { + if (!el) return; + if (navigationExpanded()) { + animate(el()!, { + x: 0, + duration: 500, + z: 100, + ease: "cubicBezier(0.27, 1.06, 0.18, 1.00)" + }); + } else { + animate(el()!, { + x: -340, + duration: 500, + z: 0, + ease: "cubicBezier(0.27, 1.06, 0.18, 1.00)" + }); + } + }); + return ( <> setNavigationExpanded(!navigationExpanded())} + class="top-3 left-4 fixed z-100 bg-surface-container/60 backdrop-blur-md lg:hidden" + onClick={() => { + setNavigationExpanded(!navigationExpanded()); + }} /> - + - setNavigationExpanded(!navigationExpanded())} - /> + @@ -106,14 +127,19 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { -
+
{ + setEl(el); + }} + > - - + @@ -141,8 +167,8 @@ export const NavigationMobile: Component<{ lang?: "zh" | "en" }> = (props) => { export const NavigationRegion: Component<{ lang?: "zh" | "en" }> = (props) => { return ( -