v4.0..0

Author: ChristineTham

README.md

@@ -231,6 +231,11 @@ All commands are run from the root of the project, from a terminal:
   - Make BlogHero accept post as props rather than frontmatter
   - Moved Markdown pages to content collection
   - Eliminated Frontmatter type
-- 3.4.1: Maintenance:
+- 4.0.0: Major changes:
   - Updated packages
-  - Removed @types/photoswipe and photoswipe tsconfig
+  - Removed @types/photoswipe and photoswipe tsconfig
+  - Moved to RSS schema
+  - getPosts() function
+  - schema tags
+  - automatically generated sidebar links
+  - improved RSS and search metadata

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hello-astro",
   "description": "Hello Astro is a full featured Astro corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.",
-  "version": "3.4.1",
+  "version": "4.0.0",
   "scripts": {
     "dev": "astro dev",
     "clean": "rm -rf node_modules .astro dist",
@@ -50,7 +50,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.3",
     "unist-util-visit": "^5.0.0",
-    "vite": "^5.2.6"
+    "vite": "^5.2.7"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",

pnpm-lock.yaml

@@ -38,43 +38,51 @@ if (post.data.author) {
         alt={post.data.title + ' featured image'}
         class='relative h-64 w-full overflow-hidden rounded-lg bg-purple-100 object-cover object-center group-hover:opacity-75 dark:bg-purple-800'
       />
-      <p class='sr-only'>{post.data.title}</p>
+      <p itemprop='name' class='sr-only'>{post.data.title}</p>
     </a>
     <div class='p-6'>
       {post.data.categories && <Categories categories={post.data.categories} />}
-      <a href={import.meta.env.BASE_URL + 'blog/' + post.slug}>
+      <a itemprop='url' href={import.meta.env.BASE_URL + 'blog/' + post.slug}>
         <h1
+          itemprop='name'
           class='title-font mt-2 text-xl font-bold text-purple-600 hover:text-pink-600 dark:text-purple-300 dark:hover:text-pink-300'
         >
           {post.data.title}
         </h1>
       </a>
       <div class='flex flex-wrap items-center'>
-        <span
-          class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'
-        >
-          <Icon class='mr-1 h-4 w-4' name='heroicons:calendar-days' />
-          {post.data.publishDate.toDateString()}
-        </span>
         {
-          post.data.minutesRead && (
-            <span class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'>
-              <Icon class='mr-1 h-4 w-4' name='heroicons:clock' />
-              {post.data.minutesRead}
+          post.data.pubDate && (
+            <span
+              itemprop='datePublished'
+              class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'
+            >
+              <Icon class='mr-1 h-4 w-4' name='heroicons:calendar-days' />
+              {post.data.pubDate.toDateString()}
             </span>
           )
         }
         {
-          post.data.author && (
-            <span class='text-rosely1 dark:text-rosely7 inline-flex items-center text-xs leading-none'>
-              <Icon class='mr-1 h-4 w-4' name='heroicons:user-circle' />
-              {author.data.title}
+          post.data.minutesRead && (
+            <span class='mr-3 inline-flex items-center border-r-2 border-purple-200 py-1 pr-3 text-xs leading-none text-gray-500 dark:border-purple-600 dark:text-gray-400'>
+              <Icon class='mr-1 h-4 w-4' name='heroicons:clock' />
+              {post.data.minutesRead}
             </span>
           )
         }
+        <span
+          itemprop='author'
+          class='inline-flex items-center text-xs leading-none text-gray-500 dark:text-gray-400'
+        >
+          <Icon class='mr-1 h-4 w-4' name='heroicons:user-circle' />
+          {author.data.title}
+        </span>
       </div>
 
-      <p class='mt-3 text-sm italic text-gray-600 dark:text-gray-300'>
+      <p
+        itemprop='abstract description'
+        class='mt-3 text-sm italic text-gray-600 dark:text-gray-300'
+      >
         {post.data.description}
       </p>
       <Tags tags={post.data.tags} />

src/components/blogcard.astro

@@ -34,6 +34,7 @@ if (post.data.author) {
   >
   </div>
   <Image
+    itemprop='image'
     src={image}
     alt='featured image'
     class='absolute left-0 top-0 z-0 h-full w-full object-cover'
@@ -47,24 +48,22 @@ if (post.data.author) {
       {post.data.description}
     </h2>
     <span class='mt-3 flex'>
+      <span class='mr-6 flex items-center'>
+        <Image
+          src={author.data.image}
+          alt={author.data.title}
+          class='mr-2 h-10 w-10 rounded-full object-cover'
+        />
+        <span class='font-semibold text-purple-200'>{author.data.title}</span>
+      </span>
       {
-        post.data.author && (
+        post.data.pubDate && (
           <span class='mr-6 flex items-center'>
-            <Image
-              src={author.data.image}
-              alt={author.data.title}
-              class='mr-2 h-10 w-10 rounded-full object-cover'
-            />
-            <span class='font-semibold text-purple-200'>{author.data.title}</span>
+            <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons:calendar-days' />
+            <span class='ml-1 font-semibold text-purple-200'>{post.data.pubDate.toString()}</span>
           </span>
         )
       }
-      <span class='mr-6 flex items-center'>
-        <Icon class='mr-1 h-6 w-6 text-purple-200' name='heroicons:calendar-days' />
-        <span class='ml-1 font-semibold text-purple-200'>
-          {new Date(post.data.publishDate).toString()}
-        </span>
-      </span>
       {
         post.data.minutesRead && (
           <span class='flex items-center'>

src/components/bloghero.astro

@@ -9,6 +9,11 @@ export interface Props {
 const { posts } = Astro.props
 ---
 
-<div class='flex flex-wrap space-y-12 dark:bg-gray-900 lg:space-y-0'>
+<div
+  itemprop='mainEntity'
+  itemscope
+  itemtype='https://schema.org/Article'
+  class='flex flex-wrap space-y-12 dark:bg-gray-900 lg:space-y-0'
+>
   {posts.map((post) => <BlogCard post={post} />)}
 </div>

src/components/blogroll.astro

@@ -54,9 +54,6 @@ const images = folderFiles.map((image) => imageFiles[image])
   // @ts-ignore
   import Swiper from 'swiper/bundle'
 
-  // import Swiper styles
-  import 'swiper/css/bundle'
-
   new Swiper('.mySwiper', {
     cssMode: true,
     // lazy: true,