From 62c25eb913586a766c31aa8018b43b08eb6b87d4 Mon Sep 17 00:00:00 2001 From: Jeremy Walker Date: Wed, 13 Sep 2023 23:57:32 +0200 Subject: [PATCH 1/5] Split out page CSS --- app/css/application.postcss.css | 262 ------------- app/css/defaults.css | 17 + app/css/minimal_tailwind.css | 8 + .../page-tracks-index.css} | 3 +- app/css/packs/website.css | 249 ++++++++++++ app/css/styles.css | 114 +----- app/css/ui-kit/all.css | 13 + app/css/ui-kit/minimal.css | 12 + app/css/ui-kit/styles.css | 94 +++++ app/helpers/meta_tags_helper.rb | 6 + app/views/layouts/application.html.haml | 2 + app/views/tracks/index.html.haml | 1 + package.json | 4 +- tailwind.minimal.config.js | 7 + yarn.lock | 371 ++++++++++++------ 15 files changed, 673 insertions(+), 490 deletions(-) delete mode 100644 app/css/application.postcss.css create mode 100644 app/css/minimal_tailwind.css rename app/css/{pages/track-index.css => packs/page-tracks-index.css} (89%) create mode 100644 app/css/packs/website.css create mode 100644 app/css/ui-kit/all.css create mode 100644 app/css/ui-kit/minimal.css create mode 100644 app/css/ui-kit/styles.css create mode 100644 tailwind.minimal.config.js diff --git a/app/css/application.postcss.css b/app/css/application.postcss.css deleted file mode 100644 index 8ff8288151..0000000000 --- a/app/css/application.postcss.css +++ /dev/null @@ -1,262 +0,0 @@ -@import "./tailwind.css"; -@import "./defaults"; -@import "./fonts"; - -@import "./ui-kit/animations"; -@import "./ui-kit/borders"; -@import "./ui-kit/buttons"; -@import "./ui-kit/colors"; -@import "./ui-kit/effects"; -@import "./ui-kit/inputs"; -@import "./ui-kit/shapes"; -@import "./ui-kit/label"; -@import "./ui-kit/text"; -@import "./ui-kit/tracks"; -@import "./ui-kit/filters"; -@import "./ui-kit/scroll"; - -@import "./tooltips/generic"; -@import "./tooltips/base"; -@import "./tooltips/mentoring-link"; -@import "./tooltips/concept"; -@import "./tooltips/user"; -@import "./tooltips/exercise"; -@import "./tooltips/student"; -@import "./tooltips/task"; - -@import "./components/advert"; -@import "./components/perk"; -@import "./components/textblock"; -@import "./components/spinner"; -@import "./components/tooltip-spinner"; -@import "./components/financial-amount"; -@import "./components/automated-feedback"; -@import "./components/share-button"; -@import "./components/social-icon"; -@import "./components/blog-post"; -@import "./components/donations-form"; -@import "./components/donation-card-error"; -@import "./components/toast"; -@import "./components/contributions-summary"; -@import "./components/progress"; -@import "./components/site-update"; -@import "./components/site-footer"; -@import "./components/site-header"; -@import "./components/nav-bar"; -@import "./components/toggle-button"; -@import "./components/theme-toggle-button"; -@import "./components/community-rank-tag"; -@import "./components/track-breadcrumbs"; -@import "./components/contributing/header"; -@import "./components/header-with-bg"; -@import "./components/makers-button"; -@import "./components/avatar-selector"; -@import "./components/badge"; -@import "./components/bg-img"; -@import "./components/code-pane"; -@import "./components/concept"; -@import "./components/concept-icon"; -@import "./components/concept-progress-bar"; -@import "./components/copy-text-to-clipboard"; -@import "./components/details"; -@import "./components/combo-button"; -@import "./components/exercise-header"; -@import "./components/flash"; -@import "./components/icon"; -@import "./components/iteration-summary"; -@import "./components/accordion-section"; -@import "./components/underline"; -@import "./components/about-nav"; -@import "./components/docs-main-nav"; -@import "./components/docs-side-nav"; -@import "./components/docs-tracks-list"; -@import "./components/iterations-footer"; -@import "./components/solution-iterations"; -@import "./components/loading-bar"; -@import "./components/loading-overlay"; -@import "./components/loading-suspense"; -@import "./components/unlocked-concept"; -@import "./components/discussion-timeline"; -@import "./components/responsive-table-wrapper"; - -@import "./components/share-panel"; -@import "./components/split-pane"; -@import "./components/heading-with-count"; -@import "./components/notification"; -@import "./components/prominent-link"; -@import "./components/reputation"; -@import "./components/primary-reputation"; -@import "./components/tab"; -@import "./components/tab-2"; -@import "./components/textual-content"; -@import "./components/tracks-list"; -@import "./components/pagination"; -@import "./components/modal"; -@import "./components/radio"; -@import "./components/checkbox"; -@import "./components/select"; -@import "./components/single-select"; -@import "./components/multiple-select"; -@import "./components/track-select"; - -@import "./components/insiders-prompts"; - -@import "./components/user_activity"; -@import "./components/search-bar"; -@import "./components/community-solution"; -@import "./components/community-solutions-list"; -@import "./components/iteration-processing-status"; -@import "./components/notification-dot"; - -@import "./components/mentor/header"; -@import "./components/mentor/solution-row"; -@import "./components/mentor/discussion"; -@import "./components/mentor/representer-row"; - -@import "./components/track/header"; -@import "./components/track/concept-nav"; -@import "./components/track/concept-map"; -@import "./components/iteration-pane"; -@import "./components/test-tabs"; -@import "./components/explainer"; -@import "./components/markdown-editor"; -@import "./components/mentor-discussion-summary"; -@import "./components/mentor-track-selector"; -@import "./components/tag"; -@import "./components/difficulty-tag"; -@import "./components/exercise-status-tag"; -@import "./components/exercise-type-tag"; -@import "./components/divider"; -@import "./components/faces"; -@import "./components/exercise-dot"; -@import "./components/results-zone"; -@import "./components/introducer"; -@import "./components/profile-header"; -@import "./components/track-filter"; -@import "./components/mentor-discussion-widget"; -@import "./components/completed-exercise-progress"; -@import "./components/search-input"; -@import "./components/zero-section"; -@import "./components/mentoring-request-form"; - -@import "./components/widgets/exercise"; -@import "./components/mentor-discussion-post-editor"; -@import "./components/test-run"; -@import "./components/chatgpt"; -@import "./components/alert"; -@import "./components/diff"; -@import "./components/cli-walkthrough"; -@import "./components/cli-walkthrough-button"; - -@import "./components/youtube-container"; - -@import "./modals/bug-report"; -@import "./modals/donations-form"; -@import "./modals/editor-hints"; -@import "./modals/automated-feedback"; -@import "./modals/generic-confirmation"; -@import "./modals/generic-destructive"; -@import "./modals/donation-confirmation"; -@import "./modals/badge"; -@import "./modals/update-exercise"; -@import "./modals/makers"; -@import "./modals/test-run"; -@import "./modals/activate-track-mode"; -@import "./modals/crop-avatar"; -@import "./modals/profile-first-time"; -@import "./modals/completed-tutorial-exercise"; -@import "./modals/completed-exercise"; -@import "./modals/publish-exercise"; -@import "./modals/mentoring-sessions"; -@import "./modals/confirm-finish-student-mentor-discussion"; -@import "./modals/finish-student-mentor-discussion"; -@import "./modals/community-launch"; -@import "./modals/become-mentor"; -@import "./modals/change-mentor-tracks"; -@import "./modals/select-exercise-for-mentoring"; -@import "./modals/testimonial"; -@import "./modals/change-published-iteration"; -@import "./modals/unpublish-solution"; -@import "./modals/cli-walkthrough"; - -@import "./dropdowns/generic-menu"; -@import "./dropdowns/share"; -@import "./dropdowns/notifications"; -@import "./dropdowns/reputation"; -@import "./dropdowns/request-mentoring"; -@import "./dropdowns/open-editor-button"; - -@import "./pages/partners/gdn"; -@import "./pages/about"; -@import "./pages/insiders"; -@import "./pages/hiring"; -@import "./pages/team"; -@import "./pages/individual_supporters"; -@import "./pages/organisation_supporters"; -@import "./pages/organisation_supporter"; -@import "./pages/editor"; -@import "./pages/notifications"; -@import "./pages/blog"; -@import "./pages/blog-post"; -@import "./pages/approach"; -@import "./pages/article"; -@import "./pages/donate"; -@import "./pages/landing"; -@import "./pages/settings"; -@import "./pages/contributing-dashboard"; -@import "./pages/contributing-contributors"; -@import "./pages/contributing-tasks"; -@import "./pages/auth"; -@import "./pages/dashboard"; -@import "./pages/docs-show"; -@import "./pages/docs-index"; -@import "./pages/docs-tracks"; -@import "./pages/onboarding"; -@import "./pages/profile-intro"; -@import "./pages/profile-new"; -@import "./pages/profile"; -@import "./pages/profile-badges"; -@import "./pages/profile-solutions"; -@import "./pages/profile-contributions"; -@import "./pages/profile-testimonials"; -@import "./pages/track-shared-index"; -@import "./pages/concepts-index"; -@import "./pages/concept-show"; -@import "./pages/exercise-show"; -@import "./pages/exercise-mentoring"; -@import "./pages/exercises-index"; -@import "./pages/iterations-index"; -@import "./pages/community-solutions-index"; -@import "./pages/community-solution-show"; -@import "./pages/track-index"; -@import "./pages/track-show"; -@import "./pages/track-about"; -@import "./pages/track-build"; -@import "./pages/mentoring/external-request"; -@import "./pages/mentoring/external"; -@import "./pages/mentoring/inbox"; -@import "./pages/mentoring/automation"; -@import "./pages/mentoring/queue"; -@import "./pages/mentoring/testimonials"; -@import "./pages/maintaining/dashboard"; -@import "./pages/maintaining/track"; -@import "./pages/maintaining/site-updates-form"; -@import "./pages/admin/page"; -@import "./pages/admin/table"; -@import "./pages/journey"; -@import "./pages/journey/overview"; -@import "./pages/journey/solutions"; -@import "./pages/journey/reputation"; -@import "./pages/journey/badges"; -@import "./pages/impact"; -@import "./pages/community"; -@import "./pages/community-story"; -@import "./pages/challenges/external"; -@import "./pages/challenges/12in23"; -@import "./pages/perks"; -@import "./pages/perk"; - -/* @import "./highlighters/highlightjs-light"; -@import "./highlighters/highlightjs-dark"; */ -@import "./highlighters/highlightjs-colors"; -@import "./highlighters/highlight-links"; diff --git a/app/css/defaults.css b/app/css/defaults.css index 7589bcde1d..e75e370a10 100644 --- a/app/css/defaults.css +++ b/app/css/defaults.css @@ -11,6 +11,13 @@ body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; + + /* + * app/images/bg-pattern.svg + * https://pattern.monster/hexagon-1/ + * https://base64.guru/converter/encode/image/svg + * */ + --hex-bg-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ncGF0dGVybklkJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxkZWZzPjxwYXR0ZXJuIGlkPSdhJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB3aWR0aD0nMjknIGhlaWdodD0nNTAuMTE1JyBwYXR0ZXJuVHJhbnNmb3JtPSdzY2FsZSgyKSByb3RhdGUoMCknPjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J2hzbGEoMCwwJSwxMDAlLDEpJy8+PHBhdGggZD0nTTE0LjQ5OCAxNi44NThMMCA4LjQ4OC4wMDItOC4yNTdsMTQuNS04LjM3NEwyOS04LjI2bC0uMDAyIDE2Ljc0NXptMCA1MC4wNkwwIDU4LjU0OGwuMDAyLTE2Ljc0NSAxNC41LTguMzczTDI5IDQxLjhsLS4wMDIgMTYuNzQ0ek0yOC45OTYgNDEuOGwtMTQuNDk4LTguMzcuMDAyLTE2Ljc0NEwyOSA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXptLTI5IDBsLTE0LjQ5OC04LjM3LjAwMi0xNi43NDRMMCA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXonICBzdHJva2Utd2lkdGg9JzAuNScgc3Ryb2tlPSdoc2xhKDI1OSwgMCUsIDkwJSwgMSknIGZpbGw9J25vbmUnLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAlJyBoZWlnaHQ9JzgwMCUnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC0zOCwtNi40NiknIGZpbGw9J3VybCgjYSknLz48L3N2Zz4K"); } @media screen and (prefers-reduced-motion: reduce) { body { @@ -79,3 +86,13 @@ body { height: fit-content; } } + +.c-count-bubble { + @apply border-1 border-borderLight rounded-100 px-12; + @apply text-textColor6 text-13 leading-200 font-medium; +} + +/* Override the tailwind default */ +img { + max-width: none; +} diff --git a/app/css/minimal_tailwind.css b/app/css/minimal_tailwind.css new file mode 100644 index 0000000000..7762eb4f6e --- /dev/null +++ b/app/css/minimal_tailwind.css @@ -0,0 +1,8 @@ +@config "../../tailwind.minimal.config.js"; + +@tailwind base; +@tailwind components; +@tailwind utilities; +@tailwind screens; + +/* Exercism: DELETE ABOVE THIS */ diff --git a/app/css/pages/track-index.css b/app/css/packs/page-tracks-index.css similarity index 89% rename from app/css/pages/track-index.css rename to app/css/packs/page-tracks-index.css index 95d14dd5f2..3705637b6a 100644 --- a/app/css/pages/track-index.css +++ b/app/css/packs/page-tracks-index.css @@ -1,4 +1,5 @@ -@import "../styles"; +@import "../minimal_tailwind.css"; +@import "../ui-kit/minimal.css"; #page-tracks { & header.tracks-header { diff --git a/app/css/packs/website.css b/app/css/packs/website.css new file mode 100644 index 0000000000..643ed9d01f --- /dev/null +++ b/app/css/packs/website.css @@ -0,0 +1,249 @@ +@import "../tailwind"; +@import "../defaults"; +@import "../fonts"; +@import "../ui-kit/all"; + +@import "../tooltips/generic"; +@import "../tooltips/base"; +@import "../tooltips/mentoring-link"; +@import "../tooltips/concept"; +@import "../tooltips/user"; +@import "../tooltips/exercise"; +@import "../tooltips/student"; +@import "../tooltips/task"; + +@import "../components/advert"; +@import "../components/perk"; +@import "../components/textblock"; +@import "../components/spinner"; +@import "../components/tooltip-spinner"; +@import "../components/financial-amount"; +@import "../components/automated-feedback"; +@import "../components/share-button"; +@import "../components/social-icon"; +@import "../components/blog-post"; +@import "../components/donations-form"; +@import "../components/donation-card-error"; +@import "../components/toast"; +@import "../components/contributions-summary"; +@import "../components/progress"; +@import "../components/site-update"; +@import "../components/site-footer"; +@import "../components/site-header"; +@import "../components/nav-bar"; +@import "../components/toggle-button"; +@import "../components/theme-toggle-button"; +@import "../components/community-rank-tag"; +@import "../components/track-breadcrumbs"; +@import "../components/contributing/header"; +@import "../components/header-with-bg"; +@import "../components/makers-button"; +@import "../components/avatar-selector"; +@import "../components/badge"; +@import "../components/bg-img"; +@import "../components/code-pane"; +@import "../components/concept"; +@import "../components/concept-icon"; +@import "../components/concept-progress-bar"; +@import "../components/copy-text-to-clipboard"; +@import "../components/details"; +@import "../components/combo-button"; +@import "../components/exercise-header"; +@import "../components/flash"; +@import "../components/icon"; +@import "../components/iteration-summary"; +@import "../components/accordion-section"; +@import "../components/underline"; +@import "../components/about-nav"; +@import "../components/docs-main-nav"; +@import "../components/docs-side-nav"; +@import "../components/docs-tracks-list"; +@import "../components/iterations-footer"; +@import "../components/solution-iterations"; +@import "../components/loading-bar"; +@import "../components/loading-overlay"; +@import "../components/loading-suspense"; +@import "../components/unlocked-concept"; +@import "../components/discussion-timeline"; +@import "../components/responsive-table-wrapper"; + +@import "../components/share-panel"; +@import "../components/split-pane"; +@import "../components/heading-with-count"; +@import "../components/notification"; +@import "../components/prominent-link"; +@import "../components/reputation"; +@import "../components/primary-reputation"; +@import "../components/tab"; +@import "../components/tab-2"; +@import "../components/textual-content"; +@import "../components/tracks-list"; +@import "../components/pagination"; +@import "../components/modal"; +@import "../components/radio"; +@import "../components/checkbox"; +@import "../components/select"; +@import "../components/single-select"; +@import "../components/multiple-select"; +@import "../components/track-select"; + +@import "../components/insiders-prompts"; + +@import "../components/user_activity"; +@import "../components/search-bar"; +@import "../components/community-solution"; +@import "../components/community-solutions-list"; +@import "../components/iteration-processing-status"; +@import "../components/notification-dot"; + +@import "../components/mentor/header"; +@import "../components/mentor/solution-row"; +@import "../components/mentor/discussion"; +@import "../components/mentor/representer-row"; + +@import "../components/track/header"; +@import "../components/track/concept-nav"; +@import "../components/track/concept-map"; +@import "../components/iteration-pane"; +@import "../components/test-tabs"; +@import "../components/explainer"; +@import "../components/markdown-editor"; +@import "../components/mentor-discussion-summary"; +@import "../components/mentor-track-selector"; +@import "../components/tag"; +@import "../components/difficulty-tag"; +@import "../components/exercise-status-tag"; +@import "../components/exercise-type-tag"; +@import "../components/divider"; +@import "../components/faces"; +@import "../components/exercise-dot"; +@import "../components/results-zone"; +@import "../components/introducer"; +@import "../components/profile-header"; +@import "../components/track-filter"; +@import "../components/mentor-discussion-widget"; +@import "../components/completed-exercise-progress"; +@import "../components/search-input"; +@import "../components/zero-section"; +@import "../components/mentoring-request-form"; + +@import "../components/widgets/exercise"; +@import "../components/mentor-discussion-post-editor"; +@import "../components/test-run"; +@import "../components/chatgpt"; +@import "../components/alert"; +@import "../components/diff"; +@import "../components/cli-walkthrough"; +@import "../components/cli-walkthrough-button"; + +@import "../components/youtube-container"; + +@import "../modals/bug-report"; +@import "../modals/donations-form"; +@import "../modals/editor-hints"; +@import "../modals/automated-feedback"; +@import "../modals/generic-confirmation"; +@import "../modals/generic-destructive"; +@import "../modals/donation-confirmation"; +@import "../modals/badge"; +@import "../modals/update-exercise"; +@import "../modals/makers"; +@import "../modals/test-run"; +@import "../modals/activate-track-mode"; +@import "../modals/crop-avatar"; +@import "../modals/profile-first-time"; +@import "../modals/completed-tutorial-exercise"; +@import "../modals/completed-exercise"; +@import "../modals/publish-exercise"; +@import "../modals/mentoring-sessions"; +@import "../modals/confirm-finish-student-mentor-discussion"; +@import "../modals/finish-student-mentor-discussion"; +@import "../modals/community-launch"; +@import "../modals/become-mentor"; +@import "../modals/change-mentor-tracks"; +@import "../modals/select-exercise-for-mentoring"; +@import "../modals/testimonial"; +@import "../modals/change-published-iteration"; +@import "../modals/unpublish-solution"; +@import "../modals/cli-walkthrough"; + +@import "../dropdowns/generic-menu"; +@import "../dropdowns/share"; +@import "../dropdowns/notifications"; +@import "../dropdowns/reputation"; +@import "../dropdowns/request-mentoring"; +@import "../dropdowns/open-editor-button"; + +@import "../pages/partners/gdn"; +@import "../pages/about"; +@import "../pages/insiders"; +@import "../pages/hiring"; +@import "../pages/team"; +@import "../pages/individual_supporters"; +@import "../pages/organisation_supporters"; +@import "../pages/organisation_supporter"; +@import "../pages/editor"; +@import "../pages/notifications"; +@import "../pages/blog"; +@import "../pages/blog-post"; +@import "../pages/approach"; +@import "../pages/article"; +@import "../pages/donate"; +@import "../pages/landing"; +@import "../pages/settings"; +@import "../pages/contributing-dashboard"; +@import "../pages/contributing-contributors"; +@import "../pages/contributing-tasks"; +@import "../pages/auth"; +@import "../pages/dashboard"; +@import "../pages/docs-show"; +@import "../pages/docs-index"; +@import "../pages/docs-tracks"; +@import "../pages/onboarding"; +@import "../pages/profile-intro"; +@import "../pages/profile-new"; +@import "../pages/profile"; +@import "../pages/profile-badges"; +@import "../pages/profile-solutions"; +@import "../pages/profile-contributions"; +@import "../pages/profile-testimonials"; +@import "../pages/track-shared-index"; +@import "../pages/concepts-index"; +@import "../pages/concept-show"; +@import "../pages/exercise-show"; +@import "../pages/exercise-mentoring"; +@import "../pages/exercises-index"; +@import "../pages/iterations-index"; +@import "../pages/community-solutions-index"; +@import "../pages/community-solution-show"; +@import "../pages/track-show"; +@import "../pages/track-about"; +@import "../pages/track-build"; +@import "../pages/mentoring/external-request"; +@import "../pages/mentoring/external"; +@import "../pages/mentoring/inbox"; +@import "../pages/mentoring/automation"; +@import "../pages/mentoring/queue"; +@import "../pages/mentoring/testimonials"; +@import "../pages/maintaining/dashboard"; +@import "../pages/maintaining/track"; +@import "../pages/maintaining/site-updates-form"; +@import "../pages/admin/page"; +@import "../pages/admin/table"; +@import "../pages/journey"; +@import "../pages/journey/overview"; +@import "../pages/journey/solutions"; +@import "../pages/journey/reputation"; +@import "../pages/journey/badges"; +@import "../pages/impact"; +@import "../pages/community"; +@import "../pages/community-story"; +@import "../pages/challenges/external"; +@import "../pages/challenges/12in23"; +@import "../pages/perks"; +@import "../pages/perk"; + +/* @import "../highlighters/highlightjs-light"; +@import "../highlighters/highlightjs-dark"; */ +@import "../highlighters/highlightjs-colors"; +@import "../highlighters/highlight-links"; diff --git a/app/css/styles.css b/app/css/styles.css index bba3918ac6..181c326a88 100644 --- a/app/css/styles.css +++ b/app/css/styles.css @@ -1,113 +1 @@ -/* Override the tailwind default */ -img { - max-width: none; -} - -@layer base { - /* TODO: These btn styles are legacy and should be refactored out */ - .btn--simple { - @apply bg-backgroundColorA text-textColor6 border-borderColor5; - } - .btn--secondary { - @apply bg-backgroundColorA text-anotherPurple border-anotherPurple; - } - .btn--discourage { - @apply bg-backgroundColorA text-textColor6 border-borderColor5; - } - .btn { - @apply flex items-center justify-center px-20; - @apply border-2 border-buttonBorderColor1 rounded-5; - @apply text-16 font-semibold; - white-space: nowrap; - height: 48px; - - & > .c-icon { - height: 18px; - width: 18px; - &:first-child { - @apply mr-12; - } - &:last-child { - @apply ml-12; - } - } - - & > .kb-shortcut { - @apply ml-8; - } - - &:disabled { - opacity: 0.5; - } - } - .btn-simple { - @apply btn btn--simple; - } - - .btn-i-large { - @apply btn; - @apply px-32 border-3 text-18; - @apply shadow-buttonS; - height: 54px; - - & > .c-icon { - height: 16px; - width: 16px; - } - } - .btn-large-secondary { - @apply btn-i-large btn--secondary; - } - - .btn-small { - @apply btn border-1 border-buttonBorderColor2; - @apply text-14 rounded-5 px-16; - @apply text-textColor6; - height: 36px; - - & > .c-icon { - height: 14px; - width: 14px; - @apply filter-textColor6; - } - } - .btn-small-secondary { - @apply btn-small btn--secondary; - } - .btn-small-discourage { - @apply btn-small btn--discourage; - } - - .btn-link-legacy { - @apply btn-small; - @apply border-0 p-0; - color: var(--c-prominent-link-color); - .c-icon { - filter: var(--c-prominent-link-icon-filter); - } - } - - a.text-a-subtle, - button.text-a-subtle { - @apply text-textColor2 font-normal leading-140; - @apply border-b-1 border-textColor2; - } - - .uses-suspense { - @apply relative; - } - - .c-count-bubble { - @apply border-1 border-borderLight rounded-100 px-12; - @apply text-textColor6 text-13 leading-200 font-medium; - } -} - -body { - /* - * app/images/bg-pattern.svg - * https://pattern.monster/hexagon-1/ - * https://base64.guru/converter/encode/image/svg - * */ - --hex-bg-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ncGF0dGVybklkJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxkZWZzPjxwYXR0ZXJuIGlkPSdhJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB3aWR0aD0nMjknIGhlaWdodD0nNTAuMTE1JyBwYXR0ZXJuVHJhbnNmb3JtPSdzY2FsZSgyKSByb3RhdGUoMCknPjxyZWN0IHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J2hzbGEoMCwwJSwxMDAlLDEpJy8+PHBhdGggZD0nTTE0LjQ5OCAxNi44NThMMCA4LjQ4OC4wMDItOC4yNTdsMTQuNS04LjM3NEwyOS04LjI2bC0uMDAyIDE2Ljc0NXptMCA1MC4wNkwwIDU4LjU0OGwuMDAyLTE2Ljc0NSAxNC41LTguMzczTDI5IDQxLjhsLS4wMDIgMTYuNzQ0ek0yOC45OTYgNDEuOGwtMTQuNDk4LTguMzcuMDAyLTE2Ljc0NEwyOSA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXptLTI5IDBsLTE0LjQ5OC04LjM3LjAwMi0xNi43NDRMMCA4LjMxMmwxNC40OTggOC4zNy0uMDAyIDE2Ljc0NXonICBzdHJva2Utd2lkdGg9JzAuNScgc3Ryb2tlPSdoc2xhKDI1OSwgMCUsIDkwJSwgMSknIGZpbGw9J25vbmUnLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAlJyBoZWlnaHQ9JzgwMCUnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKC0zOCwtNi40NiknIGZpbGw9J3VybCgjYSknLz48L3N2Zz4K"); -} +/* Keep until deleted everywhere */ diff --git a/app/css/ui-kit/all.css b/app/css/ui-kit/all.css new file mode 100644 index 0000000000..161364393d --- /dev/null +++ b/app/css/ui-kit/all.css @@ -0,0 +1,13 @@ +@import "./styles"; +@import "./animations"; +@import "./borders"; +@import "./buttons"; +@import "./colors"; +@import "./effects"; +@import "./inputs"; +@import "./shapes"; +@import "./label"; +@import "./text"; +@import "./tracks"; +@import "./filters"; +@import "./scroll"; diff --git a/app/css/ui-kit/minimal.css b/app/css/ui-kit/minimal.css new file mode 100644 index 0000000000..efe919e922 --- /dev/null +++ b/app/css/ui-kit/minimal.css @@ -0,0 +1,12 @@ +/* @import "./ui-kit/borders"; */ +/* @import "./ui-kit/colors"; */ +/* @import "./ui-kit/effects"; */ +/* @import "./ui-kit/inputs"; */ +/* @import "./ui-kit/shapes"; */ +/* @import "./ui-kit/label"; */ +/* @import "./ui-kit/tracks"; */ +/* @import "./ui-kit/filters"; */ +/* @import "./ui-kit/scroll"; */ + +@import "./text"; +@import "./buttons"; diff --git a/app/css/ui-kit/styles.css b/app/css/ui-kit/styles.css new file mode 100644 index 0000000000..fd56d7eefa --- /dev/null +++ b/app/css/ui-kit/styles.css @@ -0,0 +1,94 @@ +@layer base { + /* TODO: These btn styles are legacy and should be refactored out */ + .btn--simple { + @apply bg-backgroundColorA text-textColor6 border-borderColor5; + } + .btn--secondary { + @apply bg-backgroundColorA text-anotherPurple border-anotherPurple; + } + .btn--discourage { + @apply bg-backgroundColorA text-textColor6 border-borderColor5; + } + .btn { + @apply flex items-center justify-center px-20; + @apply border-2 border-buttonBorderColor1 rounded-5; + @apply text-16 font-semibold; + white-space: nowrap; + height: 48px; + + & > .c-icon { + height: 18px; + width: 18px; + &:first-child { + @apply mr-12; + } + &:last-child { + @apply ml-12; + } + } + + & > .kb-shortcut { + @apply ml-8; + } + + &:disabled { + opacity: 0.5; + } + } + .btn-simple { + @apply btn btn--simple; + } + + .btn-i-large { + @apply btn; + @apply px-32 border-3 text-18; + @apply shadow-buttonS; + height: 54px; + + & > .c-icon { + height: 16px; + width: 16px; + } + } + .btn-large-secondary { + @apply btn-i-large btn--secondary; + } + + .btn-small { + @apply btn border-1 border-buttonBorderColor2; + @apply text-14 rounded-5 px-16; + @apply text-textColor6; + height: 36px; + + & > .c-icon { + height: 14px; + width: 14px; + @apply filter-textColor6; + } + } + .btn-small-secondary { + @apply btn-small btn--secondary; + } + .btn-small-discourage { + @apply btn-small btn--discourage; + } + + .btn-link-legacy { + @apply btn-small; + @apply border-0 p-0; + color: var(--c-prominent-link-color); + .c-icon { + filter: var(--c-prominent-link-icon-filter); + } + } + + a.text-a-subtle, + button.text-a-subtle { + @apply text-textColor2 font-normal leading-140; + @apply border-b-1 border-textColor2; + } + + .uses-suspense { + @apply relative; + } +} diff --git a/app/helpers/meta_tags_helper.rb b/app/helpers/meta_tags_helper.rb index 54b6617801..30c0a4b61a 100644 --- a/app/helpers/meta_tags_helper.rb +++ b/app/helpers/meta_tags_helper.rb @@ -1,4 +1,10 @@ module MetaTagsHelper + def require_stylesheet(stylesheet) + content_for :head do + stylesheet_link_tag stylesheet, "data-turbo-track": "reload" + end + end + def meta_title content_for?(:meta_title) ? content_for(:meta_title) : "Exercism" end diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 32731eea35..f22e6ec7a4 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,6 +9,8 @@ = render "layouts/meta_tags" + = yield :head + %body{ class: body_class } = render ViewComponents::SiteHeader.new diff --git a/app/views/tracks/index.html.haml b/app/views/tracks/index.html.haml index cc87326ad7..872911ac11 100644 --- a/app/views/tracks/index.html.haml +++ b/app/views/tracks/index.html.haml @@ -1,4 +1,5 @@ - content_for :canonical_url, tracks_url +- require_stylesheet "page-tracks-index" #page-tracks %header.tracks-header diff --git a/package.json b/package.json index bee1ad1e44..48a0180d63 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "reconnecting-websocket": "3.2.2", "regenerator-runtime": "^0.13.7", "rough-notation": "^0.5.1", - "tailwindcss": "^3.0.7", + "tailwindcss": "^3.3.3", "use-is-mounted": "^1.0.0", "use-memory-value": "^1.2.0", "uuid": "^8.3.1", @@ -146,7 +146,7 @@ "test-debug": "node --unhandled-rejections=strict --trace-warnings node_modules/.bin/jest", "test": "jest", "test-watch": "jest --watchAll", - "build:css": "postcss ./app/css/application.postcss.css -o .built-assets/website.css", + "build:css": "postcss ./app/css/packs/**/*.css --dir .built-assets --ext css", "build": "./app/javascript/esbuild.js", "prepare": "husky install" } diff --git a/tailwind.minimal.config.js b/tailwind.minimal.config.js new file mode 100644 index 0000000000..e3a99ac3d9 --- /dev/null +++ b/tailwind.minimal.config.js @@ -0,0 +1,7 @@ +tw = require('./tailwind.config.js') +tw.content = [] +;(tw.corePlugins = { + container: false, + preflight: false, +}), + (module.exports = tw) diff --git a/yarn.lock b/yarn.lock index e7836c58fb..4c02ce3d2f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@alloc/quick-lru@^5.2.0": + version "5.2.0" + resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30" + integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw== + "@babel/code-frame@7.12.11": version "7.12.11" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f" @@ -1392,6 +1397,11 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" +"@csstools/selector-specificity@^2.0.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016" + integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw== + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -1707,6 +1717,38 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" +"@jridgewell/gen-mapping@^0.3.2": + version "0.3.3" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098" + integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" + integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== + +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": + version "1.4.15" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" + integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== + +"@jridgewell/trace-mapping@^0.3.9": + version "0.3.19" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811" + integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@lezer/common@^0.15.0", "@lezer/common@^0.15.5": version "0.15.11" resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.11.tgz#965b5067036305f12e8a3efc344076850be1d3a8" @@ -1823,18 +1865,6 @@ resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.0.1.tgz#8f383b672e142d009f89b725d49b0832d99da74a" integrity sha512-lbGc1z2RXdiWZJE/8o2GSe2gek82EoKd2YvjRrqV//0J3/JImONUYwZ2XPmS1R9R2oth1XlIG0YidqdeTty0TA== -"@rails/activestorage@^6.0.0": - version "6.1.4" - resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.1.4.tgz#7772f539cc846df5f4364fc57ccb48860f9e966e" - integrity sha512-1Tm8uaVBhLTDEG4YaFPvqguhjbUGSPVItm0CfkRpIFZIkybWzFAxatIrk4YVOOxB8ZdXS7GdeYa1qVwjdiDkgQ== - dependencies: - spark-md5 "^3.0.0" - -"@rails/ujs@^6.0.0": - version "6.1.4" - resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.4.tgz#093d5341595a02089ed309dec40f3c37da7b1b10" - integrity sha512-O3lEzL5DYbxppMdsFSw36e4BHIlfz/xusynwXGv3l2lhSlvah41qviRpsoAlKXxl37nZAqK+UUF5cnGGK45Mfw== - "@sector-labs/postcss-inline-class@^0.0.6": version "0.0.6" resolved "https://registry.yarnpkg.com/@sector-labs/postcss-inline-class/-/postcss-inline-class-0.0.6.tgz#b88965715d6eed5b079df31b33ee66d212fb5cd6" @@ -2149,7 +2179,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@17.0.38", "@types/react@^16": +"@types/react@*": version "17.0.38" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ== @@ -2158,6 +2188,15 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/react@^16": + version "16.14.46" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.46.tgz#42ac91aece416176e6b6127cd9ec9e381ea67e16" + integrity sha512-Am4pyXMrr6cWWw/TN3oqHtEZl0j+G6Up/O8m65+xF/3ZaUgkv1GAtTPWw4yNRmH0HJXmur6xKCKoMo3rBGynuw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/react@^16.9.51": version "16.14.22" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.22.tgz#ee332c031561fa6c5b7fa83d74defce837a2947b" @@ -2339,21 +2378,12 @@ acorn-jsx@^5.3.1: resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== -acorn-node@^1.6.1: - version "1.8.2" - resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8" - integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A== - dependencies: - acorn "^7.0.0" - acorn-walk "^7.0.0" - xtend "^4.0.2" - -acorn-walk@^7.0.0, acorn-walk@^7.1.1: +acorn-walk@^7.1.1: version "7.2.0" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== -acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0: +acorn@^7.1.1, acorn@^7.4.0: version "7.4.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== @@ -2484,6 +2514,11 @@ ansistyles@~0.1.3: resolved "https://registry.yarnpkg.com/ansistyles/-/ansistyles-0.1.3.tgz#5de60415bda071bb37127854c864f41b23254539" integrity sha1-XeYEFb2gcbs3EnhUyGT0GyMlRTk= +any-promise@^1.0.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" + integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A== + anymatch@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" @@ -2523,10 +2558,10 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.6" -arg@^5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb" - integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA== +arg@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c" + integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg== argparse@^1.0.7: version "1.0.10" @@ -2901,7 +2936,7 @@ braces@^2.3.1: split-string "^3.0.2" to-regex "^3.0.1" -braces@^3.0.1, braces@~3.0.2: +braces@^3.0.1, braces@^3.0.2, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -3092,7 +3127,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2: +chalk@^4.0.0, chalk@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -3300,7 +3335,7 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.1.4, color-name@~1.1.4: +color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== @@ -3330,6 +3365,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: dependencies: delayed-stream "~1.0.0" +commander@^4.0.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" + integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== + commander@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" @@ -3444,7 +3484,7 @@ core-util-is@~1.0.0: resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== -cosmiconfig@^7.0.0, cosmiconfig@^7.0.1: +cosmiconfig@^7.0.0: version "7.0.1" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d" integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ== @@ -3772,11 +3812,6 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" -defined@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= - delayed-stream@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" @@ -3807,15 +3842,6 @@ detect-newline@^3.0.0: resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA== -detective@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b" - integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg== - dependencies: - acorn-node "^1.6.1" - defined "^1.0.0" - minimist "^1.1.1" - dezalgo@^1.0.0, dezalgo@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456" @@ -4584,7 +4610,18 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9: +fast-glob@^3.2.12: + version "3.3.1" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4" + integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + +fast-glob@^3.2.5, fast-glob@^3.2.7, fast-glob@^3.2.9: version "3.2.11" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== @@ -4965,6 +5002,18 @@ glob-parent@^6.0.2: dependencies: is-glob "^4.0.3" +glob@7.1.6: + version "7.1.6" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" + integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.2.0" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" @@ -5499,7 +5548,14 @@ is-cidr@^3.0.0: dependencies: cidr-regex "^2.0.10" -is-core-module@^2.2.0, is-core-module@^2.8.1: +is-core-module@^2.13.0, is-core-module@^2.8.1: + version "2.13.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db" + integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== + dependencies: + has "^1.0.3" + +is-core-module@^2.2.0: version "2.8.1" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== @@ -6262,6 +6318,11 @@ jest@27: import-local "^3.0.2" jest-cli "^27.4.7" +jiti@^1.18.2: + version "1.20.0" + resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42" + integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA== + jquery@^3.2.1: version "3.6.0" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470" @@ -6637,6 +6698,11 @@ lilconfig@^2.0.3, lilconfig@^2.0.4: resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082" integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA== +lilconfig@^2.0.5, lilconfig@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52" + integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ== + lines-and-columns@^1.1.6: version "1.2.4" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" @@ -6932,6 +6998,14 @@ micromatch@^4.0.2, micromatch@^4.0.4: braces "^3.0.1" picomatch "^2.2.3" +micromatch@^4.0.5: + version "4.0.5" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" + integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== + dependencies: + braces "^3.0.2" + picomatch "^2.3.1" + mime-db@1.51.0: version "1.51.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c" @@ -7110,10 +7184,19 @@ mute-stream@~0.0.4: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -nanoid@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" - integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== +mz@^2.7.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32" + integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q== + dependencies: + any-promise "^1.0.0" + object-assign "^4.0.1" + thenify-all "^1.0.0" + +nanoid@^3.3.6: + version "3.3.6" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" + integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== nanomatch@^1.2.9: version "1.2.13" @@ -7541,7 +7624,7 @@ oauth-sign@~0.9.0: resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== -object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= @@ -7555,10 +7638,10 @@ object-copy@^0.1.0: define-property "^0.2.5" kind-of "^3.0.3" -object-hash@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5" - integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw== +object-hash@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9" + integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw== object-inspect@^1.11.0, object-inspect@^1.9.0: version "1.12.0" @@ -7914,7 +7997,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -8027,22 +8110,31 @@ postcss-hexrgba@^2.1.0: postcss-value-parser "^4.1.0" postcss-import@^14.0.2: - version "14.0.2" - resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1" - integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g== + version "14.1.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0" + integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== dependencies: postcss-value-parser "^4.0.0" read-cache "^1.0.0" resolve "^1.1.7" -postcss-js@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00" - integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ== +postcss-import@^15.1.0: + version "15.1.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70" + integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + +postcss-js@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" + integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== dependencies: camelcase-css "^2.0.1" -postcss-load-config@^3.0.0, postcss-load-config@^3.1.0: +postcss-load-config@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.1.tgz#2f53a17f2f543d9e63864460af42efdac0d41f87" integrity sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg== @@ -8050,6 +8142,14 @@ postcss-load-config@^3.0.0, postcss-load-config@^3.1.0: lilconfig "^2.0.4" yaml "^1.10.2" +postcss-load-config@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd" + integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA== + dependencies: + lilconfig "^2.0.5" + yaml "^2.1.1" + postcss-merge-longhand@^5.0.6: version "5.0.6" resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.0.6.tgz#090e60d5d3b3caad899f8774f8dccb33217d2166" @@ -8100,19 +8200,20 @@ postcss-minify-selectors@^5.1.3: dependencies: postcss-selector-parser "^6.0.5" -postcss-nested@5.0.6: - version "5.0.6" - resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc" - integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA== +postcss-nested@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c" + integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ== dependencies: - postcss-selector-parser "^6.0.6" + postcss-selector-parser "^6.0.11" postcss-nesting@^10.0.3: - version "10.1.2" - resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.1.2.tgz#2e5f811b3d75602ea18a95dd445bde5297145141" - integrity sha512-dJGmgmsvpzKoVMtDMQQG/T6FSqs6kDtUDirIfl4KnjMCiY9/ETX8jdKyCd20swSRAbUYkaBKV20pxkzxoOXLqQ== + version "10.2.0" + resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be" + integrity sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA== dependencies: - postcss-selector-parser "^6.0.8" + "@csstools/selector-specificity" "^2.0.0" + postcss-selector-parser "^6.0.10" postcss-normalize-charset@^5.0.3: version "5.0.3" @@ -8215,7 +8316,15 @@ postcss-reuse@^2.2.0: dependencies: css-selector-tokenizer "0.8.x" -postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.8, postcss-selector-parser@^6.0.9: +postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11: + version "6.0.13" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b" + integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f" integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ== @@ -8251,12 +8360,12 @@ postcss@^7.0.1: picocolors "^0.2.1" source-map "^0.6.1" -postcss@^8.4.5: - version "8.4.6" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1" - integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA== +postcss@^8.4.23, postcss@^8.4.5: + version "8.4.29" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd" + integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw== dependencies: - nanoid "^3.2.0" + nanoid "^3.3.6" picocolors "^1.0.0" source-map-js "^1.0.2" @@ -8464,11 +8573,6 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -quick-lru@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" - integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== - qw@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/qw/-/qw-1.0.2.tgz#0c31a6f810320a91c58b05198679427103b03c4a" @@ -8627,7 +8731,7 @@ react@^16.13.1: read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" - integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q= + integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA== dependencies: pify "^2.3.0" @@ -8934,7 +9038,16 @@ resolve.exports@^1.1.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9" integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ== -resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.21.0: +resolve@^1.1.7, resolve@^1.22.2: + version "1.22.4" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34" + integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg== + dependencies: + is-core-module "^2.13.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0: version "1.22.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== @@ -9295,11 +9408,6 @@ source-map@^0.7.3: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== -spark-md5@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc" - integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw== - spdx-correct@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9" @@ -9603,6 +9711,19 @@ stylehacks@^5.0.3: browserslist "^4.16.6" postcss-selector-parser "^6.0.4" +sucrase@^3.32.0: + version "3.34.0" + resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f" + integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw== + dependencies: + "@jridgewell/gen-mapping" "^0.3.2" + commander "^4.0.0" + glob "7.1.6" + lines-and-columns "^1.1.6" + mz "^2.7.0" + pirates "^4.0.1" + ts-interface-checker "^0.1.9" + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -9666,31 +9787,33 @@ table@^6.0.9: string-width "^4.2.3" strip-ansi "^6.0.1" -tailwindcss@^3.0.7: - version "3.0.18" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.18.tgz#ea4825e6496d77dc21877b6b61c7cc56cda3add5" - integrity sha512-ihPTpEyA5ANgZbwKlgrbfnzOp9R5vDHFWmqxB1PT8NwOGCOFVVMl+Ps1cQQ369acaqqf1BEF77roCwK0lvNmTw== +tailwindcss@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf" + integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w== dependencies: - arg "^5.0.1" - chalk "^4.1.2" + "@alloc/quick-lru" "^5.2.0" + arg "^5.0.2" chokidar "^3.5.3" - color-name "^1.1.4" - cosmiconfig "^7.0.1" - detective "^5.2.0" didyoumean "^1.2.2" dlv "^1.1.3" - fast-glob "^3.2.11" + fast-glob "^3.2.12" glob-parent "^6.0.2" is-glob "^4.0.3" + jiti "^1.18.2" + lilconfig "^2.1.0" + micromatch "^4.0.5" normalize-path "^3.0.0" - object-hash "^2.2.0" - postcss-js "^4.0.0" - postcss-load-config "^3.1.0" - postcss-nested "5.0.6" - postcss-selector-parser "^6.0.9" - postcss-value-parser "^4.2.0" - quick-lru "^5.1.1" - resolve "^1.21.0" + object-hash "^3.0.0" + picocolors "^1.0.0" + postcss "^8.4.23" + postcss-import "^15.1.0" + postcss-js "^4.0.1" + postcss-load-config "^4.0.1" + postcss-nested "^6.0.1" + postcss-selector-parser "^6.0.11" + resolve "^1.22.2" + sucrase "^3.32.0" tar@^4.4.10, tar@^4.4.12, tar@^4.4.19: version "4.4.19" @@ -9739,6 +9862,20 @@ thenby@^1.3.4: resolved "https://registry.yarnpkg.com/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc" integrity sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ== +thenify-all@^1.0.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726" + integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA== + dependencies: + thenify ">= 3.1.0 < 4" + +"thenify@>= 3.1.0 < 4": + version "3.3.1" + resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f" + integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw== + dependencies: + any-promise "^1.0.0" + throat@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375" @@ -9855,6 +9992,11 @@ tr46@~0.0.3: resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= +ts-interface-checker@^0.1.9: + version "0.1.13" + resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699" + integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA== + tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" @@ -10384,7 +10526,7 @@ xstate@^4.16.2: resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.29.0.tgz#74161f1e4b7fadb073593085f4fbb58068ee0b86" integrity sha512-F6WF5s6xG/bm8Oxi2ETuzwGQW8yleL5I4JPxZl49m7Uw7D4LAXu+4dvUK78Uo4D863sM8auqw6+1Xmj9mFlmDQ== -xtend@^4.0.2, xtend@~4.0.1: +xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== @@ -10424,6 +10566,11 @@ yaml@^1.10.0, yaml@^1.10.2: resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== +yaml@^2.1.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144" + integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg== + yargs-parser@^15.0.1: version "15.0.3" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115" From cd4d3d495e2aa5d725f1177048333e99858c8b71 Mon Sep 17 00:00:00 2001 From: Jeremy Walker Date: Thu, 14 Sep 2023 00:17:26 +0200 Subject: [PATCH 2/5] Add from video --- app/css/components/tracks-list.css | 241 ---------------------------- app/css/packs/page-tracks-index.css | 240 +++++++++++++++++++++++++++ package.json | 2 +- tailwind.minimal.config.js | 6 +- 4 files changed, 244 insertions(+), 245 deletions(-) diff --git a/app/css/components/tracks-list.css b/app/css/components/tracks-list.css index 42eebb272f..e69de29bb2 100644 --- a/app/css/components/tracks-list.css +++ b/app/css/components/tracks-list.css @@ -1,241 +0,0 @@ -@import "../styles"; - -.c-tracks-list { - & .c-search-bar { - @apply bg-backgroundColorA shadow-base; - @apply py-12 mb-32; - - & .--tag-option-list { - @apply absolute left-0 right-0; - @apply bg-backgroundColorA; - @apply z-dropdown; - - top: 60px; - - box-shadow: 0px 18px 24px rgba(var(--shadowColorMain), 0.15); - - &:focus { - @apply outline-none; - } - - & .container { - @apply py-24; - } - - & .--categories { - @apply flex flex-row gap-72; - } - - & .--category { - @apply flex flex-col gap-8; - - & h4 { - @apply text-14 font-semibold font-mono; - @apply mb-12; - } - & .--option { - & input { - @apply mr-8; - } - } - } - & .--buttons { - @apply flex gap-16 mt-72; - - & .--apply-btn, - & .--close-btn { - @apply px-24 py-12 rounded-5 border-2 leading-none; - @apply font-semibold; - } - - & .--apply-btn { - @apply text-white bg-purple border-purple; - } - - & .--close-btn { - @apply border-darkGray; - } - } - } - & .--state { - @apply hidden items-center; - @apply px-20; - @apply rounded-5; - @apply mr-48; - background: var(--backgroundColorTracksListState); - height: 48px; - - & p { - @apply text-16 font-medium; - color: var(--textColorTracksListState); - } - & .--reset-btn { - @apply ml-24; - } - @apply lg:flex; - } - & .--filter-btn { - @apply mr-0 lg:mr-40; - } - & .c-single-select { - @apply hidden ml-auto lg:flex; - } - } - & .joined-tracks { - @apply mb-64; - } - & .unjoined-tracks { - @apply mb-40; - } - & .joined-tracks, - & .unjoined-tracks { - @apply grid gap-16 md:grid-cols-2; - } - - & .--track { - @apply bg-backgroundColorA shadow-base rounded-8; - @apply flex items-start py-20 px-24; - - &:hover { - @apply shadow-lgZ1 z-shadow; - } - - & > .c-track-icon { - height: 80px; - width: 80px; - @apply mr-20; - } - & .--info { - @apply flex-grow; - - & .--heading { - @apply flex items-center mb-16; - - & > .c-track-icon { - height: 48px; - width: 48px; - @apply mr-12; - } - - & .--title { - @apply mr-12; - @apply text-h4; - } - & .--v3, - & .--new { - @apply flex items-center justify-center flex-shrink-0; - @apply text-13 leading-170 font-semibold; - @apply px-12 rounded-100; - @apply mr-12; - height: 28px; - - & .c-icon { - height: 16px; - width: 16px; - @apply mr-8; - } - } - - & .--new { - color: var(--textColorTracksListNew); - background: var(--backgroundColorTracksListNew); - border-width: 1px; - & .c-icon { - filter: var(--orange-filter); - } - } - & .--v3 { - @apply bg-purple text-white; - - @apply border-1; - border-color: var(--borderColorTracksListV3); - & .c-icon { - filter: var(--dark-green-filter); - } - } - - & .--joined { - @apply flex items-center; - @apply flex-shrink-0; - @apply text-14 leading-170 font-semibold; - @apply ml-auto; - @apply py-4 px-12 rounded-5; - height: 32px; - background: var(--backgroundColorTracksListJoined); - color: var(--textColorTracksListJoined); - & .c-icon { - height: 12px; - width: 12px; - filter: var(--c-prominent-link-icon-filter); - } - } - } - - & .--counts { - @apply flex items-center mb-12; - @apply font-medium text-15 leading-150; - & li { - @apply flex items-center; - &:first-child { - @apply mr-24; - } - - & .c-icon { - height: 21px; - width: 21px; - @apply mr-8; - filter: var(--textColor6-filter); - @apply md:mr-12; - } - } - } - - & .--progress-bar { - @apply mb-16; - height: 6px; - @apply flex flex-row; - background: var(--backgroundColorI); - @apply rounded-8; - - & .--fill { - background: var(--fillColorProgress); - @apply rounded-8; - min-width: 6px; - height: 100%; - } - } - - & .--tags { - /* This flex behaviour and max-height combo causes - * the tags to wrap but to be hidden if they overflow - * one line. This means we only see whole tags on - * the cards but we only ever see one row. */ - @apply flex flex-wrap overflow-hidden gap-8; - max-height: 32px; - - & li { - @apply border-borderColor7 border-1 rounded-100; - @apply font-medium text-13 text-textColor6 leading-200; - @apply px-12; - @apply whitespace-nowrap; - } - } - & .--last-touched { - @apply text-textColor6 leading-170 mt-12; - } - } - } - & .empty-state { - @apply flex flex-col items-center; - @apply py-32; - - & h3 { - @apply text-textColor6; - } - & > .c-icon { - height: 52px; - width: 60px; - filter: var(--textColor6-filter); - } - } -} diff --git a/app/css/packs/page-tracks-index.css b/app/css/packs/page-tracks-index.css index 3705637b6a..d5d51a6f1b 100644 --- a/app/css/packs/page-tracks-index.css +++ b/app/css/packs/page-tracks-index.css @@ -27,3 +27,243 @@ } } } + +.c-tracks-list { + & .c-search-bar { + @apply bg-backgroundColorA shadow-base; + @apply py-12 mb-32; + + & .--tag-option-list { + @apply absolute left-0 right-0; + @apply bg-backgroundColorA; + @apply z-dropdown; + + top: 60px; + + box-shadow: 0px 18px 24px rgba(var(--shadowColorMain), 0.15); + + &:focus { + @apply outline-none; + } + + & .container { + @apply py-24; + } + + & .--categories { + @apply flex flex-row gap-72; + } + + & .--category { + @apply flex flex-col gap-8; + + & h4 { + @apply text-14 font-semibold font-mono; + @apply mb-12; + } + & .--option { + & input { + @apply mr-8; + } + } + } + & .--buttons { + @apply flex gap-16 mt-72; + + & .--apply-btn, + & .--close-btn { + @apply px-24 py-12 rounded-5 border-2 leading-none; + @apply font-semibold; + } + + & .--apply-btn { + @apply text-white bg-purple border-purple; + } + + & .--close-btn { + @apply border-darkGray; + } + } + } + & .--state { + @apply hidden items-center; + @apply px-20; + @apply rounded-5; + @apply mr-48; + background: var(--backgroundColorTracksListState); + height: 48px; + + & p { + @apply text-16 font-medium; + color: var(--textColorTracksListState); + } + & .--reset-btn { + @apply ml-24; + } + @apply lg:flex; + } + & .--filter-btn { + @apply mr-0 lg:mr-40; + } + & .c-single-select { + @apply hidden ml-auto lg:flex; + } + } + & .joined-tracks { + @apply mb-64; + } + & .unjoined-tracks { + @apply mb-40; + } + & .joined-tracks, + & .unjoined-tracks { + @apply grid gap-16 md:grid-cols-2; + } + + & .--track { + @apply bg-backgroundColorA shadow-base rounded-8; + @apply flex items-start py-20 px-24; + + &:hover { + @apply shadow-lgZ1 z-shadow; + } + + & > .c-track-icon { + height: 80px; + width: 80px; + @apply mr-20; + } + & .--info { + @apply flex-grow; + + & .--heading { + @apply flex items-center mb-16; + + & > .c-track-icon { + height: 48px; + width: 48px; + @apply mr-12; + } + + & .--title { + @apply mr-12; + @apply text-h4; + } + & .--v3, + & .--new { + @apply flex items-center justify-center flex-shrink-0; + @apply text-13 leading-170 font-semibold; + @apply px-12 rounded-100; + @apply mr-12; + height: 28px; + + & .c-icon { + height: 16px; + width: 16px; + @apply mr-8; + } + } + + & .--new { + color: var(--textColorTracksListNew); + background: var(--backgroundColorTracksListNew); + border-width: 1px; + & .c-icon { + filter: var(--orange-filter); + } + } + & .--v3 { + @apply bg-purple text-white; + + @apply border-1; + border-color: var(--borderColorTracksListV3); + & .c-icon { + filter: var(--dark-green-filter); + } + } + + & .--joined { + @apply flex items-center; + @apply flex-shrink-0; + @apply text-14 leading-170 font-semibold; + @apply ml-auto; + @apply py-4 px-12 rounded-5; + height: 32px; + background: var(--backgroundColorTracksListJoined); + color: var(--textColorTracksListJoined); + & .c-icon { + height: 12px; + width: 12px; + filter: var(--c-prominent-link-icon-filter); + } + } + } + + & .--counts { + @apply flex items-center mb-12; + @apply font-medium text-15 leading-150; + & li { + @apply flex items-center; + &:first-child { + @apply mr-24; + } + + & .c-icon { + height: 21px; + width: 21px; + @apply mr-8; + filter: var(--textColor6-filter); + @apply md:mr-12; + } + } + } + + & .--progress-bar { + @apply mb-16; + height: 6px; + @apply flex flex-row; + background: var(--backgroundColorI); + @apply rounded-8; + + & .--fill { + background: var(--fillColorProgress); + @apply rounded-8; + min-width: 6px; + height: 100%; + } + } + + & .--tags { + /* This flex behaviour and max-height combo causes + * the tags to wrap but to be hidden if they overflow + * one line. This means we only see whole tags on + * the cards but we only ever see one row. */ + @apply flex flex-wrap overflow-hidden gap-8; + max-height: 32px; + + & li { + @apply border-borderColor7 border-1 rounded-100; + @apply font-medium text-13 text-textColor6 leading-200; + @apply px-12; + @apply whitespace-nowrap; + } + } + & .--last-touched { + @apply text-textColor6 leading-170 mt-12; + } + } + } + & .empty-state { + @apply flex flex-col items-center; + @apply py-32; + + & h3 { + @apply text-textColor6; + } + & > .c-icon { + height: 52px; + width: 60px; + filter: var(--textColor6-filter); + } + } +} diff --git a/package.json b/package.json index 48a0180d63..86db9d619f 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,7 @@ "test-debug": "node --unhandled-rejections=strict --trace-warnings node_modules/.bin/jest", "test": "jest", "test-watch": "jest --watchAll", - "build:css": "postcss ./app/css/packs/**/*.css --dir .built-assets --ext css", + "build:css": "postcss ./app/css/packs/**/*.css --dir .built-assets", "build": "./app/javascript/esbuild.js", "prepare": "husky install" } diff --git a/tailwind.minimal.config.js b/tailwind.minimal.config.js index e3a99ac3d9..805dd7b2c7 100644 --- a/tailwind.minimal.config.js +++ b/tailwind.minimal.config.js @@ -1,7 +1,7 @@ tw = require('./tailwind.config.js') tw.content = [] -;(tw.corePlugins = { +tw.corePlugins = { container: false, preflight: false, -}), - (module.exports = tw) +} +module.exports = tw From 7ee82fe173fd753646ebda4a2a9a83abe112d904 Mon Sep 17 00:00:00 2001 From: Jeremy Walker Date: Thu, 14 Sep 2023 16:15:50 +0200 Subject: [PATCH 3/5] Tweaks --- app/css/components/tracks-list.css | 0 app/css/minimal_tailwind.css | 6 +++++- 2 files changed, 5 insertions(+), 1 deletion(-) delete mode 100644 app/css/components/tracks-list.css diff --git a/app/css/components/tracks-list.css b/app/css/components/tracks-list.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/app/css/minimal_tailwind.css b/app/css/minimal_tailwind.css index 7762eb4f6e..993954dcc3 100644 --- a/app/css/minimal_tailwind.css +++ b/app/css/minimal_tailwind.css @@ -5,4 +5,8 @@ @tailwind utilities; @tailwind screens; -/* Exercism: DELETE ABOVE THIS */ +/* This line is used as a flag for post-processing */ +/* Do not change it!! */ +.exercism-delete-before-this { + color: red; +} From c0938382a17c755aa728bbcd0888c00409ed08b4 Mon Sep 17 00:00:00 2001 From: Jeremy Walker Date: Thu, 14 Sep 2023 18:25:46 +0200 Subject: [PATCH 4/5] Add async stylesheet loading --- app/css/packs/website.css | 1 - app/helpers/meta_tags_helper.rb | 2 +- app/javascript/utils/react-bootloader.tsx | 38 +++++++++++++++++++++++ app/views/layouts/_head.html.haml | 3 ++ app/views/layouts/application.html.haml | 1 - app/views/layouts/turbo_frame.html.haml | 1 + 6 files changed, 43 insertions(+), 3 deletions(-) diff --git a/app/css/packs/website.css b/app/css/packs/website.css index 643ed9d01f..06c69b65a2 100644 --- a/app/css/packs/website.css +++ b/app/css/packs/website.css @@ -77,7 +77,6 @@ @import "../components/tab"; @import "../components/tab-2"; @import "../components/textual-content"; -@import "../components/tracks-list"; @import "../components/pagination"; @import "../components/modal"; @import "../components/radio"; diff --git a/app/helpers/meta_tags_helper.rb b/app/helpers/meta_tags_helper.rb index 30c0a4b61a..4ec79b2ba1 100644 --- a/app/helpers/meta_tags_helper.rb +++ b/app/helpers/meta_tags_helper.rb @@ -1,6 +1,6 @@ module MetaTagsHelper def require_stylesheet(stylesheet) - content_for :head do + content_for :stylesheets do stylesheet_link_tag stylesheet, "data-turbo-track": "reload" end end diff --git a/app/javascript/utils/react-bootloader.tsx b/app/javascript/utils/react-bootloader.tsx index c37766b626..7ec453020e 100644 --- a/app/javascript/utils/react-bootloader.tsx +++ b/app/javascript/utils/react-bootloader.tsx @@ -49,7 +49,45 @@ if (process.env.BUGSNAG_API_KEY) { } } +// Asynchronously appends a stylesheet to the head and resolves +// the promise when it's finished loading. +let loadStylesheet = function (url) { + return new Promise((resolve, reject) => { + let link = document.createElement('link') + link.type = 'text/css' + link.rel = 'stylesheet' + link.onload = resolve + link.href = url + + document.getElementsByTagName('head')[0].appendChild(link) + }) +} + function initEventListeners() { + // As we have conditional stylesheets per page, we need to extract and + // render those when the frame changes. We want the CSS to load BEFORE + // then HTML renders, so we get any stylesheets downloaded and THEN render + // continnue processing the frame render. + document.addEventListener('turbo:before-frame-render', (e) => { + const hrefs = Array.from(event.detail.newFrame.getElementsByTagName('link')) + .filter((el) => el.getAttribute('rel') == 'stylesheet') + .map((el) => el.getAttribute('href')) + + // If we have no stylesheets, just continue + if (hrefs.length == 0) { + return + } + + // Pause rendering until stylesheets are loaded + e.preventDefault() + + // Load stylesheets in parallel asynchronously + const promises = hrefs.map((href) => loadStylesheet(href)) + + // When they're all loaded, resume + Promise.all(promises).then(() => e.detail.resume()) + }) + // This changes any extra things that need changing from the // turbo frame, such as body class or page title document.addEventListener('turbo:frame-render', (e) => { diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml index a81ade6acb..d5a1fada28 100644 --- a/app/views/layouts/_head.html.haml +++ b/app/views/layouts/_head.html.haml @@ -5,6 +5,9 @@ / Then the main stylesheet = stylesheet_link_tag "website", "data-turbo-track": "reload" +/ Then any page specific stylesheets += yield :stylesheets + / Then other critical fonts %link{ rel: "preload", href: asset_path('poppins-v20-latin-500.woff2'), as: "font", type: "font/woff2", crossorigin: :anonymous } %link{ rel: "preload", href: asset_path('poppins-v20-latin-700.woff2'), as: "font", type: "font/woff2", crossorigin: :anonymous } diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index f22e6ec7a4..d0a1b1768e 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,7 +9,6 @@ = render "layouts/meta_tags" - = yield :head %body{ class: body_class } = render ViewComponents::SiteHeader.new diff --git a/app/views/layouts/turbo_frame.html.haml b/app/views/layouts/turbo_frame.html.haml index 10f86abdbc..7873eb4df8 100644 --- a/app/views/layouts/turbo_frame.html.haml +++ b/app/views/layouts/turbo_frame.html.haml @@ -1,2 +1,3 @@ = turbo_frame_tag "tf-main", "data-turbo-action": :advance do + = yield :stylesheets = yield From e39c45d79f8974fa36d1a4d435c82b2325715442 Mon Sep 17 00:00:00 2001 From: Jeremy Walker Date: Sun, 17 Sep 2023 13:38:11 +0100 Subject: [PATCH 5/5] Update app/views/layouts/application.html.haml --- app/views/layouts/application.html.haml | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index d0a1b1768e..32731eea35 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -9,7 +9,6 @@ = render "layouts/meta_tags" - %body{ class: body_class } = render ViewComponents::SiteHeader.new