Small adjustments associated with Relative Posts

Author: prototypa

.vscode/astrowind/config-schema.json

@@ -128,6 +128,12 @@
             "postsPerPage": {
               "type": "integer"
             },
+            "isRelatedPostsEnabled": {
+              "type": "boolean"
+            },
+            "relatedPostsCount": {
+              "type": "integer"
+            },
             "post": {
               "type": "object",
               "properties": {

README.md

@@ -119,8 +119,7 @@ There's nothing special about `src/components/`, but that's where we like to put
 
 Any static assets, like images, can be placed in the `public/` directory if they do not require any transformation or in the `assets/` directory if they are imported directly.
 
-
-[![Edit AstroWind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/astrowind/tree/main)  [![Open in Gitpod](https://svgshare.com/i/xdi.svg)](https://gitpod.io/?on=gitpod#https://github.com/onwidget/astrowind)  [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/onwidget/astrowind)   
+[![Edit AstroWind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/astrowind/tree/main) [![Open in Gitpod](https://svgshare.com/i/xdi.svg)](https://gitpod.io/?on=gitpod#https://github.com/onwidget/astrowind) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/onwidget/astrowind)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file `README.md`. Update `src/config.yaml` and contents. Have fun!
 
@@ -182,8 +181,8 @@ i18n:
 
 apps:
   blog:
-    isEnabled: true
-    postsPerPage: 6
+    isEnabled: true # If the blog will be enabled
+    postsPerPage: 6 # Number of posts per page
 
     post:
       isEnabled: true
@@ -209,6 +208,9 @@ apps:
       robots:
         index: false
 
+    isRelatedPostsEnabled: true # If a widget with related posts is to be displayed below each post
+    relatedPostsCount: 4 # Number of related posts to display
+
 analytics:
   vendors:
     googleAnalytics:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onwidget/astrowind",
   "description": "AstroWind: A free template using Astro 4.0 and Tailwind CSS. Astro starter theme.",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/blog/ListItem.astro

@@ -50,24 +50,27 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
           <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
           {
-            post.category && (
+            post.author && (
               <>
                 {' '}
                 ·{' '}
-                <a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
-                  {post.category.replaceAll('-', ' ')}
-                </a>
+                <Icon name="tabler:user" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
+                <span>{post.author.replaceAll('-', ' ')}</span>
               </>
             )
           }
           {
-            post.author && (
+            post.category && (
               <>
                 {' '}
-                · <span>{post.author.replaceAll('-', ' ')}</span>
+                ·{' '}
+                <a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
+                  {post.category.replaceAll('-', ' ')}
+                </a>
               </>
             )
           }
+          
         </span>
       </div>
       <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">

src/components/blog/SinglePost.astro

@@ -26,6 +26,15 @@ const { Content } = post;
         <p>
           <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
+          {
+            post.author && (
+              <>
+                {' '}
+                ·{' '}<Icon name="tabler:user" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
+                <span class="inline-block">{post.author}</span>
+              </>
+            )
+          }
           {
             post.category && (
               <>
@@ -40,16 +49,7 @@ const { Content } = post;
           {post.readingTime && <> · {post.readingTime} min read</>}
         </p>
       </div>
-      {
-        post.author && (
-          <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
-            <p>
-              <Icon name="tabler:user" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
-              {post.author}
-            </p>
-          </div>
-        )
-      }
+
       <h1
         class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
       >
@@ -84,13 +84,7 @@ const { Content } = post;
     <div
       class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
     >
-      {
-        Content ? (
-          <Content />
-        ) : (
-          <Fragment set:html={post.content || ""} />
-        )
-      }
+      {Content ? <Content /> : <Fragment set:html={post.content || ''} />}
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
       <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />

src/config.yaml

@@ -35,8 +35,6 @@ apps:
   blog:
     isEnabled: true
     postsPerPage: 6
-    isRelatedPostsEnabled: true
-    relatedPostsCount: 4
 
     post:
       isEnabled: true
@@ -62,6 +60,9 @@ apps:
       robots:
         index: false
 
+    isRelatedPostsEnabled: true
+    relatedPostsCount: 4
+
 analytics:
   vendors:
     googleAnalytics:

src/utils/config.ts

@@ -138,6 +138,8 @@ const getAppBlog = () => {
   const _default = {
     isEnabled: false,
     postsPerPage: 6,
+    isRelatedPostsEnabled: false,
+    relatedPostsCount: 4,
     post: {
       isEnabled: true,
       permalink: '/blog/%slug%',