better handling of rss

Author: dwwoelfel

src/MarkdownRenderer.js

@@ -124,8 +124,13 @@ function PlainImage(imageProps) {
       justify="center"
       style={{display: 'flex'}}>
       {/*eslint-disable-next-line jsx-a11y/alt-text*/}
-      <img style={{maxWidth: '100%'}} src={imageUrl({src})} {...props} />
-      {props.isRss ? <br /> : null}
+      <img
+        style={{maxWidth: '100%'}}
+        // Don't proxy image if it's served on an RSS feed to avoid CORs errors
+        src={isRss ? src : imageUrl({src})}
+        {...props}
+      />
+      {isRss ? <br /> : null}
       {props.title ? (
         <Text
           style={{display: 'block'}}
@@ -134,7 +139,7 @@ function PlainImage(imageProps) {
           weight={300}
           color="dark-1"
           textAlign="center">
-          {props.isRss ? <em>{props.title}</em> : props.title}
+          {isRss ? <em>{props.title}</em> : props.title}
         </Text>
       ) : null}
     </Box>
@@ -147,7 +152,7 @@ function isGif(src: string) {
 }
 
 function Image(props) {
-  if (props.src && isGif(props.src)) {
+  if (props.src && isGif(props.src) && !props.isRss) {
     return (
       <Box margin={{vertical: 'medium'}}>
         <GifPlayer style={{maxWidth: '100%'}} src={props.src} />

src/imageUrl.js

@@ -12,7 +12,7 @@ const imageUrl = ({
 }): ?string => {
   const basePath = useBasePath();
   if (src) {
-    return `${basePath}/api/image/${
+    return `${basePath || ''}/api/image/${
       firstFrame ? 'firstFrame/' : ''
     }${base64Encode(src)}`;
   }

src/lib/useBasePath.js

@@ -1,10 +1,14 @@
+// @flow
+
 import {useRouter} from 'next/router';
 
-export default function useBasePath() {
+export default function useBasePath(): string {
   try {
     const router = useRouter();
     if (router) {
-      return router.basePath;
+      return router.basePath || '';
+    } else {
+      return process.env.BASE_PATH || '';
     }
   } catch (_e) {
     return process.env.BASE_PATH || '';