Tweaks to blog posts

Author: CompuIves

packages/homepage/content/articles/codesandbox-ci-embeds/index.md

@@ -20,7 +20,7 @@ best use of their time. Today we're pleased to launch CodeSandbox CI: A free
 continuous integration service purpose-built for open source library
 maintainers.
 
-![](./images/CodeSandboxCI.gif)
+<iframe width="100%" height="500" src="https://www.youtube.com/embed/k_aR_4FeKlc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Here's how it works
 
@@ -69,7 +69,14 @@ on the UI and more on the content. We also wanted to give users more control and
 improve the embed experience on mobile.”_
 
 See the difference for yourself:
-[![Vanilla embed](./images/oldvsnew.png)](https://codesandbox.io/embed/vanilla)
+
+<iframe
+  src="https://codesandbox.io/embed/new?fontsize=14"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+  title="new"
+  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
 
 ## The next big design trend?
 

packages/homepage/gatsby-node.js

@@ -14,7 +14,7 @@ const getBlogNodeInfo = ({
     frontmatter: { authors, date, description, photo },
   },
 }) => ({
-  author: authors[0],
+  authors,
   date,
   description,
   photo,
@@ -89,7 +89,7 @@ const createNodeFieldsFromNodeInfo = ({
 const createBlogNodeFields = ({ createNodeField, nodeInfo }) => {
   createNodeFieldsFromNodeInfo({
     createNodeField,
-    nodeFieldNames: ['author', 'date', 'description', 'photo'],
+    nodeFieldNames: ['authors', 'date', 'description', 'photo'],
     nodeInfo,
   });
 };

packages/homepage/src/components/PostElements.js

@@ -28,14 +28,14 @@ export const AuthorImage = styled.img`
   width: 32px;
   height: 32px;
   border-radius: 4px;
+  margin-right: 1rem;
 `;
 
 export const Author = styled.h4`
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   font-size: 18px;
   margin: 0;
-  margin-left: 16px;
 
   color: #f2f2f2;
 `;

packages/homepage/src/pages/blog.js

@@ -26,15 +26,17 @@ import {
 // UNCOMMENT AT THE BOTTOM IF IT BREAKS
 // GATSBY DOES NOT LET YOU HAVE FIELDS THAT DON'T EXIST YET
 
-const Info = ({ author, date, mobile, photo, ...props }) => (
+const Info = ({ authors, date, mobile, photo, ...props }) => (
   <Aside mobile={mobile} {...props}>
     <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
 
-    <section>
-      <AuthorImage src={photo} alt={author} />
+    {authors.map(author => (
+      <section key={author.name}>
+        <AuthorImage src={photo} alt={author} />
 
-      <Author>{author}</Author>
-    </section>
+        <Author>{author}</Author>
+      </section>
+    ))}
   </Aside>
 );
 
@@ -62,15 +64,15 @@ const Blog = ({
       {blogPosts.map(
         ({
           node: {
-            fields: { author, date, description, photo, slug, title },
+            fields: { authors, date, description, photo, slug, title },
             frontmatter: {
               banner: { publicURL: banner },
             },
             id,
           },
         }) => (
           <Wrapper key={id}>
-            <Info author={author} date={date} photo={photo} />
+            <Info authors={authors} date={date} photo={photo} />
 
             <Posts>
               {banner && (
@@ -98,7 +100,7 @@ const Blog = ({
                 <Subtitle>{description}</Subtitle>
               </div>
 
-              <Info author={author} date={date} mobile photo={photo} />
+              <Info authors={authors} date={date} mobile photo={photo} />
             </Posts>
           </Wrapper>
         )
@@ -116,7 +118,7 @@ export const query = graphql`
       edges {
         node {
           fields {
-            author
+            authors
             date
             description
             photo

packages/homepage/src/templates/_post.elements.js

@@ -91,5 +91,5 @@ export const MetaData = styled.aside`
 export const AuthorContainer = styled.div`
   align-items: center;
   display: flex;
-  flex: 1;
+  margin-bottom: 0.5rem;
 `;

packages/homepage/src/templates/post.js

@@ -23,7 +23,7 @@ import {
 export default ({
   data: {
     blogPost: {
-      fields: { author, date, description, photo, title },
+      fields: { authors, date, description, photo, title },
       frontmatter: {
         banner: { publicURL: banner },
       },
@@ -43,11 +43,17 @@ export default ({
         <Title>{title}</Title>
 
         <MetaData>
-          <AuthorContainer>
-            <AuthorImage alt={author} src={photo} />
+          <div style={{ flex: 1 }}>
+            {authors.map(author => (
+              <AuthorContainer key={author}>
+                {authors.length === 1 && (
+                  <AuthorImage alt={author} src={photo} />
+                )}
 
-            <Author>{author}</Author>
-          </AuthorContainer>
+                <Author>{author}</Author>
+              </AuthorContainer>
+            ))}
+          </div>
 
           <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
         </MetaData>
@@ -64,7 +70,7 @@ export const pageQuery = graphql`
   query Post($id: String) {
     blogPost: markdownRemark(id: { eq: $id }) {
       fields {
-        author
+        authors
         date
         description
         photo