Community for a better Web
+Community for a better web
-
{STATS.map((s) => (
-
@@ -50,7 +50,7 @@ export function Contribute() {
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
+ 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.
@@ -127,16 +127,18 @@ export function Contribute() {
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.
+
+ 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 + 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. Please,{" "} - join us! + 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 @@ -147,10 +149,9 @@ export function Contribute() { 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 to{" "} making your first contribution to MDN on GitHub diff --git a/client/src/document/index.scss b/client/src/document/index.scss index c39047b0692a..7cec61e05032 100644 --- a/client/src/document/index.scss +++ b/client/src/document/index.scss @@ -424,6 +424,7 @@ code, code { background: var(--code-background-inline); + font-family: var(--font-code); padding: 0.125rem 0.25rem; width: fit-content; } diff --git a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx index e6e574ff995d..e7e74eb2c413 100644 --- a/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx +++ b/client/src/document/ingredients/browser-compatibility-table/feature-row.tsx @@ -135,7 +135,7 @@ const CellText = React.memo( const currentSupport = getCurrentSupport(support); const added = currentSupport?.version_added ?? null; - const removed = currentSupport?.version_removed ?? null; + const lastVersion = currentSupport?.version_last ?? null; const browserReleaseDate = getSupportBrowserReleaseDate(support); const supportClassName = getSupportClassName(support, browser); @@ -151,7 +151,7 @@ const CellText = React.memo( status = { isSupported: "unknown" }; break; case true: - status = { isSupported: removed ? "no" : "yes" }; + status = { isSupported: lastVersion ? "no" : "yes" }; break; case false: status = { isSupported: "no" }; @@ -162,7 +162,7 @@ const CellText = React.memo( default: status = { isSupported: supportClassName, - label: versionLabelFromSupport(added, removed, browser), + label: versionLabelFromSupport(added, lastVersion, browser), }; break; } diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss index 9d9eff8e9dec..8fe71876fb26 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss +++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-md.scss @@ -1,5 +1,5 @@ @media screen and (min-width: $screen-md) { - .table-scroll { + .table-container { width: calc(100% + 6rem); } diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss index 0fcb1567dd74..82a8c1294f72 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss +++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop-xl.scss @@ -1,10 +1,10 @@ @media screen and (min-width: $screen-xl) { - .table-scroll { + .table-container { margin: 0; width: 100%; } - .table-scroll-inner { + .table-container-inner { padding: 0; } } diff --git a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss index b063402d5f1a..5db51b15bb34 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss +++ b/client/src/document/ingredients/browser-compatibility-table/index-desktop.scss @@ -32,13 +32,13 @@ } } - .table-scroll { + .table-container { margin: 0 -3rem; overflow: auto; width: 100vw; } - .table-scroll-inner { + .table-container-inner { min-width: max-content; padding: 0 3rem; position: relative; diff --git a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss index be729b5f0266..4d97c083d859 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss +++ b/client/src/document/ingredients/browser-compatibility-table/index-mobile.scss @@ -25,7 +25,7 @@ } } - .table-scroll { + .table-container { overflow-x: auto; } } diff --git a/client/src/document/ingredients/browser-compatibility-table/index.tsx b/client/src/document/ingredients/browser-compatibility-table/index.tsx index a50ca4a05dc4..2fd09e518061 100644 --- a/client/src/document/ingredients/browser-compatibility-table/index.tsx +++ b/client/src/document/ingredients/browser-compatibility-table/index.tsx @@ -171,8 +171,8 @@ export default function BrowserCompatibilityTable({ > Report problems with this compatibility data on GitHub -
-+ + {/* https://github.com/mdn/yari/issues/1191 */} diff --git a/client/src/document/ingredients/browser-compatibility-table/utils.ts b/client/src/document/ingredients/browser-compatibility-table/utils.ts index 7149e90a1f85..6b20a7060e19 100644 --- a/client/src/document/ingredients/browser-compatibility-table/utils.ts +++ b/client/src/document/ingredients/browser-compatibility-table/utils.ts @@ -6,6 +6,9 @@ interface SimpleSupportStatementExtended extends BCD.SimpleSupportStatement { // Known for some support statements where the browser *version* is known, // as opposed to just "true" and if the version release date is known. release_date?: string; + // The version before the version_removed if the *version* removed is known, + // as opposed to just "true". Otherwise the version_removed. + version_last?: BCD.VersionValue; } export type SupportStatementExtended = diff --git a/client/src/document/ingredients/utils.tsx b/client/src/document/ingredients/utils.tsx index 0987c11e3915..61984f44a40f 100644 --- a/client/src/document/ingredients/utils.tsx +++ b/client/src/document/ingredients/utils.tsx @@ -42,7 +42,6 @@ function Permalink({ return ( ); diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx index e8a8e4a986c0..002fb109bf3e 100644 --- a/client/src/document/organisms/sidebar/index.tsx +++ b/client/src/document/organisms/sidebar/index.tsx @@ -28,6 +28,18 @@ export function SidebarContainer({ doc, children }) { } }, [isSidebarOpen]); + useEffect(() => { + const sidebar = document.querySelector("#sidebar-quicklinks"); + const currentSidebarItem = sidebar?.querySelector("em"); + if (sidebar && currentSidebarItem) { + [sidebar, sidebar.querySelector(".sidebar-inner")].forEach((n) => + n?.scrollTo({ + top: currentSidebarItem.offsetTop - window.innerHeight / 3, + }) + ); + } + }, []); + return ( <>+-+
-@@ -183,8 +183,8 @@ export default function BrowserCompatibilityTable({ />