raulfdm · raulfdm · Feb 23, 2020 · Feb 23, 2020 · Feb 23, 2020 · Feb 23, 2020
diff --git a/blog/2019/04/things-i-dont-know-2018/assets/chrome-pure-css.png b/blog/2019/04/things-i-dont-know-2018/assets/chrome-pure-css.png
diff --git a/blog/2019/04/things-i-dont-know-2018/assets/featured-image.jpg b/blog/2019/04/things-i-dont-know-2018/assets/featured-image.jpg
diff --git a/blog/2019/04/things-i-dont-know-2018/assets/nintendo-switch.png b/blog/2019/04/things-i-dont-know-2018/assets/nintendo-switch.png
diff --git a/blog/2019/04/things-i-dont-know-2018/index.md b/blog/2019/04/things-i-dont-know-2018/index.md
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -20,7 +20,7 @@ const myQuery = `{
           description
           image {
             childImageSharp {
-              fluid {
+              fluid(quality: 100, maxWidth: 1500, fit: CONTAIN) {
                 base64
                 tracedSVG
                 srcWebp
@@ -109,7 +109,11 @@ module.exports = {
           {
             resolve: `gatsby-remark-images`,
             options: {
-              maxWidth: 590,
+              maxWidth: 780,
+              // https://github.com/gatsbyjs/gatsby/issues/20000
+              // markdownCaptions: true,
+              showCaptions: true,
+              quality: 100,
             },
           },
           {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -74,7 +74,7 @@ exports.createPages = async ({ graphql, actions }) => {
               categories
               image {
                 childImageSharp {
-                  fluid {
+                  fluid(quality: 100, maxWidth: 1500, fit: CONTAIN) {
                     base64
                     tracedSVG
                     srcWebp

diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@typescript-eslint/parser": "^2.20.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "babel-plugin-remove-graphql-queries": "^2.7.23",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-preset-gatsby": "^0.2.29",
     "babel-preset-react-app": "^9.1.1",

diff --git a/src/html.tsx b/src/html.tsx
@@ -11,9 +11,35 @@ const GatsbyHTML: React.FC<PreRenderHTMLArgs & { body: string }> = (props) => {
           name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
+
         {props.headComponents}
       </head>
       <body {...props.bodyAttributes} className="dark">
+        <script
+          data-testid="twitter-script"
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function(){
+                window.twttr = (function(d, s, id) {
+                  var js, fjs = d.getElementsByTagName(s)[0],
+                    t = window.twttr || {};
+                  if (d.getElementById(id)) return t;
+                  js = d.createElement(s);
+                  js.id = id;
+                  js.src = "https://platform.twitter.com/widgets.js";
+                  fjs.parentNode.insertBefore(js, fjs);
+
+                  t._e = [];
+                  t.ready = function(f) {
+                    t._e.push(f);
+                  };
+
+                  return t;
+                }(document, "script", "twitter-wjs"));
+              })()
+        `,
+          }}
+        />
         {/* HERE'S THE SCRIPT TO HANDLE THEME :D */}
         <script
           dangerouslySetInnerHTML={{

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -84,7 +84,7 @@ export const query = graphql`
             description
             image {
               childImageSharp {
-                fluid {
+                fluid(quality: 100, maxWidth: 1500, fit: CONTAIN) {
                   base64
                   tracedSVG
                   srcWebp

diff --git a/src/styles/blogPost.ts b/src/styles/blogPost.ts
@@ -1,4 +1,6 @@
 import { css, createGlobalStyle } from 'styled-components';
+import media from 'styled-media-query';
+import { transparentize } from 'polished';
 
 const global = css`
   body {
@@ -12,6 +14,7 @@ const global = css`
     font-family: ${({ theme }) => theme.font.contentTitle};
     line-height: 4.8rem;
   }
+
   p {
     letter-spacing: -0.084px;
     margin-bottom: -8.28px;
@@ -34,6 +37,7 @@ const global = css`
       background-repeat: repeat-x;
     }
   }
+
   blockquote {
     margin-left: -2rem;
     padding-left: 2.3rem;
@@ -64,16 +68,55 @@ const global = css`
   h5,
   h6 {
     font-family: ${({ theme }) => theme.font.contentSans};
+    line-height: 1;
   }
 
   h2 {
     font-size: 3.4rem;
     font-weight: 600;
   }
 
+  h1 + p,
+  h2 + p,
+  h3 + p,
+  h4 + p,
+  h5 + p,
+  h6 + p {
+    margin-top: 1.2rem;
+    ${media.greaterThan('small')`
+      margin-top: 1.8rem;
+    `}
+  }
+
+  p + h1,
+  p + h2,
+  p + h3,
+  p + h4,
+  p + h5,
+  p + h6 {
+    margin-top: 2.2rem;
+    ${media.greaterThan('small')`
+      margin-top: 3rem;
+    `}
+  }
+
   a {
     text-decoration: ${({ theme }) => theme.color.font};
   }
+
+  .twitter-tweet {
+    margin: 4rem auto !important;
+  }
+
+  .gatsby-resp-image-figcaption {
+    font-family: ${({ theme }) => theme.font.contentSans};
+    text-align: center;
+    margin: 0;
+    margin-top: 1rem;
+    line-height: 1.4;
+    font-size: 1.6rem;
+    color: ${transparentize(0.4, '#000')};
+  }
 `;
 
 export const BlogGlobalStyle = createGlobalStyle`

diff --git a/src/templates/blog-post.tsx b/src/templates/blog-post.tsx
@@ -17,6 +17,7 @@ const StyledImg = styled(Img)`
 
 const ImgWrapper = styled(Container)`
   max-width: 1192px;
+  padding-bottom: 7rem;
 `;
 
 type PostProps = {
@@ -36,6 +37,13 @@ type PostProps = {
 };
 
 const Post: React.FC<PostProps> = ({ pageContext }) => {
+  React.useEffect(() => {
+    /* This loads all widgets from twitter if exists. 
+    It's loaded by html.tsx (data-testid="twitter-script")
+    */
+    // @ts-ignore
+    window.twttr.widgets.load();
+  }, []);
   const { postByLocale, intl } = pageContext;
 
   const post = postByLocale[intl.language];