feat(content): added published and unlisted property in blogpost

feat(translation): added banner to indicate when translation is available
fix(SEO): add site description on HTML title page
fix(translation): hide flag is language = default language
                  (multilangPosts is no longer used. In config use `defaultLang` props)
fix(translation): related post have wrong flag when language !== en
docs(translation): added new example of translation (in MDX post)

README.md

@@ -16,17 +16,17 @@
 - :mag: SEO optimized
 - :love_letter: Write posts/pages in Markdown or [MDX](https://mdxjs.com/)
   - :art: Code syntax highlight
-  - :books: Multilang support (blog post)
+  - :books: Multilang support/i18n (blog post)
 - :iphone: Mobile Friendly (Responsive design)
 - :sparkles: PWA ready
   - :airplane: Offline support
   - :page_with_curl: Manifest support 
 - [:wrench: Fully configurable (see data/siteConfig.js)](./data/siteConfig.js)
 - :speech_balloon: Disqus support
-- :nail_care: css-in-js (with [styled-components v4](https://www.styled-components.com))
+- :nail_care: css-in-js (with [styled-components v5](https://www.styled-components.com))
 - :bookmark: Groups post with tags
 - :bar_chart: Google Analytics support
-- :bird: post preview image generation (Twitter, Facebook)
+- :bird: post preview image generation (Twitter, Facebook...)
 - :gem: Developer tools:
   - eslint
   - prettier
@@ -87,7 +87,7 @@ You can also use `gatsby-starter-morning-dew` as a [Gatsby theme](https://www.ga
   ],
   ```
 3. Add an image called `baymax.png` in `content/images/baymax.png`.  
-🐞This is due to a bug.  
+🐞This is due to a theme limitations.  
 😬 Don't worry, this picture will not appear on your website!
 
 Need more details? Checkout:
@@ -125,7 +125,7 @@ module.exports = {
   authorName: 'Maxence Poutord',
   twitterUsername: '_maxpou',
   authorAvatar: 'avatar.jpeg', // file in content/images
-  multilangPosts: true, // enable/disable flags in post lists
+  defaultLang: 'en', // show flag if lang is not default. Leave empty to enable flags in post lists
   authorDescription: `
   For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development.
   On his day to day job, he is working as a senior front-end engineer at VSware. He is also a frequent tech speaker and a mentor.

content/pages/how-to-install/how-to-install.md

@@ -76,7 +76,7 @@ module.exports = {
   authorName: 'Maxence Poutord',
   twitterUsername: '_maxpou',
   authorAvatar: 'avatar.jpeg', // file in content/images
-  multilangPosts: true, // enable/disable flags in post lists
+  defaultLang: 'en', // show flag if lang is not default. Leave empty to enable flags in post lists
   authorDescription: `
   For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development.
   On his day to day job, he is working as a senior front-end engineer at VSware. He is also a frequent tech speaker and a mentor.

content/posts/00-frontmatter-placeholder/index.md

@@ -0,0 +1,20 @@
+---
+title: this post is a ghost
+slug: invisible-post
+date: 2020-01-01
+
+# optional fields
+published: false
+unlisted: true
+generate-card: false
+language: fr
+cover: ./cover.jpeg
+imageShare: ./cover.jpeg
+tags: ['fake']
+translations:
+  - link: 'https://www.maxpou.fr/about'
+    language: 'french'
+---
+
+This exists to populate GraphQL fields and avoid null errors. It should contain
+all of the available frontmatter.

content/posts/2019-07-10-using-mdx/index-fr.mdx

@@ -0,0 +1,52 @@
+---
+title: Utiliser MDX
+slug: using-mdx-fr
+date: 2019-07-10
+language: fr
+unlisted: true
+generate-card: false
+tags: ['gatsby', 'translation']
+translations:
+  - link: '/using-mdx'
+    language: 'English'
+---
+
+## Salut les gens!
+
+Grace a à MDX, il est maintenant possible d'ajouter du JSX dans du Markdown! Juste en dessous, un example de JSX intégré dans du Markdown <br />
+
+> MDX est un format autorisable qui vous permet d'écrire en toute transparence JSX dans vos documents Markdown. Vous pouvez importer des composants, tels que des graphiques interactifs ou des alertes, et les intégrer dans votre contenu. Cela rend l'écriture de contenu longue forme avec des composants un souffle 🚀.
+
+
+**Example:**
+
+<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
+  <h3>Voila du JSX dans du Markdown</h3>
+  {console.log('Salut MDX')}
+</div>
+
+Code:
+
+```jsx
+<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
+  <h3>Voila du JSX dans du Markdown</h3>
+  {console.log('Salut MDX')}
+</div>
+```
+
+
+## How-to?
+
+```jsx{5}
+import MySuperComponent from '../path/to/MySuperComponent'
+
+# Du text en Markdown
+
+<MySuperComponent />
+
+Un autre texte en markdown
+```
+
+## Read more
+
+👉 https://mdxjs.com

content/posts/2019-07-10-using-mdx/index.mdx

@@ -4,8 +4,10 @@ slug: using-mdx
 date: 2019-07-10
 language: en
 generate-card: false
-tags:
-    - gatsby
+tags: ['gatsby', 'translation']
+translations:
+  - link: '/using-mdx-fr'
+    language: 'French'
 ---
 
 ## Hello, world!

data/siteConfig.js

@@ -4,7 +4,7 @@ module.exports = {
   authorName: 'Maxence Poutord',
   twitterUsername: '_maxpou',
   authorAvatar: 'avatar.jpeg', // file in content/images
-  multilangPosts: true, // enable/disable flags in post lists
+  defaultLang: 'en', // show flag if lang is not default. Leave empty to enable flags in post lists
   authorDescription: `
   For the last decade, Maxence Poutord has worked with a variety of web technologies. He is currently focused on front-end development.
   On his day to day job, he is working as a senior front-end engineer at VSware. He is also an occasional tech speaker and a mentor.

gatsby-node.js

@@ -17,6 +17,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     {
       allMarkdown: allMdx(
         sort: { fields: [frontmatter___date], order: DESC }
+        filter: { frontmatter: { published: { ne: false } } }
         limit: 1000
       ) {
         edges {
@@ -26,6 +27,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
               title
               slug
               tags
+              language
             }
           }
         }

src/components/Article.js

@@ -28,6 +28,7 @@ class Article extends React.Component {
           content={post.body}
           date={post.frontmatter.date}
           tags={post.frontmatter.tags}
+          translations={post.frontmatter.translations}
         />
         <ArticleFooter>
           <Bio />

src/components/Content.js

@@ -96,7 +96,7 @@ const ContentBody = styled.div`
     padding: 1;
   }
 
-  & .gatsby-highlight pre[class*=language-] {
+  & .gatsby-highlight pre[class*='language-'] {
     float: left;
     min-width: 100%;
   }
@@ -151,11 +151,14 @@ const ContentBody = styled.div`
 
 class Content extends React.Component {
   render() {
-    const { content, date, tags } = this.props
+    const { content, date, tags, translations } = this.props
 
     return (
       <section>
-        {(tags || date) && <ContentHeader date={date} tags={tags} />}
+        {(tags || date || translations) && (
+          <ContentHeader date={date} tags={tags} translations={translations} />
+        )}
+
         <ContentBody>
           <MDXRenderer>{content}</MDXRenderer>
         </ContentBody>

src/components/ContentHeader.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import TagList from './TagList'
+import Translations from './Translations'
 import Time from './Time'
 import { colors } from '../tokens'
 import { Bull } from './Commons'
@@ -13,7 +14,7 @@ const Header = styled.header`
 
 class ContentIntro extends React.Component {
   render() {
-    const { date, tags } = this.props
+    const { date, tags, translations } = this.props
 
     return (
       <Header>
@@ -24,6 +25,8 @@ class ContentIntro extends React.Component {
             <TagList tags={tags} />
           </Fragment>
         )}
+
+        {translations && <Translations translations={translations} />}
       </Header>
     )
   }

src/components/PostsListItem.js

@@ -53,14 +53,14 @@ const FooterLine = styled.div`
 
 const PostsListItem = props => {
   const { title, excerpt, slug, language, tags, timeToRead } = props
-  const { multilangPosts } = useSiteMetadata()
+  const { defaultLang } = useSiteMetadata()
 
   return (
     <Post>
       <PostHeader>
         <h2>
           <PostTitleLink to={`/${slug}`}>
-            {multilangPosts && <Flag language={language} />}
+            {defaultLang !== language && <Flag language={language} />}
             {title}
           </PostTitleLink>
         </h2>

src/components/RelatedPosts.js

@@ -5,18 +5,18 @@ import useSiteMetadata from '../hooks/use-site-config'
 
 const RelatedPosts = props => {
   const { posts } = props
-  const { multilangPosts } = useSiteMetadata()
+  const { defaultLang } = useSiteMetadata()
 
   return (
     <ul>
       {posts.map(post => {
         const title = post.node.frontmatter.title
         const slug = post.node.frontmatter.slug
-        const language = post.node.frontmatter.language || 'en'
+        const language = post.node.frontmatter.language || defaultLang
         return (
           <li key={slug}>
             <StyledLink to={`/${slug}`}>
-              {multilangPosts && <Flag language={language} />}
+              {defaultLang !== language && <Flag language={language} />}
               {title}
             </StyledLink>
           </li>

src/components/SEO.js

@@ -13,7 +13,9 @@ const SEO = props => {
     twitterUsername,
   } = useSiteMetadata()
 
-  const title = props.title ? `${props.title} | ${siteTitle}` : siteTitle
+  const title = props.title
+    ? `${props.title} | ${siteTitle}`
+    : `${siteTitle} - ${siteDescription}`
   const formatedSiteUrl = siteUrl.endsWith('/')
     ? siteUrl.substring(0, siteUrl.length - 1)
     : siteUrl

src/components/Translations.js

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+import { colors } from '../tokens'
+
+const TranslationContainer = styled.div`
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 10px;
+  background-color: ${colors.lightYellow};
+  border: 1px solid ${colors.grey700};
+`
+
+const InfoText = styled.span`
+  color: ${colors.grey900};
+`
+
+const TranslationLink = styled.a`
+  color: ${colors.grey900};
+  text-decoration: underline;
+`
+
+class Translations extends React.Component {
+  render() {
+    const { translations } = this.props
+
+    return (
+      <TranslationContainer>
+        <InfoText>This article also exists in: </InfoText>
+        {translations.map((translation, i) => {
+          return (
+            <Fragment key={`translation-${i}`}>
+              <TranslationLink href={translation.link}>
+                {translation.language}
+              </TranslationLink>
+              {i < translations.length - 1 ? ', ' : ''}
+            </Fragment>
+          )
+        })}
+      </TranslationContainer>
+    )
+  }
+}
+export default Translations

src/hooks/use-site-config.js

@@ -15,7 +15,7 @@ const useSiteMetadata = () => {
           twitterUsername
           disqusShortname
           disqusSiteUrl
-          multilangPosts
+          defaultLang
           headerTitle
           headerLinksIcon
           headerLinks {

src/pages/404.js

@@ -34,7 +34,10 @@ const NotFoundPage = props => {
     query {
       posts: allMdx(
         sort: { fields: [frontmatter___date], order: DESC }
-        filter: { fileAbsolutePath: { regex: "//content/posts//" } }
+        filter: {
+          fileAbsolutePath: { regex: "//content/posts//" }
+          frontmatter: { published: { ne: false }, unlisted: { ne: true } }
+        }
         limit: 5
       ) {
         edges {

src/templates/blog-list-template.js

@@ -44,7 +44,10 @@ export const pageQuery = graphql`
     }
     posts: allMdx(
       sort: { fields: [frontmatter___date], order: DESC }
-      filter: { fileAbsolutePath: { regex: "//content/posts//" } }
+      filter: {
+        fileAbsolutePath: { regex: "//content/posts//" }
+        frontmatter: { published: { ne: false }, unlisted: { ne: true } }
+      }
       limit: $limit
       skip: $skip
     ) {

src/templates/blog-post.js

@@ -64,6 +64,10 @@ export const pageQuery = graphql`
         imageShare {
           publicURL
         }
+        translations {
+          language
+          link
+        }
       }
     }
   }

src/templates/tags.js

@@ -38,7 +38,13 @@ export const pageQuery = graphql`
   query PostsByTag($tag: String!) {
     posts: allMdx(
       sort: { fields: [frontmatter___date], order: DESC }
-      filter: { frontmatter: { tags: { eq: $tag } } }
+      filter: {
+        frontmatter: {
+          tags: { eq: $tag }
+          published: { ne: false }
+          unlisted: { ne: true }
+        }
+      }
     ) {
       edges {
         node {

src/tokens/colors.js

@@ -13,6 +13,7 @@ const colors = {
 
   white: '#ffffff',
   yellow: '#ffdc4e',
+  lightYellow: '#f9e892',
   lightBlue: '#697980',
 }