Update documentation site links and branding

Author: BrianWalters

README.md

@@ -1,14 +1,13 @@
 <p align="center">
-  <a href="https://formidable.com/open-source/" target="_blank">
-    <img alt="React Live — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png" />
+  <a href="https://commerce.nearform.com/open-source/" target="_blank">
+    <img alt="React Live — Formidable, We build the modern web" src="https://oss.nearform.com/api/banner.svg?text=react+live" />
   </a>
 </p>
 <p align="center">
 <strong>A flexible playground for live editing React code</strong>
 <br><br>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/dm/react-live.svg"></a>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
-<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
 <img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
 <img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg">
 <a href="https://github.com/FormidableLabs/react-live#maintenance-status">
@@ -22,7 +21,7 @@ The library is structured modularly and lets you style and compose its component
 
 <p align="center"><img src="https://user-images.githubusercontent.com/17658189/63181897-1d67d380-c049-11e9-9dd2-7da2a3a57f05.gif" width=500></p>
 
-Come learn more at our [docs site](https://formidable.com/open-source/react-live)!
+Come learn more at our [docs site](https://commerce.nearform.com/open-source/react-live)!
 
 ## Support
 

docs/introduction.mdx

@@ -7,8 +7,6 @@ import { DemoLiveEditor } from "../website/src/components/live-edit";
 
 # Introduction
 
-[![React Live — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/react-live/master/react-live-Hero.png)](https://formidable.com/open-source/)
-
 **React Live** brings you the ability to render React components with editable source code and live preview. React Live is structured modularly and lets you style and compose its components freely. The following demos show typical use cases including the editor, preview, and error pane components.
 
 To see React Live in action, make changes to the following editor panes:
@@ -30,6 +28,17 @@ export const jsxExample = `
 
 <DemoLiveEditor code={jsxExample} />
 
+```jsx
+import { LiveProvider, LiveEditor, LivePreview } from "react-live";
+
+<LiveProvider code={code}>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+  </div>
+</LiveProvider>
+```
+
 ### Render-function Demo
 
 To render a series of components or render components beyond just JSX, React Live also provides a `render` function to pass JSX into when the `noInline` prop is present. This lets you render multiple or functional components with hooks. This example shows a functional component with a `useState` hook.
@@ -65,6 +74,17 @@ render(<Counter label="Counter" />)
 
 <DemoLiveEditor code={noInlineExample} noInline />
 
+```jsx
+import { LiveProvider, LiveEditor, LivePreview } from "react-live";
+
+<LiveProvider code={code} noInline>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+  </div>
+</LiveProvider>
+```
+
 ### Syntax Error Demo
 
 React Live can also display customizable errors when your code contains errors.
@@ -74,3 +94,15 @@ const badVariable = ;
 `.trim();
 
 <DemoLiveEditor code={syntaxError} />
+
+```jsx
+import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";
+
+<LiveProvider code={code}>
+  <div className="grid grid-cols-2 gap-4">
+    <LiveEditor className="font-mono" />
+    <LivePreview />
+    <LiveError className="text-red-800 bg-red-100 mt-2" />
+  </div>
+</LiveProvider>
+```

pnpm-lock.yaml

@@ -8,17 +8,11 @@ const { themes } = require("prism-react-renderer");
 const config = {
   title: "React Live",
   tagline: "A flexible playground for live editing React components",
-  url: "https://formidable.com",
-  baseUrl:
-    process.env.VERCEL_ENV === "preview" ? "/" : "/open-source/react-live",
+  url: "https://commerce.nearform.com",
+  baseUrl: "/open-source/react-live",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
-
-  // GitHub pages deployment config.
-  // If you aren't using GitHub pages, you don't need these.
-  organizationName: "Formidable",
-  projectName: "react-live", // Usually your repo name.
+  favicon: "img/nearform-icon.svg",
 
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
@@ -34,7 +28,7 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          routeBasePath: "/",
+          routeBasePath: "/docs",
           path: "../docs",
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl:
@@ -67,27 +61,28 @@ const config = {
       navbar: {
         title: "React Live",
         logo: {
-          alt: "Formidable logo",
-          src: "img/formidable-f.svg",
+          alt: "Nearform",
+          src: "/img/nearform-logo-white.svg",
         },
         items: [
+          { to: "docs", label: "Documentation", position: "left" },
           {
             href: "https://github.com/FormidableLabs/react-live",
             className: "header-github-link",
             "aria-label": "GitHub Repository",
             position: "right",
           },
-          {
-            href: "https://formidable.com",
-            className: "header-formidable-link",
-            "aria-label": "Formidable Website",
-            position: "right",
-          },
         ],
       },
       footer: {
-        style: "dark",
-        copyright: `Copyright © ${new Date().getFullYear()} Formidable`,
+        logo: {
+          alt: "Nearform logo",
+          src: "img/nearform-logo-white.svg",
+          href: "https://nearform.com",
+          width: 100,
+          height: 100,
+        },
+        copyright: `Copyright © 2013-${new Date().getFullYear()} Nearform`,
       },
       prism: {
         theme: themes.nightOwlLight,

react-live-Hero.png

@@ -34,6 +34,7 @@
     "@docusaurus/module-type-aliases": "2.4.0",
     "@docusaurus/types": "^2.4.0",
     "@tsconfig/docusaurus": "^1.0.5",
+    "formidable-oss-badges": "^1.3.2",
     "typescript": "^4.7.4"
   },
   "browserslist": {