Render first post in the index to get ads (#62)

Author: franleplant

graphql-types.ts

@@ -2980,6 +2980,8 @@ export type IQueryAllDirectoryArgs = {
 export type IQuerySiteArgs = {
   buildTime: Maybe<IDateQueryOperatorInput>;
   siteMetadata: Maybe<ISiteSiteMetadataFilterInput>;
+  port: Maybe<IIntQueryOperatorInput>;
+  host: Maybe<IStringQueryOperatorInput>;
   pathPrefix: Maybe<IStringQueryOperatorInput>;
   mapping: Maybe<ISiteMappingFilterInput>;
   polyfill: Maybe<IBooleanQueryOperatorInput>;
@@ -3139,6 +3141,8 @@ export type IQueryAllSitePluginArgs = {
 export type ISite = INode & {
   buildTime: Maybe<Scalars['Date']>;
   siteMetadata: Maybe<ISiteSiteMetadata>;
+  port: Maybe<Scalars['Int']>;
+  host: Maybe<Scalars['String']>;
   pathPrefix: Maybe<Scalars['String']>;
   mapping: Maybe<ISiteMapping>;
   polyfill: Maybe<Scalars['Boolean']>;
@@ -3344,6 +3348,8 @@ export type ISiteFieldsEnum =
   'siteMetadata___author' |
   'siteMetadata___siteUrl' |
   'siteMetadata___social___twitter' |
+  'port' |
+  'host' |
   'pathPrefix' |
   'mapping___MarkdownRemark_frontmatter_author' |
   'polyfill' |
@@ -3437,6 +3443,8 @@ export type ISiteFieldsEnum =
 export type ISiteFilterInput = {
   buildTime: Maybe<IDateQueryOperatorInput>;
   siteMetadata: Maybe<ISiteSiteMetadataFilterInput>;
+  port: Maybe<IIntQueryOperatorInput>;
+  host: Maybe<IStringQueryOperatorInput>;
   pathPrefix: Maybe<IStringQueryOperatorInput>;
   mapping: Maybe<ISiteMappingFilterInput>;
   polyfill: Maybe<IBooleanQueryOperatorInput>;
@@ -4182,7 +4190,7 @@ export type ISitePluginPluginOptions = {
   disableBgImageOnAlpha: Maybe<Scalars['Boolean']>;
   disableBgImage: Maybe<Scalars['Boolean']>;
   className: Maybe<Scalars['String']>;
-  offsetY: Maybe<Scalars['String']>;
+  offsetY: Maybe<Scalars['Int']>;
   icon: Maybe<Scalars['String']>;
   isIconAfterHeader: Maybe<Scalars['Boolean']>;
   active: Maybe<Scalars['Boolean']>;
@@ -4247,7 +4255,7 @@ export type ISitePluginPluginOptionsFilterInput = {
   disableBgImageOnAlpha: Maybe<IBooleanQueryOperatorInput>;
   disableBgImage: Maybe<IBooleanQueryOperatorInput>;
   className: Maybe<IStringQueryOperatorInput>;
-  offsetY: Maybe<IStringQueryOperatorInput>;
+  offsetY: Maybe<IIntQueryOperatorInput>;
   icon: Maybe<IStringQueryOperatorInput>;
   isIconAfterHeader: Maybe<IBooleanQueryOperatorInput>;
   active: Maybe<IBooleanQueryOperatorInput>;
@@ -4327,7 +4335,7 @@ export type ISitePluginPluginOptionsPluginsPluginOptions = {
   disableBgImageOnAlpha: Maybe<Scalars['Boolean']>;
   disableBgImage: Maybe<Scalars['Boolean']>;
   className: Maybe<Scalars['String']>;
-  offsetY: Maybe<Scalars['String']>;
+  offsetY: Maybe<Scalars['Int']>;
   icon: Maybe<Scalars['String']>;
   isIconAfterHeader: Maybe<Scalars['Boolean']>;
   active: Maybe<Scalars['Boolean']>;
@@ -4353,7 +4361,7 @@ export type ISitePluginPluginOptionsPluginsPluginOptionsFilterInput = {
   disableBgImageOnAlpha: Maybe<IBooleanQueryOperatorInput>;
   disableBgImage: Maybe<IBooleanQueryOperatorInput>;
   className: Maybe<IStringQueryOperatorInput>;
-  offsetY: Maybe<IStringQueryOperatorInput>;
+  offsetY: Maybe<IIntQueryOperatorInput>;
   icon: Maybe<IStringQueryOperatorInput>;
   isIconAfterHeader: Maybe<IBooleanQueryOperatorInput>;
   active: Maybe<IBooleanQueryOperatorInput>;
@@ -4493,13 +4501,16 @@ export type IBlogIndexQueryVariables = {};
 
 
 export type IBlogIndexQuery = { site: Maybe<{ siteMetadata: Maybe<Pick<ISiteSiteMetadata, 'title'>> }>, allMarkdownRemark: { edges: Array<{ node: (
-        Pick<IMarkdownRemark, 'excerpt'>
+        Pick<IMarkdownRemark, 'html' | 'excerpt'>
         & { fields: Maybe<(
           Pick<IMarkdownRemarkFields, 'slug'>
           & { readingTime: Maybe<Pick<IMarkdownRemarkFieldsReadingTime, 'text'>> }
         )>, frontmatter: Maybe<(
-          Pick<IMarkdownRemarkFrontmatter, 'date' | 'title' | 'description' | 'tags'>
-          & { author: Maybe<Pick<IAuthorYaml, 'id'>> }
+          Pick<IMarkdownRemarkFrontmatter, 'title' | 'date' | 'description' | 'tags'>
+          & { author: Maybe<(
+            Pick<IAuthorYaml, 'id' | 'bio' | 'twitter' | 'github'>
+            & { profilepicture: Maybe<{ childImageSharp: Maybe<{ fluid: Maybe<IGatsbyImageSharpFluidFragment> }> }> }
+          )> }
         )> }
       ) }> }, allAuthorYaml: { nodes: Array<Pick<IAuthorYaml, 'bio' | 'id' | 'twitter' | 'github'>> } };
 

src/pages/index.tsx

@@ -6,6 +6,10 @@ import SEO from "../components/Seo";
 
 import { IBlogIndexQuery } from "../../graphql-types";
 import PostCard from "../components/PostCard";
+import PaperContainer from "../components/PaperContainer";
+import Tags from "../components/Tags";
+import Bio from "../components/Bio";
+import PostNavigator from "../components/PostNavigator";
 
 export interface IProps extends PageProps<IBlogIndexQuery> {}
 
@@ -14,6 +18,12 @@ export default function BlogIndex(props: IProps) {
   const siteTitle = data.site.siteMetadata.title;
   const posts = data.allMarkdownRemark.edges;
 
+  const firstPost = posts[0]?.node;
+  const firstPostContent = posts[0]?.node.frontmatter;
+  const { title, date, author, tags = [] } = firstPostContent;
+
+  const previousPost = posts[1]?.node;
+
   return (
     <Layout location={props.location} title={siteTitle}>
       <div className="space-y-3 p-3 lg:p-20">
@@ -42,6 +52,28 @@ export default function BlogIndex(props: IProps) {
           })}
         </div>
       </div>
+
+      <PaperContainer>
+        <article className="space-y-5">
+          <Tags tags={tags} />
+          <header className="pb-3">
+            <h1> {title} </h1>
+            <div className="py-3 text-sm text-gray-700 dark:text-light_white">
+              {`${date} • ${firstPost.fields.readingTime.text}`}
+            </div>
+            <Bio author={author} />
+          </header>
+
+          <section
+            className="space-y-5 nsj-post-content"
+            dangerouslySetInnerHTML={{ __html: firstPost.html }}
+          />
+        </article>
+
+        <div className="py-4">
+          <PostNavigator previous={previousPost} />
+        </div>
+      </PaperContainer>
     </Layout>
   );
 }
@@ -56,6 +88,7 @@ export const pageQuery = graphql`
     allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
       edges {
         node {
+          html
           excerpt
           fields {
             slug
@@ -64,12 +97,22 @@ export const pageQuery = graphql`
             }
           }
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
             title
+            date(formatString: "MMMM DD, YYYY")
             description
             tags
             author {
               id
+              bio
+              twitter
+              github
+              profilepicture {
+                childImageSharp {
+                  fluid {
+                    ...GatsbyImageSharpFluid
+                  }
+                }
+              }
             }
           }
         }

src/templates/BlogPost.tsx

@@ -51,7 +51,7 @@ export default function BlogPostTemplate(props: IProps) {
         <article className="space-y-5">
           <Tags tags={tags} />
           <header className="pb-3">
-            <h1> {post.frontmatter?.title} </h1>
+            <h1> {title} </h1>
             <div className="py-3 text-sm text-gray-700 dark:text-light_white">
               {`${post.frontmatter.date} • ${post.fields.readingTime.text}`}
             </div>