White labeling (custom logo) notes

docs/latest/essentials/themeing.md

@@ -57,3 +57,41 @@ open to pull requests and discussion issues.
   --viewport-border-thickness: 1px;
 }
 ```
+
+## White Labeling
+
+> A white-label product is a product or service produced by one company (the
+> producer) that other companies (the marketers) rebrand to make it appear as if
+> they had made it - [Wikipedia: White-Label Product][wikipedia]
+
+Current white-labeling options are limited. We expose the ability to replace the
+"Logo" section of the application with a custom "Logo" component. You can do
+this by adding a `whiteLabelling` key to your
+[configuration file](./configuration.md).
+
+```js
+function RadicalImagingLogo() {
+  return React.createElement(
+    'a',
+    {
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      className: 'header-brand',
+      href: 'http://radicalimaging.com',
+    },
+    React.createElement('h5', {}, 'RADICAL IMAGING')
+  )
+}
+
+props.whiteLabelling = {
+  logoComponent: RadicalImagingLogo(),
+}
+```
+
+<!--
+  Links
+  -->
+
+<!-- prettier-ignore-start -->
+[wikipedia]: https://en.wikipedia.org/wiki/White-label_product
+<!-- prettier-ignore-end -->

src/index.js

@@ -130,27 +130,3 @@ Plugins
       "displaySetCount": 1
     }
  */
-
-/*
-
-White labelling example
-
-// Note that you can't write JSX here, so you can use the online JSX compiler:
-// https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AholPWQOaUC8ARAPoBG6emADWXchm5g4cAA6owqMoikVgiimTERBAZx0A5egFtU3NPQAmigLR8yQi2OSqzUKDIBcAei_2LMCHp0GCN6VhgwVgA6CDgjLgA-ElIU1LS02hDWRB0yCA4AcmQ3Tx8_AKCQsIjo2KMvAHcZa1iwKHkoLxAZLEsdLwAmAAYARgB2LxGRrwgyWTkLFrmZBetwMGNURYGomUiCxC8k9JOU2i96BIBuIgBfIiA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=6.26.0&envVersion=
-*/
-/*function RadicalImagingLogo() {
-  return React.createElement(
-    'a',
-    {
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      className: 'header-brand',
-      href: 'http://radicalimaging.com'
-    },
-    React.createElement('h5', {}, 'RADICAL IMAGING')
-  );
-}
-
-props.whiteLabelling = {
-  logoComponent: RadicalImagingLogo()
-};*/