Add guide type in front of the guide

content/guides.json

@@ -4,6 +4,7 @@
     "title": "Async and Defer Script Loading",
     "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
     "isNew": false,
+    "type": "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-10T19:59:14.191Z",
     "createdAt": "2021-09-10T19:59:14.191Z"
@@ -13,6 +14,7 @@
     "title": "What are Web Vitals?",
     "description": "Learn what are the core web vitals and how to measure them.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -22,6 +24,7 @@
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -31,6 +34,7 @@
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-09T19:59:14.191Z",
     "createdAt": "2021-07-09T19:59:14.191Z"
@@ -40,6 +44,7 @@
     "title": "SSO — Single Sign On",
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-01T19:59:14.191Z",
     "createdAt": "2021-07-01T19:59:14.191Z"
@@ -49,6 +54,7 @@
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-28T19:59:14.191Z",
     "createdAt": "2021-06-28T19:59:14.191Z"
@@ -58,6 +64,7 @@
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-20T19:59:14.191Z",
     "createdAt": "2021-06-20T19:59:14.191Z"
@@ -67,6 +74,7 @@
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-02T20:59:14.191Z",
     "createdAt": "2021-06-02T20:59:14.191Z"
@@ -76,6 +84,7 @@
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-26T20:59:14.191Z",
     "createdAt": "2021-05-26T20:59:14.191Z"
@@ -85,6 +94,7 @@
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-19T20:59:14.191Z",
     "createdAt": "2021-05-19T20:59:14.191Z"
@@ -94,6 +104,7 @@
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-14T20:59:14.191Z",
     "createdAt": "2021-05-14T20:59:14.191Z"
@@ -103,6 +114,7 @@
     "title": "Unfamiliar Codebase",
     "description": "Tips on getting getting familiar with an unfamiliar codebase",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-04T20:59:14.191Z",
     "createdAt": "2021-05-04T20:59:14.191Z"
@@ -112,6 +124,7 @@
     "title": "Build it and they will come?",
     "description": "Why “build it and they will come” alone won’t work anymore",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "spekulatius",
     "updatedAt": "2021-05-04T12:59:14.191Z",
     "createdAt": "2021-05-04T12:59:14.191Z"
@@ -121,6 +134,7 @@
     "title": "DHCP in One Picture",
     "description": "Here is what happens when a new device joins the network.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-28T15:48:21.191Z",
     "createdAt": "2021-04-28T15:48:21.191Z"
@@ -130,6 +144,7 @@
     "title": "SSL vs TLS vs SSH",
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-22T15:48:21.191Z",
     "createdAt": "2021-04-22T15:48:21.191Z"
@@ -139,6 +154,7 @@
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-03T15:48:21.191Z",
     "createdAt": "2021-04-03T15:48:21.191Z"
@@ -148,6 +164,7 @@
     "title": "Big-O Notation",
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-15T15:48:21.191Z",
     "createdAt": "2021-03-15T15:48:21.191Z"
@@ -157,6 +174,7 @@
     "title": "Random Numbers: Are they?",
     "description": "Learn how they are generated and why they may not be truly random.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-14T15:48:21.191Z",
     "createdAt": "2021-03-14T15:48:21.191Z"
@@ -166,6 +184,7 @@
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-18T15:48:21.191Z",
     "createdAt": "2021-02-18T15:48:21.191Z"
@@ -175,6 +194,7 @@
     "title": "How does the internet work?",
     "description": "Learn the basics of internet and everything involved with this short video series",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "dmytrobol",
     "updatedAt": "2021-02-29T15:48:21.191Z",
     "createdAt": "2021-02-29T15:48:21.191Z"
@@ -184,6 +204,7 @@
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "jesse",
     "updatedAt": "2021-01-17T15:48:21.191Z",
     "createdAt": "2021-01-17T15:48:21.191Z",
@@ -194,6 +215,7 @@
     "title": "Levels of Seniority",
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2020-12-03T12:13:00.860Z",
     "createdAt": "2020-12-03T12:13:00.860Z"
@@ -203,6 +225,7 @@
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -212,6 +235,7 @@
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -222,6 +246,7 @@
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
     "isNew": false,
+    "type":  "visual",
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -231,6 +256,7 @@
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -240,6 +266,7 @@
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -249,6 +276,7 @@
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
     "isNew": false,
+    "type":  "textual",
     "authorUsername": "ebrahimbharmal007",
     "createdAt": "2017-10-24T17:00:00.860Z",
     "updatedAt": "2017-10-24T17:00:00.860Z"

lib/guide.ts

@@ -11,6 +11,7 @@ export type GuideType = {
   createdAt: string;
   updatedAt: string;
   formattedCreatedAt?: string;
+  type?: 'visual' | 'textual';
   formattedUpdatedAt?: string;
   authorUsername: string;
   author?: AuthorType;

pages/index.tsx

@@ -102,7 +102,7 @@ export default function Home(props: HomeProps) {
         <Container maxW="container.md" position="relative">
           <Box pt="40px" mb="20px">
             <Heading color="green.500" fontSize="25px" mb="5px">
-              Visual Guides
+              Guides
             </Heading>
           </Box>
 
@@ -112,8 +112,8 @@ export default function Home(props: HomeProps) {
                 key={guide.id}
                 href={`/guides/${guide.id}`}
                 title={guide.title}
-                badgeText={guide.isNew ? 'NEW' : ''}
+                badgeText={guide.isNew ? `NEW · ${(new Date(guide.createdAt)).toLocaleDateString('en-us', { month: 'long'})}` : ''}
-                subtitle={guide.formattedUpdatedAt!}
+                subtitle={`${guide?.type?.charAt(0).toUpperCase()}${guide?.type?.slice(1)}`}
               />
             ))}
             <DimmedMore href={'/guides'} text="View all Guides" />