Blog page improvements #18

tejash-patel · 2020-09-11T13:20:05Z

Various improvements on the blog page:

Add default profile picture
Update different font sizes - headings and paragraphs
start using styled components
make individual posts mobile friendly

also rename the file to use camel case

dellisd

Overall the code looks good other than a bit of duplicate code that can be pulled out.

A couple of general points though:

The width of the blog should be increased to match the Events page. Right now the blog is much narrower.
There isn't enough distinction with the blog cards (this is an issue with the original design, not the code). It can be hard to tell where one card starts and one card ends. The "featured" card also looks like it's floating in the middle of nowhere (for lack of a better term).
Is postLayout.css necessary? I feel like in a lot of cases it would make more sense to extract as many of those css classes as possible and convert them to styled components. I understand it's a lot of css though.

dellisd · 2020-09-18T14:03:19Z

src/components/blogCard.tsx

+  const months = [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JULY',
+    'AUG',
+    'SEPT',
+    'OCT',
+    'NOV',
+    'DEC'
+  ]
+
+  const month = new Date(published_at).getMonth()
+  const formatted_published_at =
+    new Date(published_at).getDate() +
+    ' ' +
+    months[month] +
+    ' ' +
+    new Date(published_at).getFullYear()


This could be pulled out as a helper function since it's used in multiple places.

dellisd · 2020-09-18T14:03:33Z

src/components/blogCard.tsx

