🐛 fix article preview

Author: leonardodino

netlify.toml

@@ -0,0 +1,13 @@
+[build]
+  command = "npm run build"
+  publish = "public"
+
+[[headers]]
+  for = "/*.css"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"
+
+[[headers]]
+  for = "/assets/fonts/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "*"

package.json

@@ -8,6 +8,7 @@
     "clean": "rm -rf public .cache",
     "dev": "gatsby develop --port \"${PORT:-5000}\" --open -H 0.0.0.0",
     "build": "gatsby build",
+    "postbuild": "cp src/*.css public",
     "lint": "eslint './*.js' 'src' 'plugins' 'gatsby'",
     "precommit": "lint-staged"
   },

src/components/Layout/index.js

@@ -21,7 +21,7 @@ const Inner = styled.div`
 	width: 100%;
 `
 
-const Layout = ({children}) => (
+const Layout = ({children, isPreview}) => (
 	<MenuProvider>
 		<Helmet>
 			<link rel="icon" sizes="16x16" href="/assets/images/favicon-16.png" />
@@ -31,7 +31,7 @@ const Layout = ({children}) => (
 		</Helmet>
 		<Wrapper>
 			<Inner>{typeof children === 'function' ? children() : children}</Inner>
-			<Footer style={{flex: 'none'}} />
+			{!isPreview && <Footer style={{flex: 'none'}} />}
 		</Wrapper>
 	</MenuProvider>
 )

src/components/Layout/withLayout.js

@@ -3,7 +3,7 @@ import Layout from '.'
 
 /* eslint-disable react/display-name */
 const withLayout = Component => props => (
-	<Layout>
+	<Layout isPreview={props.isPreview}>
 		<Component {...props} />
 	</Layout>
 )

src/components/MetaTags/index.js

@@ -23,7 +23,6 @@ const MetaTags = ({
 	const latlng = '-15.760837, -47.8702936'
 	const locale = 'pt_BR'
 	const truncatedDescription = truncate(description, 120)
-	const imageURL = joinURL(image, homepage)
 	return (
 		<Helmet>
 			<title>{composedTitle}</title>
@@ -36,7 +35,7 @@ const MetaTags = ({
 			<meta property="og:url" content={joinURL(pathname, homepage)} />
 			<meta property="og:type" content="website" />
 			<meta property="og:title" content={composedTitle} />
-			<meta property="og:image" content={imageURL} />
+			{image && <meta property="og:image" content={image} />}
 			<meta property="og:description" content={truncatedDescription} />
 			<meta property="og:site_name" content={siteTitle} />
 			<meta property="og:locale" content={locale} />
@@ -47,7 +46,7 @@ const MetaTags = ({
 			<meta name="twitter:url" content={joinURL(pathname, homepage)} />
 			<meta name="twitter:title" content={composedTitle} />
 			<meta name="twitter:description" content={truncatedDescription} />
-			<meta name="twitter:image" content={imageURL} />
+			{image && <meta name="twitter:image" content={image} />}
 		</Helmet>
 	)
 }

src/components/StylableLink/index.js

@@ -4,7 +4,7 @@ import {Link} from 'gatsby'
 const StylableLink = ({to, children, className, style}) => {
 	const href = (to || {}).pathname || (typeof to === 'string' ? to : '/')
 	const props = {className, style, children}
-	return /^[./]/.test(href) ? (
+	return /^[./#]/.test(href) ? (
 		<Link {...props} to={to} />
 	) : (
 		<a {...props} href={href} target="_blank" rel="noopener noreferrer" />

src/templates/article/index.js

@@ -43,6 +43,7 @@ const BlogPost = ({
 	authors,
 	prev,
 	next,
+	isPreview,
 }) => {
 	return (
 		<Fragment>
@@ -51,7 +52,7 @@ const BlogPost = ({
 				description={headline ? headline : excerpt}
 				image={getCoverImageSrc(cover)}
 			/>
-			<Navbar style={{position: 'fixed', top: 0, zIndex: 2}} />
+			{!isPreview && <Navbar style={{position: 'fixed', top: 0, zIndex: 2}} />}
 			<ArticleHero
 				headline={headline}
 				title={title}

src/templates/article/preview.js

@@ -2,22 +2,18 @@ import PropTypes from 'prop-types'
 import {mapProps} from 'recompose'
 import BlogPost from '.'
 
-const expand = (data, prop = 'title') =>
-	((data || {}).slug || null) && {
-		url: data.slug,
-		[prop]: data.title,
-	}
+const expand = (prop = 'title') => slug => ({url: `#${slug}`, [prop]: slug})
 
 const enhance = mapProps(({entry, widgetFor}) => {
 	// eslint-disable-next-line no-unused-vars
-	const {body, cover, ...data} = entry.getIn(['data']).toJS()
+	const {body, ...data} = entry.getIn(['data']).toJS()
 	return {
 		...data,
+		isPreview: true,
 		content: widgetFor('body'),
 		siteTitle: 'CMS',
-		cover: (cover || null) && {image: {sizes: {src: cover}}},
-		author: expand(data.author, 'name'),
-		editorial: expand(data.editorial),
+		authors: (data.authors || []).map(expand('name')),
+		editorial: expand('title')(data.editorial),
 	}
 })