feat: Add CDN support (#1817)

* chore: CSP

* chore: Optionally use CDN for serving images

app/components/Editor.js

@@ -8,9 +8,9 @@ import UiStore from "stores/UiStore";
 import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
-import isInternalUrl from "utils/isInternalUrl";
 import { isMetaKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
+import { isInternalUrl } from "utils/urls";
 
 const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
 

app/components/HoverPreview.js

@@ -8,7 +8,7 @@ import { fadeAndSlideIn } from "shared/styles/animations";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import HoverPreviewDocument from "components/HoverPreviewDocument";
-import isInternalUrl from "utils/isInternalUrl";
+import { isInternalUrl } from "utils/urls";
 
 const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;

app/components/Image.js

@@ -0,0 +1,12 @@
+// @flow
+import * as React from "react";
+import { cdnPath } from "utils/urls";
+
+type Props = {
+  alt: string,
+  src: string,
+};
+
+export default function Image({ src, alt, ...rest }: Props) {
+  return <img src={cdnPath(src)} alt={alt} {...rest} />;
+}

app/components/PageTitle.js

@@ -1,16 +1,17 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import AuthStore from "stores/AuthStore";
+import useStores from "hooks/useStores";
+import { cdnPath } from "utils/urls";
 
-type Props = {
+type Props = {|
   title: string,
   favicon?: string,
-  auth: AuthStore,
-};
+|};
 
-const PageTitle = observer(({ auth, title, favicon }: Props) => {
+const PageTitle = ({ title, favicon }: Props) => {
+  const { auth } = useStores();
   const { team } = auth;
 
   return (
@@ -21,12 +22,12 @@ const PageTitle = observer(({ auth, title, favicon }: Props) => {
       <link
         rel="shortcut icon"
         type="image/png"
-        href={favicon || "/favicon-32.png"}
+        href={favicon || cdnPath("/favicon-32.png")}
         sizes="32x32"
       />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </Helmet>
   );
-});
+};
 
-export default inject("auth")(PageTitle);
+export default observer(PageTitle);