Reading pages, sorting posts correctly

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+
+## [Untagged]
+
+### Features
+- Display tags page navigation and filtering
+- Improve page title display
+- Add hero images to blog posts and pages
+- Enhance cards and SEO in /pages section
+- Update post configuration for better population
+- Add more posts to /blog with date sorting
+- Display links in homepage
+
+### Fixed
+- Fix search page functionality
+- Fix bug in Strapi local setup
+- Remove unnecessary Dockerfile
+
 ## v4.3.1 (2024-07-27)
 
 ### Fix
@@ -74,7 +91,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Others
 
-* adds blog post for how to add a social icon ([#221](https://github.com/satnaing/astro-paper/issues/221)) 
+* adds blog post for how to add a social icon ([#221](https://github.com/satnaing/astro-paper/issues/221))
 * updates the hook post with a smarter updateHook ([#222](https://github.com/satnaing/astro-paper/issues/222))
 * update breadcrumbs delimiter to "»" ([#213](https://github.com/satnaing/astro-paper/issues/213))
 

src/components/Card.tsx

@@ -1,35 +1,75 @@
-import { slugifyStr } from "@utils/slugify";
-import Datetime from "./Datetime";
-import type { CollectionEntry } from "astro:content";
+import Tag from './Tag.astro';
+import type { SEO } from '../interfaces/Article';
 
 export interface Props {
   href?: string;
-  frontmatter: CollectionEntry<"blog">["data"];
+  author?: string;
+  tags: string[];
+  frontmatter: {
+    title: string;
+    pubDatetime: Date;
+    modDatetime: Date;
+    description: string;
+    SEO?: SEO;
+    author?: string;
+  };
   secHeading?: boolean;
 }
 
-export default function Card({ href, frontmatter, secHeading = true }: Props) {
-  const { title, pubDatetime, modDatetime, description } = frontmatter;
-
-  const headerProps = {
-    style: { viewTransitionName: slugifyStr(title) },
-    className: "text-lg font-medium decoration-dashed hover:underline",
-  };
+export default function Card({ href, frontmatter, tags, secHeading = true }: Props) {
+  const { title, pubDatetime, description, SEO } = frontmatter;
+  const imageUrl = SEO?.socialImage?.url;
 
   return (
-    <li className="my-6">
-      <a
-        href={href}
-        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
-      >
-        {secHeading ? (
-          <h2 {...headerProps}>{title}</h2>
-        ) : (
-          <h3 {...headerProps}>{title}</h3>
-        )}
-      </a>
-      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
-      <p>{description}</p>
+    <li className="mb-8">
+      <article className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
+        <a href={href} className="block group">
+          {imageUrl && (
+            <div className="relative aspect-video overflow-hidden">
+              <img
+                src={imageUrl}
+                alt={SEO?.socialImage?.alternativeText || title}
+                className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500"
+                width={SEO?.socialImage?.width}
+                height={SEO?.socialImage?.height}
+                loading="lazy"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            </div>
+          )}
+          <div className="p-6">
+            {secHeading ? (
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent-500 transition-colors">
+                {title}
+              </h2>
+            ) : (
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent-500 transition-colors">
+                {title}
+              </h3>
+            )}
+            <div className="flex items-center gap-2 mb-3">
+              <span className="px-3 py-1 text-xs font-medium bg-accent-100 text-accent-700 dark:bg-accent-900/30 dark:text-accent-300 rounded-full">
+                {new Date(pubDatetime).toLocaleDateString()}
+              </span>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 line-clamp-3 mb-4">
+              {description}
+            </p>
+            <div className="flex items-center text-accent-500 dark:text-accent-400 font-medium">
+              Read more
+              <svg className="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5-5 5M6 7l5 5-5 5" />
+              </svg>
+            </div>
+            <ul>
+              {tags?.map((tag) => {
+                if (!tag) return null;
+                <Tag tag={tag || 'x'} size="sm" />
+              })}
+            </ul>
+          </div>
+        </a>
+      </article>
     </li>
   );
 }

src/components/Footer.astro

@@ -6,19 +6,26 @@ const currentYear = new Date().getFullYear();
 
 export interface Props {
   noMarginTop?: boolean;
+  activeNav?: string;
 }
 
-const { noMarginTop = false } = Astro.props;
+const { activeNav, noMarginTop = false } = Astro.props;
 ---
 
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
   <Hr noPadding />
-  <div class="footer-wrapper">
+  <div class="footer-wrapper mb-10">
     <Socials centered />
     <div class="copyright-wrapper">
       <span>Copyleft &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>
       <span>Some rights reserved.</span>
+      &nbsp;|&nbsp;
+      <span>
+        <a href="/pages/" class={activeNav === "pages" ? "active" : ""}>
+          Pages
+        </a>
+      </span>
     </div>
   </div>
 </footer>

src/components/Header.astro

@@ -5,7 +5,7 @@ import LinkButton from "./LinkButton.astro";
 import type Store from "../interfaces/Store";
 
 export interface Props {
-  activeNav?: "posts" | "tags" | "about" | "search";
+  activeNav?: "posts" | "tags" | "about" | "search" | "pages";
   store?: Store;
 }
 

src/components/HeroImage.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  image: {
+    url: string;
+    alternativeText?: string | null;
+    width?: number;
+    height?: number;
+  };
+  title: string;
+}
+
+const { image, title } = Astro.props;
+---
+
+{
+  image && (
+    <div class="relative mb-6 aspect-video w-full overflow-hidden rounded-xl">
+      <img
+        src={image.url}
+        alt={image.alternativeText || title}
+        width={image.width}
+        height={image.height}
+        class="h-full w-full object-cover"
+        loading="eager"
+      />
+      <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
+    </div>
+  )
+}

src/components/Search.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState, useMemo } from "react";
 import Card from "@components/Card";
@@ -113,13 +114,14 @@ export default function SearchBar({ searchList }: Props) {
           searchResults.map(({ item, refIndex }) => (
             <Card
               href={item.slug}
+              tags={item?.data?.Tags?.map((tag: { Label: string }) => tag.Label) || []}
               frontmatter={{
                 author: "x",
-                tags: item.data.Tags.map(tag => tag.Label),
                 title: item.data.Title,
                 pubDatetime: new Date(item.data.createdAt),
                 modDatetime: new Date(item.data.updatedAt),
                 description: item.data.SEO?.metaDescription || "",
+                SEO: item.data?.SEO,
               }}
               key={`${refIndex}-${item.slug}`}
             />

src/config.ts

@@ -6,15 +6,15 @@ export const markketplace = {
 };
 
 export const SITE: Site = {
-  website: "https://morirsoniando.com/",
+  website: "https://markket.place/",
   author: "Club Calima",
   profile: "https://caliman.org/",
   desc: "A minimal, responsive and SEO-friendly Markketplace theme.",
   title: "Morir Soñando",
-  ogImage: "astropaper-og.jpg",
+  ogImage: "https://markketplace.nyc3.digitaloceanspaces.com/uploads/3852868ed9aad1e45e4ee4992fe43177.png",
   lightAndDarkMode: true,
   postPerIndex: 4,
-  postPerPage: 3,
+  postPerPage: 8,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
 };
 
@@ -56,12 +56,6 @@ export const SOCIALS: SocialObjects = [
   //   active: false,
   // },
   // {
-  //   name: "Twitter",
-  //   href: "https://github.com/satnaing/astro-paper",
-  //   linkTitle: `${SITE.title} on Twitter`,
-  //   active: false,
-  // },
-  // {
   //   name: "Twitch",
   //   href: "https://github.com/satnaing/astro-paper",
   //   linkTitle: `${SITE.title} on Twitch`,
@@ -145,4 +139,9 @@ export const SOCIALS: SocialObjects = [
   //   linkTitle: `${SITE.title} on Mastodon`,
   //   active: false,
   // },
+  //   name: "BlueSky",
+  //   href: "https://bsky.app/profile/markketplace.bsky.social",
+  //   linkTitle: `${SITE.title} on BlueSKy`,
+  //   active: false,
+  // },
 ];

src/content/config.ts

@@ -3,16 +3,24 @@ import { defineCollection } from "astro:content";
 
 import { strapiLoader } from "../lib/strapi-loader";
 
-const posts = defineCollection({
-  loader: strapiLoader({ contentType: "article", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}` }),
-});
 
 const pages = defineCollection({
-  loader: strapiLoader({ contentType: "page", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}` }),
+  loader: strapiLoader({
+    contentType: "page", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
+    populate: 'SEO.socialImage,store'
+  }),
+
 });
 
 const stores = defineCollection({
   loader: strapiLoader({ contentType: "store", filter: `filters[slug][$eq]=${markketplace.STORE_SLUG}` }),
 });
 
+const posts = defineCollection({
+  loader: strapiLoader({
+    contentType: "article", filter: `filters[store][slug][$eq]=${markketplace.STORE_SLUG}`,
+    populate: 'SEO.socialImage,Tags,store'
+  }),
+});
+
 export const collections = { posts, pages, stores };

src/interfaces/Article.ts

@@ -0,0 +1,17 @@
+export interface Tag {
+  Label: string;
+  Color: string;
+}
+
+export interface SEOImage {
+  url: string;
+  alternativeText: string | null;
+  width: number;
+  height: number;
+}
+
+export interface SEO {
+  metaTitle: string;
+  metaDescription: string;
+  socialImage?: SEOImage;
+}

src/interfaces/Page.ts

@@ -29,6 +29,7 @@ export default interface Page {
   SEO: {
     metaDescription: string,
     metaTitle: string,
+    socialImage: {},
   },
   createdAt: string;
   updatedAt: string;

src/interfaces/Store.ts

@@ -8,6 +8,7 @@ export default interface Store {
   slug: string;
   products: { data: [] };
   URLS: { Label: string, URL: string, }[];
+  SEO: {};
   Logo: {
     id: string,
     url: string,

src/layouts/Layout.astro

@@ -1,7 +1,8 @@
 ---
-import { LOCALE, SITE } from "@config";
+import { LOCALE, SITE, markketplace } from "@config";
 import "@styles/base.css";
 import { ViewTransitions } from "astro:transitions";
+import { getCollection } from "astro:content";
 
 const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
 
@@ -21,7 +22,7 @@ const {
   title = SITE.title,
   author = SITE.author,
   profile = SITE.profile,
-  description = SITE.desc,
+  description = Astro.props.description ?? SITE.desc,
   ogImage = SITE.ogImage,
   canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
   pubDatetime,
@@ -49,6 +50,11 @@ const structuredData = {
     },
   ],
 };
+
+const stores = await getCollection("stores");
+const store = stores.find(
+  store => store.data.slug == markketplace.STORE_SLUG
+)?.data;
 ---
 
 <!doctype html>
@@ -64,17 +70,26 @@ const structuredData = {
     <meta name="generator" content={Astro.generator} />
 
     <!-- General Meta Tags -->
-    <title>{title}</title>
-    <meta name="title" content={title} />
-    <meta name="description" content={description} />
+    <title>{store?.title || title}</title>
+    <meta name="title" content={store?.title || title} />
+    <meta name="description" content={store?.Description || description} />
     <meta name="author" content={author} />
     <link rel="sitemap" href="/sitemap-index.xml" />
 
     <!-- Open Graph / Facebook -->
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:url" content={canonicalURL} />
-    <meta property="og:image" content={socialImageURL} />
+    <meta
+      property="og:title"
+      content={store?.SEO?.metaTitle || store?.title || title}
+    />
+    <meta
+      property="og:description"
+      content={store?.SEO?.metaDescription || store?.Description || description}
+    />
+    <meta property="og:url" content={store?.SEO?.metaUrl || canonicalURL} />
+    <meta
+      property="og:image"
+      content={store?.SEO?.socialImage?.url || socialImageURL}
+    />
 
     <!-- Article Published/Modified time -->
     {