-
+ return (
+ section.value.id &&
+ section.value.content && (
+
-
+ {
+ if (i === 0) {
+ return
+ );
+}
+
+export function useAboutDoc(
+ appProps?: HydrationData
+): AboutDoc | 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);
+
+ if (!response.ok) {
+ switch (response.status) {
+ case 404:
+ throw new HTTPError(response.status, url, "Page not found");
+ }
+
+ const text = await response.text();
+ throw new HTTPError(response.status, url, text);
+ }
+
+ return (await response.json())?.hyData;
+ },
+ {
+ fallbackData: appProps?.hyData,
+ revalidateOnFocus: WRITER_MODE,
+ revalidateOnMount: true,
+ }
+ );
+ const doc: AboutDoc | undefined = data || appProps?.hyData || undefined;
+ return doc;
+}
+
+function RenderAboutBody({
+ doc,
+ renderer = () => null,
+}: {
+ doc?: AboutDoc;
+ renderer?: (section: AboutSection, i: number) => null | JSX.Element;
+}) {
+ const sections = Array.from(doc?.sections || []).reduce(
+ (acc, curr) => {
+ if (curr.value.isH3) {
+ const prev = acc.at(-1);
+ if (prev) {
+ prev.H3s ? prev.H3s.push(curr) : (prev.H3s = [curr]);
+ }
+ } else {
+ acc.push(Object.assign({}, curr));
+ }
+ return acc;
+ },
+ []
+ );
+ return sections.map((section, i) => {
+ return (
+ renderer(section, i) || (
+
+
+
+ ) : null;
+}
+
+function Tabs({ section }: { section: AboutSection }) {
+ const [activeTab, setActiveTab] = useState(0);
+ const tabs = useRef(null);
+ const gleanClick = useGleanClick();
+
+ const changeTab = useCallback(
+ (i: number) => {
+ const id = section.H3s?.[i].value.id;
+ if (id) {
+ setActiveTab(i);
+ if (tabs.current && tabs.current.getBoundingClientRect().top < 0) {
+ tabs.current.scrollIntoView({ block: "start", inline: "nearest" });
+ }
+ gleanClick(`${ABOUT}: tab -> ${id}`);
+ }
+ },
+ [section.H3s, gleanClick]
+ );
+
+ useEffect(() => {
+ const hash = document.location.hash.startsWith("#our_team")
+ ? "#our_team"
+ : document.location.hash.startsWith("#our_partners") ||
+ document.location.hash === "#pab" ||
+ document.location.hash === "#owd"
+ ? "#our_partners"
+ : document.location.hash;
+ const tab = section.H3s?.findIndex(({ value }) => `#${value.id}` === hash);
+ if (tab && tab > 0) {
+ setActiveTab(tab);
+ }
+ }, [section.H3s, changeTab]);
-
-
-
- MDN's mission is to{" "}
- provide a blueprint for a better internet and empower a new
- generation of developers and content creators to build it.
-
-
-
-
- Build it better
-- MDN Web Docs is an open-source, collaborative project documenting Web - platform technologies, including{" "} - CSS,{" "} - HTML,{" "} - JavaScript, and{" "} - Web APIs. We also provide an - extensive set of{" "} - learning resources for beginning - developers and students. -
+- We're always striving to connect developers more seamlessly with the - tools and information they need to easily build projects on the{" "} - open Web. Since our beginnings in 2005, Mozilla and - the community have amassed around 45,000 pages of free, open-source - content. -
- {/*- Independent and unbiased - across browsers and technologies -
-- This guiding principle has made MDN Web Docs the go-to repository of - independent information for developers, regardless of brand, browser - or platform. We are an open community of devs, writers, and other - technologists building resources for a better Web, with over 17 - million monthly MDN users from all over the world. Anyone can - contribute, and each of the 45,000 individuals who have done so over - the past decades has strengthened and improved the resource. We also - receive content contributions from our partners, including Microsoft, - Google, Samsung, Igalia, W3C and others. Together we continue to drive - innovation on the Web and serve the common good. -
-Accurate and vetted for quality
-- Through our GitHub documentation repository, contributors can make - changes, submit pull requests, have their contributions reviewed and - then merged with existing content. Through{" "} - - this workflow - - , we welcome the vast knowledge and experience of our developer - community while maintaining a high level of quality, accurate content. -
-{section.value.title}
+ + {section.H3s && ( +
+
+ )}
+
+
+ {section.H3s?.map(
+ ({ value }, i) =>
+ value.id &&
+ value.content && (
+
+ )
+ )}
+
+ {section.H3s?.map(
+ ({ value }, i) =>
+ value.id &&
+ value.content && (
+ changeTab(i)}
+ >
+ {value.title}
+
+ )
+ )}
+
+
-
-
- );
-}
diff --git a/client/src/about/testimonial/quote.svg b/client/src/about/testimonial/quote.svg
deleted file mode 100644
index 19dcfe170995..000000000000
--- a/client/src/about/testimonial/quote.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/client/src/app.scss b/client/src/app.scss
index f0e38641c4cf..6281566b0080 100644
--- a/client/src/app.scss
+++ b/client/src/app.scss
@@ -157,7 +157,6 @@ main {
min-height: 80vh;
}
-.about-container,
.main-page-content {
a {
&:link,
@@ -355,7 +354,8 @@ sup.new {
.sticky-header-container {
position: sticky;
- top: 0;
+ // Avoid gap on certain zoom levels.
+ top: -1px;
z-index: var(--z-index-main-header);
}
diff --git a/client/src/app.tsx b/client/src/app.tsx
index ff38d1aafa04..e452d6c89a3f 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -229,7 +229,7 @@ export function App(appProps: HydrationData) {
to simulate it.
*/}
-
- -
- Condimentum donec quam odio viverra erat mi mae-cenas odio. Tempus - arcu tincidunt tortor placerat tempor pharetra. -
- - First Name - - Title goes here -{section.value.title}
- +| Name | -- - Expires - - | -- - Path - - | -- - Secure - - | -- - HttpOnly - - | -- - SameSite - - | -- - Prefix - - | -||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| - {key} - | -- {value.expires - ? formatDateTime(new Date(value.expires)) - : "Session"} - | -
- {value.path}
- |
-
- |
-
- |
-
- {value.samesite ? {capitalize(value.samesite)} : "-"}
- |
-
- |
+ <>
+
| Name | ++ + Expires + + | ++ + Path + + | ++ + Secure + + | ++ + HttpOnly + + | ++ + SameSite + + | ++ + Prefix + + |
|---|
{value.path}
+ {capitalize(value.samesite)}
+ ) : (
+ "-"
+ )}
+