Add typescript with gatsbt recipe

README.md

@@ -2,6 +2,12 @@
 
 > Podast and articles about womens artists
 
+## Tooling
+
+- Pages generated with [Gatsby](https://www.gatsbyjs.com/).
+- [Prismic](https://prismic.io/) for the content.
+- Hosted on Netlify, you [can check the website](https://artaufeminin.fr).
+
 ## Getting started
 
 ```

gatsby-config.js

@@ -52,7 +52,9 @@ module.exports = {
       options: {
         postCssPlugins: [
           require("postcss-easy-import")(),
-          require("postcss-custom-properties")({ preserve: false }),
+          require("postcss-custom-properties")({
+            preserve: false,
+          }),
           require("postcss-color-function")(),
         ],
       },
@@ -97,10 +99,9 @@ module.exports = {
         defaultLang: "fr-fr", // optional, but recommended
         pages: [
           {
-            // optional
-            type: "Blog_post", // TypeName from prismic
-            match: "/article/:uid", // pages will be generated under this pattern
-            component: require.resolve("./src/templates/article.js"),
+            type: "Blog_post", // optional
+            match: "/article/:uid", // TypeName from prismic
+            component: require.resolve("./src/templates/article.tsx"), // pages will be generated under this pattern
           },
         ],
         sharpKeys: [
@@ -109,5 +110,6 @@ module.exports = {
         ],
       },
     },
+    "gatsby-plugin-typescript",
   ],
 }

package.json

@@ -8,6 +8,9 @@
     "url": "https://github.com/ImedAdel/gatsby-london/issues"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
+    "date-fns": "^2.16.1",
     "gatsby": "^2.21.21",
     "gatsby-image": "^2.0.41",
     "gatsby-plugin-manifest": "^2.1.1",
@@ -18,6 +21,7 @@
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sharp": "^2.0.36",
     "gatsby-plugin-sitemap": "^2.4.2",
+    "gatsby-plugin-typescript": "^2.4.18",
     "gatsby-remark-copy-linked-files": "^2.0.12",
     "gatsby-remark-images": "^2.0.6",
     "gatsby-remark-prismjs": "^3.2.9",
@@ -34,6 +38,7 @@
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "typeface-merriweather": "0.0.72",
+    "typescript": "^4.0.2",
     "url-join": "^4.0.0"
   },
   "devDependencies": {

src/components/articleCard.js → src/components/articleCard.tsx

@@ -22,7 +22,7 @@ export default function articleCard(props) {
     >
       <Link to={`article/${slug}`} className="post-card-link">
         <div className="post-card-content">
-          <h2 className="post-card-title">{RichText.render(title)}</h2>
+          <h2 className="post-card-title">{RichText.asText(title)}</h2>
         </div>
       </Link>
     </article>

src/components/blog/author.js → src/components/blog/author.tsx

@@ -15,7 +15,7 @@ function Author() {
                 fixed={data.avatar.childImageSharp.fixed}
                 alt={author}
                 imgStyle={{
-                  borderRadius: `50%`,
+                  borderRadius: `100%`,
                 }}
               />
             </div>

src/components/footer.js → src/components/footer.tsx

@@ -48,9 +48,9 @@ export default function footer(props) {
               paddingRight: 0,
             }}
           >
-            {platforms.map(platform => {
+            {platforms.map((platform, index) => {
               return (
-                <li>
+                <li key={index}>
                   <a href={platform.url}>{platform.name}</a>
                 </li>
               )

src/components/layout.js → src/components/layout.tsx

@@ -1,11 +1,16 @@
-import React from "react"
+import React, { ReactNode } from "react"
 import { Link } from "gatsby"
 import Footer from "./footer"
 
 import "../utils/normalize.css"
-import "../utils/css/screen.css"
+import "../utils/css/styles.css"
 
-const Layout = props => {
+interface LayoutProps {
+  title: string
+  children: ReactNode
+}
+
+function Layout(props: LayoutProps) {
   const { title, children } = props
   const [toggleNav, setToggleNav] = React.useState(false)
 

src/pages/404.tsx

@@ -0,0 +1,29 @@
+import React, { ReactElement } from "react"
+import { graphql } from "gatsby"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+
+interface Props {}
+
+export default function NotFoundPage({ data }: Props): ReactElement {
+  const siteTitle = data.site.siteMetadata.title
+
+  return (
+    <Layout title={siteTitle}>
+      <SEO title="404: Not Found" />
+      <h1>Ohoh. Il n'y a rien à voir ici.</h1>
+      <p>La page que vous demandez n'existe pas.</p>
+    </Layout>
+  )
+}
+
+export const pageQuery = graphql`
+  query {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`

src/templates/article.js → src/templates/article.tsx

@@ -1,31 +1,38 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { RichText } from "prismic-reactjs"
+import { formatDistanceToNow } from "date-fns"
+import { fr } from "date-fns/locale"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import Author from "../components/blog/author"
 
 export default function Article(props) {
-  const siteTitle = props.data.site.siteMetadata.title
   const doc = props.data.prismic.allBlog_posts.edges.slice(0, 1).pop()
-
   if (!doc) return null
 
+  const siteTitle = props.data.site.siteMetadata.title
+  const title = RichText.asText(doc.node.title)
+  const description = RichText.asText(doc.node.description)
+
+  const datePublished = formatDistanceToNow(new Date(doc.node.date), {
+    addSuffix: true,
+    locale: fr,
+  })
+
   return (
     <Layout title={siteTitle}>
-      <SEO title="Article" />
+      <SEO title={title} description={description} />
 
       <article className={`post-content`}>
         <header className="post-content-header">
-          <h1 className="post-content-title">
-            {RichText.asText(doc.node.title)}
-          </h1>
+          <h1 className="post-content-title">{title}</h1>
         </header>
 
-        <p class="post-content-excerpt">
+        <div className="post-content-excerpt">
           {RichText.render(doc.node.description)}
-        </p>
+        </div>
 
         {doc.node.image && (
           <div className="post-content-image">
@@ -39,7 +46,7 @@ export default function Article(props) {
 
         <div className="post-content-body">
           {RichText.render(doc.node.content)}
-          <p>{doc.node.date}</p>
+          <p>Article publié {datePublished}</p>
         </div>
 
         <footer className="post-content-footer">

src/utils/css/components/buttons.css

@@ -14,7 +14,7 @@ button,
   cursor: pointer;
   font-family: var(--font-sans-serif);
   font-size: 1.4rem;
-  font-weight: var(--font-normal);
+  font-weight: var(--font-bold);
   line-height: var(--height);
   text-align: center;
   text-decoration: none;