Merge pull request #31 from kuzudb/prashanth-patch-1

Fix image sizing and behaviour

README.md

@@ -108,7 +108,11 @@ You can disable the youtube integration by modifying the `src/config/config.json
 
 ## 📝 Adding New Posts
 
-Add conventional markdown files to the `src/content/post` directory to add the post content. If using a directory structure, name the markdown file `index.md`.
+* Add conventional markdown files (`.md`) to the `src/content/post` directory
+  * The file name should be in the format `YYYY-MM-DD-title.md` to retain the display order
+* Images can be added to the `/public/img/title` directory and referenced in the markdown files via relative paths
+  * For an image in `/public/img/title` directory, it can be referenced in the blog using the following path:
+  * `![](/img/title/image.png)`
 
 ## 📂 Project Structure
 

src/layouts/Posts.astro

@@ -29,11 +29,11 @@ type PostType = {
   {
     posts?.slice(0, config.site.pageSize).map((post: PostType) => (
       <article class="flex w-full flex-col items-start">
-        <div class="rounded-lg block overflow-hidden mb-4">
+        <div class="rounded overflow-hidden isolate mb-4">
           {post.data.heroImage && (
             <a href={`/post/${post.slug}/`}>
             <center>
-                <figure class="max-w-96 h-36 block bg-white border-2">
+                <figure class="max-w-96 h-36 block bg-white border-2 border-zinc-200">
                 <Image
                     src={post.data.heroImage}
                     alt={post.data.title}

src/styles/global.css

@@ -47,20 +47,16 @@
     @apply hover:text-orange-600;
   }
 
-  img {
-    @apply rounded-md w-full md:w-full lg:w-3/4;
-  }
-
   article img {
-    @apply hover:w-full transition-all;
+    @apply rounded w-full;
   }
 
   th {
     @apply bg-zinc-100 bg-zinc-200 dark:bg-zinc-300;
   }
 
   hr {
-    @apply h-0.5 border-solid bg-zinc-500 dark:bg-zinc-400;
+    @apply h-0.5 border-solid bg-zinc-300 dark:bg-zinc-600;
   }
 }