From f1e94370d07cc8649b145d80e29a53b1a0dc2db4 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 25 Jul 2024 13:37:48 +0200 Subject: [PATCH 01/44] chore(community): empty page --- client/src/community/index.scss | 86 +----------------- client/src/community/index.tsx | 152 +------------------------------- 2 files changed, 2 insertions(+), 236 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 0caef5661a13..5da81dcbb1d7 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -2,89 +2,5 @@ @use "../ui/base/mdn" as *; main.contribute { - margin-bottom: 3rem; - width: 100%; - - .stats-container { - background-color: var(--background-primary); - color: var(--text-primary); - margin-bottom: 3rem; - width: 100%; - } - - section { - margin: 0 auto; - max-width: 52rem; - padding: 0 1rem; - - &.stats-header { - align-items: center; - display: flex; - flex-direction: column; - padding: 0 0.5rem 2rem; - } - - h1 { - @include mify; - font-size: 3rem; - margin-top: 8rem; - text-align: center; - } - - .quote { - &.owd { - background-color: var(--text-link); - color: var(--background-primary); - - .icon { - background-color: var(--background-primary); - } - } - - &.pab { - background-color: var(--background-primary); - color: var(--text-primary); - - .icon { - background-color: var(--text-primary); - } - } - } - - .stats { - display: grid; - gap: 0.3em; - - @media (max-width: $screen-md) { - grid-template-columns: 1fr 1fr; - } - - @media (max-width: $screen-sm) { - grid-template-columns: 1fr; - } - - @media (min-width: $screen-md) { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - - li { - align-items: center; - background: var(--text-link); - color: var(--background-primary); - display: flex; - flex-direction: column; - padding: 0.5rem 2rem; - - .number { - font-size: 3rem; - } - - .legend { - font-size: 0.8rem; - max-width: 5rem; - text-align: center; - } - } - } - } + // TODO } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index f8b335fee7c9..d59788d51514 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -9,155 +9,5 @@ const STATS = [ ]; export function Contribute() { - return ( -
-
-
-

Community for a better web

-
    - {STATS.map((s) => ( -
  • - {s.number} - {s.legend} -
    • - ))} -
-
-
-
-

Our volunteer community

-

- The power of MDN lies in its vast, vital community of active users and - contributors. Since 2005, approximately 45,000 contributors have - created the documentation we know and love. Together, contributors - have created over 45,000 documents that make up an up-to-date, - comprehensive, and free resource for web developers around the world. - In addition to English-language articles,{" "} - - over 35 volunteers lead translation and localization efforts - {" "} - for Chinese, French, Japanese, Korean, Portuguese, Russian, and - Spanish. With over 200 commits per week, the culture of active - contribution is going strong. And you can be a part of it. -

-

Our partners

-

The Product Advisory Board

-

- MDN collaborates with partners from across the industry, including - standards bodies, browser vendors, and other industry leaders. Since - 2017, these collaborators are formally represented through the{" "} - - Product Advisory Board - {" "} - (PAB). MDN is an influential resource and the PAB helps ensure that - MDN’s influence puts the web first, not any one vendor or - organization, and respects the needs of web developers across the - industry. Each quarter, the PAB meets to discuss problems, prioritize - content creation, and make connections for future collaborations. -

- - MDN has a unique place right now as a vendor-neutral and authoritative - documentation and information resource for web developers. The MDN PAB - has helped to bring feedback from the wider web community (including - standards engineers, web browser makers and open source developers) - into MDN to help keep it strong. As a member of the web community and - a fan of MDN it’s been great to be a part of. - -

Open Web Docs

-

- - Open Web Docs - {" "} - (OWD), an independent open source organization, is one of the most - productive contributors to MDN Web Docs. OWD contributes as part of{" "} - - their mission - {" "} - to support “web platform documentation for the benefit of web - developers & designers worldwide.” The team at OWD has led or - contributed to many projects to improve documentation on MDN. They're - an invaluable partner in the day-to-day work of making MDN. Read more - about OWD’s activities in their{" "} - - 2022 Impact and Transparency Report - {" "} - and get continuous updates on their{" "} - - Mastodon - {" "} - account. -

- - Open Web Docs strongly believes in MDN as critical infrastructure for - the web platform. As a vendor-neutral organization, we are supporting - MDN with an independent editorial voice and with the needs of the - global community of web developers and designers in mind. - -

Licensing

-

- MDN's resources are entirely available under various open source - licenses. Detailed information on licensing for reuse of MDN content, - especially regarding copyrights and attribution, can be found{" "} - - here. - -

-

How to contribute

-

- We are an open community of developers building resources for a better - web, regardless of brand, browser, or platform. Anyone can contribute, - and each person who does makes us stronger. Together we can continue - to drive innovation on the web to serve the greater good. It starts - here, with you. Join us! -

-

- No matter your specific level of expertise, individual strengths, and - interests in coding or writing, there are many ways for you to get - involved and tackle important documentation tasks. -

-

- Are you ready to become an active part of the MDN community but not - sure where to begin? We've got you covered. See our step-by-step - directions for{" "} - - making your first contribution to MDN on GitHub - - . -

-
-
- ); + return
{/* TODO */}
; } From 45cba61a8b4a2d3e6fd9fb62fb2e69d2c32d1d9f Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 26 Jul 2024 11:57:25 +0200 Subject: [PATCH 02/44] wip --- client/config/webpack.config.js | 1 + client/src/app.tsx | 4 +- client/src/community/index.scss | 30 +- client/src/community/index.tsx | 359 ++++++++++++++++++- client/src/community/svg/header-1.svg | 143 ++++++++ client/src/community/svg/header-2.svg | 95 ++++++ client/src/community/svg/header-3.svg | 233 +++++++++++++ client/src/community/svg/header-mobile.svg | 379 +++++++++++++++++++++ client/src/community/svg/video-preview.svg | 37 ++ ssr/webpack.config.js | 1 + 10 files changed, 1272 insertions(+), 10 deletions(-) create mode 100644 client/src/community/svg/header-1.svg create mode 100644 client/src/community/svg/header-2.svg create mode 100644 client/src/community/svg/header-3.svg create mode 100644 client/src/community/svg/header-mobile.svg create mode 100644 client/src/community/svg/video-preview.svg diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index db2139910913..f2bc9dba9103 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -245,6 +245,7 @@ function config(webpackEnv) { plugins: [{ removeViewBox: false }], }, titleProp: true, + throwIfNamespace: false, ref: true, }, }, diff --git a/client/src/app.tsx b/client/src/app.tsx index a64b26a9e056..d5481c2b2ccb 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -22,7 +22,7 @@ import { PageNotFound } from "./page-not-found"; import { Plus } from "./plus"; import { About } from "./about"; import { getCategoryByPathname } from "./utils"; -import { Contribute } from "./community"; +import { Community } from "./community"; import { ContributorSpotlight } from "./contributor-spotlight"; import { useIsServer, usePing } from "./hooks"; @@ -330,7 +330,7 @@ export function App(appProps: HydrationData) { path="/community/*" element={ - + } /> diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 5da81dcbb1d7..027dfc8325a0 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -1,6 +1,34 @@ @use "../ui/vars" as *; @use "../ui/base/mdn" as *; +// Mobile first. + main.contribute { - // TODO + .desktop-only { + display: none; + } + + @media (min-width: $screen-lg) { + .desktop-only { + display: unset; + } + + .mobile-only { + display: none; + } + } + + section.community-header { + display: grid; + grid-template-areas: + "illustration" + "heading" + "description" + "buttons"; + text-align: center; + + .illustration { + grid-area: illustration; + } + } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index d59788d51514..438e0bd12ea2 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,13 +1,358 @@ -import { Quote } from "../ui/molecules/quote"; +import { ReactComponent as Header1 } from "./svg/header-1.svg"; +import { ReactComponent as Header2 } from "./svg/header-2.svg"; +import { ReactComponent as Header3 } from "./svg/header-3.svg"; +import { ReactComponent as MobileHeaderSVG } from "./svg/header-mobile.svg"; +import { ReactComponent as VideoPreviewSVG } from "./svg/video-preview.svg"; + import "./index.scss"; const STATS = [ - { id: 1, number: "2005", legend: "year founded" }, - { id: 2, number: "45k", legend: "total contributors" }, - { id: 3, number: "200", legend: "commits per week" }, - { id: 4, number: ">80M", legend: "page views per month" }, + { id: 1, number: "45k+", legend: "Total contributors" }, + { id: 2, number: "80M+", legend: "Monthly views" }, + { id: 3, number: "200+", legend: "Weekly commits" }, + { id: 4, number: "8", legend: "Language communities" }, ]; +const LOCALE_COUNT = 9; + +export function Community() { + return ( +
+ {/* 1. Header */} +
+

MDN Community

+

Contribute, Collaborate and Shape the Future of the Web Together

+ Start Contributing on GitHub + Join MDN Discord +
+ +
+
+ + + +
+
+ {/* 2. Stats */} +
+
    + {STATS.map((s) => ( +
  • + {s.number} + {s.legend} +
    • + ))} +
+

MDN community powers the web

+

+ MDN’s strength comes from the passion and dedication of our global + community. Since our founding in 2005, we’ve grown into a thriving + network. Together, we’ve created a comprehensive, open, and free + resource that serves web developers across the globe. With volunteers + leading translation efforts in {LOCALE_COUNT} languages, we’re truly + international. +

+
+ {/* 3. Contributors */} +
+
{/* Left column. */}
+
+ {/* Right column, top. */} +

+ We are an open-source community of developers dedicated to building + resources for a better web. Our diverse contributors, including + developers, technical writers, students, educators, designers, and + more, come from various backgrounds and platforms. Anyone can + contribute, and each contribution strengthens our community, driving + innovation and improving this vital resource for developers + worldwide +

+ +
+
+ {/* Right column, bottom. */} +

Contributor spotlight

+
+
+

+ MDN Web Docs has the most up-to-date and accurate information + and the content is presented in an easy-to-understand manner. I + also like that it's available in many languages (very + important!) +

+ + -Yuji +
+ (MDN contributor) + +
+
+

+ MDN Web Docs has the most up-to-date and accurate information + and the content is presented in an easy-to-understand manner. I + also like that it's available in many languages (very + important!) +

+ + -Yuji +
+ (MDN contributor) + +
+
+

+ MDN Web Docs has the most up-to-date and accurate information + and the content is presented in an easy-to-understand manner. I + also like that it's available in many languages (very + important!) +

+ + -Yuji +
+ (MDN contributor) + +
+
+
+
+ {/* 4. Learn how to get started */} +
+

Learn how to get started

+

+ We collaborate on GitHub, our + project's home, on various tasks such as writing and improving + documentation, fixing bugs, and providing review feedback. It starts + here, with you. Want to start right away, but not sure how? Follow our + guide to{" "} + + make your first contribution + + . +

+
+ + + +
+ Watch this video on{" "} + + how to get started with contributing to MDN Web Docs + +
+
+
+ {/* 5. Join us in shaping a better web */} +
+

Join us in shaping a better web

+

+ Become part of this globally cherished group that’s dedicated to + documenting web technologies. Whether you’re an expert or a beginner, + there’s a place for you in our inclusive community. Check out some of + the ways you can contribute and engage. +

+
    +
  • +

    Fix issues

    +

    Submit pull requests to fix reported issues.

    + Squash bugs +
    • +
  • +

    Improve content

    +

    Fix inaccuracies and fill in missing information.

    + Start writing +
    • +
  • +

    Localize content

    +

    + Participate in translating content into one of our supported + languages. +

    + + Find your locale + +
    • +
  • +

    Answer questions

    +

    Share your knowledge and expertise and guide fellow learners.

    + Help on Discord +
    • +
  • +

    Talk about MDN

    +

    Share your stories with us on our Mastodon or X.

    + X{" "} + Mastodon +
    • +
+
+ {/* 6. Get involved */} +
+

Get involved

+

+ If you’re a beginner and looking for ways to contribute, GitHub issues + labeled as “good first issue” and “accepting PR” are a good place to + start. +

+ + + + + + + + + + + + + + + + + + + + +
IssueTitleRepositories
288 + add more details to min-width: auto section +
+ enhancements + good first issues +
+ 		Content Repository
288 + add more details to min-width: auto section +
+ enhancements + good first issues +
+ 		Content Repository
+

+ While working Mozilla spaces, and communities, please adhere to the{" "} + + Mozilla Community Participation Guidelines + + , which promote respect, inclusion, and a harassment-free environment + for all community members. +

+
+ {/* 7. Join the conversation */} +
+

Join the conversation

+
+
+ + + + + + +
+

Chat with us on Discord

+

+ Connect with the community. Engage with domain experts. Help + others learn. +

+ + Join MDN Discord + +
+
+
+ + + + -export function Contribute() { - return
{/* TODO */}
; +
+

Join our Community Calls

+

+ Every month, get exclusive updates from the MDN team. Share your + ideas and contributions. +

+ + RSVP to the next community call + +
+
+
+
+ {/* 8. Celebrating community’s impact */} +
+

Celebrating community’s impact

+

+ Check out the impact of our community’s efforts! These contributions + highlight how volunteers are tirelessly improving web documentation. + From fixing issues to translating content, every contribution makes a + difference. +

+ + + + + + + + + + + + + + + + + + + + +
TitleCategoryLast updated
zh-CN: create Glossary/WCAG + + mdn/translated-content + +
zh-CN: create Glossary/WCAG + + mdn/translated-content + + 16 hours ago
+
+ {/* 9. Licensing and reuse */} +
+ MDN's resources are freely available under various open-source licenses. + For detailed information on reusing MDN content, check out our{" "} + + Attribution and Copyright Licensing + {" "} + page. +
+
+ ); } diff --git a/client/src/community/svg/header-1.svg b/client/src/community/svg/header-1.svg new file mode 100644 index 000000000000..5e9bcaa4db33 --- /dev/null +++ b/client/src/community/svg/header-1.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/community/svg/header-2.svg b/client/src/community/svg/header-2.svg new file mode 100644 index 000000000000..8ec31b8b86f4 --- /dev/null +++ b/client/src/community/svg/header-2.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/community/svg/header-3.svg b/client/src/community/svg/header-3.svg new file mode 100644 index 000000000000..8e9562855ab8 --- /dev/null +++ b/client/src/community/svg/header-3.svg @@ -0,0 +1,233 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/community/svg/header-mobile.svg b/client/src/community/svg/header-mobile.svg new file mode 100644 index 000000000000..1dd6d81a2137 --- /dev/null +++ b/client/src/community/svg/header-mobile.svg @@ -0,0 +1,379 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/svg/video-preview.svg b/client/src/community/svg/video-preview.svg new file mode 100644 index 000000000000..c4dc34392f8a --- /dev/null +++ b/client/src/community/svg/video-preview.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ssr/webpack.config.js b/ssr/webpack.config.js index 64a4195de08d..d0dd5de9c0ee 100644 --- a/ssr/webpack.config.js +++ b/ssr/webpack.config.js @@ -51,6 +51,7 @@ const config = { plugins: [{ removeViewBox: false }], }, titleProp: true, + throwIfNamespace: false, ref: true, }, }, From 22b9eee8c3ff59ea7ed369b29e454a56adc87ff7 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Mon, 29 Jul 2024 14:46:04 +0200 Subject: [PATCH 03/44] mobile design --- client/src/assets/community/globe.svg | 3 + client/src/assets/community/quote.svg | 4 + client/src/community/index.scss | 310 ++++++++++++++- client/src/community/index.tsx | 369 ++++++++++++------ client/src/community/svg/chat.svg | 5 + client/src/community/svg/community-calls.svg | 4 + client/src/community/svg/header-1.svg | 176 ++------- client/src/community/svg/header-2.svg | 131 ++----- client/src/community/svg/header-3.svg | 284 +++----------- .../src/community/svg/header-background.svg | 57 +++ client/src/community/svg/tape.svg | 17 + 11 files changed, 767 insertions(+), 593 deletions(-) create mode 100644 client/src/assets/community/globe.svg create mode 100644 client/src/assets/community/quote.svg create mode 100644 client/src/community/svg/chat.svg create mode 100644 client/src/community/svg/community-calls.svg create mode 100644 client/src/community/svg/header-background.svg create mode 100644 client/src/community/svg/tape.svg diff --git a/client/src/assets/community/globe.svg b/client/src/assets/community/globe.svg new file mode 100644 index 000000000000..2da02d5cbe36 --- /dev/null +++ b/client/src/assets/community/globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/community/quote.svg b/client/src/assets/community/quote.svg new file mode 100644 index 000000000000..5a6b693f6905 --- /dev/null +++ b/client/src/assets/community/quote.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 027dfc8325a0..5de9c215ef05 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -3,7 +3,74 @@ // Mobile first. -main.contribute { +main.community { + --light-bg: var(--background-primary); + --dark-bg: var(--observatory-bg); // FIXME + background-color: var(--dark-bg); + margin-top: 3rem; + + h2 { + font-size: 1.5rem; + text-wrap: balance; + } + + .actions { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } + + a[href]:not(.btn) { + color: #000; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + .btn { + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 400; + padding: 0.5em; // sic! + text-decoration: none; + + &.primary { + background-color: #000; + color: #fff; + } + + &.secondary { + border: 1px solid #000; + color: #000; + } + } + + table { + border-radius: 0.5rem; + background: #fff; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + + tr:nth-of-type(odd) { + background: var(--dark-bg); + } + + th, + td { + border: none; + } + + th { + padding: 1.5rem; + } + + td { + padding: 0.5rem 1.5rem; + } + } + .desktop-only { display: none; } @@ -18,6 +85,12 @@ main.contribute { } } + > section { + margin-top: 4rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + } + section.community-header { display: grid; grid-template-areas: @@ -25,10 +98,245 @@ main.contribute { "heading" "description" "buttons"; + margin-top: 1rem; text-align: center; + > h1 { + margin: 0; + } + + > p { + margin-top: 1.5rem; + margin-bottom: 1rem; + text-wrap: balance; + } + + .btn { + font-size: 1.2rem; + } + .illustration { grid-area: illustration; } } + + section.community-stats { + background-color: #fff; + border-radius: 1rem; + padding: 1.5rem 3rem; + + > .stats { + --border-width: 0.25rem; + --size: 4rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + margin-top: calc(-1 * var(--size) + 2 * var(--border-width)); + + .number { + background-color: rgba(0, 210, 48, 1); + border: 0.25rem solid #eee; + border-radius: 50%; + display: block; + //font-size: 1rem; + font-weight: 500; + height: var(--size); + text-align: center; + margin: 0 auto; + line-height: calc(var(--size) - 2 * var(--border-width)); + width: var(--size); + } + .legend { + display: block; + font-size: 0.875rem; + text-align: center; + } + } + + &::after { + content: url("../assets/community/globe.svg"); + display: block; + position: relative; + margin-left: auto; + margin-right: -3.75rem; + margin-bottom: -2.25rem; + height: 6rem; + width: 6rem; + } + } + + section.community-contributors { + .actions { + flex-direction: row; + } + + section.contributor-quotes { + .quotes { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1rem; + overflow-y: scroll; + width: 100%; + + blockquote { + background-color: #fff; + border: 0; + border-radius: 0.5rem; + padding: 2rem 3rem; + flex: 20rem; + flex-shrink: 0; + + > p { + font-style: italic; + font-variation-settings: "slnt" -10; + + &::before { + content: url("../assets/community/quote.svg"); + display: block; + position: relative; + margin-bottom: -2rem; + margin-left: -2rem; + height: auto; + width: 1rem; + } + &::after { + content: url("../assets/community/quote.svg"); + display: block; + position: relative; + margin-left: calc(100% + 1rem); + margin-top: -2rem; + height: auto; + transform: rotate(180deg); + width: 1rem; + } + } + + > footer { + margin-top: 2rem; + } + } + } + } + } + + section.join-us { + background-color: #fff; + padding-top: 3rem; + + > h2 { + margin-top: 0; + } + + .notes { + display: flex; + flex-direction: row; + gap: 1rem; + overflow-x: scroll; + padding-top: 1rem; + width: 100%; + + .note { + position: relative; + padding-top: 0.5rem; // Avoid that sticky part overflows. + + .note-inner { + align-items: flex-start; + display: flex; + flex-direction: column; + flex-shrink: 0; + background-color: #00d230; + box-shadow: 8px 8px 4px 0px rgba(103, 158, 116, 0.5); + height: auto; + min-width: 12.5rem; + padding: 1rem; + padding-top: 1.5rem; + } + + &::before { + content: ""; + display: block; + opacity: 0.8; + background: #f9f9fb; + box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15); + left: 50%; + transform: translate(-50%); + top: -0.5rem; + position: absolute; + height: 1.5rem; + width: 4.5rem; + } + + h3 { + font-size: 1rem; + font-weight: bold; + margin-top: 0rem; + margin-bottom: 0.5rem; + } + + p { + flex-grow: 1; + margin: 0.5rem 0; + text-wrap: balance; + } + + .btn { + align-self: center; + align-content: center; + justify-content: center; + margin-top: 0.5rem; + text-wrap: nowrap; + } + } + } + } + + section.community-get-involved, + section.celebrate { + .labels { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + .label { + background-color: var(--background-primary); + padding: 0.5rem; + } + } + + section.contact { + .channels { + display: flex; + flex-direction: column; + gap: 2rem; + } + + .channels > figure { + background-color: var(--light-bg); + padding: 2rem; + + display: flex; + flex-direction: row; + gap: 1.5rem; + + svg { + align-self: flex-start; + height: auto; + width: 4.5rem; + } + + figcaption { + h3 { + font-size: 1.5rem; + font-weight: 500; + margin-top: 0; + margin-bottom: 0; + } + + p { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } + } + } + } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 438e0bd12ea2..3a07c68998c6 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -3,6 +3,8 @@ import { ReactComponent as Header2 } from "./svg/header-2.svg"; import { ReactComponent as Header3 } from "./svg/header-3.svg"; import { ReactComponent as MobileHeaderSVG } from "./svg/header-mobile.svg"; import { ReactComponent as VideoPreviewSVG } from "./svg/video-preview.svg"; +import { ReactComponent as ChatSVG } from "./svg/chat.svg"; +import { ReactComponent as CommunityCallsSVG } from "./svg/community-calls.svg"; import "./index.scss"; @@ -14,15 +16,164 @@ const STATS = [ ]; const LOCALE_COUNT = 9; +const CONTRIBUTE_ACTIONS = [ + { + title: "Fix issues", + description: "Submit pull requests to fix reported issues.", + actions: [ + { + url: "https://github.comhttps://github.com/mdn/content/issues", + label: "Squash bugs", + }, + ], + }, + { + title: "Improve content", + description: "Fix inaccuracies and fill in missing information.", + actions: [ + { + url: "https://github.comhttps://github.com/mdn/content/#readme", + label: "Start writing", + }, + ], + }, + { + title: "Localize content", + description: + "Participate in translating content into one of our supported languages.", + actions: [ + { + url: "https://github.comhttps://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales", + label: "Find your locale", + }, + ], + }, + { + title: "Answer questions", + description: + "Share your knowledge and expertise and guide fellow learners.", + actions: [ + { + url: "https://github.comhttps://discord.gg/3MKbs99V4F", + label: "Help on Discord", + }, + ], + }, + { + title: "Talk about MDN", + description: "Share your stories with us on our Mastodon or X.", + actions: [ + { + url: "https://github.comhttps://twitter.com/mozdevnet", + label: "X", + }, + { + url: "https://github.comhttps://mozilla.social/@mdn", + label: "Mastodon", + }, + ], + }, +]; + +const ISSUES = [ + { + title: "Wrong explanation of the example inside Inline formatting context", + url: "https://github.com/mdn/content/issues/29035", + labels: ["Content:CSS", "good first issue"], + }, + { + title: "Document false negatives for navigator.onLine property", + url: "https://github.com/mdn/content/issues/30402", + labels: ["accepting PR", "Content:WebAPI", "effort: medium"], + }, + { + title: "Event not called for modification on sessionStorage", + url: "https://github.com/mdn/content/issues/30598", + labels: [ + "accepting PR", + "Content:WebAPI", + "effort: small", + "goal: accuracy", + ], + }, + { + title: "SharedArrayBuffer is not usable as a source data parameter.", + url: "https://github.com/mdn/content/issues/30749", + labels: ["accepting PR", "area: WebGL", "Content:WebAPI", "goal: accuracy"], + }, + { + title: + "update Notifications API content to better explain persistent events and not persistent events", + url: "https://github.com/mdn/content/issues/30931", + labels: [ + "accepting PR", + "Content:WebAPI", + "effort: large", + "goal: clarity", + ], + }, + { + title: "Update usage for {{AvailableInWorkers}}", + url: "https://github.com/mdn/content/issues/31675", + labels: ["accepting PR", "area: Workers", "Content:WebAPI", "MDN:Project"], + }, + { + title: 'C# WebSocket server example: Incompatible type for "offset"', + url: "https://github.com/mdn/content/issues/31774", + labels: [ + "area: WebSockets", + "Content:WebAPI", + "good first issue", + "help wanted", + ], + }, + { + title: + "Mention that offsetWidth value is integer and getBoundingClientRect().width is a decimal point number", + url: "https://github.com/mdn/content/issues/31779", + labels: ["area: DOM/CSSOM", "Content:WebAPI", "good first issue"], + }, + { + title: "cancelAnimationFrame using mismatched time values in sample", + url: "https://github.com/mdn/content/issues/31840", + labels: [ + "accepting PR", + "Content:WebAPI", + "effort: small", + "goal: accuracy", + ], + }, + { + title: "Fetch Basic Sample Code 404", + url: "https://github.com/mdn/content/issues/31841", + labels: [ + "accepting PR", + "area: Fetch/XMLHttpRequest", + "Content:WebAPI", + "effort: small", + "goal: accuracy", + ], + }, +]; + export function Community() { return ( -
+
{/* 1. Header */}

MDN Community

Contribute, Collaborate and Shape the Future of the Web Together

