The blogs that are mapped on the home page are looking nice. Thanks t…

…ailwind!
cbmongithub · Jul 25, 2023 · 19da5c5 · 19da5c5
1 parent 3477783
commit 19da5c5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/controllers/home-routes.js b/controllers/home-routes.js
@@ -4,8 +4,8 @@ const { Post, User, Comment } = require('../models')
 router.get('/', (req, res) => {
   console.log(req.session)
   Post.findAll({
-    attributes: ['id', 'post_text', 'title', 'created_at'],
-    order: [['created_at', 'DESC']],
+    attributes: ['id', 'post_text', 'title', 'created_on'],
+    order: [['created_on', 'DESC']],
     include: [
       {
         model: User,

diff --git a/models/Post.js b/models/Post.js
@@ -21,7 +21,7 @@ Post.init(
         len: [1],
       },
     },
-    created_at: {
+    created_on: {
       type: DataTypes.DATEONLY,
       allowNull: false,
       defaultValue: DataTypes.NOW,

diff --git a/views/home.handlebars b/views/home.handlebars
@@ -1,47 +1,44 @@
-<div class='bg-white pb-24 sm:py-32'>
+<div class='bg-white pt-5 pb-24 sm:pb-32'>
   <div class='mx-auto max-w-7xl px-6 lg:px-8'>
     <div class='mx-auto max-w-2xl lg:mx-0'>
       <h2
         class='text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl'
       >Latest blogs</h2>
-      <p class='mt-2 text-lg leading-8 text-gray-600'>Browse through recent
+      <p class='mt-4 text-lg leading-8 text-gray-600'>Browse through recent
         blogs created by people from around the world</p>
     </div>
     <div
       class='mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3'
     >
       {{#each allPosts}}
-        <article class='flex max-w-xl flex-col items-start justify-between'>
-          <div class='flex items-center gap-x-4 text-xs'>
-            <time
-              datetime='2020-03-16'
-              class='text-gray-500'
-            >{{this.created_at}}</time>
-            <a
-              href='#'
-              class='relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100'
+        <article class='p-6 bg-white rounded-lg shadow-2xl'>
+          <div class='flex justify-between items-center text-xs'>
+            <p>Posted on {{this.created_on}}</p>
+            <p
+              class='relative z-10 rounded-full bg-[#ff551c] px-3 py-1.5 font-medium right-0 text-white'
             >Blog</a>
           </div>
           <div class='group relative'>
             <h3
               class='mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600'
-            >
-              <a href='#'>
-                <span class='absolute inset-0'></span>
-                {{this.title}}
-              </a>
+            >   
+                {{this.title}}         
             </h3>
             <p
               class='mt-5 text-sm leading-6 text-gray-600'
             >{{this.post_text}}</p>
           </div>
-          <div class='relative mt-8 flex items-center gap-x-4'>
+          <div class='flex mt-8 justify-between items-center text-xs'>
             <div class='text-sm leading-6'>
               <p class='font-semibold text-gray-900'>
-                <a href='#'>
-                  <span class='absolute inset-0'></span>
-                  -
-                  {{this.user.full_name}}
+                -
+                {{this.user.full_name}}
+              </p>
+            </div>
+            <div class='text-sm leading-6'>
+              <p class='font-normal text-gray-900'>
+                <a href='#' class="cursor-pointer hover:underline">
+                    Read more
                 </a>
               </p>
             </div>