yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add CDN support (#1817)

Browse Source 
* chore: CSP

* chore: Optionally use CDN for serving images
This commit is contained in:
Tom Moor
2021-01-16 11:12:10 -08:00
committed by GitHub
parent 1fd2ec31fd
commit 522df125aa
16 changed files with 77 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Editor.js
View File

@@ -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"));

2
app/components/HoverPreview.js
View File

@@ -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;

12
app/components/Image.js Normal file
View File

@@ -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} />;
}

19
app/components/PageTitle.js
View File

@@ -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);

3
app/embeds/GoogleDocs.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import Image from "components/Image";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp("^https?://docs.google.com/document/(.*)$");
@@ -20,7 +21,7 @@ export default class GoogleDocs extends React.Component<Props> {
{...this.props}
src={this.props.attrs.href.replace("/edit", "/preview")}
icon={
<img
<Image
src="/images/google-docs.png"
alt="Google Docs Icon"
width={16}

3
app/embeds/GoogleDrive.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import Image from "components/Image";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp(
@@ -21,7 +22,7 @@ export default class GoogleDrive extends React.Component<Props> {
<Frame
src={this.props.attrs.href.replace("/view", "/preview")}
icon={
<img
<Image
src="/images/google-drive.png"
alt="Google Drive Icon"
width={16}

3
app/embeds/GoogleSheets.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import Image from "components/Image";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp("^https?://docs.google.com/spreadsheets/d/(.*)$");
@@ -20,7 +21,7 @@ export default class GoogleSlides extends React.Component<Props> {
{...this.props}
src={this.props.attrs.href.replace("/edit", "/preview")}
icon={
<img
<Image
src="/images/google-sheets.png"
alt="Google Sheets Icon"
width={16}

3
app/embeds/GoogleSlides.js
View File

@@ -1,5 +1,6 @@
// @flow
import * as React from "react";
import Image from "components/Image";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp("^https?://docs.google.com/presentation/d/(.*)$");
@@ -22,7 +23,7 @@ export default class GoogleSlides extends React.Component<Props> {
.replace("/edit", "/preview")
.replace("/pub", "/embed")}
icon={
<img
<Image
src="/images/google-slides.png"
alt="Google Slides Icon"
width={16}

3
app/embeds/index.js
View File

@@ -1,6 +1,7 @@
// @flow
import * as React from "react";
import styled from "styled-components";
import Image from "components/Image";
import Abstract from "./Abstract";
import Airtable from "./Airtable";
import ClickUp from "./ClickUp";
@@ -38,7 +39,7 @@ function matcher(Component) {
};
}
const Img = styled.img`
const Img = styled(Image)`
margin: 4px;
width: 18px;
height: 18px;

2
app/scenes/Document/components/DataLoader.js
View File

@@ -24,8 +24,8 @@ import Loading from "./Loading";
import SocketPresence from "./SocketPresence";
import { type LocationWithState, type Theme } from "types";
import { NotFoundError, OfflineError } from "utils/errors";
import isInternalUrl from "utils/isInternalUrl";
import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
import { isInternalUrl } from "utils/urls";
type Props = {|
match: Match,

11
app/utils/isInternalUrl.js → app/utils/urls.js
View File

@@ -1,7 +1,8 @@
// @flow
import { parseDomain } from "../../shared/utils/domains";
import env from "env";
export default function isInternalUrl(href: string) {
export function isInternalUrl(href: string) {
if (href[0] === "/") return true;
const outline = parseDomain(window.location.href);
@@ -19,3 +20,11 @@ export default function isInternalUrl(href: string) {
return false;
}
export function cdnPath(path: string): string {
return `${env.CDN_URL}${path}`;
}
export function imagePath(path: string): string {
return cdnPath(`/images/${path}`);
}