- Start Contributing on GitHub - Join MDN Discord +
@@ -54,9 +205,12 @@ export function Community() {
{/* 3. Contributors */}
-
{/* Left column. */}
+
+ {/* Left column. */} +
{/* Right column, top. */} +

Meet our Contributors

We are an open-source community of developers dedicated to building resources for a better web. Our diverse contributors, including @@ -67,18 +221,21 @@ export function Community() { worldwide

-
+
{/* Right column, bottom. */}

Contributor spotlight

@@ -89,11 +246,11 @@ export function Community() { also like that it's available in many languages (very important!)

- +
-Yuji
(MDN contributor) - +

@@ -102,11 +259,11 @@ export function Community() { also like that it's available in many languages (very important!)

- +
-Yuji
(MDN contributor) - +

@@ -115,11 +272,11 @@ export function Community() { also like that it's available in many languages (very important!)

- +
-Yuji
(MDN contributor) - +
@@ -160,37 +317,19 @@ export function Community() { the ways you can contribute and engage.

    -
  • -

    Fix issues

    -

    Submit pull requests to fix reported issues.

    - Squash bugs -
    • -
  • -

    Improve content

    -

    Fix inaccuracies and fill in missing information.

    - Start writing -
    • -
  • -

    Localize content

    -

    - Participate in translating content into one of our supported - languages. -

    - - Find your locale - -
    • -
  • -

    Answer questions

    -

    Share your knowledge and expertise and guide fellow learners.

    - Help on Discord -
    • -
  • -

    Talk about MDN

    -

    Share your stories with us on our Mastodon or X.

    - X{" "} - Mastodon -
    • + {CONTRIBUTE_ACTIONS.map(({ title, description, actions }) => ( +
  • +
    +

    {title}

    +

    {description}

    + {actions.map(({ url, label }) => ( + + {label} + + ))} +
    +
    • + ))}
{/* 6. Get involved */} @@ -204,36 +343,38 @@ export function Community() { - - - - - - - - - - - - + {ISSUES.map((issue) => ( + + + + ))}
Issue TitleRepositories
288 - add more details to min-width: auto section -
- enhancements - good first issues -
- 		Content Repository
288 - add more details to min-width: auto section -
- enhancements - good first issues -
- 		Content Repository
+ + {issue.title} + +
+ {issue.labels + .filter((label) => + ["good first issue", "accepting PR"].includes(label) + ) + .map((label) => ( + {label} + ))} +
+
+

+ + View all issues + +

While working Mozilla spaces, and communities, please adhere to the{" "} @@ -244,27 +385,11 @@ export function Community() {

{/* 7. Join the conversation */} -
+

Join the conversation

- - - - - +

Chat with us on Discord

@@ -272,25 +397,16 @@ export function Community() { Connect with the community. Engage with domain experts. Help others learn.

- + Join MDN Discord
- - - - +

Join our Community Calls

@@ -298,7 +414,10 @@ export function Community() { Every month, get exclusive updates from the MDN team. Share your ideas and contributions.

- + RSVP to the next community call
@@ -318,29 +437,37 @@ export function Community() { Title - Category - Last updated + Repositories - - zh-CN: create Glossary/WCAG - - - mdn/translated-content - - - - - - zh-CN: create Glossary/WCAG - - - mdn/translated-content - - - 16 hours ago - + {ISSUES.map((issue) => ( + + + + {issue.title} + +
+ {issue.labels + .filter((label) => + ["good first issue", "accepting PR"].includes(label) + ) + .map((label) => ( + {label} + ))} +
+ + + + Content Repository + + + + ))}
diff --git a/client/src/community/svg/chat.svg b/client/src/community/svg/chat.svg new file mode 100644 index 000000000000..6b978e647f85 --- /dev/null +++ b/client/src/community/svg/chat.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/community/svg/community-calls.svg b/client/src/community/svg/community-calls.svg new file mode 100644 index 000000000000..65acf2bc0072 --- /dev/null +++ b/client/src/community/svg/community-calls.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/community/svg/header-1.svg b/client/src/community/svg/header-1.svg index 5e9bcaa4db33..6284c9993e4d 100644 --- a/client/src/community/svg/header-1.svg +++ b/client/src/community/svg/header-1.svg @@ -1,143 +1,33 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/svg/header-2.svg b/client/src/community/svg/header-2.svg index 8ec31b8b86f4..20a785b67e75 100644 --- a/client/src/community/svg/header-2.svg +++ b/client/src/community/svg/header-2.svg @@ -1,95 +1,36 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/svg/header-3.svg b/client/src/community/svg/header-3.svg index 8e9562855ab8..849430dc6055 100644 --- a/client/src/community/svg/header-3.svg +++ b/client/src/community/svg/header-3.svg @@ -1,233 +1,51 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/svg/header-background.svg b/client/src/community/svg/header-background.svg new file mode 100644 index 000000000000..99181214ad87 --- /dev/null +++ b/client/src/community/svg/header-background.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/svg/tape.svg b/client/src/community/svg/tape.svg new file mode 100644 index 000000000000..72da27ae2184 --- /dev/null +++ b/client/src/community/svg/tape.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From a23c2e573d1e9f41c6b8666f72ebbaa77de2881a Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 30 Jul 2024 12:49:41 +0200 Subject: [PATCH 04/44] chore(community): add hero bg --- client/src/assets/community/hero-bg.svg | 57 +++++++++++++++++++++++ client/src/community/index.scss | 60 ++++++++++++++++++++++--- client/src/community/index.tsx | 8 ++-- 3 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 client/src/assets/community/hero-bg.svg diff --git a/client/src/assets/community/hero-bg.svg b/client/src/assets/community/hero-bg.svg new file mode 100644 index 000000000000..99181214ad87 --- /dev/null +++ b/client/src/assets/community/hero-bg.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 5de9c215ef05..ba5ba644c0e8 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -2,12 +2,14 @@ @use "../ui/base/mdn" as *; // Mobile first. +$desktop-min-width: $screen-sm; main.community { --light-bg: var(--background-primary); --dark-bg: var(--observatory-bg); // FIXME background-color: var(--dark-bg); margin-top: 3rem; + padding-bottom: 3rem; h2 { font-size: 1.5rem; @@ -18,6 +20,7 @@ main.community { display: flex; flex-direction: column; align-items: center; + justify-content: center; gap: 1rem; } @@ -75,9 +78,13 @@ main.community { display: none; } - @media (min-width: $screen-lg) { + .mobile-only { + display: contents; + } + + @media (min-width: $desktop-min-width) { .desktop-only { - display: unset; + display: contents; } .mobile-only { @@ -91,21 +98,23 @@ main.community { padding-right: 0.75rem; } - section.community-header { + section.hero { display: grid; grid-template-areas: "illustration" "heading" - "description" - "buttons"; + "copy" + "actions"; margin-top: 1rem; text-align: center; > h1 { + grid-area: heading; margin: 0; } > p { + grid-area: copy; margin-top: 1.5rem; margin-bottom: 1rem; text-wrap: balance; @@ -115,9 +124,50 @@ main.community { font-size: 1.2rem; } + .actions { + grid-area: actions; + flex-wrap: wrap; + text-wrap: nowrap; + } + .illustration { grid-area: illustration; } + + @media (min-width: $desktop-min-width) { + background-image: url("../assets/community/hero-bg.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: auto 25rem; + column-gap: 2rem; + + grid-template-areas: + "top-left . ." + "top-left heading . " + ". copy ." + "bottom-left actions bottom-right" + "bottom-left . bottom-right"; + justify-content: space-around; + margin: 0 auto; + max-width: 78rem; + + .actions { + flex-direction: row; + justify-content: center; + } + + .top-left { + grid-area: top-left; + } + + .bottom-left { + grid-area: bottom-left; + } + + .bottom-right { + grid-area: bottom-right; + } + } } section.community-stats { diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 3a07c68998c6..0f4a167f19d5 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -160,7 +160,7 @@ export function Community() { return (
{/* 1. Header */} -
+

MDN Community

Contribute, Collaborate and Shape the Future of the Web Together

@@ -178,9 +178,9 @@ export function Community() {
- - - + + +
{/* 2. Stats */} From bb53fe93e057186f7a2d4fc73d5713b89f72a529 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 31 Jul 2024 17:00:22 +0200 Subject: [PATCH 05/44] chore: progress --- .../src/assets/community/contributors-bg.svg | 9 +++ client/src/community/index.scss | 74 +++++++++++++++++-- client/src/community/index.tsx | 1 + 3 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 client/src/assets/community/contributors-bg.svg diff --git a/client/src/assets/community/contributors-bg.svg b/client/src/assets/community/contributors-bg.svg new file mode 100644 index 000000000000..570da5119536 --- /dev/null +++ b/client/src/assets/community/contributors-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/community/index.scss b/client/src/community/index.scss index ba5ba644c0e8..1a963a767636 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -2,13 +2,14 @@ @use "../ui/base/mdn" as *; // Mobile first. -$desktop-min-width: $screen-sm; +$desktop-min-width: $screen-md; +$desktop-content-width: 78rem; main.community { --light-bg: var(--background-primary); --dark-bg: var(--observatory-bg); // FIXME background-color: var(--dark-bg); - margin-top: 3rem; + padding-top: 3rem; padding-bottom: 3rem; h2 { @@ -78,13 +79,9 @@ main.community { display: none; } - .mobile-only { - display: contents; - } - @media (min-width: $desktop-min-width) { .desktop-only { - display: contents; + display: unset; } .mobile-only { @@ -96,6 +93,12 @@ main.community { margin-top: 4rem; padding-left: 0.75rem; padding-right: 0.75rem; + + @media (min-width: $desktop-min-width) { + margin-left: auto; + margin-right: auto; + max-width: $desktop-content-width; + } } section.hero { @@ -132,6 +135,10 @@ main.community { .illustration { grid-area: illustration; + + > svg { + margin: 0 auto; + } } @media (min-width: $desktop-min-width) { @@ -149,7 +156,6 @@ main.community { "bottom-left . bottom-right"; justify-content: space-around; margin: 0 auto; - max-width: 78rem; .actions { flex-direction: row; @@ -201,6 +207,11 @@ main.community { font-size: 0.875rem; text-align: center; } + + @media (min-width: $desktop-min-width) { + flex-direction: row; + justify-content: space-around; + } } &::after { @@ -268,6 +279,53 @@ main.community { } } } + + @media (min-width: $desktop-min-width) { + display: grid; + grid-template-areas: + "contributors copy" + "contributors quotes"; + grid-template-columns: 2fr 1fr; + + > section.contributors { + grid-area: contributors; + + background-image: url("../assets/community/contributors-bg.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 100%; + } + + > section.meet-our-contributors { + grid-area: copy; + } + + > section.contributor-quotes { + grid-area: quotes; + } + } + } + + section.get-started { + display: grid; + grid-template-areas: "header" "copy" "figure"; + + > h2 { + grid-area: header; + } + + > p { + grid-area: copy; + } + + > figure { + grid-area: figure; + } + + @media (min-width: $desktop-min-width) { + grid-template-areas: "header . video" "copy . figure"; + grid-template-columns: 2fr 1fr 2fr; + } } section.join-us { diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 0f4a167f19d5..ba5c8cb2b552 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -207,6 +207,7 @@ export function Community() {
{/* Left column. */} + Lorem ipsum
{/* Right column, top. */} From 43524c726c47bec8ea33bd01a8822191f087bbdf Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 1 Aug 2024 00:41:43 +0200 Subject: [PATCH 06/44] chore(community): add Contributors circles --- .../src/assets/community/contributors-bg.svg | 57 ++++- client/src/community/index.scss | 204 ++++++++++++++---- client/src/community/index.tsx | 181 ++++++++++++---- 3 files changed, 355 insertions(+), 87 deletions(-) diff --git a/client/src/assets/community/contributors-bg.svg b/client/src/assets/community/contributors-bg.svg index 570da5119536..a7b9d028a0db 100644 --- a/client/src/assets/community/contributors-bg.svg +++ b/client/src/assets/community/contributors-bg.svg @@ -1,9 +1,50 @@ - - - - - - - - + + + + + + + + + + diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 1a963a767636..236b28187dc7 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -6,14 +6,16 @@ $desktop-min-width: $screen-md; $desktop-content-width: 78rem; main.community { - --light-bg: var(--background-primary); - --dark-bg: var(--observatory-bg); // FIXME - background-color: var(--dark-bg); + --primary-bg: var(--observatory-bg); // FIXME + --secondary-bg: var(--background-primary); + + background-color: var(--primary-bg); padding-top: 3rem; padding-bottom: 3rem; h2 { font-size: 1.5rem; + margin-top: unset; text-wrap: balance; } @@ -26,7 +28,7 @@ main.community { } a[href]:not(.btn) { - color: #000; + color: var(--text-primary); text-decoration: underline; &:hover { @@ -42,23 +44,32 @@ main.community { text-decoration: none; &.primary { - background-color: #000; - color: #fff; + background-color: var(--button-primary-default); + color: var(--secondary-bg); + + &:hover { + text-decoration: underline; + } } &.secondary { - border: 1px solid #000; - color: #000; + background-color: var(--primary-bg); + border: 1px solid var(--text-primary); + color: var(--text-primary); + + &:hover { + text-decoration: underline; + } } } table { border-radius: 0.5rem; - background: #fff; + background: var(--secondary-bg); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); tr:nth-of-type(odd) { - background: var(--dark-bg); + background: var(--primary-bg); } th, @@ -177,9 +188,11 @@ main.community { } section.community-stats { - background-color: #fff; + background-color: var(--secondary-bg); border-radius: 1rem; padding: 1.5rem 3rem; + text-wrap: balance; + text-align: center; > .stats { --border-width: 0.25rem; @@ -209,21 +222,38 @@ main.community { } @media (min-width: $desktop-min-width) { + --size: 7.5rem; flex-direction: row; justify-content: space-around; + + .number { + font-size: 1.75rem; + } + + .legend { + font-size: 1rem; + } } } + h2 { + margin-top: 4rem; + } + &::after { content: url("../assets/community/globe.svg"); display: block; position: relative; margin-left: auto; - margin-right: -3.75rem; - margin-bottom: -2.25rem; + margin-right: -3.5rem; + margin-bottom: -2rem; height: 6rem; width: 6rem; } + + @media (min-width: $desktop-min-width) { + margin-top: 10rem; + } } section.community-contributors { @@ -241,7 +271,7 @@ main.community { width: 100%; blockquote { - background-color: #fff; + background-color: var(--secondary-bg); border: 0; border-radius: 0.5rem; padding: 2rem 3rem; @@ -286,22 +316,103 @@ main.community { "contributors copy" "contributors quotes"; grid-template-columns: 2fr 1fr; + gap: 4rem; > section.contributors { grid-area: contributors; - background-image: url("../assets/community/contributors-bg.svg"); background-position: center; background-repeat: no-repeat; - background-size: 100%; + background-size: calc(100% - 10rem); + position: relative; + height: 60rem; + width: 100%; + + .contributor { + position: absolute; + top: 50%; + right: 0%; + background-color: var(--primary-bg); + display: block; + padding: 1rem; + text-align: center; + + > * { + display: block; + margin: 0 auto; + } + + img { + border: 6px solid #fff; + border-radius: 100%; + width: 5rem; + } + + figcaption { + max-width: 10rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .username { + display: block; + font-weight: 500; + } + + @function transform-circle($radius, $degree) { + @return translate(-4rem, -4rem) translateX(50%) rotate($degree) + translate(-$radius) rotate(-$degree) translateY(0%); + } + + /* stylelint-disable function-no-unknown */ + + // Outer circle, top part. + &:nth-child(1) { + // eslint-ignore + transform: transform-circle(27rem, 90deg); + } + &:nth-child(2) { + transform: transform-circle(27rem, 54deg); + } + &:nth-child(3) { + transform: transform-circle(27rem, 18deg); + } + &:nth-child(4) { + transform: transform-circle(27rem, -18deg); + } + &:nth-child(5) { + transform: transform-circle(27rem, -54deg); + } + &:nth-child(6) { + transform: transform-circle(27rem, -90deg); + } + // Inner circle. + &:nth-child(7) { + transform: transform-circle(14rem, 90deg); + } + &:nth-child(8) { + transform: transform-circle(14rem, 30deg); + } + &:nth-child(9) { + transform: transform-circle(14rem, -30deg); + } + &:nth-child(10) { + transform: transform-circle(14rem, -90deg); + } + + /* stylelint-enable function-no-unknown */ + } } > section.meet-our-contributors { grid-area: copy; + align-self: flex-start; } > section.contributor-quotes { grid-area: quotes; + align-self: flex-end; } } } @@ -323,13 +434,14 @@ main.community { } @media (min-width: $desktop-min-width) { - grid-template-areas: "header . video" "copy . figure"; - grid-template-columns: 2fr 1fr 2fr; + grid-template-areas: "header figure" "copy figure"; + + column-gap: 4rem; } } section.join-us { - background-color: #fff; + background-color: var(--secondary-bg); padding-top: 3rem; > h2 { @@ -397,6 +509,11 @@ main.community { } } } + + @media (min-width: $desktop-min-width) { + padding: 2rem calc((100% - $desktop-content-width) / 2); + max-width: unset; + } } section.community-get-involved, @@ -416,35 +533,40 @@ main.community { display: flex; flex-direction: column; gap: 2rem; - } - - .channels > figure { - background-color: var(--light-bg); - padding: 2rem; - display: flex; - flex-direction: row; - gap: 1.5rem; + > figure { + background-color: var(--secondary-bg); + padding: 2rem; - svg { - align-self: flex-start; - height: auto; - width: 4.5rem; - } + display: flex; + flex-direction: row; + gap: 1.5rem; - figcaption { - h3 { - font-size: 1.5rem; - font-weight: 500; - margin-top: 0; - margin-bottom: 0; + svg { + align-self: flex-start; + height: auto; + width: 4.5rem; } - p { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + figcaption { + h3 { + font-size: 1.5rem; + font-weight: 500; + margin-top: 0; + margin-bottom: 0; + } + + p { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } } } + + @media (min-width: $desktop-min-width) { + flex-direction: row; + column-gap: 20%; + } } } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index ba5c8cb2b552..99da1b8d5489 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,6 +1,6 @@ -import { ReactComponent as Header1 } from "./svg/header-1.svg"; -import { ReactComponent as Header2 } from "./svg/header-2.svg"; -import { ReactComponent as Header3 } from "./svg/header-3.svg"; +import { ReactComponent as DesktopHeaderTopLeftSVG } from "./svg/header-1.svg"; +import { ReactComponent as DesktopHeaderBottomLeftSVG } from "./svg/header-2.svg"; +import { ReactComponent as DesktopHeaderBottomRightSVG } from "./svg/header-3.svg"; import { ReactComponent as MobileHeaderSVG } from "./svg/header-mobile.svg"; import { ReactComponent as VideoPreviewSVG } from "./svg/video-preview.svg"; import { ReactComponent as ChatSVG } from "./svg/chat.svg"; @@ -16,13 +16,71 @@ const STATS = [ ]; const LOCALE_COUNT = 9; +const CONTRIBUTORS: { github_id: number; org?: string; user: string }[] = [ + { + github_id: 43580235, + org: "@mozilla", + user: "bsmth", + }, + { + github_id: 47647, + user: "chrisdavidmills", + org: "Mills Docs Limited", + }, + { + github_id: 349114, + user: "Elchi3", + org: "@openwebdocs", + }, + { + github_id: 69888, + user: "estelle", + org: "Standardista", + }, + { + github_id: 5368500, + user: "hamishwillee", + org: "Jenosam Pty Ltd", + }, + { + github_id: 55398995, + user: "Josh-Cena", + org: "Yale University Very Very Very Long", + }, + { + github_id: 11516302, + user: "mfuji09", + }, + { + github_id: 87750369, + user: "OnkarRuikar", + }, + { + github_id: 5179191, + user: "queengooborg", + }, + { + github_id: 194984, + user: "sideshowbarker", + }, + { + github_id: 1466293, + user: "teoli2003", + }, + { + github_id: 432915, + user: "wbamberg", + org: "@openwebdocs", + }, +]; + const CONTRIBUTE_ACTIONS = [ { title: "Fix issues", description: "Submit pull requests to fix reported issues.", actions: [ { - url: "https://github.comhttps://github.com/mdn/content/issues", + url: "https://github.com/mdn/content/issues", label: "Squash bugs", }, ], @@ -32,7 +90,7 @@ const CONTRIBUTE_ACTIONS = [ description: "Fix inaccuracies and fill in missing information.", actions: [ { - url: "https://github.comhttps://github.com/mdn/content/#readme", + url: "https://github.com/mdn/content/#readme", label: "Start writing", }, ], @@ -43,7 +101,7 @@ const CONTRIBUTE_ACTIONS = [ "Participate in translating content into one of our supported languages.", actions: [ { - url: "https://github.comhttps://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales", + url: "https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales", label: "Find your locale", }, ], @@ -54,7 +112,7 @@ const CONTRIBUTE_ACTIONS = [ "Share your knowledge and expertise and guide fellow learners.", actions: [ { - url: "https://github.comhttps://discord.gg/3MKbs99V4F", + url: "https://discord.gg/3MKbs99V4F", label: "Help on Discord", }, ], @@ -64,11 +122,11 @@ const CONTRIBUTE_ACTIONS = [ description: "Share your stories with us on our Mastodon or X.", actions: [ { - url: "https://github.comhttps://twitter.com/mozdevnet", + url: "https://twitter.com/mozdevnet", label: "X", }, { - url: "https://github.comhttps://mozilla.social/@mdn", + url: "https://mozilla.social/@mdn", label: "Mastodon", }, ], @@ -174,14 +232,19 @@ export function Community() { Join MDN Discord -
- -
-
- - - -
+ + + +
{/* 2. Stats */}
@@ -207,7 +270,28 @@ export function Community() {
{/* Left column. */} - Lorem ipsum + {CONTRIBUTORS.slice(0, 10).map((contributor, index) => ( +
+ + +
+ + {contributor.user} + + {contributor.org && ( + {contributor.org} + )} +
+
+ ))}
{/* Right column, top. */} @@ -242,39 +326,58 @@ export function Community() {

- MDN Web Docs has the most up-to-date and accurate information - and the content is presented in an easy-to-understand manner. I - also like that it's available in many languages (very - important!) + There are millions of web developers in China, and many of them + begin their developer journey at MDN Web Docs. Contributing to + MDN Web Docs is an excellent way to help people who are starting + out.

- MDN Web Docs has the most up-to-date and accurate information - and the content is presented in an easy-to-understand manner. I - also like that it's available in many languages (very - important!) + Working with the kind and knowledgeable teams on MDN gives me + the opportunity to learn, be part of a passionate community, and + help improve an extraordinary resource.

- MDN Web Docs has the most up-to-date and accurate information - and the content is presented in an easy-to-understand manner. I - also like that it's available in many languages (very - important!) + I find the MDN Web Docs team welcoming and very experienced. + Here, I get to learn new stuff. This is the easiest place for + anybody to start their open source journey!

@@ -323,11 +426,13 @@ export function Community() {

{title}

{description}

- {actions.map(({ url, label }) => ( - - {label} - - ))} +
+ {actions.map(({ url, label }) => ( + + {label} + + ))} +
))} From fda2acf4a3355cc20c5c93e32a78e4dd015ce1a4 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Thu, 1 Aug 2024 15:39:59 +0200 Subject: [PATCH 07/44] chore(community): wip --- client/src/assets/community/contribute-bg.svg | 4 ++ .../src/assets/community/contributors-bg.svg | 52 ++---------------- client/src/community/index.scss | 53 ++++++++++++++++--- client/src/community/index.tsx | 6 ++- client/src/community/svg/video-preview.svg | 37 ------------- .../src/community/svg/video-preview_dark.svg | 1 + .../src/community/svg/video-preview_light.svg | 1 + 7 files changed, 60 insertions(+), 94 deletions(-) create mode 100644 client/src/assets/community/contribute-bg.svg delete mode 100644 client/src/community/svg/video-preview.svg create mode 100644 client/src/community/svg/video-preview_dark.svg create mode 100644 client/src/community/svg/video-preview_light.svg diff --git a/client/src/assets/community/contribute-bg.svg b/client/src/assets/community/contribute-bg.svg new file mode 100644 index 000000000000..cb38e57cb022 --- /dev/null +++ b/client/src/assets/community/contribute-bg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/contributors-bg.svg b/client/src/assets/community/contributors-bg.svg index a7b9d028a0db..6e4f188eb144 100644 --- a/client/src/assets/community/contributors-bg.svg +++ b/client/src/assets/community/contributors-bg.svg @@ -1,50 +1,4 @@ - - - - - - - - - - + + + diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 236b28187dc7..4662aa41bd6f 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -369,7 +369,6 @@ main.community { // Outer circle, top part. &:nth-child(1) { - // eslint-ignore transform: transform-circle(27rem, 90deg); } &:nth-child(2) { @@ -442,7 +441,10 @@ main.community { section.join-us { background-color: var(--secondary-bg); - padding-top: 3rem; + padding: 3rem 0; + + margin-left: 0; + margin-right: 0; > h2 { margin-top: 0; @@ -464,11 +466,9 @@ main.community { align-items: flex-start; display: flex; flex-direction: column; - flex-shrink: 0; + flex: 0; background-color: #00d230; box-shadow: 8px 8px 4px 0px rgba(103, 158, 116, 0.5); - height: auto; - min-width: 12.5rem; padding: 1rem; padding-top: 1.5rem; } @@ -508,11 +508,52 @@ main.community { text-wrap: nowrap; } } + + @media (min-width: $desktop-min-width) { + background-image: url("../assets/community/contribute-bg.svg"); + background-position: top; + background-repeat: no-repeat; + background-size: 100%; + padding: 0 calc((100% - $desktop-content-width) / 2); + position: relative; + height: 50rem; + width: 100%; + + justify-content: space-between; + + .note { + width: 12rem; + + .actions { + flex-direction: row; + } + + &:nth-child(1) { + margin-top: 1rem; + } + + &:nth-child(2) { + margin-top: 25rem; + } + + &:nth-child(3) { + margin-top: 13rem; + } + + &:nth-child(4) { + margin-top: 30rem; + } + } + } } @media (min-width: $desktop-min-width) { - padding: 2rem calc((100% - $desktop-content-width) / 2); max-width: unset; + + > h2, + > p { + padding: 0 calc((100% - $desktop-content-width) / 2); + } } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 99da1b8d5489..6d610f7e8a1c 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -2,11 +2,13 @@ import { ReactComponent as DesktopHeaderTopLeftSVG } from "./svg/header-1.svg"; import { ReactComponent as DesktopHeaderBottomLeftSVG } from "./svg/header-2.svg"; import { ReactComponent as DesktopHeaderBottomRightSVG } from "./svg/header-3.svg"; import { ReactComponent as MobileHeaderSVG } from "./svg/header-mobile.svg"; -import { ReactComponent as VideoPreviewSVG } from "./svg/video-preview.svg"; import { ReactComponent as ChatSVG } from "./svg/chat.svg"; import { ReactComponent as CommunityCallsSVG } from "./svg/community-calls.svg"; +import darkVideo from "./svg/video-preview_dark.svg"; +import lightVideo from "./svg/video-preview_light.svg"; import "./index.scss"; +import ThemedPicture from "../ui/atoms/themed-picture"; const STATS = [ { id: 1, number: "45k+", legend: "Total contributors" }, @@ -401,7 +403,7 @@ export function Community() {

- +
Watch this video on{" "} diff --git a/client/src/community/svg/video-preview.svg b/client/src/community/svg/video-preview.svg deleted file mode 100644 index c4dc34392f8a..000000000000 --- a/client/src/community/svg/video-preview.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/video-preview_dark.svg b/client/src/community/svg/video-preview_dark.svg new file mode 100644 index 000000000000..604a7c51b010 --- /dev/null +++ b/client/src/community/svg/video-preview_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/community/svg/video-preview_light.svg b/client/src/community/svg/video-preview_light.svg new file mode 100644 index 000000000000..65555d5d7b72 --- /dev/null +++ b/client/src/community/svg/video-preview_light.svg @@ -0,0 +1 @@ + \ No newline at end of file From fb56258ca4bead16cd7ea24425c19356cb3f2132 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 19 Aug 2024 13:09:43 +0000 Subject: [PATCH 08/44] feat(community): implement simplified design --- build/spas.ts | 34 +- client/src/app.tsx | 2 +- .../assets/community/community-calls-dark.svg | 4 + .../src/assets/community/community-calls.svg | 8 + client/src/assets/community/contribute-bg.svg | 4 - .../src/assets/community/contributors-bg.svg | 4 - client/src/assets/community/discord-dark.svg | 5 + client/src/assets/community/discord.svg | 9 + client/src/assets/community/globe.svg | 3 - client/src/assets/community/hero-bg.svg | 57 - client/src/assets/community/people-dark.svg | 69 ++ client/src/assets/community/people.svg | 70 ++ .../src/assets/community/quote-end-dark.svg | 4 + client/src/assets/community/quote-end.svg | 4 + .../src/assets/community/quote-start-dark.svg | 4 + client/src/assets/community/quote-start.svg | 4 + client/src/assets/community/quote.svg | 4 - client/src/assets/community/video-bg-dark.svg | 30 + client/src/assets/community/video-bg.svg | 30 + .../src/assets/community/video-thumbnail.png | Bin 0 -> 4418 bytes client/src/assets/community/youtube-play.svg | 8 + client/src/community/index.scss | 1099 ++++++++++------- client/src/community/index.tsx | 702 +++-------- client/src/community/svg/chat.svg | 5 - client/src/community/svg/community-calls.svg | 4 - client/src/community/svg/header-1.svg | 33 - client/src/community/svg/header-2.svg | 36 - client/src/community/svg/header-3.svg | 51 - .../src/community/svg/header-background.svg | 57 - client/src/community/svg/header-mobile.svg | 379 ------ client/src/community/svg/tape.svg | 17 - .../src/community/svg/video-preview_dark.svg | 1 - .../src/community/svg/video-preview_light.svg | 1 - copy/community/index.json | 112 ++ copy/community/index.md | 154 +++ libs/constants/index.js | 4 + 36 files changed, 1324 insertions(+), 1688 deletions(-) create mode 100644 client/src/assets/community/community-calls-dark.svg create mode 100644 client/src/assets/community/community-calls.svg delete mode 100644 client/src/assets/community/contribute-bg.svg delete mode 100644 client/src/assets/community/contributors-bg.svg create mode 100644 client/src/assets/community/discord-dark.svg create mode 100644 client/src/assets/community/discord.svg delete mode 100644 client/src/assets/community/globe.svg delete mode 100644 client/src/assets/community/hero-bg.svg create mode 100644 client/src/assets/community/people-dark.svg create mode 100644 client/src/assets/community/people.svg create mode 100644 client/src/assets/community/quote-end-dark.svg create mode 100644 client/src/assets/community/quote-end.svg create mode 100644 client/src/assets/community/quote-start-dark.svg create mode 100644 client/src/assets/community/quote-start.svg delete mode 100644 client/src/assets/community/quote.svg create mode 100644 client/src/assets/community/video-bg-dark.svg create mode 100644 client/src/assets/community/video-bg.svg create mode 100644 client/src/assets/community/video-thumbnail.png create mode 100644 client/src/assets/community/youtube-play.svg delete mode 100644 client/src/community/svg/chat.svg delete mode 100644 client/src/community/svg/community-calls.svg delete mode 100644 client/src/community/svg/header-1.svg delete mode 100644 client/src/community/svg/header-2.svg delete mode 100644 client/src/community/svg/header-3.svg delete mode 100644 client/src/community/svg/header-background.svg delete mode 100644 client/src/community/svg/header-mobile.svg delete mode 100644 client/src/community/svg/tape.svg delete mode 100644 client/src/community/svg/video-preview_dark.svg delete mode 100644 client/src/community/svg/video-preview_light.svg create mode 100644 copy/community/index.json create mode 100644 copy/community/index.md diff --git a/build/spas.ts b/build/spas.ts index 2cfce722b3dc..0492fbecf5cd 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -200,7 +200,13 @@ export async function buildSPAs(options: { noIndexing: true, }, { prefix: "about", pageTitle: "About MDN" }, - { prefix: "community", pageTitle: "Contribute to MDN" }, + { + prefix: "community", + pageTitle: "Contribute to MDN", + json: fileURLToPath( + new URL("../copy/community/index.json", import.meta.url) + ), + }, { prefix: "advertising", pageTitle: "Advertise with us", @@ -217,9 +223,10 @@ export async function buildSPAs(options: { pageDescription, noIndexing, onlyFollow, + json, } of SPAs) { const url = `/${locale}/${prefix}`; - const context: HydrationData = { + let context: HydrationData = { pageTitle, pageDescription, locale, @@ -228,6 +235,29 @@ export async function buildSPAs(options: { url, }; + if (json) { + context = JSON.parse(await fs.promises.readFile(json, "utf-8")); + const localeReplace = function (obj: any) { + try { + Object.keys(obj); + } catch { + return; + } + for (const key of Object.keys(obj)) { + if (typeof obj[key] === "object") { + localeReplace(obj[key]); + } + if (typeof obj[key] === "string") { + obj[key] = obj[key] + .replace(/^en-US$/, locale) + .replace(/^\/en-US\//, `/${locale}/`) + .replace(/ href="\/en-US\//g, ` href="/${locale}/`); + } + } + }; + localeReplace(context); + } + const outPath = path.join(BUILD_OUT_ROOT, pathLocale, prefix); fs.mkdirSync(outPath, { recursive: true }); const jsonFilePath = path.join(outPath, "index.json"); diff --git a/client/src/app.tsx b/client/src/app.tsx index d5481c2b2ccb..ff38d1aafa04 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -330,7 +330,7 @@ export function App(appProps: HydrationData) { path="/community/*" element={ - + } /> diff --git a/client/src/assets/community/community-calls-dark.svg b/client/src/assets/community/community-calls-dark.svg new file mode 100644 index 000000000000..7856e5e846f6 --- /dev/null +++ b/client/src/assets/community/community-calls-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/community-calls.svg b/client/src/assets/community/community-calls.svg new file mode 100644 index 000000000000..962ac8364ae8 --- /dev/null +++ b/client/src/assets/community/community-calls.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/client/src/assets/community/contribute-bg.svg b/client/src/assets/community/contribute-bg.svg deleted file mode 100644 index cb38e57cb022..000000000000 --- a/client/src/assets/community/contribute-bg.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/client/src/assets/community/contributors-bg.svg b/client/src/assets/community/contributors-bg.svg deleted file mode 100644 index 6e4f188eb144..000000000000 --- a/client/src/assets/community/contributors-bg.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/client/src/assets/community/discord-dark.svg b/client/src/assets/community/discord-dark.svg new file mode 100644 index 000000000000..d5bfd2e0fa31 --- /dev/null +++ b/client/src/assets/community/discord-dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/src/assets/community/discord.svg b/client/src/assets/community/discord.svg new file mode 100644 index 000000000000..45d63e96a463 --- /dev/null +++ b/client/src/assets/community/discord.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/community/globe.svg b/client/src/assets/community/globe.svg deleted file mode 100644 index 2da02d5cbe36..000000000000 --- a/client/src/assets/community/globe.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/src/assets/community/hero-bg.svg b/client/src/assets/community/hero-bg.svg deleted file mode 100644 index 99181214ad87..000000000000 --- a/client/src/assets/community/hero-bg.svg +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/assets/community/people-dark.svg b/client/src/assets/community/people-dark.svg new file mode 100644 index 000000000000..71db99b7f6b0 --- /dev/null +++ b/client/src/assets/community/people-dark.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/community/people.svg b/client/src/assets/community/people.svg new file mode 100644 index 000000000000..d8a6d8d20846 --- /dev/null +++ b/client/src/assets/community/people.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/community/quote-end-dark.svg b/client/src/assets/community/quote-end-dark.svg new file mode 100644 index 000000000000..169e0f190da4 --- /dev/null +++ b/client/src/assets/community/quote-end-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/quote-end.svg b/client/src/assets/community/quote-end.svg new file mode 100644 index 000000000000..4fc721e4dbd8 --- /dev/null +++ b/client/src/assets/community/quote-end.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/quote-start-dark.svg b/client/src/assets/community/quote-start-dark.svg new file mode 100644 index 000000000000..16e4603b4c56 --- /dev/null +++ b/client/src/assets/community/quote-start-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/quote-start.svg b/client/src/assets/community/quote-start.svg new file mode 100644 index 000000000000..a179e3ed2896 --- /dev/null +++ b/client/src/assets/community/quote-start.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/src/assets/community/quote.svg b/client/src/assets/community/quote.svg deleted file mode 100644 index 5a6b693f6905..000000000000 --- a/client/src/assets/community/quote.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/client/src/assets/community/video-bg-dark.svg b/client/src/assets/community/video-bg-dark.svg new file mode 100644 index 000000000000..85314eab09ff --- /dev/null +++ b/client/src/assets/community/video-bg-dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/community/video-bg.svg b/client/src/assets/community/video-bg.svg new file mode 100644 index 000000000000..aa2fac87eacc --- /dev/null +++ b/client/src/assets/community/video-bg.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/community/video-thumbnail.png b/client/src/assets/community/video-thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..bbe2f78e0601312471078b77dc10909d98f520ec GIT binary patch literal 4418 zcmb`L^;Z)Ppv5Pkbb|;21L>~eC<$qYgn;yLgv3Y@8AwTdVG^TLkQk$3(v5C(2u`Fy zCLmpk)C8XIUwG%;bMCq4e9ryx{&bP1#`^R$Tr>axfZotR=LrCCW96S2D9Hbj(xy3! ze?jeMU=siUNDKV0Zy?GvUj2i2OpPpbudlDk$jHvl&X$&z@OXTFe!h>7kBW*4zigiu z0Khb9sH0_pnBR4P*!_6K>XVRQmk()>x;yDj^;y}@)UV}6{~U`&Reb?L?D5r&FdQb^CSkG-EN}D+H8RjWG8t z=96f5rG(aSbf}(W+|r*I3W!9Euf8luhBkZH!Gaq#ahA|pZnSwqCat^-+sO{y#A!}T z_wkWDjb}UAR*zf{^OCG;HwZO=>--#{<|IpCUA(q)={qDez;SGjLfj8s`|WtPXTL>B z1FL5}Jx8Zzd2x@%JQOyNV$uqzVg4`e2&5iX;#e(jqXhU+kqh6%f6N1BKm{Z>QbOg4 z7Kz&f0#(fXQ1d%R0X9TKNM~cod*PM<9D7FwC37w=F!wSW#eCV%1w-}nU1l_&?}(kp z*sDa2BPC`XE3?EOyNK++dfSdulwY=iPmNJq4GVjgadHM{8#rpd36b1&NO<1x(7MW5 z%$Mm(4j-b#4KGavHH%tU4qe< ziC7a#;XRef1ncCH20deD3T@6$Rk+fucWh!VO%;PznP914Ta1ig7JHr8t9dttM!!N< z>FHsl+xqqs7%;?zur?iR$}r!sAkdPhAZD=7W%_;U@nBhuSYK)K!NAS8^H-K$<8k8@ zny0b3ZUBoj0jpUNS`BZjY#LGp`w2E%T(UIGQ~BoeZNRwneEO$Cv+#bj9dD2(&nlSZ7)Lr6If`G;IkiC~QG z;|yCE(Bug&Felyp8v!i^S1M3{(Er3Otr8a^c&e*v*_JJCWawc0Y zz>tD7ZyEK4?mLC&3(2Uz091i-#USxCe{N4XMVQg?8OLkf*vYgqsB{RJ|(mE>lIdMOZ=3faGKKGc#+I+36K_h9OY3AuDK?= zoxpCxb6$URv&4Fst#FG?KzzHVQ!6%I#+W$fVrw}y3^#inp@0rQW>!HMu)AphUa!h> z1=cw_P}~~f{Q=i}5O)O3RidANX;HA_dxO49~oncMf-#Y{LxBs zb6HHgw2XXQ$Sxs_hW7@cFw*Ku8(8WG?H6K0-cD?umwvsm!+~M@b%42G_2nvm&)h&T zjnH!?umcetovqfq+aV~jy=vOSS<>^bP4s)8;Qa7E^eO4#z0E?tp-4)?A*whhtE=cmdl;kaxb%lpJDLNkEVB?Yo0e~l z^|G^8))zU_6+}Nf+_JSg)HNo^7^Xb)TTQfYItKm-3f!w=+))M?xdpZe+RIfJbXH+& z$^-1|SPL^;I~YBJsOtAHmneB#E>kcyqoV-#-gzbdz$s(;yeZjk_@@-0^>S;@joiW&gXFHhj9ZEo?Aa^2PWz?~Sn#{Q$kUi*IT<#H7f8!;gXEV5JgNU79 z*?Z(>*eVGZX{cITGguyu#(ln!U48mMgihOpZtJwB0=$D>;25h|ODe_fUtn*a&xJvH zCS&}S;M+?EW)O^B3a$kR!VMTp{KY+BRG0Z9PYiw&25^dPx)11c;zt1-qV(3$k%qM~=c+R(eEJMo%nhz9i7%9QDk`<5#HJ?9-4R@^@ZjJte#D_?$MRduK=bQAwM?=bgLq2P|jm@jGE1Dx& z0;6OZHJP0J_#@v!1=8h94Q=$!<4deP$ERGT4HV{t|LGlO;hBG zrCn|t5}4cRVI8T66Agd2Sxu(ar&^6y)}0>yJl*bGU>k(%z*a;K#4>v{uV*B>?LE&BLgN%MfN zR2vx!tbolb{AbD7lZs#Rc171IdmWr~i>qv_gj5%CYBuex>_k_Y#^EQ%4q_<#xUh7J zPWQtc`LdD1IqhKC!CxyCO<2znEy#ZsHCef96)Qh0bq6(WO6_?eO$6eHHR~8yB`AAh z#W?F)sK;d+$CKroLbmmCRWmYQ)B0}>Kgd|FqL&6{CVeKhx2c4-o2cx6DOZR;eUO>u zHawzr*PKRdnkPlpQq@)soHlrrTEjcIU;C(fO~Gb1!NIF8VXX ztjGH(A7ixP29b&9mQS7PZt#lVZRN#EWp3}A`c+ZwHyJ3a*Y3z4DCKGg8kufijLLJf z`MVE9|7O%9a4SizI_E~_t{iHf`Tw`&{5M~(AdZ3ckyl%9@lG)3ZP%~Z@~~||Rw^2b z*VA6BK&DZ?11%5O^lz$5a;n69#uEWHUR&z&VFkp>KSmfznq**sXbj1fd! zk9R7@PzJ##94s^RXOij$=j@jr^Md=zHCX66$AC9o|Q9YmNlLx{EnOg;_&FD5RU$A$D~k zFyYstQoOb_w37w{;bIaC*>Np&#Kq>#6*F1WINAep??X=p{5_jDapmNqt+bp@A8>bB zL&2YD`JN&VAnD62T_5KkbUmvI_;IVur8aTvY7BK%nj!U+%i0blCDur9?rS2rbs!{X@c*)26Mie@Ih~GIwq!#`-LH96ng5w;w@io-zvZ)Qj5lcC;&|mQW z=gh!+g@*N&tTC0~<&_4u7G-bty<&;YQgYu-@s5$o`o%s(kbPIk$bhe2xjOp!KsWV- z35J1+U|9Fp(5e|24LrKtafjN!#jv2c^ge}S=&srNopb~TRX`_#{v8P$wCQD3`$Ggs zIieFWt1~gvFMs!8)TeKZ)YUy)6gxrmAg;<2&Fu@j#t(rI53B2NAbI?UViNpvqkobVf3LuR8pJNMG;b zd&D+aBTkV|L)a0P`yUoPaG)Qh$BZUFu+?|%7Y`h$%o o_F=K9=>IYPQo^pSG$P2v@s2cj{E*JS{{vvCYphfE@LAOV0KtrhLI3~& literal 0 HcmV?d00001 diff --git a/client/src/assets/community/youtube-play.svg b/client/src/assets/community/youtube-play.svg new file mode 100644 index 000000000000..2cbdb4edb31c --- /dev/null +++ b/client/src/assets/community/youtube-play.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 4662aa41bd6f..56539fde354c 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -1,612 +1,777 @@ @use "../ui/vars" as *; -@use "../ui/base/mdn" as *; -// Mobile first. -$desktop-min-width: $screen-md; -$desktop-content-width: 78rem; +@mixin light-theme { + --community-bg-primary: #fff; + --community-bg-primary-alt: #fff; + --community-bg-secondary: #f2f2f5; + --community-text-primary: #000; + --community-text-primary-alt: #000; + --community-text-secondary: #343434; + --community-text-success: #007936; + --community-header-text: #696969; + --community-header-bg: url("../assets/community/people.svg"); + --community-header-stats-bg: #e1f5e5; + --community-box-shadow: 4px -2px 1rem 0 rgba(179, 179, 179, 0.2), + 4px -4px 1rem 0 rgba(179, 179, 179, 0.15); + --community-button-bg-alt: #fff; + --community-circle-img-border: #fff; + --community-circle-bg: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + --community-quote-start: url("../assets/community/quote-start.svg"); + --community-quote-end: url("../assets/community/quote-end.svg"); + --community-video-bg: url("../assets/community/video-bg.svg"); + --community-card-header-bg: #e1f5e5; + --community-card-border: #e2e2e2; + --community-table-border: #e2e2e2; + --community-table-row: #f9f9fb; + --community-label-bg: #dff7e3; + --community-discord-bg: url("../assets/community/discord.svg"); + --community-calls-bg: url("../assets/community/community-calls.svg"); +} -main.community { - --primary-bg: var(--observatory-bg); // FIXME - --secondary-bg: var(--background-primary); +@mixin dark-theme { + --community-bg-primary: #101010; + --community-bg-primary-alt: #000; + --community-bg-secondary: #1b1b1b; + --community-text-primary: #fff; + --community-text-primary-alt: #cdcdcd; + --community-text-secondary: #cdcdcd; + --community-text-success: #8ff295; + --community-header-text: #b3b3b3; + --community-header-bg: url("../assets/community/people-dark.svg"); + --community-header-stats-bg: #394035; + --community-box-shadow: 4px -2px 15px 0 rgba(38, 38, 38, 0.2), + 4px -4px 15px 0 rgba(38, 38, 38, 0.15); + --community-button-bg-alt: none; + --community-circle-img-border: #1b1b1b; + --community-circle-bg: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + --community-quote-start: url("../assets/community/quote-start-dark.svg"); + --community-quote-end: url("../assets/community/quote-end-dark.svg"); + --community-video-bg: url("../assets/community/video-bg-dark.svg"); + --community-card-header-bg: #354039; + --community-card-border: #343434; + --community-table-border: #1b1b1b; + --community-table-row: #1b1b1b; + --community-label-bg: #354039; + --community-discord-bg: url("../assets/community/discord-dark.svg"); + --community-calls-bg: url("../assets/community/community-calls-dark.svg"); +} - background-color: var(--primary-bg); - padding-top: 3rem; - padding-bottom: 3rem; +.light { + @include light-theme; +} - h2 { - font-size: 1.5rem; - margin-top: unset; - text-wrap: balance; - } +.dark { + @include dark-theme; +} - .actions { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; +// OS Default. +:root:not(.light):not(.dark) { + @media (prefers-color-scheme: light) { + @include light-theme; } - a[href]:not(.btn) { - color: var(--text-primary); - text-decoration: underline; - - &:hover { - text-decoration: none; - } + @media (prefers-color-scheme: dark) { + @include dark-theme; } +} - .btn { - border-radius: 0.5rem; - font-size: 1rem; - font-weight: 400; - padding: 0.5em; // sic! - text-decoration: none; +main.community-container { + --community-stats-height: 5.75rem; + --community-section-gap: 10rem; - &.primary { - background-color: var(--button-primary-default); - color: var(--secondary-bg); + background: var(--community-bg-secondary); + color: var(--community-text-secondary); + letter-spacing: var(--heading-letter-spacing); - &:hover { - text-decoration: underline; - } - } - - &.secondary { - background-color: var(--primary-bg); - border: 1px solid var(--text-primary); - color: var(--text-primary); + @media (max-width: $screen-md) { + --community-section-gap: 5rem; + } - &:hover { - text-decoration: underline; - } - } + h2, + h3, + p { + margin: 0; } - table { - border-radius: 0.5rem; - background: var(--secondary-bg); - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + a { + color: unset; + text-decoration: underline; - tr:nth-of-type(odd) { - background: var(--primary-bg); + &.external:after { + display: none; } + } - th, - td { - border: none; - } + h2, + h3 { + color: var(--community-text-primary); - th { - padding: 1.5rem; + a { + text-decoration: none; } + } - td { - padding: 0.5rem 1.5rem; - } + p + p { + margin-top: 1.5rem; } - .desktop-only { - display: none; + section { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width); + padding-left: var(--gutter); + padding-right: var(--gutter); + width: 100%; } - @media (min-width: $desktop-min-width) { - .desktop-only { - display: unset; - } + h2 { + font-size: 2rem; + font-weight: 600; + margin-bottom: 1rem; - .mobile-only { - display: none; + @media (max-width: $screen-md) { + font-size: 1.375rem; } } - > section { - margin-top: 4rem; - padding-left: 0.75rem; - padding-right: 0.75rem; - - @media (min-width: $desktop-min-width) { - margin-left: auto; - margin-right: auto; - max-width: $desktop-content-width; + > header { + background: linear-gradient( + to top, + transparent 0%, + transparent calc(var(--community-stats-height) / 2), + var(--community-bg-primary) calc(var(--community-stats-height) / 2), + var(--community-bg-primary) 100% + ); + padding-top: 7rem; + + @media (max-width: $screen-md) { + padding-top: 1rem; + text-align: center; } - } - section.hero { - display: grid; - grid-template-areas: - "illustration" - "heading" - "copy" - "actions"; - margin-top: 1rem; - text-align: center; - - > h1 { - grid-area: heading; - margin: 0; - } + section { + background-image: var(--community-header-bg); + background-position: bottom calc(var(--community-stats-height) - 1rem) + right; + background-repeat: no-repeat; - > p { - grid-area: copy; - margin-top: 1.5rem; - margin-bottom: 1rem; - text-wrap: balance; + @media (max-width: $screen-md) { + background-position: top center; + background-size: 80vw; + padding-top: 40vw; + } } - .btn { - font-size: 1.2rem; - } + h1 { + color: var(--community-text-primary); + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; - .actions { - grid-area: actions; - flex-wrap: wrap; - text-wrap: nowrap; + @media (max-width: $screen-md) { + font-size: 2rem; + } } - .illustration { - grid-area: illustration; - - > svg { - margin: 0 auto; - } + p { + color: var(--community-header-text); + margin-bottom: 2rem; } - @media (min-width: $desktop-min-width) { - background-image: url("../assets/community/hero-bg.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: auto 25rem; - column-gap: 2rem; - - grid-template-areas: - "top-left . ." - "top-left heading . " - ". copy ." - "bottom-left actions bottom-right" - "bottom-left . bottom-right"; - justify-content: space-around; - margin: 0 auto; + ul:first-of-type { + display: flex; + flex-wrap: wrap; + gap: 1.3125rem; - .actions { - flex-direction: row; + @media (max-width: $screen-md) { justify-content: center; } - .top-left { - grid-area: top-left; - } - - .bottom-left { - grid-area: bottom-left; + a { + background: var(--community-bg-primary); + border: 1px solid var(--community-text-primary); + border-radius: 0.5rem; + color: var(--community-text-primary); + display: block; + font-size: 1.25rem; + font-weight: 500; + line-height: 120%; /* 1.5rem */ + padding: 0.625rem; + text-decoration: none; } - .bottom-right { - grid-area: bottom-right; + li:first-child a { + background: var(--community-text-primary); + color: var(--community-bg-primary-alt); } } - } - - section.community-stats { - background-color: var(--secondary-bg); - border-radius: 1rem; - padding: 1.5rem 3rem; - text-wrap: balance; - text-align: center; - > .stats { - --border-width: 0.25rem; - --size: 4rem; + ul:last-of-type { + background: var(--community-bg-primary-alt); + border-radius: 0.5rem; + box-shadow: var(--community-box-shadow); + color: var(--community-text-primary); display: flex; - flex-direction: column; - gap: 1.5rem; - margin-top: calc(-1 * var(--size) + 2 * var(--border-width)); - - .number { - background-color: rgba(0, 210, 48, 1); - border: 0.25rem solid #eee; - border-radius: 50%; - display: block; - //font-size: 1rem; - font-weight: 500; - height: var(--size); - text-align: center; - margin: 0 auto; - line-height: calc(var(--size) - 2 * var(--border-width)); - width: var(--size); + gap: 1.38rem; + justify-content: space-around; + margin-top: var(--community-section-gap); + padding: 1rem; + + @media (max-width: $screen-xl) { + margin-top: 20rem; } - .legend { - display: block; - font-size: 0.875rem; - text-align: center; + + @media (max-width: $screen-md) { + flex-wrap: wrap; + margin-top: 2rem; } - @media (min-width: $desktop-min-width) { - --size: 7.5rem; - flex-direction: row; - justify-content: space-around; + li { + align-items: baseline; + column-gap: 1.38rem; + display: flex; + flex-wrap: wrap; + justify-content: center; + overflow-wrap: anywhere; - .number { - font-size: 1.75rem; + @media (max-width: $screen-md) { + align-items: center; + flex: 1; + flex-direction: column; + justify-content: flex-start; } - .legend { - font-size: 1rem; + strong { + align-items: center; + background: var(--community-header-stats-bg); + border-radius: 50%; + color: var(--community-text-success); + display: inline-flex; + height: 3.75rem; + justify-content: center; + letter-spacing: -0.03125rem; + margin: 0 2rem; + width: 3.75rem; } } } + } + + > header + section { + margin-top: 4.56rem; - h2 { - margin-top: 4rem; + @media (max-width: $screen-md) { + margin-top: 2rem; } + } + + > section { + --community-circle-height: 50rem; + column-gap: 5rem; + display: grid; + grid-template-columns: 4fr 6fr; - &::after { - content: url("../assets/community/globe.svg"); + @media (max-width: $screen-md) { + --community-circle-height: 0; display: block; - position: relative; - margin-left: auto; - margin-right: -3.5rem; - margin-bottom: -2rem; - height: 6rem; - width: 6rem; } - @media (min-width: $desktop-min-width) { - margin-top: 10rem; + > * { + min-width: 0; } - } - section.community-contributors { - .actions { - flex-direction: row; - } + &[aria-labelledby="meet_our_contributors"] { + grid-template-rows: auto auto auto var(--community-circle-height); + margin-top: var(--community-section-gap); + + .section-content { + display: contents; + } + + h2, + .section-content > * { + grid-column: 2; + } + + ul:first-of-type { + // contributor buttons - section.contributor-quotes { - .quotes { display: flex; - flex-direction: row; - align-items: flex-start; - gap: 1rem; - overflow-y: scroll; - width: 100%; + flex-wrap: wrap; + gap: 2.12rem; + margin-top: 2rem; - blockquote { - background-color: var(--secondary-bg); - border: 0; - border-radius: 0.5rem; - padding: 2rem 3rem; - flex: 20rem; - flex-shrink: 0; + @media (max-width: $screen-md) { + justify-content: center; + } - > p { - font-style: italic; - font-variation-settings: "slnt" -10; - - &::before { - content: url("../assets/community/quote.svg"); - display: block; - position: relative; - margin-bottom: -2rem; - margin-left: -2rem; - height: auto; - width: 1rem; - } - &::after { - content: url("../assets/community/quote.svg"); - display: block; - position: relative; - margin-left: calc(100% + 1rem); - margin-top: -2rem; - height: auto; - transform: rotate(180deg); - width: 1rem; - } - } + a { + background: var(--community-button-bg-alt); + border: 1px solid var(--community-text-primary); + border-radius: 0.5rem; + color: var(--community-text-primary); + display: block; + font-size: 1.25rem; + font-weight: 500; + line-height: 120%; + padding: 0.625rem 3rem; + text-decoration: none; + } - > footer { - margin-top: 2rem; - } + li:first-child a { + background: var(--community-text-primary); + color: var(--community-bg-primary-alt); } } - } - @media (min-width: $desktop-min-width) { - display: grid; - grid-template-areas: - "contributors copy" - "contributors quotes"; - grid-template-columns: 2fr 1fr; - gap: 4rem; - - > section.contributors { - grid-area: contributors; - background-image: url("../assets/community/contributors-bg.svg"); - background-position: center; - background-repeat: no-repeat; - background-size: calc(100% - 10rem); - position: relative; - height: 60rem; - width: 100%; + ul:last-of-type { + // contributor list + + --community-list-img-size: 3.75rem; + --community-list-width: 10rem; + align-content: start; + display: grid; + gap: 2rem 1rem; + grid-column: 1; + grid-row: 1/5; + grid-template-columns: repeat( + auto-fit, + minmax(var(--community-list-width), 1fr) + ); + justify-items: center; + min-width: 0; + + @media (max-width: $screen-md) { + display: flex; + margin-top: 2rem; + overflow-x: auto; + } - .contributor { - position: absolute; - top: 50%; - right: 0%; - background-color: var(--primary-bg); - display: block; - padding: 1rem; + li { + align-items: center; + color: var(--community-text-primary); + display: flex; + flex-direction: column; + flex-shrink: 0; text-align: center; + width: var(--community-list-width); + } - > * { - display: block; - margin: 0 auto; - } + img { + border: 6px var(--community-circle-img-border) solid; + border-radius: 50%; + height: var(--community-list-img-size); + width: var(--community-list-img-size); + } - img { - border: 6px solid #fff; - border-radius: 100%; - width: 5rem; - } + a { + font-size: 1.375rem; + font-weight: 600; + line-height: 120%; /* 1.65rem */ + text-decoration-line: underline; + } + } + } - figcaption { - max-width: 10rem; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } + @supports (offset-path: ellipse(100% 50% at right center)) { + @media (min-width: $screen-xxl) { + &[aria-labelledby="meet_our_contributors"] { + ul:last-of-type { + // contributor semi-circle - .username { + background-image: var(--community-circle-bg); display: block; - font-weight: 500; + height: var(--community-circle-height); + margin: calc(var(--community-list-img-size) / 2) + calc(var(--community-list-width) / 2); + position: relative; + + li { + height: var(--community-list-img-size); + offset-distance: calc(var(--community-circle-angle) * 50% + 25%); + // matches first svg defined in --community-circle-bg + offset-path: ellipse(100% 50% at right center); + offset-rotate: 0deg; + + &:nth-child(n + 6) { + --community-list-img-size: 5rem; + // matches second svg defined in --community-circle-bg + offset-path: ellipse(50% 25% at right center); + } + + &:nth-child(1) { + --community-circle-angle: 0; + } + + &:nth-child(2) { + --community-circle-angle: 1/4; + } + + &:nth-child(3) { + --community-circle-angle: 2/4; + } + + &:nth-child(4) { + --community-circle-angle: 3/4; + } + + &:nth-child(5) { + --community-circle-angle: 1; + } + + &:nth-child(6) { + --community-circle-angle: 0; + } + + &:nth-child(7) { + --community-circle-angle: 1/2; + } + + &:nth-child(8) { + --community-circle-angle: 1; + } + } } + } + } + } - @function transform-circle($radius, $degree) { - @return translate(-4rem, -4rem) translateX(50%) rotate($degree) - translate(-$radius) rotate(-$degree) translateY(0%); - } + &[aria-labelledby="contributor_spotlight"] { + margin-top: calc( + var(--community-section-gap) - var(--community-circle-height) + ); - /* stylelint-disable function-no-unknown */ + h2, + .section-content { + grid-column: 2; + } - // Outer circle, top part. - &:nth-child(1) { - transform: transform-circle(27rem, 90deg); - } - &:nth-child(2) { - transform: transform-circle(27rem, 54deg); - } - &:nth-child(3) { - transform: transform-circle(27rem, 18deg); - } - &:nth-child(4) { - transform: transform-circle(27rem, -18deg); - } - &:nth-child(5) { - transform: transform-circle(27rem, -54deg); - } - &:nth-child(6) { - transform: transform-circle(27rem, -90deg); - } - // Inner circle. - &:nth-child(7) { - transform: transform-circle(14rem, 90deg); - } - &:nth-child(8) { - transform: transform-circle(14rem, 30deg); - } - &:nth-child(9) { - transform: transform-circle(14rem, -30deg); - } - &:nth-child(10) { - transform: transform-circle(14rem, -90deg); - } + h2 { + margin-bottom: 0; + } - /* stylelint-enable function-no-unknown */ + ul { + display: flex; + gap: 2rem; + margin-bottom: 1.5rem; + margin-left: -1rem; + overflow-x: auto; + padding: 2.41rem 1rem; + + @media (max-width: $screen-md) { + margin-left: calc(var(--gutter) * -1); + margin-right: calc(var(--gutter) * -1); } } - > section.meet-our-contributors { - grid-area: copy; - align-self: flex-start; - } + li { + background: var(--community-bg-primary-alt); + border-radius: 0.5rem; + box-shadow: var(--community-box-shadow); + display: block; + flex-shrink: 0; + padding: 2.35rem 2.9rem 1.5rem; + width: 20rem; + + a { + display: block; + font-style: italic; - > section.contributor-quotes { - grid-area: quotes; - align-self: flex-end; + &::before { + content: "-"; + } + } } - } - } - section.get-started { - display: grid; - grid-template-areas: "header" "copy" "figure"; + blockquote { + border: none; + padding: 0; + position: relative; - > h2 { - grid-area: header; - } + p { + color: var(--community-text-secondary); + font-style: italic; + } - > p { - grid-area: copy; - } + &::before, + &::after { + background-image: var(--community-quote-start); + background-position: right; + background-repeat: no-repeat; + background-size: contain; + content: ""; + display: block; + height: 2em; + left: -2.37em; + position: absolute; + top: -0.69em; + width: 2em; + } - > figure { - grid-area: figure; + &::after { + background-image: var(--community-quote-end); + background-position: left; + bottom: -0.69em; + left: auto; + right: -2.37em; + top: auto; + } + } } - @media (min-width: $desktop-min-width) { - grid-template-areas: "header figure" "copy figure"; - - column-gap: 4rem; - } - } + &[aria-labelledby="learn_how_to_get_started"] { + grid-template-rows: 1fr auto auto auto 1fr; + margin-top: var(--community-section-gap); - section.join-us { - background-color: var(--secondary-bg); - padding: 3rem 0; + &::before { + content: ""; + grid-row: 1; + } - margin-left: 0; - margin-right: 0; + .section-content { + display: contents; + } - > h2 { - margin-top: 0; - } + h2, + .section-content > * { + grid-column: 2; + } - .notes { - display: flex; - flex-direction: row; - gap: 1rem; - overflow-x: scroll; - padding-top: 1rem; - width: 100%; + p:last-child { + // video link - .note { - position: relative; - padding-top: 0.5rem; // Avoid that sticky part overflows. + display: contents; - .note-inner { - align-items: flex-start; + @media (max-width: $screen-md) { display: flex; - flex-direction: column; - flex: 0; - background-color: #00d230; - box-shadow: 8px 8px 4px 0px rgba(103, 158, 116, 0.5); - padding: 1rem; - padding-top: 1.5rem; + justify-content: center; } - &::before { - content: ""; + a { + background-image: url("../assets/community/youtube-play.svg"), + url("../assets/community/video-thumbnail.png"), + var(--community-video-bg); + background-position: + 43% 50%, + 36% 50%, + center; + background-repeat: no-repeat; + background-size: 13%, 60%, contain; + color: transparent; display: block; - opacity: 0.8; - background: #f9f9fb; - box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15); - left: 50%; - transform: translate(-50%); - top: -0.5rem; - position: absolute; - height: 1.5rem; - width: 4.5rem; + grid-column: 1; + grid-row: 1/6; + height: min(25rem, 100vw); + max-width: 28rem; + overflow: hidden; + text-indent: -100rem; + + @media (max-width: $screen-md) { + width: 28rem; + } } + } + } - h3 { - font-size: 1rem; - font-weight: bold; - margin-top: 0rem; - margin-bottom: 0.5rem; - } + &[aria-labelledby="join_us_in_shaping_a_better_web"] { + display: block; + margin-top: var(--community-section-gap); - p { - flex-grow: 1; - margin: 0.5rem 0; - text-wrap: balance; + p { + margin-bottom: 2.86rem; + } + + ul { + display: grid; + gap: 4.88rem; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + margin-bottom: 5.13rem; + } + + li { + align-items: center; + background: var(--community-bg-primary-alt); + border: 1px solid var(--community-card-border); + border-radius: 0.5rem; + box-shadow: var(--community-box-shadow); + display: flex; + flex: 1; + flex-direction: column; + gap: 1.5rem; + justify-content: space-between; + padding: 1.5rem 3rem; + text-align: center; + + h3 { + align-self: stretch; + background: var(--community-card-header-bg); + border-radius: 0.5rem 0.5rem 0 0; + font-size: 1.25rem; + font-weight: 500; + margin: -1.5rem -3rem; + margin-bottom: 0; + padding: 1.5rem 3rem; } - .btn { - align-self: center; - align-content: center; - justify-content: center; - margin-top: 0.5rem; - text-wrap: nowrap; + a { + background: var(--community-text-primary); + border-radius: 0.5rem; + color: var(--community-bg-primary-alt); + font-size: 1.25rem; + font-weight: 500; + line-height: 120%; /* 1.5rem */ + padding: 0.62rem; + text-decoration: none; } } + } - @media (min-width: $desktop-min-width) { - background-image: url("../assets/community/contribute-bg.svg"); - background-position: top; - background-repeat: no-repeat; - background-size: 100%; - padding: 0 calc((100% - $desktop-content-width) / 2); - position: relative; - height: 50rem; - width: 100%; + &[aria-labelledby="help_us_fix_open_issues"], + &[aria-labelledby="help_us_fix_open_issues"] ~ section { + // reset layout/colors for the bottom section - justify-content: space-between; + background: var(--community-bg-primary); + color: var(--community-text-primary-alt); + display: block; + max-width: 100%; + padding: calc(var(--community-section-gap) / 2) 0; + + h2, + .section-content, + .issues-table { + margin-left: auto; + margin-right: auto; + max-width: var(--max-width); + padding-left: var(--gutter); + padding-right: var(--gutter); + width: 100%; + } + } - .note { - width: 12rem; + &[aria-labelledby="help_us_fix_open_issues"] { + .issues-table { + margin-top: 1rem; + } - .actions { - flex-direction: row; - } + table { + background: var(--community-bg-primary-alt); + border: 1px solid var(--community-table-border); + border-collapse: separate; + border-radius: 0.5rem; + border-spacing: 0; + color: var(--community-text-primary); + } - &:nth-child(1) { - margin-top: 1rem; - } + th, + td { + border: none; + padding: 1.5rem; - &:nth-child(2) { - margin-top: 25rem; + @media (max-width: $screen-md) { + &:last-of-type { + display: none; } + } + } - &:nth-child(3) { - margin-top: 13rem; - } + th { + background: none; + font-size: 1.25rem; + font-weight: 500; - &:nth-child(4) { - margin-top: 30rem; - } + @media (max-width: $screen-md) { + display: none; } } - } - @media (min-width: $desktop-min-width) { - max-width: unset; + tbody tr:nth-child(odd) { + background: var(--community-table-row); + } - > h2, - > p { - padding: 0 calc((100% - $desktop-content-width) / 2); + td > div { + align-items: baseline; + display: flex; + flex-wrap: wrap; + gap: 1rem 1.5rem; } - } - } - section.community-get-involved, - section.celebrate { - .labels { - margin-top: 1.5rem; - margin-bottom: 0.5rem; - } - .label { - background-color: var(--background-primary); - padding: 0.5rem; + .label { + background: var(--community-label-bg); + border-radius: 0.25rem; + color: var(--community-text-success); + font-weight: 500; + padding: 0.5rem 1rem; + } } - } - section.contact { - .channels { - display: flex; - flex-direction: column; - gap: 2rem; - - > figure { - background-color: var(--secondary-bg); - padding: 2rem; + &[aria-labelledby="join_the_conversation"] { + ul { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 1.5rem; + } + li { + align-items: flex-start; + border: 1px solid var(--community-table-border); + border-radius: 0.5rem; + box-shadow: var(--community-box-shadow); display: flex; - flex-direction: row; + flex: 1; + flex-direction: column; gap: 1.5rem; + justify-content: space-between; + min-width: min(30rem, 100%); + padding: 2rem; + padding-left: 8.5rem; + position: relative; - svg { - align-self: flex-start; - height: auto; - width: 4.5rem; + @media (max-width: $screen-md) { + padding-left: 5.5rem; } - figcaption { - h3 { - font-size: 1.5rem; - font-weight: 500; - margin-top: 0; - margin-bottom: 0; + &::before { + background-image: var(--community-discord-bg); + background-repeat: no-repeat; + background-size: contain; + content: ""; + height: 100%; + left: 2rem; + position: absolute; + width: 5rem; + + @media (max-width: $screen-md) { + width: 2rem; } + } + + &:last-of-type::before { + background-image: var(--community-calls-bg); + } - p { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + h3 { + font-size: 1.75rem; + font-weight: 600; + + @media (max-width: $screen-md) { + font-size: 1.25rem; } } - } - @media (min-width: $desktop-min-width) { - flex-direction: row; - column-gap: 20%; + a { + background: var(--community-text-primary); + border-radius: 0.5rem; + color: var(--community-bg-primary-alt); + font-size: 1.25rem; + font-weight: 500; + line-height: 120%; /* 1.5rem */ + padding: 0.62rem; + text-align: center; + text-decoration: none; + } } } } diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 6d610f7e8a1c..7de3baf28ee4 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,593 +1,171 @@ -import { ReactComponent as DesktopHeaderTopLeftSVG } from "./svg/header-1.svg"; -import { ReactComponent as DesktopHeaderBottomLeftSVG } from "./svg/header-2.svg"; -import { ReactComponent as DesktopHeaderBottomRightSVG } from "./svg/header-3.svg"; -import { ReactComponent as MobileHeaderSVG } from "./svg/header-mobile.svg"; -import { ReactComponent as ChatSVG } from "./svg/chat.svg"; -import { ReactComponent as CommunityCallsSVG } from "./svg/community-calls.svg"; -import darkVideo from "./svg/video-preview_dark.svg"; -import lightVideo from "./svg/video-preview_light.svg"; - import "./index.scss"; -import ThemedPicture from "../ui/atoms/themed-picture"; +import { HydrationData } from "../../../libs/types/hydration"; +import { useMemo } from "react"; +import useSWRImmutable from "swr/immutable"; +import { Section } from "../../../libs/types/document"; +import useSWR from "swr"; +import { HTTPError } from "../document"; +import { WRITER_MODE } from "../env"; +import { Prose } from "../document/ingredients/prose"; -const STATS = [ - { id: 1, number: "45k+", legend: "Total contributors" }, - { id: 2, number: "80M+", legend: "Monthly views" }, - { id: 3, number: "200+", legend: "Weekly commits" }, - { id: 4, number: "8", legend: "Language communities" }, -]; -const LOCALE_COUNT = 9; +interface CommunityDoc { + title: string; + body: Section[]; +} -const CONTRIBUTORS: { github_id: number; org?: string; user: string }[] = [ - { - github_id: 43580235, - org: "@mozilla", - user: "bsmth", - }, - { - github_id: 47647, - user: "chrisdavidmills", - org: "Mills Docs Limited", - }, - { - github_id: 349114, - user: "Elchi3", - org: "@openwebdocs", - }, - { - github_id: 69888, - user: "estelle", - org: "Standardista", - }, - { - github_id: 5368500, - user: "hamishwillee", - org: "Jenosam Pty Ltd", - }, - { - github_id: 55398995, - user: "Josh-Cena", - org: "Yale University Very Very Very Long", - }, - { - github_id: 11516302, - user: "mfuji09", - }, - { - github_id: 87750369, - user: "OnkarRuikar", - }, - { - github_id: 5179191, - user: "queengooborg", - }, - { - github_id: 194984, - user: "sideshowbarker", - }, - { - github_id: 1466293, - user: "teoli2003", - }, - { - github_id: 432915, - user: "wbamberg", - org: "@openwebdocs", - }, -]; +export function Community(appProps: HydrationData) { + const doc = useCommunityDoc(appProps); + return ( +
+ { + if (i === 0) { + return ( +
+ ); + } else if (section.value.id === "help_us_fix_open_issues") { + return ; + } + return null; + }} + /> +
+ ); +} -const CONTRIBUTE_ACTIONS = [ - { - title: "Fix issues", - description: "Submit pull requests to fix reported issues.", - actions: [ - { - url: "https://github.com/mdn/content/issues", - label: "Squash bugs", - }, - ], - }, - { - title: "Improve content", - description: "Fix inaccuracies and fill in missing information.", - actions: [ - { - url: "https://github.com/mdn/content/#readme", - label: "Start writing", - }, - ], - }, - { - title: "Localize content", - description: - "Participate in translating content into one of our supported languages.", - actions: [ - { - url: "https://developer.mozilla.org/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales", - label: "Find your locale", - }, - ], - }, - { - title: "Answer questions", - description: - "Share your knowledge and expertise and guide fellow learners.", - actions: [ - { - url: "https://discord.gg/3MKbs99V4F", - label: "Help on Discord", - }, - ], - }, - { - title: "Talk about MDN", - description: "Share your stories with us on our Mastodon or X.", - actions: [ - { - url: "https://twitter.com/mozdevnet", - label: "X", - }, - { - url: "https://mozilla.social/@mdn", - label: "Mastodon", - }, - ], - }, -]; +function useCommunityDoc( + appProps?: HydrationData +): CommunityDoc | undefined { + const { data } = useSWR( + "index.json", + async () => { + const url = new URL( + `${window.location.pathname.replace(/\/$/, "")}/index.json`, + window.location.origin + ).toString(); + const response = await fetch(url); -const ISSUES = [ - { - title: "Wrong explanation of the example inside Inline formatting context", - url: "https://github.com/mdn/content/issues/29035", - labels: ["Content:CSS", "good first issue"], - }, - { - title: "Document false negatives for navigator.onLine property", - url: "https://github.com/mdn/content/issues/30402", - labels: ["accepting PR", "Content:WebAPI", "effort: medium"], - }, - { - title: "Event not called for modification on sessionStorage", - url: "https://github.com/mdn/content/issues/30598", - labels: [ - "accepting PR", - "Content:WebAPI", - "effort: small", - "goal: accuracy", - ], - }, - { - title: "SharedArrayBuffer is not usable as a source data parameter.", - url: "https://github.com/mdn/content/issues/30749", - labels: ["accepting PR", "area: WebGL", "Content:WebAPI", "goal: accuracy"], - }, - { - title: - "update Notifications API content to better explain persistent events and not persistent events", - url: "https://github.com/mdn/content/issues/30931", - labels: [ - "accepting PR", - "Content:WebAPI", - "effort: large", - "goal: clarity", - ], - }, - { - title: "Update usage for {{AvailableInWorkers}}", - url: "https://github.com/mdn/content/issues/31675", - labels: ["accepting PR", "area: Workers", "Content:WebAPI", "MDN:Project"], - }, - { - title: 'C# WebSocket server example: Incompatible type for "offset"', - url: "https://github.com/mdn/content/issues/31774", - labels: [ - "area: WebSockets", - "Content:WebAPI", - "good first issue", - "help wanted", - ], - }, - { - title: - "Mention that offsetWidth value is integer and getBoundingClientRect().width is a decimal point number", - url: "https://github.com/mdn/content/issues/31779", - labels: ["area: DOM/CSSOM", "Content:WebAPI", "good first issue"], - }, - { - title: "cancelAnimationFrame using mismatched time values in sample", - url: "https://github.com/mdn/content/issues/31840", - labels: [ - "accepting PR", - "Content:WebAPI", - "effort: small", - "goal: accuracy", - ], - }, - { - title: "Fetch Basic Sample Code 404", - url: "https://github.com/mdn/content/issues/31841", - labels: [ - "accepting PR", - "area: Fetch/XMLHttpRequest", - "Content:WebAPI", - "effort: small", - "goal: accuracy", - ], - }, -]; + if (!response.ok) { + switch (response.status) { + case 404: + throw new HTTPError(response.status, url, "Page not found"); + } -export function Community() { - return ( -
- {/* 1. Header */} -
-

MDN Community

-

Contribute, Collaborate and Shape the Future of the Web Together

- - - - - -
- {/* 2. Stats */} -
-
    - {STATS.map((s) => ( -
  • - {s.number} - {s.legend} -
    • - ))} -
-

MDN community powers the web

-

- MDN’s strength comes from the passion and dedication of our global - community. Since our founding in 2005, we’ve grown into a thriving - network. Together, we’ve created a comprehensive, open, and free - resource that serves web developers across the globe. With volunteers - leading translation efforts in {LOCALE_COUNT} languages, we’re truly - international. -

-
- {/* 3. Contributors */} -
-
- {/* Left column. */} - {CONTRIBUTORS.slice(0, 10).map((contributor, index) => ( -
- + const text = await response.text(); + throw new HTTPError(response.status, url, text); + } -
- - {contributor.user} - - {contributor.org && ( - {contributor.org} - )} -
-
- ))} -
-
- {/* Right column, top. */} -

Meet our Contributors

-

- We are an open-source community of developers dedicated to building - resources for a better web. Our diverse contributors, including - developers, technical writers, students, educators, designers, and - more, come from various backgrounds and platforms. Anyone can - contribute, and each contribution strengthens our community, driving - innovation and improving this vital resource for developers - worldwide -

- -
-
- {/* Right column, bottom. */} -

Contributor spotlight

-
-
-

- There are millions of web developers in China, and many of them - begin their developer journey at MDN Web Docs. Contributing to - MDN Web Docs is an excellent way to help people who are starting - out. -

- -
-
-

- Working with the kind and knowledgeable teams on MDN gives me - the opportunity to learn, be part of a passionate community, and - help improve an extraordinary resource. -

- -
-
-

- I find the MDN Web Docs team welcoming and very experienced. - Here, I get to learn new stuff. This is the easiest place for - anybody to start their open source journey! -

- -
-
-
-
- {/* 4. Learn how to get started */} -
-

Learn how to get started

-

- We collaborate on GitHub, our - project's home, on various tasks such as writing and improving - documentation, fixing bugs, and providing review feedback. It starts - here, with you. Want to start right away, but not sure how? Follow our - guide to{" "} - - make your first contribution - - . -

-
- - - -
- Watch this video on{" "} - - how to get started with contributing to MDN Web Docs - -
-
-
- {/* 5. Join us in shaping a better web */} -
-

Join us in shaping a better web

-

- Become part of this globally cherished group that’s dedicated to - documenting web technologies. Whether you’re an expert or a beginner, - there’s a place for you in our inclusive community. Check out some of - the ways you can contribute and engage. -

-
    - {CONTRIBUTE_ACTIONS.map(({ title, description, actions }) => ( -
  • -
    -

    {title}

    -

    {description}

    -
    - {actions.map(({ url, label }) => ( - - {label} - - ))} -
    -
    -
    • - ))} -
-
- {/* 6. Get involved */} -
-

Get involved

-

- If you’re a beginner and looking for ways to contribute, GitHub issues - labeled as “good first issue” and “accepting PR” are a good place to - start. -

- - - - - - - - {ISSUES.map((issue) => ( - - - - ))} - -
Title
- - {issue.title} - -
- {issue.labels - .filter((label) => - ["good first issue", "accepting PR"].includes(label) - ) - .map((label) => ( - {label} - ))} -
-
-

- - View all issues - -

-

- While working Mozilla spaces, and communities, please adhere to the{" "} - - Mozilla Community Participation Guidelines - - , which promote respect, inclusion, and a harassment-free environment - for all community members. -

-
- {/* 7. Join the conversation */} -
-

Join the conversation

-
-
- + return (await response.json())?.doc; + }, + { + fallbackData: appProps?.doc, + revalidateOnFocus: WRITER_MODE, + revalidateOnMount: true, + } + ); + const doc: CommunityDoc | undefined = data || appProps?.doc || undefined; + return doc; +} -
-

Chat with us on Discord

-

- Connect with the community. Engage with domain experts. Help - others learn. -

- - Join MDN Discord - -
-
-
- +function RenderCommunityBody({ + doc, + renderer = () => null, +}: { + doc?: CommunityDoc; + renderer?: (section: Section, i: number) => null | JSX.Element; +}) { + return doc?.body.map((section, i) => { + return ( + renderer(section, i) || ( + + ) + ); + }); +} -
-

Join our Community Calls

-

- Every month, get exclusive updates from the MDN team. Share your - ideas and contributions. -

- - RSVP to the next community call - -
-
-
+function Header({ section, h1 }: { section: any; h1?: string }) { + const html = useMemo( + () => ({ __html: section.value?.content }), + [section.value?.content] + ); + return ( +
+
+

{h1}

+
- {/* 8. Celebrating community’s impact */} -
-

Celebrating community’s impact

-

- Check out the impact of our community’s efforts! These contributions - highlight how volunteers are tirelessly improving web documentation. - From fixing issues to translating content, every contribution makes a - difference. -

+
+ ); +} + +function Issues({ section }: { section: any }) { + const html = useMemo( + () => ({ __html: section.value?.content }), + [section.value?.content] + ); + const LABELS = ["good first issue", "accepting PR"]; + const { data } = useSWRImmutable( + `is:open is:issue repo:mdn/content repo:mdn/translated-content repo:mdn/yari label:"good first issue","accepting PR" sort:created-desc no:assignee is:public`, + async (query) => { + const url = new URL("https://api.github.com/search/issues"); + url.searchParams.append("per_page", "5"); + url.searchParams.append("q", query); + const res = await fetch(url); + if (res.ok) { + return await res.json(); + } + } + ); + return ( +
+

{section.value.title}

+
+
- + - {ISSUES.map((issue) => ( - + {data?.items.map(({ html_url, title, labels, repository_url }) => ( + ))}
TitleRepositoriesRepository
- - {issue.title} - -
- {issue.labels - .filter((label) => - ["good first issue", "accepting PR"].includes(label) - ) - .map((label) => ( - {label} - ))} +
+ {title} + {labels.map(({ name }) => + LABELS.includes(name) ? ( + + {name} + + ) : null + )}
- Content Repository + {repository_url.replace( + "https://api.github.com/repos/", + "" + )}
-
- {/* 9. Licensing and reuse */} -
- MDN's resources are freely available under various open-source licenses. - For detailed information on reusing MDN content, check out our{" "} - - Attribution and Copyright Licensing - {" "} - page. -
-
+ +
); } diff --git a/client/src/community/svg/chat.svg b/client/src/community/svg/chat.svg deleted file mode 100644 index 6b978e647f85..000000000000 --- a/client/src/community/svg/chat.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/client/src/community/svg/community-calls.svg b/client/src/community/svg/community-calls.svg deleted file mode 100644 index 65acf2bc0072..000000000000 --- a/client/src/community/svg/community-calls.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/client/src/community/svg/header-1.svg b/client/src/community/svg/header-1.svg deleted file mode 100644 index 6284c9993e4d..000000000000 --- a/client/src/community/svg/header-1.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/header-2.svg b/client/src/community/svg/header-2.svg deleted file mode 100644 index 20a785b67e75..000000000000 --- a/client/src/community/svg/header-2.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/header-3.svg b/client/src/community/svg/header-3.svg deleted file mode 100644 index 849430dc6055..000000000000 --- a/client/src/community/svg/header-3.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/header-background.svg b/client/src/community/svg/header-background.svg deleted file mode 100644 index 99181214ad87..000000000000 --- a/client/src/community/svg/header-background.svg +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/header-mobile.svg b/client/src/community/svg/header-mobile.svg deleted file mode 100644 index 1dd6d81a2137..000000000000 --- a/client/src/community/svg/header-mobile.svg +++ /dev/null @@ -1,379 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/tape.svg b/client/src/community/svg/tape.svg deleted file mode 100644 index 72da27ae2184..000000000000 --- a/client/src/community/svg/tape.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/client/src/community/svg/video-preview_dark.svg b/client/src/community/svg/video-preview_dark.svg deleted file mode 100644 index 604a7c51b010..000000000000 --- a/client/src/community/svg/video-preview_dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/community/svg/video-preview_light.svg b/client/src/community/svg/video-preview_light.svg deleted file mode 100644 index 65555d5d7b72..000000000000 --- a/client/src/community/svg/video-preview_light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/copy/community/index.json b/copy/community/index.json new file mode 100644 index 000000000000..30e5a858f899 --- /dev/null +++ b/copy/community/index.json @@ -0,0 +1,112 @@ +{ + "doc": { + "locale": "en-US", + "title": "MDN Community", + "mdn_url": "/en-US/community/", + "native": "English (US)", + "body": [ + { + "type": "prose", + "value": { + "id": null, + "title": null, + "isH3": false, + "content": "

Where web enthusiasts learn, collaborate, and create

\n\n
    \n
  • 45K+ Total contributors
    • \n
  • 80M+ Monthly views
    • \n
  • 200+ Weekly commits
    • \n
  • 8 Language communities
    • \n
" + } + }, + { + "type": "prose", + "value": { + "id": "mdns_community_powers_the_web", + "title": "MDN's community powers the web", + "isH3": false, + "content": "

MDN’s strength comes from the passion and dedication of our global community. Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve created a comprehensive, open, and free resource that serves web developers across the globe. With volunteers leading translation efforts in 8 languages, we’re truly international.

" + } + }, + { + "type": "prose", + "value": { + "id": "meet_our_contributors", + "title": "Meet our contributors", + "isH3": false, + "content": "

We are an open-source community of developers dedicated to building resources for a better web. Our diverse contributors, including developers, technical writers, students, educators, designers, and more, come from various backgrounds and platforms. Anyone can contribute, and each contribution strengthens our community, driving innovation and improving this vital resource for developers worldwide.

\n\n" + } + }, + { + "type": "prose", + "value": { + "id": "contributor_spotlight", + "title": "Contributor spotlight", + "isH3": false, + "content": "
    \n
  • \n
    \n

    MDN Web Docs has the most up-to-date and accurate information and the content is presented in an easy-to-understand manner. I also like that it's available in many languages (very important!).

    \n
    Yuji\n (MDN contributor)\n
    • \n
  • \n
    \n

    There are millions of web developers in China, and many of them begin their developer journey at MDN Web Docs. Contributing to MDN Web Docs is an excellent way to help people who are starting out.

    \n
    YiTao Yin\n (MDN contributor)\n
    • \n
  • \n
    \n

    When I visited the forum some months ago and saw people helping each other, I thought, \"This seems like a great way to give something back for the countless hours I spent on MDN!\". Helping others gives me the chance to improve and deepen my own understanding.

    \n
    Michael Koch\n (MDN contributor)\n
    • \n
\n

If you wish to be a part of the featured contributors here, let us know.
If you’re featured here and would like to opt-out, please file an issue on GitHub.

" + } + }, + { + "type": "prose", + "value": { + "id": "learn_how_to_get_started", + "title": "Learn how to get started", + "isH3": false, + "content": "

\n We collaborate on GitHub, our project's home, on various tasks such as writing and improving documentation, fixing bugs, and providing review feedback. It starts here, with you.\n Want to start right away, but not sure how? Follow our guide to make your first contribution.\n

\n

Watch this video on how to get started with contributing to MDN Web Docs

\n

Video from the community team on contributing to MDN

" + } + }, + { + "type": "prose", + "value": { + "id": "join_us_in_shaping_a_better_web", + "title": "Join us in shaping a better web", + "isH3": false, + "content": "

Become part of this globally cherished group that’s dedicated to documenting web technologies. Whether you’re an expert or a beginner, there’s a place for you in our inclusive community. Check out some of the ways you can contribute and engage.

\n
    \n
  • \n

    Fix issues

    Submit pull requests to fix reported issues.\n Squash bugs\n
    • \n
  • \n

    Improve content

    Fix inaccuracies and fill in missing information.\n Start writing\n
    • \n
  • \n

    Localize content

    Participate in translating content into one of our supported languages.\n Find your locale\n
    • \n
  • \n

    Answer questions

    Share your knowledge and expertise and guide fellow learners.\n Help on Discord\n
    • \n
" + } + }, + { + "type": "prose", + "value": { + "id": "help_us_fix_open_issues", + "title": "Help us fix open issues", + "isH3": false, + "content": "

New to MDN or open-source projects? Tackle our beginner-friendly issues to help improve MDN.

" + } + }, + { + "type": "prose", + "value": { + "id": "join_the_conversation", + "title": "Join the conversation", + "isH3": false, + "content": "
    \n
  • \n

    Chat with us on Discord

    Connect with the community. Engage with domain experts. Help others learn.\n Join MDN Discord\n
    • \n
  • \n

    Join our Community Call

    Every month, get exclusive updates from the MDN team. Share your ideas and contributions.\n RSVP to the next community call\n
    • \n
\n

While working in Mozilla spaces and communities, please adhere to the Mozilla Community Participation Guidelines, which promote respect, inclusion, and a harassment-free environment for all community members.

" + } + }, + { + "type": "prose", + "value": { + "id": "licensing_and_reuse", + "title": "Licensing and reuse", + "isH3": false, + "content": "

MDN's resources are freely available under various open-source licenses. For detailed information on reusing MDN content, check out our Attribution and Copyright Licensing page.

" + } + } + ], + "pageTitle": "MDN Community", + "noIndexing": false, + "toc": [ + { + "text": "MDN's community powers the web", + "id": "mdns_community_powers_the_web" + }, + { "text": "Meet our contributors", "id": "meet_our_contributors" }, + { "text": "Contributor spotlight", "id": "contributor_spotlight" }, + { "text": "Learn how to get started", "id": "learn_how_to_get_started" }, + { + "text": "Join us in shaping a better web", + "id": "join_us_in_shaping_a_better_web" + }, + { "text": "Help us fix open issues", "id": "help_us_fix_open_issues" }, + { "text": "Join the conversation", "id": "join_the_conversation" }, + { "text": "Licensing and reuse", "id": "licensing_and_reuse" } + ] + }, + "pageTitle": "MDN Community", + "locale": "en-US", + "url": "/en-US/community/" +} diff --git a/copy/community/index.md b/copy/community/index.md new file mode 100644 index 000000000000..06e874cac5cb --- /dev/null +++ b/copy/community/index.md @@ -0,0 +1,154 @@ +--- +template: community +--- + +# MDN Community + +Where web enthusiasts learn, collaborate, and create + +- [Start contributing](#join-us-in-shaping-a-better-web) +- [Join MDN Discord](/discord) + + + +- **45K+** Total contributors +- **80M+** Monthly views +- **200+** Weekly commits +- **8** Language communities + +## MDN's community powers the web + +MDN’s strength comes from the passion and dedication of our global community. +Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve +created a comprehensive, open, and free resource that serves web developers +across the globe. With volunteers leading translation efforts in +[8 languages](/en-US/docs/MDN/Community/Contributing/Translated_content), we’re +truly international. + +## Meet our contributors + +We are an open-source community of developers dedicated to building resources +for a better web. Our diverse contributors, including developers, technical +writers, students, educators, designers, and more, come from various backgrounds +and platforms. Anyone can contribute, and each contribution strengthens our +community, driving innovation and improving this vital resource for developers +worldwide. + +- [Join us](/en-US/docs/MDN/Community/Contributing/Getting_started) +- [View all contributors](https://github.com/mdn/content/graphs/contributors) + + + +- ![GitHub profile picture](https://github.com/JasonLamv-t.png?size=160) + [Jason Lam, 林家祥](https://github.com/JasonLamv-t) Grantit +- ![GitHub profile picture](https://github.com/nicolo-ribaudo.png?size=160) + [Nicolò Ribaudo](https://github.com/nicolo-ribaudo) Igalia +- ![GitHub profile picture](https://github.com/Josh-Cena.png?size=160) + [Joshua Chen](https://github.com/Josh-Cena) +- ![GitHub profile picture](https://github.com/c17an.png?size=160) + [Kimchanmin](https://github.com/c17an) SK Planet +- ![GitHub profile picture](https://github.com/givvemee.png?size=160) + [Gibbeum Yoon](https://github.com/givvemee) +- ![GitHub profile picture](https://github.com/wisedog.png?size=160) + [Jongha Kim](https://github.com/wisedog) +- ![GitHub profile picture](https://github.com/PassionPenguin.png?size=160) + [Qizhe ZHANG](https://github.com/PassionPenguin) +- ![GitHub profile picture](https://github.com/saionaro.png?size=160) + [Artem Shibakov](https://github.com/saionaro) Bright Data + +## Contributor spotlight + +- > MDN Web Docs has the most up-to-date and accurate information and the + > content is presented in an easy-to-understand manner. I also like that it's + > available in many languages (very important!). + + [Yuji](/en-US/community/spotlight/yuji) (MDN contributor) + +- > There are millions of web developers in China, and many of them begin their + > developer journey at MDN Web Docs. Contributing to MDN Web Docs is an + > excellent way to help people who are starting out. + + [YiTao Yin](/en-US/community/spotlight/yitao-yin) (MDN contributor) + +- > When I visited the forum some months ago and saw people helping each other, + > I thought, "This seems like a great way to give something back for the + > countless hours I spent on MDN!". Helping others gives me the chance to + > improve and deepen my own understanding. + + [Michael Koch](/en-US/community/spotlight/michael-koch) (MDN contributor) + +If you wish to be a part of the featured contributors here, +[let us know](https://docs.google.com/forms/d/171RuXZoNs1gQmlJtfTiiU-hFo_odvi6rkx5fH-nqXDY/prefill).
+If you’re featured here and would like to opt-out, +[please file an issue on GitHub](https://github.com/mdn/content/issues/new?assignees=&labels=needs+triage&projects=&template=content-bug.yml). + +## Learn how to get started + +We collaborate on [GitHub](https://github.com/mdn), our project's home, on +various tasks such as writing and improving documentation, fixing bugs, and +providing review feedback. It starts here, with you. Want to start right away, +but not sure how? Follow +[our guide](https://github.com/mdn/content/blob/main/CONTRIBUTING.md#mdn-web-docs-contribution-guide) +to make your first contribution. + +Watch this video on +[how to get started with contributing to MDN Web Docs](https://www.youtube.com/watch?v=Xnhnu7PViQE) + +[Video from the community team on contributing to MDN](https://www.youtube.com/watch?v=Xnhnu7PViQE) + +## Join us in shaping a better web + +Become part of this globally cherished group that’s dedicated to documenting web +technologies. Whether you’re an expert or a beginner, there’s a place for you in +our inclusive community. Check out some of the ways you can contribute and +engage. + +- ### Fix issues + + Submit pull requests to fix reported issues. + [Squash bugs](https://github.com/mdn/content/issues) + +- ### Improve content + + Fix inaccuracies and fill in missing information. + [Start writing](https://github.com/mdn/content/#readme) + +- ### Localize content + + Participate in translating content into one of our supported languages. + [Find your locale](/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales) + +- ### Answer questions + + Share your knowledge and expertise and guide fellow learners. + [Help on Discord](/discord) + +## Help us fix open issues + +New to MDN or open-source projects? Tackle our beginner-friendly issues to help +improve MDN. + +## Join the conversation + +- ### Chat with us on Discord + + Connect with the community. Engage with domain experts. Help others learn. + [Join MDN Discord](/discord) + +- ### Join our Community Call + + Every month, get exclusive updates from the MDN team. Share your ideas and + contributions. + [RSVP to the next community call](https://github.com/mdn/community-meetings?tab=readme-ov-file#mdn-community-meetings) + +While working in Mozilla spaces and communities, please adhere to the +[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/), +which promote respect, inclusion, and a harassment-free environment for all +community members. + +## Licensing and reuse + +MDN's resources are freely available under various open-source licenses. For +detailed information on reusing MDN content, check out our +[Attribution and Copyright Licensing](https://developer.mozilla.org/en-US/docs/MDN/About#using_mdn_web_docs_content) +page. diff --git a/libs/constants/index.js b/libs/constants/index.js index cf445f4149f2..0b7f33c29e43 100644 --- a/libs/constants/index.js +++ b/libs/constants/index.js @@ -115,6 +115,9 @@ export const CSP_DIRECTIVES = { "https://observatory-api.mdn.allizom.net", "https://observatory-api.mdn.mozilla.net", + // Community + "https://api.github.com", + "stats.g.doubleclick.net", "https://api.stripe.com", ], @@ -149,6 +152,7 @@ export const CSP_DIRECTIVES = { "firefoxusercontent.com", "profile.stage.mozaws.net", "profile.accounts.firefox.com", + "https://github.com", "mdn.dev", "interactive-examples.mdn.mozilla.net", From 146d02b44535fd3e59a4e5c0b1eb26f81b01c7b6 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 19 Aug 2024 14:05:29 +0000 Subject: [PATCH 09/44] fix(community): ensure csp doesn't block circle background --- libs/constants/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/constants/index.js b/libs/constants/index.js index 0b7f33c29e43..b60a6ccab9f7 100644 --- a/libs/constants/index.js +++ b/libs/constants/index.js @@ -116,7 +116,7 @@ export const CSP_DIRECTIVES = { "https://observatory-api.mdn.mozilla.net", // Community - "https://api.github.com", + "https://api.github.com/search/issues", "stats.g.doubleclick.net", "https://api.stripe.com", @@ -143,6 +143,7 @@ export const CSP_DIRECTIVES = { ], "img-src": [ "'self'", + "data:", // Avatars "*.githubusercontent.com", From dc3317aeec9eaa18dc2260f22b7f8f806b62b47b Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Tue, 20 Aug 2024 10:16:50 +0200 Subject: [PATCH 10/44] fix(search): don't index non doc pages --- deployer/src/deployer/search/__init__.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/deployer/src/deployer/search/__init__.py b/deployer/src/deployer/search/__init__.py index 06da5e8ebd79..dfdb286dbe7b 100644 --- a/deployer/src/deployer/search/__init__.py +++ b/deployer/src/deployer/search/__init__.py @@ -217,8 +217,8 @@ def to_search(file, _index=None): return doc = data["doc"] - if doc["mdn_url"].startswith("/en-US/curriculum/"): - # Skip curriculum content for now. + if "/docs/" not in doc["mdn_url"]: + # Skip non docs content for now. return locale, slug = doc["mdn_url"].split("/docs/", 1) From c1e7e6c8285afe5ad7a560386dab00f24b69e3d1 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 23 Aug 2024 15:57:45 +0000 Subject: [PATCH 11/44] fix(community): design tweaks from design review https://mozilla-hub.atlassian.net/browse/MP-1457 --- client/src/assets/community/video-bg-dark.svg | 20 --- client/src/assets/community/video-bg.svg | 20 --- client/src/community/index.scss | 128 ++++++++++-------- 3 files changed, 69 insertions(+), 99 deletions(-) diff --git a/client/src/assets/community/video-bg-dark.svg b/client/src/assets/community/video-bg-dark.svg index 85314eab09ff..3cbd3d0c845f 100644 --- a/client/src/assets/community/video-bg-dark.svg +++ b/client/src/assets/community/video-bg-dark.svg @@ -1,7 +1,5 @@ - - @@ -9,22 +7,4 @@ - - - - - - - - - - - - - - - - - - diff --git a/client/src/assets/community/video-bg.svg b/client/src/assets/community/video-bg.svg index aa2fac87eacc..4e57ae8435c2 100644 --- a/client/src/assets/community/video-bg.svg +++ b/client/src/assets/community/video-bg.svg @@ -1,7 +1,5 @@ - - @@ -9,22 +7,4 @@ - - - - - - - - - - - - - - - - - - diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 56539fde354c..60d35b7e504e 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -1,8 +1,7 @@ @use "../ui/vars" as *; @mixin light-theme { - --community-bg-primary: #fff; - --community-bg-primary-alt: #fff; + --community-bg-primary: #fcfcfc; --community-bg-secondary: #f2f2f5; --community-text-primary: #000; --community-text-primary-alt: #000; @@ -13,13 +12,13 @@ --community-header-stats-bg: #e1f5e5; --community-box-shadow: 4px -2px 1rem 0 rgba(179, 179, 179, 0.2), 4px -4px 1rem 0 rgba(179, 179, 179, 0.15); - --community-button-bg-alt: #fff; --community-circle-img-border: #fff; --community-circle-bg: url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'); --community-quote-start: url("../assets/community/quote-start.svg"); --community-quote-end: url("../assets/community/quote-end.svg"); --community-video-bg: url("../assets/community/video-bg.svg"); + --community-card-bg: #fff; --community-card-header-bg: #e1f5e5; --community-card-border: #e2e2e2; --community-table-border: #e2e2e2; @@ -31,7 +30,6 @@ @mixin dark-theme { --community-bg-primary: #101010; - --community-bg-primary-alt: #000; --community-bg-secondary: #1b1b1b; --community-text-primary: #fff; --community-text-primary-alt: #cdcdcd; @@ -42,13 +40,13 @@ --community-header-stats-bg: #394035; --community-box-shadow: 4px -2px 15px 0 rgba(38, 38, 38, 0.2), 4px -4px 15px 0 rgba(38, 38, 38, 0.15); - --community-button-bg-alt: none; - --community-circle-img-border: #1b1b1b; + --community-circle-img-border: #4e4e4e; --community-circle-bg: url('data:image/svg+xml;utf8,'), url('data:image/svg+xml;utf8,'); --community-quote-start: url("../assets/community/quote-start-dark.svg"); --community-quote-end: url("../assets/community/quote-end-dark.svg"); --community-video-bg: url("../assets/community/video-bg-dark.svg"); + --community-card-bg: #000; --community-card-header-bg: #354039; --community-card-border: #343434; --community-table-border: #1b1b1b; @@ -81,6 +79,15 @@ main.community-container { --community-stats-height: 5.75rem; --community-section-gap: 10rem; + --button-bg: var(--button-primary-default); + --button-bg-hover: var(--button-primary-hover); + --button-bg-active: var(--button-primary-active); + --button-border-color: var(--button-primary-default); + --button-color: var(--background-primary); + --button-font: var(--type-emphasis-m); + --button-padding: 0.43em 0.6em; + --button-radius: 0.25rem; + background: var(--community-bg-secondary); color: var(--community-text-secondary); letter-spacing: var(--heading-letter-spacing); @@ -102,6 +109,16 @@ main.community-container { &.external:after { display: none; } + + &:hover { + --button-border-color: var(--button-bg-hover); + --button-bg: var(--button-bg-hover); + text-decoration: none; + } + + &:active { + --button-bg: var(--button-bg-active); + } } h2, @@ -177,39 +194,37 @@ main.community-container { p { color: var(--community-header-text); - margin-bottom: 2rem; + margin-bottom: 1.5rem; } ul:first-of-type { display: flex; flex-wrap: wrap; - gap: 1.3125rem; + gap: 1rem; @media (max-width: $screen-md) { justify-content: center; } a { - background: var(--community-bg-primary); - border: 1px solid var(--community-text-primary); - border-radius: 0.5rem; - color: var(--community-text-primary); - display: block; - font-size: 1.25rem; - font-weight: 500; - line-height: 120%; /* 1.5rem */ - padding: 0.625rem; text-decoration: none; + font: var(--button-font); + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + padding: var(--button-padding); + display: inline-block; } - li:first-child a { - background: var(--community-text-primary); - color: var(--community-bg-primary-alt); + li:last-child a { + --button-color: var(--button-bg); + background: transparent; } } ul:last-of-type { - background: var(--community-bg-primary-alt); + background: var(--community-card-bg); border-radius: 0.5rem; box-shadow: var(--community-box-shadow); color: var(--community-text-primary); @@ -230,11 +245,12 @@ main.community-container { li { align-items: baseline; - column-gap: 1.38rem; + column-gap: 1rem; display: flex; flex-wrap: wrap; justify-content: center; overflow-wrap: anywhere; + min-width: 7.75rem; @media (max-width: $screen-md) { align-items: center; @@ -252,7 +268,6 @@ main.community-container { height: 3.75rem; justify-content: center; letter-spacing: -0.03125rem; - margin: 0 2rem; width: 3.75rem; } } @@ -300,29 +315,27 @@ main.community-container { display: flex; flex-wrap: wrap; - gap: 2.12rem; - margin-top: 2rem; + gap: 1rem; + margin-top: 1.5rem; @media (max-width: $screen-md) { justify-content: center; } a { - background: var(--community-button-bg-alt); - border: 1px solid var(--community-text-primary); - border-radius: 0.5rem; - color: var(--community-text-primary); - display: block; - font-size: 1.25rem; - font-weight: 500; - line-height: 120%; - padding: 0.625rem 3rem; text-decoration: none; + font: var(--button-font); + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + padding: var(--button-padding); + display: inline-block; } - li:first-child a { - background: var(--community-text-primary); - color: var(--community-bg-primary-alt); + li:last-child a { + --button-color: var(--button-bg); + background: transparent; } } @@ -367,10 +380,7 @@ main.community-container { } a { - font-size: 1.375rem; - font-weight: 600; - line-height: 120%; /* 1.65rem */ - text-decoration-line: underline; + font-weight: 500; } } } @@ -467,7 +477,7 @@ main.community-container { } li { - background: var(--community-bg-primary-alt); + background: var(--community-card-bg); border-radius: 0.5rem; box-shadow: var(--community-box-shadow); display: block; @@ -592,7 +602,7 @@ main.community-container { li { align-items: center; - background: var(--community-bg-primary-alt); + background: var(--community-card-bg); border: 1px solid var(--community-card-border); border-radius: 0.5rem; box-shadow: var(--community-box-shadow); @@ -616,14 +626,14 @@ main.community-container { } a { - background: var(--community-text-primary); - border-radius: 0.5rem; - color: var(--community-bg-primary-alt); - font-size: 1.25rem; - font-weight: 500; - line-height: 120%; /* 1.5rem */ - padding: 0.62rem; text-decoration: none; + font: var(--button-font); + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + padding: var(--button-padding); + display: inline-block; } } } @@ -656,7 +666,7 @@ main.community-container { } table { - background: var(--community-bg-primary-alt); + background: var(--community-card-bg); border: 1px solid var(--community-table-border); border-collapse: separate; border-radius: 0.5rem; @@ -715,6 +725,7 @@ main.community-container { } li { + background: var(--community-card-bg); align-items: flex-start; border: 1px solid var(--community-table-border); border-radius: 0.5rem; @@ -762,15 +773,14 @@ main.community-container { } a { - background: var(--community-text-primary); - border-radius: 0.5rem; - color: var(--community-bg-primary-alt); - font-size: 1.25rem; - font-weight: 500; - line-height: 120%; /* 1.5rem */ - padding: 0.62rem; - text-align: center; text-decoration: none; + font: var(--button-font); + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + padding: var(--button-padding); + display: inline-block; } } } From d92c98fa4cdbcd4f08bf3a04fa27a5b24d924078 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 23 Aug 2024 16:03:46 +0000 Subject: [PATCH 12/44] fix(community): stylelint https://mozilla-hub.atlassian.net/browse/MP-1457 --- client/src/community/index.scss | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 60d35b7e504e..cc961a28d514 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -207,14 +207,14 @@ main.community-container { } a { - text-decoration: none; - font: var(--button-font); background-color: var(--button-bg); border: 1px solid var(--button-border-color); border-radius: var(--button-radius); color: var(--button-color); - padding: var(--button-padding); display: inline-block; + font: var(--button-font); + padding: var(--button-padding); + text-decoration: none; } li:last-child a { @@ -249,8 +249,8 @@ main.community-container { display: flex; flex-wrap: wrap; justify-content: center; - overflow-wrap: anywhere; min-width: 7.75rem; + overflow-wrap: anywhere; @media (max-width: $screen-md) { align-items: center; @@ -323,14 +323,14 @@ main.community-container { } a { - text-decoration: none; - font: var(--button-font); background-color: var(--button-bg); border: 1px solid var(--button-border-color); border-radius: var(--button-radius); color: var(--button-color); - padding: var(--button-padding); display: inline-block; + font: var(--button-font); + padding: var(--button-padding); + text-decoration: none; } li:last-child a { @@ -626,14 +626,14 @@ main.community-container { } a { - text-decoration: none; - font: var(--button-font); background-color: var(--button-bg); border: 1px solid var(--button-border-color); border-radius: var(--button-radius); color: var(--button-color); - padding: var(--button-padding); display: inline-block; + font: var(--button-font); + padding: var(--button-padding); + text-decoration: none; } } } @@ -725,8 +725,8 @@ main.community-container { } li { - background: var(--community-card-bg); align-items: flex-start; + background: var(--community-card-bg); border: 1px solid var(--community-table-border); border-radius: 0.5rem; box-shadow: var(--community-box-shadow); @@ -773,14 +773,14 @@ main.community-container { } a { - text-decoration: none; - font: var(--button-font); background-color: var(--button-bg); border: 1px solid var(--button-border-color); border-radius: var(--button-radius); color: var(--button-color); - padding: var(--button-padding); display: inline-block; + font: var(--button-font); + padding: var(--button-padding); + text-decoration: none; } } } From 78d90c111718dad17bb815c43a07d03e9cd4bc07 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 23 Aug 2024 16:15:24 +0000 Subject: [PATCH 13/44] fix(community): fix links, update contributors in spotlight https://mozilla-hub.atlassian.net/browse/MP-1458 https://mozilla-hub.atlassian.net/browse/MP-1446 https://mozilla-hub.atlassian.net/browse/MP-1447 --- client/src/community/index.tsx | 6 +++++- copy/community/index.json | 18 +++++++++--------- copy/community/index.md | 26 +++++++++++--------------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 7de3baf28ee4..437d828e3898 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -138,7 +138,9 @@ function Issues({ section }: { section: any }) {
- {title} + + {title} + {labels.map(({ name }) => LABELS.includes(name) ? ( @@ -154,6 +156,8 @@ function Issues({ section }: { section: any }) { "https://api.github.com/repos/", "https://github.com/" )} + target="_blank" + rel="noreferrer" > {repository_url.replace( "https://api.github.com/repos/", diff --git a/copy/community/index.json b/copy/community/index.json index 30e5a858f899..4dcd59d3ce09 100644 --- a/copy/community/index.json +++ b/copy/community/index.json @@ -11,7 +11,7 @@ "id": null, "title": null, "isH3": false, - "content": "

Where web enthusiasts learn, collaborate, and create

\n\n
    \n
  • 45K+ Total contributors
    • \n
  • 80M+ Monthly views
    • \n
  • 200+ Weekly commits
    • \n
  • 8 Language communities
    • \n
" + "content": "

Where web enthusiasts learn, collaborate, and create

\n\n
    \n
  • 45K+ Total contributors
    • \n
  • 80M+ Monthly views
    • \n
  • 200+ Weekly commits
    • \n
  • 8 Language communities
    • \n
" } }, { @@ -20,7 +20,7 @@ "id": "mdns_community_powers_the_web", "title": "MDN's community powers the web", "isH3": false, - "content": "

MDN’s strength comes from the passion and dedication of our global community. Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve created a comprehensive, open, and free resource that serves web developers across the globe. With volunteers leading translation efforts in 8 languages, we’re truly international.

" + "content": "

\n MDN’s strength comes from the passion and dedication of our global community.\n Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve\n created a comprehensive, open, and free resource that serves web developers\n across the globe. With volunteers leading translation efforts in\n 8 languages, we’re\n truly international.\n

" } }, { @@ -29,7 +29,7 @@ "id": "meet_our_contributors", "title": "Meet our contributors", "isH3": false, - "content": "

We are an open-source community of developers dedicated to building resources for a better web. Our diverse contributors, including developers, technical writers, students, educators, designers, and more, come from various backgrounds and platforms. Anyone can contribute, and each contribution strengthens our community, driving innovation and improving this vital resource for developers worldwide.

\n\n" + "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n" } }, { @@ -38,7 +38,7 @@ "id": "contributor_spotlight", "title": "Contributor spotlight", "isH3": false, - "content": "
    \n
  • \n
    \n

    MDN Web Docs has the most up-to-date and accurate information and the content is presented in an easy-to-understand manner. I also like that it's available in many languages (very important!).

    \n
    Yuji\n (MDN contributor)\n
    • \n
  • \n
    \n

    There are millions of web developers in China, and many of them begin their developer journey at MDN Web Docs. Contributing to MDN Web Docs is an excellent way to help people who are starting out.

    \n
    YiTao Yin\n (MDN contributor)\n
    • \n
  • \n
    \n

    When I visited the forum some months ago and saw people helping each other, I thought, \"This seems like a great way to give something back for the countless hours I spent on MDN!\". Helping others gives me the chance to improve and deepen my own understanding.

    \n
    Michael Koch\n (MDN contributor)\n
    • \n
\n

If you wish to be a part of the featured contributors here, let us know.
If you’re featured here and would like to opt-out, please file an issue on GitHub.

" + "content": "
    \n
  • \n
    \n

    \n There are many other things I like about MDN: the openness of its\n governance, the respect for contributors' work, the professional\n conversations, and the always timely reviews. MDN has consistently\n demonstrated the ideal form of an open-source project.\n

    \n
    Joshua Chen (MDN contributor)\n
    • \n
  • \n
    \n

    \n MDN Web Docs has the most up-to-date and accurate information and the\n content is presented in an easy-to-understand manner. I also like that it's\n available in many languages (very important!).\n

    \n
    Yuji (MDN contributor)\n
    • \n
  • \n
    \n

    \n There are millions of web developers in China, and many of them begin their\n developer journey at MDN Web Docs. Contributing to MDN Web Docs is an\n excellent way to help people who are starting out.\n

    \n
    YiTao Yin (MDN contributor)\n
    • \n
\n

\n If you wish to be a part of the featured contributors here,\n let us know.
If you’re featured here and would like to opt-out,\n please file an issue on GitHub.\n

" } }, { @@ -47,7 +47,7 @@ "id": "learn_how_to_get_started", "title": "Learn how to get started", "isH3": false, - "content": "

\n We collaborate on GitHub, our project's home, on various tasks such as writing and improving documentation, fixing bugs, and providing review feedback. It starts here, with you.\n Want to start right away, but not sure how? Follow our guide to make your first contribution.\n

\n

Watch this video on how to get started with contributing to MDN Web Docs

\n

Video from the community team on contributing to MDN

" + "content": "

\n We collaborate on GitHub, our project's home, on\n various tasks such as writing and improving documentation, fixing bugs, and\n providing review feedback. It starts here, with you. Want to start right away,\n but not sure how? Follow\n our guide\n to make your first contribution.\n

\n

\n Watch this video on\n how to get started with contributing to MDN Web Docs\n

\n

Video from the community team on contributing to MDN

" } }, { @@ -56,7 +56,7 @@ "id": "join_us_in_shaping_a_better_web", "title": "Join us in shaping a better web", "isH3": false, - "content": "

Become part of this globally cherished group that’s dedicated to documenting web technologies. Whether you’re an expert or a beginner, there’s a place for you in our inclusive community. Check out some of the ways you can contribute and engage.

\n
    \n
  • \n

    Fix issues

    Submit pull requests to fix reported issues.\n Squash bugs\n
    • \n
  • \n

    Improve content

    Fix inaccuracies and fill in missing information.\n Start writing\n
    • \n
  • \n

    Localize content

    Participate in translating content into one of our supported languages.\n Find your locale\n
    • \n
  • \n

    Answer questions

    Share your knowledge and expertise and guide fellow learners.\n Help on Discord\n
    • \n
" + "content": "

\n Become part of this globally cherished group that’s dedicated to documenting web\n technologies. Whether you’re an expert or a beginner, there’s a place for you in\n our inclusive community. Check out some of the ways you can contribute and\n engage.\n

\n
    \n
  • \n

    Fix issues

    Submit pull requests to fix reported issues.\n Squash bugs\n
    • \n
  • \n

    Improve content

    Fix inaccuracies and fill in missing information.\n Start writing\n
    • \n
  • \n

    Localize content

    Participate in translating content into one of our supported languages.\n Find your locale\n
    • \n
  • \n

    Answer questions

    Share your knowledge and expertise and guide fellow learners.\n Help on Discord\n
    • \n
" } }, { @@ -65,7 +65,7 @@ "id": "help_us_fix_open_issues", "title": "Help us fix open issues", "isH3": false, - "content": "

New to MDN or open-source projects? Tackle our beginner-friendly issues to help improve MDN.

" + "content": "

\n New to MDN or open-source projects? Tackle our beginner-friendly issues to help\n improve MDN.\n

" } }, { @@ -74,7 +74,7 @@ "id": "join_the_conversation", "title": "Join the conversation", "isH3": false, - "content": "
    \n
  • \n

    Chat with us on Discord

    Connect with the community. Engage with domain experts. Help others learn.\n Join MDN Discord\n
    • \n
  • \n

    Join our Community Call

    Every month, get exclusive updates from the MDN team. Share your ideas and contributions.\n RSVP to the next community call\n
    • \n
\n

While working in Mozilla spaces and communities, please adhere to the Mozilla Community Participation Guidelines, which promote respect, inclusion, and a harassment-free environment for all community members.

" + "content": "
    \n
  • \n

    Chat with us on Discord

    Connect with the community. Engage with domain experts. Help others learn.\n Join MDN Discord\n
    • \n
  • \n

    Join our Community Call

    Every month, get exclusive updates from the MDN team. Share your ideas and\n contributions.\n RSVP to the next community call\n
    • \n
\n

\n While working in Mozilla spaces and communities, please adhere to the\n Mozilla Community Participation Guidelines,\n which promote respect, inclusion, and a harassment-free environment for all\n community members.\n

" } }, { @@ -83,7 +83,7 @@ "id": "licensing_and_reuse", "title": "Licensing and reuse", "isH3": false, - "content": "

MDN's resources are freely available under various open-source licenses. For detailed information on reusing MDN content, check out our Attribution and Copyright Licensing page.

" + "content": "

\n MDN's resources are freely available under various open-source licenses. For\n detailed information on reusing MDN content, check out our\n Attribution and Copyright Licensing\n page.\n

" } } ], diff --git a/copy/community/index.md b/copy/community/index.md index 06e874cac5cb..57f5b3963bcc 100644 --- a/copy/community/index.md +++ b/copy/community/index.md @@ -1,13 +1,9 @@ ---- -template: community ---- - # MDN Community Where web enthusiasts learn, collaborate, and create -- [Start contributing](#join-us-in-shaping-a-better-web) -- [Join MDN Discord](/discord) +- [Start contributing](#join_us_in_shaping_a_better_web) +- [Join MDN Discord](https://mdn.dev/discord) @@ -58,6 +54,13 @@ worldwide. ## Contributor spotlight +- > There are many other things I like about MDN: the openness of its + > governance, the respect for contributors' work, the professional + > conversations, and the always timely reviews. MDN has consistently + > demonstrated the ideal form of an open-source project. + + [Joshua Chen](/en-US/community/spotlight/joshua-chen) (MDN contributor) + - > MDN Web Docs has the most up-to-date and accurate information and the > content is presented in an easy-to-understand manner. I also like that it's > available in many languages (very important!). @@ -70,13 +73,6 @@ worldwide. [YiTao Yin](/en-US/community/spotlight/yitao-yin) (MDN contributor) -- > When I visited the forum some months ago and saw people helping each other, - > I thought, "This seems like a great way to give something back for the - > countless hours I spent on MDN!". Helping others gives me the chance to - > improve and deepen my own understanding. - - [Michael Koch](/en-US/community/spotlight/michael-koch) (MDN contributor) - If you wish to be a part of the featured contributors here, [let us know](https://docs.google.com/forms/d/171RuXZoNs1gQmlJtfTiiU-hFo_odvi6rkx5fH-nqXDY/prefill).
If you’re featured here and would like to opt-out, @@ -121,7 +117,7 @@ engage. - ### Answer questions Share your knowledge and expertise and guide fellow learners. - [Help on Discord](/discord) + [Help on Discord](https://mdn.dev/discord) ## Help us fix open issues @@ -133,7 +129,7 @@ improve MDN. - ### Chat with us on Discord Connect with the community. Engage with domain experts. Help others learn. - [Join MDN Discord](/discord) + [Join MDN Discord](https://mdn.dev/discord) - ### Join our Community Call From a065e13ea2fde90fa5302a97de31a7c0d83a5803 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 23 Aug 2024 16:36:08 +0000 Subject: [PATCH 14/44] fix(community): add gap between contributor sections on mobile https://mozilla-hub.atlassian.net/browse/MP-1449 --- client/src/community/index.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index cc961a28d514..66ad6033805d 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -289,7 +289,8 @@ main.community-container { grid-template-columns: 4fr 6fr; @media (max-width: $screen-md) { - --community-circle-height: 0; + /* stylelint-disable-next-line length-zero-no-unit */ + --community-circle-height: 0rem; display: block; } From c89164d60c70c327b4f253538a7d1619c9946836 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 6 Sep 2024 11:19:18 +0000 Subject: [PATCH 15/44] chore(community): revert webpack changes --- client/config/webpack.config.js | 1 - ssr/webpack.config.js | 1 - 2 files changed, 2 deletions(-) diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index f2bc9dba9103..db2139910913 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -245,7 +245,6 @@ function config(webpackEnv) { plugins: [{ removeViewBox: false }], }, titleProp: true, - throwIfNamespace: false, ref: true, }, }, diff --git a/ssr/webpack.config.js b/ssr/webpack.config.js index d0dd5de9c0ee..64a4195de08d 100644 --- a/ssr/webpack.config.js +++ b/ssr/webpack.config.js @@ -51,7 +51,6 @@ const config = { plugins: [{ removeViewBox: false }], }, titleProp: true, - throwIfNamespace: false, ref: true, }, }, From 9e19c6f6974e8b877b4c3124099e09ed74f404fe Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 10 Sep 2024 15:56:23 +0000 Subject: [PATCH 16/44] fix(community): use avatars.githubusercontent.com directly to avoid cookie warnings also add readme for build hack --- copy/community/README.md | 18 ++++++++++++++++++ copy/community/index.json | 2 +- copy/community/index.md | 16 ++++++++-------- 3 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 copy/community/README.md diff --git a/copy/community/README.md b/copy/community/README.md new file mode 100644 index 000000000000..f077d82a57c9 --- /dev/null +++ b/copy/community/README.md @@ -0,0 +1,18 @@ +Massive temporary hack: + +```bash +cd yari +cp copy/community/index.md ../curriculum/curriculum/ +yarn build:curriculum +``` + +This will build into `client/build/en-us/curriculum/index/index.json`, open that +file: + +```bash +code client/build/en-us/curriculum/index/index.json +``` + +Format the file, then manually update all the wrong references to curriculum: +alternatively, if you've only changed the sections just copy the `body` key into +`copy/community/index.json`. diff --git a/copy/community/index.json b/copy/community/index.json index 4dcd59d3ce09..58081a95fd5c 100644 --- a/copy/community/index.json +++ b/copy/community/index.json @@ -29,7 +29,7 @@ "id": "meet_our_contributors", "title": "Meet our contributors", "isH3": false, - "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n" + "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n" } }, { diff --git a/copy/community/index.md b/copy/community/index.md index 57f5b3963bcc..fa551548ffc5 100644 --- a/copy/community/index.md +++ b/copy/community/index.md @@ -35,21 +35,21 @@ worldwide. -- ![GitHub profile picture](https://github.com/JasonLamv-t.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/JasonLamv-t?size=160) [Jason Lam, 林家祥](https://github.com/JasonLamv-t) Grantit -- ![GitHub profile picture](https://github.com/nicolo-ribaudo.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/nicolo-ribaudo?size=160) [Nicolò Ribaudo](https://github.com/nicolo-ribaudo) Igalia -- ![GitHub profile picture](https://github.com/Josh-Cena.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/Josh-Cena?size=160) [Joshua Chen](https://github.com/Josh-Cena) -- ![GitHub profile picture](https://github.com/c17an.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/c17an?size=160) [Kimchanmin](https://github.com/c17an) SK Planet -- ![GitHub profile picture](https://github.com/givvemee.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/givvemee?size=160) [Gibbeum Yoon](https://github.com/givvemee) -- ![GitHub profile picture](https://github.com/wisedog.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/wisedog?size=160) [Jongha Kim](https://github.com/wisedog) -- ![GitHub profile picture](https://github.com/PassionPenguin.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/PassionPenguin?size=160) [Qizhe ZHANG](https://github.com/PassionPenguin) -- ![GitHub profile picture](https://github.com/saionaro.png?size=160) +- ![GitHub profile picture](https://avatars.githubusercontent.com/saionaro?size=160) [Artem Shibakov](https://github.com/saionaro) Bright Data ## Contributor spotlight From 8c2e6f64a2def1b142a39aa1fa7c80fb72d18e0f Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 10 Sep 2024 16:00:30 +0000 Subject: [PATCH 17/44] fix(community): react item key error --- client/src/community/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 437d828e3898..169ae01e1703 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -29,7 +29,7 @@ export function Community(appProps: HydrationData) { /> ); } else if (section.value.id === "help_us_fix_open_issues") { - return ; + return ; } return null; }} From 235f40e7f8819b2ff7c25cf1218542ead065af95 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 10 Sep 2024 17:01:05 +0000 Subject: [PATCH 18/44] fix(community): match button padding to login button https://mozilla-hub.atlassian.net/browse/MP-1457?focusedCommentId=932467 --- client/src/community/index.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 66ad6033805d..533b1bee81fb 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -85,7 +85,7 @@ main.community-container { --button-border-color: var(--button-primary-default); --button-color: var(--background-primary); --button-font: var(--type-emphasis-m); - --button-padding: 0.43em 0.6em; + --button-padding: 0.43rem 1rem; --button-radius: 0.25rem; background: var(--community-bg-secondary); @@ -213,6 +213,7 @@ main.community-container { color: var(--button-color); display: inline-block; font: var(--button-font); + letter-spacing: normal; padding: var(--button-padding); text-decoration: none; } @@ -330,6 +331,7 @@ main.community-container { color: var(--button-color); display: inline-block; font: var(--button-font); + letter-spacing: normal; padding: var(--button-padding); text-decoration: none; } @@ -633,6 +635,7 @@ main.community-container { color: var(--button-color); display: inline-block; font: var(--button-font); + letter-spacing: normal; padding: var(--button-padding); text-decoration: none; } @@ -780,6 +783,7 @@ main.community-container { color: var(--button-color); display: inline-block; font: var(--button-font); + letter-spacing: normal; padding: var(--button-padding); text-decoration: none; } From 261f340c229ab62e62996fa4e1298c183f1daa96 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 10 Sep 2024 17:56:07 +0000 Subject: [PATCH 19/44] fix(community): cache github issues response in localstorage to mitigate ratelimiting https://mozilla-hub.atlassian.net/browse/MP-1452 --- client/src/community/index.tsx | 56 +++++++++++++++++++--------------- client/src/utils.ts | 40 ++++++++++++++++++++++++ 2 files changed, 72 insertions(+), 24 deletions(-) diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 169ae01e1703..e436c1b0bba7 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,12 +1,12 @@ import "./index.scss"; import { HydrationData } from "../../../libs/types/hydration"; import { useMemo } from "react"; -import useSWRImmutable from "swr/immutable"; import { Section } from "../../../libs/types/document"; -import useSWR from "swr"; +import useSWR, { SWRConfig } from "swr"; import { HTTPError } from "../document"; import { WRITER_MODE } from "../env"; import { Prose } from "../document/ingredients/prose"; +import { SWRLocalStorageCache } from "../utils"; interface CommunityDoc { title: string; @@ -16,25 +16,29 @@ interface CommunityDoc { export function Community(appProps: HydrationData) { const doc = useCommunityDoc(appProps); return ( -
- { - if (i === 0) { - return ( -
- ); - } else if (section.value.id === "help_us_fix_open_issues") { - return ; - } - return null; - }} - /> -
+ new SWRLocalStorageCache("community") }} + > +
+ { + if (i === 0) { + return ( +
+ ); + } else if (section.value.id === "help_us_fix_open_issues") { + return ; + } + return null; + }} + /> +
+ ); } @@ -109,16 +113,20 @@ function Issues({ section }: { section: any }) { [section.value?.content] ); const LABELS = ["good first issue", "accepting PR"]; - const { data } = useSWRImmutable( + const { data } = useSWR( `is:open is:issue repo:mdn/content repo:mdn/translated-content repo:mdn/yari label:"good first issue","accepting PR" sort:created-desc no:assignee is:public`, async (query) => { const url = new URL("https://api.github.com/search/issues"); url.searchParams.append("per_page", "5"); url.searchParams.append("q", query); const res = await fetch(url); - if (res.ok) { - return await res.json(); + if (!res.ok) { + throw new Error(res.status.toString()); } + return await res.json(); + }, + { + revalidateOnFocus: false, } ); return ( diff --git a/client/src/utils.ts b/client/src/utils.ts index 1105e08da90f..357a6e3bf329 100644 --- a/client/src/utils.ts +++ b/client/src/utils.ts @@ -136,3 +136,43 @@ export function splitQuery(term: string): string[] { return term.split(/[ ,.]+/); } } + +export class SWRLocalStorageCache { + #key: string; + #data: Map; + + #writeToLocalStorage() { + const serialized = JSON.stringify([...this.#data]); + localStorage.setItem(this.#key, serialized); + } + + constructor(key: string) { + this.#key = `cache.${key}`; + const serialized = localStorage.getItem(this.#key); + try { + this.#data = new Map(JSON.parse(serialized || "[]")); + } catch { + console.warn(`Can't read data from ${this.#key}, resetting the cache`); + this.#data = new Map(); + this.#writeToLocalStorage(); + } + } + + get(key: string): Data | undefined { + return this.#data.get(key); + } + + set(key: string, value: Data): void { + this.#data.set(key, value); + this.#writeToLocalStorage(); + } + + delete(key: string): void { + this.#data.delete(key); + this.#writeToLocalStorage(); + } + + keys(): IterableIterator { + return this.#data.keys(); + } +} From ba1662ea0e15559e883d78bf99bc9145782f0b5e Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 11 Sep 2024 09:48:17 +0000 Subject: [PATCH 20/44] fix(community): don't try to access localstorage on the server --- client/src/utils.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/src/utils.ts b/client/src/utils.ts index 357a6e3bf329..74ea2070323a 100644 --- a/client/src/utils.ts +++ b/client/src/utils.ts @@ -148,12 +148,16 @@ export class SWRLocalStorageCache { constructor(key: string) { this.#key = `cache.${key}`; - const serialized = localStorage.getItem(this.#key); try { + const serialized = localStorage.getItem(this.#key); this.#data = new Map(JSON.parse(serialized || "[]")); } catch { - console.warn(`Can't read data from ${this.#key}, resetting the cache`); this.#data = new Map(); + if (typeof localStorage === "undefined") { + // we're on the server + return; + } + console.warn(`Can't read data from ${this.#key}, resetting the cache`); this.#writeToLocalStorage(); } } From a08dfa8ef0ded5fa8a3db19cc19ccf6ced3b1fe0 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 11 Sep 2024 16:35:34 +0000 Subject: [PATCH 21/44] fix(community): avoid hydration errors with localstorage cache tried fixing this within the cache itself, but couldn't manage it --- client/src/community/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index e436c1b0bba7..04c3acb2ca0a 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -7,6 +7,7 @@ import { HTTPError } from "../document"; import { WRITER_MODE } from "../env"; import { Prose } from "../document/ingredients/prose"; import { SWRLocalStorageCache } from "../utils"; +import { useIsServer } from "../hooks"; interface CommunityDoc { title: string; @@ -112,9 +113,11 @@ function Issues({ section }: { section: any }) { () => ({ __html: section.value?.content }), [section.value?.content] ); + const isServer = useIsServer(); const LABELS = ["good first issue", "accepting PR"]; const { data } = useSWR( - `is:open is:issue repo:mdn/content repo:mdn/translated-content repo:mdn/yari label:"good first issue","accepting PR" sort:created-desc no:assignee is:public`, + !isServer && + `is:open is:issue repo:mdn/content repo:mdn/translated-content repo:mdn/yari label:"good first issue","accepting PR" sort:created-desc no:assignee is:public`, async (query) => { const url = new URL("https://api.github.com/search/issues"); url.searchParams.append("per_page", "5"); From c75c9f4e1aaa88c8a5e0d94ed51e1b1f6e32248f Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 11 Sep 2024 17:51:35 +0000 Subject: [PATCH 22/44] fix(community): randomly select contributors to display custom elements are lit! also workaround issue in contributor circle with links not being clickable https://mozilla-hub.atlassian.net/browse/MP-1480 --- client/src/community/contributor-list.ts | 77 +++++++++++ client/src/community/index.scss | 161 +++++++++++++---------- client/src/community/index.tsx | 7 +- copy/community/index.json | 2 +- copy/community/index.md | 37 +++--- package.json | 1 + yarn.lock | 42 ++++++ 7 files changed, 237 insertions(+), 90 deletions(-) create mode 100644 client/src/community/contributor-list.ts diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.ts new file mode 100644 index 000000000000..2a52a9d315d5 --- /dev/null +++ b/client/src/community/contributor-list.ts @@ -0,0 +1,77 @@ +import { LitElement, html } from "lit"; +import { customElement } from "lit/decorators.js"; + +interface ContributorData { + name: string; + github?: string; + org?: string; +} + +@customElement("contributor-list") +export class ContributorList extends LitElement { + _contributors: ContributorData[] = []; + + static properties = { + _contributors: { state: true }, + }; + + createRenderRoot() { + // use light DOM + return this; + } + + constructor() { + super(); + const contributorList = this.querySelector("ul"); + const randomContributors: ContributorData[] = []; + if (contributorList) { + const contributors = [...contributorList.querySelectorAll("li")]; + for (let index = 0; index < 8; index++) { + const contributor = popRandom(contributors); + if (!contributor) { + break; + } + const [name, github, org] = [...contributor.childNodes].map( + (node) => node?.textContent?.trim() || undefined + ); + if (!name) { + index--; + continue; + } + randomContributors.push({ + name, + github, + org, + }); + } + this._contributors = randomContributors; + contributorList.remove(); + } + } + + render() { + return html`
    + ${this._contributors.map(({ name, github, org }) => { + const imgSrc = `https://avatars.githubusercontent.com/${github + ?.split("/") + .slice(-1)}`; + return html`
  • + + + ${name} + + ${org} +
    • `; + })} +
`; + } +} + +function popRandom(array: Array) { + const i = Math.floor(Math.random() * array.length); + return array.splice(i, 1)[0]; +} diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 533b1bee81fb..18d5035fd0ae 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -303,87 +303,98 @@ main.community-container { grid-template-rows: auto auto auto var(--community-circle-height); margin-top: var(--community-section-gap); - .section-content { - display: contents; - } - h2, .section-content > * { grid-column: 2; } - ul:first-of-type { - // contributor buttons + .section-content { + display: contents; - display: flex; - flex-wrap: wrap; - gap: 1rem; - margin-top: 1.5rem; + > ul { + // contributor buttons - @media (max-width: $screen-md) { - justify-content: center; - } + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 1.5rem; - a { - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: inline-block; - font: var(--button-font); - letter-spacing: normal; - padding: var(--button-padding); - text-decoration: none; - } + @media (max-width: $screen-md) { + justify-content: center; + } - li:last-child a { - --button-color: var(--button-bg); - background: transparent; + a { + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + display: inline-block; + font: var(--button-font); + letter-spacing: normal; + padding: var(--button-padding); + text-decoration: none; + } + + li:last-child a { + --button-color: var(--button-bg); + background: transparent; + } } - } - ul:last-of-type { - // contributor list + > contributor-list { + --community-list-img-size: 3.75rem; + --community-list-width: 10rem; + grid-column: 1; + grid-row: 1/5; + min-width: 0; - --community-list-img-size: 3.75rem; - --community-list-width: 10rem; - align-content: start; - display: grid; - gap: 2rem 1rem; - grid-column: 1; - grid-row: 1/5; - grid-template-columns: repeat( - auto-fit, - minmax(var(--community-list-width), 1fr) - ); - justify-items: center; - min-width: 0; + > * { + display: none; + } - @media (max-width: $screen-md) { - display: flex; - margin-top: 2rem; - overflow-x: auto; - } + ul.rendered { + align-content: start; + display: grid; + gap: 2rem 1rem; + grid-template-columns: repeat( + auto-fit, + minmax(var(--community-list-width), 1fr) + ); + justify-items: center; + + @media (max-width: $screen-md) { + display: flex; + margin-top: 2rem; + overflow-x: auto; + } - li { - align-items: center; - color: var(--community-text-primary); - display: flex; - flex-direction: column; - flex-shrink: 0; - text-align: center; - width: var(--community-list-width); - } + li, + a { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + flex-shrink: 0; + } - img { - border: 6px var(--community-circle-img-border) solid; - border-radius: 50%; - height: var(--community-list-img-size); - width: var(--community-list-img-size); - } + li { + color: var(--community-text-primary); + width: var(--community-list-width); + } - a { - font-weight: 500; + img { + background: var(--community-circle-img-border); + border: 6px var(--community-circle-img-border) solid; + border-radius: 50%; + height: var(--community-list-img-size); + width: var(--community-list-img-size); + flex-shrink: 0; + } + + a { + font-weight: 500; + } + } } } } @@ -391,9 +402,7 @@ main.community-container { @supports (offset-path: ellipse(100% 50% at right center)) { @media (min-width: $screen-xxl) { &[aria-labelledby="meet_our_contributors"] { - ul:last-of-type { - // contributor semi-circle - + contributor-list ul.rendered { background-image: var(--community-circle-bg); display: block; height: var(--community-circle-height); @@ -402,12 +411,24 @@ main.community-container { position: relative; li { + --offset-distance: calc( + var(--community-circle-angle) * 50% + 25% + ); height: var(--community-list-img-size); - offset-distance: calc(var(--community-circle-angle) * 50% + 25%); - // matches first svg defined in --community-circle-bg + offset-distance: calc(var(--offset-distance) - 1%); + // necessary because Firefox seems to have a bug where the links aren't + // clickable until we force some kind of re-render which an animation does: + animation: community-circle 1s forwards; + // matches first svg defined in --community-circle-bg: offset-path: ellipse(100% 50% at right center); offset-rotate: 0deg; + @keyframes community-circle { + to { + offset-distance: var(--offset-distance); + } + } + &:nth-child(n + 6) { --community-list-img-size: 5rem; // matches second svg defined in --community-circle-bg diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 04c3acb2ca0a..8b6f4006d051 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -1,6 +1,6 @@ import "./index.scss"; import { HydrationData } from "../../../libs/types/hydration"; -import { useMemo } from "react"; +import { useEffect, useMemo } from "react"; import { Section } from "../../../libs/types/document"; import useSWR, { SWRConfig } from "swr"; import { HTTPError } from "../document"; @@ -16,6 +16,11 @@ interface CommunityDoc { export function Community(appProps: HydrationData) { const doc = useCommunityDoc(appProps); + + useEffect(() => { + import("./contributor-list"); + }, []); + return ( new SWRLocalStorageCache("community") }} diff --git a/copy/community/index.json b/copy/community/index.json index 58081a95fd5c..fefebc1a3f1c 100644 --- a/copy/community/index.json +++ b/copy/community/index.json @@ -29,7 +29,7 @@ "id": "meet_our_contributors", "title": "Meet our contributors", "isH3": false, - "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n" + "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n\n \n" } }, { diff --git a/copy/community/index.md b/copy/community/index.md index fa551548ffc5..24733eaac35f 100644 --- a/copy/community/index.md +++ b/copy/community/index.md @@ -33,24 +33,25 @@ worldwide. - [Join us](/en-US/docs/MDN/Community/Contributing/Getting_started) - [View all contributors](https://github.com/mdn/content/graphs/contributors) - - -- ![GitHub profile picture](https://avatars.githubusercontent.com/JasonLamv-t?size=160) - [Jason Lam, 林家祥](https://github.com/JasonLamv-t) Grantit -- ![GitHub profile picture](https://avatars.githubusercontent.com/nicolo-ribaudo?size=160) - [Nicolò Ribaudo](https://github.com/nicolo-ribaudo) Igalia -- ![GitHub profile picture](https://avatars.githubusercontent.com/Josh-Cena?size=160) - [Joshua Chen](https://github.com/Josh-Cena) -- ![GitHub profile picture](https://avatars.githubusercontent.com/c17an?size=160) - [Kimchanmin](https://github.com/c17an) SK Planet -- ![GitHub profile picture](https://avatars.githubusercontent.com/givvemee?size=160) - [Gibbeum Yoon](https://github.com/givvemee) -- ![GitHub profile picture](https://avatars.githubusercontent.com/wisedog?size=160) - [Jongha Kim](https://github.com/wisedog) -- ![GitHub profile picture](https://avatars.githubusercontent.com/PassionPenguin?size=160) - [Qizhe ZHANG](https://github.com/PassionPenguin) -- ![GitHub profile picture](https://avatars.githubusercontent.com/saionaro?size=160) - [Artem Shibakov](https://github.com/saionaro) Bright Data + + +- Jason Lam, 林家祥 https://github.com/JasonLamv-t Grantit +- Nicolò Ribaudo https://github.com/nicolo-ribaudo Igalia +- Joshua Chen https://github.com/Josh-Cena +- Kimchanmin https://github.com/c17an SK Planet +- Gibbeum Yoon https://github.com/givvemee +- Jongha Kim https://github.com/wisedog +- Qizhe ZHANG https://github.com/PassionPenguin +- Artem Shibakov https://github.com/saionaro Bright Data +- HoChan Lee https://github.com/hochan222 11STREET +- Sangchul Lee https://github.com/1ilsang WoowaBros +- Park Sunhee https://github.com/sunhpark42 WoowaBros +- FU CHUNHUI https://github.com/fuchunhui Baidu +- Estelle Weyl https://github.com/estelle Open Web Docs +- Yitao Yin https://github.com/yin1999 Northwestern Polytechnical University +- Florian Scholz https://github.com/Elchi3 Open Web Docs + + ## Contributor spotlight diff --git a/package.json b/package.json index a47c148e456b..e4c5f920908a 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "inquirer": "^10.0.1", "is-svg": "^5.1.0", "js-yaml": "^4.1.0", + "lit": "^3.2.0", "loglevel": "^1.9.2", "lru-cache": "^10.4.3", "md5-file": "^5.0.0", diff --git a/yarn.lock b/yarn.lock index 9eb7e05d1e74..8c8cc21bf10a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2185,6 +2185,18 @@ dependencies: "@lezer/common" "^1.0.0" +"@lit-labs/ssr-dom-shim@^1.2.0": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8" + integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ== + +"@lit/reactive-element@^2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.4.tgz#8f2ed950a848016383894a26180ff06c56ae001b" + integrity sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.2.0" + "@mdn/bcd-utils-api@^0.0.7": version "0.0.7" resolved "https://registry.yarnpkg.com/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.7.tgz#555e80c33df520df068943e6b18ebc07f0e24d19" @@ -3420,6 +3432,11 @@ resolved "https://registry.yarnpkg.com/@types/triple-beam/-/triple-beam-1.3.5.tgz#74fef9ffbaa198eb8b588be029f38b00299caa2c" integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw== +"@types/trusted-types@^2.0.2": + version "2.0.7" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11" + integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw== + "@types/unist@*", "@types/unist@^3.0.0": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c" @@ -9715,6 +9732,31 @@ listr2@6.6.1: rfdc "^1.3.0" wrap-ansi "^8.1.0" +lit-element@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-4.1.0.tgz#cea3eb25f15091e3fade07c4d917fa6aaf56ba7d" + integrity sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.2.0" + "@lit/reactive-element" "^2.0.4" + lit-html "^3.2.0" + +lit-html@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-3.2.0.tgz#cb09071a8a1f5f0850873f9143f18f0260be1fda" + integrity sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA== + dependencies: + "@types/trusted-types" "^2.0.2" + +lit@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/lit/-/lit-3.2.0.tgz#2189d72bccbc335f733a67bfbbd295f015e68e05" + integrity sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw== + dependencies: + "@lit/reactive-element" "^2.0.4" + lit-element "^4.1.0" + lit-html "^3.2.0" + loader-runner@^4.2.0: version "4.3.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1" From cfecfdc967a7c5961f2c3d97421b13d7f01241a7 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Wed, 11 Sep 2024 18:03:29 +0000 Subject: [PATCH 23/44] fix(community): stylelint --- client/src/community/index.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 18d5035fd0ae..d89b1d7e3c1a 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -370,11 +370,11 @@ main.community-container { li, a { + align-items: center; display: flex; flex-direction: column; - align-items: center; - text-align: center; flex-shrink: 0; + text-align: center; } li { @@ -386,9 +386,9 @@ main.community-container { background: var(--community-circle-img-border); border: 6px var(--community-circle-img-border) solid; border-radius: 50%; + flex-shrink: 0; height: var(--community-list-img-size); width: var(--community-list-img-size); - flex-shrink: 0; } a { @@ -414,11 +414,11 @@ main.community-container { --offset-distance: calc( var(--community-circle-angle) * 50% + 25% ); - height: var(--community-list-img-size); - offset-distance: calc(var(--offset-distance) - 1%); // necessary because Firefox seems to have a bug where the links aren't // clickable until we force some kind of re-render which an animation does: animation: community-circle 1s forwards; + height: var(--community-list-img-size); + offset-distance: calc(var(--offset-distance) - 1%); // matches first svg defined in --community-circle-bg: offset-path: ellipse(100% 50% at right center); offset-rotate: 0deg; From 8fae5dc7cfc27a4106b2aa939a2ee0f5d0b76c5e Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 20 Sep 2024 12:49:07 +0000 Subject: [PATCH 24/44] fix(community): reduce width --- client/src/community/index.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index d89b1d7e3c1a..f3eb73a0c4e1 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -78,6 +78,10 @@ main.community-container { --community-stats-height: 5.75rem; --community-section-gap: 10rem; + --max-width: 74rem; + --negative-space: calc( + max(0px, 100vw - var(--max-width)) * -0.5 - var(--gutter) + ); --button-bg: var(--button-primary-default); --button-bg-hover: var(--button-primary-hover); @@ -493,6 +497,7 @@ main.community-container { margin-left: -1rem; overflow-x: auto; padding: 2.41rem 1rem; + margin-right: var(--negative-space); @media (max-width: $screen-md) { margin-left: calc(var(--gutter) * -1); From 36bbb682b17e298825ef5a89f8c66a8f42673432 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 23 Sep 2024 20:23:39 +0000 Subject: [PATCH 25/44] wip(community): various fixes --- client/config/webpack.config.js | 27 ++- client/package.json | 3 + client/src/community/contributor-list.scss | 158 +++++++++++++ client/src/community/contributor-list.ts | 57 +++-- client/src/community/index.scss | 262 ++++----------------- client/src/react-app.d.ts | 8 + client/src/ui/atoms/button/_mixins.scss | 49 ++++ client/tsconfig.json | 2 +- 8 files changed, 316 insertions(+), 250 deletions(-) create mode 100644 client/src/community/contributor-list.scss create mode 100644 client/src/ui/atoms/button/_mixins.scss diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index 0c6e8a9460a4..3bb6b7916b0d 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -40,12 +40,13 @@ function config(webpackEnv) { const env = getClientEnvironment(); // common function to get style loaders - const getStyleLoaders = (cssOptions, preProcessor) => { + const getStyleLoaders = (cssOptions, preProcessor, extract = true) => { const loaders = [ - isEnvDevelopment && resolve.sync("style-loader"), - isEnvProduction && { - loader: MiniCssExtractPlugin.loader, - }, + extract && isEnvDevelopment && resolve.sync("style-loader"), + extract && + isEnvProduction && { + loader: MiniCssExtractPlugin.loader, + }, { loader: resolve.sync("css-loader"), options: cssOptions, @@ -354,6 +355,22 @@ function config(webpackEnv) { sideEffects: true, }, // Opt-in support for SASS (using .scss or .sass extensions). + { + test: /\.(scss|sass)$/, + with: { type: "css" }, + use: getStyleLoaders( + { + importLoaders: 3, + sourceMap: isEnvProduction + ? shouldUseSourceMap + : isEnvDevelopment, + exportType: "css-style-sheet", + }, + "sass-loader", + false + ), + sideEffects: true, + }, { test: /\.(scss|sass)$/, use: getStyleLoaders( diff --git a/client/package.json b/client/package.json index f1ad9b7ab58a..58acd2b44593 100644 --- a/client/package.json +++ b/client/package.json @@ -4,6 +4,9 @@ "license": "MPL-2.0", "type": "module", "babel": { + "generatorOpts": { + "importAttributesKeyword": "with" + }, "presets": [ "react-app" ] diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss new file mode 100644 index 000000000000..cd1d5a616f26 --- /dev/null +++ b/client/src/community/contributor-list.scss @@ -0,0 +1,158 @@ +@use "../ui/vars" as *; + +* { + box-sizing: border-box; +} + +.wrap { + --img-size: 3.75em; + --li-size: calc(var(--img-size) * 2.5); +} + +ul { + --circle-border-size: 0.375em; + align-content: start; + display: grid; + gap: 2rem 1rem; + grid-template-columns: repeat(auto-fit, minmax(var(--li-size), 1fr)); + justify-items: center; + margin: 0; + padding: 0; + + @media (max-width: $screen-md) { + display: flex; + margin-top: 2rem; + overflow-x: auto; + } +} + +li, +a { + align-items: center; + display: flex; + flex-direction: column; + flex-shrink: 0; + text-align: center; +} + +li { + color: var(--community-text-primary); + width: var(--li-size); +} + +img { + background: var(--community-circle-img-border); + border: var(--circle-border-size) var(--community-circle-img-border) solid; + border-radius: 50%; + flex-shrink: 0; + height: var(--img-size); + width: var(--img-size); +} + +a { + color: unset; + font-weight: 500; +} + +svg { + display: none; +} + +@supports (offset-path: url("#outer-circle")) { + @media (min-width: $screen-md) { + .wrap { + container-type: size; + height: 100%; + width: 100%; + } + + .inner { + font-size: min(1rem, 3.5cqmin); + padding: calc(var(--img-size) / 2) calc(var(--li-size) / 2); + } + + ul { + aspect-ratio: 1 / 2; + display: block; + margin-left: auto; + max-height: var(--community-circle-height); + min-height: 0; + min-width: 0; + position: relative; + } + + svg { + clip-path: inset(calc(-1 * var(--circle-border-size))); + display: block; + fill: none; + height: 100%; + overflow: visible; + position: absolute; + stroke: var(--community-circle-img-border); + stroke-width: var(--circle-border-size); + width: 100%; + } + + li { + --offset-distance: calc(var(--community-circle-angle) * 50% + 25%); + // necessary because Firefox seems to have a bug where the links aren't + // clickable until we force some kind of re-render which an animation does: + animation: community-circle 0.1ms forwards; + offset-anchor: center calc(0.5 * var(--img-size)); + offset-distance: var(--offset-distance); + offset-path: url("#outer-circle"); + offset-rotate: 0deg; + + @keyframes community-circle { + from { + offset-distance: calc(var(--offset-distance) - 0.1%); + } + } + + &:nth-of-type(n + 6) { + --img-size: 5em; + offset-path: url("#inner-circle"); + } + + &:nth-of-type(1) { + --community-circle-angle: 0; + } + + &:nth-of-type(2) { + --community-circle-angle: 1/4; + } + + &:nth-of-type(3) { + --community-circle-angle: 2/4; + } + + &:nth-of-type(4) { + --community-circle-angle: 3/4; + } + + &:nth-of-type(5) { + --community-circle-angle: 1; + } + + &:nth-of-type(6) { + --community-circle-angle: 0; + } + + &:nth-of-type(7) { + --community-circle-angle: 1/2; + } + + &:nth-of-type(8) { + --community-circle-angle: 1; + } + } + + .org { + -webkit-box-orient: vertical; + display: box; + -webkit-line-clamp: 2; + line-clamp: 2; + overflow: hidden; + } + } +} diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.ts index 2a52a9d315d5..e8a659cc7e62 100644 --- a/client/src/community/contributor-list.ts +++ b/client/src/community/contributor-list.ts @@ -1,9 +1,11 @@ import { LitElement, html } from "lit"; import { customElement } from "lit/decorators.js"; +import styles from "./contributor-list.scss?css" with { type: "css" }; + interface ContributorData { name: string; - github?: string; + github: string; org?: string; } @@ -15,10 +17,7 @@ export class ContributorList extends LitElement { _contributors: { state: true }, }; - createRenderRoot() { - // use light DOM - return this; - } + static styles = styles; constructor() { super(); @@ -34,7 +33,7 @@ export class ContributorList extends LitElement { const [name, github, org] = [...contributor.childNodes].map( (node) => node?.textContent?.trim() || undefined ); - if (!name) { + if (!name || !github) { index--; continue; } @@ -45,29 +44,37 @@ export class ContributorList extends LitElement { }); } this._contributors = randomContributors; - contributorList.remove(); } } render() { - return html`
    - ${this._contributors.map(({ name, github, org }) => { - const imgSrc = `https://avatars.githubusercontent.com/${github - ?.split("/") - .slice(-1)}`; - return html`
  • - - - ${name} - - ${org} -
    • `; - })} -
`; + return html`
+
+
    + + + + + ${this._contributors.map(({ name, github, org }) => { + const imgSrc = `https://avatars.githubusercontent.com/${github + ?.split("/") + .slice(-1)}`; + return html`
  • + + + ${name} + + ${org} +
    • `; + })} +
+
+
`; } } diff --git a/client/src/community/index.scss b/client/src/community/index.scss index f3eb73a0c4e1..bd70f1dea147 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -1,4 +1,5 @@ @use "../ui/vars" as *; +@use "../ui/atoms/button/mixins" as button; @mixin light-theme { --community-bg-primary: #fcfcfc; @@ -13,8 +14,6 @@ --community-box-shadow: 4px -2px 1rem 0 rgba(179, 179, 179, 0.2), 4px -4px 1rem 0 rgba(179, 179, 179, 0.15); --community-circle-img-border: #fff; - --community-circle-bg: url('data:image/svg+xml;utf8,'), - url('data:image/svg+xml;utf8,'); --community-quote-start: url("../assets/community/quote-start.svg"); --community-quote-end: url("../assets/community/quote-end.svg"); --community-video-bg: url("../assets/community/video-bg.svg"); @@ -41,8 +40,6 @@ --community-box-shadow: 4px -2px 15px 0 rgba(38, 38, 38, 0.2), 4px -4px 15px 0 rgba(38, 38, 38, 0.15); --community-circle-img-border: #4e4e4e; - --community-circle-bg: url('data:image/svg+xml;utf8,'), - url('data:image/svg+xml;utf8,'); --community-quote-start: url("../assets/community/quote-start-dark.svg"); --community-quote-end: url("../assets/community/quote-end-dark.svg"); --community-video-bg: url("../assets/community/video-bg-dark.svg"); @@ -77,28 +74,14 @@ main.community-container { --community-stats-height: 5.75rem; - --community-section-gap: 10rem; + --community-section-gap: 5rem; --max-width: 74rem; --negative-space: calc( max(0px, 100vw - var(--max-width)) * -0.5 - var(--gutter) ); - --button-bg: var(--button-primary-default); - --button-bg-hover: var(--button-primary-hover); - --button-bg-active: var(--button-primary-active); - --button-border-color: var(--button-primary-default); - --button-color: var(--background-primary); - --button-font: var(--type-emphasis-m); - --button-padding: 0.43rem 1rem; - --button-radius: 0.25rem; - background: var(--community-bg-secondary); color: var(--community-text-secondary); - letter-spacing: var(--heading-letter-spacing); - - @media (max-width: $screen-md) { - --community-section-gap: 5rem; - } h2, h3, @@ -106,30 +89,20 @@ main.community-container { margin: 0; } - a { - color: unset; - text-decoration: underline; - - &.external:after { - display: none; - } + h2, + h3 { + color: var(--community-text-primary); - &:hover { - --button-border-color: var(--button-bg-hover); - --button-bg: var(--button-bg-hover); + a { + color: unset; text-decoration: none; } - - &:active { - --button-bg: var(--button-bg-active); - } } - h2, - h3 { - color: var(--community-text-primary); + a { + text-decoration: underline; - a { + &:hover { text-decoration: none; } } @@ -165,7 +138,6 @@ main.community-container { var(--community-bg-primary) calc(var(--community-stats-height) / 2), var(--community-bg-primary) 100% ); - padding-top: 7rem; @media (max-width: $screen-md) { padding-top: 1rem; @@ -177,6 +149,8 @@ main.community-container { background-position: bottom calc(var(--community-stats-height) - 1rem) right; background-repeat: no-repeat; + background-size: 50%; + padding-top: var(--community-section-gap); @media (max-width: $screen-md) { background-position: top center; @@ -187,8 +161,7 @@ main.community-container { h1 { color: var(--community-text-primary); - font-size: 3rem; - font-weight: 700; + font-size: 2.5rem; margin-bottom: 1rem; @media (max-width: $screen-md) { @@ -211,15 +184,7 @@ main.community-container { } a { - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: inline-block; - font: var(--button-font); - letter-spacing: normal; - padding: var(--button-padding); - text-decoration: none; + @include button.primary; } li:last-child a { @@ -234,15 +199,11 @@ main.community-container { box-shadow: var(--community-box-shadow); color: var(--community-text-primary); display: flex; - gap: 1.38rem; + gap: 1rem; justify-content: space-around; margin-top: var(--community-section-gap); padding: 1rem; - @media (max-width: $screen-xl) { - margin-top: 20rem; - } - @media (max-width: $screen-md) { flex-wrap: wrap; margin-top: 2rem; @@ -272,7 +233,6 @@ main.community-container { display: inline-flex; height: 3.75rem; justify-content: center; - letter-spacing: -0.03125rem; width: 3.75rem; } } @@ -288,8 +248,8 @@ main.community-container { } > section { - --community-circle-height: 50rem; - column-gap: 5rem; + --community-circle-height: 57rem; + column-gap: min(5rem, 5vw); display: grid; grid-template-columns: 4fr 6fr; @@ -328,15 +288,7 @@ main.community-container { } a { - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: inline-block; - font: var(--button-font); - letter-spacing: normal; - padding: var(--button-padding); - text-decoration: none; + @include button.primary; } li:last-child a { @@ -345,133 +297,15 @@ main.community-container { } } - > contributor-list { - --community-list-img-size: 3.75rem; - --community-list-width: 10rem; + contributor-list { grid-column: 1; grid-row: 1/5; + margin-left: calc(var(--negative-space) + var(--gutter)); min-width: 0; - > * { + > ul { display: none; } - - ul.rendered { - align-content: start; - display: grid; - gap: 2rem 1rem; - grid-template-columns: repeat( - auto-fit, - minmax(var(--community-list-width), 1fr) - ); - justify-items: center; - - @media (max-width: $screen-md) { - display: flex; - margin-top: 2rem; - overflow-x: auto; - } - - li, - a { - align-items: center; - display: flex; - flex-direction: column; - flex-shrink: 0; - text-align: center; - } - - li { - color: var(--community-text-primary); - width: var(--community-list-width); - } - - img { - background: var(--community-circle-img-border); - border: 6px var(--community-circle-img-border) solid; - border-radius: 50%; - flex-shrink: 0; - height: var(--community-list-img-size); - width: var(--community-list-img-size); - } - - a { - font-weight: 500; - } - } - } - } - } - - @supports (offset-path: ellipse(100% 50% at right center)) { - @media (min-width: $screen-xxl) { - &[aria-labelledby="meet_our_contributors"] { - contributor-list ul.rendered { - background-image: var(--community-circle-bg); - display: block; - height: var(--community-circle-height); - margin: calc(var(--community-list-img-size) / 2) - calc(var(--community-list-width) / 2); - position: relative; - - li { - --offset-distance: calc( - var(--community-circle-angle) * 50% + 25% - ); - // necessary because Firefox seems to have a bug where the links aren't - // clickable until we force some kind of re-render which an animation does: - animation: community-circle 1s forwards; - height: var(--community-list-img-size); - offset-distance: calc(var(--offset-distance) - 1%); - // matches first svg defined in --community-circle-bg: - offset-path: ellipse(100% 50% at right center); - offset-rotate: 0deg; - - @keyframes community-circle { - to { - offset-distance: var(--offset-distance); - } - } - - &:nth-child(n + 6) { - --community-list-img-size: 5rem; - // matches second svg defined in --community-circle-bg - offset-path: ellipse(50% 25% at right center); - } - - &:nth-child(1) { - --community-circle-angle: 0; - } - - &:nth-child(2) { - --community-circle-angle: 1/4; - } - - &:nth-child(3) { - --community-circle-angle: 2/4; - } - - &:nth-child(4) { - --community-circle-angle: 3/4; - } - - &:nth-child(5) { - --community-circle-angle: 1; - } - - &:nth-child(6) { - --community-circle-angle: 0; - } - - &:nth-child(7) { - --community-circle-angle: 1/2; - } - - &:nth-child(8) { - --community-circle-angle: 1; - } - } - } } } } @@ -495,9 +329,9 @@ main.community-container { gap: 2rem; margin-bottom: 1.5rem; margin-left: -1rem; + margin-right: var(--negative-space); overflow-x: auto; padding: 2.41rem 1rem; - margin-right: var(--negative-space); @media (max-width: $screen-md) { margin-left: calc(var(--gutter) * -1); @@ -579,31 +413,35 @@ main.community-container { } p:last-child { + background-image: var(--community-video-bg); + background-position: center; + background-repeat: no-repeat; + background-size: contain; // video link - display: contents; + grid-column: 1; + grid-row: 1/6; + margin: 0; @media (max-width: $screen-md) { display: flex; justify-content: center; + margin: 0 auto; + max-width: 25rem; } a { + aspect-ratio: 1; background-image: url("../assets/community/youtube-play.svg"), - url("../assets/community/video-thumbnail.png"), - var(--community-video-bg); + url("../assets/community/video-thumbnail.png"); background-position: 43% 50%, - 36% 50%, - center; + 36% 50%; background-repeat: no-repeat; - background-size: 13%, 60%, contain; + background-size: 13%, 60%; + clip-path: circle(35%); color: transparent; display: block; - grid-column: 1; - grid-row: 1/6; - height: min(25rem, 100vw); - max-width: 28rem; overflow: hidden; text-indent: -100rem; @@ -624,9 +462,9 @@ main.community-container { ul { display: grid; - gap: 4.88rem; + gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); - margin-bottom: 5.13rem; + margin-bottom: var(--community-section-gap); } li { @@ -655,15 +493,7 @@ main.community-container { } a { - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: inline-block; - font: var(--button-font); - letter-spacing: normal; - padding: var(--button-padding); - text-decoration: none; + @include button.primary; } } } @@ -676,7 +506,7 @@ main.community-container { color: var(--community-text-primary-alt); display: block; max-width: 100%; - padding: calc(var(--community-section-gap) / 2) 0; + padding-bottom: var(--community-section-gap); h2, .section-content, @@ -691,6 +521,8 @@ main.community-container { } &[aria-labelledby="help_us_fix_open_issues"] { + padding-top: var(--community-section-gap); + .issues-table { margin-top: 1rem; } @@ -803,15 +635,7 @@ main.community-container { } a { - background-color: var(--button-bg); - border: 1px solid var(--button-border-color); - border-radius: var(--button-radius); - color: var(--button-color); - display: inline-block; - font: var(--button-font); - letter-spacing: normal; - padding: var(--button-padding); - text-decoration: none; + @include button.primary; } } } diff --git a/client/src/react-app.d.ts b/client/src/react-app.d.ts index 09f456fa1906..f48033dc209a 100644 --- a/client/src/react-app.d.ts +++ b/client/src/react-app.d.ts @@ -79,6 +79,14 @@ declare module "*.svg" { export default src; } +// once https://github.com/microsoft/TypeScript/issues/46135 is fixed +// we'll be able to do something like: +// declare module '*' with {type: 'css'} { +declare module "*?css" { + const sheet: CSSStyleSheet; + export default sheet; +} + declare module "*.module.css" { const classes: { readonly [key: string]: string }; export default classes; diff --git a/client/src/ui/atoms/button/_mixins.scss b/client/src/ui/atoms/button/_mixins.scss new file mode 100644 index 000000000000..d6c6d84c448f --- /dev/null +++ b/client/src/ui/atoms/button/_mixins.scss @@ -0,0 +1,49 @@ +@mixin _button { + --button-font: var(--type-emphasis-m); + --button-padding: 0.43rem 1rem; + --button-radius: var(--elem-radius, 0.25rem); + + background-color: var(--button-bg); + border: 1px solid var(--button-border-color); + border-radius: var(--button-radius); + color: var(--button-color); + display: inline-block; + font: var(--button-font); + letter-spacing: normal; + padding: var(--button-padding); + text-align: center; + text-decoration: none; + + &.external:after { + display: none; + } + + &:hover { + --button-border-color: var(--button-bg-hover); + --button-bg: var(--button-bg-hover); + } + + &:active { + --button-bg: var(--button-bg-active); + } +} + +@mixin primary { + --button-bg: var(--button-primary-default); + --button-bg-hover: var(--button-primary-hover); + --button-bg-active: var(--button-primary-active); + --button-border-color: var(--button-primary-default); + --button-color: var(--background-primary); + + @include _button; +} + +@mixin secondary { + --button-bg: var(--button-secondary-default); + --button-bg-hover: var(--button-secondary-hover); + --button-bg-active: var(--button-secondary-active); + --button-border-color: var(--border-primary); + --button-color: var(--text-secondary); + + @include _button; +} diff --git a/client/tsconfig.json b/client/tsconfig.json index 3785472bddfd..9d382647f7ae 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -7,7 +7,7 @@ "isolatedModules": true, "jsx": "react-jsx", "lib": ["dom", "dom.iterable", "es2021"], - "module": "ES2020", + "module": "ESNext", "moduleResolution": "Node", "noEmit": true, "noFallthroughCasesInSwitch": true, From d8e590afa541502c7cdeda289c7b282f6a853bbb Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 23 Sep 2024 20:30:10 +0000 Subject: [PATCH 26/44] wip(community): fix tsc --- ssr/react-app.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ssr/react-app.d.ts b/ssr/react-app.d.ts index 8930f7c00dc1..c1e7ada77a12 100644 --- a/ssr/react-app.d.ts +++ b/ssr/react-app.d.ts @@ -75,6 +75,14 @@ declare module "*.svg" { export default src; } +// once https://github.com/microsoft/TypeScript/issues/46135 is fixed +// we'll be able to do something like: +// declare module '*' with {type: 'css'} { +declare module "*?css" { + const sheet: CSSStyleSheet; + export default sheet; +} + declare module "*.module.css" { const classes: { readonly [key: string]: string }; export default classes; From 5023a336a226fc175a510328281db241d2e0db16 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 23 Sep 2024 20:42:11 +0000 Subject: [PATCH 27/44] wip(community): fix line clamp --- client/src/community/contributor-list.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss index cd1d5a616f26..94077037cf5b 100644 --- a/client/src/community/contributor-list.scss +++ b/client/src/community/contributor-list.scss @@ -149,7 +149,8 @@ svg { .org { -webkit-box-orient: vertical; - display: box; + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; From 2f3e816e9144998e688a5b98dd3d497460d0103a Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 25 Sep 2024 13:26:03 +0200 Subject: [PATCH 28/44] fix(community): use md to build --- build/spas.ts | 31 ++--------- copy/community/README.md | 18 ------ copy/community/index.json | 112 -------------------------------------- 3 files changed, 6 insertions(+), 155 deletions(-) delete mode 100644 copy/community/README.md delete mode 100644 copy/community/index.json diff --git a/build/spas.ts b/build/spas.ts index b5771318e281..bab1950f696d 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -245,10 +245,9 @@ export async function buildSPAs(options: { pageDescription, noIndexing, onlyFollow, - json, } of SPAs) { const url = `/${locale}/${prefix}`; - let context: HydrationData = { + const context: HydrationData = { pageTitle, pageDescription, locale, @@ -257,29 +256,6 @@ export async function buildSPAs(options: { url, }; - if (json) { - context = JSON.parse(await fs.promises.readFile(json, "utf-8")); - const localeReplace = function (obj: any) { - try { - Object.keys(obj); - } catch { - return; - } - for (const key of Object.keys(obj)) { - if (typeof obj[key] === "object") { - localeReplace(obj[key]); - } - if (typeof obj[key] === "string") { - obj[key] = obj[key] - .replace(/^en-US$/, locale) - .replace(/^\/en-US\//, `/${locale}/`) - .replace(/ href="\/en-US\//g, ` href="/${locale}/`); - } - } - }; - localeReplace(context); - } - const outPath = path.join(BUILD_OUT_ROOT, pathLocale, prefix); fs.mkdirSync(outPath, { recursive: true }); const jsonFilePath = path.join(outPath, "index.json"); @@ -393,6 +369,11 @@ export async function buildSPAs(options: { "observatory/docs", OBSERVATORY_TITLE ); + await buildStaticPages( + fileURLToPath(new URL("../copy/community/", import.meta.url)), + "community", + "Contribute to MDN" + ); // Build all the home pages in all locales. // Fetch merged content PRs for the latest contribution section. diff --git a/copy/community/README.md b/copy/community/README.md deleted file mode 100644 index f077d82a57c9..000000000000 --- a/copy/community/README.md +++ /dev/null @@ -1,18 +0,0 @@ -Massive temporary hack: - -```bash -cd yari -cp copy/community/index.md ../curriculum/curriculum/ -yarn build:curriculum -``` - -This will build into `client/build/en-us/curriculum/index/index.json`, open that -file: - -```bash -code client/build/en-us/curriculum/index/index.json -``` - -Format the file, then manually update all the wrong references to curriculum: -alternatively, if you've only changed the sections just copy the `body` key into -`copy/community/index.json`. diff --git a/copy/community/index.json b/copy/community/index.json deleted file mode 100644 index fefebc1a3f1c..000000000000 --- a/copy/community/index.json +++ /dev/null @@ -1,112 +0,0 @@ -{ - "doc": { - "locale": "en-US", - "title": "MDN Community", - "mdn_url": "/en-US/community/", - "native": "English (US)", - "body": [ - { - "type": "prose", - "value": { - "id": null, - "title": null, - "isH3": false, - "content": "

Where web enthusiasts learn, collaborate, and create

\n\n
    \n
  • 45K+ Total contributors
    • \n
  • 80M+ Monthly views
    • \n
  • 200+ Weekly commits
    • \n
  • 8 Language communities
    • \n
" - } - }, - { - "type": "prose", - "value": { - "id": "mdns_community_powers_the_web", - "title": "MDN's community powers the web", - "isH3": false, - "content": "

\n MDN’s strength comes from the passion and dedication of our global community.\n Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve\n created a comprehensive, open, and free resource that serves web developers\n across the globe. With volunteers leading translation efforts in\n 8 languages, we’re\n truly international.\n

" - } - }, - { - "type": "prose", - "value": { - "id": "meet_our_contributors", - "title": "Meet our contributors", - "isH3": false, - "content": "

\n We are an open-source community of developers dedicated to building resources\n for a better web. Our diverse contributors, including developers, technical\n writers, students, educators, designers, and more, come from various backgrounds\n and platforms. Anyone can contribute, and each contribution strengthens our\n community, driving innovation and improving this vital resource for developers\n worldwide.\n

\n\n\n \n" - } - }, - { - "type": "prose", - "value": { - "id": "contributor_spotlight", - "title": "Contributor spotlight", - "isH3": false, - "content": "
    \n
  • \n
    \n

    \n There are many other things I like about MDN: the openness of its\n governance, the respect for contributors' work, the professional\n conversations, and the always timely reviews. MDN has consistently\n demonstrated the ideal form of an open-source project.\n

    \n
    Joshua Chen (MDN contributor)\n
    • \n
  • \n
    \n

    \n MDN Web Docs has the most up-to-date and accurate information and the\n content is presented in an easy-to-understand manner. I also like that it's\n available in many languages (very important!).\n

    \n
    Yuji (MDN contributor)\n
    • \n
  • \n
    \n

    \n There are millions of web developers in China, and many of them begin their\n developer journey at MDN Web Docs. Contributing to MDN Web Docs is an\n excellent way to help people who are starting out.\n

    \n
    YiTao Yin (MDN contributor)\n
    • \n
\n

\n If you wish to be a part of the featured contributors here,\n let us know.
If you’re featured here and would like to opt-out,\n please file an issue on GitHub.\n

" - } - }, - { - "type": "prose", - "value": { - "id": "learn_how_to_get_started", - "title": "Learn how to get started", - "isH3": false, - "content": "

\n We collaborate on GitHub, our project's home, on\n various tasks such as writing and improving documentation, fixing bugs, and\n providing review feedback. It starts here, with you. Want to start right away,\n but not sure how? Follow\n our guide\n to make your first contribution.\n

\n

\n Watch this video on\n how to get started with contributing to MDN Web Docs\n

\n

Video from the community team on contributing to MDN

" - } - }, - { - "type": "prose", - "value": { - "id": "join_us_in_shaping_a_better_web", - "title": "Join us in shaping a better web", - "isH3": false, - "content": "

\n Become part of this globally cherished group that’s dedicated to documenting web\n technologies. Whether you’re an expert or a beginner, there’s a place for you in\n our inclusive community. Check out some of the ways you can contribute and\n engage.\n

\n
    \n
  • \n

    Fix issues

    Submit pull requests to fix reported issues.\n Squash bugs\n
    • \n
  • \n

    Improve content

    Fix inaccuracies and fill in missing information.\n Start writing\n
    • \n
  • \n

    Localize content

    Participate in translating content into one of our supported languages.\n Find your locale\n
    • \n
  • \n

    Answer questions

    Share your knowledge and expertise and guide fellow learners.\n Help on Discord\n
    • \n
" - } - }, - { - "type": "prose", - "value": { - "id": "help_us_fix_open_issues", - "title": "Help us fix open issues", - "isH3": false, - "content": "

\n New to MDN or open-source projects? Tackle our beginner-friendly issues to help\n improve MDN.\n

" - } - }, - { - "type": "prose", - "value": { - "id": "join_the_conversation", - "title": "Join the conversation", - "isH3": false, - "content": "
    \n
  • \n

    Chat with us on Discord

    Connect with the community. Engage with domain experts. Help others learn.\n Join MDN Discord\n
    • \n
  • \n

    Join our Community Call

    Every month, get exclusive updates from the MDN team. Share your ideas and\n contributions.\n RSVP to the next community call\n
    • \n
\n

\n While working in Mozilla spaces and communities, please adhere to the\n Mozilla Community Participation Guidelines,\n which promote respect, inclusion, and a harassment-free environment for all\n community members.\n

" - } - }, - { - "type": "prose", - "value": { - "id": "licensing_and_reuse", - "title": "Licensing and reuse", - "isH3": false, - "content": "

\n MDN's resources are freely available under various open-source licenses. For\n detailed information on reusing MDN content, check out our\n Attribution and Copyright Licensing\n page.\n

" - } - } - ], - "pageTitle": "MDN Community", - "noIndexing": false, - "toc": [ - { - "text": "MDN's community powers the web", - "id": "mdns_community_powers_the_web" - }, - { "text": "Meet our contributors", "id": "meet_our_contributors" }, - { "text": "Contributor spotlight", "id": "contributor_spotlight" }, - { "text": "Learn how to get started", "id": "learn_how_to_get_started" }, - { - "text": "Join us in shaping a better web", - "id": "join_us_in_shaping_a_better_web" - }, - { "text": "Help us fix open issues", "id": "help_us_fix_open_issues" }, - { "text": "Join the conversation", "id": "join_the_conversation" }, - { "text": "Licensing and reuse", "id": "licensing_and_reuse" } - ] - }, - "pageTitle": "MDN Community", - "locale": "en-US", - "url": "/en-US/community/" -} From d3742d2ac5bcba7d2dc44e0cdebde21ef0f0601c Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 25 Sep 2024 13:27:56 +0200 Subject: [PATCH 29/44] fix(community): remove hack --- build/spas.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/build/spas.ts b/build/spas.ts index bab1950f696d..3225d8a44274 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -222,13 +222,6 @@ export async function buildSPAs(options: { noIndexing: true, }, { prefix: "about", pageTitle: "About MDN" }, - { - prefix: "community", - pageTitle: "Contribute to MDN", - json: fileURLToPath( - new URL("../copy/community/index.json", import.meta.url) - ), - }, { prefix: "advertising", pageTitle: "Advertise with us", From cade810ae09acea5a8e54922fb31f868ab174da4 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 25 Sep 2024 13:56:56 +0200 Subject: [PATCH 30/44] fix(community): use hyData format --- build/spas.ts | 23 ++++++----------------- client/src/community/index.tsx | 15 ++++++--------- copy/community/{index.md => community.md} | 0 3 files changed, 12 insertions(+), 26 deletions(-) rename copy/community/{index.md => community.md} (100%) diff --git a/build/spas.ts b/build/spas.ts index 3225d8a44274..c8e2c8f62b12 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -268,16 +268,9 @@ export async function buildSPAs(options: { } // Building the MDN Plus pages. - - /** - * - * @param {string} dirpath - * @param {string} slug - * @param {string} title - */ async function buildStaticPages( dirpath: string, - slug: string, + slugPrefix?: string, title = "MDN" ) { const crawler = new fdir() @@ -298,13 +291,14 @@ export async function buildSPAs(options: { const frontMatter = frontmatter(markdown); const rawHTML = await m2h(frontMatter.body, { locale }); - const url = `/${locale}/${slug}/${page}`; + const slug = slugPrefix ? `${slugPrefix}/${page}` : `${page}`; + const url = `/${locale}/${slug}`; const d = { url, rawBody: rawHTML, metadata: { locale: DEFAULT_LOCALE, - slug: `${slug}/${page}`, + slug, url, }, @@ -330,12 +324,7 @@ export async function buildSPAs(options: { url, }; - const outPath = path.join( - BUILD_OUT_ROOT, - pathLocale, - ...slug.split("/"), - page - ); + const outPath = path.join(BUILD_OUT_ROOT, pathLocale, ...slug.split("/")); fs.mkdirSync(outPath, { recursive: true }); const jsonFilePath = path.join(outPath, "index.json"); fs.writeFileSync(jsonFilePath, JSON.stringify(context)); @@ -364,7 +353,7 @@ export async function buildSPAs(options: { ); await buildStaticPages( fileURLToPath(new URL("../copy/community/", import.meta.url)), - "community", + "", "Contribute to MDN" ); diff --git a/client/src/community/index.tsx b/client/src/community/index.tsx index 8b6f4006d051..26b9e6526f81 100644 --- a/client/src/community/index.tsx +++ b/client/src/community/index.tsx @@ -11,7 +11,7 @@ import { useIsServer } from "../hooks"; interface CommunityDoc { title: string; - body: Section[]; + sections: Section[]; } export function Community(appProps: HydrationData) { @@ -70,15 +70,15 @@ function useCommunityDoc( throw new HTTPError(response.status, url, text); } - return (await response.json())?.doc; + return (await response.json())?.hyData; }, { - fallbackData: appProps?.doc, + fallbackData: appProps?.hyData, revalidateOnFocus: WRITER_MODE, revalidateOnMount: true, } ); - const doc: CommunityDoc | undefined = data || appProps?.doc || undefined; + const doc: CommunityDoc | undefined = data || appProps?.hyData || undefined; return doc; } @@ -89,7 +89,7 @@ function RenderCommunityBody({ doc?: CommunityDoc; renderer?: (section: Section, i: number) => null | JSX.Element; }) { - return doc?.body.map((section, i) => { + return doc?.sections.map((section, i) => { return ( renderer(section, i) || ( @@ -105,10 +105,7 @@ function Header({ section, h1 }: { section: any; h1?: string }) { ); return (
-
-

{h1}

-
-
+
); } diff --git a/copy/community/index.md b/copy/community/community.md similarity index 100% rename from copy/community/index.md rename to copy/community/community.md From 8bf0bf2421cf63898b928d3a3321226035415822 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 27 Sep 2024 10:54:01 +0000 Subject: [PATCH 31/44] fix(community): offset-path url not working in chrome --- client/src/community/contributor-list.scss | 6 +++--- client/src/community/contributor-list.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss index 94077037cf5b..a1c5cefcde64 100644 --- a/client/src/community/contributor-list.scss +++ b/client/src/community/contributor-list.scss @@ -58,7 +58,7 @@ svg { display: none; } -@supports (offset-path: url("#outer-circle")) { +@supports (offset-path: ellipse(100% 50% at 100% 50%)) { @media (min-width: $screen-md) { .wrap { container-type: size; @@ -100,7 +100,7 @@ svg { animation: community-circle 0.1ms forwards; offset-anchor: center calc(0.5 * var(--img-size)); offset-distance: var(--offset-distance); - offset-path: url("#outer-circle"); + offset-path: ellipse(100% 50% at 100% 50%); offset-rotate: 0deg; @keyframes community-circle { @@ -111,7 +111,7 @@ svg { &:nth-of-type(n + 6) { --img-size: 5em; - offset-path: url("#inner-circle"); + offset-path: ellipse(50% 25% at 100% 50%); } &:nth-of-type(1) { diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.ts index e8a659cc7e62..e01d4f3e9c53 100644 --- a/client/src/community/contributor-list.ts +++ b/client/src/community/contributor-list.ts @@ -52,8 +52,8 @@ export class ContributorList extends LitElement {
    - - + + ${this._contributors.map(({ name, github, org }) => { const imgSrc = `https://avatars.githubusercontent.com/${github From 88fb28e1c253fa64bbe2d4f671c11012b89695a8 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 27 Sep 2024 10:59:13 +0000 Subject: [PATCH 32/44] fix(community): update copy --- copy/community/community.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/copy/community/community.md b/copy/community/community.md index 24733eaac35f..7e5e9d92dd53 100644 --- a/copy/community/community.md +++ b/copy/community/community.md @@ -8,9 +8,8 @@ Where web enthusiasts learn, collaborate, and create - **45K+** Total contributors -- **80M+** Monthly views - **200+** Weekly commits -- **8** Language communities +- **7** Language communities ## MDN's community powers the web @@ -18,15 +17,15 @@ MDN’s strength comes from the passion and dedication of our global community. Since our founding in 2005, we’ve grown into a thriving network. Together, we’ve created a comprehensive, open, and free resource that serves web developers across the globe. With volunteers leading translation efforts in -[8 languages](/en-US/docs/MDN/Community/Contributing/Translated_content), we’re +[7 languages](/en-US/docs/MDN/Community/Contributing/Translated_content), we’re truly international. ## Meet our contributors -We are an open-source community of developers dedicated to building resources -for a better web. Our diverse contributors, including developers, technical -writers, students, educators, designers, and more, come from various backgrounds -and platforms. Anyone can contribute, and each contribution strengthens our +We are an open-source community dedicated to building resources for a better +web. Our diverse contributors, including developers, technical writers, +students, educators, designers, and more, come from various backgrounds and +platforms. Anyone can contribute, and each contribution strengthens our community, driving innovation and improving this vital resource for developers worldwide. @@ -75,8 +74,8 @@ worldwide. [YiTao Yin](/en-US/community/spotlight/yitao-yin) (MDN contributor) If you wish to be a part of the featured contributors here, -[let us know](https://docs.google.com/forms/d/171RuXZoNs1gQmlJtfTiiU-hFo_odvi6rkx5fH-nqXDY/prefill).
    -If you’re featured here and would like to opt-out, +[let us know](https://forms.gle/7yk13Nn1WRLnuLvy5).
    If you’re featured here +and would like to opt-out, [please file an issue on GitHub](https://github.com/mdn/content/issues/new?assignees=&labels=needs+triage&projects=&template=content-bug.yml). ## Learn how to get started @@ -89,7 +88,7 @@ but not sure how? Follow to make your first contribution. Watch this video on -[how to get started with contributing to MDN Web Docs](https://www.youtube.com/watch?v=Xnhnu7PViQE) +[how to get started with contributing to MDN](https://www.youtube.com/watch?v=Xnhnu7PViQE). [Video from the community team on contributing to MDN](https://www.youtube.com/watch?v=Xnhnu7PViQE) From a9d4513ce3d3e0be4738a14a9050fbeaa388c423 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 27 Sep 2024 11:26:06 +0000 Subject: [PATCH 33/44] fix(community): keep things within main box --- client/src/community/index.scss | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index bd70f1dea147..e15bbaf8948d 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -300,7 +300,6 @@ main.community-container { contributor-list { grid-column: 1; grid-row: 1/5; - margin-left: calc(var(--negative-space) + var(--gutter)); min-width: 0; > ul { @@ -324,18 +323,43 @@ main.community-container { margin-bottom: 0; } + .section-content { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + background: linear-gradient( + to right, + transparent, + var(--community-bg-secondary) + ); + right: 0; + top: 0; + bottom: 0; + width: 3rem; + pointer-events: none; + + @media (max-width: $screen-md) { + display: none; + } + } + } + ul { display: flex; gap: 2rem; margin-bottom: 1.5rem; margin-left: -1rem; - margin-right: var(--negative-space); overflow-x: auto; padding: 2.41rem 1rem; + padding-right: 3rem; @media (max-width: $screen-md) { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); + padding-right: 1rem; } } From 5bfa3bb7aaa5c19389e436c0a57facea686df0ad Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 27 Sep 2024 11:35:52 +0000 Subject: [PATCH 34/44] fix(community): run svgs through svgo --- .../assets/community/community-calls-dark.svg | 5 +- .../src/assets/community/community-calls.svg | 9 +-- client/src/assets/community/discord-dark.svg | 6 +- client/src/assets/community/discord.svg | 10 +-- client/src/assets/community/people-dark.svg | 70 +----------------- client/src/assets/community/people.svg | 71 +------------------ .../src/assets/community/quote-end-dark.svg | 5 +- client/src/assets/community/quote-end.svg | 5 +- .../src/assets/community/quote-start-dark.svg | 5 +- client/src/assets/community/quote-start.svg | 5 +- client/src/assets/community/video-bg-dark.svg | 11 +-- client/src/assets/community/video-bg.svg | 11 +-- client/src/assets/community/youtube-play.svg | 9 +-- 13 files changed, 13 insertions(+), 209 deletions(-) diff --git a/client/src/assets/community/community-calls-dark.svg b/client/src/assets/community/community-calls-dark.svg index 7856e5e846f6..2240154f1349 100644 --- a/client/src/assets/community/community-calls-dark.svg +++ b/client/src/assets/community/community-calls-dark.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/client/src/assets/community/community-calls.svg b/client/src/assets/community/community-calls.svg index 962ac8364ae8..27cfe9867dd8 100644 --- a/client/src/assets/community/community-calls.svg +++ b/client/src/assets/community/community-calls.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/discord-dark.svg b/client/src/assets/community/discord-dark.svg index d5bfd2e0fa31..f836421aa365 100644 --- a/client/src/assets/community/discord-dark.svg +++ b/client/src/assets/community/discord-dark.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/discord.svg b/client/src/assets/community/discord.svg index 45d63e96a463..7a2f39028ace 100644 --- a/client/src/assets/community/discord.svg +++ b/client/src/assets/community/discord.svg @@ -1,9 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/people-dark.svg b/client/src/assets/community/people-dark.svg index 71db99b7f6b0..e8e6d6291378 100644 --- a/client/src/assets/community/people-dark.svg +++ b/client/src/assets/community/people-dark.svg @@ -1,69 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/people.svg b/client/src/assets/community/people.svg index d8a6d8d20846..ed01e9f1ac51 100644 --- a/client/src/assets/community/people.svg +++ b/client/src/assets/community/people.svg @@ -1,70 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/quote-end-dark.svg b/client/src/assets/community/quote-end-dark.svg index 169e0f190da4..17111d53c590 100644 --- a/client/src/assets/community/quote-end-dark.svg +++ b/client/src/assets/community/quote-end-dark.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/client/src/assets/community/quote-end.svg b/client/src/assets/community/quote-end.svg index 4fc721e4dbd8..7157f39d7558 100644 --- a/client/src/assets/community/quote-end.svg +++ b/client/src/assets/community/quote-end.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/client/src/assets/community/quote-start-dark.svg b/client/src/assets/community/quote-start-dark.svg index 16e4603b4c56..3a4f97aae0f5 100644 --- a/client/src/assets/community/quote-start-dark.svg +++ b/client/src/assets/community/quote-start-dark.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/client/src/assets/community/quote-start.svg b/client/src/assets/community/quote-start.svg index a179e3ed2896..d668df1113f5 100644 --- a/client/src/assets/community/quote-start.svg +++ b/client/src/assets/community/quote-start.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/client/src/assets/community/video-bg-dark.svg b/client/src/assets/community/video-bg-dark.svg index 3cbd3d0c845f..5e44ae3bfd1b 100644 --- a/client/src/assets/community/video-bg-dark.svg +++ b/client/src/assets/community/video-bg-dark.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/video-bg.svg b/client/src/assets/community/video-bg.svg index 4e57ae8435c2..28ed1f005ca3 100644 --- a/client/src/assets/community/video-bg.svg +++ b/client/src/assets/community/video-bg.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/client/src/assets/community/youtube-play.svg b/client/src/assets/community/youtube-play.svg index 2cbdb4edb31c..f6d7dc4ca7b4 100644 --- a/client/src/assets/community/youtube-play.svg +++ b/client/src/assets/community/youtube-play.svg @@ -1,8 +1 @@ - - - - - - - - \ No newline at end of file + \ No newline at end of file From 9af3518cb72f03838fa6ebe60fb8ba8570af0d93 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Fri, 27 Sep 2024 11:46:33 +0000 Subject: [PATCH 35/44] fix(community): stylelint --- client/src/community/index.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index e15bbaf8948d..c20be86ef2d0 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -327,19 +327,19 @@ main.community-container { position: relative; &::after { - content: ""; - display: block; - position: absolute; background: linear-gradient( to right, transparent, var(--community-bg-secondary) ); + bottom: 0; + content: ""; + display: block; + pointer-events: none; + position: absolute; right: 0; top: 0; - bottom: 0; width: 3rem; - pointer-events: none; @media (max-width: $screen-md) { display: none; From dcb19675e5f29064c033adc9fc39e53519dcca65 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Mon, 30 Sep 2024 11:09:05 +0000 Subject: [PATCH 36/44] fix(community): avoid '| Contribute to MDN' title --- build/spas.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/build/spas.ts b/build/spas.ts index c8e2c8f62b12..7076f3f4c014 100644 --- a/build/spas.ts +++ b/build/spas.ts @@ -320,7 +320,9 @@ export async function buildSPAs(options: { }; const context: HydrationData = { hyData, - pageTitle: `${frontMatter.attributes.title || ""} | ${title}`, + pageTitle: frontMatter.attributes.title + ? `${frontMatter.attributes.title} | ${title}` + : title, url, }; From 28aa732af42db98824b067857c4b332f157163a2 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 1 Oct 2024 11:01:04 +0000 Subject: [PATCH 37/44] fix(community): fix tabbing order in contributor circle --- client/src/community/contributor-list.scss | 48 ++++++++-------------- 1 file changed, 17 insertions(+), 31 deletions(-) diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss index a1c5cefcde64..58cc783a0dd0 100644 --- a/client/src/community/contributor-list.scss +++ b/client/src/community/contributor-list.scss @@ -94,7 +94,6 @@ svg { } li { - --offset-distance: calc(var(--community-circle-angle) * 50% + 25%); // necessary because Firefox seems to have a bug where the links aren't // clickable until we force some kind of re-render which an animation does: animation: community-circle 0.1ms forwards; @@ -109,41 +108,28 @@ svg { } } - &:nth-of-type(n + 6) { - --img-size: 5em; - offset-path: ellipse(50% 25% at 100% 50%); - } - - &:nth-of-type(1) { - --community-circle-angle: 0; - } - - &:nth-of-type(2) { - --community-circle-angle: 1/4; - } - - &:nth-of-type(3) { - --community-circle-angle: 2/4; - } + $outer-elements: 5; + $inner-elements: 3; - &:nth-of-type(4) { - --community-circle-angle: 3/4; - } - - &:nth-of-type(5) { - --community-circle-angle: 1; - } - - &:nth-of-type(6) { - --community-circle-angle: 0; + @for $i from 1 through $outer-elements { + &:nth-of-type(#{$i}) { + --offset-distance: #{calc( + 75% - (($i - 1) * 50% / ($outer-elements - 1)) + )}; + } } - &:nth-of-type(7) { - --community-circle-angle: 1/2; + &:nth-of-type(n + #{$outer-elements + 1}) { + --img-size: 5em; + offset-path: ellipse(50% 25% at 100% 50%); } - &:nth-of-type(8) { - --community-circle-angle: 1; + @for $i from 1 through $inner-elements { + &:nth-of-type(#{$outer-elements + $i}) { + --offset-distance: #{calc( + 75% - (($i - 1) * 50% / ($inner-elements - 1)) + )}; + } } } From 608d563dc4e0956611d3d611ac84681d6f13eb0f Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 1 Oct 2024 11:10:02 +0000 Subject: [PATCH 38/44] wip(community): fix stylelint --- client/src/community/contributor-list.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss index 58cc783a0dd0..7f3dab1f207f 100644 --- a/client/src/community/contributor-list.scss +++ b/client/src/community/contributor-list.scss @@ -94,6 +94,9 @@ svg { } li { + $outer-elements: 5; + $inner-elements: 3; + // necessary because Firefox seems to have a bug where the links aren't // clickable until we force some kind of re-render which an animation does: animation: community-circle 0.1ms forwards; @@ -102,15 +105,17 @@ svg { offset-path: ellipse(100% 50% at 100% 50%); offset-rotate: 0deg; + &:nth-of-type(n + #{$outer-elements + 1}) { + --img-size: 5em; + offset-path: ellipse(50% 25% at 100% 50%); + } + @keyframes community-circle { from { offset-distance: calc(var(--offset-distance) - 0.1%); } } - $outer-elements: 5; - $inner-elements: 3; - @for $i from 1 through $outer-elements { &:nth-of-type(#{$i}) { --offset-distance: #{calc( @@ -119,11 +124,6 @@ svg { } } - &:nth-of-type(n + #{$outer-elements + 1}) { - --img-size: 5em; - offset-path: ellipse(50% 25% at 100% 50%); - } - @for $i from 1 through $inner-elements { &:nth-of-type(#{$outer-elements + $i}) { --offset-distance: #{calc( From 3e07e84902a6d69663d148758b736c19b0e484c0 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 1 Oct 2024 11:19:57 +0000 Subject: [PATCH 39/44] wip(community): clip-path: inset(); doesn't work properly on webkit --- client/src/community/contributor-list.scss | 1 - client/src/community/contributor-list.ts | 28 ++++++++++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/client/src/community/contributor-list.scss b/client/src/community/contributor-list.scss index 7f3dab1f207f..232d5e7a6949 100644 --- a/client/src/community/contributor-list.scss +++ b/client/src/community/contributor-list.scss @@ -82,7 +82,6 @@ svg { } svg { - clip-path: inset(calc(-1 * var(--circle-border-size))); display: block; fill: none; height: 100%; diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.ts index e01d4f3e9c53..c197cddbaa0d 100644 --- a/client/src/community/contributor-list.ts +++ b/client/src/community/contributor-list.ts @@ -52,8 +52,32 @@ export class ContributorList extends LitElement {
      - - + + + + + + + ${this._contributors.map(({ name, github, org }) => { const imgSrc = `https://avatars.githubusercontent.com/${github From 285efc0e37c28f7d4c67f69053695e56da8e9888 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 1 Oct 2024 11:21:57 +0000 Subject: [PATCH 40/44] wip(community): review updates --- client/src/community/contributor-list.ts | 1 + libs/constants/index.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.ts index c197cddbaa0d..79cc1d0143b4 100644 --- a/client/src/community/contributor-list.ts +++ b/client/src/community/contributor-list.ts @@ -104,5 +104,6 @@ export class ContributorList extends LitElement { function popRandom(array: Array) { const i = Math.floor(Math.random() * array.length); + // mutate the array: return array.splice(i, 1)[0]; } diff --git a/libs/constants/index.js b/libs/constants/index.js index 2760c5f01fd1..a2ac0bbcb19b 100644 --- a/libs/constants/index.js +++ b/libs/constants/index.js @@ -153,7 +153,6 @@ export const CSP_DIRECTIVES = { "firefoxusercontent.com", "profile.stage.mozaws.net", "profile.accounts.firefox.com", - "https://github.com", "mdn.dev", "interactive-examples.mdn.mozilla.net", From ffdce8007db071489e828e1fae5f9530380a501c Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 8 Oct 2024 10:16:56 +0000 Subject: [PATCH 41/44] fix(community): show focus ring on youtube link --- client/src/community/index.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index c20be86ef2d0..f58ef0ba3650 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -467,8 +467,22 @@ main.community-container { color: transparent; display: block; overflow: hidden; + position: relative; text-indent: -100rem; + &:focus-visible::after { + content: ""; + display: block; + height: 30%; + left: 45% - 40% / 2; + outline-color: var(--accent-primary); + outline-offset: 1px; + outline-style: auto; + position: absolute; + top: 50% - 30% / 2; + width: 40%; + } + @media (max-width: $screen-md) { width: 28rem; } From c4fc5d0c19bea9cd76b26b9ceb7be028ed574c1f Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 8 Oct 2024 13:27:22 +0000 Subject: [PATCH 42/44] fix(community): fix lint --- client/src/community/index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index f58ef0ba3650..6ae44b260f8a 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -474,12 +474,12 @@ main.community-container { content: ""; display: block; height: 30%; - left: 45% - 40% / 2; + left: calc(45% - 40% / 2); outline-color: var(--accent-primary); outline-offset: 1px; outline-style: auto; position: absolute; - top: 50% - 30% / 2; + top: calc(50% - 30% / 2); width: 40%; } From d97fc32637e5762fcac31105fc452c102f2f3cb6 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 8 Oct 2024 13:59:32 +0000 Subject: [PATCH 43/44] fix(community): fix for https://github.com/mdn/yari/pull/11930 --- client/src/community/index.scss | 11 +++++++---- copy/community/community.md | 4 ++++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index 6ae44b260f8a..e01daabd3062 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -512,11 +512,10 @@ main.community-container { border-radius: 0.5rem; box-shadow: var(--community-box-shadow); display: flex; - flex: 1; flex-direction: column; gap: 1.5rem; justify-content: space-between; - padding: 1.5rem 3rem; + padding: 1.5rem; text-align: center; h3 { @@ -525,9 +524,13 @@ main.community-container { border-radius: 0.5rem 0.5rem 0 0; font-size: 1.25rem; font-weight: 500; - margin: -1.5rem -3rem; + margin: -1.5rem; margin-bottom: 0; - padding: 1.5rem 3rem; + padding: 1.5rem; + } + + p { + margin: 0; } a { diff --git a/copy/community/community.md b/copy/community/community.md index 7e5e9d92dd53..f57c0a6bb5a9 100644 --- a/copy/community/community.md +++ b/copy/community/community.md @@ -102,21 +102,25 @@ engage. - ### Fix issues Submit pull requests to fix reported issues. + [Squash bugs](https://github.com/mdn/content/issues) - ### Improve content Fix inaccuracies and fill in missing information. + [Start writing](https://github.com/mdn/content/#readme) - ### Localize content Participate in translating content into one of our supported languages. + [Find your locale](/en-US/docs/MDN/Community/Contributing/Translated_content#active_locales) - ### Answer questions Share your knowledge and expertise and guide fellow learners. + [Help on Discord](https://mdn.dev/discord) ## Help us fix open issues From af6fbc19a210f4967690ce21998932e25ba8a33c Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Thu, 10 Oct 2024 16:07:57 +0000 Subject: [PATCH 44/44] fix(community): further fix for https://github.com/mdn/yari/pull/11930 --- client/src/community/index.scss | 4 ++++ copy/community/community.md | 2 ++ 2 files changed, 6 insertions(+) diff --git a/client/src/community/index.scss b/client/src/community/index.scss index e01daabd3062..e82e3e6b4645 100644 --- a/client/src/community/index.scss +++ b/client/src/community/index.scss @@ -678,6 +678,10 @@ main.community-container { a { @include button.primary; } + + p { + margin: 0; + } } } } diff --git a/copy/community/community.md b/copy/community/community.md index f57c0a6bb5a9..1f851e99e660 100644 --- a/copy/community/community.md +++ b/copy/community/community.md @@ -133,12 +133,14 @@ improve MDN. - ### Chat with us on Discord Connect with the community. Engage with domain experts. Help others learn. + [Join MDN Discord](https://mdn.dev/discord) - ### Join our Community Call Every month, get exclusive updates from the MDN team. Share your ideas and contributions. + [RSVP to the next community call](https://github.com/mdn/community-meetings?tab=readme-ov-file#mdn-community-meetings) While working in Mozilla spaces and communities, please adhere to the