+  authors,
+  primary_author_name
+}: BlogCardProps) => {
+  console.log(feature_image)


Suggested change

console.log(feature_image)

This should be removed before merging

dellisd · 2020-09-18T14:04:11Z

src/layouts/postLayout.tsx

@@ -20,7 +40,7 @@ export default ({ data: { ghostPost: post } }) => {
    'NOV',
    'DEC'
  ]
-
+  console.log(post)


Suggested change

console.log(post)

tejash-patel · 2020-09-18T21:54:59Z

Thanks Derek.

Added helper function for common code
Update page width to match other pages
Add border to posts for neatness

tejash-patel · 2020-09-18T22:01:00Z

Is postLayout.css necessary? I feel like in a lot of cases it would make more sense to extract as many of those css classes as possible and convert them to styled components. I understand it's a lot of css though

We can leave this file as css only, can't imagine thinking of different constant names for all these classes!

walsquared

It looks like the feature image is being skewed.

The Blog:

How it should look:

dellisd

The ?? operator is now your best friend!

dellisd · 2020-09-20T23:04:13Z

src/components/blogCard.tsx

+                          author.profile_image
+                            ? author.profile_image
+                            : ProfileIcon


Suggested change

author.profile_image

? author.profile_image

: ProfileIcon

author.profile_image ?? ProfileIcon

dellisd · 2020-09-20T23:05:21Z

src/components/blogCardFeatured.tsx

+                            author.profile_image
+                              ? author.profile_image
+                              : ProfileIcon


Suggested change

author.profile_image

? author.profile_image

: ProfileIcon

author.profile_image ?? ProfileIcon

dellisd · 2020-09-20T23:24:30Z

src/components/helpers.tsx

@@ -0,0 +1,27 @@
+export function formatDate(published_at: any) {


Could we specify a proper type for this parameter instead of any?

dellisd · 2020-09-20T23:25:30Z

src/components/wordLogo.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+const WordLogo = (props: any) => (


Can you specify a proper interface for these props and use that instead of any?

dellisd · 2020-09-20T23:26:16Z

src/layouts/postLayout.tsx

+                            author.profile_image
+                              ? author.profile_image
+                              : ProfileIcon


Suggested change

author.profile_image

? author.profile_image

: ProfileIcon

author.profile_image ?? ProfileIcon

dellisd · 2020-09-20T23:51:19Z

src/pages/blog.tsx

+              posts[0].custom_excerpt
+                ? posts[0].custom_excerpt
+                : posts[0].excerpt.substring(0, 175)


Suggested change

posts[0].custom_excerpt

? posts[0].custom_excerpt

: posts[0].excerpt.substring(0, 175)

posts[0].custom_excerpt ?? posts[0].excerpt.substring(0, 175)

tejash-patel · 2020-09-22T18:50:18Z

Updated those changes. Thank you Derek and Wal.

dellisd · 2020-09-23T00:04:12Z

src/components/blogCard.tsx

+  title: String
+  reading_time: number
+  published_at: Date
+  excerpt: String
+  feature_image: String
+  slug: String
+  tags: Array<any>
+  primary_author_name: String
+  authors: Array<any>


Suggested change

title: String

reading_time: number

published_at: Date

excerpt: String

feature_image: String

slug: String

tags: Array<any>

primary_author_name: String

authors: Array<any>

title: string

reading_time: number

published_at: Date

excerpt: string

feature_image: string

slug: string

tags: any[]

primary_author_name: string

authors: any[]

Use primitive types

dellisd · 2020-09-23T00:04:45Z

src/components/blogCardFeatured.tsx

+type BlogCardProps = {
+  title: String
+  reading_time: number
+  published_at: Date
+  excerpt: String
+  feature_image: String
+  slug: String
+  tags: Array<any>
+  primary_author_name: String
+  authors: Array<any>
+}


Suggested change

type BlogCardProps = {

title: String

reading_time: number

published_at: Date

excerpt: String

feature_image: String

slug: String

tags: Array<any>

primary_author_name: String

authors: Array<any>

}

type BlogCardProps = {

title: string

reading_time: number

published_at: Date

excerpt: string

feature_image: string

slug: string

tags: any[]

primary_author_name: string

authors:any[]

}

dellisd · 2020-09-23T00:05:37Z

src/components/blogCard.tsx

+  tags: Array<any>
+  primary_author_name: String
+  authors: Array<any>


Can you also specify interfaces for Tags and Authors? (and any other interfaces that might be required).

tejash-patel added 8 commits September 11, 2020 09:10

add default profile icon

2fcbe0c

remove duplicate header component

90ddbd0

remove separate css files

d257143

update blog cards to use styled components

1ae770c

also rename the file to use camel case

add blog card component for latest post

ae1df66

update header to include blog item

a31e361

use styled components

72140d4

various css fixes

eae44f5

tejash-patel requested review from dellisd and walsquared September 11, 2020 13:20

dellisd requested changes Sep 18, 2020

View reviewed changes

tejash-patel added 4 commits September 18, 2020 16:40

show black logo in blogs

40dfdac

fix width size + show no ruler in mobile view

09116e3

add helper function for common code

0368d37

remove console log

9b6e9cf

walsquared suggested changes Sep 20, 2020

View reviewed changes

dellisd requested changes Sep 20, 2020

View reviewed changes

tejash-patel added 4 commits September 22, 2020 14:26

fix skewed feature image

4add639

use the ?? operator

b82006d

use proper tye for helper function

4560048

update props interface

fc1584a

dellisd requested changes Sep 23, 2020

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blog page improvements #18

Blog page improvements #18

tejash-patel commented Sep 11, 2020

dellisd left a comment

dellisd Sep 18, 2020

dellisd Sep 18, 2020

dellisd Sep 18, 2020

tejash-patel commented Sep 18, 2020

tejash-patel commented Sep 18, 2020

walsquared left a comment

dellisd left a comment

dellisd Sep 20, 2020

dellisd Sep 20, 2020

dellisd Sep 20, 2020

dellisd Sep 20, 2020

dellisd Sep 20, 2020

dellisd Sep 20, 2020

tejash-patel commented Sep 22, 2020

dellisd Sep 23, 2020

dellisd Sep 23, 2020

dellisd Sep 23, 2020

		@@ -0,0 +1,27 @@
		export function formatDate(published_at: any) {

		@@ -0,0 +1,50 @@
		import React from 'react'

		const WordLogo = (props: any) => (

Blog page improvements #18

Are you sure you want to change the base?

Blog page improvements #18

Conversation

tejash-patel commented Sep 11, 2020

dellisd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tejash-patel commented Sep 18, 2020

tejash-patel commented Sep 18, 2020

walsquared left a comment

Choose a reason for hiding this comment

dellisd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tejash-patel commented Sep 22, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment