Add tags

content/blog/embrace-distributed-teams-and-be-happy/index.md

@@ -3,6 +3,7 @@ title: Embrace distributed teams and be happy
 date: "2020-01-21T11:00:00Z"
 description: "Although having remote teams usually brings down the cost considerably, it comes with its own set of everyday challenges that can outweigh the benefits if not properly handled."
 publication_status: published
+tags: teamwork
 ---
 
 Remote teams have become the norm, rather than the exception, for many companies requiring software engineering services (and not only).

content/blog/on-being-productive/index.md

@@ -3,6 +3,7 @@ title: On being productive
 date: "2019-07-30T21:16:00Z"
 description: "Our day is bombarded with inputs, things to be done and to be done on time: the more our lives become dynamic, the less can we rely on routine to remember what we need to do, so we need to develop new habits for being 'productive'."
 publication_status: published
+tags: productivity
 ---
 
 Our day is bombarded with inputs, things to be done and to be done on time: the more our lives become dynamic, the less can we rely on routine to remember what we need to do, so we need to develop new habits for being "productive".

content/blog/weekly-review/index.md

@@ -3,6 +3,7 @@ title: "Achieving goals: the importance of the Weekly Review"
 date: "2022-07-27T11:00:00Z"
 description: "The Weekly Review has the power of getting you to zoom out from the day to day grind of completing tasks, to look at the big picture and make sure that you know why you are doing what you are doing and how that aligns to your goals and values."
 publication_status: published
+tags: productivity
 ---
 
 In the quest of [being productive](/blog/on-being-productive/) and achieve goals, one thing that is easily discovered is that consistency is key: this is actually not a big discovery, as it applies to pretty much every area of life that one may try to improve.

gatsby-config.ts

@@ -6,7 +6,7 @@ const siteUrl = process.env.URL || "https://www.riccardocoppola.me";
 const config: GatsbyConfig = {
   siteMetadata: {
     title: `Riccardo Coppola`,
-    description: `Notes on web development, life, learning and the world.`,
+    description: `Notes on programming, life, learning and the world.`,
     author: {
       name: `Riccardo Coppola`,
       summary: `I help companies to create better web applications. 
@@ -196,7 +196,7 @@ const config: GatsbyConfig = {
               }
             `,
             output: "/rss.xml",
-            title: "Gatsby Starter Blog RSS Feed",
+            title: "My notes on programming, life, learning and the world - Riccardo Coppola",
           },
         ],
       },

graphql-types.ts

@@ -694,8 +694,8 @@ export type Frontmatter = {
   location?: Maybe<Scalars['String']>;
   technologies?: Maybe<Array<Maybe<Scalars['String']>>>;
   order?: Maybe<Scalars['Int']>;
-  photo?: Maybe<Scalars['String']>;
   link?: Maybe<Scalars['String']>;
+  tags?: Maybe<Scalars['String']>;
 };
 
 
@@ -1086,8 +1086,8 @@ export type FrontmatterFilterInput = {
   location?: InputMaybe<StringQueryOperatorInput>;
   technologies?: InputMaybe<StringQueryOperatorInput>;
   order?: InputMaybe<IntQueryOperatorInput>;
-  photo?: InputMaybe<StringQueryOperatorInput>;
   link?: InputMaybe<StringQueryOperatorInput>;
+  tags?: InputMaybe<StringQueryOperatorInput>;
 };
 
 export type FieldsFilterInput = {
@@ -1310,8 +1310,8 @@ export type FileFieldsEnum =
   | 'childrenMarkdownRemark___frontmatter___location'
   | 'childrenMarkdownRemark___frontmatter___technologies'
   | 'childrenMarkdownRemark___frontmatter___order'
-  | 'childrenMarkdownRemark___frontmatter___photo'
   | 'childrenMarkdownRemark___frontmatter___link'
+  | 'childrenMarkdownRemark___frontmatter___tags'
   | 'childrenMarkdownRemark___fields___slug'
   | 'childrenMarkdownRemark___excerpt'
   | 'childrenMarkdownRemark___rawMarkdownBody'
@@ -1377,8 +1377,8 @@ export type FileFieldsEnum =
   | 'childMarkdownRemark___frontmatter___location'
   | 'childMarkdownRemark___frontmatter___technologies'
   | 'childMarkdownRemark___frontmatter___order'
-  | 'childMarkdownRemark___frontmatter___photo'
   | 'childMarkdownRemark___frontmatter___link'
+  | 'childMarkdownRemark___frontmatter___tags'
   | 'childMarkdownRemark___fields___slug'
   | 'childMarkdownRemark___excerpt'
   | 'childMarkdownRemark___rawMarkdownBody'
@@ -3123,8 +3123,8 @@ export type MarkdownRemarkFieldsEnum =
   | 'frontmatter___location'
   | 'frontmatter___technologies'
   | 'frontmatter___order'
-  | 'frontmatter___photo'
   | 'frontmatter___link'
+  | 'frontmatter___tags'
   | 'fields___slug'
   | 'excerpt'
   | 'rawMarkdownBody'
@@ -3502,7 +3502,7 @@ export type ProfileQuery = { file?: { childImageSharp?: { gatsbyImageData: any }
 export type BlogIndexQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type BlogIndexQuery = { site?: { siteMetadata?: { title?: string | null } | null } | null, allMarkdownRemark: { nodes: Array<{ excerpt?: string | null, fields?: { slug?: string | null } | null, frontmatter?: { date?: any | null, title?: string | null, description?: string | null } | null }> } };
+export type BlogIndexQuery = { site?: { siteMetadata?: { title?: string | null } | null } | null, allMarkdownRemark: { nodes: Array<{ excerpt?: string | null, fields?: { slug?: string | null } | null, frontmatter?: { date?: any | null, title?: string | null, description?: string | null, tags?: string | null } | null }> } };
 
 export type BlogPostBySlugQueryVariables = Exact<{
   id: Scalars['String'];

src/components/Bio/Bio.module.css

@@ -4,5 +4,4 @@
   margin-top: 40px;
   font-size: 18px;
   font-weight: 300;
-  font-style: italic;
 }

src/components/Bio/index.tsx

@@ -11,7 +11,7 @@ import { container } from "./Bio.module.css";
 const Bio = () => {
   return (
     <div className={container}>
-      Notes on web development, life, learning and the world.
+      My notes on programming, life, learning and the world.
     </div>
   );
 };

src/components/Header/Header.module.css

@@ -36,6 +36,6 @@
   }
 
   .author a {
-    font-size: 25px;
+    font-size: 24px;
   }
 }

src/components/Post/Post.module.css

@@ -1,7 +1,11 @@
+.container {
+  margin-bottom: 10px;
+}
+
 .postTitle {
   font-size: 20px;
   font-weight: 400;
-  margin-bottom: 20px;
+  margin-bottom: 0;
   margin-top: 0;
 }
 
@@ -14,4 +18,8 @@
   line-height: 1.5;
   margin-bottom: 10px;  
   margin-top: 5px;
+}
+
+small {
+  font-size: 14px;
 }

