Merge pull request #88 from kalwalt/dev

fixing in about page

package.json

@@ -2,7 +2,7 @@
   "name": "gatsby-starter-i18n-bulma",
   "private": true,
   "description": "Gatsby example site using i18n and bulma for CSS",
-  "version": "0.1.5",
+  "version": "0.9.7",
   "author": "Walter Perdan <[email protected]> (www.kalwaltart.it)",
   "dependencies": {
     "@babel/parser": "^7.3.4",
@@ -11,6 +11,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.7.2",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@hot-loader/react-dom": "^16.3.1",
     "@reach/dialog": "^0.1.4",
     "@vizuaalog/bulmajs": "^0.9.0",
     "animate.css": "^3.7.0",
@@ -49,7 +50,6 @@
     "node-sass": "^4.11.0",
     "path": "^0.12.7",
     "react": "^16.3.1",
-    "@hot-loader/react-dom": "^16.3.1",
     "react-helmet": "^5.2.0",
     "react-icon-base": "^2.1.2",
     "react-icons": "^3.5.0",

src/pages/about.en.md

@@ -2,7 +2,7 @@
 id: '03'
 title: "About me"
 description: "Something about me"
-templateKey: home
+templateKey: about
 lang: en
 date: "05-03-2019"
 path: /en/about

src/pages/presentazione.it.md

@@ -2,7 +2,7 @@
 id: '03'
 title: "Pagina a proposito di me"
 description: "Qualcosa su di me"
-templateKey: home
+templateKey: about
 lang: it
 date: "05-03-2019"
 path: /it/presentazione

src/templates/about.js

@@ -0,0 +1,85 @@
+import React from "react"
+import * as PropTypes from "prop-types"
+import { Link, graphql } from 'gatsby'
+import Img from "gatsby-image"
+import Layout from "../components/Layout"
+import Content, { HTMLContent } from "../components/Content"
+
+const AboutPageTemplate = ({ title, content, contentComponent }) => {
+  const PageContent = contentComponent || Content
+  return (
+      <div className="container content">
+       <h1 className="title animated bounceInLeft">{title}</h1>
+        <section className="section">
+          <PageContent className="container content" content={content} />
+        </section>
+      </div>
+)
+}
+
+AboutPageTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
+  contentComponent: PropTypes.func,
+}
+
+class AboutPage extends React.Component {
+
+  render() {
+    var dataMarkdown = [];
+    if (this.props.data !== null) {
+      dataMarkdown = this.props.data.markdownRemark
+    }
+    const jsonData = this.props.data.allArticlesJson.edges[0].node.articles;
+    return (
+      <Layout className="container" data={this.props.data} jsonData={jsonData} location={this.props.location}>
+        <div>
+            <AboutPageTemplate
+            contentComponent={HTMLContent}
+            title={dataMarkdown.frontmatter.title}
+            content={dataMarkdown.html}
+             />
+        </div>
+      </Layout>
+    )
+  }
+}
+
+AboutPage.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+export default AboutPage
+
+export const pageQuery = graphql`
+  query AboutPageQuery($id: String!) {
+    site {
+      siteMetadata {
+        languages {
+          defaultLangKey
+          langs
+        }
+      }
+    }
+    allArticlesJson(filter:{title:{eq:"home"}}){
+   edges{
+     node{
+       articles {
+         en
+         it
+       }
+     }
+   }
+ }
+    markdownRemark(id: {eq: $id}) {
+      html
+      frontmatter {
+        id
+        title
+      }
+      fields {
+        slug
+      }
+    }
+  }
+`

src/templates/home.js

@@ -47,7 +47,7 @@ const HomePageTemplate = ({
         justifyContent: 'space-around',
         alignItems: 'left',
         flexDirection: 'column',
-      }}image
+      }}
     >
       <h1
         className="has-text-weight-bold is-size-3-mobile is-size-2-tablet is-size-1-widescreen is-centered animated bounceInLeft"
@@ -58,7 +58,7 @@ const HomePageTemplate = ({
           color: 'white',
           lineHeight: '1',
           padding: '0.25em',
-        }}image
+        }}
       >
         {title}
       </h1>