Merge pull request #11 from calimania/feat/blogps

Blog path fixes
calimania · Dec 9, 2024 · eacfe99 · eacfe99
2 parents 0d560c8 + 4dc42ec
commit eacfe99
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 24 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -11,7 +11,7 @@ export const markketplace = {
 
 export const SITE: Site = {
   website: "https://markket.place/",
-  author: "Club Calima",
+  author: "Markket",
   profile: "https://caliman.org/",
   desc: "A minimal, responsive and SEO-friendly Markketplace theme.",
   title: "Morir Soñando",

diff --git a/src/content/blog/hacktoberfest-2024.md b/src/content/blog/hacktoberfest-2024.md
@@ -46,7 +46,7 @@ This year, we’re inviting developers, designers, artists, and enthusiasts from
  -  [api - strapi](https://github.com/calimania/markketplace)
  - [front end - astro](https://github.com/calimania/markketplace-astro)
 3. Dive into the code, docs, or designs, and start contributing!
-4. Join our [**newsletter**](/posts/calima-newsletter/) to chat with our team, ask questions, or get feedback on your work.
+4. Join our [**newsletter**](/newsletter/) to chat with our team, ask questions, or get feedback on your work.
 
 ## A Big Thank You to DigitalOcean
 

diff --git a/src/interfaces/Page.ts b/src/interfaces/Page.ts
@@ -1,3 +1,4 @@
+import type { SEOImage } from "./Article";
 /**
  *  Store Interface
  */
@@ -29,7 +30,7 @@ export default interface Page {
   SEO: {
     metaDescription: string,
     metaTitle: string,
-    socialImage: {},
+    socialImage: SEOImage,
   },
   createdAt: string;
   updatedAt: string;

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,7 +2,7 @@
 import { LOCALE, SITE, markketplace } from "@config";
 import "@styles/base.css";
 import { ViewTransitions } from "astro:transitions";
-import { getCollection } from "astro:content";
+import { getCollection, type CollectionEntry } from "astro:content";
 
 const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
 
@@ -16,6 +16,12 @@ export interface Props {
   pubDatetime?: Date;
   modDatetime?: Date | null;
   scrollSmooth?: boolean;
+  post?: CollectionEntry<"posts">;
+  meta?: {
+    title: string;
+    image: string;
+    description: string;
+  };
 }
 
 const {
@@ -27,7 +33,9 @@ const {
   canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
   pubDatetime,
   modDatetime,
+  post,
   scrollSmooth = false,
+  meta,
 } = Astro.props;
 
 const socialImageURL = new URL(
@@ -55,6 +63,7 @@ const stores = await getCollection("stores");
 const store = stores.find(
   store => store.data.slug == markketplace.STORE_SLUG
 )?.data;
+console.log({ store });
 ---
 
 <!doctype html>
@@ -65,30 +74,63 @@ const store = stores.find(
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      href={`${store?.Favicon || "/favicon.png"}`}
+    />
     <link rel="canonical" href={canonicalURL} />
     <meta name="generator" content={Astro.generator} />
 
     <!-- General Meta Tags -->
-    <title>{store?.title || title}</title>
-    <meta name="title" content={store?.title || title} />
-    <meta name="description" content={store?.Description || description} />
+    <title>
+      {
+        meta?.title ||
+          post?.data?.SEO?.metaTitle ||
+          store?.SEO?.metaTitle ||
+          store?.title ||
+          title
+      }
+    </title>
+
+    <meta
+      name="description"
+      content={meta?.description ||
+        post?.data?.SEO?.metaDescription ||
+        store?.SEO?.metaDescription ||
+        store?.Description ||
+        description}
+    />
     <meta name="author" content={author} />
     <link rel="sitemap" href="/sitemap-index.xml" />
 
     <!-- Open Graph / Facebook -->
     <meta
       property="og:title"
-      content={store?.SEO?.metaTitle || store?.title || title}
+      content={meta?.title ||
+        post?.data?.SEO?.metaTitle ||
+        store?.SEO?.metaTitle ||
+        store?.title ||
+        title}
     />
     <meta
       property="og:description"
-      content={store?.SEO?.metaDescription || store?.Description || description}
+      content={meta?.description ||
+        post?.data?.SEO?.metaDescription ||
+        store?.SEO?.metaDescription ||
+        store?.Description ||
+        description}
+    />
+    <meta
+      property="og:url"
+      content={post?.data?.SEO?.metaUrl || store?.SEO?.metaUrl || canonicalURL}
     />
-    <meta property="og:url" content={store?.SEO?.metaUrl || canonicalURL} />
     <meta
       property="og:image"
-      content={store?.SEO?.socialImage?.url || socialImageURL}
+      content={meta?.image ||
+        post?.data?.SEO?.socialImage?.url ||
+        store?.SEO?.socialImage?.url ||
+        socialImageURL}
     />
 
     <!-- Article Published/Modified time -->
@@ -109,13 +151,6 @@ const store = stores.find(
       )
     }
 
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content={canonicalURL} />
-    <meta property="twitter:title" content={title} />
-    <meta property="twitter:description" content={description} />
-    <meta property="twitter:image" content={socialImageURL} />
-
     <!-- Google JSON-LD Structured data -->
     <script
       type="application/ld+json"

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -51,6 +51,7 @@ const layoutProps = {
   canonicalURL,
   ogImage: ogUrl,
   scrollSmooth: true,
+  post: post,
 };
 ---
 

diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
@@ -7,6 +7,10 @@ import Footer from "@components/Footer.astro";
 import Pagination from "@components/Pagination.astro";
 import Card from "@components/Card";
 import { SITE } from "@config";
+import type Page from "@interfaces/Page";
+import { BlocksRenderer } from "@strapi/blocks-react-renderer";
+import HeroImage from "@components/HeroImage.astro";
+import Hr from "@components/Hr.astro";
 
 export interface Props {
   currentPage: number;
@@ -22,10 +26,44 @@ const stores = await getCollection("stores");
 const store = stores?.[0]?.data as unknown as Store;
 
 const { currentPage, totalPages, paginatedPosts } = Astro.props;
+
+const pages = await getCollection("pages");
+const blogPage: { data: Page } | undefined = pages.find(
+  (page: { data: Page }) => page.data.slug === "blog"
+);
 ---
 
-<Layout title={`Posts | ${SITE.title}`}>
+<Layout
+  title={`Posts | ${SITE.title}`}
+  meta={{
+    title: blogPage?.data?.SEO?.metaTitle || "Blog",
+    image: blogPage?.data?.SEO?.socialImage?.url || "",
+    description: blogPage?.data?.SEO?.metaDescription || "",
+  }}
+>
   <Header activeNav="blog" store={store} />
+  <main id="main-content">
+    <section id="about" class="mb-10 max-w-3xl prose-img:border-0">
+      {
+        blogPage?.data?.SEO?.socialImage && (
+          <HeroImage
+            image={blogPage?.data?.SEO?.socialImage}
+            title={blogPage?.data?.Title}
+          />
+        )
+      }
+      <h1 class="text-2xl tracking-wider sm:text-3xl">
+        {blogPage?.data?.Title}
+      </h1>
+    </section>
+
+    <section class="">
+      <BlocksRenderer
+        content={blogPage?.data?.Content || ([] as BlocksContent[])}
+      />
+    </section>
+    <Hr />
+  </main>
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
       {

diff --git a/src/layouts/TagPosts.astro b/src/layouts/TagPosts.astro
@@ -43,9 +43,9 @@ const {
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
     <ul>
       {
-        paginatedPosts.map(({ data, id }) => (
+        paginatedPosts.map(({ data }) => (
           <Card
-            href={`/posts/${id}-${slugifyStr(data.Title)}`}
+            href={`/blog/${new Date(data.updatedAt).getFullYear()}-${slugifyStr(data.Title)}`}
             tags={data.Tags.map((tag: { Label: string }) => tag.Label)}
             frontmatter={{
               author: "x",

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -130,7 +130,7 @@ const links = store?.URLS || [];
                 ({ data, id }, index) =>
                   index < SITE.postPerIndex && (
                     <Card
-                      href={`/posts/${id}-${slugifyStr(data.Title)}`}
+                      href={`/blog/${new Date(data.updatedAt).getFullYear()}-${slugifyStr(data.Title)}`}
                       frontmatter={{
                         author: "x",
                         tags: data.Tags?.map(tag => tag.Label),
@@ -150,7 +150,7 @@ const links = store?.URLS || [];
       }
 
       <div class="all-posts-btn-wrapper">
-        <LinkButton href="/posts/">
+        <LinkButton href="/blog/">
           All Posts
           <svg xmlns="http://www.w3.org/2000/svg">
             <path