From c9e2e39940c12718fb78fb499a8e3e1045e7d60f Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 23 Jan 2023 22:59:55 +0000 Subject: [PATCH 01/47] [Beta] Refactor navigation logic (#5492) * Pass route lists explicitly * Inline MarkdownPage into Page * Pass breadcrumbs from above * Remove state from router utils * Pass section from above --- beta/src/components/Breadcrumbs.tsx | 6 +- beta/src/components/DocsFooter.tsx | 2 +- beta/src/components/Layout/MarkdownPage.tsx | 58 ------------ beta/src/components/Layout/Nav/Nav.tsx | 18 ++-- beta/src/components/Layout/Page.tsx | 92 +++++++++++++------ .../Layout/Sidebar/SidebarRouteTree.tsx | 36 +++----- .../{useRouteMeta.tsx => getRouteMeta.tsx} | 24 +---- beta/src/components/PageHeading.tsx | 6 +- beta/src/components/Tag.tsx | 2 +- beta/src/hooks/useActiveSection.ts | 16 ---- beta/src/hooks/usePathWithoutQuerystring.ts | 16 ---- beta/src/pages/404.js | 26 +++--- beta/src/pages/500.js | 33 +++---- beta/src/pages/[[...markdownPath]].js | 28 +++++- 14 files changed, 150 insertions(+), 213 deletions(-) delete mode 100644 beta/src/components/Layout/MarkdownPage.tsx rename beta/src/components/Layout/{useRouteMeta.tsx => getRouteMeta.tsx} (80%) delete mode 100644 beta/src/hooks/useActiveSection.ts delete mode 100644 beta/src/hooks/usePathWithoutQuerystring.ts diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx index 9bd630b12..96b50cd30 100644 --- a/beta/src/components/Breadcrumbs.tsx +++ b/beta/src/components/Breadcrumbs.tsx @@ -3,12 +3,10 @@ */ import {Fragment} from 'react'; -import {useRouteMeta} from 'components/Layout/useRouteMeta'; import Link from 'next/link'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; -function Breadcrumbs() { - const {breadcrumbs} = useRouteMeta(); - if (!breadcrumbs) return null; +function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { return (
{breadcrumbs.map( diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx index 6a8597705..82f97ab2b 100644 --- a/beta/src/components/DocsFooter.tsx +++ b/beta/src/components/DocsFooter.tsx @@ -7,7 +7,7 @@ import {memo} from 'react'; import cn from 'classnames'; import {removeFromLast} from 'utils/removeFromLast'; import {IconNavArrow} from './Icon/IconNavArrow'; -import {RouteMeta} from './Layout/useRouteMeta'; +import type {RouteMeta} from './Layout/getRouteMeta'; export type DocsPageFooterProps = Pick< RouteMeta, diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx deleted file mode 100644 index c44298c05..000000000 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {useRouter} from 'next/router'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {Seo} from 'components/Seo'; -import PageHeading from 'components/PageHeading'; -import {useRouteMeta} from './useRouteMeta'; -import {useActiveSection} from '../../hooks/useActiveSection'; -import {TocContext} from '../MDX/TocContext'; - -import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); - -export interface MarkdownProps { - meta: Frontmatter & {description?: string}; - children?: React.ReactNode; - toc: Array<{ - url: string; - text: React.ReactNode; - depth: number; - }>; -} - -export function MarkdownPage< - T extends {title: string; status?: string} = {title: string; status?: string} ->({children, meta, toc}: MarkdownProps) { - const {route, nextRoute, prevRoute} = useRouteMeta(); - const section = useActiveSection(); - const title = meta.title || route?.title || ''; - const description = meta.description || route?.description || ''; - const isHomePage = section === 'home'; - return ( - <> -
- - {!isHomePage && ( - - )} -
-
- {children} -
- -
-
- - ); -} diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx index 6422ecdb0..4285ece7f 100644 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -12,13 +12,11 @@ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'; import {IconClose} from 'components/Icon/IconClose'; import {IconHamburger} from 'components/Icon/IconHamburger'; import {Search} from 'components/Search'; -import {useActiveSection} from 'hooks/useActiveSection'; import {Logo} from '../../Logo'; import {Feedback} from '../Feedback'; import NavLink from './NavLink'; -import {SidebarContext} from 'components/Layout/useRouteMeta'; import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; -import type {RouteItem} from '../useRouteMeta'; +import type {RouteItem} from '../getRouteMeta'; import sidebarLearn from '../../../sidebarLearn.json'; import sidebarReference from '../../../sidebarReference.json'; @@ -92,17 +90,22 @@ const lightIcon = ( ); -export default function Nav() { +export default function Nav({ + routeTree, + breadcrumbs, + section, +}: { + routeTree: RouteItem; + breadcrumbs: RouteItem[]; + section: 'learn' | 'reference' | 'home'; +}) { const [isOpen, setIsOpen] = useState(false); const [showFeedback, setShowFeedback] = useState(false); const scrollParentRef = useRef(null); const feedbackAutohideRef = useRef(null); - const section = useActiveSection(); const {asPath} = useRouter(); const feedbackPopupRef = useRef(null); - // In desktop mode, use the route tree for current route. - let routeTree: RouteItem = useContext(SidebarContext); // In mobile mode, let the user switch tabs there and back without navigating. // Seed the tab state from the router, but keep it independent. const [tab, setTab] = useState(section); @@ -344,6 +347,7 @@ export default function Nav() { // This avoids unnecessary animations and visual flicker. key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'} routeTree={routeTree} + breadcrumbs={breadcrumbs} isForceExpanded={isOpen} /> diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx index cafba9d36..44f248186 100644 --- a/beta/src/components/Layout/Page.tsx +++ b/beta/src/components/Layout/Page.tsx @@ -6,52 +6,86 @@ import {Suspense} from 'react'; import * as React from 'react'; import {useRouter} from 'next/router'; import {Nav} from './Nav'; -import {RouteItem, SidebarContext} from './useRouteMeta'; -import {useActiveSection} from 'hooks/useActiveSection'; import {Footer} from './Footer'; import {Toc} from './Toc'; import SocialBanner from '../SocialBanner'; +import {DocsPageFooter} from 'components/DocsFooter'; +import {Seo} from 'components/Seo'; +import PageHeading from 'components/PageHeading'; +import {getRouteMeta} from './getRouteMeta'; +import {TocContext} from '../MDX/TocContext'; import sidebarLearn from '../../sidebarLearn.json'; import sidebarReference from '../../sidebarReference.json'; import type {TocItem} from 'components/MDX/TocContext'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; + +import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); interface PageProps { children: React.ReactNode; toc: Array; + routeTree: RouteItem; + meta: {title?: string; description?: string}; + section: 'learn' | 'reference' | 'home'; } -export function Page({children, toc}: PageProps) { +export function Page({children, toc, routeTree, meta, section}: PageProps) { const {asPath} = useRouter(); - const section = useActiveSection(); - let routeTree = sidebarLearn as RouteItem; - switch (section) { - case 'reference': - routeTree = sidebarReference as RouteItem; - break; - } + const cleanedPath = asPath.split(/[\?\#]/)[0]; + const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta( + cleanedPath, + routeTree + ); + const title = meta.title || route?.title || ''; + const description = meta.description || route?.description || ''; + const isHomePage = cleanedPath === '/'; return ( <> - -
-
-
- {/* No fallback UI so need to be careful not to suspend directly inside. */} - -
-
-
- {children} -
-
-
- -
- {toc.length > 0 && } -
+
+
+
+ {/* No fallback UI so need to be careful not to suspend directly inside. */} + +
+
+
+
+ + {!isHomePage && ( + + )} +
+
+ + {children} + +
+ +
+
+
+
+
+ +
+ {toc.length > 0 && }
- +
); } diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 85fe5713e..34fbcc095 100644 --- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -5,16 +5,16 @@ import {useRef, useLayoutEffect, Fragment} from 'react'; import cn from 'classnames'; -import {RouteItem} from 'components/Layout/useRouteMeta'; import {useRouter} from 'next/router'; import {removeFromLast} from 'utils/removeFromLast'; -import {useRouteMeta} from '../useRouteMeta'; import {SidebarLink} from './SidebarLink'; import useCollapse from 'react-collapsed'; import usePendingRoute from 'hooks/usePendingRoute'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; interface SidebarRouteTreeProps { isForceExpanded: boolean; + breadcrumbs: RouteItem[]; routeTree: RouteItem; level?: number; } @@ -72,31 +72,13 @@ function CollapseWrapper({ export function SidebarRouteTree({ isForceExpanded, + breadcrumbs, routeTree, level = 0, }: SidebarRouteTreeProps) { - const {breadcrumbs} = useRouteMeta(routeTree); - const cleanedPath = useRouter().asPath.split(/[\?\#]/)[0]; + const slug = useRouter().asPath.split(/[\?\#]/)[0]; const pendingRoute = usePendingRoute(); - - const slug = cleanedPath; const currentRoutes = routeTree.routes as RouteItem[]; - const expandedPath = currentRoutes.reduce( - (acc: string | undefined, curr: RouteItem) => { - if (acc) return acc; - const breadcrumb = breadcrumbs.find((b) => b.path === curr.path); - if (breadcrumb) { - return curr.path; - } - if (curr.path === cleanedPath) { - return cleanedPath; - } - return undefined; - }, - undefined - ); - - const expanded = expandedPath; return (
    {currentRoutes.map( @@ -106,7 +88,6 @@ export function SidebarRouteTree({ ) => { const pagePath = path && removeFromLast(path, '.'); const selected = slug === pagePath; - let listItem = null; if (!path || !pagePath || heading) { // if current route item has no path and children treat it as an API sidebar heading @@ -115,11 +96,15 @@ export function SidebarRouteTree({ level={level + 1} isForceExpanded={isForceExpanded} routeTree={{title, routes}} + breadcrumbs={[]} /> ); } else if (routes) { // if route has a path and child routes, treat it as an expandable sidebar item - const isExpanded = isForceExpanded || expanded === path; + const isBreadcrumb = + breadcrumbs.length > 1 && + breadcrumbs[breadcrumbs.length - 1].path === path; + const isExpanded = isForceExpanded || isBreadcrumb || selected; listItem = (
  • diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/getRouteMeta.tsx similarity index 80% rename from beta/src/components/Layout/useRouteMeta.tsx rename to beta/src/components/Layout/getRouteMeta.tsx index ce508ebb6..83432d5e9 100644 --- a/beta/src/components/Layout/useRouteMeta.tsx +++ b/beta/src/components/Layout/getRouteMeta.tsx @@ -2,9 +2,6 @@ * Copyright (c) Facebook, Inc. and its affiliates. */ -import {useContext, createContext} from 'react'; -import {useRouter} from 'next/router'; - /** * While Next.js provides file-based routing, we still need to construct * a sidebar for navigation and provide each markdown page @@ -57,30 +54,19 @@ export interface RouteMeta { breadcrumbs?: RouteItem[]; } -export function useRouteMeta(rootRoute?: RouteItem) { - const sidebarContext = useContext(SidebarContext); - const routeTree = rootRoute || sidebarContext; - const router = useRouter(); - if (router.pathname === '/404') { - return { - breadcrumbs: [], - }; - } - const cleanedPath = router.asPath.split(/[\?\#]/)[0]; +export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) { const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree); return { - ...getRouteMeta(cleanedPath, routeTree), + ...buildRouteMeta(cleanedPath, routeTree, {}), breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree], }; } -export const SidebarContext = createContext({title: 'root'}); - // Performs a depth-first search to find the current route and its previous/next route -function getRouteMeta( +function buildRouteMeta( searchPath: string, currentRoute: RouteItem, - ctx: RouteMeta = {} + ctx: RouteMeta ): RouteMeta { const {routes} = currentRoute; @@ -101,7 +87,7 @@ function getRouteMeta( } for (const route of routes) { - getRouteMeta(searchPath, route, ctx); + buildRouteMeta(searchPath, route, ctx); } return ctx; diff --git a/beta/src/components/PageHeading.tsx b/beta/src/components/PageHeading.tsx index a238fceb0..2f4d3b0c8 100644 --- a/beta/src/components/PageHeading.tsx +++ b/beta/src/components/PageHeading.tsx @@ -4,14 +4,15 @@ import Breadcrumbs from 'components/Breadcrumbs'; import Tag from 'components/Tag'; -import {RouteTag} from './Layout/useRouteMeta'; import {H1} from './MDX/Heading'; +import type {RouteTag, RouteItem} from './Layout/getRouteMeta'; interface PageHeadingProps { title: string; status?: string; description?: string; tags?: RouteTag[]; + breadcrumbs: RouteItem[]; } function PageHeading({ @@ -19,11 +20,12 @@ function PageHeading({ status, description, tags = [], + breadcrumbs, }: PageHeadingProps) { return (
    - {tags ? : null} + {breadcrumbs ? : null}

    {title} {status ? —{status} : ''} diff --git a/beta/src/components/Tag.tsx b/beta/src/components/Tag.tsx index e86226f88..7033e030a 100644 --- a/beta/src/components/Tag.tsx +++ b/beta/src/components/Tag.tsx @@ -3,7 +3,7 @@ */ import cn from 'classnames'; -import {RouteTag} from './Layout/useRouteMeta'; +import type {RouteTag} from './Layout/getRouteMeta'; const variantMap = { foundation: { diff --git a/beta/src/hooks/useActiveSection.ts b/beta/src/hooks/useActiveSection.ts deleted file mode 100644 index bf7f4cf2f..000000000 --- a/beta/src/hooks/useActiveSection.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useRouter} from 'next/router'; - -export function useActiveSection(): 'learn' | 'reference' | 'home' { - const {asPath} = useRouter(); - if (asPath.startsWith('/reference')) { - return 'reference'; - } else if (asPath.startsWith('/learn')) { - return 'learn'; - } else { - return 'home'; - } -} diff --git a/beta/src/hooks/usePathWithoutQuerystring.ts b/beta/src/hooks/usePathWithoutQuerystring.ts deleted file mode 100644 index 156f4cddb..000000000 --- a/beta/src/hooks/usePathWithoutQuerystring.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useRouter} from 'next/router'; - -export function useActiveSection(): 'learn' | 'reference' | 'home' { - const {asPath} = useRouter(); - if (asPath.startsWith('/learn')) { - return 'learn'; - } else if (asPath.startsWith('/reference')) { - return 'reference'; - } else { - return 'home'; - } -} diff --git a/beta/src/pages/404.js b/beta/src/pages/404.js index 9b99f2a56..1dc2fc1e0 100644 --- a/beta/src/pages/404.js +++ b/beta/src/pages/404.js @@ -3,26 +3,24 @@ */ import {Page} from 'components/Layout/Page'; -import {MarkdownPage} from 'components/Layout/MarkdownPage'; import {MDXComponents} from 'components/MDX/MDXComponents'; +import sidebarLearn from '../sidebarLearn.json'; const {Intro, MaxWidth, p: P, a: A} = MDXComponents; export default function NotFound() { return ( - - - - -

    This page doesn’t exist.

    -

    - Quite possibly, it hasn’t been written yet. This beta is a{' '} - work in progress! -

    -

    Please check back later.

    -     -     -     + + + +

    This page doesn’t exist.

    +

    + Quite possibly, it hasn’t been written yet. This beta is a{' '} + work in progress! +

    +

    Please check back later.

    +     +     ); } diff --git a/beta/src/pages/500.js b/beta/src/pages/500.js index 731b1ad94..136cb3911 100644 --- a/beta/src/pages/500.js +++ b/beta/src/pages/500.js @@ -3,28 +3,29 @@ */ import {Page} from 'components/Layout/Page'; -import {MarkdownPage} from 'components/Layout/MarkdownPage'; import {MDXComponents} from 'components/MDX/MDXComponents'; +import sidebarLearn from '../sidebarLearn.json'; const {Intro, MaxWidth, p: P, a: A} = MDXComponents; export default function NotFound() { return ( - - - - -

    Something went very wrong.

    -

    Sorry about that.

    -

    - If you’d like, please{' '} - - report a bug. - -

    -     -     -     + + + +

    Something went very wrong.

    +

    Sorry about that.

    +

    + If you’d like, please{' '} + + report a bug. + +

    +     +     ); } diff --git a/beta/src/pages/[[...markdownPath]].js b/beta/src/pages/[[...markdownPath]].js index ccff50d83..015ae1460 100644 --- a/beta/src/pages/[[...markdownPath]].js +++ b/beta/src/pages/[[...markdownPath]].js @@ -3,9 +3,11 @@ */ import {Fragment, useMemo} from 'react'; +import {useRouter} from 'next/router'; import {MDXComponents} from 'components/MDX/MDXComponents'; -import {MarkdownPage} from 'components/Layout/MarkdownPage'; import {Page} from 'components/Layout/Page'; +import sidebarLearn from '../sidebarLearn.json'; +import sidebarReference from '../sidebarReference.json'; export default function Layout({content, toc, meta}) { const parsedContent = useMemo( @@ -13,15 +15,31 @@ export default function Layout({content, toc, meta}) { [content] ); const parsedToc = useMemo(() => JSON.parse(toc, reviveNodeOnClient), [toc]); + const section = useActiveSection(); + let routeTree = sidebarLearn; + switch (section) { + case 'reference': + routeTree = sidebarReference; + break; + } return ( - - - {parsedContent} - + + {parsedContent} ); } +function useActiveSection() { + const {asPath} = useRouter(); + if (asPath.startsWith('/reference')) { + return 'reference'; + } else if (asPath.startsWith('/learn')) { + return 'learn'; + } else { + return 'home'; + } +} + // Deserialize a client React tree from JSON. function reviveNodeOnClient(key, val) { if (Array.isArray(val) && val[0] == '$r') { From 7425ccff6fe2786f7398d64761e1b74e4e380f8b Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 24 Jan 2023 00:51:49 +0000 Subject: [PATCH 02/47] [Beta] Blog MVP (#5493) * Remove old blog entries * Blog MVP * TS --- beta/src/components/MDX/MDXComponents.tsx | 10 + .../blog/2013/06/02/jsfiddle-integration.md | 8 - beta/src/content/blog/2013/06/05/why-react.md | 88 --- .../blog/2013/06/12/community-roundup.md | 48 -- .../blog/2013/06/19/community-roundup-2.md | 73 -- .../content/blog/2013/06/21/react-v0-3-3.md | 20 - .../blog/2013/06/27/community-roundup-3.md | 90 --- .../07/02/react-v0-4-autobind-by-default.md | 51 -- .../blog/2013/07/03/community-roundup-4.md | 59 -- ...v0-4-prop-validation-and-default-values.md | 60 -- .../content/blog/2013/07/17/react-v0-4-0.md | 37 - .../blog/2013/07/23/community-roundup-5.md | 94 --- .../content/blog/2013/07/26/react-v0-4-1.md | 21 - .../30/use-react-and-jsx-in-ruby-on-rails.md | 47 -- .../blog/2013/08/05/community-roundup-6.md | 76 -- ...se-react-and-jsx-in-python-applications.md | 55 -- .../blog/2013/08/26/community-roundup-7.md | 73 -- .../blog/2013/09/24/community-roundup-8.md | 66 -- .../blog/2013/10/03/community-roundup-9.md | 95 --- .../content/blog/2013/10/16/react-v0.5.0.md | 50 -- .../content/blog/2013/10/29/react-v0-5-1.md | 23 - .../blog/2013/11/06/community-roundup-10.md | 122 --- .../blog/2013/11/18/community-roundup-11.md | 91 --- .../blog/2013/12/18/react-v0.5.2-v0.4.2.md | 21 - .../content/blog/2013/12/19/react-v0.8.0.md | 46 -- .../blog/2013/12/23/community-roundup-12.md | 98 --- .../blog/2013/12/30/community-roundup-13.md | 110 --- .../01/02/react-chrome-developer-tools.md | 18 - .../blog/2014/01/06/community-roundup-14.md | 85 --- .../blog/2014/02/05/community-roundup-15.md | 126 ---- .../blog/2014/02/15/community-roundup-16.md | 77 -- .../content/blog/2014/02/16/react-v0.9-rc1.md | 125 ---- .../src/content/blog/2014/02/20/react-v0.9.md | 137 ---- .../blog/2014/02/24/community-roundup-17.md | 90 --- .../blog/2014/03/14/community-roundup-18.md | 101 --- .../blog/2014/03/19/react-v0.10-rc1.md | 74 -- .../content/blog/2014/03/21/react-v0.10.md | 74 -- .../blog/2014/03/28/the-road-to-1.0.md | 56 -- beta/src/content/blog/2014/04/04/reactnet.md | 38 - beta/src/content/blog/2014/05/06/flux.md | 16 - .../05/29/one-year-of-open-source-react.md | 14 - .../blog/2014/06/27/community-roundup-19.md | 60 -- .../blog/2014/07/13/react-v0.11-rc1.md | 144 ---- .../content/blog/2014/07/17/react-v0.11.md | 163 ---- .../content/blog/2014/07/25/react-v0.11.1.md | 45 -- .../blog/2014/07/28/community-roundup-20.md | 110 --- .../07/30/flux-actions-and-the-dispatcher.md | 38 - .../blog/2014/08/03/community-roundup-21.md | 107 --- .../03/introducing-the-jsx-specification.md | 14 - .../blog/2014/09/12/community-round-up-22.md | 104 --- .../content/blog/2014/09/16/react-v0.11.2.md | 46 -- .../2014/09/24/testing-flux-applications.md | 312 -------- .../2014/10/14/introducing-react-elements.md | 217 ------ .../blog/2014/10/16/react-v0.12-rc1.md | 137 ---- .../blog/2014/10/17/community-roundup-23.md | 137 ---- .../content/blog/2014/10/27/react-js-conf.md | 14 - .../content/blog/2014/10/28/react-v0.12.md | 126 ---- .../blog/2014/11/24/react-js-conf-updates.md | 39 - .../blog/2014/11/25/community-roundup-24.md | 96 --- .../content/blog/2014/12/18/react-v0.12.2.md | 36 - .../19/react-js-conf-diversity-scholarship.md | 37 - .../blog/2015/01/27/react-v0.13.0-beta-1.md | 155 ---- .../2015/02/18/react-conf-roundup-2015.md | 274 ------- .../02/20/introducing-relay-and-graphql.md | 62 -- .../blog/2015/02/24/react-v0.13-rc1.md | 75 -- .../2015/02/24/streamlining-react-elements.md | 234 ------ .../blog/2015/03/03/react-v0.13-rc2.md | 60 -- .../blog/2015/03/04/community-roundup-25.md | 62 -- .../content/blog/2015/03/10/react-v0.13.md | 88 --- .../content/blog/2015/03/16/react-v0.13.1.md | 46 -- ...lding-the-facebook-news-feed-with-relay.md | 222 ------ .../2015/03/26/introducing-react-native.md | 16 - .../blog/2015/03/30/community-roundup-26.md | 72 -- .../blog/2015/04/17/react-native-v0.4.md | 24 - .../content/blog/2015/04/18/react-v0.13.2.md | 50 -- .../blog/2015/05/01/graphql-introduction.md | 101 --- .../content/blog/2015/05/08/react-v0.13.3.md | 42 -- .../05/22/react-native-release-process.md | 22 - ...deprecating-jstransform-and-react-tools.md | 30 - .../blog/2015/07/03/react-v0.14-beta-1.md | 75 -- .../2015/08/03/new-react-devtools-beta.md | 92 --- .../2015/08/11/relay-technical-preview.md | 35 - .../blog/2015/08/13/reacteurope-roundup.md | 61 -- .../2015/09/02/new-react-developer-tools.md | 26 - .../blog/2015/09/10/react-v0.14-rc1.md | 178 ----- .../blog/2015/09/14/community-roundup-27.md | 75 -- .../10/01/react-render-and-top-level-api.md | 131 ---- .../content/blog/2015/10/07/react-v0.14.md | 203 ----- .../10/19/reactiflux-is-moving-to-discord.md | 86 --- .../content/blog/2015/10/28/react-v0.14.1.md | 44 -- .../content/blog/2015/11/02/react-v0.14.2.md | 32 - .../content/blog/2015/11/18/react-v0.14.3.md | 44 -- ...eact-js-conf-2016-diversity-scholarship.md | 44 -- .../blog/2015/12/16/ismounted-antipattern.md | 79 -- ...react-components-elements-and-instances.md | 386 ---------- .../content/blog/2015/12/29/react-v0.14.4.md | 40 - .../A-implies-B-does-not-imply-B-implies-A.md | 57 -- .../2016/01/12/discontinuing-ie8-support.md | 10 - .../blog/2016/02/19/new-versioning-scheme.md | 60 -- .../content/blog/2016/03/07/react-v15-rc1.md | 91 --- .../content/blog/2016/03/16/react-v15-rc2.md | 32 - .../content/blog/2016/03/29/react-v0.14.8.md | 33 - beta/src/content/blog/2016/04/07/react-v15.md | 259 ------- .../content/blog/2016/04/08/react-v15.0.1.md | 36 - .../introducing-reacts-error-code-system.md | 18 - .../2016/07/13/mixins-considered-harmful.md | 594 --------------- .../22/create-apps-with-no-configuration.md | 164 ---- .../2016/08/05/relay-state-of-the-state.md | 81 -- .../blog/2016/09/28/our-first-50000-stars.md | 225 ------ .../content/blog/2016/11/16/react-v15.4.0.md | 174 ----- .../content/blog/2017/04/07/react-v15.5.0.md | 226 ------ .../05/18/whats-new-in-create-react-app.md | 104 --- .../content/blog/2017/06/13/react-v15.6.0.md | 95 --- .../2017/07/26/error-handling-in-react-16.md | 116 --- .../2017/09/08/dom-attributes-in-react-16.md | 187 ----- .../content/blog/2017/09/25/react-v15.6.2.md | 65 -- .../content/blog/2017/09/26/react-v16.0.md | 213 ------ .../11/28/react-v16.2.0-fragment-support.md | 333 --------- .../07/introducing-the-react-rfc-process.md | 40 - ...improving-the-repository-infrastructure.md | 389 ---------- .../2018/03/01/sneak-peek-beyond-react-16.md | 24 - .../2018/03/27/update-on-async-rendering.md | 700 ------------------ .../content/blog/2018/03/29/react-v-16-3.md | 148 ---- .../content/blog/2018/05/23/react-v-16-4.md | 149 ---- .../you-probably-dont-need-derived-state.md | 362 --------- .../content/blog/2018/08/01/react-v-16-4-2.md | 148 ---- .../09/10/introducing-the-react-profiler.md | 200 ----- .../blog/2018/10/01/create-react-app-v2.md | 94 --- .../content/blog/2018/10/23/react-v-16-6.md | 157 ---- .../blog/2018/11/13/react-conf-recap.md | 26 - .../blog/2018/11/27/react-16-roadmap.md | 202 ----- .../content/blog/2018/12/19/react-v-16-7.md | 75 -- .../content/blog/2019/02/06/react-v16.8.0.md | 207 ------ .../2019/02/23/is-react-translated-yet.md | 76 -- .../content/blog/2019/08/08/react-v16.9.0.md | 250 ------- .../blog/2019/08/15/new-react-devtools.md | 81 -- .../blog/2019/10/22/react-release-channels.md | 103 --- ...ences-with-concurrent-mode-and-suspense.md | 231 ------ .../content/blog/2020/02/26/react-v16.13.0.md | 215 ------ .../content/blog/2020/08/10/react-v17-rc.md | 364 --------- ...a-fetching-with-react-server-components.md | 33 + .../blog/2021/06/08/the-plan-for-react-18.md | 68 ++ .../blog/2021/12/17/react-conf-2021-recap.md | 157 ++++ .../blog/2022/03/08/react-18-upgrade-guide.md | 328 ++++++++ beta/src/content/blog/2022/03/29/react-v18.md | 338 +++++++++ ...-what-we-have-been-working-on-june-2022.md | 79 ++ beta/src/content/blog/index.md | 87 +++ beta/src/pages/[[...markdownPath]].js | 2 + beta/src/sidebarLearn.json | 32 +- 149 files changed, 1133 insertions(+), 15316 deletions(-) delete mode 100644 beta/src/content/blog/2013/06/02/jsfiddle-integration.md delete mode 100644 beta/src/content/blog/2013/06/05/why-react.md delete mode 100644 beta/src/content/blog/2013/06/12/community-roundup.md delete mode 100644 beta/src/content/blog/2013/06/19/community-roundup-2.md delete mode 100644 beta/src/content/blog/2013/06/21/react-v0-3-3.md delete mode 100644 beta/src/content/blog/2013/06/27/community-roundup-3.md delete mode 100644 beta/src/content/blog/2013/07/02/react-v0-4-autobind-by-default.md delete mode 100644 beta/src/content/blog/2013/07/03/community-roundup-4.md delete mode 100644 beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md delete mode 100644 beta/src/content/blog/2013/07/17/react-v0-4-0.md delete mode 100644 beta/src/content/blog/2013/07/23/community-roundup-5.md delete mode 100644 beta/src/content/blog/2013/07/26/react-v0-4-1.md delete mode 100644 beta/src/content/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md delete mode 100644 beta/src/content/blog/2013/08/05/community-roundup-6.md delete mode 100644 beta/src/content/blog/2013/08/19/use-react-and-jsx-in-python-applications.md delete mode 100644 beta/src/content/blog/2013/08/26/community-roundup-7.md delete mode 100644 beta/src/content/blog/2013/09/24/community-roundup-8.md delete mode 100644 beta/src/content/blog/2013/10/03/community-roundup-9.md delete mode 100644 beta/src/content/blog/2013/10/16/react-v0.5.0.md delete mode 100644 beta/src/content/blog/2013/10/29/react-v0-5-1.md delete mode 100644 beta/src/content/blog/2013/11/06/community-roundup-10.md delete mode 100644 beta/src/content/blog/2013/11/18/community-roundup-11.md delete mode 100644 beta/src/content/blog/2013/12/18/react-v0.5.2-v0.4.2.md delete mode 100644 beta/src/content/blog/2013/12/19/react-v0.8.0.md delete mode 100644 beta/src/content/blog/2013/12/23/community-roundup-12.md delete mode 100644 beta/src/content/blog/2013/12/30/community-roundup-13.md delete mode 100644 beta/src/content/blog/2014/01/02/react-chrome-developer-tools.md delete mode 100644 beta/src/content/blog/2014/01/06/community-roundup-14.md delete mode 100644 beta/src/content/blog/2014/02/05/community-roundup-15.md delete mode 100644 beta/src/content/blog/2014/02/15/community-roundup-16.md delete mode 100644 beta/src/content/blog/2014/02/16/react-v0.9-rc1.md delete mode 100644 beta/src/content/blog/2014/02/20/react-v0.9.md delete mode 100644 beta/src/content/blog/2014/02/24/community-roundup-17.md delete mode 100644 beta/src/content/blog/2014/03/14/community-roundup-18.md delete mode 100644 beta/src/content/blog/2014/03/19/react-v0.10-rc1.md delete mode 100644 beta/src/content/blog/2014/03/21/react-v0.10.md delete mode 100644 beta/src/content/blog/2014/03/28/the-road-to-1.0.md delete mode 100644 beta/src/content/blog/2014/04/04/reactnet.md delete mode 100644 beta/src/content/blog/2014/05/06/flux.md delete mode 100644 beta/src/content/blog/2014/05/29/one-year-of-open-source-react.md delete mode 100644 beta/src/content/blog/2014/06/27/community-roundup-19.md delete mode 100644 beta/src/content/blog/2014/07/13/react-v0.11-rc1.md delete mode 100644 beta/src/content/blog/2014/07/17/react-v0.11.md delete mode 100644 beta/src/content/blog/2014/07/25/react-v0.11.1.md delete mode 100644 beta/src/content/blog/2014/07/28/community-roundup-20.md delete mode 100644 beta/src/content/blog/2014/07/30/flux-actions-and-the-dispatcher.md delete mode 100644 beta/src/content/blog/2014/08/03/community-roundup-21.md delete mode 100644 beta/src/content/blog/2014/09/03/introducing-the-jsx-specification.md delete mode 100644 beta/src/content/blog/2014/09/12/community-round-up-22.md delete mode 100644 beta/src/content/blog/2014/09/16/react-v0.11.2.md delete mode 100644 beta/src/content/blog/2014/09/24/testing-flux-applications.md delete mode 100644 beta/src/content/blog/2014/10/14/introducing-react-elements.md delete mode 100644 beta/src/content/blog/2014/10/16/react-v0.12-rc1.md delete mode 100644 beta/src/content/blog/2014/10/17/community-roundup-23.md delete mode 100644 beta/src/content/blog/2014/10/27/react-js-conf.md delete mode 100644 beta/src/content/blog/2014/10/28/react-v0.12.md delete mode 100644 beta/src/content/blog/2014/11/24/react-js-conf-updates.md delete mode 100644 beta/src/content/blog/2014/11/25/community-roundup-24.md delete mode 100644 beta/src/content/blog/2014/12/18/react-v0.12.2.md delete mode 100644 beta/src/content/blog/2014/12/19/react-js-conf-diversity-scholarship.md delete mode 100644 beta/src/content/blog/2015/01/27/react-v0.13.0-beta-1.md delete mode 100644 beta/src/content/blog/2015/02/18/react-conf-roundup-2015.md delete mode 100644 beta/src/content/blog/2015/02/20/introducing-relay-and-graphql.md delete mode 100644 beta/src/content/blog/2015/02/24/react-v0.13-rc1.md delete mode 100644 beta/src/content/blog/2015/02/24/streamlining-react-elements.md delete mode 100644 beta/src/content/blog/2015/03/03/react-v0.13-rc2.md delete mode 100644 beta/src/content/blog/2015/03/04/community-roundup-25.md delete mode 100644 beta/src/content/blog/2015/03/10/react-v0.13.md delete mode 100644 beta/src/content/blog/2015/03/16/react-v0.13.1.md delete mode 100644 beta/src/content/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md delete mode 100644 beta/src/content/blog/2015/03/26/introducing-react-native.md delete mode 100644 beta/src/content/blog/2015/03/30/community-roundup-26.md delete mode 100644 beta/src/content/blog/2015/04/17/react-native-v0.4.md delete mode 100644 beta/src/content/blog/2015/04/18/react-v0.13.2.md delete mode 100644 beta/src/content/blog/2015/05/01/graphql-introduction.md delete mode 100644 beta/src/content/blog/2015/05/08/react-v0.13.3.md delete mode 100644 beta/src/content/blog/2015/05/22/react-native-release-process.md delete mode 100644 beta/src/content/blog/2015/06/12/deprecating-jstransform-and-react-tools.md delete mode 100644 beta/src/content/blog/2015/07/03/react-v0.14-beta-1.md delete mode 100644 beta/src/content/blog/2015/08/03/new-react-devtools-beta.md delete mode 100644 beta/src/content/blog/2015/08/11/relay-technical-preview.md delete mode 100644 beta/src/content/blog/2015/08/13/reacteurope-roundup.md delete mode 100644 beta/src/content/blog/2015/09/02/new-react-developer-tools.md delete mode 100644 beta/src/content/blog/2015/09/10/react-v0.14-rc1.md delete mode 100644 beta/src/content/blog/2015/09/14/community-roundup-27.md delete mode 100644 beta/src/content/blog/2015/10/01/react-render-and-top-level-api.md delete mode 100644 beta/src/content/blog/2015/10/07/react-v0.14.md delete mode 100644 beta/src/content/blog/2015/10/19/reactiflux-is-moving-to-discord.md delete mode 100644 beta/src/content/blog/2015/10/28/react-v0.14.1.md delete mode 100644 beta/src/content/blog/2015/11/02/react-v0.14.2.md delete mode 100644 beta/src/content/blog/2015/11/18/react-v0.14.3.md delete mode 100644 beta/src/content/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md delete mode 100644 beta/src/content/blog/2015/12/16/ismounted-antipattern.md delete mode 100644 beta/src/content/blog/2015/12/18/react-components-elements-and-instances.md delete mode 100644 beta/src/content/blog/2015/12/29/react-v0.14.4.md delete mode 100644 beta/src/content/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md delete mode 100644 beta/src/content/blog/2016/01/12/discontinuing-ie8-support.md delete mode 100644 beta/src/content/blog/2016/02/19/new-versioning-scheme.md delete mode 100644 beta/src/content/blog/2016/03/07/react-v15-rc1.md delete mode 100644 beta/src/content/blog/2016/03/16/react-v15-rc2.md delete mode 100644 beta/src/content/blog/2016/03/29/react-v0.14.8.md delete mode 100644 beta/src/content/blog/2016/04/07/react-v15.md delete mode 100644 beta/src/content/blog/2016/04/08/react-v15.0.1.md delete mode 100644 beta/src/content/blog/2016/07/11/introducing-reacts-error-code-system.md delete mode 100644 beta/src/content/blog/2016/07/13/mixins-considered-harmful.md delete mode 100644 beta/src/content/blog/2016/07/22/create-apps-with-no-configuration.md delete mode 100644 beta/src/content/blog/2016/08/05/relay-state-of-the-state.md delete mode 100644 beta/src/content/blog/2016/09/28/our-first-50000-stars.md delete mode 100644 beta/src/content/blog/2016/11/16/react-v15.4.0.md delete mode 100644 beta/src/content/blog/2017/04/07/react-v15.5.0.md delete mode 100644 beta/src/content/blog/2017/05/18/whats-new-in-create-react-app.md delete mode 100644 beta/src/content/blog/2017/06/13/react-v15.6.0.md delete mode 100644 beta/src/content/blog/2017/07/26/error-handling-in-react-16.md delete mode 100644 beta/src/content/blog/2017/09/08/dom-attributes-in-react-16.md delete mode 100644 beta/src/content/blog/2017/09/25/react-v15.6.2.md delete mode 100644 beta/src/content/blog/2017/09/26/react-v16.0.md delete mode 100644 beta/src/content/blog/2017/11/28/react-v16.2.0-fragment-support.md delete mode 100644 beta/src/content/blog/2017/12/07/introducing-the-react-rfc-process.md delete mode 100644 beta/src/content/blog/2017/12/15/improving-the-repository-infrastructure.md delete mode 100644 beta/src/content/blog/2018/03/01/sneak-peek-beyond-react-16.md delete mode 100644 beta/src/content/blog/2018/03/27/update-on-async-rendering.md delete mode 100644 beta/src/content/blog/2018/03/29/react-v-16-3.md delete mode 100644 beta/src/content/blog/2018/05/23/react-v-16-4.md delete mode 100644 beta/src/content/blog/2018/06/07/you-probably-dont-need-derived-state.md delete mode 100644 beta/src/content/blog/2018/08/01/react-v-16-4-2.md delete mode 100644 beta/src/content/blog/2018/09/10/introducing-the-react-profiler.md delete mode 100644 beta/src/content/blog/2018/10/01/create-react-app-v2.md delete mode 100644 beta/src/content/blog/2018/10/23/react-v-16-6.md delete mode 100644 beta/src/content/blog/2018/11/13/react-conf-recap.md delete mode 100644 beta/src/content/blog/2018/11/27/react-16-roadmap.md delete mode 100644 beta/src/content/blog/2018/12/19/react-v-16-7.md delete mode 100644 beta/src/content/blog/2019/02/06/react-v16.8.0.md delete mode 100644 beta/src/content/blog/2019/02/23/is-react-translated-yet.md delete mode 100644 beta/src/content/blog/2019/08/08/react-v16.9.0.md delete mode 100644 beta/src/content/blog/2019/08/15/new-react-devtools.md delete mode 100644 beta/src/content/blog/2019/10/22/react-release-channels.md delete mode 100644 beta/src/content/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md delete mode 100644 beta/src/content/blog/2020/02/26/react-v16.13.0.md delete mode 100644 beta/src/content/blog/2020/08/10/react-v17-rc.md create mode 100644 beta/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md create mode 100644 beta/src/content/blog/2021/06/08/the-plan-for-react-18.md create mode 100644 beta/src/content/blog/2021/12/17/react-conf-2021-recap.md create mode 100644 beta/src/content/blog/2022/03/08/react-18-upgrade-guide.md create mode 100644 beta/src/content/blog/2022/03/29/react-v18.md create mode 100644 beta/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md create mode 100644 beta/src/content/blog/index.md diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 195f89ed8..6f951d6c4 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -133,6 +133,15 @@ function LearnMore({ ); } +function ReadBlogPost({path}: {path: string}) { + return ( + + Read Post + + + ); +} + function Math({children}: {children: any}) { return (