src/components/Post/Post.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import { postTitle, date } from "./Post.module.css";
+import { postTitle, date, container } from "./Post.module.css";
 
 interface Post {
   excerpt?: string | null;
@@ -9,6 +9,7 @@ interface Post {
     date?: any | null;
     title?: string | null;
     description?: string | null;
+    tags?: string | null;
   } | null;
 }
 
@@ -18,10 +19,11 @@ interface PostProps {
 }
 
 export const Post: React.FC<PostProps> = ({ post, title }) => {
+  const tags = post.frontmatter?.tags?.split(",");
   return (
     <li key={post?.fields?.slug}>
       <article
-        className="post-list-item"
+        className={container}
         itemScope
         itemType="http://schema.org/Article"
       >
@@ -32,6 +34,19 @@ export const Post: React.FC<PostProps> = ({ post, title }) => {
               <span itemProp="headline">{title}</span>
             </Link>
           </h2>
+          {post.frontmatter?.tags && (
+            <div>
+              <span
+                style={{
+                  fontSize: "14px",
+                  color: "var(--purple)",
+                  fontFamily: "var(--blog-font-family)",
+                }}
+              >
+                {tags?.map((tag) => `#${tag.trim()} `)}
+              </span>
+            </div>
+          )}
         </header>
       </article>
     </li>

src/components/Seo/Seo.tsx

@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.com/docs/use-static-query/
  */
 
-import * as React from "react";
+import React from "react";
 import { Helmet } from "react-helmet";
 import { useStaticQuery, graphql } from "gatsby";
 
@@ -14,6 +14,7 @@ interface SeoProps {
   lang?: string;
   meta?: any[];
   title: string;
+  type: 'blog' | 'about'
 }
 
 export const Seo: React.FC<SeoProps> = ({
@@ -47,12 +48,16 @@ export const Seo: React.FC<SeoProps> = ({
         lang,
       }}
       title={title}
-      titleTemplate={defaultTitle && `%s | ${defaultTitle}`}
+      titleTemplate={defaultTitle && `%s - ${defaultTitle}`}
       meta={[
         {
           name: `description`,
           content: metaDescription,
         },
+        {
+          property: `og:locale`,
+          content: 'en_US',
+        },
         {
           property: `og:title`,
           content: title,

src/pages/blog.tsx

@@ -64,6 +64,7 @@ export const pageQuery = graphql`
           date(formatString: "MMMM DD, YYYY")
           title
           description
+          tags
         }
       }
     }

src/templates/BlogPost.tsx

@@ -42,8 +42,12 @@ const BlogPostTemplate: React.FC<PageProps<BlogPostBySlugQuery>> = ({
           itemProp="articleBody"
         />
         <hr />
-        <footer>
-          <Bio />
+        <footer style={{
+          marginBottom: 30,
+          fontSize: 18,
+          color: 'var(--grey-2)'
+        }}>
+          Heya! I love a good old email: feel free to drop me a line at <a href="mailto:ricca509@gmail.com">ricca509@gmail.com</a>. 
         </footer>
       </article>
       <nav className="blog-post-nav">

src/typings/globals.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

tsconfig.json

@@ -27,7 +27,7 @@
     /* Modules */
     "module": "commonjs" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */